[Feature] - 프로필 이미지 수정 기능 및 여행기 등록 시 여행 장소마다 국가 코드 주도록 구현 #535
Conversation
simorimi
changed the title
Test Results11 tests 11 ✅ 13s ⏱️ Results for commit 01b6786. ♻️ This comment has been updated with latest results. |
| @@ -14,7 +14,9 @@ import * as S from "./GoogleSearchPopup.styled"; | |||
|
|
|||
| interface GoogleSearchPopupProps { | |||
| onClosePopup: () => void; | |||
| onSearchPlaceInfo: (placeInfo: Pick<TravelTransformPlace, "placeName" | "position">) => void; | |||
| onSearchPlaceInfo: ( | |||
| placeInfo: Pick<TravelTransformPlace, "placeName" | "position" | "countryCode">, | |||
There was a problem hiding this comment.
Pick<TravelTransformPlace, "placeName" | "position" | "countryCode"> 해당 타입에 대해 중복된 부분이 꽤나 발견되는거 같은데 대한 타입을 따로 분리하면 어떨까 싶긴 하네요~!
(countryCode 뿐만 아니라 다른 타입이 추가된다면 또 다 추가해야하니까 번거로워질 수 있을거 같아요)
| @@ -85,13 +85,11 @@ export const MainPageTraveloguesList = styled.ul` | |||
| gap: ${({ theme }) => theme.spacing.m}; | |||
| `; | |||
|
|
|||
| export const OptionContainer = styled.div` | |||
| export const OptionContainer = styled.button` | |||
There was a problem hiding this comment.
[단순 궁금증]
button 태그로 변경한 이유가 그냥 궁금하긴 합니다~! (접근성 때문인건가 싶긴 했어용)
| gap: ${(props) => props.theme.spacing.xl}; | ||
|
|
| alert(error.message); | ||
| setNickname(data?.nickname ?? ""); | ||
| }; | ||
| const TAB_CONTENT = [ |
There was a problem hiding this comment.
해당 상수를 constants 파일로 빼는건 어떨까 제안드립니다!
| @@ -55,7 +55,7 @@ const MyTravelogues = ({ userData }: MyTraveloguesProps) => { | |||
| contentDetail={myTravelogues} | |||
| renderItem={({ id, thumbnailUrl, title, createdAt }) => ( | |||
| <S.Layout onClick={() => handleClickTravelogue(id)}> | |||
| <AvatarCircle $size="medium" profileImageUrl={thumbnailUrl} /> | |||
| const [isModifying, setIsModifying] = useState(false); | ||
| const [isProfileImageLoading, setIsProfileImageLoading] = useState(false); | ||
|
|
||
| const [isModalOpen, handleOpenModal, handleCloseModal] = useToggle(); |
There was a problem hiding this comment.
현재 해당 hook에 상태가 많은 만큼 정말 필요한 상태가 아니라면 분리 하는 것도 방법이라고 생각해요~!
모달 상태는 바깥으로 빼도 충분할거 같은데(내부에서 쓰이지 않기 때문) 시모의 생각은 어떠신가요?!
|
|
||
| const [isModalOpen, handleOpenModal, handleCloseModal] = useToggle(); | ||
|
|
||
| const handleClickEditModalOpenButton = () => handleOpenModal(); |
There was a problem hiding this comment.
개인적으로 handleClickEditModalOpenButton와 handleClickEditModalCloseButton는 handleOpenModal이나 handleCloseModal 대신 넣어줘도 충분한거 같아요!
| userProfile: { data, status, error }, | ||
| profileImageFileInputRef, | ||
| }; | ||
| }; |
There was a problem hiding this comment.
시간이 충분하다면 이 훅을 조금 더 리팩터링 해보는 것도 좋을거 같단 생각이 들었어요,,, (너무 많은 책임들이 쏠려 있어서 그런지 코드 해석에 시간이 걸렸어요)
제 생각에는
- 프로필을 초기화 하는 책임(useEffect)
- 프로필 수정 모달에 대한 책임(handleClickEditModalCloseButton, handleClickProfileImageEditButton, handleClickProfileImageDeleteButton, handleClickEditModalOpenButton)
- 프로필 수정에 대한 책임(handleClickProfileEditButton, handleChangeProfileImage, handleLoadProfileImage, handleClickProfileEditConfirmButton, handleClickProfileEditCancelButton, handleChangeNickname)
정도로만 나눠도 괜찮을거 같다는 생각이 들었어요~!
| @@ -7,6 +7,11 @@ import { extractLastPath } from "@utils/extractId"; | |||
| import * as S from "./SearchPage.styled"; | |||
| import TravelogueList from "./TravelogueList/TravelogueList"; | |||
|
|
|||
| const TAB_CONTENT = [ | |||
There was a problem hiding this comment.
여기도 constants 파일로 분리해보면 좋겠다는 생각이 들었어요!
✅ 작업 내용
📸 스크린샷
2024-10-16.10.56.55.mov
🙈 참고 사항
프로필 이미지 수정 기능 웹에서는 정상 동작합니다. 다만, 모바일 환경에서 어떻게 동작하는지 예측이 안돼서 해당 부분 우선 머지된 이후 dev를 통해서 확인해보고 작업해야할 것 같습니다. 그래서 다른 기능(좋아요 탭 기능, 검색창 국가별 탭 기능) 작업하다 롤백해서 커밋에 해당 부분이 들어갔다가 빠졌습니다. 참고 바랍니다!
drawer 괜히 신경쓰여서 수정하였는데 엄연히 이 부분은 refactor에 갔어야 했을 것 같습니다 ㅠ 눈에 보여서 작업하다보니 해당 부분이 같이 들어갔네요. 이후 작업부터는 좀 더 꼼꼼하게 분리하도록 하겠습니다 :)