모달 캘린더 구현#44
Conversation
Summary of ChangesHello @Jieunsse, 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}
| startDate, | ||
| startTime, | ||
| repeatType, | ||
| repeatDays: isWeekdaySelectorVisible ? repeatDays : [], |
There was a problem hiding this comment.
isWeekdaySelectorVisible에 의존하여 repeatDays를 전송하는 로직에 버그가 있을 수 있습니다. isWeekdaySelectorVisible는 activePicker의 상태에 따라 false가 될 수 있는데, 이 경우 repeatType이 'weekly' 또는 'monthly'여도 repeatDays가 빈 배열로 전송됩니다. 예를 들어, 할 일 제목 입력 필드에서 Enter 키를 눌러 폼을 제출할 때 날짜나 시간 선택기가 열려있다면(activePicker !== 'none') 문제가 발생합니다. repeatType에 직접 의존하도록 수정하는 것이 좋습니다. isWeekdayRepeatType 유틸리티 함수를 utils/CalenderModal.utils에서 가져와 사용해주세요.
| repeatDays: isWeekdaySelectorVisible ? repeatDays : [], | |
| repeatDays: isWeekdayRepeatType(repeatType) ? repeatDays : [], |
| section > .modalContent { | ||
| width: 384px; | ||
| height: 664px; | ||
| display: inline-flex; | ||
| padding: 0 16px 32px 16px; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 10px; | ||
| border-radius: 24px; | ||
| background: var(--Background-Primary, #fff); | ||
| box-shadow: 4px 4px 10px 0 rgba(36, 36, 36, 0.25); | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| section > .modalContentDateOpen { | ||
| height: 930px; | ||
| } | ||
|
|
||
| section > .modalContentTimeOpen { | ||
| height: 848px; | ||
| } | ||
|
|
||
| section > .modalContentWeekdayOpen { | ||
| height: 759px; | ||
| } |
There was a problem hiding this comment.
CSS 선택자에서 section > 부분은 Modal 컴포넌트의 내부 구현(오버레이를 <section>으로 렌더링)에 의존하게 되어 유지보수성을 저해할 수 있습니다. 만약 Modal 컴포넌트가 <div>를 사용하도록 리팩토링되면 이 스타일이 적용되지 않을 수 있습니다. 클래스 이름만으로도 충분히 구체적이므로 태그 이름 선택자 section을 제거하여 컴포넌트 간의 결합도를 낮추는 것이 좋습니다. 이 변경은 215라인의 @media 쿼리 내 선택자에도 동일하게 적용되어야 합니다.
.modalContent {
width: 384px;
height: 664px;
display: inline-flex;
padding: 0 16px 32px 16px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 24px;
background: var(--Background-Primary, #fff);
box-shadow: 4px 4px 10px 0 rgba(36, 36, 36, 0.25);
box-sizing: border-box;
}
.modalContentDateOpen {
height: 930px;
}
.modalContentTimeOpen {
height: 848px;
}
.modalContentWeekdayOpen {
height: 759px;
}| <section className={styles.fieldGroup}> | ||
| <p className={styles.label}>{textOptions.startDateTimeLabel}</p> |
There was a problem hiding this comment.
접근성 향상을 위해 여러 관련된 컨트롤을 그룹화할 때 <section>과 <p> 대신 <fieldset>과 <legend>를 사용하는 것이 좋습니다. <legend>는 fieldset의 자식 컨트롤 그룹에 대한 캡션을 제공하여 스크린 리더 사용자에게 더 명확한 컨텍스트를 제공합니다. 이 패턴을 repeatSettingLabel과 repeatWeekdayLabel을 사용하는 다른 그룹들에도 적용하는 것을 권장합니다. 각 그룹의 닫는 태그도 </section>에서 </fieldset>로 변경해야 합니다.
| <section className={styles.fieldGroup}> | |
| <p className={styles.label}>{textOptions.startDateTimeLabel}</p> | |
| <fieldset className={styles.fieldGroup}> | |
| <legend className={styles.label}>{textOptions.startDateTimeLabel}</legend> |
2 participants
Summary
Issue
Scope
디자인 변경 및 애니메이션 적용을 고려한 리팩토링을 진행하고 있습니다.