댓글 내역 컴포넌트 구현#30
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}
| profileImage={ | ||
| <div style={{ width: 32, height: 32, borderRadius: 12, background: '#cbd5e1' }} /> | ||
| } | ||
| icon={<span style={{ fontSize: 16, cursor: 'pointer' }}>⋮</span>} |
There was a problem hiding this comment.
Overview 스토리에서 icon 슬롯에 <span> 태그를 사용하고 cursor: 'pointer' 스타일을 적용했습니다. 이는 시각적으로는 클릭 가능한 요소처럼 보이지만, 스크린 리더 사용자에게는 버튼으로 인식되지 않아 접근성 문제가 발생할 수 있습니다. 상호작용이 필요한 요소는 <button> 태그를 사용하는 것이 좋습니다.
<button type="button" onClick={fn()} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontSize: 16 }}>⋮</button>
There was a problem hiding this comment.
span으로 자리만 잡아둔 것이라 아이콘 주입하여 사용하면 됩니다.
| <span style={{ fontSize: 12, color: '#64748b', cursor: 'pointer' }}>취소</span> | ||
| <span style={{ fontSize: 12, color: '#3b82f6', cursor: 'pointer' }}>수정하기</span> |
There was a problem hiding this comment.
Overview 스토리의 actions 슬롯에서도 <span> 태그를 사용하여 '취소' 및 '수정하기' 버튼을 구현했습니다. 이 또한 접근성 문제를 야기할 수 있으므로, 상호작용이 필요한 요소에는 <button> 태그를 사용하는 것이 적절합니다.
<button
type="button"
onClick={fn()}
style={{
background: 'none',
border: 'none',
cursor: 'pointer',
fontSize: 12,
color: '#64748b',
}}
>
취소
</button>
<button
type="button"
onClick={fn()}
style={{
background: 'none',
border: 'none',
cursor: 'pointer',
fontSize: 12,
color: '#3b82f6',
}}
>
수정하기
</button>
There was a problem hiding this comment.
span으로 자리만 잡아둔 것이라 버튼 주입하여 사용하면 됩니다.
| return ( | ||
| <article className={styles.card}> | ||
| {profileImage && ( | ||
| <div className={styles.avatar} aria-hidden="true"> |
There was a problem hiding this comment.
profileImage를 감싸는 div에 aria-hidden="true"가 설정되어 있습니다. 만약 profileImage가 사용자 프로필 사진과 같이 의미 있는 정보를 전달하는 이미지라면, 스크린 리더 사용자에게 해당 정보가 전달되지 않을 수 있습니다. 이 이미지가 순전히 장식적인 목적이 아니라면 aria-hidden 속성을 제거하고, profileImage로 전달되는 <img> 태그에 적절한 alt 속성을 포함하도록 안내하는 것이 좋습니다.
| <div className={styles.avatar} aria-hidden="true"> | |
| <div className={styles.avatar}> |
| /** 화면에 표시할 날짜 텍스트 (예: "2024년 7월 29일") */ | ||
| date: string; | ||
| /** `<time>` 태그의 datetime 속성값 (예: "2024-07-29") */ | ||
| dateTime?: string; |
There was a problem hiding this comment.
date prop이 항상 표시되는 반면, dateTime prop은 선택 사항입니다. <time> 태그의 datetime 속성은 날짜/시간 정보를 기계가 읽을 수 있는 형식으로 제공하여 접근성과 검색 엔진 최적화에 도움을 줍니다. date가 제공될 때 dateTime도 함께 제공되도록 하여 시맨틱 HTML을 강화하는 것을 권장합니다. 이렇게 변경하면 CommentCard.stories.tsx에서도 dateTime을 필수로 제공해야 합니다.
| dateTime?: string; | |
| dateTime: string; |
| gap: 12px; | ||
| } | ||
|
|
||
| .avatar { |
There was a problem hiding this comment.
avatar 클래스의 크기가 @media (max-width: 375px) 조건에서만 24px로 명시되어 있습니다. 더 큰 화면에서는 avatar div 자체의 크기가 명시적으로 설정되어 있지 않아, profileImage로 전달되는 요소의 크기에 따라 레이아웃이 달라질 수 있습니다. 일관된 아바타 크기 관리를 위해 기본 avatar 스타일에 크기를 정의하고, 필요한 경우 미디어 쿼리에서 재정의하는 것이 좋습니다. Storybook의 기본 플레이스홀더 크기(32px)와 일치시키는 것을 고려해볼 수 있습니다.
.avatar {
width: 32px;
height: 32px;
4 participants
Summary
댓글 입력창과 다른 댓글 내역을 보기위한 컴포넌트 입니다.
Issue
Scope
케밥 아이콘 추가 하였습니다.