브라우저 기본 UI 제거 및 커스텀 날짜·시간 선택 도입 - #3
Conversation
브라우저 기본 date 입력 UI가 OS/브라우저마다 다르게 보이는 문제를 해결하기 위해 공용 DatePicker 컴포넌트를 추가했습니다. 값 인터페이스는 기존 input과 동일하게 YYYY-MM-DD 문자열을 유지해 호출부 변경을 최소화했습니다. 월 그리드 계산은 기존 useCalendar 훅을 재사용하고, 요일 색상은 공용 색상 상수를 따르도록 했습니다. YYYY-MM-DD 문자열을 로컬 자정 Date로 변환하는 parseYmd 유틸을 추가했습니다.
태스크 모달의 날짜 필드와 루틴 모달의 시작·변경 적용·종료 날짜 필드를 공용 DatePicker로 교체했습니다. 루틴 날짜 필드는 기존 min 제약을 DatePicker의 min prop으로 그대로 옮겨 선택 불가 날짜를 비활성 처리합니다.
날짜 선택 모달이 toISOString과 new Date로 값을 변환해 UTC 기준으로 해석되면서 KST에서 날짜가 하루 밀리는 문제가 있었습니다. 로컬 기준 formatDateToYmd와 parseYmd를 사용하도록 변경하고, 날짜 입력을 공용 DatePicker로 교체했습니다.
태스크 모달의 시간 필드만 브라우저 기본 UI로 남아 있어 같은 모달 안에서 날짜와 시간의 모양이 달라지는 문제가 있었습니다. 오전·오후, 시, 분을 각각 선택하는 공용 TimePicker를 추가하고 시간 필드를 교체했습니다. 값 인터페이스는 기존 input과 동일하게 HH:MM 24시간 문자열을 유지합니다. 표시 문자열이 편집 상태와 읽기 전용 상태에서 서로 달랐던 문제를 해결하기 위해 formatYmdLabel과 formatHmLabel을 공용 유틸로 추가하고 양쪽에서 함께 사용하도록 했습니다.
태스크 화면 전용으로 있던 확인 모달을 다른 화면에서도 재사용할 수 있도록 shared/ui로 옮겼습니다. 컴포넌트 구현은 그대로 두고 경로와 참조만 변경했습니다.
alert과 confirm은 OS 기본 팝업이라 앱 디자인과 어긋나고, 이미 사용 중인 toast와 스타일이 갈리는 문제가 있었습니다. 로그인 실패, 로그아웃 실패, 회원탈퇴 결과, 관리자 권한 없음 알림을 모두 toast로 통일했습니다. 회원탈퇴 확인은 브라우저 confirm 대신 공용 ConfirmModal을 사용하도록 변경했습니다.
공지 모달의 textarea에 남아 있던 브라우저 기본 리사이즈 핸들과 포커스 외곽선을 제거했습니다. 상단 고정 체크박스를 앱 전반에서 사용 중인 react-icons 체크박스로 교체해 OS 기본 컨트롤을 없앴습니다.
팝오버가 모달 내부에 absolute로 배치되어 있어 화면 아래쪽에서 열면 잘리고, 모달이 스크롤되지 않아 가려진 부분을 볼 수 없는 문제가 있었습니다. 팝오버를 body 포털로 옮기고 뷰포트 좌표에 배치하는 usePopoverPosition 훅을 추가했습니다. 아래 공간이 부족하면 트리거 위로 뒤집고, 좌우로 넘칠 경우 화면 안으로 밀어 넣으며, 스크롤과 리사이즈에도 위치를 따라가도록 했습니다. 팝오버가 모달 바깥 요소가 되면서 팝오버 내부 클릭이 모달 배경 클릭으로 전파되던 문제도 함께 해결됩니다.
|
Caution The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased. |
|
To use Codex here, create a Codex account and connect to github. |
This comment was marked as resolved.
This comment was marked as resolved.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c7d9f4fb1c
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
@codex review 한국어로 코드 리뷰를 진행해주세요. 다음 기준을 우선적으로 검토해주세요.
단순 스타일 취향은 제외하고, |
|
Codex Review: Didn't find any major issues. Delightful! Reviewed commit: ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
1 participant
배경
날짜 입력이 브라우저 기본
<input type="date">라 OS·브라우저마다 다르게 보이고, 앱 디자인과 이질감이 있었습니다. 관련해서 남아 있던 브라우저 기본 UI를 전수 조사해 함께 정리했습니다.변경 사항
커스텀 날짜·시간 선택 도입
날짜 선택
시간 선택
DatePicker추가 — 네이티브 date input 5곳 전부 교체 (태스크 날짜, 태스크 이동·복사, 루틴 시작일·변경 적용일·종료일)TimePicker추가 — 태스크 시간 필드 교체. 오전·오후 / 시 / 5분 단위 분 선택YYYY-MM-DD,HH:MM)해 호출부 로직 변경 없음useCalendar훅 재사용, 요일 색상은 공용 색상 상수 사용브라우저 기본 UI 제거
alert()5곳 →toast(이미 쓰던 react-toastify로 통일)confirm()→ 공용ConfirmModal(danger 모드)ConfirmModal을TaskReport/modals→shared/ui로 이동해 재사용 가능하게 변경버그 수정
toISOString()과new Date(문자열)이 UTC 기준으로 해석되어 KST에서 어긋났습니다. 로컬 기준formatDateToYmd/parseYmd로 교체2026-08-02/15:30→2026. 08. 02./오후 3:30으로 통일)팝오버 위치 처리
리뷰 중 발견해 함께 수정했습니다.
absolute라 화면 아래쪽에서 열면 잘리고 스크롤도 불가능했습니다usePopoverPosition)로 변경