refactor: BottomSheet Compound 패턴 적용 (#93)#94
Conversation
Walkthrough이 변경사항은 BottomSheet UI 컴포넌트의 Compound 패턴 도입을 중심으로, 관련 스토리북, 스타일, 타입 정의, 그리고 일부 타이포그래피 시스템을 전반적으로 리팩토링합니다. 추가적으로 여러 UI 컴포넌트의 폰트 스타일, 뷰포트 단위, 버튼 및 텍스트필드 스타일이 세분화되고 개선되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BottomSheet.Root
participant BottomSheet.Trigger
participant BottomSheet.Content
participant BottomSheet.Title
participant BottomSheet.Body
participant BottomSheet.Footer
User->>BottomSheet.Trigger: 트리거 클릭
BottomSheet.Trigger->>BottomSheet.Root: open 상태 변경
BottomSheet.Root->>BottomSheet.Content: Portal/Overlay 렌더
BottomSheet.Content->>BottomSheet.Title: 제목 영역 렌더
BottomSheet.Content->>BottomSheet.Body: 본문 영역 렌더
BottomSheet.Content->>BottomSheet.Footer: 푸터(버튼 등) 렌더
User->>BottomSheet.Footer: 액션(확인/닫기 등)
BottomSheet.Footer->>BottomSheet.Root: 상태 변경 및 닫힘
Estimated code review effort🎯 4 (Complex) | ⏱️ ~35 minutes Poem
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
src/app/member/onboarding/layout.css.tsOops! Something went wrong! :( ESLint: 9.27.0 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.27.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting. src/app/(auth)/login/_styles/Login.css.tsOops! Something went wrong! :( ESLint: 9.27.0 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.27.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting. src/components/ui/BottomSheet/BottomSheet.tsxOops! Something went wrong! :( ESLint: 9.27.0 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.27.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting.
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
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
CodeRabbit Configuration File (
|
|
🎨 Storybook Preview: https://685a32a1c0bbd269fdb67af4-ocxauccpco.chromatic.com/ |
![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 (6)
src/components/ui/BottomSheet/BottomSheetContent.tsx (1)
22-26: className 처리 로직을 개선할 수 있습니다.현재 조건부 className 연결 방식이 작동하지만, 더 간결하게 개선할 수 있습니다.
다음과 같이 템플릿 리터럴을 사용하여 개선할 수 있습니다:
- className={ - className - ? `${styles.innerContent} ${className}` - : styles.innerContent - } + className={`${styles.innerContent}${className ? ` ${className}` : ''}`}또는 유틸리티 함수를 사용하는 것도 좋습니다:
+import { cn } from "@/lib/utils"; // 클래스명 유틸리티가 있다면 - className={ - className - ? `${styles.innerContent} ${className}` - : styles.innerContent - } + className={cn(styles.innerContent, className)}src/components/ui/BottomSheet/BottomSheetBody.tsx (1)
15-17: className 처리 로직의 일관성 개선을 권장합니다.BottomSheetContent와 동일한 className 처리 패턴을 사용하고 있습니다. 일관성을 위해 동일한 개선 방법을 적용하는 것이 좋습니다.
템플릿 리터럴을 사용하여 개선:
- className={ - className ? `${styles.sheetBody} ${className}` : styles.sheetBody - } + className={`${styles.sheetBody}${className ? ` ${className}` : ''}`}또는 유틸리티 함수 사용:
+import { cn } from "@/lib/utils"; - className={ - className ? `${styles.sheetBody} ${className}` : styles.sheetBody - } + className={cn(styles.sheetBody, className)}src/components/ui/BottomSheet/BottomSheetTitle.tsx (1)
20-24: 클래스 병합 로직 간소화 가능문자열 보간 대신
clsx같은 유틸을 사용하면 가독성과 조건부 클래스 관리가 개선됩니다.src/components/ui/BottomSheet/BottomSheet.css.ts (1)
33-39: 색상 토큰 미사용핸들 색상이
#D9D9D9로 하드코딩돼 있습니다. 디자인 토큰(colors/semantic)을 사용해 일관성을 유지해 주세요.src/components/ui/BottomSheet/BottomSheet.tsx (1)
72-79: 객체 리터럴에as const지정 권장
as const를 붙이면 IDE에서 서브컴포넌트 이름 자동완성이 가능해집니다. 런타임에는 변화가 없으니 타입 품질만 향상됩니다.src/components/ui/BottomSheet/BottomSheet.stories.tsx (1)
48-50: 열기 상태 관리 중복
Trigger가 자체적으로 Drawer 상태를 토글하는데,onClick으로setIsOpen(true)를 또 호출하고 있습니다. 한쪽만 사용해 로직을 단순화하세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/assets/logo-wordmark.svgis excluded by!**/*.svg
📒 Files selected for processing (20)
src/app/(auth)/login/_styles/Login.css.ts(2 hunks)src/app/member/onboarding/layout.css.ts(1 hunks)src/app/member/profile/_components/Banner/Banner.tsx(1 hunks)src/components/ui/BottomSheet/BottomSheet.css.ts(3 hunks)src/components/ui/BottomSheet/BottomSheet.stories.tsx(1 hunks)src/components/ui/BottomSheet/BottomSheet.tsx(1 hunks)src/components/ui/BottomSheet/BottomSheetBody.tsx(1 hunks)src/components/ui/BottomSheet/BottomSheetContent.tsx(1 hunks)src/components/ui/BottomSheet/BottomSheetFooter.tsx(1 hunks)src/components/ui/BottomSheet/BottomSheetRoot.tsx(1 hunks)src/components/ui/BottomSheet/BottomSheetTitle.tsx(1 hunks)src/components/ui/BottomSheet/BottomSheetTrigger.tsx(1 hunks)src/components/ui/BottomSheet/index.ts(1 hunks)src/components/ui/Button/Button.css.ts(1 hunks)src/components/ui/TextButton/TextButton.css.ts(1 hunks)src/components/ui/TextField/TextField.css.ts(1 hunks)src/components/ui/TextField/TextField.tsx(2 hunks)src/components/ui/TextField/index.ts(1 hunks)src/styles/reset.css.ts(1 hunks)src/styles/typography.css.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
src/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/nextjs-folder-structure.mdc)
All files must use TypeScript.
Files:
src/app/member/onboarding/layout.css.tssrc/styles/reset.css.tssrc/components/ui/Button/Button.css.tssrc/app/(auth)/login/_styles/Login.css.tssrc/components/ui/TextField/index.tssrc/app/member/profile/_components/Banner/Banner.tsxsrc/components/ui/TextButton/TextButton.css.tssrc/components/ui/BottomSheet/BottomSheetTrigger.tsxsrc/components/ui/BottomSheet/index.tssrc/components/ui/BottomSheet/BottomSheetTitle.tsxsrc/components/ui/BottomSheet/BottomSheetContent.tsxsrc/components/ui/BottomSheet/BottomSheetFooter.tsxsrc/components/ui/BottomSheet/BottomSheetBody.tsxsrc/components/ui/TextField/TextField.css.tssrc/components/ui/BottomSheet/BottomSheet.tsxsrc/components/ui/BottomSheet/BottomSheetRoot.tsxsrc/components/ui/TextField/TextField.tsxsrc/styles/typography.css.tssrc/components/ui/BottomSheet/BottomSheet.stories.tsxsrc/components/ui/BottomSheet/BottomSheet.css.ts
{src/styles/**/*.css.ts,src/app/**/_components/**/*.css.ts,src/components/**/*.css.ts}
📄 CodeRabbit Inference Engine (.cursor/rules/nextjs-folder-structure.mdc)
Style files must use camelCase naming with the
.css.tsextension (e.g.,Button.css.ts,theme.css.ts).
Files:
src/styles/reset.css.tssrc/components/ui/Button/Button.css.tssrc/components/ui/TextButton/TextButton.css.tssrc/components/ui/TextField/TextField.css.tssrc/styles/typography.css.tssrc/components/ui/BottomSheet/BottomSheet.css.ts
src/styles/*.css.ts
📄 CodeRabbit Inference Engine (.cursor/rules/nextjs-folder-structure.mdc)
Global styles should be placed in the
styles/folder, using vanilla-extract.
Files:
src/styles/reset.css.tssrc/styles/typography.css.ts
{src/app/**/_components/**/*.tsx,src/components/**/*.tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/nextjs-folder-structure.mdc)
Component files must use PascalCase naming (e.g.,
Button.tsx,DomainLayout.tsx).
Files:
src/app/member/profile/_components/Banner/Banner.tsxsrc/components/ui/BottomSheet/BottomSheetTrigger.tsxsrc/components/ui/BottomSheet/BottomSheetTitle.tsxsrc/components/ui/BottomSheet/BottomSheetContent.tsxsrc/components/ui/BottomSheet/BottomSheetFooter.tsxsrc/components/ui/BottomSheet/BottomSheetBody.tsxsrc/components/ui/BottomSheet/BottomSheet.tsxsrc/components/ui/BottomSheet/BottomSheetRoot.tsxsrc/components/ui/TextField/TextField.tsxsrc/components/ui/BottomSheet/BottomSheet.stories.tsx
🧬 Code Graph Analysis (6)
src/components/ui/Button/Button.css.ts (1)
src/styles/typography.css.ts (1)
typography(3-172)
src/app/(auth)/login/_styles/Login.css.ts (1)
src/app/member/onboarding/layout.css.ts (1)
wrapper(3-9)
src/components/ui/TextButton/TextButton.css.ts (1)
src/styles/typography.css.ts (1)
typography(3-172)
src/components/ui/TextField/TextField.css.ts (1)
src/styles/typography.css.ts (1)
typography(3-172)
src/components/ui/TextField/TextField.tsx (1)
src/types/polymorphic.types.ts (1)
PolymorphicComponentPropsWithRef(35-38)
src/components/ui/BottomSheet/BottomSheet.css.ts (2)
src/styles/semantic.css.ts (1)
semantic(5-68)src/styles/zIndex.css.ts (1)
zIndex(3-9)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: storybook-preview
🔇 Additional comments (22)
src/styles/reset.css.ts (1)
64-66: 브라우저 간 일관된 버튼 스타일링을 위한 적절한 appearance 리셋WebKit, Mozilla, 표준 CSS에 대한 appearance 속성을 모두 "none"으로 설정하여 네이티브 브라우저 버튼 스타일을 완전히 제거했습니다. 이는 기존의 패딩, 테두리, 배경 리셋과 함께 크로스 브라우저 일관성을 보장하는 모범 사례입니다.
src/app/(auth)/login/_styles/Login.css.ts (3)
3-3: 디자인 시스템 색상 토큰 사용을 위한 적절한 import 추가logoIcon에 색상을 적용하기 위해 colors 모듈을 가져온 것이 적절합니다.
7-7: 모바일 기기의 동적 뷰포트 대응을 위한 dvh 단위 사용
100vh에서100dvh로 변경하여 모바일 브라우저에서 주소창 등으로 인한 뷰포트 크기 변화에 더 적절하게 대응할 수 있습니다. 이는src/app/member/onboarding/layout.css.ts의 동일한 변경사항과 일관성을 유지합니다.
42-42: 디자인 시스템 색상 토큰을 활용한 로고 색상 지정
colors.redOrange[50]을 사용하여 로고 아이콘의 색상을 명확히 지정한 것이 좋습니다. 디자인 시스템의 색상 토큰을 활용하여 일관된 브랜딩을 유지합니다.src/styles/typography.css.ts (1)
112-147: 라벨 타이포그래피 토큰의 체계적인 확장
label1과label2를 각각 세 가지 폰트 무게 변형(Semi-bold 600, Medium 500, Regular 400)으로 확장한 것이 훌륭합니다. 이는 Figma 디자인 시스템 변경사항과 일치하며, 다음과 같은 장점을 제공합니다:
- 일관된 명명 규칙 (Sb, Md, Rg 접미사)
- 각 그룹 내에서 fontSize, lineHeight, letterSpacing 유지
- fontWeight만 차별화하여 더 세밀한 타이포그래피 제어 가능
이러한 확장은 디자이너와 개발자에게 더 많은 유연성을 제공하는 모범적인 디자인 시스템 구현입니다.
src/app/member/onboarding/layout.css.ts (1)
6-6: 일관된 뷰포트 높이 처리를 위한 dvh 단위 적용로그인 페이지와 동일하게
100vh에서100dvh로 변경하여 애플리케이션 전반에서 일관된 뷰포트 높이 처리를 보장합니다. 모바일 환경에서 동적 뷰포트 변화에 더 적절하게 대응할 수 있습니다.src/app/member/profile/_components/Banner/Banner.tsx (1)
29-29: 새로운 타이포그래피 토큰 체계에 맞는 적절한 업데이트
label2에서label2Sb로 변경하여 확장된 타이포그래피 시스템과 일치시켰습니다. 세미볼드 변형을 사용하여 기존 라벨의 시각적 일관성을 유지하면서 새로운 토큰 구조를 적용했습니다.src/components/ui/Button/Button.css.ts (1)
46-46: 타이포그래피 토큰 업데이트가 올바르게 적용되었습니다.
label2에서label2Sb로 변경하여 작은 버튼에 세미볼드 폰트 웨이트(600)가 적용됩니다. 디자인 시스템 업데이트와 일치하는 변경사항입니다.src/components/ui/TextField/TextField.css.ts (1)
13-13: 타이포그래피 토큰 업데이트가 올바르게 적용되었습니다.텍스트 필드 라벨에
label1Sb스타일을 적용하여 세미볼드 폰트 웨이트가 사용됩니다. 다른 UI 컴포넌트들과 일관성을 유지하는 변경사항입니다.src/components/ui/TextField/index.ts (1)
1-1: 타입 내보내기 추가가 적절합니다.
TextFieldProps타입을 함께 내보내어 외부 모듈에서 컴포넌트의 props 타입을 사용할 수 있도록 합니다. 폴리모픽 컴포넌트 리팩토링과 함께 필요한 변경사항입니다.src/components/ui/TextButton/TextButton.css.ts (1)
38-38: 타이포그래피 토큰 업데이트가 적용되었습니다.
label1Md로 변경하여 작은 텍스트 버튼에 미디엄 폰트 웨이트(500)가 적용됩니다. 일반 버튼의 세미볼드와 다른 웨이트를 사용하여 텍스트 버튼의 시각적 차별화를 제공합니다.src/components/ui/TextField/TextField.tsx (5)
1-3: 폴리모픽 컴포넌트를 위한 import가 올바르게 추가되었습니다.
ElementType,ReactNode, 그리고PolymorphicComponentPropsWithRef타입들이 폴리모픽 패턴 구현을 위해 적절히 임포트되었습니다.
9-18: 폴리모픽 props 타입 정의가 잘 구현되었습니다.제네릭 타입 매개변수
T를 사용하여 다양한 HTML 요소로 렌더링할 수 있도록 하는 올바른 타입 정의입니다.labelprop이string | ReactNode로 확장되어 더 유연한 사용이 가능합니다.
20-28: 컴포넌트 문서화가 명확하고 유용합니다.폴리모픽 사용법에 대한 명확한 설명과 예제 코드가 포함되어 있어 개발자들이 컴포넌트를 올바르게 사용할 수 있도록 도움을 제공합니다.
29-39: 폴리모픽 컴포넌트 구현이 올바릅니다.제네릭 함수 컴포넌트로 정의되어 타입 안전성을 보장하고, props destructuring이 적절히 수행되었습니다.
Component변수를 통한 동적 요소 렌더링 패턴이 잘 구현되었습니다.
52-59: 요소 렌더링과 props 처리가 올바르게 구현되었습니다.동적
Component렌더링, ref 전달, 클래스명 병합, 그리고 조건부aria-label설정이 모두 적절히 처리되었습니다. 특히label이 문자열일 때만aria-label을 설정하는 것은 접근성 측면에서 올바른 구현입니다.src/components/ui/BottomSheet/index.ts (1)
2-7: 복합 컴포넌트 패턴의 올바른 구현입니다.새로운 BottomSheet 서브컴포넌트들이 적절히 내보내져 있으며, 복합 컴포넌트 패턴을 올바르게 지원합니다. 기존 BottomSheet 내보내기도 유지되어 하위 호환성을 보장합니다.
src/components/ui/BottomSheet/BottomSheetTrigger.tsx (1)
1-15: 잘 구현된 트리거 컴포넌트입니다.컴포넌트가 복합 패턴의 일부로 올바르게 구현되었습니다:
asChild프롭을 통한 적절한 컴포지션 패턴 사용- TypeScript 타입 정의가 명확함
- displayName 설정으로 디버깅 지원
- 단일 책임 원칙을 따름
src/components/ui/BottomSheet/BottomSheetRoot.tsx (1)
1-13: 복합 패턴의 루트 컴포넌트가 올바르게 구현되었습니다.DialogProps를 확장하여 vaul 라이브러리의 모든 기능을 상속받고, props 스프레딩을 통해 적절히 전달합니다. 타입 정의가 명확하고 래퍼 컴포넌트로서의 역할을 잘 수행합니다.
src/components/ui/BottomSheet/BottomSheetContent.tsx (1)
17-33: Portal과 오버레이 구조가 올바르게 구현되었습니다.Drawer.Portal, Drawer.Overlay, Drawer.Content의 구조가 vaul 라이브러리의 패턴을 올바르게 따르고 있으며, 복합 컴포넌트 패턴에 적절히 통합되었습니다.
src/components/ui/BottomSheet/BottomSheetBody.tsx (1)
12-22: 바디 컴포넌트가 적절히 구현되었습니다.단순하고 명확한 컨테이너 역할을 하는 컴포넌트로, 복합 패턴에서 콘텐츠 바디 영역을 담당하는 역할이 잘 정의되어 있습니다.
src/components/ui/BottomSheet/BottomSheet.css.ts (1)
27-29: 고정 오프셋 상수 검증 필요
maxHeight: "calc(100dvh - 52px)"에서52px은 디자인 변경 시 쉽게 잊힐 수 있는 매직 넘버입니다. 토큰화하거나 주석으로 근거를 명시해 주세요.
| <BottomSheet.Root open={isOpen} onOpenChange={setIsOpen}> | ||
| <BottomSheet.Trigger> | ||
| <Button variant='primary' onClick={() => setIsOpen(true)}> | ||
| 바텀시트 열기 | ||
| </Button> | ||
| } | ||
| content={args.content} | ||
| /> | ||
| </BottomSheet.Trigger> | ||
|
|
There was a problem hiding this comment.
중첩 button 발생 가능성
<BottomSheet.Trigger>에 asChild를 주지 않으면 내부에서 <button>이 생성되어 <Button>(또는 <button>)을 감싸게 됩니다. 이는 불법 중첩 HTML이며 접근성 오류를 유발합니다.
-<BottomSheet.Trigger>
+<BottomSheet.Trigger asChild>📝 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.
| <BottomSheet.Root open={isOpen} onOpenChange={setIsOpen}> | |
| <BottomSheet.Trigger> | |
| <Button variant='primary' onClick={() => setIsOpen(true)}> | |
| 바텀시트 열기 | |
| </Button> | |
| } | |
| content={args.content} | |
| /> | |
| </BottomSheet.Trigger> | |
| <BottomSheet.Root open={isOpen} onOpenChange={setIsOpen}> | |
| <BottomSheet.Trigger asChild> | |
| <Button variant='primary' onClick={() => setIsOpen(true)}> | |
| 바텀시트 열기 | |
| </Button> | |
| </BottomSheet.Trigger> |
🤖 Prompt for AI Agents
In src/components/ui/BottomSheet/BottomSheet.stories.tsx around lines 31 to 37,
the BottomSheet.Trigger component wraps a Button without using the asChild prop,
causing nested button elements which is invalid HTML and harms accessibility. To
fix this, add the asChild prop to BottomSheet.Trigger so it forwards its
behavior to the child Button without creating an extra button element.
| export type BottomSheetFooterProps = { | ||
| children: ReactNode; | ||
| className?: string; | ||
| }; | ||
|
|
||
| export function BottomSheetFooter({ | ||
| children, | ||
| className, | ||
| ...props | ||
| }: BottomSheetFooterProps) { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
HTML 속성 전달을 위한 타입 확장 필요
...props를 전달하면서도 BottomSheetFooterProps에 기본 div 속성이 포함되어 있지 않아, onClick, id 같은 표준 속성을 넘기면 TS 오류가 발생합니다.
-export type BottomSheetFooterProps = {
- children: ReactNode;
- className?: string;
-};
+export type BottomSheetFooterProps =
+ React.ComponentPropsWithoutRef<"div"> & {
+ children: ReactNode;
+ className?: string;
+ };📝 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.
| export type BottomSheetFooterProps = { | |
| children: ReactNode; | |
| className?: string; | |
| }; | |
| export function BottomSheetFooter({ | |
| children, | |
| className, | |
| ...props | |
| }: BottomSheetFooterProps) { | |
| export type BottomSheetFooterProps = | |
| React.ComponentPropsWithoutRef<"div"> & { | |
| children: ReactNode; | |
| className?: string; | |
| }; | |
| export function BottomSheetFooter({ | |
| children, | |
| className, | |
| ...props | |
| }: BottomSheetFooterProps) { | |
| // ... | |
| } |
🤖 Prompt for AI Agents
In src/components/ui/BottomSheet/BottomSheetFooter.tsx around lines 7 to 16, the
BottomSheetFooterProps type does not extend the default HTML div element
attributes, causing TypeScript errors when passing standard props like onClick
or id. Fix this by extending React.HTMLAttributes<HTMLDivElement> in
BottomSheetFooterProps to include all standard div properties, allowing ...props
to accept and pass these attributes without type errors.
| export type BottomSheetTitleProps = { | ||
| children: ReactNode; | ||
| className?: string; | ||
| }; | ||
|
|
||
| export function BottomSheetTitle({ | ||
| children, | ||
| className, | ||
| ...props | ||
| }: BottomSheetTitleProps) { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
타입 범위 확장 및 접근성 속성 추가 검토
BottomSheetTitleProps역시Drawer.Title에 전달될 HTML 속성을 포함해야 합니다.- 상단 핸들(
div)는 순수 장식 요소이므로aria-hidden="true"를 지정해 스크린리더 노이즈를 줄여주세요.
🤖 Prompt for AI Agents
In src/components/ui/BottomSheet/BottomSheetTitle.tsx around lines 8 to 17,
extend the BottomSheetTitleProps type to include all valid HTML attributes for
the element rendered by Drawer.Title, typically by extending
React.HTMLAttributes or a similar interface. Additionally, add
aria-hidden="true" to the top handle div element to mark it as decorative and
prevent screen readers from announcing it, improving accessibility.
2 participants
✅ 이슈 번호
close #93
🪄 작업 내용 (변경 사항)
typography토큰값 변경BottomSheet컴포넌트 Compound 패턴으로 분리TextField컴포넌트PolymorphicComponent적용📸 스크린샷
💡 설명
1. typography 토큰값 변경 및 수정
label1,label2네이밍 및 굵기 값을 수정했습니다.2. BottomSheet 컴포넌트 Compound 패턴으로 분리
BottomSheet.Root / Trigger / Content / Title / Body / Footer형태로 분리하여 사용할 수 있도록 리팩토링했습니다.BottomSheet.tsx에 간단히 정리해두었습니다 ~ . ~3. TextField 컴포넌트 PolymorphicComponent 적용
input뿐만 아니라textarea까지 디자인이 동일하게 확장되고 있어서,ElementType을 지원할 수 있도록 변경했습니다~!🗣️ 리뷰어에게 전달 사항
📍 트러블 슈팅
Summary by CodeRabbit
신규 기능
버그 수정
스타일
리팩터
문서화