Feat: 일정 찾기 페이지 카드, 필터링 로직 추가 by pepperdad · Pull Request #51 · Project-Catcher/catcher-web

pepperdad · 2023-11-24T16:21:19Z

구현 사항

일정 찾기 페이지

일정 찾기 카드, 키워드, 정렬 UI 추가
필터별 필터링 로직 추가, 키워드 검색 로직 추가
헤더 라우팅 url 수정, z-index 수정

테스트

http://localhost:3000/find-schedule

TODO

지역 필터 구현
정렬 로직 구현

추가사항

msw 이용해서 SSR로 카드데이터 불러오게 구현했습니다. SSR을 처음 사용해봐서, 혹시 로직에 이상있으면 말씀해주시면 감사하겠습니다.
필터 부분은 백에서 API 받아올 것이기 때문에, 전부 구현하지는 않았습니다. 좌측의 테마, 기간, 예상 경비, 인원 필터는 모두 동작하나, 키워드를 통한 필터링은 제목, 내용 부분만 가능하게 해두었습니다.
msw import 이슈 때문에, 헤더 라우팅 url을 조금 수정해두었습니다.
- 일정 찾기 클릭 시, /find-schedule
- 내 일정 클릭 시, /schedule 으로 라우팅 됩니다.

Choi-Jinwook

고생하셨습니다!! 코멘트 한 번 확인 부탁드릴게요!!
참고해서 저도 msw 사용해보도록 하겠습니다ㅎㅎ 감사합니다 :D

Choi-Jinwook

LGTM :)

into feat/find-schedule-content ; Conflicts: ; src/mock/browser.ts ; src/shared/utils/index.ts

github-actions · 2023-12-08T15:57:27Z

+  const days = nights + 1;
+  if (nights === 0) return "(당일)";
+  return `(${nights}박 ${days}일)`;
+};


아래 코드 패치에 대한 간단한 코드 리뷰를 도와드리겠습니다. 버그 위험 및 개선 제안에 대한 피드백을 드리겠습니다:

const startDate = new Date(start);와 const endDate = new Date(end);는 start와 end를 Date 객체로 변환하는 데 사용됩니다. 하지만 이러한 변환 작업은 예외 처리가 필요할 수 있습니다. 날짜 형식이 잘못된 경우 또는 비어 있는 경우에 대한 검증과 오류 처리를 추가하는 것이 좋습니다.

const timeDiff = endDate.getTime() - startDate.getTime();는 시작 날짜와 종료 날짜 사이의 밀리초 차이를 계산합니다. 이 방법은 보통 잘 작동하지만, 경계 조건에 주의해야 할 수도 있습니다. 해당 날짜와 시간 포맷의 정확성을 확인하고, 결과에 대한 예외 상황 처리를 고려하는 것이 좋습니다.

const nights = timeDiff / (1000 * 60 * 60 * 24);는 날짜 차이를 계산하고 있습니다. 이 계산에서 숫자의 유효 범위 및 반올림 문제에 유의해야 합니다. 계산 결과가 소수점을 가질 수 있다는 점을 고려하여 적절한 반올림 로직을 추가하거나 결과 값을 정수로 변환하는 것이 좋습니다.

const days = nights + 1;는 박과 일 수를 계산하기 위한 변수입니다. 예제에서는 종료 날짜를 포함하여 계산하고 있지만, 시작 날짜도 포함해야 할지 확인해야 합니다. 요구 사항에 따라 이 부분을 조정해야 합니다.

if (nights === 0) return "(당일)";는 한 밤을 보내는 경우 당일 여행을 나타냅니다. 그러나 이 조건은 밤의 개수가 정확히 0일 경우에만 작동합니다. 기간이 24시간 미만인 등 다른 상황에 대한 고려가 필요할 수 있습니다.

코드 자체는 간단하고 문제가 없어 보입니다. 그러나 실제 사용 시에 발생할 수 있는 예외 상황을 고려하여 추가적인 검증과 오류 처리를 구현하는 것이 좋습니다.

위의 제안을 참고하여 코드를 검토하고 개선해보세요.

NacreousCloud

리뷰를 해놓고 submit을 안하고있었네요 ㅋㅋㅋ; 확인했습니다! 여기있는 내용들은 인터페이스의 수정, 오타들입니다. 그 중하나는 스타일과 관련이 있으니 수정하시고 바로 머지해주세요! 고생하셨습니다!

NacreousCloud · 2023-12-03T12:36:40Z

+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  try {
+    const res = await axios.get(


Suggested change

const res = await axios.get(

const res = await axios.get<CardType[]>(

[Lv1] axios 함수 제너릭으로 타입을 적어주면 res.data의 타입으로 사용할 수 있고 아래에 타입명시 (as CardType[]) 을 뺄수있습니다!

NacreousCloud · 2023-12-03T12:41:25Z

+}: CardType) => {
+  return (
+    <div className="w-[260px] h-[420px] relative flex-col flex box-content transition-transform hover:-translate-y-1 m-auto">
+      <div className={`w-full h-[170px] bg-stone-300 border-zinc-400 relatvie`}>


Suggested change

<div className={`w-full h-[170px] bg-stone-300 border-zinc-400 relatvie`}>

<div className={`w-full h-[170px] bg-stone-300 border-zinc-400 relative`}>

NacreousCloud · 2023-12-03T12:42:31Z

+  return (
+    <div className="p-5 border-t">
+      <CategoryTitle title="기간" />
+      <div className="flex gap-x-[10px] flex-wrap mt-3">


Suggested change

<div className="flex gap-x-[10px] flex-wrap mt-3">

<div className="flex gap-x-2.5 flex-wrap mt-3">

NacreousCloud · 2023-12-03T12:43:22Z

+
+interface ExpenseTabProps {
+  expense: string;
+  handleExpenseChange: (e: React.ChangeEvent<HTMLInputElement>) => void;


Suggested change

handleExpenseChange: (e: React.ChangeEvent<HTMLInputElement>) => void;

handleExpenseChange: ChangeEventHandler<HTMLInputElement>;

NacreousCloud · 2023-12-03T12:45:17Z

+import "react-calendar/dist/Calendar.css";
+
+interface InputCalenderProps {
+  date: Date | undefined;


Suggested change

date: Date | undefined;

date?: Date;

NacreousCloud · 2023-12-03T12:45:41Z

+  date: Date | undefined;
+  visible: boolean;
+  placeholder: string;
+  handleCalendarClick: () => void;


Suggested change

handleCalendarClick: () => void;

handleCalendarClick: VoidFunction;

pepperdad · 2023-12-10T15:58:20Z

#58 PR에 comment 반영하였습니다!

pepperdad added 8 commits November 24, 2023 00:11

design: asset 추가

72b26de

feat: keyword 필터 추가

1ceafaa

feat: 카드 UI 추가

6d58287

feat: 태그, 정렬 컴포넌트 추가

e24398e

feat: 카드 데이터 동적으로 불러오기

68dbaf9

feat: msw로 카드 데이터 불러오기

0619ed8

feat: findSchedule handler 추가

d38cc30

fix: 헤더 라우팅, z-index 수정

7e4172e

pepperdad requested review from Choi-Jinwook and NacreousCloud and removed request for NacreousCloud November 24, 2023 16:21

Choi-Jinwook requested changes Nov 25, 2023

View reviewed changes

Comment thread src/findSchedule/components/Page.tsx

feat: 카드 UI shadow, padding 수정

9d20423

Choi-Jinwook self-requested a review December 7, 2023 07:07

Choi-Jinwook approved these changes Dec 7, 2023

View reviewed changes

pepperdad added 2 commits December 9, 2023 00:37

Merge branch 'develop' of https://github.com/Project-Catcher/catcher-web

38808d8

into feat/find-schedule-content ; Conflicts: ; src/mock/browser.ts ; src/shared/utils/index.ts

fix: pull develop

e29528b

github-actions Bot reviewed Dec 8, 2023

View reviewed changes

NacreousCloud approved these changes Dec 10, 2023

View reviewed changes

pepperdad mentioned this pull request Dec 10, 2023

Feat: 일정 상세 페이지 추가 #58

Open

pepperdad merged commit 20c640b into develop Dec 10, 2023

pepperdad added a commit that referenced this pull request Dec 10, 2023

feat: (#51) PR comment 반영

781fbcf

Navigation Menu

Uh oh!

Feat: 일정 찾기 페이지 카드, 필터링 로직 추가 - #51

Feat: 일정 찾기 페이지 카드, 필터링 로직 추가#51
pepperdad merged 11 commits into
developfrom
feat/find-schedule-content

pepperdad commented Nov 24, 2023

Uh oh!

Choi-Jinwook left a comment

Uh oh!

Uh oh!

Choi-Jinwook left a comment

Uh oh!

github-actions Bot Dec 8, 2023

Uh oh!

NacreousCloud left a comment

Uh oh!

NacreousCloud Dec 3, 2023

Uh oh!

NacreousCloud Dec 3, 2023

Uh oh!

NacreousCloud Dec 3, 2023

Uh oh!

NacreousCloud Dec 3, 2023

Uh oh!

NacreousCloud Dec 3, 2023

Uh oh!

NacreousCloud Dec 3, 2023

Uh oh!

pepperdad commented Dec 10, 2023 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	const res = await axios.get(
	const res = await axios.get<CardType[]>(

	<div className={`w-full h-[170px] bg-stone-300 border-zinc-400 relatvie`}>
	<div className={`w-full h-[170px] bg-stone-300 border-zinc-400 relative`}>

	<div className="flex gap-x-[10px] flex-wrap mt-3">
	<div className="flex gap-x-2.5 flex-wrap mt-3">

	handleExpenseChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
	handleExpenseChange: ChangeEventHandler<HTMLInputElement>;

	handleCalendarClick: () => void;
	handleCalendarClick: VoidFunction;

Uh oh!

Conversation

pepperdad commented Nov 24, 2023

구현 사항

테스트

TODO

추가사항

Uh oh!

Choi-Jinwook left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choi-Jinwook left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Dec 8, 2023

Choose a reason for hiding this comment

Uh oh!

NacreousCloud left a comment

Choose a reason for hiding this comment

Uh oh!

NacreousCloud Dec 3, 2023

Choose a reason for hiding this comment

Uh oh!

NacreousCloud Dec 3, 2023

Choose a reason for hiding this comment

Uh oh!

NacreousCloud Dec 3, 2023

Choose a reason for hiding this comment

Uh oh!

NacreousCloud Dec 3, 2023

Choose a reason for hiding this comment

Uh oh!

NacreousCloud Dec 3, 2023

Choose a reason for hiding this comment

Uh oh!

NacreousCloud Dec 3, 2023

Choose a reason for hiding this comment

Uh oh!

pepperdad commented Dec 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

pepperdad commented Dec 10, 2023 •

edited

Loading