[FE] 방 비교 페이지 옵션 모달 추가 및 카테고리 점수 리스트 기능을 수정한다. #187

healim01 · 2024-07-31T08:13:05Z

❗ Issue

[FE] 방 비교 페이지 컨텐츠 추가 및 카테고리 점수 리스트 기능을 수정한다. #179

✨ 구현한 기능

모든 카테고리의 점수를 표시
- 점수 없으면 무응답 표정으로 표시 나타냄
옵션 정보 담겨있는 모달 추가

추가적으로 하단 플로팅 버튼이 클릭 위치가 아니어도 클릭되는 버그를 고쳤습니다.
++ 모달 컴포넌트도 센터 포지션일 때 패딩이 없는 것, 최대 사이즈가 355이었던 것들 모두 수정했습니다.

📢 논의하고 싶은 내용

모달 컴포넌트가 화면 사이즈에 맞게 수정했습니다.
현재 옵션 모달 내부가 최대 사이즈가 400 픽셀 이하로 픽스되어 있는거 같은데 수정이 필요해 보입니다.

이전 작업물 형태

🎸 기타

아직 백엔드 프로퍼티 이름도 정해지기 전이라 칸만 만들어놓고 주석처리해놨습니다. 이후 프로퍼티 정해지면 수정할 예정입니다.

github-actions · 2024-07-31T08:15:27Z

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

skiende74 · 2024-07-31T08:39:05Z

frontend/src/assets/icons/delete.svg

이건 그냥질문인데 삭제하신 이유가있을까요?

close 아이콘이 두개나 존재해서 하나로 동일했습니다.
통일 과정에서 불분명한 이름인 XIcon 을 삭제했습니다.

기존 있던 아이콘이 CloseIcon 삭제한 아이콘이 XIcon 입니다.

skiende74 · 2024-07-31T08:43:45Z

frontend/src/mocks/fixtures/checklistList.ts

+export const checklistList = {
+  checklists: [
+    {
+      checklistId: 1,
+      roomName: '스튜디오 아파트',


interface 타입이 바뀜에 따른 업데이트인가요?

api 전달 값을 반영한 업데이트입니다.

skiende74 · 2024-07-31T09:05:55Z

frontend/src/components/common/Modal/Modal.tsx

+    case 'center':
+      return css({
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+        borderRadius: '8px',
+        width: '100%',
+        maxWidth: '85%',
+      });
+    case 'bottom':
+      return css({
+        bottom: '0px',
+        transform: 'translate(-50%, 0%)',
+        borderRadius: '16px 16px 0px 0px',
+        width: '100%',
+        boxSizing: 'border-box',
+      });
+  }


저의 이해로는 여기선 css``로 사용할수있을거같은데 {}를 사용하신 이유가있으실까요?

함수와 switch-case를 이용해서 매핑하기보단 객체를 이용해서 매핑할수있을까요?

아 이전에 코드와 통일되게 사용할 수 있겠네요 일단 현재 리안이 수정 중이라 이후 리팩토링하도록 하겠습니다.

ooherin · 2024-07-31T23:45:15Z

frontend/src/components/RoomCompare/CompareCard.tsx


-  const isHightestRoom = count === 1 ? true : false;
+  const [isModalOpen, setIsModalOpen] = useState(false);


잘 써주셨지만 이 모달 로직을 훅으로 뺼 수 있을 것 같다는 생각이 드네요! 다음에 재사용하기도 훨씬 편해질 것 같습니다:)

모달 내부 로직을 리팩토링해봐야겠네요

알겠습니다!

ooherin · 2024-07-31T23:46:40Z

frontend/src/components/RoomCompare/CompareCard.tsx

+            label={categoryName}
+            isLabeled={isHightestRoom}
+            item={
+              <FaceMark>


이 표시 컴포넌트는 하위 컴포넌트로 분리해도 좋을 것 같다는 생각이 들긴 하네요! 근데 이건 취향 차이라 참고만 해주세요!

표시 컴포넌트가 의미하시는게 뭘까요? 표정 아이콘을 말씀하시는 걸까요?

넵 그렇습니다! 사실 이미 합성 컴포넌트라서 잘 되어있긴 한데, 하나의 props에 태그가 여러개 들어간 게 어색해서 드린 말씀이었어요!

ooherin · 2024-07-31T23:49:04Z

frontend/src/components/common/Modal/Modal.tsx

-            </S.CloseIcon>
-          )}
-        </S.ModalInner>
+        {children}


모달 내부가 훨씬 깔끔해 졌어요!

ooherin · 2024-08-01T00:01:20Z

frontend/src/components/common/Modal/Modal.tsx

+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+        borderRadius: '8px',
+        width: '100%',


bottom postion의 모달의 width 를 100% 로 고정시킨 것은 잘 하신 것 같아요! 근데 center 도 width 를 100% 로 한다면 모달의 다양한 사용을 막을 수도 있을 것 같아요.

저는 위와 같이 알림 모달도 사용하려면 px 이 정해져 있어야 한다고 생각해요. 사실 헤일리의 의도는 반응형을 고려한 것이라, 이해는 됩니다. 아마 더 구체적인 모달의 사이즈 조정이 필요한 것 같아요.

const modalSize = { mobile: { small: { width: '90%', maxWidth: '320px', maxHeight: '80%' }, large: { width: '100%', maxWidth: '400px', maxHeight: '90%' } }, screen660: { small: { width: '80%', maxWidth: '500px', maxHeight: '70%' }, large: { width: '90%', maxWidth: '600px', maxHeight: '80%' } } };

위와 같이 모달의 크기를 조정하면 어떨까요? 위와 같은 코드를 짜면 다음과 같은 장점이 있습니다.

width 이 반응형으로 잘 늘어남.

max-height 만 준다면 해당 콘텐츠의 길이만 차지하게 됨.

모바일과 데스크톱의 사이즈를 분리하므로서 어느 화면에서도 어색하지 않음.

(참고 모바일은 일반적으로 360px ~ 480px 의 너비를 가진다고 하네요!)

사실상 maxWidth 가 maxWidth: '85%', 으로 해당 페이지의 85프로만 사이즈를 가지고 있을거 같네요.

알림 모달 사용을 위해 더 작은 width 의 모달이 필요하신걸까요?

이 부분은 제가 착각했네요!

ooherin · 2024-08-01T00:02:18Z

frontend/src/mocks/handlers/checklist.ts

+    const url = new URL(request.url);
+    const roomIds = url.searchParams.getAll('id');
+
+    if (!roomIds[2]) return HttpResponse.json(twoRoomsForCompare, { status: 200 });


오 세부적인 handler 작성 좋아요!!

ooherin · 2024-08-01T00:11:36Z

개인적으로 옵션 모달은 botttom 보다 center 가 적합하다고 생각해요! 물론 사이즈 조정이 된다는 가정하에요!

그전에는 그리드를 사용했었습니다. 하지만 헤일리 의견대로 한다면 (bottom일 떄 100%) 데스크톱일 떄 css 의 완성도가 떨어집니다. 그냥 flex로 하면 위와 같이 되서, 반응형으로 600일떄와 모바일일 때 grid를 다르게 적용시켜야 하는데, 저는 사실 이것이 조금 불필요하다고 생각해요.

만약 center 로 한다면 다음과 같은 이점이있다고 생각합니다 .

반응형에 따라 레이아웃이 크게 바뀌지 않음 (줄 수가 많이 바뀌지 않음)
사용자는 옵션을 정중앙에서 보기 때문에 ui 상 자연스러움

헤일리의 의견은 어떠신가요?

healim01 · 2024-08-01T01:28:58Z

그전에는 그리드를 사용했었습니다. 하지만 헤일리 의견대로 한다면 (bottom일 떄 100%) 데스크톱일 떄 css 의 완성도가 떨어집니다. 그냥 flex로 하면 위와 같이 되서, 반응형으로 600일떄와 모바일일 때 grid를 다르게 적용시켜야 하는데, 저는 사실 이것이 조금 불필요하다고 생각해요.

이전에 구두로 전달해드린 것과 같이 모바일 뷰일 때 그리드를 다르게 적용시킬 필요가 없어서 전달 드렸습니다~
이후에 리팩토링하신다고 해서 반영해서 리팩토링 하시면 될거 같습니다.

사용자는 옵션을 정중앙에서 보기 때문에 ui 상 자연스러움

이건 조금 더 고민해볼 필요가 있는거 같네요.

github-actions · 2024-08-01T01:43:18Z

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

skiende74

approve합니다

healim01 added 8 commits July 31, 2024 15:26

feat: 방 비교 api 비교 방 2개 처리 가능하게 변경

409b55c

chore: mock 핸들러 중 방비교 api id3 일때 다른 결과 리턴 처리

e61a149

refactor: room 구조분해하여 코드 변경

0b1b90c

chore: 백엔드 api 재수정으로 인해 이전 코드로 복구

1230ad9

feat: 방 추가 정보 타입 선언 및 score null 처리

c6f4db1

feat: 모달 컴포넌트 센터 포지션 관련 css 추가 및 불필요한 스타일 정리

2901137

feat: 방 비교 옵션 종류 모달 추가

e28207f

fix: 플로팅 버튼과 카드 리스트 겹치는 에러 해결

4c1e45e

healim01 added 🐛 Bug 🔑 FE 😊 Feature labels Jul 31, 2024

healim01 self-assigned this Jul 31, 2024

healim01 changed the title ~~Feat/179 compare room add contents~~ [FE] 방 비교 페이지 컨텐츠 추가 및 카테고리 점수 리스트 기능을 수정한다. Jul 31, 2024

healim01 changed the title ~~[FE] 방 비교 페이지 컨텐츠 추가 및 카테고리 점수 리스트 기능을 수정한다.~~ [FE] 방 비교 페이지 옵션 모달 추가 및 카테고리 점수 리스트 기능을 수정한다. Jul 31, 2024

skiende74 reviewed Jul 31, 2024

View reviewed changes

ooherin reviewed Aug 1, 2024

View reviewed changes

design: 넘치는 텍스트 줄바꿈 처리 진행

ac0608b

skiende74 approved these changes Aug 1, 2024

View reviewed changes

ooherin merged commit ab2effa into dev-fe Aug 1, 2024
2 checks passed

healim01 deleted the feat/179-compare-room-add-contents branch August 12, 2024 06:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] 방 비교 페이지 옵션 모달 추가 및 카테고리 점수 리스트 기능을 수정한다. #187

[FE] 방 비교 페이지 옵션 모달 추가 및 카테고리 점수 리스트 기능을 수정한다. #187

healim01 commented Jul 31, 2024 •

edited

Loading

github-actions bot commented Jul 31, 2024

skiende74 Jul 31, 2024

healim01 Aug 1, 2024 •

edited

Loading

skiende74 Jul 31, 2024

healim01 Aug 1, 2024

skiende74 Jul 31, 2024 •

edited

Loading

skiende74 Jul 31, 2024

healim01 Aug 1, 2024

ooherin Jul 31, 2024

healim01 Aug 1, 2024

ooherin Aug 1, 2024

ooherin Jul 31, 2024

healim01 Aug 1, 2024

ooherin Aug 1, 2024

ooherin Jul 31, 2024

ooherin Aug 1, 2024

healim01 Aug 1, 2024

ooherin Aug 1, 2024

ooherin Aug 1, 2024

ooherin commented Aug 1, 2024

healim01 commented Aug 1, 2024 •

edited

Loading

github-actions bot commented Aug 1, 2024

skiende74 left a comment


		const isHightestRoom = count === 1 ? true : false;
		const [isModalOpen, setIsModalOpen] = useState(false);

[FE] 방 비교 페이지 옵션 모달 추가 및 카테고리 점수 리스트 기능을 수정한다. #187

[FE] 방 비교 페이지 옵션 모달 추가 및 카테고리 점수 리스트 기능을 수정한다. #187

Conversation

healim01 commented Jul 31, 2024 • edited Loading

❗ Issue

✨ 구현한 기능

📢 논의하고 싶은 내용

🎸 기타

github-actions bot commented Jul 31, 2024

Choose a reason for hiding this comment

healim01 Aug 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

skiende74 Jul 31, 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

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

ooherin commented Aug 1, 2024

healim01 commented Aug 1, 2024 • edited Loading

github-actions bot commented Aug 1, 2024

skiende74 left a comment

Choose a reason for hiding this comment

healim01 commented Jul 31, 2024 •

edited

Loading

healim01 Aug 1, 2024 •

edited

Loading

skiende74 Jul 31, 2024 •

edited

Loading

healim01 commented Aug 1, 2024 •

edited

Loading