[Feat] 주제설정 변경사항 구현, GradientAnimatedText ui 패키지로 이관 및 개선, Label 컴포넌트 옵션 추가 #127
Conversation
Walkthrough이 PR은 사용자 인터페이스 개선을 위해 Create 페이지와 관련 컴포넌트들을 업데이트합니다. Changes
Sequence Diagram(s)sequenceDiagram
participant U as 사용자
participant CP as Create 페이지
participant GT as GradientAnimatedText
participant L as Label 컴포넌트
U->>CP: Create 페이지 접근
CP->>GT: "어떤 글을 생성할까요?" 애니메이션 타이틀 렌더링 요청
GT-->>CP: 애니메이션 타이틀 전달
CP->>L: Label 컴포넌트 렌더링 (설명 포함)
L-->>CP: Label 렌더링 완료
Possibly related PRs
Suggested labels
Suggested reviewers
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
packages/ui/src/components/GradientAnimatedText/GradientAnimatedText.tsxOops! Something went wrong! :( ESLint: 9.17.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@repo/eslint-config' imported from /eslint.config.mjs 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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: 2
🧹 Nitpick comments (4)
packages/ui/src/components/Label/Label.css.ts (1)
4-8: labelWrapperStyle의 gap 속성 개선 제안현재 고정된 gap 값을 사용하고 있습니다. 반응형 디자인을 위해 미디어 쿼리를 통한 동적인 gap 조정을 고려해보시는 것은 어떨까요?
export const labelWrapperStyle = style({ display: 'flex', flexDirection: 'row', - gap: vars.space[12], + gap: { + '@media': { + 'screen and (max-width: 768px)': { gap: vars.space[8] }, + 'screen and (min-width: 769px)': { gap: vars.space[12] } + } + }, });packages/ui/src/components/GradientAnimatedText/GradientAnimatedText.css.ts (1)
3-10: 애니메이션 성능 최적화 제안현재 애니메이션이 지속적으로 실행되고 있습니다. 성능 개선을 위해 다음 사항들을 고려해보세요:
- will-change 속성 추가
- transform 사용으로 변경
const flowingGradient = keyframes({ '0%': { - backgroundPosition: '0% 50%', + transform: translateX(0%), }, '100%': { - backgroundPosition: '200% 50%', + transform: translateX(-100%), }, });apps/web/src/app/create/pageStyle.css.ts (1)
29-33: 반응형 디자인 개선 제안현재 padding과 width가 고정값으로 설정되어 있습니다. 다양한 화면 크기에 대응하기 위해 반응형으로 개선하면 좋을 것 같습니다.
export const titleStyle = style({ - width: '100%', + width: { + '@media': { + 'screen and (max-width: 768px)': { width: '90%' }, + 'screen and (min-width: 769px)': { width: '100%' } + } + }, - padding: `${vars.space[24]} 0`, + padding: { + '@media': { + 'screen and (max-width: 768px)': { padding: `${vars.space[16]} 0` }, + 'screen and (min-width: 769px)': { padding: `${vars.space[24]} 0` } + } + }, textAlign: 'center', });apps/web/src/app/create/Create.tsx (1)
44-46: TODO 주석을 처리해주세요.
agentId가 임시값으로 하드코딩되어 있습니다. 실제 값으로 교체가 필요합니다.이 TODO를 추적할 이슈를 생성해드릴까요?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
apps/web/src/app/create/Create.tsx(3 hunks)apps/web/src/app/create/_components/GradientAnimatedTitle/GradientAnimatedTitle.tsx(0 hunks)apps/web/src/app/create/constants.ts(0 hunks)apps/web/src/app/create/pageStyle.css.ts(1 hunks)packages/ui/package.json(1 hunks)packages/ui/src/components/GradientAnimatedText/GradientAnimatedText.css.ts(1 hunks)packages/ui/src/components/GradientAnimatedText/GradientAnimatedText.tsx(1 hunks)packages/ui/src/components/GradientAnimatedText/index.ts(1 hunks)packages/ui/src/components/Label/Label.css.ts(1 hunks)packages/ui/src/components/Label/Label.tsx(2 hunks)packages/ui/src/components/RadioCards/RadioCardsDescription.tsx(1 hunks)packages/ui/src/components/RadioCards/RadioCardsLabel.tsx(1 hunks)packages/ui/src/components/index.ts(1 hunks)
💤 Files with no reviewable changes (2)
- apps/web/src/app/create/_components/GradientAnimatedTitle/GradientAnimatedTitle.tsx
- apps/web/src/app/create/constants.ts
✅ Files skipped from review due to trivial changes (1)
- packages/ui/src/components/GradientAnimatedText/index.ts
🔇 Additional comments (11)
packages/ui/src/components/RadioCards/RadioCardsLabel.tsx (1)
17-17: 비활성화 상태의 색상 변경이 적절해 보입니다!
grey400에서grey300으로의 색상 변경은 비활성화된 라벨의 가시성을 개선하며, 디자인 시스템의 일관성을 유지합니다.packages/ui/src/components/RadioCards/RadioCardsDescription.tsx (1)
17-17: 시각적 계층 구조가 개선되었습니다!
grey400에서grey200으로의 색상 변경은 다음과 같은 이점이 있습니다:
- Label(
grey300)과 Description(grey200) 사이의 시각적 계층 구조가 명확해졌습니다- 비활성화된 상태에서도 텍스트 요소 간의 관계가 잘 표현됩니다
packages/ui/src/components/index.ts (1)
17-17: 새로운 GradientAnimatedText 컴포넌트 export가 적절히 추가되었습니다!알파벳 순서에 맞게 잘 배치되어 있으며, 기존 export 패턴을 일관되게 따르고 있습니다.
packages/ui/src/components/Label/Label.tsx (3)
12-15: Props 인터페이스가 적절하게 확장되었습니다.설명 텍스트를 지원하기 위해
descriptionprop이 ReactNode 타입으로 추가되었습니다.
23-42: 문서화가 잘 되어있습니다.JSDoc 예제가 명확하고 이해하기 쉽게 작성되어 있습니다.
49-78: 레이블 래퍼 구조가 적절합니다.description 텍스트를 위한 래퍼 div와 스타일링이 잘 구현되어 있습니다.
packages/ui/src/components/GradientAnimatedText/GradientAnimatedText.tsx (2)
6-9: Props 인터페이스가 명확합니다.
asChildprop을 통한 다형성 지원이 잘 구현되어 있습니다.
11-23: 문서화가 잘 되어있습니다.컴포넌트 사용 예제가 기본 사용과 다른 태그로의 사용을 명확하게 보여줍니다.
apps/web/src/app/create/Create.tsx (2)
147-149: GradientAnimatedText 컴포넌트가 적절하게 사용되었습니다.기존 GradientAnimatedTitle을 대체하여 잘 구현되었습니다.
258-260: 구독 관련 설명이 명확합니다.Label 컴포넌트의 description prop을 활용하여 구독 정보를 잘 전달하고 있습니다.
packages/ui/package.json (1)
94-97: GradientAnimatedText 컴포넌트 export가 적절하게 추가되었습니다.기존 컴포넌트들의 export 패턴을 일관성 있게 따르고 있습니다.
packages/ui/src/components/GradientAnimatedText/GradientAnimatedText.css.ts
Show resolved
Hide resolved
| if (asChild) { | ||
| return ( | ||
| <Slot ref={ref}> | ||
| <motion.div | ||
| className={`${styles.gradientTitleStyle} ${className}`} | ||
| initial={{ | ||
| y: '35vh', | ||
| scale: 2, | ||
| x: '-50%', | ||
| left: '50%', | ||
| position: 'absolute', | ||
| }} | ||
| animate={{ | ||
| y: 0, | ||
| scale: 1, | ||
| x: 0, | ||
| left: 'auto', | ||
| position: 'relative', | ||
| }} | ||
| transition={{ | ||
| type: 'spring', | ||
| duration: 0.6, | ||
| bounce: 0.22, | ||
| }} | ||
| {...props} | ||
| > | ||
| {children} | ||
| </motion.div> | ||
| </Slot> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <motion.h1 | ||
| ref={ref} | ||
| className={`${styles.gradientTitleStyle} ${className}`} | ||
| initial={{ | ||
| y: '35vh', | ||
| scale: 2, | ||
| x: '-50%', | ||
| left: '50%', | ||
| position: 'absolute', | ||
| }} | ||
| animate={{ | ||
| y: 0, | ||
| scale: 1, | ||
| x: 0, | ||
| left: 'auto', | ||
| position: 'relative', | ||
| }} | ||
| transition={{ | ||
| type: 'spring', | ||
| duration: 0.6, | ||
| bounce: 0.22, | ||
| }} | ||
| {...props} | ||
| > | ||
| {children} | ||
| </motion.h1> | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
애니메이션 코드 중복을 제거해주세요.
motion 설정이 Slot과 h1 렌더링 경로에서 중복되어 있습니다.
다음과 같이 리팩토링하는 것을 추천드립니다:
+const animationProps = {
+ initial: {
+ y: '35vh',
+ scale: 2,
+ x: '-50%',
+ left: '50%',
+ position: 'absolute',
+ },
+ animate: {
+ y: 0,
+ scale: 1,
+ x: 0,
+ left: 'auto',
+ position: 'relative',
+ },
+ transition: {
+ type: 'spring',
+ duration: 0.6,
+ bounce: 0.22,
+ },
+};
export const GradientAnimatedText = forwardRef<
HTMLHeadingElement,
GradientAnimatedTextProps
>(({ children, asChild, className = '', ...props }, ref) => {
if (asChild) {
return (
<Slot ref={ref}>
<motion.div
className={`${styles.gradientTitleStyle} ${className}`}
- initial={{
- y: '35vh',
- scale: 2,
- x: '-50%',
- left: '50%',
- position: 'absolute',
- }}
- animate={{
- y: 0,
- scale: 1,
- x: 0,
- left: 'auto',
- position: 'relative',
- }}
- transition={{
- type: 'spring',
- duration: 0.6,
- bounce: 0.22,
- }}
+ {...animationProps}
{...props}
>
{children}
</motion.div>
</Slot>
);
}
return (
<motion.h1
ref={ref}
className={`${styles.gradientTitleStyle} ${className}`}
- initial={{
- y: '35vh',
- scale: 2,
- x: '-50%',
- left: '50%',
- position: 'absolute',
- }}
- animate={{
- y: 0,
- scale: 1,
- x: 0,
- left: 'auto',
- position: 'relative',
- }}
- transition={{
- type: 'spring',
- duration: 0.6,
- bounce: 0.22,
- }}
+ {...animationProps}
{...props}
>
{children}
</motion.h1>
);
});📝 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.
| if (asChild) { | |
| return ( | |
| <Slot ref={ref}> | |
| <motion.div | |
| className={`${styles.gradientTitleStyle} ${className}`} | |
| initial={{ | |
| y: '35vh', | |
| scale: 2, | |
| x: '-50%', | |
| left: '50%', | |
| position: 'absolute', | |
| }} | |
| animate={{ | |
| y: 0, | |
| scale: 1, | |
| x: 0, | |
| left: 'auto', | |
| position: 'relative', | |
| }} | |
| transition={{ | |
| type: 'spring', | |
| duration: 0.6, | |
| bounce: 0.22, | |
| }} | |
| {...props} | |
| > | |
| {children} | |
| </motion.div> | |
| </Slot> | |
| ); | |
| } | |
| return ( | |
| <motion.h1 | |
| ref={ref} | |
| className={`${styles.gradientTitleStyle} ${className}`} | |
| initial={{ | |
| y: '35vh', | |
| scale: 2, | |
| x: '-50%', | |
| left: '50%', | |
| position: 'absolute', | |
| }} | |
| animate={{ | |
| y: 0, | |
| scale: 1, | |
| x: 0, | |
| left: 'auto', | |
| position: 'relative', | |
| }} | |
| transition={{ | |
| type: 'spring', | |
| duration: 0.6, | |
| bounce: 0.22, | |
| }} | |
| {...props} | |
| > | |
| {children} | |
| </motion.h1> | |
| ); | |
| const animationProps = { | |
| initial: { | |
| y: '35vh', | |
| scale: 2, | |
| x: '-50%', | |
| left: '50%', | |
| position: 'absolute', | |
| }, | |
| animate: { | |
| y: 0, | |
| scale: 1, | |
| x: 0, | |
| left: 'auto', | |
| position: 'relative', | |
| }, | |
| transition: { | |
| type: 'spring', | |
| duration: 0.6, | |
| bounce: 0.22, | |
| }, | |
| }; | |
| export const GradientAnimatedText = forwardRef< | |
| HTMLHeadingElement, | |
| GradientAnimatedTextProps | |
| >(({ children, asChild, className = '', ...props }, ref) => { | |
| if (asChild) { | |
| return ( | |
| <Slot ref={ref}> | |
| <motion.div | |
| className={`${styles.gradientTitleStyle} ${className}`} | |
| {...animationProps} | |
| {...props} | |
| > | |
| {children} | |
| </motion.div> | |
| </Slot> | |
| ); | |
| } | |
| return ( | |
| <motion.h1 | |
| ref={ref} | |
| className={`${styles.gradientTitleStyle} ${className}`} | |
| {...animationProps} | |
| {...props} | |
| > | |
| {children} | |
| </motion.h1> | |
| ); | |
| }); |
관련 이슈
close: #126
변경 사항
아래의 작업을 진행했어요.
GradientAnimatedText를 사용하기 좋게 ui 패키지로 이관했어요. slot 패턴을 활용해서 다양한 html 태그로 GradientAnimatedText를 활용할 수 있고, 기본 태그는 h1이에요.
레퍼런스
Summary by CodeRabbit
새로운 기능
스타일