[FE] 새 방 비교 페이지를 완성하고 방 선택 페이지를 만들어 연결한다. #973

ooherin · 2024-11-19T03:03:36Z

❗ Issue

[FE] 새로운 비교 페이지를 만든다. #952

✨ 구현한 기능

비교 선택 페이지를 만들었습니다.

디자인은 다음과 같습니다.

1. 기존의 컴포넌트들을 재사용하였으며, 몇 컴포넌트를 리팩토링 했습니다.

ChecklistQuestion, CustomBanner 등을 재사용성 있게 리팩토링 하여 사용했습니다.

2. Marker 라는 새로운 컴포넌트를 만들었습니다.

Marker(새로 생긴 공용 컴포넌트) 라는 새로운 공용 컴포넌트를 만들어 지하철 호선 표시마크, 비교 페이지에 A,B 표시에 사용해 주었습니다.

📢 논의하고 싶은 내용

디자인 관련 얘기긴 한데, 메인 페이지에서 방의 아이콘을 빨간색을 빼는 것(노란색으로 대체) 을 어떻게 생각하시는지 궁금합니다. 비교 페이지에서 빨간색이 시맨틱으로 쓰여서, 방 또한 빨간색의 경우 부정적인 의미가 생겼다고 생각합니다. 아티클의 경우는 관련이 없으니까 유지하도 될 것 같습니다. 디자인적으로도 색상이 덜 다채로워서 더 예쁘다고 생각하는데, 방의 경우는 다음과 같이 바꾸는 것에 대해 어떻게 생각하시나요?

🎸 기타

…ng-ggood into dev-fe

github-actions · 2024-11-19T03:10:05Z

🚀 storybook: https://669cc4025d9f500bb8c34778-epofqmijbs.chromatic.com/

…ng-ggood into feat/952-compareRoom

github-actions · 2024-11-19T03:16:35Z

🚀 storybook: https://669cc4025d9f500bb8c34778-peudabubgi.chromatic.com/

github-actions · 2024-11-19T06:23:39Z

🚀 storybook: https://669cc4025d9f500bb8c34778-xkdbjgbzws.chromatic.com/

github-actions · 2024-11-21T10:11:01Z

🚀 storybook: https://669cc4025d9f500bb8c34778-volundauib.chromatic.com/

ooherin · 2024-11-21T10:10:46Z

frontend/tsconfig.json

@@ -4,7 +4,7 @@
    "noImplicitAny": true,
    "esModuleInterop": true,
    "module": "esnext",
-    "target": "es5",


set 에 ... 디스트럭쳐를 쓰기 위해서 ES2015 버전으로 업그레이드 했습니다.

github-actions · 2024-11-21T23:33:22Z

🚀 storybook: https://669cc4025d9f500bb8c34778-uqiuirokzn.chromatic.com/

ooherin · 2024-11-21T23:32:47Z

frontend/src/components/ChecklistDetail/ChecklistAnswerSection.tsx

@@ -17,7 +18,12 @@ const ChecklistAnswerSection = ({ categories }: Props) => {
          <div key={`accordion-${category.categoryId}`}>
            <Accordion.header text={category.categoryName} id={category.categoryId} isMarked={true} />
            <Accordion.body id={category.categoryId}>
-              <CategoryAccordion key={category.categoryId} category={category} />
+              {category.questions.map((question, index) => (


불필요한 depth 를 줄였습니다.

ooherin · 2024-11-21T23:33:16Z

frontend/src/components/EditChecklist/ChecklistContent/EditChecklistQuestionTemplate.tsx

-                question={question}
-                answer={answer}
-              />
+              <S.QuestionBox key={question.questionId}>


ChecklistQuestionItem을 제사용하기 위해 해당 컴포넌트의 Wrapper 를 제거하여 리팩토링하였습니다.

github-actions · 2024-11-21T23:45:46Z

🚀 storybook: https://669cc4025d9f500bb8c34778-utdxuimsxu.chromatic.com/

skiende74

수고하셨습니다

논의에대한답: 저는 색상은 어느 쪽이 되든 괜찮긴 한데, 굳이 고르라면 왼쪽(노랑)이 조금 더 좋은 것 같네요

skiende74 · 2024-11-22T10:14:21Z

frontend/src/pages/RoomCompareSelectPage.tsx

+const RoomCompareSelectPage = () => {
+  const navigate = useNavigate();
+  const [selectedRoomIds, setSelectedRoomIds] = useState<Set<number>>(new Set());
+  const { data: checklistList, isLoading } = useGetChecklistList();
+  const { showToast } = useToast();
+
+  const userChecklists = checklistList?.filter(checklist => checklist.checklistId !== 1) || [];
+
+  useEffect(() => {
+    if (userChecklists.length < MIN_ROOM_COMPARE_COUNT) {
+      showToast({ message: '비교 기능은 작성한 체크리스트가 2개 이상일 때만 가능합니다.' });
+      navigate(ROUTE_PATH.checklistList);
+    }
+  }, []);
+
+  const toggleSelectChecklist = (roomId: number) => {
+    setSelectedRoomIds(prev => {
+      const updatedSet = new Set(prev);
+      if (prev.has(roomId)) {
+        updatedSet.delete(roomId);
+      } else if (prev.size < 2) {
+        updatedSet.add(roomId);
+      } else {
+        showToast({ message: '방은 2개까지만 선택할 수 있습니다.', type: 'info' });
+      }
+      return updatedSet;
+    });
+  };
+
+  const handleClickBackward = () => navigate(ROUTE_PATH.checklistList);
+
+  const handleSelectRooms = () => {
+    if (selectedRoomIds.size !== 2) {
+      return showToast({ message: '비교할 2개의 방을 선택해주세요.', type: 'info' });
+    }
+    const rooms = [...selectedRoomIds];
+
+    navigate(ROUTE_PATH.roomCompare, {
+      state: {
+        roomId1: rooms[0],
+        roomId2: rooms[1],
+      },
+    });
+  };
+
+  return (
+    <>


방비교선택 예전 지워진 코드를 사용하지 않고 새로구현한 이유가 있나요?
예전 방비교선택 관련 코드에 로직 테스트코드랑 컴포넌트 스토리도 작성되어있었는데
그게 사라져서 조금 아쉽네요

앗 원래는 방 3개까지 비교가 되는 로직이었지만 2개의 방을 비교하는 로직으로 바뀌었습니다. 내부적인 디자인도 많이 바뀌어서 일부분만 사용했었는데요.기존 코드에 테스트 코드랑 스토리북 코드가 들어가있는 건 몰랐네요! 이 부분은 확인 후 반영해보도록 하겠습니다. 알려주셔서 감사해요😁
제이드도 취준으로 바쁘실텐데 화이팅입니다👏

그러게요 그때 열심히 작성한 코드,,,, 이렇게 돌아올지 알았다면 지우지 말껄,,,

healim01

확인했습니다~! 수고 많으셨어요 리안~~!!

방 비교 페이지가 결국 다시 멋지게 돌아왔네요
새로 변경된 메인도 계속 빨간 아이콘이 신경쓰이신다면 변경해도 괜찮을거 같습니다~

다만 아직 내부에 목데이터가 있는거 같아서 비교 api 를 모두 연결된 후 완전한 코드로 올라가는게 좋지 않을까 생각이 듭니다!

그리고 추가적으로 제안드릴 이야기는 코드 스타일 중 index.ts 를 사용해서 컴포넌트나 훅들을 가져오는 것에 대해서 어떻게 생각하시는지 물어보고 싶어요! 생각보다 저희 코드의 임포트 부분이 길다고 생각이 들어서요~!!

리안과 제이드는 어떻게 생각하시나요?

healim01 · 2024-11-23T13:45:42Z

frontend/src/components/RoomCompare/CategoryDetailModal.tsx

+//TODO: 임시 타입
+interface CategorySectionType {
+  id: SmallAnswerType;
+  text: string;
+  color: string;
+}
+
+const CateogorySection: CategorySectionType[] = [
+  { id: 'good', text: '긍정적', color: theme.palette.green400 },
+  { id: 'bad', text: '부정적', color: theme.palette.red500 },
+  { id: 'none', text: '무응답', color: theme.palette.grey300 },
+];
+


이건 아예 임시 타입인걸까요?

임시 타입이었지만 실제 적용하는 타입이 되었습니다!

healim01 · 2024-11-23T13:46:11Z

frontend/src/components/RoomCompare/CategoryDetailModal.tsx

+    display: flex;
+    margin: 0.5rem 0;
+
+    font-size: 14px;


기존 폰트 컨벤션을 사용하면 좋을거 같아요

healim01 · 2024-11-23T15:19:04Z

frontend/src/components/_common/Accordion/AccordionHeader.tsx

@@ -20,18 +21,16 @@ const AccordionHeader = ({
  text,
  isMarked = true,
  markColor = theme.palette.yellow500,
+  isShowMarkerIfOpen = true,


이게 추가된 이유는 마커를 안보여주고 싶을 때가 있어서 그랬을까요?

이번 디테일 모달을 구현하면서, 열린 경우에도 '시멘틱 라벨 색상' 을 보여주고 싶어서 구현하였습니다.
디테일 페이지의 아코디언에서는 닫힐 때는 라벨이 보이지 않는데, 이를 분기처리 해서 사용할려고 구현했어요!

healim01 · 2024-11-23T15:19:40Z

frontend/src/components/_common/Map/RoomCompareMap.tsx

+                text={'A방'}
+                size={'medium'}
+                onClick={() => handleRoomMarkerClick(0)}
+              />
+              <Marker
+                isCircle={false}
+                backgroundColor={theme.palette.green500}
+                text={'B방'}


방 비교 api 가 완성되었다고 들어서 mock 으로 처리될 걸 처리하고 머지되면 좋을거 같네요!

네네! 완성했습니다

healim01 · 2024-11-23T15:21:07Z

frontend/src/mocks/fixtures/checklistList.ts

@@ -4,7 +4,7 @@ export const checklistList: { checklists: ChecklistPreview[] } = {
  checklists: [
    {
      checklistId: 1,
-      roomName: '건대역 오픈형',
+      roomName: '예시용 체크리스트',


e2e 테스트 때문에 기존 데이터를 삭제하신걸까요?

어떤 데이터를 삭제했다는 건지 이해를 잘 못했는데, 위 변경은 '예시용 체크리스트' 가 '비교 대상' 에서 빠지는 것을 테스트하기 위해서 변경한 것입니다~! 물어보신게 이게 아니라면 다시 알려주세용!

healim01 · 2024-11-23T15:22:23Z

frontend/src/pages/RoomCompareSelectPage.tsx

+const RoomCompareSelectPage = () => {
+  const navigate = useNavigate();
+  const [selectedRoomIds, setSelectedRoomIds] = useState<Set<number>>(new Set());
+  const { data: checklistList, isLoading } = useGetChecklistList();
+  const { showToast } = useToast();
+
+  const userChecklists = checklistList?.filter(checklist => checklist.checklistId !== 1) || [];
+
+  useEffect(() => {
+    if (userChecklists.length < MIN_ROOM_COMPARE_COUNT) {
+      showToast({ message: '비교 기능은 작성한 체크리스트가 2개 이상일 때만 가능합니다.' });
+      navigate(ROUTE_PATH.checklistList);
+    }
+  }, []);
+
+  const toggleSelectChecklist = (roomId: number) => {
+    setSelectedRoomIds(prev => {
+      const updatedSet = new Set(prev);
+      if (prev.has(roomId)) {
+        updatedSet.delete(roomId);
+      } else if (prev.size < 2) {
+        updatedSet.add(roomId);
+      } else {
+        showToast({ message: '방은 2개까지만 선택할 수 있습니다.', type: 'info' });
+      }
+      return updatedSet;
+    });
+  };
+
+  const handleClickBackward = () => navigate(ROUTE_PATH.checklistList);
+
+  const handleSelectRooms = () => {
+    if (selectedRoomIds.size !== 2) {
+      return showToast({ message: '비교할 2개의 방을 선택해주세요.', type: 'info' });
+    }
+    const rooms = [...selectedRoomIds];
+
+    navigate(ROUTE_PATH.roomCompare, {
+      state: {
+        roomId1: rooms[0],
+        roomId2: rooms[1],
+      },
+    });
+  };
+
+  return (
+    <>


그러게요 그때 열심히 작성한 코드,,,, 이렇게 돌아올지 알았다면 지우지 말껄,,,

github-actions · 2024-11-24T09:54:09Z

🚀 storybook: https://669cc4025d9f500bb8c34778-cqkoondtnp.chromatic.com/

…ng-ggood into feat/952-compareRoom

skiende74 · 2024-11-24T11:20:57Z

@healim01

코드 스타일 중 index.ts 를 사용해서 컴포넌트나 훅들을 가져오는 것에 대해서 어떻게 생각하시는지 물어보고 싶어요

배럴 파일을 쓰면 트리쉐이킹이 무력화되고, 순환참조 가능성이 증가하는 점 때문에, 좋지 않게 생각하고 있어요. ! 😭
덤으로 컴포넌트를 만들때마다 배럴 파일(index.tsx)에 추가해줘야하는 수고도 있고요

관련 참고링크

순환참조 등 개괄 : Please Stop Using Barrel Files - Tkdodo
트리쉐이킹, 테스트 성능 : Barrel files and why you should STOP using them now - Dev.to
빌드성능관련(minor) : 배럴(Barrel) 파일의 대실패 - Korean FE Article

ooherin · 2024-11-24T16:19:45Z

@skiende74
제이드 덕분에 배럴 파일의 단점을 처음 알게 되었네요.. 단순히 import 문을 줄여주네? 너무 좋다라고 생각한 저를 반성하게 되네요..!!
참고자료를 읽어보니까 확실히 라이브러리를 제외한 일반 소스코드에서는 단점이 좀 더 많은 것 같아서 지양해야 할 것 같습니다.
친절한 링크 감사합니다!!

이러한 논의가 생기면 관련없는 PR 보다는 이제 issue 에 올려서 논의하는 건 어떤지 건의해봅니다! 😀

skiende74 · 2024-11-24T20:53:32Z

@ooherin

이러한 논의가 생기면 관련없는 PR 보다는 이제 issue 에 올려서 논의하는 건 어떤지 건의해봅니다! 😀

좋은 것 같습니다 !

github-actions · 2024-11-25T00:52:44Z

🚀 storybook: https://669cc4025d9f500bb8c34778-brblxohyrc.chromatic.com/

github-actions · 2024-11-25T06:16:36Z

🚀 storybook: https://669cc4025d9f500bb8c34778-kcqnbbqgye.chromatic.com/

skiende74

시일이 조금 걸리신다면 우선 머지하고 추후PR에서 반영하셔도 좋을거같습니다 !!

github-actions · 2024-11-29T03:55:21Z

🚀 storybook: https://669cc4025d9f500bb8c34778-ylfgvldhxf.chromatic.com/

ooherin added 13 commits October 25, 2024 10:26

fix: 복구

f501172

Merge branch 'dev-fe' of https://github.com/woowacourse-teams/2024-ba…

aee63d6

…ng-ggood into dev-fe

Merge branch 'dev-fe' of https://github.com/woowacourse-teams/2024-ba…

e660e67

…ng-ggood into dev-fe

fix: 충돌 해결

800f221

Merge branch 'dev-fe' of https://github.com/woowacourse-teams/2024-ba…

cf910ac

…ng-ggood into dev-fe

feat: 체크리스트 작성 페이지 퍼블리싱

eef7c37

feat: 방 비교 선택 페이지 데이터 로직 완성

a60e94a

feat: 옵션 디테일 모달 완성

6091a54

feat: 체크리스트 카테고리 디테일 쿼리 생성

0cb6a29

feat: 카테고리 디테일 질문 모달 완성

29b99e9

fix: 불필요한 페이지 코드 삭제 및 Badge 컴포넌트 리팩토링

4411edb

feat: 불필요한 컴포넌트 Marker 공용 컴포넌트로 만들어서 통합

7b288ff

fix: HightLight 컴포넌트 폰트 크기 확장 및 적용

9b495e4

ooherin temporarily deployed to frontend-msw November 19, 2024 03:03 — with GitHub Actions Inactive

feat: 작업 중 불필요한 변경사항 삭제

2981338

ooherin temporarily deployed to frontend-msw November 19, 2024 03:08 — with GitHub Actions Inactive

ooherin self-assigned this Nov 19, 2024

ooherin marked this pull request as draft November 19, 2024 03:08

Merge branch 'dev-fe' of https://github.com/woowacourse-teams/2024-ba…

7421ae8

…ng-ggood into feat/952-compareRoom

ooherin temporarily deployed to frontend-msw November 19, 2024 03:14 — with GitHub Actions Inactive

fix: 디테일 아코디언 컴포넌트 리팩토링 및 적용

08731cd

ooherin temporarily deployed to frontend-msw November 19, 2024 06:21 — with GitHub Actions Inactive

ooherin marked this pull request as ready for review November 21, 2024 08:39

feat: 방 비교 선택 페이지 스켈레톤 생성

fe893f2

ooherin temporarily deployed to frontend-msw November 21, 2024 10:09 — with GitHub Actions Inactive

ooherin commented Nov 21, 2024

View reviewed changes

fix: 불필요한 커밋 수정

7aef9a4

ooherin temporarily deployed to frontend-msw November 21, 2024 23:31 — with GitHub Actions Inactive

ooherin commented Nov 21, 2024

View reviewed changes

fix: 변경된 api url 로 수정

293e07b

ooherin temporarily deployed to frontend-msw November 21, 2024 23:44 — with GitHub Actions Inactive

skiende74 reviewed Nov 22, 2024

View reviewed changes

healim01 requested changes Nov 23, 2024

View reviewed changes

healim01 added 🔑 FE 😊 Feature labels Nov 23, 2024

fix: 비교 백엔드 api 연결 및 라우팅 수정

4e0c44b

ooherin temporarily deployed to frontend-msw November 24, 2024 09:51 — with GitHub Actions Inactive

Merge branch 'dev-fe' of https://github.com/woowacourse-teams/2024-ba…

8282257

…ng-ggood into feat/952-compareRoom

refactor: roomComparePage의 접근성을 높이기 위해 리팩토링

d54d68f

ooherin temporarily deployed to frontend-msw November 25, 2024 00:50 — with GitHub Actions Inactive

fix: attribute 타입의 범위를 작게 수정

a726810

ooherin temporarily deployed to frontend-msw November 25, 2024 06:14 — with GitHub Actions Inactive

skiende74 approved these changes Nov 27, 2024

View reviewed changes

fix: 지하철 섹션 비교 ui 수정

5cbcaaf

ooherin temporarily deployed to frontend-msw November 29, 2024 03:53 — with GitHub Actions Inactive

ooherin merged commit 1a198ab into dev-fe Nov 29, 2024
3 checks passed

ooherin deleted the feat/952-compareRoom branch November 29, 2024 04:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] 새 방 비교 페이지를 완성하고 방 선택 페이지를 만들어 연결한다. #973

[FE] 새 방 비교 페이지를 완성하고 방 선택 페이지를 만들어 연결한다. #973

ooherin commented Nov 19, 2024 •

edited

Loading

github-actions bot commented Nov 19, 2024

github-actions bot commented Nov 19, 2024

github-actions bot commented Nov 19, 2024

github-actions bot commented Nov 21, 2024

ooherin Nov 21, 2024

github-actions bot commented Nov 21, 2024

ooherin Nov 21, 2024

ooherin Nov 21, 2024

github-actions bot commented Nov 21, 2024

skiende74 left a comment •

edited

Loading

skiende74 Nov 22, 2024 •

edited

Loading

ooherin Nov 23, 2024

healim01 Nov 23, 2024

healim01 left a comment

healim01 Nov 23, 2024

ooherin Nov 24, 2024

healim01 Nov 23, 2024

healim01 Nov 23, 2024

ooherin Nov 24, 2024

healim01 Nov 23, 2024

ooherin Nov 24, 2024

healim01 Nov 23, 2024

ooherin Nov 24, 2024

healim01 Nov 23, 2024

github-actions bot commented Nov 24, 2024

skiende74 commented Nov 24, 2024 •

edited

Loading

ooherin commented Nov 24, 2024

skiende74 commented Nov 24, 2024 •

edited

Loading

github-actions bot commented Nov 25, 2024

github-actions bot commented Nov 25, 2024

skiende74 left a comment •

edited

Loading

github-actions bot commented Nov 29, 2024

[FE] 새 방 비교 페이지를 완성하고 방 선택 페이지를 만들어 연결한다. #973

[FE] 새 방 비교 페이지를 완성하고 방 선택 페이지를 만들어 연결한다. #973

Conversation

ooherin commented Nov 19, 2024 • edited Loading

❗ Issue

✨ 구현한 기능

비교 선택 페이지를 만들었습니다.

1. 기존의 컴포넌트들을 재사용하였으며, 몇 컴포넌트를 리팩토링 했습니다.

2. Marker 라는 새로운 컴포넌트를 만들었습니다.

📢 논의하고 싶은 내용

🎸 기타

github-actions bot commented Nov 19, 2024

github-actions bot commented Nov 19, 2024

github-actions bot commented Nov 19, 2024

github-actions bot commented Nov 21, 2024

Choose a reason for hiding this comment

github-actions bot commented Nov 21, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Nov 21, 2024

skiende74 left a comment • edited Loading

Choose a reason for hiding this comment

skiende74 Nov 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

healim01 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

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

github-actions bot commented Nov 24, 2024

skiende74 commented Nov 24, 2024 • edited Loading

ooherin commented Nov 24, 2024

skiende74 commented Nov 24, 2024 • edited Loading

github-actions bot commented Nov 25, 2024

github-actions bot commented Nov 25, 2024

skiende74 left a comment • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Nov 29, 2024

ooherin commented Nov 19, 2024 •

edited

Loading

skiende74 left a comment •

edited

Loading

skiende74 Nov 22, 2024 •

edited

Loading

skiende74 commented Nov 24, 2024 •

edited

Loading

skiende74 commented Nov 24, 2024 •

edited

Loading

skiende74 left a comment •

edited

Loading