[FE] 새로운 방 비교 페이지를 퍼블리싱하고 비교 지도를 만든다. #958

ooherin · 2024-11-14T02:32:41Z

❗ Issue

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

✨ 구현한 기능

비교 페이지의 새로운 디자인과 퍼블리싱을 완료했습니다.

현재 api 나 mocking 로직은 들어가 있지 않으며, css 코드가 대다수입니다! 현재 api를 반영하여 데이터를 수정하는 작업을 진행중에 있습니다.
카테고리 질문의 경우 카테고리 별 평균 값을 % 단위로 서버에서 받아오며, 이에 대한 디테일은 버튼을 누르면 모달 형식으로 띄우려고 합니다. 현재 디자인을 진행 중에 있어 다음 PR에 올리겠습니다.
옵션의 경우도 카테고리와 마찬가지로 버튼을 누르면 모달 형식으로 뜹니다. 해당 디자인은 하단에 첨부하였습니다.

지도 안에 들어가는 비교 지도도 `RoomCompareMap` 이라는 이름으로 만들었습니다.

해당 지도는 두 지점(A,B) 의 거리를 재서 해당 거리에 맞는 MapLevel(지도가 얼마나 가까이 보이는지)를 설정해주고 있습니다.
지도 하단의 A,B 버튼을 누르면 해당 방의 위치로 이동하는 기능도 추가하였습니다.

📢 논의하고 싶은 내용

현재 방 비교 관련 네이밍을 RoomCompare로 지정한 상태인데 정확히 말하면 ChecklistCompare라 이 둘중에서 고민이 되었네요! 어떻게 생각하시나요?

🎸 기타

방 비교 선택 페이지도 곧 만들 예정입니다.

…ng-ggood into dev-fe

healim01 · 2024-11-14T02:33:13Z

구경왔어요 근데 충돌나요~!

github-actions · 2024-11-14T02:38:51Z

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

skiende74 · 2024-11-14T03:41:03Z

스샷넣어주세요~

github-actions · 2024-11-14T23:23:43Z

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

ooherin · 2024-11-14T23:53:24Z

frontend/src/utils/createKakaoMapElements.ts

-    const options = {
-      center,
-      level: 3,
+  const createMarker = (kakao: any, map: any, position: any, color: 'primary' | 'secondary', title?: string) => {


map 참조 에러 때문에 위험하다고 판단해 createMap 로직을 지웠습니다.

github-actions · 2024-11-14T23:53:49Z

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

ooherin · 2024-11-15T00:02:18Z

frontend/src/components/_common/Header/Header.tsx

@@ -58,7 +58,7 @@ const S = {
    display: flex;
    justify-content: flex-start;
    align-items: center;
-    min-width: 70px;
+    min-width: 5rem;


헤더의 가운데 정렬이 맞지 않은 에러를 고쳤습니다!

skiende74

네이밍은 RoomCompare가 더 끌리네요
수고하셨습니다

skiende74 · 2024-11-15T07:00:54Z

frontend/src/assets/icons/answer/bad.tsx

-    <svg {...rest} width="27" height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg {...rest} width={width ?? ''} height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg">


good.tsx는 width ?? '29'되어있는데
bad.tsx는 width ?? '' 된 것은 의도된 것일까요?

앗 실수했네요! 감사합니다:)

skiende74 · 2024-11-15T07:21:23Z

frontend/src/components/_common/Subway/SubwayLineIcon/SubwayLineIcon.tsx

+    width: ${({ isCircle, size }) =>
+      isCircle && size === 'medium' ? '2rem' : isCircle && size === 'small' ? '1.4rem' : null};


훨씬 좋네요!!👍👍

healim01

얼굴 이모지들이 죽지 않고 돌아왔네요...~~~ ㅋㅋㅋㅋㅋ

수고하셨습니당 그런데 지금 백엔드 코드가 아직 없어서 그런걸까요? 목 데이터가 코드 내에 포함되어 있네요 확인부탁드려욜~!

healim01 · 2024-11-15T08:04:25Z

frontend/src/assets/assets.tsx

+  FaceBadIcon,
+  FaceGoodIcon,
+  FaceNoneIcon,
+  FaceSosoIcon,


돌아온 얼굴들,,,

ㅎㅎㅎㅋㅋ죽지 않고 돌아온~~

healim01 · 2024-11-15T08:05:23Z

frontend/src/components/RoomCompare/CategoryScore.tsx

+const MIN_GOOD_SCORE = 70;
+const MIN_SOSO_SCORE = 30;


상수처리로 분리되면 좋을거 같네용

healim01 · 2024-11-15T08:05:32Z

frontend/src/components/RoomCompare/CompareCard.tsx

+  openCategoryModal: (roomId: number, categoryId: number) => void;
+}
+
+const EmptyIndicator = ' - ';


이부분도욜

분리하니까 깔끔하네요!

healim01 · 2024-11-15T08:08:10Z

frontend/src/mocks/handlers/roomCompare.ts

+import { roomsForCompare } from '@/mocks/fixtures/roomCompare';
+
+export const roomCompareHandlers = [
+  http.get(BASE_URL + ENDPOINT.CHECKLIST_QUESTION, () => {


endpoint가 이게 맞나용?

아직 api url을 안써서 대충 집어넣었나 봐요..😅 고쳐서 올렸습니다!!감사합니다

healim01 · 2024-11-15T08:08:42Z

frontend/src/pages/RoomComparePage.tsx

+  const optionMock = [
+    { optionName: '세탁기', hasRoom1: true, hasRoom2: false },
+    { optionName: '세탁기', hasRoom1: true, hasRoom2: false },
+    { optionName: '세탁기', hasRoom1: true, hasRoom2: false },
+    { optionName: '세탁기', hasRoom1: true, hasRoom2: false },
+    { optionName: '세탁기', hasRoom1: true, hasRoom2: false },
+    { optionName: '세탁기', hasRoom1: true, hasRoom2: false },
+  ];


이건,,,? 무슨 코드일까요??

api 데이터 대신 쓴 목데이터 입니다! pr 메세지에 언급했다시피 현재 api 관련 데이터 로직이 안들어가 있어요 (코드 변경이 너무 많아져서요!) 다음 pr에 올리도록 하겠습니다!

healim01 · 2024-11-15T08:09:17Z

frontend/src/utils/mapHelper.ts

👍👍👍

github-actions · 2024-11-16T02:11:10Z

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

ooherin added 10 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

feat: 체크리스트 방 비교 타입 및 페이지 생성

67a544b

feat: compare 페이지 1차 퍼블리싱

ee18d85

feat: 방 2개 마커 있는 지도 생성

e9a625a

feat: 지도 roomMarker 해당 위치 이동 기능 생성

42a40f7

feat: 옵션 자세히 보기 모달 생성

275be8c

feat: 옵션 모달 레이아웃 생성

454da1c

feat: 방 비교 체크리스트 디테일 모달 생성 및 라우트 연결

27cfb48

feat: 병합 충돌 해결

a7766a5

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

ooherin marked this pull request as draft November 14, 2024 23:06

fix: 옵션 비교 모달 css 수정

982d21b

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

ooherin self-assigned this Nov 14, 2024

feat: 지도 거리 유틸 분리 및 map 로직 일부 수정

fe25df7

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

ooherin commented Nov 14, 2024

View reviewed changes

ooherin marked this pull request as ready for review November 15, 2024 00:01

ooherin requested review from skiende74 and healim01 November 15, 2024 00:01

ooherin commented Nov 15, 2024

View reviewed changes

ooherin changed the title ~~[FE] 새로운 방 비교 기능을 만든다.~~ [FE] 새로운 방 비교 페이지를 퍼블리싱하고 비교 지도를 만든다. Nov 15, 2024

skiende74 reviewed Nov 15, 2024

View reviewed changes

healim01 requested changes Nov 15, 2024

View reviewed changes

fix: 코드 리뷰 반영

34b0b29

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

skiende74 approved these changes Nov 16, 2024

View reviewed changes

ooherin requested a review from healim01 November 16, 2024 03:25

healim01 approved these changes Nov 16, 2024

View reviewed changes

ooherin merged commit 67f1e53 into dev-fe Nov 18, 2024
3 checks passed

ooherin deleted the feat/952-compare branch November 18, 2024 08:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] 새로운 방 비교 페이지를 퍼블리싱하고 비교 지도를 만든다. #958

[FE] 새로운 방 비교 페이지를 퍼블리싱하고 비교 지도를 만든다. #958

ooherin commented Nov 14, 2024 •

edited

Loading

healim01 commented Nov 14, 2024

github-actions bot commented Nov 14, 2024

skiende74 commented Nov 14, 2024

github-actions bot commented Nov 14, 2024

ooherin Nov 14, 2024

github-actions bot commented Nov 14, 2024

ooherin Nov 15, 2024

skiende74 left a comment

skiende74 Nov 15, 2024

ooherin Nov 16, 2024

skiende74 Nov 15, 2024

ooherin Nov 16, 2024

healim01 left a comment

healim01 Nov 15, 2024

ooherin Nov 16, 2024 •

edited

Loading

healim01 Nov 15, 2024

healim01 Nov 15, 2024

ooherin Nov 16, 2024

healim01 Nov 15, 2024

ooherin Nov 16, 2024

healim01 Nov 15, 2024

ooherin Nov 16, 2024

healim01 Nov 15, 2024

github-actions bot commented Nov 16, 2024

		<svg {...rest} width="27" height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg">
		<svg {...rest} width={width ?? ''} height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg">

		width: ${({ isCircle, size }) =>
		isCircle && size === 'medium' ? '2rem' : isCircle && size === 'small' ? '1.4rem' : null};

	width: ${({ isCircle, size }) =>
	isCircle && size === 'medium' ? '2rem' : isCircle && size === 'small' ? '1.4rem' : null};
	width: ${({ isCircle, size }) => isCircle && sizeMap[size]};

[FE] 새로운 방 비교 페이지를 퍼블리싱하고 비교 지도를 만든다. #958

[FE] 새로운 방 비교 페이지를 퍼블리싱하고 비교 지도를 만든다. #958

Conversation

ooherin commented Nov 14, 2024 • edited Loading

❗ Issue

✨ 구현한 기능

비교 페이지의 새로운 디자인과 퍼블리싱을 완료했습니다.

지도 안에 들어가는 비교 지도도 RoomCompareMap 이라는 이름으로 만들었습니다.

📢 논의하고 싶은 내용

🎸 기타

healim01 commented Nov 14, 2024

github-actions bot commented Nov 14, 2024

skiende74 commented Nov 14, 2024

github-actions bot commented Nov 14, 2024

Choose a reason for hiding this comment

github-actions bot commented Nov 14, 2024

Choose a reason for hiding this comment

skiende74 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

healim01 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ooherin Nov 16, 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

github-actions bot commented Nov 16, 2024

ooherin commented Nov 14, 2024 •

edited

Loading

지도 안에 들어가는 비교 지도도 `RoomCompareMap` 이라는 이름으로 만들었습니다.

ooherin Nov 16, 2024 •

edited

Loading