Skip to content

feat: 기록장 페이지 구현#65

Merged
ljh130334 merged 24 commits into
developfrom
feat/record
Jul 28, 2025
Merged

feat: 기록장 페이지 구현#65
ljh130334 merged 24 commits into
developfrom
feat/record

Conversation

@ljh130334

@ljh130334 ljh130334 commented Jul 28, 2025

Copy link
Copy Markdown
Member

#️⃣연관된 이슈

#60

📝작업 내용

1. 정렬 드롭다운 기능 완성

  • SortDropdown 컴포넌트에 타입 안전성을 위한 interface 수정 및 누락된 props 추가
  • 최신순/인기순/댓글 많은순 정렬 기능이 정상 작동하도록 상태 관리 로직 구현

2. 드롭다운 애니메이션 및 UX 개선

  • keyframes를 활용한 부드러운 slideDown/slideUp 애니메이션 구현 (0.15초 duration)
  • 드롭다운 외부 클릭 시 자동 닫힘 기능 추가 (useRef + useEffect 활용)

3. MemoryAddButton 인터랙티브 기능 구현

  • 버튼 클릭 시 드롭다운 메뉴 표시 기능 추가
  • 버튼 상태에 따른 시각적 피드백: 45도 회전 애니메이션
  • "기록 작성"과 "투표 생성" 옵션을 포함한 드롭다운 메뉴 구현
  • SortDropdown과 동일한 디자인 시스템 적용 (slideUpIn 애니메이션, 외부 클릭 닫기)

스크린샷 (선택)

2025-07-29.12.43.05.mov

💬리뷰 요구사항(선택)

RecordFilters → FilterButtons → SortDropdown의 3단계 props drilling 구조가 적절한지, 혹시 더 나은 상태 관리 방식이 있는지 조언 부탁드립니다.

Summary by CodeRabbit

  • New Features
    • 새로운 "기록장" 페이지가 추가되어 그룹 및 개인 기록을 탭 전환으로 확인할 수 있습니다.
    • 기록 필터(페이지별, 총평), 정렬(최신순, 인기순, 댓글 많은순), 페이지 범위 선택, 기록 추가 버튼, 투표 생성 등 다양한 기능이 제공됩니다.
    • 기록이 없을 때 안내 메시지가 표시되며, 읽기 진행률 80% 미만 시 일부 기록이 흐릿하게 표시됩니다.
    • 투표형 기록, 페이지 범위 모달, 정렬 드롭다운 등 다양한 UI 컴포넌트가 새롭게 도입되었습니다.

ljh130334 added 23 commits July 26, 2025 13:10
@vercel

vercel Bot commented Jul 28, 2025

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
thip ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 28, 2025 3:46pm

@coderabbitai

coderabbitai Bot commented Jul 28, 2025

Copy link
Copy Markdown

Caution

Review failed

The pull request is closed.

Walkthrough

새로운 "기록장" 기능이 대규모로 추가되었습니다. 이 기능은 메모리(기록) 관리 UI와 관련된 다양한 React 컴포넌트, 스타일 파일, 타입 정의, 라우터 경로, 그리고 Emotion 기반의 스타일 시스템을 도입합니다. 주요 UI 요소, 필터 및 정렬 기능, 투표형 기록, 페이지 범위 모달 등이 포함되어 있습니다.

Changes

Cohort / File(s) Change Summary
패키지 및 의존성 추가
package.json
@emotion/css 패키지가 dependencies에 새로 추가되었습니다.
라우팅 및 페이지 진입점
src/pages/index.tsx
Memory 컴포넌트를 위한 새로운 라우트가 추가되고, 관련 import 경로가 수정되었습니다.
기록장 메인 페이지
src/pages/memory/Memory.tsx, src/pages/memory/Memory.styled.ts
기록장 메인 React 컴포넌트(Memory)와 컨테이너 스타일 컴포넌트가 새로 추가되었습니다. 상태 관리, 더미 데이터, 정렬/필터/스낵바 처리, 주요 UI 렌더링 로직이 포함됩니다.
헤더 및 추가 버튼
src/components/memory/MemoryHeader/MemoryHeader.tsx,
src/components/memory/MemoryAddButton/MemoryAddButton.tsx,
src/components/memory/MemoryAddButton/MemoryAddButton.styled.ts
기록장 헤더(MemoryHeader) 및 기록 추가 버튼(MemoryAddButton) 컴포넌트와 스타일 정의가 추가되었습니다. 드롭다운, 아이콘, 콜백 핸들링이 구현되어 있습니다.
기록장 콘텐츠 및 리스트
src/components/memory/MemoryContent/MemoryContent.tsx,
src/components/memory/MemoryContent/MemoryContent.styled.ts,
src/components/memory/MemoryContent/RecordList.tsx,
src/components/memory/MemoryContent/RecordList.styled.ts
기록장 내 콘텐츠 영역, 레코드 리스트, 개발용 버튼, 레이아웃 스타일 등이 새로 도입되었습니다.
탭, 필터, 정렬, 입력 모드
src/components/memory/RecordTabs.tsx,
src/components/memory/RecordTabs.styled.ts,
src/components/memory/RecordFilters/RecordFilters.tsx,
src/components/memory/RecordFilters/RecordFilters.styled.ts,
src/components/memory/RecordFilters/FilterButtons.tsx,
src/components/memory/RecordFilters/FilterButtons.styled.ts,
src/components/memory/RecordFilters/PageInputMode.tsx,
src/components/memory/RecordFilters/PageInputMode.styled.ts,
src/components/memory/SortDropdown.tsx,
src/components/memory/SortDropdown.styled.ts
탭 전환, 필터 버튼, 페이지 범위 입력, 정렬 드롭다운 등 다양한 기록장 보조 UI 컴포넌트 및 스타일 정의가 추가되었습니다. 입력값 검증, 상태 관리, 애니메이션 등이 구현되어 있습니다.
Empty/Info 메시지
src/components/memory/EmptyRecord.tsx,
src/components/memory/EmptyRecord.styled.ts,
src/components/memory/RecordInfoMessage.tsx,
src/components/memory/RecordInfoMessage.styled.ts
기록이 없을 때 또는 안내 메시지용 Empty/Info 컴포넌트와 스타일이 추가되었습니다.
기록 아이템(텍스트/투표)
src/components/memory/RecordItem/RecordItem.tsx,
src/components/memory/RecordItem/RecordItem.styled.ts,
src/components/memory/RecordItem/TextRecord.tsx,
src/components/memory/RecordItem/TextRecord.styled.ts,
src/components/memory/RecordItem/PollRecord.tsx,
src/components/memory/RecordItem/PollRecord.styled.ts
각 기록(텍스트/투표) 아이템을 렌더링하는 컴포넌트, 스타일, 투표 애니메이션, 좋아요/댓글 UI, 블러 처리 등이 구현되었습니다.
페이지 범위 모달
src/components/memory/PageRangeModal.tsx,
src/components/memory/PageRangeModal.styled.ts
페이지 범위 입력을 위한 모달 컴포넌트 및 스타일 정의가 추가되었습니다. 입력값 상태 관리, 키보드 UI, 확인/리셋 동작, 애니메이션 등이 포함됩니다.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant MemoryPage
    participant MemoryContent
    participant RecordFilters
    participant RecordList
    participant RecordItem

    User->>MemoryPage: 진입/탭 선택/필터/정렬/추가 버튼 클릭
    MemoryPage->>MemoryContent: 상태 및 핸들러 전달
    MemoryContent->>RecordFilters: 필터/정렬/페이지 범위 상태 및 콜백 전달
    RecordFilters->>MemoryContent: 필터/정렬/페이지 범위 변경 이벤트
    MemoryContent->>RecordList: 필터링/정렬된 records 전달
    RecordList->>RecordItem: 각 record 렌더링(blur 여부 포함)
    User->>MemoryAddButton: 기록 추가 버튼 클릭
    MemoryAddButton->>MemoryPage: onAddRecord 콜백 실행
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–25분

Suggested reviewers

  • heeeeyong

Poem

🐰
새로 온 기록장의 향기,
탭을 넘기며 추억을 담지.
투표도, 필터도, 정렬도 척척!
페이지 모달로 범위도 콕콕.
토글, 버튼, 스낵바까지
토끼는 신나서 폴짝 뛰지!
🎉

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.


📜 Recent review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between ade28f2 and cb83c20.

⛔ Files ignored due to path filters (12)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
  • src/assets/memory/check.svg is excluded by !**/*.svg
  • src/assets/memory/comment.svg is excluded by !**/*.svg
  • src/assets/memory/down.svg is excluded by !**/*.svg
  • src/assets/memory/heart-filled.svg is excluded by !**/*.svg
  • src/assets/memory/heart.svg is excluded by !**/*.svg
  • src/assets/memory/info.svg is excluded by !**/*.svg
  • src/assets/memory/pen.svg is excluded by !**/*.svg
  • src/assets/memory/plus.svg is excluded by !**/*.svg
  • src/assets/memory/refresh.svg is excluded by !**/*.svg
  • src/assets/memory/vote.svg is excluded by !**/*.svg
  • src/assets/memory/x.svg is excluded by !**/*.svg
📒 Files selected for processing (33)
  • package.json (1 hunks)
  • src/components/memory/EmptyRecord.styled.ts (1 hunks)
  • src/components/memory/EmptyRecord.tsx (1 hunks)
  • src/components/memory/MemoryAddButton/MemoryAddButton.styled.ts (1 hunks)
  • src/components/memory/MemoryAddButton/MemoryAddButton.tsx (1 hunks)
  • src/components/memory/MemoryContent/MemoryContent.styled.ts (1 hunks)
  • src/components/memory/MemoryContent/MemoryContent.tsx (1 hunks)
  • src/components/memory/MemoryContent/RecordList.styled.ts (1 hunks)
  • src/components/memory/MemoryContent/RecordList.tsx (1 hunks)
  • src/components/memory/MemoryHeader/MemoryHeader.tsx (1 hunks)
  • src/components/memory/PageRangeModal.styled.ts (1 hunks)
  • src/components/memory/PageRangeModal.tsx (1 hunks)
  • src/components/memory/RecordFilters/FilterButtons.styled.ts (1 hunks)
  • src/components/memory/RecordFilters/FilterButtons.tsx (1 hunks)
  • src/components/memory/RecordFilters/PageInputMode.styled.ts (1 hunks)
  • src/components/memory/RecordFilters/PageInputMode.tsx (1 hunks)
  • src/components/memory/RecordFilters/RecordFilters.styled.ts (1 hunks)
  • src/components/memory/RecordFilters/RecordFilters.tsx (1 hunks)
  • src/components/memory/RecordInfoMessage.styled.ts (1 hunks)
  • src/components/memory/RecordInfoMessage.tsx (1 hunks)
  • src/components/memory/RecordItem/PollRecord.styled.ts (1 hunks)
  • src/components/memory/RecordItem/PollRecord.tsx (1 hunks)
  • src/components/memory/RecordItem/RecordItem.styled.ts (1 hunks)
  • src/components/memory/RecordItem/RecordItem.tsx (1 hunks)
  • src/components/memory/RecordItem/TextRecord.styled.ts (1 hunks)
  • src/components/memory/RecordItem/TextRecord.tsx (1 hunks)
  • src/components/memory/RecordTabs.styled.ts (1 hunks)
  • src/components/memory/RecordTabs.tsx (1 hunks)
  • src/components/memory/SortDropdown.styled.ts (1 hunks)
  • src/components/memory/SortDropdown.tsx (1 hunks)
  • src/pages/index.tsx (2 hunks)
  • src/pages/memory/Memory.styled.ts (1 hunks)
  • src/pages/memory/Memory.tsx (1 hunks)
✨ 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/record

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
🪧 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.
    • Explain this complex logic.
    • 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. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • 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 src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

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

Documentation and Community

  • 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.

@ljh130334 ljh130334 added ✨ Feature 기능 개발 🎨 Html&css 마크업 & 스타일링 labels Jul 28, 2025
@ljh130334 ljh130334 merged commit 3a3f367 into develop Jul 28, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨ Feature 기능 개발 🎨 Html&css 마크업 & 스타일링

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant