Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feat/#61] time picker 공통 컴포넌트 추가 #73

Merged
merged 9 commits into from
Jul 10, 2024
Merged

[Feat/#61] time picker 공통 컴포넌트 추가 #73

merged 9 commits into from
Jul 10, 2024

Conversation

imddoy
Copy link
Contributor

@imddoy imddoy commented Jul 9, 2024

📌 관련 이슈번호

🎟️ PR 유형

어떤 변경 사항이 있나요?

  • 새 기능 추가
  • 버그 수정
  • CSS 등 사용자 UI 디자인 변경
  • 리팩토링

✅ Key Changes

이번 PR에서 작업한 내용을 간략히 설명해주세요

  1. 타임피커 일단 올려봅니다...

📢 To Reviewers

  • 우웅 한다고 했는데 못생긴건 비밀...~ 날짜 데이터 잘 저장되는거 확인했습니다.
  • 스토리 과감하게 버렷어요...

📸 스크린샷

image 아니 사실 콘솔에 계속 못생기게 떠서 저거 고치느라 낑낑댔는데 저 객체가 "2024-07-11T03:30:00.000Z" 걍 똑같더라구요....우웅...~ 그랬다

🔗 참고 자료

https://stackoverflow.com/questions/75043733/styling-the-datepicker-from-mui
https://velog.io/@kangactor123/mui-v5-custom
https://mui.com/x/api/date-pickers/desktop-time-picker/
https://mui.com/x/api/date-pickers/desktop-time-picker/

@github-actions GitHub Actions
Copy link

github-actions bot commented Jul 9, 2024

PR 작성하느라 고생 많았어요!! 라벨 잘 지정되었는지 확인 한 번 해 주기 🫶

@github-actions github-actions bot added 🚀 API API ✨ FEAT 기능 구현 labels Jul 9, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Jul 9, 2024

🚀storybook: https://6687a84e56a8d673624b5d25-hwqcupcbjs.chromatic.com/

@sinji2102 sinji2102 removed the 🚀 API API label Jul 9, 2024
sinji2102
sinji2102 approved these changes Jul 10, 2024
View reviewed changes
Copy link
Contributor

@sinji2102 sinji2102 left a comment

Choose a reason for hiding this comment

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

엄청난 TimePicker 파일,,,,,,,,,,, 고생 많았어욥 진짜 옆에서 보는데 너무 노가다라 보는 사람이 안쓰러웠을 정도............... 고생햇어요 🫶

src/App.tsx Outdated
<RouterProvider router={router} />
<Alert />
<Confirm />
<LocalizationProvider dateAdapter={AdapterDayjs}>
Copy link
Contributor

Choose a reason for hiding this comment

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

p5) 드디어 제 자리를 찾아갔네요,,,,,,,,

src/pages/test/TestPage.tsx Outdated
Copy link
Contributor

Choose a reason for hiding this comment

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

p4) 이렇게 테스트 페이지에 계속 쌓으면 보기 힘드니까 새로운 테스트 페이지 임시로 생성하는 건 어떠신가요??

Copy link
Contributor Author

Choose a reason for hiding this comment

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

저 이제 뷰 만들려구요... 추가해서 수정하겠습니당!!

sinji2102
sinji2102 approved these changes Jul 10, 2024
View reviewed changes
src/components/commons/timepicker/TimePicker.tsx Outdated
import { PickersDay } from "@mui/x-date-pickers/PickersDay";
import * as S from "./TimePicker.styled";
import { useState } from "react";
import dayjs, { Dayjs } from "dayjs";
Copy link
Contributor

Choose a reason for hiding this comment

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

p4) dayjs 친구는 사용하지 않는 것 같은데 지우는 게 어떨까요??

Copy link
Member

Choose a reason for hiding this comment

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

p5) 네 지워주세용 ~

Copy link
Contributor Author

Choose a reason for hiding this comment

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

지웠습니다!

src/components/commons/timepicker/TimePicker.tsx Outdated
}
};
return (
<>
Copy link
Contributor

Choose a reason for hiding this comment

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

p4) S.CustomPicker가 다 감싸고 있어 빈 태그는 굳이 필요하지 않을 것 같아요!

pepperdad
pepperdad approved these changes Jul 10, 2024
View reviewed changes
Copy link
Member

@pepperdad pepperdad left a comment

Choose a reason for hiding this comment

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

고생했어 ~
코멘트 확인하고 머지해줘!

src/App.tsx
Copy link
Member

Choose a reason for hiding this comment

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

p4) 아래 링크 확인하고 dark Theme으로 바꿔줘!
https://jiwoothejay.notion.site/MUI-Theme-Dark-ed9fb67b922d488eb150d7ae82c23bad?pvs=25

src/components/commons/timepicker/TimePicker.tsx Outdated
import { PickersDay } from "@mui/x-date-pickers/PickersDay";
import * as S from "./TimePicker.styled";
import { useState } from "react";
import dayjs, { Dayjs } from "dayjs";
Copy link
Member

Choose a reason for hiding this comment

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

p5) 네 지워주세용 ~

src/components/commons/timepicker/TimePicker.tsx
}));

const TimePicker = ({ value, onChangeValue }: TimePickerProps) => {
const [open, setOpen] = useState(false);
Copy link
Member

Choose a reason for hiding this comment

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

p5) 이 상태는 어떻게 사용되는 걸까요?

Copy link
Contributor Author

@imddoy imddoy Jul 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

image image image
오픈피커(캘린더 svg)가 popper가 open이 되면 하얀색 close면 회색이어야 해서 스타일컴포넌트에 props로 전달해서 스타일링 주었습니다!!

@sonarqubecloud SonarQubeCloud
Copy link

Quality Gate Passed Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

@github-actions GitHub Actions
Copy link

🚀storybook: https://6687a84e56a8d673624b5d25-gvpxhtvnpn.chromatic.com/

ocahs9
ocahs9 approved these changes Jul 10, 2024
View reviewed changes
Copy link
Contributor

@ocahs9 ocahs9 left a comment

Choose a reason for hiding this comment

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

진짜 노가다네요.. 코드 자체를 슥 훑어봤는데 딱히 할 말 없습니다..
타임 피커.. 쉽지 않아보이는데 고생 많으셨어요~..

@pepperdad
Copy link
Member

TODO: 배포 상태에서 시간 선택 색상 이상함 -> 배포 상태에서 테스트

@imddoy imddoy merged commit 0e861d7 into develop Jul 10, 2024
4 of 5 checks passed
@sinji2102 sinji2102 deleted the feat/#61/TimePicker branch December 16, 2024 10:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@pepperdad pepperdad pepperdad approved these changes

@sinji2102 sinji2102 sinji2102 approved these changes

@ocahs9 ocahs9 ocahs9 approved these changes

Assignees

@imddoy imddoy

Labels
✨ FEAT 기능 구현
Projects
🌱beat-board
Status: 🎉Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[ Feat ] Time Picker 공통 컴포넌트 추가
4 participants
@imddoy @pepperdad @sinji2102 @ocahs9