[feat] 공통 컴포넌트 모달 구현 #98
Conversation
jangwonyoon
requested review from
semnil5202,
JaeIn1,
youngju6143 and
evenway2025
as code owners
📝 WalkthroughWalkthrough이번 풀 리퀘스트에서는 여러 파일에 걸쳐 UI 컴포넌트와 스타일 관련 확장이 이루어졌습니다.
Changes
Sequence Diagram(s)sequenceDiagram
participant U as 사용자
participant S as SettingView
participant D as LogoutDialog
participant R as Router
U->>S: 로그아웃 아이템 선택
S->>D: LogoutDialog 트리거 실행
D->>U: 로그아웃 확인 다이얼로그 표시
U->>D: "확인" 버튼 클릭
D->>S: onConfirm 콜백 호출
S->>R: router.push('/login') 호출
R-->>U: 로그인 페이지로 리다이렉션
Possibly related PRs
Suggested labels
Suggested reviewers
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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: 2
🧹 Nitpick comments (3)
src/shared/ui/dialog/commonDialog.tsx (2)
16-29: 문서화가 잘 되어 있습니다.컴포넌트와 속성에 대한 JSDoc 문서화가 잘 작성되어 있어 컴포넌트 사용자가 쉽게 이해할 수 있습니다.
다만, 중복된 문서 주석이 있습니다. 16-19줄과 21-29줄의 내용이 중복되므로 하나로 통합하는 것이 좋겠습니다.
-/** - * 공통으로 사용되는 다이얼로그 컴포넌트 - * 제목, 내용, 확인/취소 버튼을 포함하는 기본적인 다이얼로그 구조를 제공합니다. - */ - /** * 공통 다이얼로그 컴포넌트의 Props 타입 + * 공통으로 사용되는 다이얼로그 컴포넌트 + * 제목, 내용, 확인/취소 버튼을 포함하는 기본적인 다이얼로그 구조를 제공합니다. * @property {string} title - 다이얼로그 제목 * @property {React.ReactNode} trigger - 다이얼로그를 열기 위한 트리거 요소 * @property {React.ReactNode} children - 다이얼로그 내부 컨텐츠 * @property {() => void} onConfirm - 확인 버튼 클릭 시 실행될 콜백 함수 * @property {string} actionText - 확인 버튼에 표시될 텍스트 (기본값: '확인') * @property {string} cancelText - 취소 버튼에 표시될 텍스트 (기본값: '취소') */
31-61: CommonDialog 컴포넌트 구현이 잘 되어 있습니다.다이얼로그 구현이 심플하고 효율적으로 되어 있습니다.
WrappedDialog를 재사용하여 코드 중복을 방지하고, 기본 버튼 레이아웃을 일관되게 제공하는 구조가 좋습니다.하나 고려할 점은
onConfirm함수가 다이얼로그가 닫힌 후에 실행될 수 있도록 하는 것입니다. 현재는 버튼 클릭 시 바로 실행되는데, 특정 상황에서는 닫힌 후 실행되는 것이 더 적절할 수 있습니다.<DialogClose asChild> - <Button size="dialog" onClick={onConfirm}> + <Button + size="dialog" + onClick={() => { + // 비동기적으로 실행하거나 상태 업데이트 전에 타이머 설정 고려 + setTimeout(onConfirm, 0); + }} + > {actionText} </Button> </DialogClose>위와 같은 방식으로 변경하면 다이얼로그가 먼저 닫히고 난 후 콜백이 실행되어 UX가 더 자연스러울 수 있습니다.
src/features/setting/ui/index.tsx (1)
14-17: 로그아웃 처리 로직이 추가되었습니다.로그아웃 시 로그인 페이지로 리다이렉션하는 로직이 명확하게 구현되어 있습니다.
한 가지 고려할 점은 향후 로그아웃 API 호출과 같은 추가 작업이 필요할 경우에 대비하여 더 확장성 있는 구조로 만드는 것입니다.
const handleLogout = () => { + // TODO: 실제 로그아웃 API 호출 추가 필요 + // 예: authService.logout(); router.push('/login'); };
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (10)
package.json(2 hunks)src/app/globals.css(1 hunks)src/features/setting/ui/dialog/logout.tsx(1 hunks)src/features/setting/ui/index.tsx(2 hunks)src/shared/spacing/spacing.ts(14 hunks)src/shared/ui/button.tsx(1 hunks)src/shared/ui/dialog/commonDialog.tsx(1 hunks)src/shared/ui/dialog/index.tsx(1 hunks)src/shared/ui/dialog/wrappedDialog.tsx(1 hunks)tailwind.config.ts(2 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
src/shared/ui/dialog/wrappedDialog.tsx (1)
src/shared/ui/dialog/index.tsx (7) (7)
Dialog(93-93)DialogTrigger(96-96)DialogContent(98-98)DialogHeader(99-99)DialogTitle(101-101)DialogFooter(100-100)DialogClose(97-97)
🔇 Additional comments (20)
src/app/globals.css (1)
67-67: CSS 변수 추가가 잘 정의되었습니다.
--radius-ml: 20px변수 추가는 기존--radius-md: 12px와--radius-lg: 80px사이의 값을 제공하여 더 세밀한 디자인 조정이 가능해졌습니다. 이 변수는 tailwind.config.ts에서 참조되어 일관된 디자인 시스템을 유지하는 데 도움이 됩니다.src/shared/ui/button.tsx (2)
16-16: 새로운 버튼 variant가 일관되게 추가되었습니다.
weakvariant는 모달 컴포넌트에서 필요한 스타일을 제공합니다. 스타일 정의가 명확하게 작성되었습니다.
20-20: 새로운 size variant가 모달에 적합하게 추가되었습니다.
dialogsize는 모달 내 버튼에 대한 특정 너비와 모서리 반경을 정의하여 일관된 UX를 제공합니다.package.json (2)
19-19: Radix UI Dialog 의존성이 적절하게 추가되었습니다.
@radix-ui/react-dialog패키지는 접근성이 뛰어난 다이얼로그 컴포넌트를 제공하여 모달 구현에 적합합니다. 이는 PR의 목표인 shadcn-ui 다이얼로그를 사용한 모달 컴포넌트 구현과 일치합니다.
38-38: 의존성 순서 변경이 적절합니다.
react-intersection-observer패키지의 위치 변경은 알파벳 순서를 유지하여 가독성을 향상시킵니다.tailwind.config.ts (2)
106-106: CSS 변수와 일치하는 borderRadius 설정이 잘 추가되었습니다.
ml: 'var(--radius-ml)'추가는 globals.css에 정의된 새 변수를 tailwind 클래스에서 사용할 수 있게 해줍니다. 이를 통해 모달 컴포넌트와 같은 UI 요소에 더 다양한 border-radius 스타일링 옵션을 제공합니다.
138-138: 새로운 간격 값이 적절하게 추가되었습니다.
lx: '28px'간격 값은 기존의lg: '24px'와xl: '32px'사이에 위치하여 더 세밀한 디자인 조정이 가능합니다. 이는 모달 내부 요소들의 간격을 조정하는 데 유용할 것입니다.src/features/setting/ui/dialog/logout.tsx (1)
1-23: 로그아웃 다이얼로그 컴포넌트가 잘 구현되었습니다.로그아웃 기능을 위한 확인 다이얼로그 컴포넌트가 잘 구성되어 있습니다.
CommonDialog를 활용하여 일관된 UI를 유지하면서 로그아웃 특화 기능을 제공하고 있어 좋습니다.다만, 다음 사항을 고려해 보시면 좋겠습니다:
LogoutDialogProps인터페이스에 JSDoc 문서화를 추가하여 컴포넌트 사용 방법을 더 명확히 할 수 있습니다.- 현재 구현은 단순하고 효율적이지만, 나중에 로그아웃 기능이 API 호출 등으로 확장될 경우를 대비하여 코드를 쉽게 수정할 수 있도록 설계되어 있습니다.
src/shared/ui/dialog/wrappedDialog.tsx (1)
8-14: WrappedDialogProps 인터페이스 정의가 명확합니다.인터페이스가 명확하게 정의되어 있어 컴포넌트의 사용 방법을 이해하기 쉽습니다.
footer가 일반 React 노드 또는 함수로 전달될 수 있는 유연한 설계가 좋습니다.src/shared/ui/dialog/commonDialog.tsx (1)
7-14: CommonDialogProps 타입 정의가 명확합니다.다이얼로그 컴포넌트의 속성이 명확하게 타입으로 정의되어 있어 좋습니다.
src/features/setting/ui/index.tsx (3)
4-4: Next.js 라우터 임포트가 추가되었습니다.로그아웃 후 페이지 리다이렉션을 위한 적절한 추가입니다.
11-11: LogoutDialog 컴포넌트 임포트가 추가되었습니다.로그아웃 확인 다이얼로그를 위한 적절한 임포트입니다.
27-27: 로그아웃 다이얼로그 컴포넌트 사용이 적절합니다.기존 로그아웃 아이템을 로그아웃 다이얼로그의 트리거로 사용하고, 확인 시 로그아웃 처리 함수를 호출하도록 구현한 점이 좋습니다. 사용자 경험 측면에서 중요한 동작에 확인 절차를 추가한 것은 매우 바람직합니다.
src/shared/spacing/spacing.ts (1)
12-12: 새로운 spacing 변형lx가 일관되게 추가되었습니다.28px 간격을 나타내는 새로운 spacing 변형
lx가 모든 margin과 padding 속성에 일관성 있게 추가되었습니다. 이는 기존 24px(lg)와 32px(xl) 사이의 중간 크기로, UI 컴포넌트 간격을 더 세밀하게 조정할 수 있게 해줍니다.Also applies to: 23-23, 34-34, 45-45, 56-56, 67-67, 78-78, 89-89, 100-100, 111-111, 122-122, 133-133, 144-144, 155-155
src/shared/ui/dialog/index.tsx (6)
1-9: Radix UI를 사용한 Dialog 컴포넌트 구현필요한 패키지와 유틸리티를 올바르게 가져왔습니다. 'use client' 지시어는 Next.js에서 클라이언트 컴포넌트로 사용하기 위해 적절히 추가되었습니다.
10-16: 기본 Dialog 프리미티브 컴포넌트 정의Radix UI의 기본 컴포넌트들을 적절하게 재사용했습니다. 이렇게 하면 외부 라이브러리의 구현 세부사항을 추상화하여 향후 변경 사항이 있을 때 유지 관리가 용이해집니다.
18-32: DialogOverlay 구현DialogOverlay 컴포넌트가 적절하게 구현되었습니다. 반투명 검은색 배경과 애니메이션 효과가 적용되어 있어 사용자 경험이 향상됩니다.
58-66: DialogHeader와 DialogFooter 구현DialogHeader와 DialogFooter 컴포넌트가 적절하게 구현되었습니다. 반응형 디자인을 고려하여 모바일과 데스크톱 환경에서 모두 잘 작동하도록 설계되었습니다.
68-90: DialogTitle과 DialogDescription 구현DialogTitle과 DialogDescription 컴포넌트가 스타일링과 함께 올바르게 구현되었습니다. 접근성을 위해 Radix UI의 기본 컴포넌트를 활용한 것이 좋습니다.
92-103: 모든 Dialog 관련 컴포넌트 내보내기모든 Dialog 관련 컴포넌트가 적절하게 내보내져 있어 다른 파일에서 쉽게 가져와 사용할 수 있습니다.
| const DialogContent = React.forwardRef< | ||
| React.ElementRef<typeof DialogPrimitive.Content>, | ||
| React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> | ||
| >(({ className, children, ...props }, ref) => ( | ||
| <DialogPortal> | ||
| <DialogOverlay /> | ||
| <DialogPrimitive.Content | ||
| ref={ref} | ||
| className={cn( | ||
| 'rounded-ml fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', | ||
| spacingStyles({ paddingTop: 'xl', paddingX: 'ml', paddingBottom: 'ml' }), | ||
| className, | ||
| )} | ||
| {...props} | ||
| > | ||
| {children} | ||
| <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500 dark:ring-offset-zinc-950 dark:focus:ring-zinc-300 dark:data-[state=open]:bg-zinc-800 dark:data-[state=open]:text-zinc-400"> | ||
| {/* <X className="h-4 w-4" /> */} | ||
| {/* <span className="sr-only">Close</span> */} | ||
| </DialogPrimitive.Close> | ||
| </DialogPrimitive.Content> | ||
| </DialogPortal> | ||
| )); | ||
| DialogContent.displayName = DialogPrimitive.Content.displayName; |
There was a problem hiding this comment.
DialogContent 구현에 닫기 버튼 아이콘 누락
DialogContent 컴포넌트는 잘 구현되었지만, 닫기 버튼에 아이콘이 없습니다. 50-51 라인에서 아이콘과 스크린 리더 텍스트가 주석 처리되어 있어 사용자가 닫기 버튼을 식별하기 어려울 수 있습니다.
다음과 같이 수정하는 것을 권장합니다:
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500 dark:ring-offset-zinc-950 dark:focus:ring-zinc-300 dark:data-[state=open]:bg-zinc-800 dark:data-[state=open]:text-zinc-400">
- {/* <X className="h-4 w-4" /> */}
- {/* <span className="sr-only">Close</span> */}
+ <X className="h-4 w-4" />
+ <span className="sr-only">닫기</span>
</DialogPrimitive.Close>📝 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.
| const DialogContent = React.forwardRef< | |
| React.ElementRef<typeof DialogPrimitive.Content>, | |
| React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> | |
| >(({ className, children, ...props }, ref) => ( | |
| <DialogPortal> | |
| <DialogOverlay /> | |
| <DialogPrimitive.Content | |
| ref={ref} | |
| className={cn( | |
| 'rounded-ml fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', | |
| spacingStyles({ paddingTop: 'xl', paddingX: 'ml', paddingBottom: 'ml' }), | |
| className, | |
| )} | |
| {...props} | |
| > | |
| {children} | |
| <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500 dark:ring-offset-zinc-950 dark:focus:ring-zinc-300 dark:data-[state=open]:bg-zinc-800 dark:data-[state=open]:text-zinc-400"> | |
| {/* <X className="h-4 w-4" /> */} | |
| {/* <span className="sr-only">Close</span> */} | |
| </DialogPrimitive.Close> | |
| </DialogPrimitive.Content> | |
| </DialogPortal> | |
| )); | |
| DialogContent.displayName = DialogPrimitive.Content.displayName; | |
| const DialogContent = React.forwardRef< | |
| React.ElementRef<typeof DialogPrimitive.Content>, | |
| React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> | |
| >(({ className, children, ...props }, ref) => ( | |
| <DialogPortal> | |
| <DialogOverlay /> | |
| <DialogPrimitive.Content | |
| ref={ref} | |
| className={cn( | |
| 'rounded-ml fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', | |
| spacingStyles({ paddingTop: 'xl', paddingX: 'ml', paddingBottom: 'ml' }), | |
| className, | |
| )} | |
| {...props} | |
| > | |
| {children} | |
| <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500 dark:ring-offset-zinc-950 dark:focus:ring-zinc-300 dark:data-[state=open]:bg-zinc-800 dark:data-[state=open]:text-zinc-400"> | |
| <X className="h-4 w-4" /> | |
| <span className="sr-only">닫기</span> | |
| </DialogPrimitive.Close> | |
| </DialogPrimitive.Content> | |
| </DialogPortal> | |
| )); | |
| DialogContent.displayName = DialogPrimitive.Content.displayName; |
There was a problem hiding this comment.
추후 필요하면 조건을 달아서 사용할거기 때문에 주석처리를 해놓은것이야
There was a problem hiding this comment.
@jangwonyoon 넵, 이해했습니다. 나중에 조건부로 사용하기 위해 주석 처리해 두신 의도가 있으셨군요. 개발 계획에 맞게 진행하시면 될 것 같습니다. 이전 제안은 무시해 주세요!
✏️ Learnings added
Learnt from: jangwonyoon
PR: depromeet/Took-FE#98
File: src/shared/ui/dialog/index.tsx:33-56
Timestamp: 2025-03-20T15:57:29.350Z
Learning: Dialog 컴포넌트의 닫기 버튼 아이콘과 스크린 리더 텍스트는 추후 조건부 사용을 위해 의도적으로 주석 처리되어 있음
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
example에 지원 설명
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/shared/ui/dialog/wrappedDialog.tsx (2)
56-98: 예제 코드 중복이 있습니다예제 3과 4가 동일한 내용을 담고 있습니다. 하나를 제거하거나 다른 예제로 대체하는 것이 좋겠습니다.
40-46: 스타일 속성을 더 유연하게 만들면 좋을 것 같습니다현재
spacingStyles는paddingTop과paddingBottom만 설정하고 있습니다. 컴포넌트 사용자가 필요에 따라 다양한 간격 값을 설정할 수 있도록 더 많은 스타일 속성을 props로 받아 전달하는 것을 고려해 보세요.
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/shared/ui/dialog/wrappedDialog.tsx(1 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
src/shared/ui/dialog/wrappedDialog.tsx (1)
src/shared/ui/dialog/index.tsx (7) (7)
Dialog(93-93)DialogTrigger(96-96)DialogContent(98-98)DialogHeader(99-99)DialogTitle(101-101)DialogFooter(100-100)DialogClose(97-97)
🔇 Additional comments (3)
src/shared/ui/dialog/wrappedDialog.tsx (3)
1-98: 잘 구현된 WrappedDialog 컴포넌트입니다. 👍전체적으로 컴포넌트가 잘 구현되어 있고, JSDoc 문서화도 적절히 되어 있습니다. 예제 코드도 포함되어 있어 사용 방법을 이해하기 쉽습니다.
40-40: 배경색 검토가 필요합니다PR 설명에 언급된 대로 현재 배경색이 검은색이라 흐리게 보이는 효과가 있습니다. 디자이너와 협의하여 이 부분을 검토해 보시기 바랍니다.
49-49: 푸터 처리 개선 완료 👍이전 리뷰에서 지적된 푸터 함수 처리 문제가 적절히 해결되었습니다. 이제
handleClose함수를 전달하여 다이얼로그를 제대로 닫을 수 있게 되었습니다.
* 🐛 Fix: 배포 env 백엔드 API 수정 (#91) * [Feat] 공통 컴포넌트 Appbar, Toast 편집 (#93) * ✨ Feat: Appbar 케이스 추가(받은 명함 페이지, 설정 페이지) * ✨ Feat: Toast 새 케이스 추가(success) * 🐛 Fix: onRightClickSecond potential issue 해결 * feat: 설정 list view를 구현합니다. (#95) * ♻️ Refactor: 사용하지 않는 타입 제거 * ♻️ Refactor: 리스트 item 설정 페이지 variant 확장 * ✨ Feat: 설정 리스트 view 구현 (#97) * [feat] 공통 컴포넌트 모달 구현 (#98) * ✨ Feat: 간격 lx 28px 확장 * 📦️ Chore: dialog 패키지 설치 * 💄 Style: radius 20px 추가 * 💄 Style: border, spacing 28px, 20px 추가 * ✨ Feat: 모달 컴포넌트 구현, 커스텀 모달 구현 * ✨ Feat: 공통 컴포넌트 버튼 - dialog 버튼 옵션 추가 * ✨ Feat: 세팅 다이얼로그 추가 * ✨ Feat: 공통 모달, 프로그래밍식 닫기 지원 example에 지원 설명 * [feat]: 회원 탈퇴 페이지 UI 구현, react hook form 구현 (#103) * feat: 회원 탈퇴 스키마 구현 * ✨ Feat: 공통 체크박스 버튼, 체크박스 버튼 그룹 구현 * ✨ Feat: 공통 fixedBottom 버튼 구현 * ✨ Feat: 회원탈퇴 react hook form 적용, ui 구현 완료 * ✨ Feat: 회원탈퇴 router 추가 * ♻️ Refactor: 카드세팅뷰 ; 추가 * ✨ Feat: 회원탈퇴 직접입력 필드 isDirty로 validation 필드가 동작을 하고 나서 validation 추가 * ♻️ Refactor: 가독성 개선, config 분리 * ✨ Feat: 알람 설정 UI 구현 (#105) * [feat] 받은 명함 상세 페이지 디자인 구현 (#100) * ♻️ refactor : next.config 이미지 경로 추가 * ✨feat : 수정 , 삭제 svg 추가 * ♻️ refactor : 로그인 후 경로 로직 수정 * ♻️ refactor : 카드 상세 페이지 높이 수정 * ✨feat : 명함 상세 응답 데이터 임시 변경 * ✨feat : 바텀 시트 상태 관리 훅 생성 * ✨feat : 받은 명함 데이터 임시 생성 * ✨feat : 받은 명함 타임 임시 작성 * ♻️ refactor : 내 명함 상세 타입 파일명 수정 * ✨feat : 받은 명함 타입 임시 작성 * ✨feat : 명상 상세 헤더 컴포넌트 한줄 메모 기능 추가 * ♻️ refactor : 명함 상세 페이지 불필요한 import 제거 * ♻️ refactor : 명함 상세 프로젝트 컴포넌트 링크 태그 추가 * ✨feat : 바텀 시트 공통 컴포넌트 생성 * ♻️ refactor : toast 위치 수정 * ♻️ refactor : 변수 주석 추가 * ♻️ refactor : 불필요한 타입 제거 및 예외 처리 추가 * ♻️ refactor : 토스트 중복 호출 제거 * ✨feat : appbar onLeftClick 기능 추가 * ♻️ refactor : memoInput으로 네이밍 수정 , z-index 수정 * ♻️ refactor : BottomMenuItem에 className 속성 추가 * [Feat] 명함 생성 - 메인화면 UI 구현 (#109) * 📦️ Chore: install tailwind-scrollbar-hide * ✨ Feat: 명함 생성 - 메인화면 UI 구현 (흥미로운 명함 카드 제외) * 💄 Style: Appbar title text color 추가, Thumbnail에 imageurl 추가 * ♻️ Refactor: 명함 상세뷰 분리 * ✨ Feat: useReceivedCardQuery 구현 및 Card previewInfoType의 type 수정 * 🐛 Fix: fix pnpm error * [Feat] Apple login 구현 (#110) * refactor: apple login key 수정 * refactor: apple login 구현 * [Feat] Onboarding 페이지 UI 수정 및 이미지 교체 (#99) * refactor: home swiper classname 지정 * refactor: onboarding image 첫 슬라이드 완성 * refactor: 슬라이드 및 디스크립션 구현 * refactor: second slide 구현 * feat: 세번째 슬라이드 생성 * refactor: 사용하지 않는 컴포넌트 제거 및 온보딩 페이지 라우팅 분리 대기 * refactor: 임시 슬라이드 index 수정 * refactor: 온보딩이랑 로그인 피쳐 분리 * style: 주석 추가 --------- Co-authored-by: 윤장원 <[email protected]> Co-authored-by: 영주 <[email protected]> Co-authored-by: JaeIn1 <[email protected]>
📌 개요
관련이슈: #86
📋 변경사항
기능
shared/ui/dialog/commonDialog문서화 해놨습니다.index.tsx, 상위 추상화wrappedDialog, 도메인 커스텀 추상화commonDialog로 진행하였습니다.화면
특이사항
Summary by CodeRabbit