feat: API 상세페이지 기초 퍼블리싱#56
Conversation
wlrnjs
added
D-3
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이번 PR은 API 상세 페이지의 기초 퍼블리싱을 진행하고, 디자인 토큰을 프로젝트 전반에 적용하는 작업을 포함합니다. 디자인 시스템의 일관성을 유지하기 위해 Tailwind 설정을 최적화하고, 목업 데이터를 별도로 관리하여 개발 효율성을 높였습니다. 디자인 시안이 확정되지 않은 상태이므로 하드 코딩된 부분은 추후 개선할 예정입니다. Highlights
Ignored Files
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize the Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counterproductive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. API 상세 페이지가 완성되어, 데이터가 흐르고 눈이 즐거워. 디자인 토큰으로 깔끔한 옷 입고, 이제는 장애도 한눈에 보이네. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request integrates a design token system and implements the API Detail page with several new sub-components. Review feedback highlights a line-height issue in the custom Tailwind typography utilities where the line height was smaller than the font size, the presence of a debug console.warn statement, and the use of hardcoded color values instead of design tokens in the new UI components. Additionally, there is a suggestion to expand the Style Dictionary configuration to support more semantic token categories beyond just colors.
| ".text-body1-semibold": { | ||
| fontSize: "18px", | ||
| fontWeight: "600", | ||
| lineHeight: "16px", | ||
| }, | ||
| ".text-body1-medium": { | ||
| fontSize: "18px", | ||
| fontWeight: "500", | ||
| lineHeight: "16px", | ||
| }, | ||
| ".text-body1-regular": { | ||
| fontSize: "18px", | ||
| fontWeight: "400", | ||
| lineHeight: "16px", | ||
| }, |
There was a problem hiding this comment.
text-body1-* 유틸리티 클래스에서 lineHeight가 fontSize보다 작게 설정되어 있습니다 (16px vs 18px). 이 경우 텍스트 줄이 겹쳐 보일 수 있습니다. lineHeight를 fontSize보다 큰 값(예: "24px")으로 수정해야 합니다. 또한, 프로젝트 전반의 일관성을 위해 px 대신 rem 단위를 사용하는 것을 권장합니다.
| ".text-body1-semibold": { | |
| fontSize: "18px", | |
| fontWeight: "600", | |
| lineHeight: "16px", | |
| }, | |
| ".text-body1-medium": { | |
| fontSize: "18px", | |
| fontWeight: "500", | |
| lineHeight: "16px", | |
| }, | |
| ".text-body1-regular": { | |
| fontSize: "18px", | |
| fontWeight: "400", | |
| lineHeight: "16px", | |
| }, | |
| ".text-body1-semibold": { | |
| fontSize: "1.125rem", | |
| fontWeight: "600", | |
| lineHeight: "1.5rem", | |
| }, | |
| ".text-body1-medium": { | |
| fontSize: "1.125rem", | |
| fontWeight: "500", | |
| lineHeight: "1.5rem", | |
| }, | |
| ".text-body1-regular": { | |
| fontSize: "1.125rem", | |
| fontWeight: "400", | |
| lineHeight: "1.5rem", | |
| }, |
|
|
||
| const ApiDetail = () => { | ||
| const { apiId } = useParams<{ apiId: string }>(); | ||
| console.warn(apiId); |
There was a problem hiding this comment.
디버깅 목적으로 사용된 console.warn 구문이 남아있습니다. 제품 코드에 포함되지 않도록 제거하는 것이 좋습니다.
| pending: { label: "지연", color: "bg-[#FAAD14]" }, | ||
| } as const; | ||
|
|
||
| const DetailCheckLogs = () => { |
There was a problem hiding this comment.
이 컴포넌트를 포함하여 새로 추가된 API 상세 페이지 컴포넌트들 전반에 하드코딩된 색상 값들이 사용되었습니다. 디자인 시스템의 일관성을 위해 디자인 토큰으로 대체하는 것을 권장합니다. 다만, 디자인이 아직 확정되지 않은 상태라면 레이아웃 스타일과 컴포넌트 변형의 분리 등 리팩토링은 추후 작업을 위해 별도로 기록해두고 현재는 미룰 수 있습니다. 다른 컴포넌트들(DetailHeader, DetailImpactedFeatures 등)의 하드코딩된 값들도 함께 검토해 보세요.
References
- Refactoring to separate concerns (e.g., layout styles from component variants) can be deferred if the component's design is not yet finalized, but it should be tracked for future implementation.
| for (const token of dictionary.allTokens) { | ||
| const [category, ...rest] = token.path; | ||
| const key = rest.join('-'); | ||
| const key = rest.join("-"); | ||
|
|
||
| if (category === 'color') setDeep(colors, rest, token.value); | ||
| else if (category === 'font-size') fontSize[key] = token.value; | ||
| else if (category === 'font-weight') fontWeight[key] = token.value; | ||
| else if (category === 'font-family') fontFamily[key] = token.value; | ||
| else if (category === 'line-height') lineHeight[key] = token.value; | ||
| if (category === "color") setDeep(colors, rest, token.value); | ||
| else if (category === "font-size") fontSize[key] = token.value; | ||
| else if (category === "font-weight") fontWeight[key] = token.value; | ||
| else if (category === "font-family") fontFamily[key] = token.value; | ||
| else if (category === "line-height") lineHeight[key] = token.value; | ||
| else if (category === "Semantic (Color)/Mode 1") { | ||
| const [type, ...semanticRest] = rest; | ||
| if (type.startsWith("[")) { | ||
| // fill-*, fg-*, border-* | ||
| const typePrefix = type.slice(1, -1).toLowerCase(); | ||
| const semanticKey = [ | ||
| typePrefix, | ||
| ...semanticRest.map(sanitizeSegment), | ||
| ].join("-"); | ||
| if (semanticKey) colors[semanticKey] = token.value; | ||
| } else { | ||
| // Layout, Accent, Bg 등 non-bracket 타입 | ||
| const semanticKey = [type, ...semanticRest] | ||
| .map(sanitizeSegment) | ||
| .join("-"); | ||
| if (semanticKey) colors[semanticKey] = token.value; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Tailwind 프리셋을 생성하는 로직에서 Semantic (Color) 토큰은 처리하고 있지만, font-size와 같은 다른 시맨틱 토큰들은 처리하지 않고 있습니다. 이 로직을 확장하여 font-size 등 다른 시맨틱 토큰들도 Tailwind 프리셋에 포함시키면 디자인 시스템의 일관성을 더욱 높일 수 있습니다.
1 participant
Pull Request
관련 이슈
작업 내용
src/mock구조를 두어 목업 전용 데이터를 사용할 수 있도록 했습니다.참고 사항
체크리스트