[Feat] useToast 추가, DynamicLottie 컴포넌트 추가 #89
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
…m-1-FE into fix/#23c308450
|
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 Walkthrough이 풀 리퀘스트는 애플리케이션의 알림 및 컴포넌트 로딩 기능을 개선하는 데 중점을 둡니다. 새로운 Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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: 3
🔭 Outside diff range comments (1)
apps/web/src/app/page.tsx (1)
Line range hint
91-126: notify 함수들을 useToast로 마이그레이션하면 좋을 것 같습니다.
overlay를 직접 사용하는 대신useToast훅을 사용하면 코드의 일관성을 높일 수 있습니다:-const notify1 = () => - overlay.open(({ isOpen, close, unmount }) => ( - <Toast - open={isOpen} - onClose={close} - leftAddon={<Toast.Icon toastType="success" />} - onExited={unmount} - > - 생성된 본문이 업데이트 됐어요! - </Toast> - )); +const notify1 = () => toast.success('생성된 본문이 업데이트 됐어요!'); -const notify2 = () => - overlay.open(({ isOpen, close, unmount }) => ( - <Toast - open={isOpen} - onClose={close} - leftAddon={<Toast.Icon toastType="error" />} - onExited={unmount} - > - 1개 이상의 게시물을 선택해주세요 - </Toast> - )); +const notify2 = () => toast.error('1개 이상의 게시물을 선택해주세요');
🧹 Nitpick comments (11)
packages/ui/src/utils/isNil.ts (1)
1-5: 엄격한 동등성 검사 사용을 권장드립니다.현재 구현에서는 느슨한 동등성 검사(
==)를 사용하고 있습니다. 더 명시적이고 안전한 코드를 위해 엄격한 동등성 검사를 사용하는 것이 좋습니다.다음과 같이 수정하는 것을 제안드립니다:
export function isNil<T>( value: T | null | undefined ): value is null | undefined { - return value == null; + return value === null || value === undefined; }packages/ui/src/components/Toast/compounds/Icon/Icon.tsx (2)
10-32: getToastIconProps 함수에 JSDoc 문서를 추가해 주세요.함수의 목적과 반환값에 대한 설명이 있으면 다른 개발자들이 더 쉽게 이해할 수 있습니다.
다음과 같이 문서를 추가하는 것을 제안드립니다:
+/** + * 토스트 타입에 따른 아이콘 속성을 반환합니다. + * @param toastType - 토스트 메시지의 타입 + * @returns 아이콘 속성 객체 또는 undefined + */ function getToastIconProps( toastType?: ToastType ): Pick<IconProps, 'name' | 'color' | 'type'> | undefined {
34-40: ToastIcon 컴포넌트의 반환 타입을 명시해 주세요.타입 안전성을 높이기 위해 명시적인 반환 타입을 추가하는 것이 좋습니다.
다음과 같이 수정하는 것을 제안드립니다:
-export function ToastIcon({ toastType, size = 24, ...props }: ToastIconProps) { +export function ToastIcon({ toastType, size = 24, ...props }: ToastIconProps): JSX.Element | null {packages/ui/src/components/Chip/ChipItem.tsx (2)
30-34: 접근성 향상을 위해 애드온에 aria-label을 추가해 주세요.스크린 리더 사용자를 위해 leftAddon과 rightAddon에 적절한 aria-label을 추가하면 좋을 것 같습니다.
다음과 같이 수정하는 것을 제안드립니다:
- {isNotNil(leftAddon) && leftAddon} + {isNotNil(leftAddon) && ( + <span aria-label="왼쪽 애드온"> + {leftAddon} + </span> + )} <Text fontSize={16} fontWeight="semibold"> {children} </Text> - {isNotNil(rightAddon) && rightAddon} + {isNotNil(rightAddon) && ( + <span aria-label="오른쪽 애드온"> + {rightAddon} + </span> + )}
Line range hint
16-48: 성능 최적화를 위해 React.memo 사용을 고려해 보세요.ChipItem이 자주 리렌더링될 수 있는 상황에서는 React.memo를 사용하여 성능을 최적화할 수 있습니다.
다음과 같이 수정하는 것을 제안드립니다:
-export const ChipItem = forwardRef<HTMLSpanElement, ChipProps>( +export const ChipItem = memo(forwardRef<HTMLSpanElement, ChipProps>( ({ className = '', variant, leftAddon, rightAddon, closable = false, children, onClose, ...rest }) => { // ... component implementation ... } -); +));이를 위해 상단에 다음 import를 추가해 주세요:
-import { ComponentPropsWithoutRef, forwardRef, ReactElement } from 'react'; +import { ComponentPropsWithoutRef, forwardRef, ReactElement, memo } from 'react';packages/ui/src/hooks/useToast.tsx (4)
12-25: 타입 정의에 문서화를 추가하면 좋을 것 같습니다.타입 정의가 잘 구조화되어 있지만, 각 타입에 대한 JSDoc 문서화를 추가하면 더 좋을 것 같습니다:
+/** + * Lottie 애니메이션 애드온 타입 + */ type LottieAddon = { type: 'lottie'; props: LottieAnimationProps; }; +/** + * 아이콘 애드온 타입 + */ type IconAddon = { type: 'icon'; props: IconProps; }; +/** + * 토스트 옵션 타입 + * @property duration - 토스트 표시 지속 시간 (밀리초) + * @property leftAddon - 왼쪽에 표시될 애드온 (Lottie 또는 아이콘) + */ type ToastOptions = { duration: number; leftAddon?: LottieAddon | IconAddon; };
80-101: 지속 시간 유효성 검사를 추가하면 좋을 것 같습니다.
show함수에서duration값에 대한 유효성 검사를 추가하면 좋을 것 같습니다:const show = useCallback( ( text: string, toastType: ToastType = 'default', duration = DEFAULT_DURATION ) => { + if (duration <= 0) { + console.warn('토스트 지속 시간은 0보다 커야 합니다. 기본값을 사용합니다.'); + duration = DEFAULT_DURATION; + } return overlay.open(({ isOpen, close, unmount }) => ( <Toast open={isOpen}
103-136: 애드온 타입 에러 처리를 개선하면 좋을 것 같습니다.
custom함수에서 잘못된 애드온 타입이 전달되었을 때의 에러 처리를 추가하면 좋을 것 같습니다:const custom = useCallback( (text: string, options: Partial<ToastOptions> = {}) => { const leftAddonType = options.leftAddon?.type; + if (options.leftAddon && !['lottie', 'icon'].includes(leftAddonType as string)) { + console.error(`지원하지 않는 애드온 타입입니다: ${leftAddonType}`); + return null; + } const leftAddonElement = (() => {
138-146: 반환 타입을 명시적으로 정의하면 좋을 것 같습니다.훅의 반환 타입을 명시적으로 정의하여 타입 안전성을 높이면 좋을 것 같습니다:
+type ToastAPI = { + success: (text: string, duration?: number) => void; + error: (text: string, duration?: number) => void; + default: (text: string, duration?: number) => void; + custom: (text: string, options?: Partial<ToastOptions>) => void; +}; -return { +return { success: (text: string, duration?: number) => show(text, 'success', duration), error: (text: string, duration?: number) => show(text, 'error', duration), default: (text: string, duration?: number) => show(text, 'default', duration), custom, -} as const; +} as const satisfies ToastAPI;apps/web/src/app/page.tsx (1)
276-279: DynamicLottie 크기를 테마 기반 값으로 변경하면 좋을 것 같습니다.하드코딩된 크기 값 대신 테마 시스템의 값을 사용하면 디자인 일관성을 높일 수 있습니다:
<DynamicLottie animationData="loadingBlack" - width="2.4rem" - height="2.4rem" + width={theme.spacing[6]} + height={theme.spacing[6]} />packages/ui/package.json (1)
97-97: overlay-kit 버전을 고정하는 것이 좋을 것 같습니다.
^1.4.1버전 범위는 잠재적으로 호환성이 깨질 수 있는 업데이트를 포함할 수 있습니다. 정확한 버전을 지정하는 것이 안전합니다:- "overlay-kit": "^1.4.1", + "overlay-kit": "1.4.1",
📜 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 (14)
apps/web/src/app/page.tsx(5 hunks)packages/ui/package.json(2 hunks)packages/ui/src/components/Chip/ChipItem.tsx(2 hunks)packages/ui/src/components/LottieAnimation/DynamicLottie.tsx(1 hunks)packages/ui/src/components/LottieAnimation/LottieAnimation.tsx(2 hunks)packages/ui/src/components/LottieAnimation/index.ts(1 hunks)packages/ui/src/components/Toast/compounds/Icon/Icon.tsx(1 hunks)packages/ui/src/hooks/index.ts(1 hunks)packages/ui/src/hooks/useToast.tsx(1 hunks)packages/ui/src/index.ts(0 hunks)packages/ui/src/utils/index.ts(1 hunks)packages/ui/src/utils/isNil.ts(1 hunks)packages/ui/src/utils/isNill.ts(0 hunks)packages/ui/src/utils/isNotNil.ts(1 hunks)
💤 Files with no reviewable changes (2)
- packages/ui/src/index.ts
- packages/ui/src/utils/isNill.ts
🔇 Additional comments (7)
packages/ui/src/hooks/index.ts (1)
2-2: 훅 내보내기가 올바르게 구현되었습니다!
useToast훅의 내보내기가 기존 패턴을 잘 따르고 있습니다.packages/ui/src/utils/index.ts (1)
2-3: 유틸리티 내보내기가 정상적으로 수정되었습니다!
isNil경로의 오타가 수정되었습니다isNotNil유틸리티가 적절하게 추가되었습니다packages/ui/src/utils/isNotNil.ts (1)
1-3: 타입 가드가 잘 구현되었습니다!
- 엄격한 동등성 검사를 올바르게 사용하고 있습니다
- 타입스크립트 타입 가드가 정확하게 구현되었습니다
packages/ui/src/components/LottieAnimation/index.ts (1)
3-3: 내보내기 구조가 깔끔합니다!
DynamicLottie컴포넌트의 내보내기가 적절하게 추가되었습니다.packages/ui/src/components/LottieAnimation/LottieAnimation.tsx (2)
13-21: 타입 정의가 개선되었습니다!
width와height속성이CSSProperties타입을 사용하도록 변경되어 타입 안전성이 향상되었습니다. 또한animationData속성이lotties객체의 키 타입으로 제한되어 잘못된 애니메이션 키가 전달되는 것을 방지할 수 있습니다.
53-54: String 변환이 명시적으로 처리되었습니다!
width와height값을String()함수를 사용하여 명시적으로 문자열로 변환하도록 개선되었습니다. 이는 CSS 값의 일관성을 보장하고 잠재적인 런타임 오류를 방지합니다.packages/ui/package.json (1)
12-12: 모듈 구조가 개선되었습니다!
LottieAnimation컴포넌트의 export 경로가index.js를 사용하도록 변경되어 더 나은 모듈 구조를 가지게 되었습니다.
Comment on lines
+10
to
+15
| useEffect(() => { | ||
| const importLottie = () => import('./LottieAnimation'); | ||
| importLottie().then((lottie) => | ||
| setLottie(<lottie.LottieAnimation {...props} />) | ||
| ); | ||
| }, []); |
There was a problem hiding this comment.
useEffect의 의존성 배열을 수정해 주세요.
useEffect 내부에서 props를 사용하고 있지만 의존성 배열이 비어있습니다. 이로 인해 props가 변경되어도 컴포넌트가 업데이트되지 않을 수 있습니다.
다음과 같이 수정해 주세요:
- }, []);
+ }, [props]);📝 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.
Suggested change
| useEffect(() => { | |
| const importLottie = () => import('./LottieAnimation'); | |
| importLottie().then((lottie) => | |
| setLottie(<lottie.LottieAnimation {...props} />) | |
| ); | |
| }, []); | |
| useEffect(() => { | |
| const importLottie = () => import('./LottieAnimation'); | |
| importLottie().then((lottie) => | |
| setLottie(<lottie.LottieAnimation {...props} />) | |
| ); | |
| }, [props]); |
Comment on lines
+7
to
+18
| export const DynamicLottie = (props: LottieAnimationProps) => { | ||
| const [Lottie, setLottie] = useState<ReactNode>(null); | ||
|
|
||
| useEffect(() => { | ||
| const importLottie = () => import('./LottieAnimation'); | ||
| importLottie().then((lottie) => | ||
| setLottie(<lottie.LottieAnimation {...props} />) | ||
| ); | ||
| }, []); | ||
|
|
||
| return Lottie; | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
로딩 및 에러 상태 처리를 추가해 주세요.
동적 임포트 시 발생할 수 있는 에러 처리와 로딩 상태 표시가 누락되어 있습니다. 사용자 경험 향상을 위해 이를 추가하는 것이 좋습니다.
다음과 같이 수정하는 것을 제안드립니다:
export const DynamicLottie = (props: LottieAnimationProps) => {
const [Lottie, setLottie] = useState<ReactNode>(null);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState<Error | null>(null);
useEffect(() => {
- const importLottie = () => import('./LottieAnimation');
- importLottie().then((lottie) =>
- setLottie(<lottie.LottieAnimation {...props} />)
- );
+ setIsLoading(true);
+ import('./LottieAnimation')
+ .then((lottie) => {
+ setLottie(<lottie.LottieAnimation {...props} />);
+ setIsLoading(false);
+ })
+ .catch((err) => {
+ setError(err);
+ setIsLoading(false);
+ });
}, [props]);
+ if (isLoading) return <div>로딩 중...</div>;
+ if (error) return <div>에러가 발생했습니다</div>;
return Lottie;
};📝 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.
Suggested change
| export const DynamicLottie = (props: LottieAnimationProps) => { | |
| const [Lottie, setLottie] = useState<ReactNode>(null); | |
| useEffect(() => { | |
| const importLottie = () => import('./LottieAnimation'); | |
| importLottie().then((lottie) => | |
| setLottie(<lottie.LottieAnimation {...props} />) | |
| ); | |
| }, []); | |
| return Lottie; | |
| }; | |
| export const DynamicLottie = (props: LottieAnimationProps) => { | |
| const [Lottie, setLottie] = useState<ReactNode>(null); | |
| const [isLoading, setIsLoading] = useState(true); | |
| const [error, setError] = useState<Error | null>(null); | |
| useEffect(() => { | |
| setIsLoading(true); | |
| import('./LottieAnimation') | |
| .then((lottie) => { | |
| setLottie(<lottie.LottieAnimation {...props} />); | |
| setIsLoading(false); | |
| }) | |
| .catch((err) => { | |
| setError(err); | |
| setIsLoading(false); | |
| }); | |
| }, [props]); | |
| if (isLoading) return <div>로딩 중...</div>; | |
| if (error) return <div>에러가 발생했습니다</div>; | |
| return Lottie; | |
| }; |
Comment on lines
+49
to
+88
| const toastNotify1 = () => { | ||
| toast.success('생성된 본문이 업데이트 됐어요!', 3000); | ||
| }; | ||
|
|
||
| const toastNotify2 = () => { | ||
| toast.error('생성된 본문이 업데이트 됐어요!', 3000); | ||
| }; | ||
|
|
||
| const toastNotify3 = () => { | ||
| toast.default('생성된 본문이 업데이트 됐어요!', 3000); | ||
| }; | ||
|
|
||
| const toastNotify4 = () => { | ||
| toast.custom('메시지', { | ||
| duration: 5000, | ||
| leftAddon: { | ||
| type: 'lottie', | ||
| props: { | ||
| animationData: 'loadingBlack', | ||
| width: '24px', | ||
| height: '24px', | ||
| }, | ||
| }, | ||
| }); | ||
| }; | ||
|
|
||
| const toastNotify5 = () => { | ||
| toast.custom('메시지', { | ||
| duration: 5000, | ||
| leftAddon: { | ||
| type: 'icon', | ||
| props: { | ||
| name: 'twinkle', | ||
| size: 24, | ||
| color: 'primary600', | ||
| type: 'fill', | ||
| }, | ||
| }, | ||
| }); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
토스트 알림 함수들을 개선할 수 있습니다.
메시지 문자열이 중복되어 있고 비슷한 함수들이 반복되고 있습니다. 다음과 같이 개선할 수 있습니다:
+const TOAST_MESSAGES = {
+ UPDATE: '생성된 본문이 업데이트 됐어요!',
+ DEFAULT: '메시지',
+} as const;
-const toastNotify1 = () => {
- toast.success('생성된 본문이 업데이트 됐어요!', 3000);
-};
-
-const toastNotify2 = () => {
- toast.error('생성된 본문이 업데이트 됐어요!', 3000);
-};
-
-const toastNotify3 = () => {
- toast.default('생성된 본문이 업데이트 됐어요!', 3000);
-};
+const showToast = (type: 'success' | 'error' | 'default', message = TOAST_MESSAGES.UPDATE) => {
+ toast[type](message, 3000);
+};
+const showCustomToast = (
+ message = TOAST_MESSAGES.DEFAULT,
+ addon: ToastOptions['leftAddon']
+) => {
+ toast.custom(message, {
+ duration: 5000,
+ leftAddon: addon,
+ });
+};📝 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.
Suggested change
| const toastNotify1 = () => { | |
| toast.success('생성된 본문이 업데이트 됐어요!', 3000); | |
| }; | |
| const toastNotify2 = () => { | |
| toast.error('생성된 본문이 업데이트 됐어요!', 3000); | |
| }; | |
| const toastNotify3 = () => { | |
| toast.default('생성된 본문이 업데이트 됐어요!', 3000); | |
| }; | |
| const toastNotify4 = () => { | |
| toast.custom('메시지', { | |
| duration: 5000, | |
| leftAddon: { | |
| type: 'lottie', | |
| props: { | |
| animationData: 'loadingBlack', | |
| width: '24px', | |
| height: '24px', | |
| }, | |
| }, | |
| }); | |
| }; | |
| const toastNotify5 = () => { | |
| toast.custom('메시지', { | |
| duration: 5000, | |
| leftAddon: { | |
| type: 'icon', | |
| props: { | |
| name: 'twinkle', | |
| size: 24, | |
| color: 'primary600', | |
| type: 'fill', | |
| }, | |
| }, | |
| }); | |
| }; | |
| const TOAST_MESSAGES = { | |
| UPDATE: '생성된 본문이 업데이트 됐어요!', | |
| DEFAULT: '메시지', | |
| } as const; | |
| const showToast = (type: 'success' | 'error' | 'default', message = TOAST_MESSAGES.UPDATE) => { | |
| toast[type](message, 3000); | |
| }; | |
| const showCustomToast = ( | |
| message = TOAST_MESSAGES.DEFAULT, | |
| addon: ToastOptions['leftAddon'] | |
| ) => { | |
| toast.custom(message, { | |
| duration: 5000, | |
| leftAddon: addon, | |
| }); | |
| }; | |
| const toastNotify4 = () => { | |
| toast.custom('메시지', { | |
| duration: 5000, | |
| leftAddon: { | |
| type: 'lottie', | |
| props: { | |
| animationData: 'loadingBlack', | |
| width: '24px', | |
| height: '24px', | |
| }, | |
| }, | |
| }); | |
| }; | |
| const toastNotify5 = () => { | |
| toast.custom('메시지', { | |
| duration: 5000, | |
| leftAddon: { | |
| type: 'icon', | |
| props: { | |
| name: 'twinkle', | |
| size: 24, | |
| color: 'primary600', | |
| type: 'fill', | |
| }, | |
| }, | |
| }); | |
| }; |
kongnayeon
approved these changes
Jan 29, 2025
apps/web/src/app/page.tsx
Outdated
| @@ -13,29 +13,27 @@ import { TextField } from '@repo/ui/TextField'; | |||
| import { RadioCards } from '@repo/ui/RadioCards'; | |||
| import { Skeleton } from '@repo/ui/Skeleton'; | |||
| import { Modal } from '@repo/ui/Modal'; | |||
| import dynamic from 'next/dynamic'; | |||
| import nextDynamic from 'next/dynamic'; | |||
There was a problem hiding this comment.
nextDynamic 이라는 이름으로 가져오는 이유가 있으신가요??
…m-1-FE into fix/#23c308450
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/web/src/app/page.tsx (2)
107-120:notify3함수를 useToast로 마이그레이션하는 것이 좋겠습니다.기존
overlay.open방식 대신 새로 추가된useToast훅을 사용하면 코드를 더 간결하게 만들 수 있습니다.-const notify3 = () => - overlay.open(({ isOpen, close, unmount }) => ( - <Toast - open={isOpen} - onClose={close} - leftAddon={ - <Icon name="stack" color="primary600" type="fill" size={24} /> - } - onExited={unmount} - > - 1개 이상의 게시물을 선택해주세요 - </Toast> - )); +const notify3 = () => { + toast.custom('1개 이상의 게시물을 선택해주세요', { + duration: 3000, + leftAddon: { + type: 'icon', + props: { + name: 'stack', + color: 'primary600', + type: 'fill', + size: 24, + }, + }, + }); +};
283-286: DynamicLottie 컴포넌트의 타입 안전성을 개선할 수 있습니다.
animationDataprop의 타입을 명시적으로 지정하여 사용 가능한 애니메이션 데이터를 제한하는 것이 좋겠습니다.<DynamicLottie - animationData="loadingBlack" + animationData={'loadingBlack' as const} width="2.4rem" height="2.4rem" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/src/app/page.tsx(5 hunks)packages/ui/package.json(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/ui/package.json
🔇 Additional comments (3)
apps/web/src/app/page.tsx (3)
19-20: 훅과 컴포넌트 임포트가 잘 구현되었습니다!
useToast훅과DynamicLottie컴포넌트의 임포트 및 초기화가 적절하게 이루어졌습니다.Also applies to: 28-29
42-81: 토스트 알림 함수들의 중복 코드를 개선해주세요.메시지 문자열과 비슷한 함수들이 반복되어 있습니다. 이전 리뷰 의견과 동일하게 상수와 통합 함수를 사용하여 개선할 것을 제안드립니다.
161-169: 토스트 알림 버튼들이 잘 구현되었습니다!각 버튼의 레이블이 기능을 명확하게 설명하고 있어 사용자가 쉽게 이해할 수 있습니다.
Merged
This was referenced Feb 2, 2025
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.
관련 이슈
close: #88
변경 사항
Toast 컴포넌트를 선언적으로 사용할 수 있도록 overlay-kit으로 Toast 컴포넌트를 감싸 useToast를 구현했어요.
success - 체크 아이콘
error - 에러 아이콘
default - 아이콘 없는 기본
custom - icon 또는 lottie 추가 가능
크게 4가지 유틸을 제공해요. 사용법은 아래와 같아요.
추가적으로,
lottie-react는 document에 의존하기 때문에 Client Side에서만 사용될 수 있어, 이를 위한 DynamicLottie 컴포넌트를 추가했어요.레퍼런스
Summary by CodeRabbit
새로운 기능
useToast추가버그 수정
리팩토링