Feat: 내 일정 페이지 추가 구현 #41

pepperdad · 2023-11-19T12:05:17Z

구현사항

내 일정 페이지

메인
모든 일정
모집 일정
참여 신청 일정
임시 저장
나만의 아이템

테스트

localhost:3000/schedule
localhost:3000/schedule/all
localhost:3000/schedule/recruit
localhost:3000/schedule/participate
localhost:3000/schedule/temporary
localhost:3000/schedule/items

TODO

라우팅 로직 추가
삭제, 승인 등 요청 로직 추가
ScheduleCardProp 정리 필요
무한 스크롤 로직 추가
스크랩 페이지 추가
상수들 분리

추가

모달 관련 width가 고정되어 있어, 신청자 관리 모달이 현재 작게 나오고 있습니다. Modal 컴포넌트의 max-w-md -> max-w-4xl 로 수정 하면 정상적으로 보입니다. -> 모달 width 수정 가능할까요?
내 일정 페이지에서 전체적으로 볼 수 있는 ScheduleCard 등 UI 부분에서 공통적인 부분이 많은 부분을 한 컴포넌트에서 type으로 관리하려고 하다보니 굉장히 커지고, 코드가 조금 난잡해졌는데, 이런 부분은 어떤 식으로 구현하는 게 효율적인지 좋은 방법 있으면 코멘트 남겨주시면 반영하겠습니다.

into feat/my-schedule ; Please enter a commit message to explain why this merge is necessary, ; especially if it merges an updated upstream into a topic branch. ; ; Lines starting with ';' will be ignored, and an empty message aborts ; the commit.

github-actions · 2023-11-22T13:44:23Z

src/schedule/components/ContentFilter.tsx

+  );
+};
+
+export default ContentFilter;


위의 코드 패치는 리액트 컴포넌트인 ContentFilter를 정의하고 있습니다. 기능적으로 보면, 일정 제목 입력과 모집 기간 필터링을 위한 달력 선택이 가능합니다. 몇 가지 개선사항은 다음과 같습니다:

주석은 소유자를 이해하기 쉽도록 한국어로 작성되었으나, 주석을 영어로 작성하는 것이 코드를 사용하는 많은 사람들에게 더 이해하기 쉬울 수 있습니다.

변수 및 함수 이름은 의미를 잘 전달하지만, 조금 더 자세하게 설명하는 것이 이해하기 더 쉬울 수 있습니다. 예를 들어, handleCalendarClick 대신 handleCalendarClickType으로 이름을 변경하는 것이 좋습니다.

CSS 클래스 이름은 비슷한 스타일을 공유하는 항목들끼리 그룹화하는 것이 좋습니다. 또한 마진과 여백을 설정할 때 통일된 방식을 사용하는 것이 일관성을 유지하는 데 도움이 될 수 있습니다.

<button> 요소에 함께 사용되는 스타일을 외부 CSS 파일로 추출하여 재사용 가능한 구성 요소로 분리하는 것도 고려해 볼 수 있습니다.

현재 코드에서는 변수 타입에 대한 주석이 명시되지 않았습니다. TypeScript를 사용하는 것이 변수와 함수 규격을 명확하게 설정하고 잘못된 타입 사용을 방지하는 데 도움이 될 수 있습니다.

일반적으로 코드 패치는 기능적으로 올바른 것처럼 보이며, 주요한 버그 리스크는 추론하기 어렵습니다. 추가 테스트와 리뷰를 통해 코드의 안정성과 성능을 확인하는 것이 좋습니다.

github-actions · 2023-11-22T13:45:24Z

src/schedule/components/InputCalender.tsx

+            width={13}
+            height={13}
+          />
+        </div>
      </div>
      {visible && (
        <div className="absolute top-[38px] left-0 z-30">


이 코드 패치의 문제점과 개선 제안은 다음과 같습니다:

첫째, InputCalender 컴포넌트에서 placeholder를 사용하기 위해 props로 전달되는 것으로 보입니다. 그러나 수정된 코드에서는 placeholder 속성이 전혀 사용되지 않고 있습니다. placeholder를 적절히 활용하도록 수정해야 합니다.

둘째, <input> 요소에 cursor-pointer 클래스가 중복되어 있습니다. 하나의 클래스만 사용하면 됩니다.

셋째, defaultValue 속성을 사용하여 <input> 요소의 초기 값을 설정하고 있습니다. 그러나 사용자가 날짜를 선택하면 입력 값이 갱신되어야 합니다. 따라서 value 속성을 사용하여 실제 날짜를 표시하고 변경 가능하도록 해야 합니다.

넷째, 일부 스타일 클래스 이름이 수정되었습니다. 예를 들어, w-[145px]에서 w-[10%]로 변경되었습니다. 스타일 클래스의 변경에 대한 이유와 의도를 확인하고, 스타일 반영 여부를 결정해야 합니다.

마지막으로, 코드 패치에서는 visible 상태 변수에 따라 달력을 표시하는 부분이 제거되었습니다. 이 부분도 살펴봐야 합니다. 달력을 표시해야 하는 로직이 제대로 작동하는지 확인해야 합니다.

위의 문제들을 확인하고 수정하여 코드를 개선하시기 바랍니다.

NacreousCloud

확인했습니다~ 코멘트 확인 부탁드려요~

src/modalContent/RecruitManage.tsx

NacreousCloud · 2023-11-26T07:13:42Z

src/schedule/context/TabContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const TabContext = createContext<string | null>(null);


[Lv1] TabContext는 어떻게 사용되나요?? TabContext를 사용하는곳이 CardStatus 밖에 안보이는데 이부분은 추후 작업 예정인건가요?

페이지 내의 tab이 변경 될 때 마다, useEffect의 의존성 배열에 사용해서 CardStatus를 변경하려고 TabContext를 도입하긴 했는데... 이 부분이 제가 생각하는데로 동작을 하지 않네요. 제가 알기로는 이렇게 tab을 context에서 불러왔을 때, tab이 변경될 때 마다 useEffect가 실행되야할 것 같은데, 그렇게 동작을 안하고 있는 상태입니다. 그래서 현재 CardStatus 컴포넌트 useEffect의 의존성 배열에 여러 인자들이 들어가 있는데, 그냥 tab도 props로 내리는 게 좋을까요?

말씀하신 내용이 좀 헷갈리는데 context에서 tab을 가져왔을때 useEffect가 실행되지않나요?? 이부분 한번 정리해서 리뷰해주실수있으면 좋겠습니다!

src/schedule/components/CardStatus.tsx

src/schedule/components/ItemCard.tsx

src/schedule/components/MyScheduleContent.tsx

src/schedule/components/ScheduleWrapper.tsx

src/schedule/components/TemporaryCard.tsx

into feat/my-schedule ; Conflicts: ; src/modalContent/index.tsx ; src/shared/recoil/modal.tsx ; src/shared/styles/globals.css

github-actions · 2023-12-01T12:45:00Z

src/modalContent/RecruitManage.tsx

+  );
+};
+
+export default RecruitManage;


이 코드 패치는 React 컴포넌트인 RecruitManage를 정의하는 것으로 보입니다. 해당 컴포넌트는 신청자 관리를 위한 기능을 담고 있습니다. 주요 기능은 다음과 같습니다:

RecruitManageProps 인터페이스: 컴포넌트의 속성(props)을 정의하고 있습니다.

useState 훅: 상태를 관리하기 위해 사용되고, defaultApplicants와 selectedIds 등의 상태를 초기화하고 업데이트합니다.

이벤트 핸들러 함수: 체크박스와 선택 상태를 처리하기 위한 handleSelectAll, handleSelect 함수가 정의되어 있습니다.

useEffect 훅: 필터링 옵션에 따라 신청자 리스트를 업데이트합니다.

이 코드 패치는 주요한 버그나 오류 위험이 보이지 않습니다. 그러나 몇 가지 개선 제안은 다음과 같습니다:

중복된 코드 줄이기: 동일한 로직을 반복하는 부분이 있는데, 이를 함수로 분리하여 재사용성을 높이고 코드 가독성을 개선할 수 있습니다.

변수명 개선: 일부 변수 이름은 명확하지 않은 경우가 있는데, 변수명을 좀 더 명시적으로 변경하면 이해하기 쉬워집니다.

상수 사용: "전체," "승인," "대기중"과 같은 문자열 값들은 상수로 정의하는 것이 좋습니다.

CSS 클래스명 개선: 현재는 클래스명에 다양한 요소가 섞여 있어 가독성이 떨어집니다. 클래스명을 의미 있는 이름으로 변경하여 스타일링을 관리하기 쉽게 합니다.

코드 품질과 유지보수 측면에서 위 개선 사항을 고려해 보시기 바랍니다. 하지만 전체적인 코드 구조와 기능은 잘 구현되어 있는 것으로 보입니다.

github-actions · 2023-12-01T12:45:58Z

src/schedule/components/MyScheduleContent.tsx

+  );
+};
+
+export default MyScheduleContent;


위의 코드 조각은 React 컴포넌트인 MyScheduleContent를 정의하는 것 같습니다. 이 컴포넌트는 일정 목록을 가져와서 화면에 렌더링합니다.

코드 리뷰 및 개선 사항:

getMainSchedule 함수가 어디에서 정의되는지 알 수 없기 때문에 해당 함수의 구현 내용과 리턴 값 등을 확인해야 합니다.

catch 블록이 try 블록 바깥에 위치하고 있어서 실제로 오류가 발생할 경우 캐치할 수 없습니다. then 메서드 체인 내부에서 오류를 캐치하는 방식으로 수정해야 합니다.

const onClickDelete 함수는 현재 주석 처리되어 있으므로 기능을 구현해야 합니다.

setTemporarayCardList의 오타를 setTemporaryCardList로 수정해야 합니다.

cardType prop을 TitleCardContainer로 전달하지 않고 있습니다. 필요에 따라 수정해야 할 수도 있습니다.

w-3/5는 하드 코딩된 스타일 클래스입니다. 유동적인 크기 조정이 필요한 경우 다른 방법을 사용해야 합니다.

이 외에도 코드의 세부 사항에 따라 추가적인 개선이 필요할 수 있습니다. 제시된 코드 조각에서는 그 외의 오류나 위험 요소를 확인할 수 없습니다.

github-actions · 2023-12-01T12:46:16Z

src/schedule/components/ScheduleWrapper.tsx

+  );
+};
+
+export default ScheduleWrapper;


위의 코드 패치를 간단하게 검토해드리겠습니다.

PropsWithChildren은 불필요한 것 같습니다. interface ScheduleWrapperProps {}로 충분합니다.

태그 안에 있는 className="flex justify-center pt-32"는 CSS 클래스 이름으로 추정됩니다. 이 클래스들이 적절한지, 어떤 스타일을 적용하는지 확인해보세요.

ScheduleHeader 컴포넌트는 어디에서 가져오는지 알 수 없으니, 해당 파일이 존재하고 import 구문이 올바른지 확인해주세요.

코드상 큰 문제는 없어 보입니다. 추가적인 기능이나 개선사항이 필요한지는 호출하는 곳에서 보완해야 합니다.

github-actions · 2023-12-01T12:46:53Z

src/schedule/components/TemporaryCard.tsx

+  );
+};
+
+export default TemporaryCard;


이 코드 패치는 Next.js 및 React를 사용하여 임시 저장된 일정 정보를 보여주는 카드 컴포넌트입니다. 아래는 코드 리뷰와 개선 제안입니다:

이미지 임포트: Image를 Next.js의 next/image에서 임포트하고 있습니다.

프로퍼티 타입: TemporaryCardProps 인터페이스에 scheduleType이라는 타입이 들어있는데, 이 타입이 어디에서 온 것인지 명확하게 알 수 없습니다. 해당 타입을 작성한 곳이 있다면 인터페이스 정의 부분과 동일한 파일에서 가져오는 것이 좋습니다.

클래스 네임: 카드의 className으로 특정 CSS 클래스들이 동적으로 결정되고 있습니다. 이런 경우에는 조건부 클래스 이름을 적용하는 대신 CSS-in-JS 라이브러리(예: styled-components)를 사용하는 것이 유지보수성과 확장성 면에서 더 좋을 수 있습니다.

이미지 렌더링: img.length를 확인한 후에 조건에 따라 이미지를 렌더링하거나 대체 텍스트를 표시하고 있습니다. 그러나, img 가공 여부와 상관없이 img 속성을 항상 <Image> 컴포넌트에 전달하고 있습니다. 대신, img 속성을 조건부로 <Image> 컴포넌트에 전달하는 방식으로 변경해 불필요한 렌더링을 피할 수 있습니다.

TODO 주석: 마지막으로, 코드 중간에 "TODO: 일정 만들기로 라우팅" 주석이 있습니다. 이 부분을 완성하여 프로덕션 코드에서 사용되도록 처리하거나, 주석을 삭제하는 것이 좋습니다.

이외에는 보안상의 버그나 위험한 코드 리스크를 찾을 수는 없었습니다.

pepperdad

변경사항

스크랩 페이지 추가
MSW로 데이터 요청
코드 리뷰 사항들 반영

다시 확인해주시면 감사하겠습니다 :)

NacreousCloud

확인했습니다! 코멘트 달아놓은 부분만 반영 부탁드릴게용. 고생하셨습니다!

NacreousCloud · 2023-12-03T09:00:55Z

src/schedule/components/ScheduleCard.tsx

-          </div>
-        </div>
-      )}
-      {/* 사진 및 테마 */}
      <div
        className={`w-[260px] h-[225px] bg-stone-300 border-b border-zinc-400 relatvie`}


[Lv3] 이부분 클래스네임 오타나있습니다!

Suggested change

className={`w-[260px] h-[225px] bg-stone-300 border-b border-zinc-400 relatvie`}

className={`w-[260px] h-[225px] bg-stone-300 border-b border-zinc-400 relative`}

Choi-Jinwook

확인완료했습니다! 캐러셀 부분은 삭제 부분 msw 연동 후 확인 부탁드립니다!

github-actions · 2023-12-06T12:49:27Z

src/schedule/components/ScheduleCard.tsx

+      isDeleteToggle={isDeleteToggle}
+      handleDeleteToggle={handleDeleteToggle}
+      onClickDelete={onClickDelete}
+    />
  );
 };



이 코드 패치를 요약하면 다음과 같습니다:

RecruitManage에서 가져온 RecruitManageProps를 import합니다.

getApplicantsList를 임포트하여 API에 대한 정보를 얻을 수 있습니다.

useModal 훅을 사용하여 모달 기능을 추가합니다.

CardStatus, scheduleType, TemporaryCard 컴포넌트 등이 새로 추가되었습니다.

cardType 및 Applicant 상호 작용을 포함하는 인터페이스가 정의되었습니다.

handleDelete가 handleDeleteToggle로 변경되었습니다.

handleModal 함수가 추가되었으며, 해당 일정에 대한 신청자 목록을 가져와 모달을 엽니다.

카드 유형과 조건에 따라 다른 컨텐츠를 렌더링하도록 수정되었습니다.

버그 위험성은 주어지지 않았고, 개선 제안 사항은 코드 리뷰 및 개발자 의사에 따라 달라질 수 있습니다.

github-actions · 2023-12-06T12:50:08Z

src/schedule/components/TemporaryCard.tsx

+  );
+};
+
+export default TemporaryCard;


위 코드는 TemporaryCard라는 컴포넌트입니다. 주요 리뷰 포인트는 다음과 같습니다:

import Image from "next/image";: 이 부분은 이미지를 다루기 위해 Next.js의 Image 모듈을 가져오고 있습니다.

interface TemporaryCardProps: TemporaryCard 컴포넌트의 props를 정의하고 있습니다. 타입을 명확히 정의하여 props 사용에 도움이 됩니다.

const TemporaryCard = ({ ... }) => { ... }: TemporaryCard 함수 컴포넌트를 정의하고 있습니다. props를 전달받아 컴포넌트를 렌더링합니다.

CSS 클래스와 조건부 스타일링: JSX 엘리먼트에 동적으로 CSS 클래스를 지정하거나 조건부 스타일링을 적용하는 방법이 사용되고 있습니다. 이를 통해 컴포넌트의 외관과 동작을 다양하게 조절할 수 있습니다.

삭제 기능: 카드 위에 마우스를 올리면 삭제 버튼이 나타나는 로직이 구현되어 있습니다. handleDeleteToggle과 onClickDelete 함수를 호출하고, 상태를 업데이트하여 UI를 변경합니다.

이미지 출력: img prop이 비어있지 않으면 이미지를 보여주고, 그렇지 않으면 이미지가 없음을 나타내는 메시지를 표시합니다.

제목, 위치, 내용 및 기간 출력: 각각의 정보를 받아와 카드에 출력합니다.

"일정 만들기 바로가기" 영역: 이 부분은 주석으로 처리되어 있으며, 일정 만들기로의 라우팅을 위한 기능이 추가될 예정입니다.

버그 리스크나 개선 제안은 보이지 않습니다. 하지만 성능 개선이 필요한 경우, 이미지 로딩 관련 설정에 주의해야 합니다.

pepperdad added 30 commits November 11, 2023 01:01

fix: 현재 탭 path 수정

fbb4e95

feat: string을 Date 타입으로 바꿔주는 함수 추가

1c6899e

feat: 테스트 데이터 추가

a7dae54

design: asset 추가

974e16f

feat: 모집 일정 페이지 추가

a65e69e

feat: 일정 작은 카드, EmptyContent 컴포넌트 추가

f1ae4fb

feat: 내 일정 메인 페이지 UI 수정 및 일정 카드 캐러셀 기능 추가

c5a4813

feat: TitleCardContainer 컴포넌트로 분리

bf46192

feat: 일정 작은 카드 컴포넌트 타입별 UI 수정

a4c24f8

feat: 캘린더 클릭 이벤트 범위 수정

e3f89c6

fix: calendar 닫히지 않는 오류 수정

89bc707

feat: default 데이터 수정

9b27c8c

feat: ScheduleCard Type별 UI 구분

a6f259c

feat: ScheduleSmallCard Type별 UI 구분

45e9432

feat: ContentFilter 컴포넌트 추가

a9d78c7

feat: 일정 목록 type 별 구분 로직 추가 및 한 컴포넌트에서 관리

404edde

feat: 일정 작은 카드 토글 UI 추가

8f1a062

feat: 일정 카드 컴포넌트 tab별 Type,UI 구분 로직 추가

5348cb1

feat: 모집 일정 페이지 필터링, 카드 목록 추가

bd5156f

design: asset 추가 및 자잘한 타입 수정

1551104

fix: 임시저장 카드 UI 분리

0cd7eea

feat: 일정카드 상태 뱃지 UI 추가

f63ce41

feat: 신청자 관리 모달 추가

e885985

feat: ScheduleHeader 상위 컴포넌트로 분리

2149cc9

fix: 기존 header 제거

3059877

feat: 참여 신청 페이지 추가

d0fb656

style: 불필요한 import 삭제

bded74d

feat: ScheduleHeader에 임시저장 추가

f19554e

feat: context로 탭 관리 추가

fee3616

fix: Content 필터 컴포넌트에서 검색창 넓이 %로 수정

bb19ada

github-actions bot reviewed Nov 22, 2023

View reviewed changes

NacreousCloud requested changes Nov 26, 2023

View reviewed changes

pepperdad added 12 commits December 1, 2023 16:13

feat: msw 설정 및 데이터 받아오기 수정

b4faf2b

feat: 내 일정, 모든 일정, 모집 일정, 참여 신청 데이터 msw

bb35c7c

feat: 기존의 상수로 사용되던 부분 수정

e7af5a4

feat: 신청자 관리 모달 데이터 msw에서 불러오기

df521c3

feat: 나만의 아이템 msw로 불러오기 및 호버시 수정, 삭제 UI 추가

078b4ee

feat: 스크랩 페이지 추가

1bbd83d

feat: 탭 클릭 시, 데이터 다시 불러오는 로직 추가

f88ece8

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

f95b5bb

into feat/my-schedule ; Conflicts: ; src/modalContent/index.tsx ; src/shared/recoil/modal.tsx ; src/shared/styles/globals.css

fix: 임시 저장 카드 높이 수정

f5c85c9

feat: 내 일정 페이지 작성 중인 일정 UI 수정

58f363f

feat: 내 일정 전체 페이지 카드뷰를 위해 빈 카드 추가

6f6b9d4

fix: review 반영하여 코드 refactor

63aafb5

github-actions bot reviewed Dec 1, 2023

View reviewed changes

pepperdad requested review from Choi-Jinwook and NacreousCloud December 1, 2023 12:46

github-actions bot reviewed Dec 1, 2023

View reviewed changes

pepperdad commented Dec 1, 2023

View reviewed changes

NacreousCloud approved these changes Dec 3, 2023

View reviewed changes

pepperdad added 2 commits December 3, 2023 21:56

fix: TabContext 제거

a2bd607

fix: 오타 수정

7949606

Choi-Jinwook approved these changes Dec 4, 2023

View reviewed changes

github-actions bot reviewed Dec 6, 2023

View reviewed changes

pepperdad merged commit 825d9f1 into develop Dec 6, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: 내 일정 페이지 추가 구현 #41

Feat: 내 일정 페이지 추가 구현 #41

pepperdad commented Nov 19, 2023 •

edited

Loading

github-actions bot Nov 22, 2023

github-actions bot Nov 22, 2023

NacreousCloud left a comment

NacreousCloud Nov 26, 2023

pepperdad Dec 1, 2023 •

edited

Loading

NacreousCloud Dec 3, 2023

github-actions bot Dec 1, 2023

github-actions bot Dec 1, 2023

github-actions bot Dec 1, 2023

github-actions bot Dec 1, 2023

pepperdad left a comment •

edited

Loading

NacreousCloud left a comment

NacreousCloud Dec 3, 2023

Choi-Jinwook left a comment

github-actions bot Dec 6, 2023

github-actions bot Dec 6, 2023

		@@ -0,0 +1,3 @@
		import { createContext } from "react";

		export const TabContext = createContext<string \| null>(null);

	className={`w-[260px] h-[225px] bg-stone-300 border-b border-zinc-400 relatvie`}
	className={`w-[260px] h-[225px] bg-stone-300 border-b border-zinc-400 relative`}

Feat: 내 일정 페이지 추가 구현 #41

Feat: 내 일정 페이지 추가 구현 #41

Conversation

pepperdad commented Nov 19, 2023 • edited Loading

구현사항

테스트

TODO

추가

github-actions bot Nov 22, 2023

Choose a reason for hiding this comment

github-actions bot Nov 22, 2023

Choose a reason for hiding this comment

NacreousCloud left a comment

Choose a reason for hiding this comment

NacreousCloud Nov 26, 2023

Choose a reason for hiding this comment

pepperdad Dec 1, 2023 • edited Loading

Choose a reason for hiding this comment

NacreousCloud Dec 3, 2023

Choose a reason for hiding this comment

github-actions bot Dec 1, 2023

Choose a reason for hiding this comment

github-actions bot Dec 1, 2023

Choose a reason for hiding this comment

github-actions bot Dec 1, 2023

Choose a reason for hiding this comment

github-actions bot Dec 1, 2023

Choose a reason for hiding this comment

pepperdad left a comment • edited Loading

Choose a reason for hiding this comment

변경사항

NacreousCloud left a comment

Choose a reason for hiding this comment

NacreousCloud Dec 3, 2023

Choose a reason for hiding this comment

Choi-Jinwook left a comment

Choose a reason for hiding this comment

github-actions bot Dec 6, 2023

Choose a reason for hiding this comment

github-actions bot Dec 6, 2023

Choose a reason for hiding this comment

pepperdad commented Nov 19, 2023 •

edited

Loading

pepperdad Dec 1, 2023 •

edited

Loading

pepperdad left a comment •

edited

Loading