Skip to content

캘린더 컴포넌트 제작#37

Merged
Jieunsse merged 1 commit into
mainfrom
feature/calendar
Feb 7, 2026
Merged

캘린더 컴포넌트 제작#37
Jieunsse merged 1 commit into
mainfrom
feature/calendar

Conversation

@HWAN0218

@HWAN0218 HWAN0218 commented Feb 6, 2026

Copy link
Copy Markdown
Contributor

Summary

스크린샷 2026-02-06 오후 9 03 17
  • 캘린더 및 시간 선택 컴포넌트 구현

Issue

Scope

  • 포함

    • 변경한 내용
  • 특이사항

@HWAN0218 HWAN0218 added this to the 컴포넌트 milestone Feb 6, 2026
@HWAN0218 HWAN0218 requested review from a team, Jieunsse, jungwon123 and yooolleee February 6, 2026 12:02
@HWAN0218 HWAN0218 self-assigned this Feb 6, 2026
@HWAN0218 HWAN0218 added the 기능추가 기능개발 및 추가할 때 사용해주세요. label Feb 6, 2026
@HWAN0218 HWAN0218 added this to workers Feb 6, 2026
@github-project-automation github-project-automation Bot moved this to 개발 대기중 in workers Feb 6, 2026
@gemini-code-assist

Copy link
Copy Markdown
Contributor

Summary of Changes

Hello @HWAN0218, 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은 날짜 및 시간 선택 기능을 제공하기 위한 캘린더 컴포넌트와 시간 선택 컴포넌트를 새롭게 추가합니다. react-calendar 라이브러리를 활용하여 날짜 선택 기능을 구현하고, 사용자 정의 CSS를 통해 UI를 커스터마이징했습니다. 또한, 오전/오후 선택과 시간 간격 조절이 가능한 시간 선택 컴포넌트도 함께 도입하여, 애플리케이션 내에서 유연한 날짜 및 시간 입력 환경을 구축합니다.

Highlights

  • 새로운 캘린더 라이브러리 추가: react-calendar 라이브러리가 프로젝트 의존성에 추가되었습니다.
  • 날짜 선택 컴포넌트 개발: 날짜를 선택할 수 있는 Calendar React 컴포넌트가 새로 개발되었습니다.
  • 시간 선택 컴포넌트 개발: 오전/오후 선택 및 시간 목록을 제공하는 CalendarTime React 컴포넌트가 새로 개발되었습니다.
  • 종속성 잠금 파일 업데이트: 새로운 라이브러리 추가에 따라 pnpm-lock.yaml 파일이 업데이트되었습니다.

🧠 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
  • package.json
    • react-calendar 라이브러리(버전 ^6.0.0)가 의존성에 추가되었습니다.
  • pnpm-lock.yaml
    • react-calendar 및 관련 종속성(@wojtekmaj/date-utils, get-user-locale, memoize, warning) 추가로 인해 잠금 파일이 업데이트되었습니다.
    • 다양한 @img/sharp@next/swc 패키지에 libc 필드가 추가되었습니다.
  • src/components/calendar/Calendar.module.css
    • react-calendar 컴포넌트의 시각적 스타일을 정의하는 새로운 CSS 모듈 파일이 추가되었습니다. 여기에는 캘린더의 레이아웃, 색상, 폰트 크기 및 네비게이션 버튼 스타일 등이 포함됩니다.
  • src/components/calendar/Calendar.tsx
    • react-calendar 라이브러리를 기반으로 하는 새로운 Calendar React 컴포넌트가 추가되었습니다. 이 컴포넌트는 날짜 선택 기능을 제공하며, inputValueinputYear를 통해 날짜를 파싱하고 YYYYMMDD 형식으로 포맷하는 유틸리티 함수를 포함합니다.
  • src/components/calendar/index.ts
    • Calendar 컴포넌트와 관련 타입(CalendarProps, CalendarValue)을 내보내는 인덱스 파일이 추가되었습니다.
  • src/components/calendar/time/CalendarTime.module.css
    • CalendarTime 컴포넌트의 시각적 스타일을 정의하는 새로운 CSS 모듈 파일이 추가되었습니다. 여기에는 오전/오후 버튼, 시간 목록 및 스크롤바 스타일 등이 포함됩니다.
  • src/components/calendar/time/CalendarTime.tsx
    • 오전/오후 선택 기능과 시간 목록을 제공하는 새로운 CalendarTime React 컴포넌트가 추가되었습니다. 이 컴포넌트는 다양한 형식의 시간 문자열을 파싱하고, 12시간/24시간 형식으로 변환하며, 시간 간격(stepMinutes)을 설정할 수 있는 기능을 제공합니다.
  • src/components/calendar/time/index.ts
    • CalendarTime 컴포넌트와 관련 타입(CalendarTimeProps)을 내보내는 인덱스 파일이 추가되었습니다.
Activity
  • 이 PR은 HWAN0218 님에 의해 생성되었으며, 현재까지 추가적인 리뷰 활동이나 코멘트는 없습니다.
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.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

안녕하세요. 캘린더 컴포넌트 추가에 대한 PR 리뷰입니다. 전반적으로 react-calendar를 잘 감싸서 커스텀 캘린더와 타임 피커 컴포넌트를 구현하셨습니다. 특히 타임 피커의 경우 다양한 입력 형식을 처리하는 등 견고하게 작성된 점이 인상적입니다. 코드 가독성 및 유지보수성 향상을 위해 몇 가지 개선점을 제안드렸으니 확인 부탁드립니다.

Comment on lines +172 to +188
/* 년/월 타이틀: 500 */
:global(.react-calendar__navigation__label) {
font-weight: 500;
font-size: 14px;
}

/* 요일(일 월 화 수 목 금 토): 500 */
:global(.react-calendar__month-view__weekdays) {
font-weight: 500;
font-size: 14px;
}

/* 날짜 숫자: 400 */
:global(.react-calendar__tile) {
font-weight: 400;
font-size: 14px;
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

이 파일의 여러 선택자에 대한 스타일 규칙이 중복으로 정의되어 있습니다. 가독성과 유지보수성을 위해 각 선택자에 대한 스타일을 하나의 규칙으로 통합하는 것이 좋습니다.

  • :global(.react-calendar__navigation__label) (55행, 173행)
  • :global(.react-calendar__month-view__weekdays) (65행, 179행)
  • :global(.react-calendar__tile) (93행, 185행)

각각의 경우, 나중에 나오는 규칙의 font-weightfont-size를 앞서 나오는 규칙에 병합하고 이 블록(172-188행)과 같은 중복된 규칙은 제거하는 것을 권장합니다.

}: CalendarProps) {
const [internalValue, setInternalValue] = useState<Date>(() => {
const initial = parseInputDate(inputValue, inputYear);
return (value ?? initial ?? new Date()) as Date;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

useState의 초기값으로 사용된 value ?? initial ?? new Date() 표현식은 항상 Date 객체를 반환합니다. 따라서 as Date 타입 단언은 불필요하며, 제거해도 타입 추론에 문제가 없습니다.

Suggested change
return (value ?? initial ?? new Date()) as Date;
return (value ?? initial ?? new Date());

@HWAN0218 HWAN0218 moved this from 개발 대기중 to 개발 진행중 in workers Feb 6, 2026
@HWAN0218 HWAN0218 moved this from 개발 진행중 to PR 리뷰중 in workers Feb 6, 2026
@Jieunsse Jieunsse merged commit 278c345 into main Feb 7, 2026
1 check passed
@github-project-automation github-project-automation Bot moved this from PR 리뷰중 to 개발 완료 in workers Feb 7, 2026
@HWAN0218 HWAN0218 deleted the feature/calendar branch February 10, 2026 07:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

기능추가 기능개발 및 추가할 때 사용해주세요.

Projects

Status: 개발 완료

Development

Successfully merging this pull request may close these issues.

2 participants