뱃지 컴포넌트 구현#25
Conversation
Summary of ChangesHello @jungwon123, 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은 애플리케이션의 다양한 상태를 시각적으로 표현하기 위한 새로운 Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
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 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 counter productive. 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. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
| return ( | ||
| <span | ||
| className={clsx(styles.badge, styles[size], styles[state])} | ||
| role="img" |
There was a problem hiding this comment.
role="img"는 시각적인 그림 콘텐츠에 사용하는 것이 적합합니다. 뱃지는 상태를 나타내는 정보이므로, role="status"를 사용하는 것이 시맨틱적으로 더 올바른 표현입니다. 스크린리더 사용자에게 더 명확한 의미를 전달할 수 있습니다.
| role="img" | |
| role="status" |
| import type { BadgeState } from '../types/types'; | ||
|
|
||
| import stateDoneLarge from '@/assets/icons/state/stateDoneLarge.svg'; | ||
| import stateDoneSmall from '@/assets/icons/state/stateDoneSmall.svg'; | ||
| import stateOngoingLarge from '@/assets/icons/state/stateOngoingLarge.svg'; | ||
| import stateOngoingSmall from '@/assets/icons/state/stateOngoingSmall.svg'; | ||
| import stateEmptyLarge from '@/assets/icons/state/stateEmptyLarge.svg'; | ||
| import stateEmptySmall from '@/assets/icons/state/stateEmptySmall.svg'; | ||
|
|
||
| export const BADGE_STATE_LABEL: Record<BadgeState, string> = { | ||
| done: '완료', | ||
| ongoing: '진행 중', | ||
| empty: '시작 전', | ||
| } as const; | ||
|
|
||
| export const BADGE_STYLE = { | ||
| icons: { | ||
| done: { large: stateDoneLarge, small: stateDoneSmall }, | ||
| ongoing: { large: stateOngoingLarge, small: stateOngoingSmall }, | ||
| empty: { large: stateEmptyLarge, small: stateEmptySmall }, | ||
| }, | ||
| iconSize: { large: 20, small: 16 }, | ||
| } as const; |
There was a problem hiding this comment.
BADGE_STYLE 상수에 명시적인 타입을 지정하여 유지보수성을 향상시키는 것이 좋습니다. BadgeState나 BadgeSize에 새로운 값이 추가될 경우, BADGE_STYLE 객체도 함께 수정해야 함을 타입스크립트 컴파일러가 강제해줘서 실수를 방지할 수 있습니다.
StaticImageData 타입을 사용하기 위해 next/image에서 임포트하고, BadgeSize 타입도 임포트하도록 수정했습니다.
import type { StaticImageData } from 'next/image';
import type { BadgeState, BadgeSize } from '../types/types';
import stateDoneLarge from '@/assets/icons/state/stateDoneLarge.svg';
import stateDoneSmall from '@/assets/icons/state/stateDoneSmall.svg';
import stateOngoingLarge from '@/assets/icons/state/stateOngoingLarge.svg';
import stateOngoingSmall from '@/assets/icons/state/stateOngoingSmall.svg';
import stateEmptyLarge from '@/assets/icons/state/stateEmptyLarge.svg';
import stateEmptySmall from '@/assets/icons/state/stateEmptySmall.svg';
export const BADGE_STATE_LABEL: Record<BadgeState, string> = {
done: '완료',
ongoing: '진행 중',
empty: '시작 전',
} as const;
type BadgeStyle = {
icons: Record<BadgeState, Record<BadgeSize, StaticImageData>>;
iconSize: Record<BadgeSize, number>;
};
export const BADGE_STYLE: BadgeStyle = {
icons: {
done: { large: stateDoneLarge, small: stateDoneSmall },
ongoing: { large: stateOngoingLarge, small: stateOngoingSmall },
empty: { large: stateEmptyLarge, small: stateEmptySmall },
},
iconSize: { large: 20, small: 16 },
} as const;
3 participants
Summary
Issue
Closes 뱃지 컴포넌트 개발 #14
특이사항
피그마 아이콘 모음에는 없지만 컴포넌트 피그마 사용화면에는 아이콘이 있습니다. 이 부분은 피그마 설계 잘못인거같습니다.
그리하여 상태 없음을 나타내는 0/0일때 아이콘을 작은버전 , 큰버전으로 추가했습니다.