시작

견주(유저)가 가입신청 승인 이후 프로필 설정 페이지로 넘어가게 된다.

내가 기대하는 액션 플로우

1. 이미지 썸네일이 표시되는 영역 클릭
2. 버튼 UI 활성화 (active 상태)
3. 버튼 UI 활성화 상태에서 다시 클릭 시 이미지 업로드 창 띄워지기

이미지 업로드 시	이미지 선택 시

발생한 이슈

ios 모바일 환경에선 active UI는 표시 되는데 이를 클릭 할 경우 이미지 업로드 창이 띄워지지 않았다.
해당 페이지는 가입신청 절차에서 무조건 진행 되어야 하는 플로우로 이슈를 확인 하고 빠르게 해결했어야 했다.

다만 다른 환경에선 잘 되는데 ios 모바일 환경에서 적용이 안 되고 있는 상황이였다.

1. ios 환경에서 onBlur 이슈

원래라면 button이 focus되면 active UI가 표시되고 다른 곳 터치(onBlur) 할 경우 해당 active UI가 풀려야 한다.

ios 모바일 환경에서 onBlur가 제대로 적용되지 않는 이슈가 있었다.

ios환경에서 onBlur 이슈 관련 레퍼런스

https://stackoverflow.com/questions/61245883/why-blur-and-focus-doesnt-work-on-safari

https://stackoverflow.com/questions/13492881/why-is-blur-event-not-fired-in-ios-safari-mobile-iphone-ipad?rq=3

구글링 해보니 ios 모바일 환경에서는 다른 영역을 터치해도 focus는 아직 이전 영역에 머물러 있어 blur가 제대로 동작하지 않을 수도 있다고 한다.

프로필 설정은 ProfileUploadBox 컴포넌트에서 관리되고 있다.

프로필 수정, 등록으로 나뉘게 되지만 동일한 기능을 하고 있어 관리하기 편리하도록 묶어 두었다.
현재 다양한 환경을 생각하지 않고 구조를 작성 + 불필요한 코드가 많아 코드 개선이 필요했다.

// ProfileUploadBox.tsx 수정 전
type Mode = "create" | "edit";

interface ProfileUploadProps {
  type: string;
  isActive?: boolean;
  setIsActive?: React.Dispatch<React.SetStateAction<boolean>>;
  fileRef?: React.RefObject<HTMLInputElement>;
  fileName: string;
  mode: Mode;
  onClick?: () => void;
}

const ProfileUploadBox = ({
  type,
  isActive,
  setIsActive,
  fileRef,
  fileName,
  mode,
  onClick
}: ProfileUploadProps) => {
  const { setValue } = useFormContext();
  const [profile, setProfile] = useState<IFile[]>([]);

  const handleClick = () => {
    if (fileRef && fileRef.current) {
      mode === "create" && isActive ? setIsActive && setIsActive(false) : fileRef.current.click();
    }
    onClick && onClick();
  };

  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
    const FileList = e.target.files;

    if (!FileList) {
      showToast("업로드할 파일이 없습니다.", "ownerNav");
      return;
    }

    // 파일 변경 없을 경우
    if (FileList.length <= 0) {
      if (!isActive && setIsActive) setIsActive(true);
      return;
    }

    if (FileList) {
      const newFiles = Array.from(FileList);
      const fileArray = await Promise.all(newFiles.map(getFilePreview));

      setProfile([...fileArray]);
      setValue(fileName, [...newFiles], { shouldValidate: true });
      if (mode === "create" && setIsActive) setIsActive(true);
    }
  };

  return (
    <>
      {mode === "create" && (
        <ProfileCreate
          isActive={isActive}
          setIsActive={setIsActive}
          profile={profile}
          fileInputRef={fileRef}
          handleFileChange={handleFileChange}
          handleClick={handleClick}
          registerText={fileName}
          type={type}
        />
      )}
      {mode === "edit" && (
        <ProfileEdit
          profile={profile}
          handleFileChange={handleFileChange}
          handleClick={handleClick}
          registerText={fileName}
          type={type}
        />
      )}
    </>
  );
};

export default ProfileUploadBox;

// ProfileCreate 수정 전
const ProfileCreate = ({
  isActive,
  setIsActive,
  profile,
  fileInputRef,
  handleFileChange,
  registerText,
  type
}: ProfileCreateProps) => {
  const divRef = useRef<HTMLButtonElement>(null);
  const { register } = useFormContext();
  const handleClickTarget = () => {
    divRef?.current?.focus();
  };

  const handleActive = () => {
    isActive && setIsActive?.(false);
  };

  return (
    <Flex align="center" direction="column" justify="center" gap="12" width="100%">
      <S.ProfileBox>
        <S.UploadProfileButton
          id={type}
          onClick={handleClickTarget}
          onBlur={() => setIsActive?.(true)}
          ref={divRef}
          aria-label="uploadProfileButton"
        >
          {profile.length > 0 ? (
            <>
              <S.UploadImage
                onClick={handleActive}
                src={profile[0].thumbnail}
                alt={`${type}-profile`}
              />
              {!isActive && <ProfileActiveBox htmlFor={registerText} />}
            </>
          ) : (
            <>
              <S.ProfileLabel htmlFor={registerText} />
              <AddCIcon />
            </>
          )}
        </S.UploadProfileButton>
      </S.ProfileBox>

      <S.StyledHiddenUpload
        {...register(registerText, {
          required: true,
          onChange: (e) => handleFileChange(e, type)
        })}
        ref={fileInputRef}
        id={registerText}
        type="file"
        accept={ACCEPT_FILE_TYPE.IMAGE}
      />
    </Flex>
  );
};

1) ios 환경으로 확인을 어떻게 하지?

해당 이슈는 PC 환경이 아닌 Mobile 환경으로 웹에선 확인할 방법이 없었다.

맥북의 Xcode 프로그램을 통해 확인 하는 방법도 있지만
나의 노트북은 거의 6년이 넘어서 그런지... Xcode 시뮬레이터 버티질 못했다..ㅠ

그러다 휴대폰에서도 local 환경을 확인 할 수 있는 방법을 알아 냈고
코드 수정 시 실시간으로 반영되어 나중에도 모바일 환경 작업을 할 때도 유용하게 사용할 것 같다.

아이폰에서 local 환경 띄우기

1. 맥북, 아이폰이 동일한 와이파이를 사용하고 있는지 확인
2. 맥북에 연결되어 있는 와이파이 아이피 주소 확인
3. 아이피주소:3000 을 아이폰 사파리 주소창에 입력

모바일 기기에서 localhost 접속하는 방법

2) ios 환경에서의 문제점 확인

button의 onBlur={() => setIsActive?.(true)} 가 정확히 동작하지 않아 ProfileActiveBox가 활성화 되어도 file upload 화면을 띄우지 않는 점이였다.

onBlur로 했던 이유는 최대한 함수를 생성하지 않고 해결할 수 있는 방법으로 작업 했었다.

전달하는 데이터 구조 변경

우선 isActive인 boolean state와 onBlur로 관리하던 코드 부터 수정했다.

isActive를 통해 ProfileActiveBox를 활성화 되도록 하던 부분을
현재 클릭한(active된) 데이터가 해당 type과 일치할 경우 boolean 값으로 표시하여 버튼 클릭 시 해당 영역만 활성화(true) 되도록 전달하는 데이터 구조를 변경 했다.

// 데이터 넘겨 줄 때 (수정 전)
const [isMyActive, setIsMyActive] = useState(false);
const [isDogActive, setIsDogActive] = useState(false);
const myFileInputRef = useRef<HTMLInputElement>(null);
const dogFileInputRef = useRef<HTMLInputElement>(null);

  const profileDatas = [
    {
      type: TYPE_NAME.MEMBER,
      isActive: isMyActive,
      setIsActive: setIsMyActive,
      fileName: FILE_NAME.PROFILE_MEMBER,
      fileRef: myFileInputRef
    },
    {
      type: TYPE_NAME.DOG,
      isActive: isDogActive,
      setIsActive: setIsDogActive,
      fileName: FILE_NAME.PROFILE_DOG,
      fileRef: dogFileInputRef
    }
  ];

// 데이터 넘겨 줄 때 (수정 후)
const [activeType, setActiveType] = useState("");
const myFileInputRef = useRef<HTMLInputElement>(null);
const dogFileInputRef = useRef<HTMLInputElement>(null);

const profileDatas = [
    {
      type: TYPE_NAME.MEMBER,
      isType: activeType === TYPE_NAME.MEMBER,
      fileName: FILE_NAME.PROFILE_MEMBER,
      fileRef: myFileInputRef
    },
    {
      type: TYPE_NAME.DOG,
      isType: activeType === TYPE_NAME.DOG,
      fileName: FILE_NAME.PROFILE_DOG,
      fileRef: dogFileInputRef
    }
  ];

전달하는 데이터구조 변경에 따라 코드 수정하기

또한 기존에 onBlur를 사용하던 버튼의 속성을 전부 지우고
실제로 클릭해야 하는 영역에 onClicke 이벤트를 추가해
만약 true인 경우 ProfileActiveBox가 활성화 되도록 수정했다.

const handleClickTarget = (currentType: string) => {
    setActiveType?.(currentType);
  };

return (
    <Flex align="center" direction="column" justify="center" gap="12" width="100%">
      <S.ProfileBox id={type}>
        <S.UploadProfileButton aria-label="uploadProfileButton">
          {profile.length > 0 ? (
            <>
              {isActiveType && (
                <S.ProfileLabel htmlFor={registerText} ref={labelRef}>
                  <ProfileActiveBox />
                </S.ProfileLabel>
              )}
              <S.UploadImage
                onClick={() => handleClickTarget(type)}
                src={profile[0].thumbnail}
                alt={`${type}-profile`}
              />
            </>
          ) : (
            <>
              <S.ProfileLabel htmlFor={registerText} />
              <AddCIcon />
            </>
          )}
        </S.UploadProfileButton>
      </S.ProfileBox>

      <S.StyledHiddenUpload
        {...register(registerText, {
          required: true,
          onChange: (e) => {
            handleFileChange(e, type);
          }
        })}
        ref={fileInputRef}
        id={registerText}
        type="file"
        accept={ACCEPT_FILE_TYPE.IMAGE}
      />
    </Flex>
  );

ProfileActiveBox에 ProfileLabel를 감싼 이유

최대한 태그 본연의 기능을 살리고 싶었다.
label 태그 속성의 htmlFor과 input 태그 속성의 id 값을 동일하게 해도 해당 영역 클릭 시 활성화 된다.

굳이 onClick 이벤트와 함수를 추가할 필요가 없기에 label 태그로 해결했다..

2. 또 다른 문제 발생

1) active는 제대로 되는데 다른 영역 클릭해도 계속 active 상태 되는 이슈

ios 환경에선 mousedown이 focus와 비슷하게 작용 된다고 한다.

const labelRef = useRef<HTMLLabelElement>(null);

const handleClickOutside = useCallback(
    (e: MouseEvent) => {
      const labelTarget = labelRef?.current;
      const inside = labelTarget?.contains(e.target as Node);

      if (inside) return;
      // 외부 클릭 시 모든 활성화 해제
      if (labelTarget && !inside) {
        setActiveType?.("");
      }
    },
    [setActiveType]
  );

  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [handleClickOutside, setActiveType]);

만약 labelTarget 말고 다른 영역 클릭 시 setActiveType에 빈 문자열을 주어 비활성화 되도록 했다.

2) 파일 업로드 상태에서 "취소" 버튼 클릭 할 경우 이슈

파일 업로드 시 "취소" 버튼 클릭 할 경우 계속 active 상태가 되어 있었다.

이땐 focus 이벤트를 활용하면 된다고 한다.
아마 취소 버튼 클릭 시 포커스가 해당 페이지(window)로 초점이 맞춰지기 때문에 가능하지 않나 추측해 본다.

다만 ios 환경에서는 focus 이벤트가 제대로 동작하고 있지 않아서 이점은 다시 확인이 필요할 것 같다...ㅠ

// ProfileUploadBox.tsx
const handleClick = () => {
    if (fileRef && fileRef.current) {
      mode === "create" && isActiveType ? setActiveType?.("") : fileRef.current.click();
    }
    onClick && onClick();
  };

  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
    const FileList = e.target.files;

    if (!FileList) {
      showToast("업로드할 파일이 없습니다.", "bottom");
      return;
    }

    // 파일 선택 후 "취소" 클릭 시
    if (FileList.length === 0) {
      setActiveType?.("");
      return;
    }

    if (FileList) {
      const newFiles = Array.from(FileList);
      const fileArray = await Promise.all(newFiles.map(getFilePreview));

      setProfile([...fileArray]);
      setValue(fileName, [...newFiles], { shouldValidate: true });
      if (mode === "create") setActiveType?.("");
    }
  };

  useEffect(() => {
    // FIXME 모바일 환경 focus 대체 이벤트 확인 후 수정 필요
    // 파일 미선택 후 "취소" 클릭 시
    window.addEventListener("focus", () => setActiveType?.(""));
    return () => {
      window.removeEventListener("focus", () => setActiveType?.(""));
    };
  }, [setActiveType]);

개선된 코드

// ProfileUploadBox.tsx
const ProfileUploadBox = ({
  type,
  fileRef,
  fileName,
  mode,
  onClick,
  isActiveType,
  setActiveType
}: ProfileUploadProps) => {
  const { setValue } = useFormContext();
  const [profile, setProfile] = useState<FileType[]>([]);

  const handleClick = () => {
    if (fileRef && fileRef.current) {
      mode === "create" && isActiveType ? setActiveType?.("") : fileRef.current.click();
    }
    onClick && onClick();
  };

  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
    const FileList = e.target.files;

    if (!FileList) {
      showToast("업로드할 파일이 없습니다.", "bottom");
      return;
    }

    // 파일 선택 후 "취소" 클릭 시
    if (FileList.length === 0) {
      setActiveType?.("");
      return;
    }

    if (FileList) {
      const newFiles = Array.from(FileList);
      const fileArray = await Promise.all(newFiles.map(getFilePreview));

      setProfile([...fileArray]);
      setValue(fileName, [...newFiles], { shouldValidate: true });
      if (mode === "create") setActiveType?.("");
    }
  };

  useEffect(() => {
    // FIXME 모바일 환경 focus 대채 이벤트 확인 후 수정 필요
    // 파일 미선택 후 "취소" 클릭 시
    window.addEventListener("focus", () => setActiveType?.(""));
    return () => {
      window.removeEventListener("focus", () => setActiveType?.(""));
    };
  }, [setActiveType]);

  return (
    <>
      {mode === "create" && (
        <ProfileCreate
          profile={profile}
          fileInputRef={fileRef}
          registerText={fileName}
          type={type}
          isActiveType={isActiveType}
          setActiveType={setActiveType}
          handleFileChange={handleFileChange}
          handleClick={handleClick}
        />
      )}
      {mode === "edit" && (
        <ProfileEdit
          profile={profile}
          registerText={fileName}
          type={type}
          handleFileChange={handleFileChange}
          handleClick={handleClick}
        />
      )}
    </>
  );
};

export default ProfileUploadBox;

// ProfileCreate.tsx
const ProfileCreate = ({
  profile,
  fileInputRef,
  registerText,
  type,
  isActiveType,
  setActiveType,
  handleFileChange
}: ProfileCreateProps) => {
  const labelRef = useRef<HTMLLabelElement>(null);
  const { register } = useFormContext();

  const handleClickTarget = (currentType: string) => {
    setActiveType?.(currentType);
  };

  const handleClickOutside = useCallback(
    (e: MouseEvent) => {
      const labelTarget = labelRef?.current;
      const inside = labelTarget?.contains(e.target as Node);

      if (inside) return;
      // 외부 클릭 시 모든 활성화 해제
      if (labelTarget && !inside) {
        setActiveType?.("");
      }
    },
    [setActiveType]
  );

  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [handleClickOutside, setActiveType]);

  return (
    <Flex align="center" direction="column" justify="center" gap="12" width="100%">
      <S.ProfileBox id={type}>
        <S.UploadProfileButton aria-label="uploadProfileButton">
          {profile.length > 0 ? (
            <>
              {isActiveType && (
                <S.ProfileLabel htmlFor={registerText} ref={labelRef}>
                  <ProfileActiveBox />
                </S.ProfileLabel>
              )}
              <S.UploadImage
                onClick={() => handleClickTarget(type)}
                src={profile[0].thumbnail}
                alt={`${type}-profile`}
              />
            </>
          ) : (
            <>
              <S.ProfileLabel htmlFor={registerText} />
              <AddCIcon />
            </>
          )}
        </S.UploadProfileButton>
      </S.ProfileBox>

      <S.StyledHiddenUpload
        {...register(registerText, {
          required: true,
          onChange: (e) => {
            handleFileChange(e, type);
          }
        })}
        ref={fileInputRef}
        id={registerText}
        type="file"
        accept={ACCEPT_FILE_TYPE.IMAGE}
      />
    </Flex>
  );
};

export default ProfileCreate;

이전 코드와 비교 했을 때 코드가 개선된걸 확인할 수 있었다.
무엇 보다 사용자 입장으로 생각해 여러 변수의 QA를 진행하며 예외 처리도 같이 작업했다.

아쉬운 점은 ios 환경에서 이미지 미선택 상태로 "취소" 버튼 클릭 시 focus 비활성화를 어떻게 처리해야할지,
그리고 props를 2번 내려 받는 구조인데 이게 맞는지 고민이다.

또한 useForm은 ref를 기본으로 제공하고 있어서
데이터 전달 시 ref 데이터가 굳이 있어야 하나 싶기도 한다.

항상 재사용성 가능한 컴포넌트를 만들 때
해당 기능이 2번 이상 동일한 기능으로 사용되고 있는지?를 생각하면서 작업하고 있지만...
구조에 대해선 좀 더 깊게 고민해야 나중에 유지보수 측면에서도 좋지 않을까 싶다.

지금은 급해서 이슈 사항만 해결 했는데 나중에 리팩토링 작업을 해야겠다.

---

마치며

이슈를 해결하고 이를 블로그로 작성하려고 하니 제대로 정리가 안 되는 기분이다...

혼자 볼 땐 이해가 되지만 다른 사람이 해당 게시글을 보면 이해를 못 하실 것 같다.
다른 블로그를 참고해 게시글 내용을 다른 분들이 봤을 때 도움이 되고 이해 되도록 조금씩 수정해 보자.