[FE] 🚧 완료 상태 페어룸 1차 구현 #820

greetings1012 · 2024-10-17T07:34:19Z

연관된 이슈

🚧

구현한 기능

완료 상태 페어룸을 1차 구현했습니다. 이후 나오는 api를 확인하고 2차 수정할 예정입니다.

상세 설명

🤗

dle234

수고하셨습니당 궁금한거 몇개 질문남겼어요!

dle234 · 2024-10-17T08:15:05Z

frontend/src/apis/pairRoom.ts

+export const updatePairRoomStatus = async ({ accessCode }: UpdatePairRoomStatusRequest) => {
+  await fetcher.patch({
+    url: `${API_URL}/pair-room/${accessCode}/complete`,
+    errorMessage: '',


저희 지금 에러 핸들링을 제대로 안 해놔서 에러 메세지가 있는게 좋을 것 같아요!

추가했습니다!

dle234 · 2024-10-17T08:30:19Z

frontend/src/components/PairRoom/PairListCard/PairListCard.tsx

@@ -30,7 +32,7 @@ const PairListCard = ({ driver, navigator, missionUrl, roomCode }: PairListCardP
          <RoomCodeSection isOpen={isOpen} roomCode={roomCode} />
          {missionUrl !== '' && <RepositorySection isOpen={isOpen} missionUrl={missionUrl} />}
          <PairListSection isOpen={isOpen} driver={driver} navigator={navigator} />
-          {/* <DeleteButton isOpen={isOpen} onRoomDelete={onRoomDelete} /> */}
+          <DeleteButton isOpen={isOpen} onClick={() => handleCompletePairRoom(roomCode)} />


페어룸을 종료하는 버튼이라 DeleteButton 네이밍이 적절하지 않은 것 같아요
그리고 PairRoomDeleteModal에도 페어룸을 종료하겠습니까 ? + 페어룸을 종료하면 회고 페이지로 이동합니다. 와 같은 내용이 들어있어도 좋을 것 같아요!

수정했습니다 👍

dle234 · 2024-10-17T08:34:44Z

frontend/src/pages/CompletedPairRoom/CompletedPairRoom.tsx

+    const checkPairRoomExists = async () => {
+      if (!accessCode) navigate('/error');
+
+      const { exists } = await getPairRoomExists(accessCode || '');


accessCode 가 없으면 error 페이지로 이동하는데 accessCode || ''로 처리해 준 이유가 있을까요??

추가로 getPairRoomExists 요청 자체가 실패했을때에도 에러처리를 해 주어야 할 것 같습니다! getPairRoomExists 요청이 실패하면 데이터 없는 빈 방에 입장하게 되는 것 같아요.
(근데 이 에러는 추후에 처리해도 좋을 것 같아욥)

accessCode 가 없으면 error 페이지로 이동하는데 accessCode || ''로 처리해 준 이유가 있을까요??

const accessCode = useParams().accessCode; 에서 accessCode의 값이 undefined일 수 있어 typescript가 에러를 반환해요 🥲

추가로 getPairRoomExists 요청 자체가 실패했을때에도 에러처리를 해 주어야 할 것 같습니다! getPairRoomExists 요청이 실패하면 데이터 없는 빈 방에 입장하게 되는 것 같아요.

요거는 파슬리도 여기 작업중이라 파슬리 코드까지 머지되고 나서 한번에 처리해 주겠습니다!

dle234 · 2024-10-17T08:41:04Z

frontend/src/pages/CompletedPairRoom/CompletedPairRoom.tsx

+
+  const { driver, navigator, missionUrl, isFetching } = useGetPairRoom(accessCode || '');
+
+  if (isFetching) {


App에서 <Suspense fallback={}>

처리를 해 줬는데 로딩처리가 중복된 것 같아요!

App의 Suspense를 삭제했습니다!

dle234 · 2024-10-17T08:42:45Z

frontend/src/pages/CompletedPairRoom/CompletedPairRoom.tsx

+
+  return (
+    <S.Layout>
+      <S.CompletedPairRoomInformationContainer>


👍👍👍👍👍애니메이션 짱이네요

dle234 · 2024-10-17T08:48:41Z

frontend/src/pages/CompletedPairRoom/CompletedPairRoom.tsx

+    const checkPairRoomExists = async () => {
+      if (!accessCode) navigate('/error');
+
+      const { exists } = await getPairRoomExists(accessCode || '');


추가로 getPairRoomExists 요청 자체가 실패했을때에도 에러처리를 해 주어야 할 것 같습니다! getPairRoomExists 요청이 실패하면 데이터 없는 빈 방에 입장하게 되는 것 같아요.
(근데 이 에러는 추후에 처리해도 좋을 것 같아욥)

anttiey · 2024-10-17T12:07:02Z

frontend/src/App.tsx

@@ -8,6 +8,7 @@ const PairRoom = lazy(() => import('@/pages/PairRoom/PairRoom'));

 import Callback from '@/pages/Callback/Callback';
 import CoduoDocs from '@/pages/CoduoDocs/CoduoDocs';
+import CompletedPairRoom from '@/pages/CompletedPairRoom/CompletedPairRoom';


컴포넌트 이름 진짜 스껄하네요 😭

anttiey · 2024-10-17T12:10:29Z

...airRoom/ReferenceCard/CategoryManagementModal/CategoriesEditor/CategoryItem/CategoryItem.tsx

+  handleSelectCategory: (categoryId: string) => void;
+}
+
+const CategoryItem = ({ closeModal, categoryName, categoryId, isChecked, handleSelectCategory }: CategoryItemProps) => {


혹시 이렇게 ReferenceCard 안에 CategoryManagementModal 안에 CategoriesEditor 안에 CategoryItem 이 있는 이유가 있나요? 컴포넌트 경로가 너무 길어지는 거 같아서요 🤔

급하게 원래 파일 구조 그대로 따오느라 필요없는 구조가 생겼네요!
CategoriesEditor 단계를 삭제했습니다 👍

폴더 구조가 이렇게 보이는데 안에 CategoryItem 만 있어서 혹시 상위에 CategoriesEditor 폴더가 있는 거면 제거하고 CategoryItem 폴더만 남겨도 될 거 같네요!

anttiey · 2024-10-17T12:10:48Z

...airRoom/ReferenceCard/CategoryManagementModal/CategoriesEditor/CategoryItem/CategoryItem.tsx

@@ -0,0 +1,29 @@
+import ReadonlyCategoryItem from '@/components/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoriesEditor/CategoryItem/ReadonlyCategoryItem/ReadonlyCategoryItem';


여기만 봐도...

anttiey · 2024-10-17T12:12:35Z

...airRoom/ReferenceCard/CategoryManagementModal/CategoriesEditor/CategoryItem/CategoryItem.tsx

+  return (
+    <S.Layout>
+      <S.Container>
+        <ReadonlyCategoryItem


ReadonlyCategoryItem 안의 로직이 많지 않아서 따로 컴포넌트로 분리되어 있지 않아도 될 거 같아요. 지금 이 컴포넌트가 따로 도메인 로직이 없어서 껍데기 역할을 하고 있는 거 같습니다!

여기도 줄였습니다!

anttiey · 2024-10-17T12:13:37Z

...mponents/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryManagementModal.tsx

+  };
+
+  return (
+    <Modal isOpen={isOpen} close={closeCategoryManagementModal} size="45rem">


그냥 closeModal 을 써도 되지 않나요?

지금 확인해보니 변수명이 중간에 한번 길게 바뀐 부분이 있네요!
수정했습니다 👍

anttiey · 2024-10-17T12:15:55Z

frontend/src/components/CompletedPairRoom/ReferenceCard/ReferenceCard.tsx

+    <>
+      <S.Layout>
+        <PairRoomCard>
+          <Header selectedFilteringCategoryName={selectedFilteringCategoryName} onButtonClick={openModal} />


selectedFilteringCategoryName 이거 변수명을 줄일 수 있는 방법은 없을까요...

원본 코드와 같은 이름이라 리팩터링할 때 한 번에 고쳐야 할 것 같아요 🥲

코드 다이어트가 시급하군요 ⚠️

anttiey · 2024-10-17T12:18:16Z

frontend/src/pages/CompletedPairRoom/CompletedPairRoom.tsx

+
+const CompletedPairRoom = () => {
+  const navigate = useNavigate();
+  const accessCode = useParams().accessCode;


Suggested change

const accessCode = useParams().accessCode;

const { accessCode } = useParams()

이렇게 쓰는 건 어떤가요?

수정했습니다!

anttiey · 2024-10-17T12:18:47Z

frontend/src/pages/CompletedPairRoom/CompletedPairRoom.tsx

+  const navigate = useNavigate();
+  const accessCode = useParams().accessCode;
+
+  const userStatus = useUserStore((state) => state.userStatus);


Suggested change

const userStatus = useUserStore((state) => state.userStatus);

const { userStatus } = useUserStore();

수정했습니다!

anttiey · 2024-10-18T01:58:23Z

...airRoom/ReferenceCard/CategoryManagementModal/CategoriesEditor/CategoryItem/CategoryItem.tsx

+  handleSelectCategory: (categoryId: string) => void;
+}
+
+const CategoryItem = ({ closeModal, categoryName, categoryId, isChecked, handleSelectCategory }: CategoryItemProps) => {


폴더 구조가 이렇게 보이는데 안에 CategoryItem 만 있어서 혹시 상위에 CategoriesEditor 폴더가 있는 거면 제거하고 CategoryItem 폴더만 남겨도 될 거 같네요!

greetings1012 added 6 commits October 16, 2024 19:33

✨ 완료 상태의 페어 룸 구현

40370fa

✨ 페어룸 종료 버튼 복원

973721f

✨ Sse 통신을 통한 페어룸 종료 로직 구현

063bae1

💄 페어룸 완료 페이지 디자인 개선

6f3eae2

♻️ 완료된 상태에서는 카테고리 수정이 불가하도록 코드 변경

0fd6f19

💄 스타일 변수명 수정

263cc64

greetings1012 added the 🧑‍💻 feat 신규 기능 개발 label Oct 17, 2024

greetings1012 added this to the [8] 최종 데모 데이 준비 1차 milestone Oct 17, 2024

greetings1012 requested review from anttiey and dle234 October 17, 2024 07:34

greetings1012 self-assigned this Oct 17, 2024

dle234 approved these changes Oct 17, 2024

View reviewed changes

greetings1012 added 3 commits October 17, 2024 17:57

♻️ UpdatePairRoomStatus 에러 메시지 상수화 및 사용

763aabd

🚚 페어룸 완료 버튼 이름 변경

b3b8039

🎨 App.tsx에서 CompletedPairRoom의 Suspense 제거

bc29475

anttiey requested changes Oct 17, 2024

View reviewed changes

greetings1012 added 4 commits October 18, 2024 10:34

♻️ 필요없는 중간 컴포넌트 삭제

768c13f

♻️ 필요 없는 ReadOnlyCategoryItem 삭제

484fad0

♻️ 필요없는 변수명 수정

8364f16

♻️ 변수 할당 대신 속성 추출 방식 사용

a220e54

anttiey approved these changes Oct 18, 2024

View reviewed changes

🎨 필요없는 폴더 제거

4fe6aac

greetings1012 merged commit 03c8df0 into FE/dev Oct 18, 2024
1 check passed

greetings1012 deleted the FE/feature/#800 branch October 18, 2024 05:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] 🚧 완료 상태 페어룸 1차 구현 #820

[FE] 🚧 완료 상태 페어룸 1차 구현 #820

greetings1012 commented Oct 17, 2024

dle234 left a comment

dle234 Oct 17, 2024

greetings1012 Oct 17, 2024

dle234 Oct 17, 2024

greetings1012 Oct 17, 2024

dle234 Oct 17, 2024

dle234 Oct 17, 2024

greetings1012 Oct 17, 2024 •

edited

Loading

dle234 Oct 17, 2024

greetings1012 Oct 17, 2024

dle234 Oct 17, 2024

dle234 Oct 17, 2024

anttiey Oct 17, 2024

anttiey Oct 17, 2024 •

edited

Loading

greetings1012 Oct 18, 2024

anttiey Oct 18, 2024

anttiey Oct 17, 2024 •

edited

Loading

anttiey Oct 17, 2024 •

edited

Loading

greetings1012 Oct 18, 2024

anttiey Oct 17, 2024

greetings1012 Oct 18, 2024 •

edited

Loading

anttiey Oct 17, 2024

greetings1012 Oct 18, 2024

anttiey Oct 18, 2024

anttiey Oct 17, 2024

greetings1012 Oct 18, 2024

anttiey Oct 17, 2024

greetings1012 Oct 18, 2024

anttiey Oct 18, 2024


		const { driver, navigator, missionUrl, isFetching } = useGetPairRoom(accessCode \|\| '');

		if (isFetching) {

		@@ -0,0 +1,29 @@
		import ReadonlyCategoryItem from '@/components/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoriesEditor/CategoryItem/ReadonlyCategoryItem/ReadonlyCategoryItem';

	const accessCode = useParams().accessCode;
	const { accessCode } = useParams()

	const userStatus = useUserStore((state) => state.userStatus);
	const { userStatus } = useUserStore();

[FE] 🚧 완료 상태 페어룸 1차 구현 #820

[FE] 🚧 완료 상태 페어룸 1차 구현 #820

Conversation

greetings1012 commented Oct 17, 2024

연관된 이슈

구현한 기능

상세 설명

dle234 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greetings1012 Oct 17, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anttiey Oct 17, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anttiey Oct 17, 2024 • edited Loading

Choose a reason for hiding this comment

anttiey Oct 17, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greetings1012 Oct 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greetings1012 Oct 17, 2024 •

edited

Loading

anttiey Oct 17, 2024 •

edited

Loading

anttiey Oct 17, 2024 •

edited

Loading

anttiey Oct 17, 2024 •

edited

Loading

greetings1012 Oct 18, 2024 •

edited

Loading