[Feat] Button 컴포넌트 추가 #59
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
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
packages/ui/src/components/Button/Button.tsxOops! Something went wrong! :( ESLint: 9.17.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@repo/eslint-config' imported from /eslint.config.mjs 워크스루이 풀 리퀘스트는 웹 애플리케이션의 전역 CSS 스타일과 UI 컴포넌트 라이브러리에 대한 중요한 변경 사항을 포함하고 있습니다. 새로운 변경 사항
가능한 관련 PR
제안된 리뷰어
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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
CodeRabbit Configuration File (
|
![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 (4)
packages/ui/src/components/Button/Button.tsx (2)
8-13: 접근성 개선을 위한 제안ButtonProps 타입에 다음 속성들을 추가하는 것을 고려해보세요:
isLoading: 로딩 상태 표시 (PR 설명에 언급됨)aria-expanded: 확장 가능한 버튼의 경우aria-pressed: 토글 버튼의 경우export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & { size: ButtonSize; variant: ButtonVariant; leftIcon?: IconName; rightIcon?: IconName; + isLoading?: boolean; };
20-35: 로딩 상태 처리 구현 필요PR 설명에 언급된 대로 로딩 상태 구현이 필요합니다. 다음과 같은 구현을 제안드립니다:
export const Button = forwardRef<HTMLButtonElement, ButtonProps>( ( - { size, variant, leftIcon, rightIcon, children, className = '', ...rest }, + { size, variant, leftIcon, rightIcon, children, className = '', isLoading, ...rest }, ref ) => ( <button ref={ref} className={`${buttonRecipe({ size, variant })} ${className}`} + disabled={isLoading} {...rest} > - {leftIcon && <Icon name={leftIcon} size={iconSize[size]} />} + {isLoading ? ( + <LoadingSpinner size={iconSize[size]} /> + ) : ( + <> + {leftIcon && <Icon name={leftIcon} size={iconSize[size]} />} + {children} + {rightIcon && <Icon name={rightIcon} size={iconSize[size]} />} + </> + )} - {children} - {rightIcon && <Icon name={rightIcon} size={iconSize[size]} />} </button> ) );로딩 스피너 컴포넌트 구현이 필요하시다면 제가 도와드릴까요?
apps/web/src/app/page.tsx (1)
42-47: 버튼 사용 예제 다양화 제안현재 예제는 primary 변형만 보여주고 있습니다. 다른 변형(neutral, terminal)과 다양한 사용 사례를 추가하면 좋을 것 같습니다:
<Button size="small" variant="primary" leftIcon="stack" rightIcon="chat"> 버튼 </Button> <Button size="large" variant="primary" leftIcon="stack" rightIcon="chat"> 버튼 </Button> + <Button size="large" variant="neutral"> + 취소 + </Button> + <Button size="small" variant="terminal" rightIcon="arrow-right"> + 다음 + </Button>packages/ui/src/components/Button/Button.css.ts (1)
23-38: 사이즈 변수 최적화 제안현재 구현은 잘 작동하지만, 다음과 같은 개선을 고려해보세요:
- gap 값을 design token으로 분리하여 재사용성 향상
- padding 값도 token화하여 일관성 유지
size: { large: { - gap: '0.8rem', - padding: '1.6rem 2rem', + gap: tokens.spacing[8], + padding: `${tokens.spacing[16]} ${tokens.spacing[20]}`, ... }, small: { - gap: '0.4rem', - padding: '1rem 2rem', + gap: tokens.spacing[4], + padding: `${tokens.spacing[10]} ${tokens.spacing[20]}`, ... }, }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/web/src/app/globals.css(1 hunks)apps/web/src/app/page.tsx(2 hunks)packages/ui/src/components/Button/Button.css.ts(1 hunks)packages/ui/src/components/Button/Button.tsx(1 hunks)packages/ui/src/components/Icon/Icon.tsx(2 hunks)packages/ui/src/components/index.ts(1 hunks)
🔇 Additional comments (7)
packages/ui/src/components/index.ts (1)
9-10: 내보내기 구문이 잘 구성되어 있습니다!컴포넌트와 타입 내보내기가 기존 패턴을 잘 따르고 있습니다.
packages/ui/src/components/Button/Button.tsx (1)
15-18: 아이콘 크기 매핑이 반대로 되어 있는 것 같습니다현재 small 버튼의 아이콘(2.4rem)이 large 버튼의 아이콘(1.6rem)보다 더 큽니다. 이는 의도된 것인지 확인이 필요합니다.
const iconSize: Record<ButtonSize, string> = { - small: '2.4rem', - large: '1.6rem', + small: '1.6rem', + large: '2.4rem', };packages/ui/src/components/Icon/Icon.tsx (1)
29-34: 색상 처리 로직이 개선되었습니다!
currentColor를 기본값으로 사용하는 것은 좋은 접근입니다. 이를 통해 버튼과 같은 상위 컴포넌트의 색상을 자연스럽게 상속받을 수 있습니다.packages/ui/src/components/Button/Button.css.ts (3)
4-20: 기본 버튼 스타일 구현이 잘 되었습니다!접근성과 사용자 경험을 고려한 기본 스타일 구현이 잘 되었습니다:
- 트랜지션 효과로 부드러운 상호작용
- disabled 상태 처리
- 적절한 커서 스타일링
40-68: Primary와 Neutral 변형 구현이 훌륭합니다!디자인 시스템을 잘 따르고 있으며, 색상 대비와 상호작용 상태가 적절하게 구현되었습니다.
69-83: Terminal 변형의 disabled 스타일 추적 필요TODO 코멘트가 있는 부분을 추적하고 후속 작업이 필요합니다:
- disabled 상태의 스타일링이 임시 구현되어 있음
- 디자이너의 확인 후 업데이트 필요
이 TODO 항목을 추적하기 위한 GitHub 이슈를 생성해드릴까요?
apps/web/src/app/globals.css (1)
17-17: 글로벌 폰트 사이즈 변경의 영향 확인 필요
font-size: 62.5%로 설정하면 1rem이 10px과 동일해져 계산이 편리해지지만, 다음 사항들을 확인해주세요:
- 기존 컴포넌트들의 크기가 변경될 수 있음
- 외부 라이브러리나 위젯의 크기도 영향을 받을 수 있음
다음 스크립트로 rem 단위를 사용하는 다른 컴포넌트들을 확인해보세요:
✅ Verification successful
글로벌 폰트 사이즈 변경의 영향 범위 확인 완료
font-size: 62.5%변경이 미치는 영향이 제한적임을 확인했습니다:
- UI 패키지의 Button 컴포넌트만 rem 단위를 사용 중
- 웹 애플리케이션 자체에서는 rem 단위 사용이 없음
Button 컴포넌트의 동작을 테스트해보시길 권장드립니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Find components using rem units that might be affected # Search for rem units in CSS/SCSS/styled-components files rg -t css -t ts -t tsx "(\d+(\.\d+)?|\.\d+)rem" --glob '!node_modules'Length of output: 100
Script:
#!/bin/bash # Search for rem units in various file types echo "=== Direct CSS/SCSS rem usage ===" rg -t css "(\d+(\.\d+)?|\.\d+)rem" echo -e "\n=== JavaScript/TypeScript rem usage ===" rg -t js -t ts "(\d+(\.\d+)?|\.\d+)rem" echo -e "\n=== Styled-components rem usage ===" rg "(\d+(\.\d+)?|\.\d+)rem.*[;}\`]" --type-add 'web:*.{jsx,tsx}' -t webLength of output: 838
비동기 처리를 위한 로딩 상태도 추가가 필요해요! 디자인이 업데이트 되었네요 ㅠㅠ |
| import { tokens } from '@repo/theme'; | ||
| import { recipe } from '@vanilla-extract/recipes'; | ||
|
|
||
| export const buttonRecipe = recipe({ |
There was a problem hiding this comment.
디자인 가이드와 다른 부분이 많아요! 기본/호버, 버튼 사이즈 별 아이콘 사이즈 등등 입니다!
There was a problem hiding this comment.
오우 제가 만들 때랑 스타일이 바뀌었네요... 😇
| className={`${buttonRecipe({ size, variant })} ${className}`} | ||
| {...rest} | ||
| > | ||
| {leftIcon && <Icon name={leftIcon} size={iconSize[size]} />} |
There was a problem hiding this comment.
아이콘에 한정짓지 말고, leftAddon, rightAddon으로 인터페이스를 변경하고, ReactElement 타입으로 받는 것이 어떨까요?
그리고, 사이즈 별 아이콘 스타일을 미리 지정해둔 후 AddonRoot라는 스타일을 입히는 div 컴포넌트를 이 코드 바닥 아래에 만들고
<AddonRoot size={size} ..... >
{leftAddon}
</AddonRoot>요런 형식으로 가져가는 것이 어떨지 제안드려요!
There was a problem hiding this comment.
위와 같이 구현된다면 Icon 컴포넌트의 size default 값은 100%가 되어야겠네요!
There was a problem hiding this comment.
혹시 이렇게 했을 때 이점이 있을까요?? 저도 만들면서 고민을 했던 부분인데, 버튼의 내부에는 아이콘만 들어갈 것 같았거든요! (다른 경우가 있을까요...) 그래서 Icon 컴포넌트를 직접 입력하는 것보다 IconName 값만 prop으로으로 내려 주는 게 더 사용하기에 편하다고 생각되어 지금처럼 작성해 두긴 했거든요!
There was a problem hiding this comment.
예를 들어, 로띠가 들어갈 수도 있지 않을까요?
|
@minseong0324 로딩 상태는 스피너 컴포넌트 만든 후에 다시 넣어 주면 될 것 같아요! 다른 부분들은 수정했는데 확인 부탁드립니다! |
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
apps/web/src/app/page.tsx (2)
34-38: 아이콘 스타일 상수화 제안아이콘의 크기, 타입, 색상 등의 값을 상수로 분리하면 유지보수성이 향상될 것 같습니다.
const ICON_CONFIG = { size: 24, defaultType: 'stroke', warningColor: 'warning300' } as const;
32-32: 스타일 관리 개선이 필요합니다인라인 스타일보다는 styled-components나 CSS 모듈을 사용하여 스타일을 관리하는 것이 좋습니다. 간격값도 상수로 관리하면 일관성 있는 유지보수가 가능합니다.
const SPACING = { small: '8px', // ... 다른 간격값 } as const; const ButtonContainer = styled.div` display: flex; gap: ${SPACING.small}; `;Also applies to: 46-46, 74-74
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
packages/ui/src/assets/icons/IconTwinkle.svgis excluded by!**/*.svg
📒 Files selected for processing (8)
apps/web/src/app/page.tsx(2 hunks)packages/ui/package.json(0 hunks)packages/ui/src/components/Button/Button.css.ts(1 hunks)packages/ui/src/components/Button/Button.tsx(1 hunks)packages/ui/src/components/Icon/Icon.tsx(1 hunks)packages/ui/src/components/Icon/assets.ts(2 hunks)packages/ui/src/components/index.ts(1 hunks)packages/ui/src/scripts/generate-icon-map.ts(1 hunks)
💤 Files with no reviewable changes (1)
- packages/ui/package.json
✅ Files skipped from review due to trivial changes (1)
- packages/ui/src/scripts/generate-icon-map.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/ui/src/components/index.ts
🧰 Additional context used
🪛 Biome (1.9.4)
packages/ui/src/components/Button/Button.tsx
[error] 36-37: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
🔇 Additional comments (6)
packages/ui/src/components/Icon/assets.ts (1)
21-21: LGTM! IconTwinkle이 올바르게 추가되었습니다.아이콘이 알파벳 순서대로 잘 정렬되어 있습니다.
Also applies to: 48-48
packages/ui/src/components/Icon/Icon.tsx (1)
20-21: Icon 컴포넌트의 변경사항이 Button 컴포넌트와 잘 통합되었습니다.
size의 기본값을 '100%'로 변경한 것은 Button의leftAddon/rightAddon과 함께 사용하기에 적절합니다.currentColor를 사용하여 상위 컴포넌트의 색상을 상속받도록 한 것은 좋은 접근입니다.Also applies to: 29-34
packages/ui/src/components/Button/Button.css.ts (2)
79-82: Terminal 버튼의 비활성화 스타일이 미완성입니다.디자이너의 피드백을 기다리는 동안, 임시로 다른 variant들과 일관된 스타일을 적용하는 것이 좋을 것 같습니다.
GitHub 이슈를 생성하여 디자인 팀과의 협업을 추적하는 것은 어떨까요?
25-38: 🛠️ Refactor suggestion디자인 가이드와 스타일 동기화가 필요합니다.
이전 리뷰 코멘트에서 언급된 것처럼, 현재 구현이 디자인 가이드와 차이가 있습니다:
- 기본/호버 상태
- 버튼 사이즈별 아이콘 사이즈
특히
addonRootStyle의 사이즈가 디자인 가이드와 일치하는지 확인이 필요합니다.Also applies to: 91-100
apps/web/src/app/page.tsx (2)
3-3: 컴포넌트 임포트가 잘 구성되어 있습니다!공통 UI 라이브러리에서 필요한 컴포넌트들을 깔끔하게 임포트하였습니다.
47-73: 로딩 상태 구현이 필요합니다PR 설명에 언급된 대로 로딩 상태 구현이 필요합니다. 비동기 작업 시 사용자 피드백을 위해 중요한 기능입니다.
로딩 상태 구현을 위한 코드를 생성해드릴까요? 다음과 같은 방식으로 구현할 수 있습니다:
interface ButtonProps { isLoading?: boolean; loadingText?: string; // ... 기존 props }
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/ui/src/components/Button/Button.tsx (1)
34-39:⚠️ Potential issue로딩 상태 UI를 개선해 주세요.
현재 로딩 상태가 텍스트로만 표시되어 있습니다. 사용자 경험 향상을 위해 다음 사항들을 개선해 주세요:
- Spinner 컴포넌트 구현
- 적절한 aria-label 추가
{isLoading ? ( <> - // TODO Spinner 컴포넌트 넣을 예정 - <span>로딩</span> + {/* TODO: Spinner 컴포넌트 구현 후 교체 예정 */} + <span className="sr-only">로딩 중</span> + <span aria-hidden="true">로딩</span> </> ) : (🧰 Tools
🪛 Biome (1.9.4)
[error] 36-37: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
🧹 Nitpick comments (2)
packages/ui/src/components/Button/Button.tsx (2)
4-13: 타입 정의에 JSDoc 문서를 추가해 주세요.각 타입과 프로퍼티에 대한 설명을 JSDoc으로 추가하면 컴포넌트 사용자가 더 쉽게 이해할 수 있습니다.
+/** + * 버튼 크기 옵션 + */ export type ButtonSize = 'small' | 'large'; +/** + * 버튼 변형 옵션 + */ export type ButtonVariant = 'primary' | 'neutral' | 'terminal'; +/** + * 버튼 컴포넌트 Props + */ export type ButtonProps = ComponentPropsWithoutRef<'button'> & { + /** 버튼 크기 */ size: ButtonSize; + /** 버튼 스타일 변형 */ variant: ButtonVariant; + /** 로딩 상태 표시 여부 */ isLoading?: boolean; + /** 왼쪽에 표시될 애드온 */ leftAddon?: ReactElement; + /** 오른쪽에 표시될 애드온 */ rightAddon?: ReactElement; };
41-45: 애드온 래퍼에 의미있는 역할을 추가해 주세요.애드온을 감싸는 div에 적절한 역할과 접근성 속성을 추가하면 좋을 것 같습니다.
- {leftAddon && <div className={addonRootStyle[size]}>{leftAddon}</div>} + {leftAddon && ( + <span role="presentation" aria-hidden="true" className={addonRootStyle[size]}> + {leftAddon} + </span> + )} {children} - {rightAddon && ( - <div className={addonRootStyle[size]}>{rightAddon}</div> - )} + {rightAddon && ( + <span role="presentation" aria-hidden="true" className={addonRootStyle[size]}> + {rightAddon} + </span> + )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/ui/src/components/Button/Button.tsx(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
packages/ui/src/components/Button/Button.tsx
[error] 36-37: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
🔇 Additional comments (1)
packages/ui/src/components/Button/Button.tsx (1)
29-33: 🛠️ Refactor suggestion접근성 속성을 추가해 주세요.
스크린 리더 사용자를 위한 접근성 속성이 누락되었습니다.
<button ref={ref} className={`${buttonRecipe({ size, variant })} ${className}`} + aria-label={rest['aria-label'] || typeof children === 'string' ? children : undefined} + aria-disabled={isLoading} + disabled={isLoading || rest.disabled} {...rest} >Likely invalid or redundant comment.
This was referenced Jan 16, 2025
Merged
Merged
kongnayeon
added a commit
that referenced
this pull request
Feb 5, 2025
* [Feat] 프로젝트 스캐폴딩 (#2) * docs: 이슈, PR 템플릿 추가 * docs: codeoners 추가 * feat: web 앱 Next.js, React 버전 다운그레이드 * feat: eslint, tsconfig 종속성, prettier 추가 * feat: husky, lint-staged 설치 * feat: husky, lint-staged 테스트 * chore: husky, lint-staged 테스트 * chore: husky, lint-staged 테스트 2 * fix: eslint config 수정 * chore: husky, lint-staged 테스트 3 * chore: husky, lint-staged 테스트 4 * chore: husky, lint-staged 테스트 5 * feat: .nvmrc 추가 * feat: vanilla extract 설치, config 수정 * chore: web 앱 type: module 설정 제거 * chore: vanilla extract 설치, next.config.js 수정 * [Chore]: 리뷰어 선정 시 슬랙 알림 workflow 적용 (#33) * [Chore]: ui 패키지 초기 셋팅 (#34) * feat(packages/theme): theme 패키지를 생성해요. (#36) * [Chore]: build ci 추가 (#38) * feat: pnpm workspace 추가 (#42) * [Fix]: theme, ui 패키지의 vanilla-extract 빌드 설정 수정 (#45) * fix(apps/web, packages/theme, packages/ui): theme, ui 패키지의 vanilla-extract 빌드 설정, css 관련 수정 * chore(packages/theme, packages/ui): build 스크립트 수정 * chore(packages/theme, packages/ui): exports 수정 * chore(packages/theme, packages/ui): exports 수정 * wip * chore(packages/theme, packages/ui): 불필요 dependency 제거 * chore(packages/theme, packages/ui): 불필요 필드 제거 * fix: 공통 패키지 루트로 끌어올리기, 패키지 버전 의존성 적용 * fix: 테스트 컴포넌트 제거 * fix: 테스트 컴포넌트 제거 * chore(apps/web): 주석처리 * chore: 빌드 테스트 * chore: 테스트용 컴포넌트 제거 --------- Co-authored-by: kangnayeon <[email protected]> * [Feat]: theme 적용을 위한 Provider 추가 (#47) * [Feat] Spacing 컴포넌트 추가 (#49) * [Feat] Icon 컴포넌트 추가 (#48) * feat(packages/ui): Icon 컴포넌트 추가 * fix(packages/ui): 아이콘 속성 camelCase로 수정 * feat(packages/ui): svg 파일 import 스크립트, svgr 플러그인 설정 추가 * feat(packages/ui): Icon 컴포넌트 * fix(packages/theme): color 뎁스 낮추기 * [Feat] Spacing 컴포넌트 추가 (#49) * fix: resolve conflicts * fix(packages/theme): 컬러 토큰 변경에 따른 dark, theme 토큰 변경 * fix: resolve conflicts * chore: 주석 제거 --------- Co-authored-by: minseong <[email protected]> * [Fix] Icon 컴포넌트 수정 (#51) * fix(packages/ui): Icon 컴포넌트 수정 * chore(packages/ui): 색상 스타일 로직 개선 * fix(packages/ui): IconProps의 color 타입을 string으로 수정해요 * [Fix] 컬러 시스템 내의 색상만 사용할 수 있도록 Icon 컴포넌트 수정 (#53) * fix(packages/ui): Icon 컴포넌트 수정 * chore(packages/ui): 색상 스타일 로직 개선 * fix(packages/ui): IconProps의 color 타입을 string으로 수정해요 * fix(packages/ui, apps/web): 컬러 시스템 내의 색상만 사용할 수 있도록 Icon 컴포넌트 수정 * [Fix] Spacing 컴포넌트 수정 (#54) * fix(packages/ui): Spacing 컴포넌트 수정 * chore: name import 하도록 수정 * chore: 배럴 파일 수정 * chore: empty file 삭제 * chore(packages/theme): 색상 추가 (#56) * [Feat] Text 컴포넌트 추가 (#57) * feat(packages/ui): Text 컴포넌트 * feat(packages/ui): 컴파운드 객체 추가 * chore(packages/ui): TypographyType theme에서 가져오도록 수정 * fix(packages/ui): TextCompoundType 선언 시 중복되는 구문 수정 * fix(packages/ui): Compound Text 컴포넌트 선언 시 중복되는 로직 수정 * feat(packages/ui): Text 컴포넌트 사용 시 대문자 사용하도록 수정 * [Feat] Toast 컴포넌트 추가 (#52) * chore(packages/ui): ovarlay-kit 의존성 추가 * feat(packages/ui): Toast 컴포넌트 구현 * test(apps/web): Toast 컴포넌트 사용 예시 추가 * fix(packages/ui): 접근성 개선 * chore(packages/ui): lock 파일 업데이트 * chore(packages/themes): violet 색상 추가 * chore(packages/ui): success일 경우의 색상 변경 * fix(apps/web): Providers 컴포넌트 분리, OverlayProvider 이동 * [Feat] Badge 컴포넌트 구현 (#58) * feat(packages/ui, apps/web): Badge 컴포넌트 구현 * fix(packages/ui, apps/web): Badge 컴포넌트 수정 * chore(packages/ui): named import 변경 * [Feat] Checkbox 컴포넌트 추가 (#60) * feat(packages/ui): 누름 상태 관리를 위한 usePress 추가 * chore(packages/ui): 체크박스 아이콘 추가 * feat(packages/ui): 체크박스 컴포넌트 추가 * chore(apps/web): 사용 예시 추가 * fix(packages/ui): 키보드 접근성 수정 * [Feat] Label 컴포넌트 구현 (#61) * feat(packages/ui): Label 컴포넌트 구현 * chore(packages/ui): Label 컴포넌트 예시 * [Feat] Button 컴포넌트 추가 (#59) * feat(packages/ui): Button 컴포넌트 * fix(packages/ui): Icon color 속성 없을 시 currentColor 적용되도록 수정 * chore(packages/ui): Button 컴포넌트 export * fix(packages/ui): Button 컴포넌트 스타일 * fix(packages/ui): Icon default size 100%로 변경 * fix(packages/ui): Button 컴포넌트의 leftIcon, rightIcon prop을 leftAddon, rightAddon으로 수정 * feat(packages/ui): twincle icon 추가 * fix(packages/ui): 기존 태그의 prop을 상속 받는 경우 ComponentPropsWithoutRef 사용하도록 수정 * [Feat] Breadcrumb 컴포넌트 추가 (#62) * chore(packages/ui): @radix-ui/react-slot 설치 * feat(packages/ui): Breadcrumb 컴포넌트 구현 * test(apps/web): 사용 예시 추가 * [Feat] px -> rem 변환 (#64) * fix: px 단위 rem으로 변환 * fix: body font-size 1.6rem으로 지정 * [Chore] Checkbox 컴포넌트의 label fontSize 변환 (#66) * chore(packages/ui): Checkbox 컴포넌트의 label fontSize 변환 * chore(packages/ui): className 빈 값 string 기본값 지정 * [Feat] LottieAnimation 컴포넌트 추가 (#63) * feat(packages/ui): 로티 파일, 생성 스크립트 추가 * feat(packages/ui): LottieAnimation 컴포넌트 추가 * fix(packages/ui): LottieAnimation 따로 export 하도록 수정, 에셋 상대경로로 수정 * fix(packages/ui): 스크립트 오타 수정 * feat(packages/ui): 코드리뷰 반영 * fix: 빌드 에러 수정 * [Feat] TextField 컴포넌트 구현 (#65) * chore(apps/web): react-hook-form 설치 * feat(packages/ui): isNill 함수 추가 * chore(packages/ui): isNill export * feat(packages/ui): TextField 컴포넌트 구현 * test(apps/web): 예시 추가 * fix(packages/ui): 디자인 요구사항 수정 * [Feat] 아이콘, 색상 변경 사항 반영 (#72) * feat(packages/theme): 아이콘 변경 사항 반영 * fix(packages/ui): 누락된 아이콘 추가 * [Feat] IconButton 컴포넌트 (#68) * [Feat] Spinner 컴포넌트 추가 (#69) * feat(packages/ui): Spinner 컴포넌트 * feat(packages/ui): Spinner span 태그로 감싸기 * fix(packages/ui): SpinnerColorType 추가 * [�Fix]: ThemeProvider 패키지 이동, 불필요 배럴 파일 정리 (#74) * wip * chore(apps/web): 파일 구조 변경 * chore(packages/theme, apps/web): 배럴파일 정리 및 provider 별도 export * chore(packages/theme): provider 별도 export * fix(packages/theme, packages/ui): ThemeProvider 이동 * remove(apps/web): 퍼블리싱 삭제 (별도 PR 예정) * [Feat] RadioCards 컴포넌트 추가 (#73) * feat(packages/ui): RadioCards 관리를 위한 context 추가 * feat(packages/ui): RadioCards 컴포넌트 구현 및 JSDoc 추가 * feat(packages/ui): RadioCards 사용 예시 추가 * fix(packages/ui): RadioCards 구조 변경 * test(packages/ui): RadioCards 예시 변경 * docs(packages/ui): JSDoc 업데이트 * fix(packages/ui): 키보드 접근성 개선 * [Feat] Modal 컴포넌트 추가 (#83) * feat(packages/ui): PortalConsumer 컴포넌트 * feat(packages/ui): PortalConsumer 컴포넌트 * feat(packages/ui): Modal로의 포커스를 위한 FocusTrap 구현 * feat(packages/ui): Modal 컴포넌트 구현 및 JSDoc 작성 * test(apps/web): Modal 컴포넌트 사용 예시 추가 * fix(packages/ui): overlay-kit에서 이미 제공하고 있으므로 PortalConsumer 제거 * [Feat] 스켈레톤 컴포넌트 (#84) * feat(packages/ui): 스켈레톤 컴포넌트 * feat: displayName 속성 추가 * feat: 리뷰 반영 * [Fix] ui 패키지 컴포넌트 사용 시 모든 컴포넌트가 암묵적으로 import 되는 현상 (#79) * fix(packages/ui): 아이콘 생성 스크립트 확장자 변경 * feat(packages/ui) 컴포넌트 별 배럴 파일 생성 * fix: 공통 로직 임포트 경로 수정 * fix(packages/ui): esm 방식만 지원하도록 수정 * chore: 사용되지 않는 컴포넌트 제거 * chore: 사용되지 않는 아이콘 제거 * fix(packages/ui): 사용되지 않는 플러그인 제거 * fix: 빌드 에러 * fix: 빌드 에러 * fix: 빌드 에러 수정 * feat: svgr 라이브러리 제거, 아이콘 컴포넌트 생성 스크립트 추가 * fix: build error * fix: icon 매핑 스크립트 수정 * feat(packages/ui): 컴포넌트 전체 export 추가 * [Feat] Chip 컴포넌트 추가 (#70) * feat(packages/ui): chip 컴포넌트 * [Feat] TextField 컴포넌트 구현 (#65) * chore(apps/web): react-hook-form 설치 * feat(packages/ui): isNill 함수 추가 * chore(packages/ui): isNill export * feat(packages/ui): TextField 컴포넌트 구현 * test(apps/web): 예시 추가 * fix(packages/ui): 디자인 요구사항 수정 * [Feat] 아이콘, 색상 변경 사항 반영 (#72) * feat(packages/theme): 아이콘 변경 사항 반영 * fix(packages/ui): 누락된 아이콘 추가 * feat(packages/ui): chip 컴포넌트 * feat(packages/ui): Chip에 사용되는 아이콘 추가 * fix(packages/ui): Text 컴포넌트 color prop 없을 때 inherit으로 지정, 기본 line height 값 지정 * fix(packages/ui): Icon 컴포넌트 color 상속 시 path 태그 외의 다른 태그들도 상속 받을 수 있도록 수정 * fix(packages/ui): Chip 컴포넌트 스타일 수정 * feat: x 아이콘 color 수정 * feat: onClose 추가 * fix: x 아이콘 호버링 시 cursor pointer로 지정 * feat: 리뷰 반영 * fix(packages/ui): closable 버튼 보이지 않는 문제 * fix: 리뷰 반영 --------- Co-authored-by: MINSEONG KIM <[email protected]> * [Refactor] Spinner 컴포넌트 css 방식으로 변경 (#92) * fix:(packages/ui): Spinner 컴포넌트 css 방식으로 구현 * fix(packages/ui): Button 컴포넌트 스타일 수정, isLoading 상태 스피너 추가 * [Feat] useToast 추가, DynamicLottie 컴포넌트 추가 (#89) * [Feat]: useModal 추가 (#91) * chore(packages/ui): overlay-kit 설치 * feat(packages/ui): useModal 추가 * test(apps/web): useModal 사용 예시 추가 * fix(packages/ui): 옵셔널로 치환 * fix(packages/ui): 자잘한 수정 * fix(packages/ui): 자잘한 수정 * docs(packages/ui): JSDoc 추가 * test(apps/web): 사용 예시 추가 * chore(packages/ui): 코드 간소화 * fix(packages/ui): 프로미스를 반환할 수 있도록 수정 * fix(packages/ui): isNil수정, isNotNill 추가, export 수정 * fix(package/ui): nullish 체크 * fix(packages/ui): 모달 doubleCTA의 각각 버튼 공간이 절반 차지하도록 수정 * test(packages/ui): 예시 수정 * chore: lock 파일 업데이트 * [Feat] ImageManager TypeA 컴포넌트 추가 (#94) * chore(apps/web): Provider -> provider로 변경 (네이밍 컨벤션 통일) * feat(apps/web): ImageManager TypeA 컴포넌트 구현 * chore(apps/web): 대소문자 git 이슈 해결 * chore(apps/web): baseUrl 설정 * fix(apps/web): 자잘한 수정, 접근성 개선 * chore(apps/web): 키 상수화 * fix(apps/web): 유효성 검사 수정 * chore(apps/web): 경로 수정 * [Feat] 주제 설정 페이지 퍼블리싱 및 폼 연동 (#95) * chore(apps/web): motion 추가 * chore(packages/ui): styles export 변경 * feat(packages/theme): 색상 추가 * feat(packages/theme): spacing 추가 * feat(apps/web): KeywordChip 컴포넌트 추가 * feat(apps/web): ImageManager 컴포넌트 추가 * feat(apps/web): 주제 설정 페이지 퍼블리싱 * refactor(apps/web): 컴포넌트 분리 및 자잘한 수정 * fix(apps/web): react-hook-form watch를 통한 조건부 렌더링 * feat(apps/web): react-hook-form을 통한 폼 관리 * fix(apps/web): ImageManager 컴포넌트 packages/ui로 이동 예정 * fix(apps/web): ImageManager TypeA css 수정 * fix(apps/web): GradientAnimatedTitle로 수정 * fix(apps/web): GradientAnimatedTitle로 수정 * feat(apps/web): isEmptyStringOrNil 유틸 추가 * fix(apps/web): ImageManager TypeA 제어형으로 사용 가능하도록 변경 * refactor(apps/web): 컴포넌트 분리 * chore(apps/web): px->rem 변경 * fix(app/web): defaultValues 수정 * fix(apps/web): css 수정 * fix(apps/web): placeholder 수정 * [Feat] ky, tanstack-query 설정, presigned-url 모듈, 뉴스 카테고리 api 연동 (#97) * fix(packages/ui): onClick 누락 수정 * fix(packages/ui): onClick 누락 수정 * feat(apps/web): 필수 항목 입력 후 홈 BreadCrumb 클릭 시 모달 * feat(apps/web): tanstack-query 셋팅 * fix(apps/web): tanstack-query 셋팅 수정 * feat(apps/web): ky 셋팅 * fix(apps/web): KeywordChipGroup 컴포넌트 수정 * feat(apps/web): 뉴스 카테고리 api 연듕 * feat(apps/web): put, patch, delete 추가 * feat(apps/web): put, patch, delete 추가 * fix(apps/web): nullish 검증 * chore(.github/workflows): env 추가 * fix(apps/web): staleTime, gcTime 수정 * fix(apps/web): 자잘한 수정 * fix(apps/web): 토큰 string으로 관리 * chore(apps/web): shared로 폴더명 변경 * feat(apps/web): presigned-url 모듈 구현 및 연동 * [Feat] 주제 설정 페이지 api 연동, 디자인 추가 반영 (#100) * fix(apps/web): MainBreadcrumbItem 이미지 수정 * fix(apps/web): suspense 래핑 * remove(apps/web): 불필요 코드 제거 * feat(apps/web): 스크롤 감지 훅 추가 * feat(apps/web): 반투명 NavBar 추가 * fix(apps/web): 스타일링 수정 * fix(apps/web): 스타일링 수정 * fix(apps/web): ImageManager TypeA가 File이 아닌 이미지의 url로 받도록 수정 * feat(apps/web): 공통 타입 분리 * feat(apps/web): 게시물 그룹 및 게시물 생성 API 연동 * feat(apps/web): ImageManager TypeA 최적화 및 UI만 그리도록 관심사 분리 * fix: Images 폴더명을 images로 수정 * fix(apps/web): 자잘한 수정 * fix(apps/web): 자잘한 수정 * fix(apps/web): 타입 개선 * fix(apps/web): ImageManager 단일로 관리 * [Feat] Accordion 컴포넌트 (#99) * fix(packages/ui): Chip 컴포넌트 개별 export * feat(packages/ui): Accordion 컴포넌트 * chore: Accordion 컴포넌트 예시 추가 * chore(packages/ui): displayName 추가 * fix: 코드리뷰 반영 * fix: resolve conflicts * [Fix] 컴포넌트 스타일 수정 (#102) * fix: 폴더명 Images를 images로 변경 * fix(apps/web): 간단한 레이아웃 수정 * fix(apps/web): NavBar 레이아웃 수정 * fix(packages/ui, apps/web): TextField 레이아웃 깨짐 수정 * fix(packages/ui): Checkbox width 수정 * docs(packages/ui): TextField JSDoc 수정 * [Feat] 결과 수정 - 상세 페이지 퍼블리싱 (#86) * feat(apps/web): ContentItem 컴포넌트 * feat(apps/web): getMinutesAgo 유틸 함수 추가 * feat(apps/web): ContentItem 컴포넌트 * fix(packages/ui): Chip 컴포넌트 개별 export * feat(packages/ui): Accordion 컴포넌트 * chore: Accordion 컴포넌트 예시 추가 * feat(apps/web): EditSidebar 추가 * feat(packages/ui): 아이콘 에셋 추가 * fix(apps/web): getMinutesAgo 함수 getTimesAgo 함수로 수정 * fix(packages/ui): IconButton 컴포넌트 props에서 type도 받도록 수정 * fix(apps/web): ContentItem 컴포넌트 디자인 수정 반영 * feat(apps/web): PostEditor 추가 * feat(apps/web): EditPromptField 추가 * feat(apps/web) EditPost 영역 추가 * feat(apps/web): ContentItem 컴포넌트 * chore: Accordion 컴포넌트 예시 추가 * fix: resolve conflicts * fix: resolve conflicts * fix: 빌드 에러 * fix: 빌드 에러 * fix(apps/web): TextField 수정 반영 * fix(packages/ui): Accordion 컴포넌트 스타일 수정 * [Feat] vercel 자동 배포 빌드 스크립트 (#105) --------- Co-authored-by: MINSEONG KIM <[email protected]> Co-authored-by: minseong <[email protected]>
This was referenced Feb 10, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
관련 이슈
#39
변경 사항
버튼 컴포넌트 구현했습니다!
size,variant,leftIcon,rightIcon프롭을 통해 스타일을 지정할 수 있도록 했어요!아래와 같이 사용하실 수 있어요.
아직
loading상태와 terminal variant의disabled상태 디자인이 시안에 반영되지 않아 반영되는대로 또 수정 pr 올리도록 할게요!레퍼런스
Summary by CodeRabbit
새로운 기능
스타일 변경
개선 사항