[Qa] 출석 로그 페이지 디자인 및 일정 페이지 동작 수정

[yummjin]

🛠️ 변경 사항

실제로 어떤 작업을 했는지 구체적으로 작성해주세요.

• UI 수정 (Design)
• 기능 추가 (Feature)
• 버그 수정 (Bug)
• 리팩토링 (Refactor)
• 성능 개선 (Performance)
• 테스트 추가 (Chore)
• 기타:

세부 변경 내용

• 출석 로그 아이템 디자인을 변경했습니다.
• 출석 로그 스크롤을 활성화했습니다.
• 출석 로그 및 일정 홈에서 캘린더 변경시 월 단위로 정보를 패칭하도록 변경했습니다.

🔍 관련 이슈

관련 이슈를 링크해주세요. ex) close #23, related #23

• close [Qa] 출석 로그 페이지 디자인 QA 반영 #141

---

📸 스크린샷 / GIF (선택)

UI 변경이 있다면 첨부해주세요.

Before	After

---

⚠️ 주의 사항 / 리뷰 포인트

리뷰어가 특히 봐줬으면 하는 부분이나 고민했던 지점을 작성해주세요.

• ---

🔄 연관 작업

후속 작업이나 연관된 PR이 있다면 링크해주세요.

[gemini-code-assist]

Summary of Changes

Hello @yummjin, I'm Gemini Code Assist¹! 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

• 디자인 개선: 출석 로그 아이템의 디자인이 변경되었습니다.
• UI 개선: 출석 로그 페이지에서 스크롤 기능이 활성화되었습니다.
• 버그 수정 및 기능 개선: 출석 로그 및 일정 페이지에서 캘린더 변경 시 월 단위로 데이터를 패칭하도록 로직이 수정되었습니다.

🧠 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

• apps/web/src/pages/mypage/styles/MyAttendancePage.css.ts
  • statCardsContainer의 marginBottom이 20px에서 6px로 조정되었습니다.
• apps/web/src/pages/mypage/ui/MyAttendancePage.tsx
  • useCalendar 훅에서 selectedDate 대신 viewDate를 사용하도록 변경되었습니다.
  • scrollContainer 스타일이 임포트되고 ScheduleSectionLayout을 감싸는 section 태그에 적용되어 스크롤이 활성화되었습니다.
  • ScheduleCalendar 컴포넌트에 explicitViewDate 및 onChangeExplicitViewDate prop이 추가되었습니다.
• apps/web/src/pages/schedule/ui/SchedulePage.tsx
  • useEffect 훅을 사용하여 selectedDate 또는 viewDate 변경 시 searchDate를 업데이트하도록 로직이 추가되었습니다.
  • 캘린더 데이터 패칭을 위해 selectedDate 대신 viewDate를 사용하도록 yearMonth 계산이 변경되었습니다.
  • ScheduleCalendar 컴포넌트에 explicitViewDate 및 onChangeExplicitViewDate prop이 추가되었습니다.
• apps/web/src/widgets/mypage-attendance/styles/AttendanceRecordListItem.css.ts
  • itemContainer의 마지막 자식 요소에 marginBottom: '100px'가 추가되었습니다.
  • statusButton 스타일이 statusButtonBase를 기반으로 리팩토링되었으며, attendedAlt가 attendedLightning으로 변경되고 색상 및 텍스트 색상이 조정되었습니다.
• apps/web/src/widgets/mypage-attendance/ui/AttendanceRecordListItem.tsx
  • formatDate 유틸리티 함수가 임포트되었습니다.
  • 출석 상태 버튼 스타일 로직이 runType을 고려하여 attendedLightning을 반환하도록 업데이트되었습니다.
  • meetingAt 날짜 표시 형식이 M월 D일 및 HH:mm으로 변경되었습니다.
• apps/web/src/widgets/schedule-calendar/ui/ScheduleCalendar.tsx
  • Dispatch 및 SetStateAction 타입이 임포트되었습니다.
  • ScheduleCalendarProps 인터페이스에서 value 및 onChange prop이 선택 사항으로 변경되었고, explicitViewDate 및 onChangeExplicitViewDate prop이 추가되었습니다.
  • 캘린더의 월 변경 로직이 explicitViewDate 또는 내부 viewDate를 사용하여 유연하게 동작하도록 수정되었습니다.
  • Calendar 컴포넌트의 value 및 onChange prop 사용 방식이 변경된 인터페이스에 맞춰 업데이트되었습니다.

Activity

• 이 PR에는 현재까지 추가된 활동이 없습니다.

Using Gemini Code Assist

The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[github-actions]

✅ PREVIEW https://azit-front-eq22rpa8c-hjs-projects-69e9f098.vercel.app

[gemini-code-assist]

Code Review

이 PR은 출석 로그 페이지의 디자인을 개선하고, 출석 로그 및 일정 페이지에서 캘린더 동작을 수정하여 월 단위 데이터 로딩을 지원합니다. 전반적으로 의도한 기능은 잘 구현되었지만, 몇 가지 개선점을 제안합니다.
주요 피드백:

• SchedulePage에서 두 개의 useEffect가 동일한 상태를 관리하여 발생하는 잠재적 경쟁 상태 문제입니다.
• CSS 파일에서 디자인 토큰 대신 하드코딩된 '매직 넘버'가 사용된 부분이 있습니다.
• 컴포넌트에서 non-null assertion(!) 사용으로 인한 잠재적 런타임 에러 가능성이 있습니다.
• 코드 가독성 향상을 위해 중복 로직을 상수로 추출할 수 있는 부분이 있습니다.
  자세한 내용은 각 파일의 주석을 참고해주세요.

[github-actions]

✅ PREVIEW https://azit-front-9v3z1i7ul-hjs-projects-69e9f098.vercel.app