fix: 모달 컴포넌트 디자인 수정(메모생성모달, 메모수정모달 디자인 수정)#140
Conversation
- MemoUpdateModal 컴포넌트의 모달 디자인을 개선
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough이 변경 사항은 여러 모달 및 입력 관련 컴포넌트의 UI 스타일과 레이아웃을 전반적으로 리팩터링합니다. 기존 커스텀 InputField를 네이티브 input으로 대체하고, Tailwind CSS를 활용해 스타일을 일관성 있게 개선했으며, 모달 레이아웃을 flex 기반으로 재구성했습니다. 주요 로직과 컴포넌트 인터페이스는 변경되지 않았습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MemoCreateModal
participant MemoUpdateModal
participant AddButton
participant LexicalMarkdownEditor
User->>MemoCreateModal: 모달 열기
MemoCreateModal->>User: 네이티브 input(제목, 카테고리) 표시
MemoCreateModal->>AddButton: 카테고리 추가 버튼 렌더링
MemoCreateModal->>LexicalMarkdownEditor: 마크다운 에디터 렌더링
User->>MemoUpdateModal: 모달 열기
MemoUpdateModal->>User: 네이티브 input(제목, 카테고리) 및 에러/로딩 UI 표시
MemoUpdateModal->>AddButton: 카테고리 추가 버튼 렌더링
MemoUpdateModal->>LexicalMarkdownEditor: 마크다운 에디터 렌더링
Possibly related PRs
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! ✨ Finishing Touches
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. 🪧 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
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/memo-editor/MemoUpdateModal.tsx (1)
145-147: TODO 주석 처리 필요.카테고리 선택 기능이 아직 구현되지 않았습니다. 이 기능의 구현 계획이 있는지 확인해주세요.
이 TODO 항목에 대한 구현을 도와드릴 수 있습니다. 새로운 이슈를 생성하시겠습니까?
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/components/Modal.tsx(1 hunks)src/components/common/AddButton.tsx(2 hunks)src/components/memo-editor/LexicalMarkdownEditor/LexicalMarkdownEditor.tsx(1 hunks)src/components/memo-editor/MemoCreateModal.tsx(1 hunks)src/components/memo-editor/MemoUpdateModal.tsx(2 hunks)
🧰 Additional context used
🧠 Learnings (2)
src/components/memo-editor/MemoCreateModal.tsx (1)
Learnt from: nakyeonko3
PR: unanbb/memoji#32
File: src/components/memo-editor/MemoCreateModal.tsx:43-46
Timestamp: 2025-06-02T03:29:01.124Z
Learning: memoji 프로젝트의 MemoCreateModal은 조건부 렌더링 패턴을 사용한다. MemoCreateButton이 {isModalOpen && <MemoCreateModal onClose={onClose} />}로 렌더링을 제어하며, 모달이 렌더링될 때는 항상 isOpen={true}로 설정된다. submitMemo 함수에서 onClose()를 먼저 호출하여 모달을 언마운트시킨 후 비동기 메모 생성 작업을 수행하는 것이 정상적인 흐름이다.
src/components/memo-editor/MemoUpdateModal.tsx (1)
Learnt from: nakyeonko3
PR: unanbb/memoji#32
File: src/components/memo-editor/MemoCreateModal.tsx:43-46
Timestamp: 2025-06-02T03:29:01.124Z
Learning: memoji 프로젝트의 MemoCreateModal은 조건부 렌더링 패턴을 사용한다. MemoCreateButton이 {isModalOpen && <MemoCreateModal onClose={onClose} />}로 렌더링을 제어하며, 모달이 렌더링될 때는 항상 isOpen={true}로 설정된다. submitMemo 함수에서 onClose()를 먼저 호출하여 모달을 언마운트시킨 후 비동기 메모 생성 작업을 수행하는 것이 정상적인 흐름이다.
🧬 Code Graph Analysis (2)
src/components/memo-editor/LexicalMarkdownEditor/LexicalMarkdownEditor.tsx (1)
src/components/memo-editor/LexicalMarkdownEditor/plugins/ToolbarPlugin.tsx (1)
ToolbarPlugin(285-559)
src/components/common/AddButton.tsx (1)
src/utils/cn.ts (1)
cn(4-6)
🔇 Additional comments (18)
src/components/common/AddButton.tsx (3)
1-1:cn유틸리티 함수 도입이 좋습니다.코드의 일관성과 클래스 병합을 위해
cn유틸리티 함수를 사용하는 것이 좋은 접근입니다.
13-16: 클래스 병합 로직 개선이 우수합니다.기본 스타일과 전달받은
className을cn함수로 병합하여 스타일 충돌을 방지하고 Tailwind CSS 클래스를 올바르게 처리합니다.
23-23: 아이콘 스타일링 개선이 효과적입니다.고정 크기 prop 대신 명시적인 width/height 클래스를 사용하고 hover 효과를 추가한 것이 더 직관적이고 인터랙티브합니다.
src/components/Modal.tsx (1)
54-54: 패딩 제거가 레이아웃 유연성을 향상시킵니다.모달 컨테이너에서 고정 패딩을 제거하고 각 모달 컨텐츠에서 자체적으로 패딩을 처리하도록 하는 것이 더 유연한 레이아웃을 가능하게 합니다.
src/components/memo-editor/LexicalMarkdownEditor/LexicalMarkdownEditor.tsx (2)
104-104: 컨테이너 크기 조정이 유연성을 개선합니다.고정 높이 퍼센트에서
h-full w-full로 변경하여 에디터가 부모 컨테이너의 크기에 완전히 맞춰지도록 한 것이 더 유연한 레이아웃을 제공합니다.
111-111: 둥근 모서리 추가로 시각적 일관성 향상.
rounded-b-lg클래스를 추가하여 에디터 하단에 둥근 모서리를 적용한 것이 전체적인 모달 디자인과 일관성을 유지합니다.src/components/memo-editor/MemoUpdateModal.tsx (6)
95-95: 모달 컨테이너 스타일링 개선이 우수합니다.flex 레이아웃과 일관된 스타일링(둥근 모서리, 그림자, 테두리)을 적용하여 모던하고 일관성 있는 디자인을 구현했습니다.
98-111: 오류 상태 UI 개선이 좋습니다.오류 메시지의 가독성을 높이고 버튼 스타일링을 개선하여 사용자 경험을 향상시켰습니다.
116-119: 헤더 레이아웃 구조화가 효과적입니다.절대 위치 지정 대신 flex 컨테이너를 사용하여 삭제 및 닫기 버튼을 배치한 것이 더 예측 가능하고 유지보수하기 쉬운 레이아웃을 제공합니다.
122-129: 네이티브 입력 필드로의 전환이 우수합니다.커스텀 InputField를 네이티브 HTML input으로 교체하고 Tailwind CSS로 스타일링한 것이 더 직관적이고 성능상 이점이 있습니다. 제목 입력의 스타일링도 적절합니다.
130-153: 카테고리 입력 디자인이 직관적입니다."#" 접두사와 임베디드 AddButton을 포함한 카테고리 입력 디자인이 사용자에게 명확한 시각적 피드백을 제공합니다.
155-162: 에디터 컨테이너 레이아웃 최적화.flex-grow를 사용하여 에디터가 사용 가능한 공간을 최대한 활용하도록 하고, autoFocus를 비활성화한 것이 적절합니다.
src/components/memo-editor/MemoCreateModal.tsx (6)
61-61: 모달 스타일링이 MemoUpdateModal과 일관성 있게 적용되었습니다.두 모달 컴포넌트 간의 일관된 디자인 언어를 유지하여 사용자 경험의 일관성을 보장합니다.
66-69: 레이아웃 구조 개선이 효과적입니다.flex 기반 레이아웃으로 헤더와 메인 컨텐츠 영역을 명확히 분리한 것이 더 나은 구조를 제공합니다.
72-79: 제목 입력 필드 스타일링이 우수합니다.네이티브 input을 사용하면서도 적절한 스타일링(대형 폰트, 하단 보더, 포커스 효과)을 적용하여 시각적으로 매력적이고 기능적입니다.
80-97: 카테고리 입력 디자인이 일관성 있게 구현되었습니다.MemoUpdateModal과 동일한 카테고리 입력 패턴("#" 접두사, 임베디드 AddButton)을 사용하여 일관성을 유지합니다.
98-102: 카테고리 모달 위치 조정이 적절합니다.모달의 새로운 레이아웃에 맞춰 카테고리 모달의 위치를 조정한 것이 적절합니다.
104-111: 에디터 컨테이너 구성이 최적화되었습니다.flex-grow를 사용하여 에디터가 사용 가능한 공간을 최대한 활용하도록 하고, placeholder 텍스트도 개선되었습니다.
1 participant
Summary by CodeRabbit