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.

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

[FEAT] 이전 달의 미션 캘린더 정보를 볼 수 있다. #469

Merged
merged 8 commits into from
Feb 5, 2024

Conversation

wade3420
Copy link
Collaborator

@wade3420 wade3420 commented Feb 4, 2024

🤔 해결하려는 문제가 무엇인가요?

closed #468

🎉 변경 사항

  • useCalendar 훅 구현
  • query params 상태를 set 과 get할수 있는 useQueryParams 훅 구현

🙏 여기는 꼭 봐주세요!

  • 친구 미션 상세 와 내 미션 상세 페이지 캘린더에서 이전 달을 볼 수 있게 변경하였습니다.

사용 방법

🌄 스크린샷

2024-02-05.1.21.24.mov

📚 참고

피그마 : https://www.figma.com/file/waOSgkTYJKQdMHXnGPlOum/%5BDEV%5D-Design-Guide?type=design&node-id=4467-55942&mode=design&t=bxPzMOxk49mU79Eu-11

관련 슬랙 : https://depromeet14th.slack.com/archives/C0647U2UG05/p1707054903589829

Copy link

vercel bot commented Feb 4, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
10mm-client-web ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 5, 2024 9:47am

Copy link
Contributor

github-actions bot commented Feb 4, 2024

Copy link
Member

@sumi-0011 sumi-0011 left a comment

Choose a reason for hiding this comment

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

수고하셨습니다!

Comment on lines 12 to 14
const { queryParams, setQueryParams } = useQueryParams({ queryKey: 'date' });
const [date, setDate] = useState(queryParams ? dayjs(queryParams) : currentData);
const { monthCalendarData } = getCalenderInfo(date.month() + 1, date.year());
Copy link
Member

Choose a reason for hiding this comment

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

👍

Comment on lines 3 to 13
/**
* useQueryParams hook - query params를 다루기 위한 hook
* UI 상태를 query params로 관리하기 위한 hook
* @param queryKey
*/
const useQueryParams = <T extends string>({ queryKey }: { queryKey: T }) => {
const searchParams = useSearchParams();
const router = useRouter();
const pathname = usePathname();
const queryParams = searchParams.get(queryKey) as string | undefined;

Copy link
Member

Choose a reason for hiding this comment

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

👍

Copy link
Member

Choose a reason for hiding this comment

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

queryparam 이라는 네이밍을 보고 처음에는 react-query에 관련된 로직이라고 생각했었던거같아요 🤔

Copy link
Collaborator Author

@wade3420 wade3420 Feb 5, 2024

Choose a reason for hiding this comment

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

useSearchParamState 로 변경할게요

@wade3420 wade3420 merged commit ab449d5 into develop Feb 5, 2024
3 checks passed
@wade3420 wade3420 deleted the feat/mission-detail-calender branch February 5, 2024 09:47
Copy link
Contributor

github-actions bot commented Feb 5, 2024

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Task] 이전 달의 미션 캘린더 정보를 볼 수 있다.
2 participants