feat: 댓글&답글 기능 추가#59
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
""" Walkthrough이 변경사항은 댓글 및 답글 기능의 리팩토링과 상세 피드 게시물 뷰의 도입, 스타일 구조 개선, 댓글/답글 데이터 및 타입 명명 규칙 일관화, 그리고 팝업 및 입력 UI의 동작 개선을 포함합니다. 새로운 커스텀 훅, Zustand 스토어, 상세 게시물 컴포넌트, 스타일 컴포넌트 등이 추가되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant FeedDetailPage
participant MessageInput
participant useReplyActions
participant useReplyStore
participant API
User->>MessageInput: 댓글 입력/답글 작성
MessageInput->>useReplyActions: submitComment 호출
useReplyActions->>useReplyStore: 상태 확인 및 업데이트
useReplyActions->>API: 댓글/답글 POST 요청
API-->>useReplyActions: 응답
useReplyActions->>useReplyStore: replyContent 초기화 및 reply 모드 해제
useReplyActions-->>FeedDetailPage: (선택) 성공 콜백
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20분 Possibly related PRs
Suggested labels
Poem
""" Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (4)
src/stores/useReplyStore.ts (1)
27-27: 중복된 기능을 고려해보세요.
clearReplyContent와cancelReply의 기능이 부분적으로 중복됩니다.clearReplyContent가 별도로 필요한 특별한 사용 사례가 있는지 검토해보세요.src/hooks/useReplyActions.ts (1)
33-34: 개발용 로그를 제거하거나 환경별로 분리하세요.프로덕션 환경에서는 불필요한 콘솔 로그가 출력될 수 있습니다.
- console.log('댓글or답글 작성 API 요청'); + // TODO: 개발 환경에서만 로그 출력하도록 수정 필요src/components/feed/FeedDetailPostBody.tsx (2)
89-91: 이미지 렌더링에서 alt 속성이 누락되었습니다.접근성을 위해 이미지에 alt 속성을 추가하는 것을 권장합니다.
{images.map((src, i) => ( - <img key={i} src={src} /> + <img key={i} src={src} alt={`게시물 이미지 ${i + 1}`} /> ))}
71-108: PostBody와 코드 중복이 있습니다.
FeedDetailPostBody와PostBody컴포넌트 간에 상당한 코드 중복이 있습니다. 공통 부분을 추출하여 재사용성을 높이는 것을 고려해보세요.공통 스타일이나 로직을 별도 컴포넌트나 유틸리티로 분리하거나, 조건부 props를 사용하여 하나의 컴포넌트로 통합하는 방안을 검토해보세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlsrc/assets/common/closeIcon.svgis excluded by!**/*.svg
📒 Files selected for processing (15)
package.json(2 hunks)src/components/common/Modal/PopupContainer.tsx(1 hunks)src/components/common/Post/PostBody.tsx(2 hunks)src/components/common/Post/PostFooter.tsx(5 hunks)src/components/common/Post/Reply.tsx(1 hunks)src/components/common/Post/SubReply.tsx(1 hunks)src/components/feed/FeedDetailPost.tsx(1 hunks)src/components/feed/FeedDetailPostBody.tsx(1 hunks)src/components/today-words/MessageInput.styled.ts(3 hunks)src/components/today-words/MessageInput.tsx(1 hunks)src/data/postData.ts(1 hunks)src/hooks/useReplyActions.ts(1 hunks)src/pages/feed/FeedDetailPage.tsx(2 hunks)src/stores/useReplyStore.ts(1 hunks)src/types/post.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (6)
src/hooks/useReplyActions.ts (1)
src/stores/useReplyStore.ts (1)
useReplyStore(15-28)
src/components/feed/FeedDetailPostBody.tsx (1)
src/types/post.ts (1)
PostBodyProps(31-34)
src/components/today-words/MessageInput.tsx (1)
src/components/today-words/MessageInput.styled.ts (6)
MessageInput(62-90)Wrapper(4-16)ReplyContainer(32-60)InputContainer(18-21)MessageInputWrapper(23-30)SendButton(92-115)
src/components/feed/FeedDetailPost.tsx (1)
src/types/post.ts (1)
FeedPostProps(26-29)
src/components/common/Post/Reply.tsx (2)
src/types/post.ts (1)
ReplyDataProps(51-64)src/hooks/useReplyActions.ts (1)
useReplyActions(9-52)
src/components/today-words/MessageInput.styled.ts (1)
src/styles/global/global.ts (3)
semanticColors(80-153)colors(4-53)typography(56-77)
🔇 Additional comments (33)
package.json (1)
18-18: axios·@types/axios 버전 및 보안 확인 완료
npm view결과 axios 1.11.0, @types/axios 0.14.4 모두 최신 버전입니다.- 현재 알려진 axios 관련 보안 취약점은 없습니다.
- 참고:
npm audit를 제대로 실행하려면package-lock.json생성 후 재검토를 권장합니다.src/components/common/Modal/PopupContainer.tsx (1)
13-21: 개선된 스크롤 제어 로직입니다.문서 body의 overflow 스타일 제어 로직이 더 명확하고 의미론적으로 개선되었습니다. 빈 문자열 대신 'auto'를 명시적으로 사용하는 것이 더 적절합니다.
src/components/feed/FeedDetailPost.tsx (2)
25-36: 깔끔한 컴포넌트 구성입니다.상세 게시물 보기를 위한 컴포넌트 구성이 잘 설계되었습니다. props 구조분해와 전달, 그리고
isDetail={true}플래그를 통한 PostFooter 동작 제어가 적절합니다.
7-23: 일관된 스타일링 패턴입니다.CSS-in-JS를 사용한 스타일 컴포넌트 정의가 프로젝트의 다른 부분과 일관되며, flexbox 레이아웃과 컬러 변수 사용이 적절합니다.
src/pages/feed/FeedDetailPage.tsx (3)
16-18: 우수한 상태 관리 리팩토링입니다.로컬 상태 관리를
useReplyActions훅으로 중앙화한 것이 좋은 개선사항입니다. 코드의 재사용성과 유지보수성이 향상되었습니다.
57-67: MessageInput 통합이 잘 구현되었습니다.답글 관련 모든 props가 적절히 전달되고 있으며, 한국어 플레이스홀더와 함께 사용자 경험이 개선되었습니다.
submitComment함수 호출도 올바른 매개변수를 전달하고 있습니다.
55-55: 컴포넌트 교체가 적절합니다.
FeedPost에서FeedDetailPost로의 컴포넌트 교체가 상세 페이지의 요구사항에 더 적합하며, props 전달도 올바르게 구현되었습니다.src/components/common/Post/PostBody.tsx (2)
58-62: 함수명 변경이 더 명확해졌습니다.
handlePostContent에서handlePostClick으로 변경한 것이 함수의 역할을 더 명확하게 표현합니다.
67-67: 불필요한 클로저 생성을 피하는 좋은 개선입니다.인라인 화살표 함수로
feedId를 직접 전달하는 것이 성능상 더 효율적입니다.src/hooks/useReplyActions.ts (2)
4-8: 인터페이스 정의가 명확합니다.
SubmitCommentProps인터페이스가 필요한 매개변수들을 잘 정의하고 있습니다.
21-24: 입력 검증 로직이 적절합니다.
trim()을 사용하여 공백만 있는 입력을 필터링하는 것이 좋습니다.src/components/common/Post/Reply.tsx (4)
22-24: 초기 상태를 props에서 받아오는 개선이 좋습니다.
isLikeprop을 사용하여 초기 좋아요 상태를 설정하는 것이 더 정확합니다.
28-29: 함수형 상태 업데이트 사용이 적절합니다.
setLiked(prev => !prev)를 사용하여 상태 업데이트의 안전성을 보장합니다.
32-34: 답글 기능 통합이 잘 구현되었습니다.
useReplyActions훅을 사용하여 답글 기능을 깔끔하게 통합했습니다.
55-55: 접근성 개선을 위한 alt 속성 추가가 좋습니다.이미지에
alt="좋아요"속성을 추가하여 접근성을 개선했습니다.src/components/common/Post/PostFooter.tsx (3)
51-60: 새로운 prop 추가와 기본값 설정이 적절합니다.
isDetailprop의 기본값을false로 설정하여 기존 동작을 유지하면서 새로운 기능을 안전하게 추가했습니다.
38-40: 조건부 스타일 적용이 깔끔합니다.
isDetailprop에 따라 커서 스타일을 조건부로 적용하는 방식이 명확하고 효율적입니다.
77-80: 조건부 네비게이션 제어가 간단하고 명확합니다.
isDetail이 true일 때 early return으로 네비게이션을 방지하는 로직이 이해하기 쉽습니다.src/data/postData.ts (2)
1-2: 타입 임포트가 올바르게 업데이트되었습니다.업데이트된 인터페이스를 정확히 참조하고 있습니다.
66-117: 체계적인 네이밍 규칙 업데이트가 잘 적용되었습니다.댓글 및 답글 데이터 구조의 필드명이 일관성 있게 업데이트되었습니다:
- 사용자 관련 필드:
profileImgUrl→imageUrl,userName→nickName- 콘텐츠 필드:
replyContent→content- 좋아요 관련 필드:
initialLikeCount→likeCount,isLike추가- 답글 필드에
replyComment접두사 적용TypeScript 인터페이스 변경사항과 완벽히 일치하여 타입 안전성을 보장합니다.
src/components/today-words/MessageInput.tsx (4)
3-4: 답글 기능을 위한 인터페이스 확장이 적절합니다.선택적 props로
isReplying,targetUserName,onCancelReply가 추가되어 기존 컴포넌트의 호환성을 유지하면서 새로운 기능을 지원합니다.Also applies to: 19-22
34-34: 이벤트 핸들링 로직이 개선되었습니다.IME 조합 상태(
isComposing)를 추가하여 한글 입력 중 의도치 않은 전송을 방지하고,handleSend함수로 전송 로직을 통합하여 코드 가독성과 유지보수성이 향상되었습니다.Also applies to: 45-52, 90-91
64-80: 답글 UI 구현이 깔끔하고 사용자 친화적입니다.조건부 렌더링으로 답글 상태를 명확히 표시하고, 타겟 사용자명과 취소 기능을 직관적으로 제공합니다. 접근성을 위한 alt 텍스트도 적절히 추가되었습니다.
94-94: 전송 버튼 상태 로직이 간소화되었습니다.
!!value.trim()을 사용한 불린 변환으로 비어있지 않은 입력에 대한 활성/비활성 상태를 명확하게 처리합니다.src/components/today-words/MessageInput.styled.ts (3)
4-16: 레이아웃 구조 개선이 적절합니다.
Wrapper에 컬럼 방향 플렉스와 gap을 추가하여 답글 UI와 입력창을 적절히 배치할 수 있도록 구조를 개선했습니다. 고정 위치 지정으로 하단 입력창의 안정적인 배치를 유지합니다.Also applies to: 18-21
32-60: ReplyContainer 스타일링이 체계적으로 구현되었습니다.플렉스박스 레이아웃으로 답글 알림 영역을 적절히 배치하고, 디자인 시스템의 색상(neongreen, grey)과 타이포그래피를 일관성 있게 적용했습니다. 중첩된 클래스 선택자로 스타일 구조가 명확합니다.
66-66: 입력창과 버튼 스타일링이 적절히 조정되었습니다.패딩 조정으로 절대 위치 지정된 전송 버튼과의 간격을 확보하고, 고정 높이와 캐럿 색상 설정으로 일관된 사용자 경험을 제공합니다. 전송 버튼의 위치와 정렬도 적절히 조정되었습니다.
Also applies to: 75-75, 78-78, 93-96, 103-103
src/types/post.ts (2)
38-47: SubReplyDataProps 인터페이스가 체계적으로 개선되었습니다.
replyComment접두사로 대댓글 전용 필드를 명확히 구분하고,isLike불린 필드 추가로 좋아요 상태 관리가 향상되었습니다.postDate네이밍으로 다른 날짜 필드와의 일관성도 확보했습니다.
54-62: ReplyDataProps 인터페이스 개선이 일관성과 기능성을 향상시켰습니다.필드명 간소화(
replyContent→content)와 통일된 네이밍(profileImgUrl→imageUrl,userName→nickName)으로 가독성이 개선되었고,isLike불린 필드 추가로 좋아요 상태 관리가 강화되었습니다.src/components/common/Post/SubReply.tsx (4)
9-9: 컴포넌트 인터페이스가 업데이트된 타입과 정확히 일치합니다.
useReplyActions훅 추가와replyComment접두사가 붙은 새로운 prop 구조로 답글 기능이 통합되었습니다.Also applies to: 12-22
23-30: 상태 관리와 답글 기능 통합이 우수합니다.props에서 초기 상태를 올바르게 설정하고,
useReplyActions훅을 통해 답글 기능을 깔끔하게 통합했습니다. 상태 동기화가 적절히 이루어집니다.
33-34: 좋아요 처리 로직이 개선되었습니다.함수형 상태 업데이트(
prev => !prev)를 사용하여 stale closure 문제를 방지하고, 현재 상태에 기반한 정확한 카운트 업데이트를 구현했습니다.
40-40: UI 개선과 접근성 향상이 적절히 구현되었습니다.이미지에 적절한 alt 텍스트를 추가하고, 업데이트된 prop 구조를 정확히 반영했습니다. 답글 작성과 좋아요 기능의 이벤트 핸들링도 올바르게 연결되었습니다.
Also applies to: 44-49, 55-56, 60-61
| } catch (error) { | ||
| console.error('댓글/답글 작성 실패', error); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
에러 처리에 사용자 피드백이 부족합니다.
현재는 콘솔에만 에러를 로그하고 있어 사용자가 실패를 인지하기 어렵습니다.
사용자에게 에러 상태를 알리는 방법을 고려해보세요:
} catch (error) {
console.error('댓글/답글 작성 실패', error);
+ // TODO: 토스트 메시지나 에러 상태 관리를 통한 사용자 피드백 필요
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| } catch (error) { | |
| console.error('댓글/답글 작성 실패', error); | |
| } | |
| } catch (error) { | |
| console.error('댓글/답글 작성 실패', error); | |
| // TODO: 토스트 메시지나 에러 상태 관리를 통한 사용자 피드백 필요 | |
| } |
🤖 Prompt for AI Agents
In src/hooks/useReplyActions.ts around lines 38 to 40, the catch block only logs
the error to the console without notifying the user. To fix this, add a
user-facing error notification mechanism such as setting an error state or
triggering a toast message to inform the user that the reply or comment
submission failed. This will improve user experience by providing clear feedback
on the failure.
1 participant
#️⃣연관된 이슈
앞선 이슈에서 누락된 내용이라 추가 작업했습니다.
📝작업 내용
https://github.com/user-attachments/assets/ed1f1d58-780a-4c12-9478-c118a388b74e
isReplying: 현재 답글 작성 중인지 여부
targetUserName: 답글 대상자의 닉네임
parentId: 답글 달려는 부모 댓글의 ID
replyContent: 현재 작성 중인 댓글/답글 내용
추후에, 훅안에있는 API는 따로 분리해서 호출할 예정입니다!
💬리뷰 요구사항
MessageInput는 UI컴포넌트용으로 랜더링이랑 입력이벤트만 관리하게끔 하고 나머지는 전부 훅으로 처리했는데 이게 젤 깔끔한 방식일까요?
*** axios 라이브러리 설치 바랍니당 ***
Summary by CodeRabbit
Summary by CodeRabbit
New Features
버그 수정
UI/UX 개선
기타