Conversation
|
""" WalkthroughSkeleton 컴포넌트가 새로 추가되었습니다. CSS 모듈, React 컴포넌트, 타입, Storybook 스토리, 그리고 인덱스 재출력 파일이 포함되어 있습니다. Skeleton은 width, height, radius 속성을 받아 동적으로 스타일이 적용되며, 스토리북에서 다양한 상태를 시각적으로 확인할 수 있습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Storybook
participant Skeleton
User->>Storybook: 스토리 선택 (Default/CustomRadius/VariousSizes)
Storybook->>Skeleton: width, height, radius props 전달
Skeleton->>Skeleton: CSS 변수 계산 및 스타일 적용
Skeleton->>User: Skeleton UI 렌더링
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/components/ui/Skeleton/Skeleton.tsxOops! Something went wrong! :( ESLint: 9.27.0 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.27.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
🎨 Storybook Preview: https://685a32a1c0bbd269fdb67af4-rfyhsjknqh.chromatic.com/ |
Seojunhwan
left a comment
Seojunhwan
left a comment
There was a problem hiding this comment.
수빈님 넘 감사합니다,, 코멘트 2개 남겨뒀어요,,!
| [styles.widthVar]: coerceCssRemValue(width), | ||
| [styles.heightVar]: coerceCssRemValue(height), | ||
| [styles.radiusVar]: | ||
| typeof radius === "number" ? coerceCssRemValue(radius) : radius, |
There was a problem hiding this comment.
P1: 요거 타입 확인은 coerceCssRemValue 요 함수 내에서 하니까 제거해도 괜찮을 것 같아요!!
| export type SkeletonProps = { | ||
| /** 스켈레톤 너비 */ | ||
| width: number; | ||
|
|
||
| /** 스켈레톤 높이 */ | ||
| height: number; | ||
|
|
||
| /** border-radius(px 또는 string) */ | ||
| radius?: number | string; | ||
| }; |
There was a problem hiding this comment.
P1: HTMLAttributes 요것 확장해놓는 것은 어떨까요?! restProps 잘 뿌리고 style prop도 잘 merge해보고요!
![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)
src/components/ui/Skeleton/Skeleton.css.ts (1)
13-14: Skeleton 시각 효과(페이드/쉬머) 부재스켈레톤은 로딩 상태를 전달하는 컴포넌트이므로, 단순한 회색 블록보다는 opacity pulse 또는 linear-gradient shimmer 애니메이션을 추가하면 UX 가 크게 개선됩니다. 추후 디자인 토큰에 맞춰 애니메이션을 추가하는 것을 고려해 주세요.
src/components/ui/Skeleton/Skeleton.tsx (2)
7-16: width·height 타입 제한현재
width/height를number로만 제한하고 있어%,vw,vh등 유동 레이아웃에서 쓰기 힘듭니다. 문자열 타입을 함께 허용하면 재사용성이 높아집니다.- width: number; - height: number; + width: number | string; + height: number | string;
26-31: radius undefined 처리
radius가 undefined 일 때assignInlineVars에undefined가 전달됩니다. React 는 undefined 스타일을 무시하지만, 타입 경고를 예방하려면 명시적으로 필터링하는 편이 안전합니다.const inlineVars = { [styles.widthVar]: coerceCssRemValue(width), [styles.heightVar]: coerceCssRemValue(height), - [styles.radiusVar]: - typeof radius === "number" ? coerceCssRemValue(radius) : radius, + ...(radius !== undefined && { + [styles.radiusVar]: + typeof radius === "number" ? coerceCssRemValue(radius) : radius, + }), };src/components/ui/Skeleton/Skeleton.stories.tsx (1)
18-30: radius 컨트롤 타입 불일치
radiusprop 이number | string인데 컨트롤을"text"로 고정하면 숫자 입력 시 UX 가 떨어집니다."text"대신"number"또는"text","number"모두 허용하도록 조정해 주세요.- radius: { - control: "text", + radius: { + control: { type: "text" },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/ui/Skeleton/Skeleton.css.ts(1 hunks)src/components/ui/Skeleton/Skeleton.stories.tsx(1 hunks)src/components/ui/Skeleton/Skeleton.tsx(1 hunks)src/components/ui/Skeleton/index.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
src/components/ui/Skeleton/Skeleton.css.ts (1)
Learnt from: CR
PR: YAPP-Github/26th-Web-Team-1-FE#0
File: .cursor/rules/nextjs-folder-structure.mdc:0-0
Timestamp: 2025-06-30T08:25:30.684Z
Learning: Applies to **/*.css.ts : vanilla-extract 스타일 파일은 camelCase로, `.css.ts` 확장자를 사용해야 하며, 해당 컴포넌트와 같은 폴더에 배치해야 한다.
🧬 Code Graph Analysis (2)
src/components/ui/Skeleton/Skeleton.tsx (1)
src/lib/utils/coerceCssRemValue.ts (1)
coerceCssRemValue(12-14)
src/components/ui/Skeleton/Skeleton.stories.tsx (2)
src/components/ui/Skeleton/index.ts (1)
Skeleton(1-1)src/components/ui/Skeleton/Skeleton.tsx (1)
Skeleton(25-34)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: test
🔇 Additional comments (2)
src/components/ui/Skeleton/index.ts (1)
1-1: 단순 재-export 구현 👍별다른 이슈 없이 깔끔합니다.
src/components/ui/Skeleton/Skeleton.stories.tsx (1)
39-42: 스토리 문서의 단위 설명과 실제 변환 로직 불일치설명에 “px” 라고 명시되어 있지만 실제 구현은
coerceCssRemValue로rem으로 변환됩니다. 혼란을 줄 수 있으므로 설명을 “px(내부에서 rem 으로 변환)” 등으로 명확히 해 주세요.
| export const wrapper = style({ | ||
| width: widthVar, | ||
| height: heightVar, | ||
| borderRadius: radiusVar, | ||
| backgroundColor: colors.coolNeutral[98], | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Border-radius 미전달 시 유효하지 않은 CSS가 렌더될 가능성
borderRadius: var(--radiusVar) 형태이므로, radius prop이 넘어오지 않을 때 해당 CSS 변수 자체가 정의되지 않습니다. 이 경우 border-radius: var(--radius) 가 브라우저에서 invalid value 로 판단되어 전체 규칙이 무시될 수 있습니다.
다음과 같이 기본값을 주입해 두면 안전합니다.
- borderRadius: radiusVar,
+ borderRadius: `var(${radiusVar}, 0)`,📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const wrapper = style({ | |
| width: widthVar, | |
| height: heightVar, | |
| borderRadius: radiusVar, | |
| backgroundColor: colors.coolNeutral[98], | |
| }); | |
| export const wrapper = style({ | |
| width: widthVar, | |
| height: heightVar, | |
| borderRadius: `var(${radiusVar}, 0)`, | |
| backgroundColor: colors.coolNeutral[98], | |
| }); |
🤖 Prompt for AI Agents
In src/components/ui/Skeleton/Skeleton.css.ts around lines 9 to 14, the
borderRadius style uses a CSS variable that may be undefined if the radius prop
is not provided, causing invalid CSS and potential rule ignoring by browsers.
Fix this by providing a fallback default value for borderRadius in the style
definition, ensuring the CSS variable has a valid fallback to prevent invalid
CSS rendering.
| export const Skeleton = ({ width, height, radius }: SkeletonProps) => { | ||
| const style = assignInlineVars({ | ||
| [styles.widthVar]: coerceCssRemValue(width), | ||
| [styles.heightVar]: coerceCssRemValue(height), | ||
| [styles.radiusVar]: | ||
| typeof radius === "number" ? coerceCssRemValue(radius) : radius, | ||
| }); | ||
|
|
||
| return <div className={styles.wrapper} style={style} />; | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
스크린리더 접근성 속성이 누락됨
로딩 상태를 알리기 위해 최소한 aria-busy="true" 또는 role="status" 속성을 부여해야 합니다. 시각적으로 숨긴 텍스트를 추가하는 것도 방법입니다.
-return <div className={styles.wrapper} style={style} />;
+return (
+ <div
+ className={styles.wrapper}
+ style={style}
+ role="status"
+ aria-busy="true"
+ />
+);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const Skeleton = ({ width, height, radius }: SkeletonProps) => { | |
| const style = assignInlineVars({ | |
| [styles.widthVar]: coerceCssRemValue(width), | |
| [styles.heightVar]: coerceCssRemValue(height), | |
| [styles.radiusVar]: | |
| typeof radius === "number" ? coerceCssRemValue(radius) : radius, | |
| }); | |
| return <div className={styles.wrapper} style={style} />; | |
| }; | |
| export const Skeleton = ({ width, height, radius }: SkeletonProps) => { | |
| const style = assignInlineVars({ | |
| [styles.widthVar]: coerceCssRemValue(width), | |
| [styles.heightVar]: coerceCssRemValue(height), | |
| [styles.radiusVar]: | |
| typeof radius === "number" ? coerceCssRemValue(radius) : radius, | |
| }); | |
| return ( | |
| <div | |
| className={styles.wrapper} | |
| style={style} | |
| role="status" | |
| aria-busy="true" | |
| /> | |
| ); | |
| }; |
🤖 Prompt for AI Agents
In src/components/ui/Skeleton/Skeleton.tsx around lines 25 to 34, the Skeleton
component lacks screen reader accessibility attributes. Add either
aria-busy="true" or role="status" to the div to indicate loading state to
assistive technologies. Optionally, include visually hidden text inside the div
to provide additional context for screen readers.
2 participants
✅ 이슈 번호
close #90
🪄 작업 내용 (변경 사항)
Skeleton컴포넌트 생성📸 스크린샷
💡 설명
width, height, border-radius를 props로 받아 스켈레톤을 재사용할 수 있도록 구현했습니다.
🗣️ 리뷰어에게 전달 사항
📍 트러블 슈팅
Summary by CodeRabbit