[Feat] Toast 컴포넌트 추가 #52
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
apps/web/src/app/page.tsxOops! Something went wrong! :( ESLint: 9.17.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@repo/eslint-config' imported from /eslint.config.mjs """ 워크스루이 풀 리퀘스트는 Toast 알림 시스템을 구현하기 위한 포괄적인 변경 사항을 포함하고 있습니다. 새로운 Toast 컴포넌트, 아이콘, CSS 스타일, 타이머 훅 등이 추가되었으며, 웹 애플리케이션에서 알림을 표시할 수 있는 기능이 도입되었습니다. 패키지 종속성도 업데이트되어 새로운 기능을 지원합니다. 변경 사항
시퀀스 다이어그램sequenceDiagram
participant User
participant HomePage
participant OverlayProvider
participant Toast
User->>HomePage: 알림 버튼 클릭
HomePage->>OverlayProvider: notify1() 또는 notify2() 호출
OverlayProvider->>Toast: 알림 열기
Toast->>User: 알림 표시
Toast-->>Toast: 타이머 후 자동 닫힘
관련 가능한 풀 리퀘스트
제안된 레이블
제안된 리뷰어
토스트 알림 축하 시
🪧 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 (
|
minseong0324
commented
Jan 10, 2025
| @@ -20,6 +20,7 @@ const buildOptions = { | |||
| }), | |||
| ], | |||
| loader: { '.css': 'file' }, | |||
| allowOverwrite: true, | |||
There was a problem hiding this comment.
요거 없으니까 빌드가 갑자기 터지더라구요..? 이유가 뭘까요..
There was a problem hiding this comment.
원래 esbuild에서 빌드 후 파일 덮어쓰기를 할 때 해당 옵션이 없으면 에러가 발생할 수 있다는데... 그럼 지금까지는 왜 됐을까요? 기기괴괴...
저 옵션을 쓰고 싶지 않으면 빌드 전마다 dist 파일을 비우고 빌드를 시작하는 방법으로 해결할 수 있대요! 저희는 그대로 둬도 될 것 같긴 합니다,,,
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (5)
packages/ui/src/components/Toast/Toast.css.ts (1)
4-12: Toast 컨테이너의 스택 컨텍스트와 반응형 처리가 필요합니다.다음 사항들을 고려해 주세요:
- 다른 fixed 요소들과의 겹침을 방지하기 위해
z-index속성 추가- 모바일 환경에서의 위치 조정을 위한 미디어 쿼리 추가
export const container = style({ position: 'fixed', bottom: 40, right: 40, + zIndex: 1000, padding: `${tokens.spacing[20]} ${tokens.spacing[32]}`, borderRadius: 100, backgroundColor: tokens.colors.grey700, color: tokens.colors.grey0, + '@media': { + 'screen and (max-width: 768px)': { + bottom: 20, + right: 20, + left: 20, + }, + }, });packages/ui/src/components/Toast/compounds/Icon/Icon.tsx (1)
14-23: 기본 케이스 처리 방식 개선 필요기본 케이스에서
null을 반환하는 것은 사용자에게 혼란을 줄 수 있습니다. 기본 아이콘을 제공하거나 개발자에게 경고를 주는 것이 좋습니다.switch (toastType) { case 'success': return 'check'; case 'error': return 'notice'; default: - return null; + return 'info'; // 기본 아이콘 제공 }packages/ui/src/components/Toast/hooks/useTimer.ts (2)
3-6: 매개변수 이름 수정 필요
timeoutSecond는 밀리초 단위로 동작하므로 이름이 혼란을 줄 수 있습니다.type UseTimerParameters = { onTimerEnd?: () => void; - timeoutSecond?: number; + timeoutMs?: number; // 밀리초 단위임을 명확히 함 };
30-36: 의존성 배열 최적화 필요
useEffect의 의존성 배열에timerRef를 포함할 필요가 없습니다.useRef는 항상 동일한 참조를 유지합니다.useEffect(() => { return () => { if (timerRef.current) { clearTimeout(timerRef.current); } }; - }, [timerRef]); + }, []);packages/ui/src/components/Toast/Toast.tsx (1)
97-98: 터치 디바이스 고려 필요현재
onPointerEnter와onPointerLeave만 처리하고 있어 터치 디바이스에서의 사용성이 제한될 수 있습니다.onPointerEnter={clearCurrentTimeout} onPointerLeave={startCurrentTimer} + onTouchStart={clearCurrentTimeout} + onTouchEnd={startCurrentTimer}
📜 Review details
Configuration used: CodeRabbit UI
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)
apps/web/package.json(1 hunks)apps/web/src/app/page.tsx(1 hunks)packages/ui/esbuild.config.mjs(1 hunks)packages/ui/package.json(2 hunks)packages/ui/src/components/Toast/Toast.css.ts(1 hunks)packages/ui/src/components/Toast/Toast.tsx(1 hunks)packages/ui/src/components/Toast/compounds/Icon/Icon.tsx(1 hunks)packages/ui/src/components/Toast/hooks/useTimer.ts(1 hunks)packages/ui/src/components/Toast/index.ts(1 hunks)packages/ui/src/components/index.ts(1 hunks)
🔇 Additional comments (5)
packages/ui/src/components/Toast/index.ts (1)
1-4: 깔끔한 내보내기 구조입니다!컴포넌트와 타입들이 잘 정리되어 있고, 배럴 파일의 모범 사례를 잘 따르고 있습니다.
packages/ui/src/components/index.ts (1)
4-5: 컴포넌트 내보내기가 일관성 있게 추가되었습니다!기존 컴포넌트들의 내보내기 패턴을 잘 따르고 있습니다.
packages/ui/esbuild.config.mjs (1)
23-23: 빌드 설정이 개선되었습니다만, CommonJS 관련 이슈를 해결해야 합니다.
allowOverwrite: true옵션이 추가된 것은 좋습니다. 하지만 TODO 주석에서 언급된 CommonJS 빌드 오류를 해결하는 것이 필요해 보입니다.이 이슈를 추적하고 해결하기 위해 다음 명령어로 빌드 오류를 확인해보세요:
apps/web/package.json (1)
17-17: overlay-kit 종속성 추가에 대한 검토Toast 컴포넌트 구현을 위해 overlay-kit을 추가한 것은 적절해 보입니다. 다만, 해당 라이브러리의 최신 보안 업데이트 및 안정성을 확인하시기 바랍니다.
다음 스크립트를 실행하여 overlay-kit의 최신 버전과 보안 취약점을 확인하겠습니다:
✅ Verification successful
overlay-kit 버전 및 보안 검토 완료
현재 사용 중인 [email protected]은 최신 버전이며, 알려진 보안 취약점이 없습니다. 안전하게 사용하셔도 좋습니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # overlay-kit 라이브러리의 최신 버전 및 보안 취약점 확인 # npm 레지스트리에서 최신 버전 확인 curl -s https://registry.npmjs.org/overlay-kit | jq '.["dist-tags"].latest' # GitHub 보안 취약점 확인 gh api graphql -f query=' { securityVulnerabilities(first: 5, ecosystem: NPM, package: "overlay-kit") { nodes { advisory { summary severity publishedAt } vulnerableVersionRange firstPatchedVersion { identifier } } } }'Length of output: 430
packages/ui/package.json (1)
24-28: motion 라이브러리 및 타입 의존성 추가 검토Toast 컴포넌트의 애니메이션을 위한 motion 라이브러리 추가는 적절합니다. 다만, 버전 ^11.17.0의 안정성을 확인해 주시기 바랍니다.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/ui/src/utils/mergeRefs.ts (2)
3-12: JSDoc 문서화 추가를 제안드립니다.함수의 목적과 사용법을 명확히 하기 위해 JSDoc 문서를 추가하면 좋을 것 같습니다.
다음과 같은 문서화를 제안드립니다:
+/** + * 여러 개의 React ref를 하나의 ref로 병합합니다. + * @template T - ref가 참조하는 값의 타입 + * @param {...(MutableRefObject<T> | LegacyRef<T> | ForwardedRef<T> | Ref<T> | undefined | null)} refs - 병합할 ref들 + * @returns {Ref<T>} 병합된 단일 ref + * @example + * const Component = React.forwardRef((props, ref) => { + * const localRef = useRef(null); + * const mergedRef = mergeRefs(ref, localRef); + * return <div ref={mergedRef} />; + * }); + */ export function mergeRefs<T>(
13-21: 성능 및 타입 안전성 개선을 제안드립니다.현재 구현은 정확하지만, 다음과 같은 개선사항들을 고려해보시면 좋을 것 같습니다:
export function mergeRefs<T>( ...refs: Array< | MutableRefObject<T> | LegacyRef<T> | ForwardedRef<T> | Ref<T> | undefined | null > ): Ref<T> { + const processRef = (ref: typeof refs[number], value: T | null) => { + if (typeof ref === 'function') { + ref(value); + } else if (ref != null) { + // 타입 가드를 사용하여 더 안전한 타입 체크 + if ('current' in ref) { + ref.current = value; + } + } + }; + return (value) => { - refs.forEach((ref) => { - if (typeof ref === 'function') { - ref(value); - } else if (ref != null) { - (ref as MutableRefObject<T | null>).current = value; - } - }); + refs.forEach(ref => processRef(ref, value)); }; }개선사항:
processRef함수를 클로저 외부로 분리하여 불필요한 함수 생성 방지- 타입 단언(assertion) 대신 타입 가드를 사용하여 더 안전한 타입 체크 구현
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
packages/ui/package.json(1 hunks)packages/ui/src/components/Toast/Toast.tsx(1 hunks)packages/ui/src/utils/index.ts(1 hunks)packages/ui/src/utils/mergeRefs.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/ui/src/utils/index.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/ui/package.json
🔇 Additional comments (3)
packages/ui/src/utils/mergeRefs.ts (1)
1-1: 필요한 타입들이 올바르게 임포트되었습니다!React의 ref 관련 타입들이 명시적으로 임포트되어 있습니다.
packages/ui/src/components/Toast/Toast.tsx (2)
84-88: 키보드 접근성 향상을 위한 이전 피드백 반영 확인이전에 키보드 상호작용 추가에 대한 피드백이 있었습니다. 현재
handleKeyDown함수를 통해Escape키로 토스트를 닫을 수 있게 구현되어 있어 접근성이 개선되었습니다.
113-115: 스크린 리더 지원을 위한 ARIA 속성 추가 확인이전에 스크린 리더 지원을 위해 ARIA 속성을 추가하라는 피드백이 있었습니다. 현재
role="alert"와aria-live="polite"속성이 추가되어 있어 스크린 리더 사용자에게 적절한 정보를 제공합니다.
kongnayeon
approved these changes
Jan 12, 2025
apps/web/src/app/page.tsx
Outdated
| color={tokens.colors.warning300} | ||
| /> | ||
| </div> | ||
| <OverlayProvider> |
There was a problem hiding this comment.
overlay-kit 문서 확인해 보니 <OverlayProvider /> 컴포넌트는 지금부터 바로 layout.tsx에 넣어 둬도 좋지 않을까요?.?
| @@ -20,6 +20,7 @@ const buildOptions = { | |||
| }), | |||
| ], | |||
| loader: { '.css': 'file' }, | |||
| allowOverwrite: true, | |||
There was a problem hiding this comment.
원래 esbuild에서 빌드 후 파일 덮어쓰기를 할 때 해당 옵션이 없으면 에러가 발생할 수 있다는데... 그럼 지금까지는 왜 됐을까요? 기기괴괴...
저 옵션을 쓰고 싶지 않으면 빌드 전마다 dist 파일을 비우고 빌드를 시작하는 방법으로 해결할 수 있대요! 저희는 그대로 둬도 될 것 같긴 합니다,,,
packages/ui/src/utils/mergeRefs.ts
Outdated
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/web/src/components/Providers/Providers.tsx (1)
11-17: Provider 구성에 대한 제안현재 구현은 정상적으로 작동하지만, 몇 가지 개선 사항을 제안드립니다:
- theme 값을 하드코딩하는 대신 props로 받아 유연성을 높이는 것이 좋습니다.
- 향후 확장성을 고려하여 다크 모드 지원을 위한 준비가 필요할 수 있습니다.
다음과 같은 리팩토링을 제안드립니다:
type ProvidersProps = { children: ReactNode; + theme?: 'light' | 'dark'; }; -export function Providers({ children }: ProvidersProps) { +export function Providers({ children, theme = 'light' }: ProvidersProps) { return ( - <ThemeProvider theme="light"> + <ThemeProvider theme={theme}> <OverlayProvider>{children}</OverlayProvider> </ThemeProvider> ); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/web/src/app/layout.tsx(2 hunks)apps/web/src/app/page.tsx(1 hunks)apps/web/src/components/Providers/Providers.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/web/src/app/page.tsx
🔇 Additional comments (4)
apps/web/src/components/Providers/Providers.tsx (2)
1-5: 필요한 import 구문이 모두 잘 구성되어 있습니다.클라이언트 컴포넌트 지시문과 필수 의존성들이 올바르게 import 되어 있습니다.
7-9: 타입 정의가 명확합니다.
ProvidersProps타입이 간단하고 명확하게 정의되어 있습니다.apps/web/src/app/layout.tsx (2)
6-6: import 경로가 적절합니다.상대 경로를 사용한 Providers 컴포넌트 import가 올바르게 되어 있습니다.
32-32: Providers 컴포넌트 통합이 잘 되어있습니다.RootLayout에서 Providers 컴포넌트를 사용하여 전역 상태 관리가 잘 구성되어 있습니다. 다만, PR 목적에 맞게 Toast 기능 구현을 위한 추가 작업이 필요해 보입니다.
Toast 구현을 위한 추가 파일들이 있는지 확인하겠습니다:
✅ Verification successful
Toast 구현을 위한 추가 작업이 필요합니다.
- Providers 컴포넌트에 ThemeProvider와 OverlayProvider가 잘 구성되어 있습니다.
- Toast.Icon이 사용되고 있으나, Toast 기능을 위한 context나 provider가 아직 구현되지 않았습니다.
- success, error 타입의 토스트 메시지 구현이 필요해 보입니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Toast 관련 컴포넌트 및 훅 파일 검색 echo "Searching for Toast related files..." fd -e tsx -e ts "Toast" "apps/web/src" # useToast 훅 구현 확인 echo "Checking for useToast implementation..." rg -l "useToast" "apps/web/src"Length of output: 238
Script:
#!/bin/bash # Check Providers component implementation echo "Checking Providers component..." rg -l "Providers" "apps/web/src" --type tsx ast-grep --pattern 'export function Providers' -p 'export const Providers' # Check package.json for toast-related dependencies echo "Checking package.json for toast dependencies..." cat apps/web/package.json | grep -i "toast" # Search for alternative notification patterns echo "Searching for alternative notification patterns..." rg -l "notification|alert|message" "apps/web/src" --type tsxLength of output: 735
Script:
#!/bin/bash # Check Providers component implementation echo "Checking Providers component..." rg -l "Providers" "apps/web/src" ast-grep --pattern 'export function Providers { $$$ }' # Check for toast and notification patterns echo "Checking toast and notification patterns..." rg -l "toast|notification|alert|message" "apps/web/src" # Check package.json in both web and root echo "Checking package.json files..." cat apps/web/package.json cat package.jsonLength of output: 2382
Script:
#!/bin/bash # Check Providers implementation echo "Checking Providers.tsx content..." cat "apps/web/src/components/Providers/Providers.tsx" # Check page.tsx for context echo "Checking page.tsx content..." rg "toast|notification|alert|message" "apps/web/src/app/page.tsx" -C 2Length of output: 918
|
오 Provider들 한꺼번에 묶어서 관리하는 거 좋은 것 같아요! 고생하셨습니다!!~~ |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/web/src/app/page.tsx (1)
1-4: OverlayProvider 배치 위치 조정 필요
overlay-kit을 사용하기 위해서는<OverlayProvider />가 필요합니다. 이전 리뷰 코멘트에서 논의된 대로layout.tsx에 배치하는 것이 좋을 것 같습니다.// layout.tsx import { OverlayProvider } from 'overlay-kit'; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html> <body> <OverlayProvider> {children} </OverlayProvider> </body> </html> ); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/src/app/page.tsx(1 hunks)packages/ui/src/components/index.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/ui/src/components/index.ts
🔇 Additional comments (3)
apps/web/src/app/page.tsx (3)
1-4: 코드가 적절해 보입니다!클라이언트 사이드 기능을 위한 'use client' 지시문과 필요한 컴포넌트 임포트가 올바르게 되어있습니다.
7-29: 접근성 및 국제화 처리가 필요합니다토스트 메시지의 접근성과 국제화 처리가 여전히 필요합니다:
- 스크린 리더 지원을 위한 ARIA 속성 추가
- 하드코딩된 한글 메시지의 국제화 처리
const notify1 = () => overlay.open(({ isOpen, close, unmount }) => ( <Toast open={isOpen} onClose={close} leftAddon={<Toast.Icon toastType="success" />} onExited={unmount} + role="alert" + aria-live="polite" > - 생성된 본문이 업데이트 됐어요! + {t('toast.content_updated')} </Toast> )); const notify2 = () => overlay.open(({ isOpen, close, unmount }) => ( <Toast open={isOpen} onClose={close} leftAddon={<Toast.Icon toastType="error" />} onExited={unmount} + role="alert" + aria-live="assertive" > - 1개 이상의 게시물을 선택해주세요 + {t('toast.select_at_least_one')} </Toast> ));
37-38: 버튼 접근성 개선이 필요합니다버튼에 적절한
aria-label속성이 없습니다.- <button onClick={notify1}>success 토스트 열기</button> - <button onClick={notify2}>warning 토스트 열기</button> + <button onClick={notify1} aria-label="성공 알림 표시">success 토스트 열기</button> + <button onClick={notify2} aria-label="경고 알림 표시">warning 토스트 열기</button>
This was referenced Jan 16, 2025
Merged
Merged
This was referenced Jan 25, 2025
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]>
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
변경 사항
Toast 컴포넌트를 추가했어요. 추후 useToast를 구현할 예정이에요.
overlay-kit을 활용해서 오버레이 상태 관리를 진행했고, 애니메이션은 motion을 사용했어요.
논의 사항: 애니메이션이 필요할 때 motion으로 가져가는 건 어떨까요?
2025-01-13.2.15.54.mov
레퍼런스
Summary by CodeRabbit
Summary by CodeRabbit
새로운 기능
Toast및ToastIcon컴포넌트 도입Providers컴포넌트를 통해 테마 및 오버레이 기능 중앙화의존성 변경
overlay-kit라이브러리 추가motion라이브러리 추가@types/react-dom및motion의존성 추가@repo/typescript-config의존성 재추가UI 개선
구성 변경
RootLayout에서ThemeProvider대신Providers사용으로 테마 처리 방식 변경