Fix(client): 상세 페이지 진입 시 자동으로 댓글 작성 모드에 들어가지 않도록 수정 #494
Conversation
jeonghoon11
requested review from
1jiwoo27,
gwagjiug,
hansoojeongsj,
jogpfls and
minjeoong
|
✅ Storybook이 배포되었습니다. |
| const replyCreateMode = mode.type === 'reply' && mode.action === 'create'; | ||
|
|
||
| const handleFocus = () => { | ||
| if (mode.type === 'reset') { |
There was a problem hiding this comment.
댓글 인풋이 포커스되지 않은 상태에서 사진을 먼저 선택하면, 사진만 업로드된 상태가 mode.type === 'reset'이라 인풋 포커스 시 mode가 변경되면서 상태가 초기화될 것 같습니당
그래서 사진이 이미 선택된 경우에는 mode를 변경하지 않도록
if (mode.type === 'reset' && !selectedFile) {
이런 식으로 조건을 추가하면 해결될 것 같은데, 더 좋은 방향이 있으면 그쪽으로 수정해주셔도 좋습니다~ 🙂
There was a problem hiding this comment.
좋은 코드리뷰 감사해요! 이미지쪽 케이스를 생각을 못 했네요. 수정님 말씀대로 댓글 인풋 포커스되지 않은 상태에서 사진을 먼저 선택하고 mode가 변경되면 이미지가 사라지는 이슈가 있네요! 대댓글 모드일때도 같은 이슈가 발생했어요.
그래서 detailsection에서
const shouldPreserveImage =
(prev.type === 'reset' && mode.action === 'create') ||
(prev.action === 'create' && mode.type === 'reset') ||
(prev.action === 'create' && mode.action === 'create');
if (shouldPreserveImage) {
return;
}이렇게 조건을 설정해서 위 케이스에서는 사용자가 작성 중인 이미지를 유지하도록 처리했습니다!
각 조건 설명:
- reset → create: 이미지 선택 후 input 포커스 시 (댓글 작성 모드 진입 시)
- create → reset: 대댓글 모드에서 backdrop 시
- create → create: 댓글모드에서 대댓글 모드로 전환 시
| <> | ||
| <FeedContent postId={postId} /> | ||
| <CommentInputBox | ||
| key={focusKey} |
There was a problem hiding this comment.
기존에 key로 focusKey가 잡혀 있어서 mode가 변경되었을 때 key값이 변경되니 CommentInputBox도 같이 리렌더링되는 문제가 있었어요.
이에 따라 대댓글 입력창의 이미지가 깜빡이는 현상이 있어서 key를 제거했습니다.
여기에 애초에 key가 필요 없었을텐데 예전에 왜 넣었는지...
| <Input | ||
| key={focusKey} | ||
| autoFocus | ||
| autoFocus={mode.type !== 'reset'} |
There was a problem hiding this comment.
위 표현은 reset 이 아닐 때 focus 한다로 읽히는데, "작성 중일 때 focus한다" 로 수정할 수 있지않을까요?
There was a problem hiding this comment.
작성/수정 중일 때 focus한다로 표현하는게 더 명확할까요?
그러면
| autoFocus={mode.type !== 'reset'} | |
| autoFocus={mode.type === 'comment' || mode.type === 'reply'} |
이렇게 변경될것 같아요!
이정도 조건은 props에 둬도 괜찮을지 궁금해요! 아니면 상위에서 isActiveInputMode처럼 표현 변수를 지정하고 사용할지 궁금하네요!
개인적으로는 props에 두면 더 직관적일것 같다는 생각이긴 합니당당당...
There was a problem hiding this comment.
네! 유니온 타입이라 타입 안전해요!! 수정했어요
| case 'RESET': | ||
| default: | ||
| return { type: 'comment', action: 'create', postId } as const; | ||
| return { type: 'reset', action: 'reset' } as const; |
📌 Summary
useControlledInputBox훅 간소화📚 Tasks
기존에 상세 페이지 마운트 시 댓글 작성 모드가 활성화 되어 inputBox가 autoFocus되었어요. 이번 QA때 상세 페이지 진입 시 자동으로 autoFocus되는 것을 막아달라는 요청이 들어와서 처음 진입 시 reset 상태가 되도록 수정했습니다.
작업 내용은 아래와 같아요.
detail페이지 진입 시 reset모드로 진입되도록 했어요. 기존에는 reset상태가 comment, create 즉, 댓글 작성 모드였는데 reset 모드를 온전한 reset 상태로 수정하고
COMMENT_CREATE액션을 따로 추가하여 reset상태와 create상태를 분리했어요.추가로
useControlledInputBox커스텀 훅을 간소화 했어요.기존에 mode 변경 시마다 복잡한 조건으로 content 초기화 여부 결정하고 특정 모드 전환마다 예외 케이스 추가 필요했었어요. 급하게 작업 하다보니 불필요한 조건문도 사용하게 됐던것 같아요.
그래서 불필요한 부분들을 다 제거했고
initialContent즉, 기존 inputBox내 내용이 변경될 때만 content를 설정하도록 변경했어요.📸 Screenshot
[AS-IS]
2025-12-30.2.45.33.mov
[TO-BE]
2025-12-30.4.17.29.mov