Feat/comment hotfix

[ljh130334]

#️⃣ 연관된 이슈

생략

📝 작업 내용

기록장에서 댓글 기능을 구현했습니다. 사용자가 기록에 대해 댓글을 작성하고 답글을 달 수 있는 바텀시트 UI를 추가했습니다.

🕸️ 주요 구현 사항

1. 댓글 바텀시트 시스템 구축

• useCommentBottomSheetStore를 통한 전역 상태 관리 구현
• GlobalCommentBottomSheet 컴포넌트로 하단에서 슬라이드업되는 바텀시트 UI 제작
• 기존 BookSearchBottomSheet와 동일한 아키텍처 패턴 적용

2. 기록장 댓글 버튼 연동

• RecordItem 컴포넌트의 댓글 버튼에 클릭 핸들러 추가
• 버튼 클릭 시 해당 기록의 postId와 postType(RECORD/VOTE)을 전달하여 바텀시트 오픈

3. 댓글 기능 완전 구현

• 댓글 목록 조회 (getComments API 연동)
• 댓글 작성 (postReply API 연동)
• 답글 작성 및 취소 기능
• 기존 ReplyList, MessageInput 컴포넌트 재사용으로 일관된 UX 제공

4. UI/UX 개선

• 바텀시트 애니메이션 (아래에서 위로 슬라이드)
• Dim 영역 클릭 시 바텀시트 닫기
• 로딩 상태 및 에러 처리

5. 성능 최적화

• 댓글 입력 지연 현상 해결 (상태 동기화 이슈 수정)
• useCallback을 통한 불필요한 리렌더링 방지
• 바텀시트 닫힐 때 상태 초기화로 메모리 효율성 개선

Summary by CodeRabbit

• 신기능
  • 전체 화면에서 댓글 하단 시트를 도입하여 게시물의 댓글을 확인하고 작성할 수 있습니다.
  • 댓글/대댓글 작성 지원 및 전송 중/로딩 상태 표시로 사용성을 개선했습니다.
  • 외부 영역 탭으로 시트를 닫을 수 있으며, 반응형 레이아웃과 스와이프형 애니메이션을 제공합니다.
  • 메모리 페이지에 전역 댓글 시트를 통합하여 피드/기록/투표 유형 게시물에 공통으로 사용 가능합니다.
  • 입력창 플레이스홀더가 대댓글 모드에 따라 자동으로 변경됩니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
thip	Ready	Preview	Comment	Aug 19, 2025 3:07am

[coderabbitai]

Walkthrough

전역 댓글 바텀시트를 도입. Zustand 스토어로 열림/컨텍스트 상태를 관리하고, 페이지(Memory)에서 글로벌 컴포넌트를 마운트. RecordItem 클릭으로 스토어를 통해 시트를 열고, 시트 컴포넌트는 열릴 때 댓글을 로드하며 입력/전송/답글 흐름과 닫기를 처리. 신규 스타일 모듈 포함.

Changes

Cohort / File(s)	Change Summary
전역 바텀시트 스타일 추가 src/components/common/CommentBottomSheet/GlobalCommentBottomSheet.styled.ts	Emotion 스타일 컴포넌트 7종 추가(Overlay, BottomSheet, Header, Title, Content, LoadingState, InputSection). isOpen prop으로 Overlay/BottomSheet 가시성·애니메이션 제어. 테마 색상/타이포 사용.
전역 바텀시트 컴포넌트 추가 src/components/common/CommentBottomSheet/GlobalCommentBottomSheet.tsx	GlobalCommentBottomSheet 컴포넌트 신설. 열릴 때 getComments 로드, postReply로 댓글/답글 전송, isLoading/isSending 상태 관리, 외부 클릭으로 close. ReplyList/MessageInput 연동. 닫힐 때 입력/리스트/답글 상태 초기화.
스토어 도입(Zustand) src/stores/useCommentBottomSheetStore.ts	isOpen, postId, postType('RECORD'
페이지에 전역 바텀시트 마운트 src/pages/memory/Memory.tsx	GlobalCommentBottomSheet를 페이지에 고정 렌더링.
레코드 아이템에서 호출 연결 src/components/memory/RecordItem/RecordItem.tsx	댓글 버튼 클릭 시 openCommentBottomSheet(postId, postType) 호출 추가. postType 매핑(VOTE/RECORD). 동일 스코프 내 handleCommentClick 중복 선언(재정의 오류 유발).

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant RI as RecordItem
  participant Store as useCommentBottomSheetStore
  participant Page as Memory Page
  participant Sheet as GlobalCommentBottomSheet
  participant API as API (getComments/postReply)

  U->>RI: 댓글 버튼 클릭
  RI->>Store: openCommentBottomSheet(postId, postType)
  Store-->>Page: isOpen=true 상태 변경
  Page-->>Sheet: 컴포넌트 렌더링/갱신
  Sheet->>API: getComments(postId, postType)
  API-->>Sheet: 댓글 목록
  U->>Sheet: 입력 후 전송
  Sheet->>API: postReply(payload)
  API-->>Sheet: 성공 응답
  Sheet->>API: getComments 재조회
  U->>Sheet: 바깥 영역 클릭(닫기)
  Sheet->>Store: closeCommentBottomSheet()

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• feat: 댓글&답글 기능 추가 #59: 답글 훅과 입력 컴포넌트를 도입하며, 본 PR의 GlobalCommentBottomSheet가 해당 훅(useReplyActions/useReplyStore)과 MessageInput 연동에 의존.

Suggested labels

✨ Feature, 🎨 Html&css

Poem

토끼는 탁— 툭— 댓글을 톡

시트는 슥— 슉— 아래서 쏙

번쩍 열고, 살짝 닫고, 말이 흐르고—

기억의 기록에 답글이 피고 🌱

밤하늘 같던 오버레이에 별처럼 반짝! ✨

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/comment-hotfix

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (6)

src/stores/useCommentBottomSheetStore.ts (1)

3-12: postType 리터럴 타입 재사용을 위한 별도 타입 도입 제안

'RECORD' | 'VOTE' 유니온을 여러 군데에서 반복 사용하므로, 한 곳에서 정의해 재사용하면 유지보수성이 좋아집니다.

아래처럼 타입을 정의해 재사용해 주세요.

 interface CommentBottomSheetState {
   isOpen: boolean;
   postId: number | null;
-  postType: 'RECORD' | 'VOTE' | null;
+  postType: CommentPostType | null;
 }
 
 interface CommentBottomSheetActions {
-  openCommentBottomSheet: (postId: number, postType: 'RECORD' | 'VOTE') => void;
+  openCommentBottomSheet: (postId: number, postType: CommentPostType) => void;
   closeCommentBottomSheet: () => void;
 }
 
+export type CommentPostType = 'RECORD' | 'VOTE';

Also applies to: 21-22

src/components/memory/RecordItem/RecordItem.tsx (2)

58-59: Zustand 셀렉터로 불필요한 리렌더 줄이기

현재 useCommentBottomSheetStore()를 전체 상태로 구독하고 있어 바텀시트 상태 변경 시 모든 RecordItem이 리렌더될 수 있습니다. 액션만 선택 구독하면 리스트 성능이 개선됩니다.

-  const { openCommentBottomSheet } = useCommentBottomSheetStore();
+  const openCommentBottomSheet = useCommentBottomSheetStore(s => s.openCommentBottomSheet);

---

261-265: parseInt에 기수(radix) 명시 (가독성/안전성 향상)

현행 스펙상 기본 10진으로 파싱되지만, 의도를 명확히 하기 위해 radix를 명시하는 것을 권장합니다.

-  openCommentBottomSheet(parseInt(id), type === 'poll' ? 'VOTE' : 'RECORD');
+  openCommentBottomSheet(parseInt(id, 10), type === 'poll' ? 'VOTE' : 'RECORD');

src/components/common/CommentBottomSheet/GlobalCommentBottomSheet.tsx (1)

61-62: 불필요한 타입 단언 제거 제안

postType은 이미 'RECORD' | 'VOTE'로 충분히 좁은 타입이므로, 상위 유니온('FEED' | 'RECORD' | 'VOTE')으로의 단언이 필요 없습니다. 단언을 줄이면 타입 신뢰도가 올라갑니다.

-        postType: postType as 'FEED' | 'RECORD' | 'VOTE'
+        postType

src/components/common/CommentBottomSheet/GlobalCommentBottomSheet.styled.ts (2)

20-33: min-width(360px)로 인한 소형 디바이스 overflow 가능성

폭 320px 기기(예: iPhone SE)에서 가로 스크롤이 발생할 수 있습니다. 모바일 대응을 위해 min-width를 제거하거나 미디어쿼리로 조건부 적용을 권장합니다.

 export const BottomSheet = styled.div<{ isOpen: boolean }>`
   width: 100%;
   max-width: 540px;
-  min-width: 360px;
   background: ${colors.darkgrey.main};
   border-radius: 20px 20px 0 0;
   display: flex;
   flex-direction: column;
   max-height: 80vh;
   min-height: 50vh;
   transform: translateY(${props => (props.isOpen ? '0' : '100%')});
   transition: transform 0.3s ease;
   overflow: hidden;
 `;

---

15-17: transition 속성 일치화 (미세 개선)

background 값을 변경하고 있으므로 transition: background로 맞추면 의도가 분명해집니다. opacity도 함께 트랜지션하면 더 자연스럽습니다.

-  transition: background-color 0.3s ease;
+  transition: background 0.3s ease, opacity 0.3s ease;

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 62c2187 and c51a04d.

📒 Files selected for processing (5)

• src/components/common/CommentBottomSheet/GlobalCommentBottomSheet.styled.ts (1 hunks)
• src/components/common/CommentBottomSheet/GlobalCommentBottomSheet.tsx (1 hunks)
• src/components/memory/RecordItem/RecordItem.tsx (5 hunks)
• src/pages/memory/Memory.tsx (2 hunks)
• src/stores/useCommentBottomSheetStore.ts (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (3)

src/components/common/CommentBottomSheet/GlobalCommentBottomSheet.styled.ts (1)

src/styles/global/global.ts (2)

• colors (4-53)
• typography (56-77)

src/components/common/CommentBottomSheet/GlobalCommentBottomSheet.tsx (7)

src/stores/useCommentBottomSheetStore.ts (1)

• useCommentBottomSheetStore (14-26)

src/api/comments/getComments.ts (2)

• CommentData (3-16)
• getComments (50-68)

src/hooks/useReplyActions.ts (1)

• useReplyActions (10-54)

src/stores/useReplyStore.ts (1)

• useReplyStore (15-28)

src/api/comments/postReply.ts (1)

• postReply (19-22)

src/components/common/CommentBottomSheet/GlobalCommentBottomSheet.styled.ts (7)

• Overlay (4-18)
• BottomSheet (20-33)
• Header (35-39)
• Title (41-47)
• Content (49-53)
• LoadingState (55-63)
• InputSection (65-70)

src/components/today-words/MessageInput.styled.ts (1)

• MessageInput (62-90)

src/components/memory/RecordItem/RecordItem.tsx (2)

src/stores/useCommentBottomSheetStore.ts (1)

• useCommentBottomSheetStore (14-26)

src/components/memory/RecordItem/RecordItem.styled.ts (1)

• ActionButton (60-79)

🔇 Additional comments (4)

src/stores/useCommentBottomSheetStore.ts (1)

14-26: 전역 바텀시트 상태/액션 설계 깔끔 — LGTM

초기값/리셋 처리와 open/close 액션 인터페이스가 명확합니다. 다른 컴포넌트들이 의존하기 좋게 잘 분리되어 있어요.

src/pages/memory/Memory.tsx (1)

8-8: GlobalCommentBottomSheet 페이지 마운트 추가 — LGTM

고정 오버레이(포지션 fixed) 특성상 페이지 최하단에 마운트해도 정상 동작합니다. Memory 페이지 범위에서만 사용하려는 의도에도 부합합니다.

Also applies to: 299-301

src/components/memory/RecordItem/RecordItem.tsx (1)

379-382: 댓글 버튼 → 바텀시트 열기 연동 — LGTM

버블링 방지와 전역 시트 오픈 흐름이 일관되게 잘 연결되었습니다.

src/components/common/CommentBottomSheet/GlobalCommentBottomSheet.tsx (1)

92-97: 열릴 때 로드/닫힐 때 리셋 플로우 명확 — LGTM

• 시트 오픈 시 목록 로드
• 시트 닫힘 시 입력/답글/목록 리셋

상태 수명 주기가 명확해 UX 및 메모리 효율 측면에서 좋습니다.

Also applies to: 98-105