[Feature] - 프로필 이미지 수정 기능 및 여행기 등록 시 여행 장소마다 국가 코드 주도록 구현

frontend/src/components/pages/my/MyPage.tsx

@@ -9,25 +9,16 @@ import {
 } from "@components/common";
 import MyPageSkeleton from "@components/pages/my/MyPageSkeleton/MyPageSkeleton";
 
-import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
 import { FORM_VALIDATIONS_MAP } from "@constants/formValidation";
 import { STORAGE_KEYS_MAP } from "@constants/storage";
 
 import * as S from "./MyPage.styled";
-import MyTravelPlans from "./MyTravelPlans/MyTravelPlans";
-import MyTravelogues from "./MyTravelogues/MyTravelogues";
 import ProfileImageEditModalBottomSheet from "./ProfileImageEditModalBottomSheet/ProfileImageEditModalBottomSheet";
+import { IGNORED_ERROR_MESSAGES, TAB_CONTENT } from "./constants";
 import useMyPage from "./hooks/useMyPage";
 
-const TAB_CONTENT = [
-  { label: "✈️ 내 여행 계획", component: MyTravelPlans },
-  { label: "📝 내 여행기", component: MyTravelogues },
-] as const;
-
-const IGNORED_ERROR_MESSAGES = [ERROR_MESSAGE_MAP.api.login, "Network Error"];
-
 const MyPage = () => {
-  const { states, handlers, userProfile, profileImageFileInputRef } = useMyPage();
+  const { editModal, profileImage, profileNickname, profileEdit, userProfile } = useMyPage();
 
   const showErrorAlert = (error: Error | null) => {
     if (error && !IGNORED_ERROR_MESSAGES.includes(error.message)) alert(error.message);
@@ -43,45 +34,45 @@ const MyPage = () => {
 
   return (
     <S.Layout>
-      {states.isModifying ? (
+      {profileEdit.isModifying ? (
         <S.ProfileContainer>
           <S.EditButtonContainer>
             <S.ProfileEditButtonContainer>
-              <S.EditButton type="button" onClick={handlers.handleClickProfileEditCancelButton}>
+              <S.EditButton type="button" onClick={profileEdit.handleClickProfileEditCancelButton}>
                 취소
               </S.EditButton>
-              <S.EditButton type="button" onClick={handlers.handleClickProfileEditConfirmButton}>
+              <S.EditButton type="button" onClick={profileEdit.handleClickProfileEditConfirmButton}>
                 확인
               </S.EditButton>
             </S.ProfileEditButtonContainer>
           </S.EditButtonContainer>
 
           <S.ProfileImageContainer>
-            <S.ProfileImageWrapper $isProfileImageLoading={states.isProfileImageLoading}>
+            <S.ProfileImageWrapper $isProfileImageLoading={profileImage.isProfileImageLoading}>
               <AvatarCircle
                 size="large"
-                profileImageUrl={states.profileImageUrl}
-                onLoad={handlers.handleLoadProfileImage}
+                profileImageUrl={profileImage.profileImageUrl}
+                onLoad={profileImage.handleLoadProfileImage}
               />
             </S.ProfileImageWrapper>
 
-            {states.isProfileImageLoading ? (
+            {profileImage.isProfileImageLoading ? (
               <S.ProfileImageLoadingWrapper>
                 <Spinner variants="circle" size={40} />
               </S.ProfileImageLoadingWrapper>
             ) : (
               <>
                 <S.ProfileImageHiddenInput
-                  ref={profileImageFileInputRef}
+                  ref={profileImage.profileImageFileInputRef}
                   type="file"
                   accept="image/*"
-                  onChange={handlers.handleChangeProfileImage}
+                  onChange={profileImage.handleChangeProfileImage}
                   aria-label="썸네일 이미지 선택"
                   title="이미지 파일을 선택하세요"
                 />
                 <IconButton
                   iconType="camera-icon"
-                  onClick={handlers.handleClickEditModalOpenButton}
+                  onClick={editModal.handleOpenEditModal}
                   css={S.profileImageEditButtonStyle}
                 />
               </>
@@ -91,34 +82,34 @@ const MyPage = () => {
           <S.NickNameEditContainer>
             <Input
               placeholder={userProfile.data?.nickname}
-              value={states.nickname}
+              value={profileNickname.nickname}
               autoFocus
               maxLength={FORM_VALIDATIONS_MAP.title.maxLength}
               spellCheck={false}
               css={S.inputStyle}
-              onChange={handlers.handleChangeNickname}
+              onChange={profileNickname.handleChangeNickname}
             />
             <CharacterCount
-              count={states.nickname?.length}
+              count={profileNickname.nickname?.length}
               maxCount={FORM_VALIDATIONS_MAP.title.maxLength}
             />
           </S.NickNameEditContainer>
         </S.ProfileContainer>
       ) : (
         <S.ProfileContainer>
           <S.EditButtonContainer>
-            <S.EditButton type="button" onClick={handlers.handleClickProfileEditButton}>
+            <S.EditButton type="button" onClick={profileEdit.handleClickProfileEditButton}>
               프로필 수정
             </S.EditButton>
           </S.EditButtonContainer>
 
           <S.ProfileImageContainer>
-            <AvatarCircle size="large" profileImageUrl={states.profileImageUrl} />
+            <AvatarCircle size="large" profileImageUrl={profileImage.profileImageUrl} />
           </S.ProfileImageContainer>
 
           <S.NicknameWrapper>
             <Text textType="bodyBold" css={S.nicknameStyle}>
-              {states.nickname}
+              {profileNickname.nickname}
             </Text>
           </S.NicknameWrapper>
         </S.ProfileContainer>
@@ -136,14 +127,14 @@ const MyPage = () => {
       />
 
       <ProfileImageEditModalBottomSheet
-        isOpen={states.isModalOpen}
-        onClose={handlers.handleClickEditModalCloseButton}
+        isOpen={editModal.isEditModalOpen}
+        onClose={editModal.handleCloseEditModal}
       >
-        <S.Button onClick={handlers.handleClickProfileImageEditButton}>
+        <S.Button onClick={profileImage.handleClickProfileImageEditButton}>
           <Text textType="detail">앨범에서 선택</Text>
         </S.Button>
-        {states.profileImageUrl && (
-          <S.Button onClick={handlers.handleClickProfileImageDeleteButton}>
+        {profileImage.profileImageUrl && (
+          <S.Button onClick={profileImage.handleClickProfileImageDeleteButton}>
             <Text textType="detailBold" css={S.deleteTextColor}>
               프로필 사진 삭제
             </Text>

frontend/src/components/pages/my/hooks/useMyPage.ts

@@ -1,108 +1,78 @@
-import React, { useEffect, useRef, useState } from "react";
-
-import { usePostUploadImages } from "@queries/usePostUploadImages";
-import usePutProfile from "@queries/usePutProfile";
 import { useUserProfile } from "@queries/useUserProfile";
 
 import useToggle from "@hooks/useToggle";
 
-import { FORM_VALIDATIONS_MAP } from "@constants/formValidation";
+import useProfileEdit from "./useProfileEdit";
+import useProfileImage from "./useProfileImage";
+import useProfileInitialization from "./useProfileInitialization";
+import useProfileNickname from "./useProfileNickname";
 
 const useMyPage = () => {
-  const { data, status, error } = useUserProfile();
-
-  const onError = (error: Error) => {
-    alert(error.message);
-    setNickname(data?.nickname ?? "");
-  };
-
-  const { mutate: mutateModifyProfile } = usePutProfile(onError);
-
-  const profileImageFileInputRef = useRef<HTMLInputElement>(null);
-
-  const [profileImageUrl, setProfileImageUrl] = useState(data?.profileImageUrl ?? "");
-  const [nickname, setNickname] = useState(data?.nickname ?? "");
-
-  const [isModifying, setIsModifying] = useState(false);
-  const [isProfileImageLoading, setIsProfileImageLoading] = useState(false);
-
-  const [isModalOpen, handleOpenModal, handleCloseModal] = useToggle();
-
-  const handleClickEditModalOpenButton = () => handleOpenModal();
-  const handleClickEditModalCloseButton = () => handleCloseModal();
+  const [isEditModalOpen, handleOpenEditModal, handleCloseEditModal] = useToggle();
 
-  const handleClickProfileEditButton = () => setIsModifying(true);
-  const handleClickProfileImageEditButton = () => profileImageFileInputRef.current?.click();
-
-  const { mutateAsync: mutateAddImage } = usePostUploadImages();
-
-  const handleChangeProfileImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    setIsProfileImageLoading(true);
-    handleCloseModal();
-
-    const files = Array.from(e.target.files as FileList);
-    const profileImage = await mutateAddImage(files);
-
-    setProfileImageUrl(profileImage[0]);
-  };
-
-  const handleLoadProfileImage = () => {
-    setIsProfileImageLoading(false);
-  };
-
-  const handleClickProfileImageDeleteButton = () => {
-    setProfileImageUrl("");
-
-    handleCloseModal();
-  };
-
-  const handleClickProfileEditConfirmButton = () => {
-    const trimmedNickname = nickname.trim();
-    const newNickname = trimmedNickname || data?.nickname || "";
-
-    setNickname(newNickname);
-    mutateModifyProfile({ nickname: newNickname, profileImageUrl: profileImageUrl });
-
-    setIsModifying(false);
-  };
-
-  const handleClickProfileEditCancelButton = () => {
-    setNickname(data?.nickname ?? "");
-    setProfileImageUrl(data?.profileImageUrl ?? "");
-
-    setIsModifying(false);
-  };
-
-  const handleChangeNickname = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setNickname(
-      e.target.value.slice(
-        FORM_VALIDATIONS_MAP.title.minLength,
-        FORM_VALIDATIONS_MAP.title.maxLength,
-      ),
-    );
-  };
+  const { data, status, error } = useUserProfile();
+  const { nickname: userNickname, profileImageUrl: userProfileImageUrl } = data ?? {};
 
-  useEffect(() => {
-    if (data?.nickname) setNickname(data.nickname);
-    if (data?.profileImageUrl) setProfileImageUrl(data.profileImageUrl);
-  }, [data?.nickname, data?.profileImageUrl]);
+  const {
+    profileImageFileInputRef,
+    profileImageUrl,
+    isProfileImageLoading,
+    handleClickProfileImageEditButton,
+    handleChangeProfileImage,
+    handleLoadProfileImage,
+    handleClickProfileImageDeleteButton,
+    updateProfileImageUrl,
+  } = useProfileImage({ userProfileImageUrl, handleCloseEditModal });
+
+  const { nickname, handleChangeNickname, updateNickname } = useProfileNickname(userNickname);
+
+  const {
+    isModifying,
+    handleClickProfileEditButton,
+    handleClickProfileEditConfirmButton,
+    handleClickProfileEditCancelButton,
+  } = useProfileEdit({
+    userNickname,
+    nickname,
+    updateNickname,
+    userProfileImageUrl,
+    profileImageUrl,
+    updateProfileImageUrl,
+  });
+
+  useProfileInitialization({
+    userNickname,
+    updateNickname,
+    userProfileImageUrl,
+    updateProfileImageUrl,
+  });
 
   return {
-    states: { profileImageUrl, nickname, isModifying, isProfileImageLoading, isModalOpen },
-    handlers: {
-      handleClickEditModalOpenButton,
-      handleClickEditModalCloseButton,
-      handleClickProfileEditButton,
+    editModal: {
+      isEditModalOpen,
+      handleOpenEditModal,
+      handleCloseEditModal,
+    },
+    profileImage: {
+      profileImageFileInputRef,
+      profileImageUrl,
+      isProfileImageLoading,
       handleClickProfileImageEditButton,
       handleChangeProfileImage,
       handleLoadProfileImage,
       handleClickProfileImageDeleteButton,
+    },
+    profileNickname: {
+      nickname,
+      handleChangeNickname,
+    },
+    profileEdit: {
+      isModifying,
+      handleClickProfileEditButton,
       handleClickProfileEditConfirmButton,
       handleClickProfileEditCancelButton,
-      handleChangeNickname,
     },
     userProfile: { data, status, error },
-    profileImageFileInputRef,
   };
 };
 

frontend/src/components/pages/my/hooks/useProfileEdit.ts

@@ -0,0 +1,58 @@
+import { useState } from "react";
+
+import usePutProfile from "@queries/usePutProfile";
+
+interface UseProfileEdit {
+  userNickname: string | undefined;
+  nickname: string;
+  updateNickname: (newNickname: string) => void;
+  userProfileImageUrl: string | undefined;
+  profileImageUrl: string;
+  updateProfileImageUrl: (newProfileImageUrl: string) => void;
+}
+
+const useProfileEdit = ({
+  userNickname,
+  nickname,
+  updateNickname,
+  userProfileImageUrl,
+  profileImageUrl,
+  updateProfileImageUrl,
+}: UseProfileEdit) => {
+  const onError = (error: Error) => {
+    alert(error.message);
+    updateNickname(userNickname ?? "");
+    updateProfileImageUrl(userProfileImageUrl ?? "");
+  };
+
+  const { mutate: mutateModifyProfile } = usePutProfile(onError);
+
+  const [isModifying, setIsModifying] = useState(false);
+
+  const handleClickProfileEditButton = () => setIsModifying(true);
+
+  const handleClickProfileEditConfirmButton = () => {
+    const trimmedNickname = nickname.trim();
+    const newNickname = trimmedNickname || userNickname || "";
+
+    updateNickname(newNickname);
+    mutateModifyProfile({ nickname: newNickname, profileImageUrl });
+
+    setIsModifying(false);
+  };
+
+  const handleClickProfileEditCancelButton = () => {
+    updateNickname(userNickname ?? "");
+    updateProfileImageUrl(userProfileImageUrl ?? "");
+
+    setIsModifying(false);
+  };
+  return {
+    isModifying,
+    handleClickProfileEditButton,
+    handleClickProfileEditConfirmButton,
+    handleClickProfileEditCancelButton,
+  };
+};
+
+export default useProfileEdit;