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

woowacourse-teams · Jul 31, 2024 · e28207f · e28207f
1 parent 2901137
commit e28207f
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 14 deletions.
diff --git a/frontend/src/components/RoomCompare/CompareCard.tsx b/frontend/src/components/RoomCompare/CompareCard.tsx
@@ -1,6 +1,9 @@
 import styled from '@emotion/styled';
+import { useState } from 'react';
 
+import Badge from '@/components/common/Badge/Badge';
 import FaceMark from '@/components/common/FaceMark/FaceMark';
+import Modal from '@/components/common/Modal/Modal';
 import CompareItem from '@/components/RoomCompare/CompareItem';
 import { boxShadow, flexColumn, title1, title2, title3 } from '@/styles/common';
 import { ChecklistCompare } from '@/types/checklist';
@@ -28,6 +31,16 @@ const CompareCard = ({ room, compareNum }: Props) => {
   } = room;
   const isHightestRoom = rank === 1 || compareNum === 2 ? true : false;
 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleClose = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleOpen = () => {
+    setIsModalOpen(true);
+  };
+
   return (
     <S.Container isHightLight={isHightestRoom && compareNum === 3}>
       <S.Title>{roomName}</S.Title>
@@ -78,8 +91,18 @@ const CompareCard = ({ room, compareNum }: Props) => {
       <CompareItem
         label={'옵션'}
         isLabeled={isHightestRoom}
-        item={<S.OptionButton>{options.length}개</S.OptionButton>}
+        item={<S.OptionButton onClick={handleOpen}>{options.length}개</S.OptionButton>}
       />
+      <Modal isOpen={isModalOpen} onClose={handleClose} hasCloseButton={true}>
+        <Modal.header title="옵션 종류" />
+        <Modal.body>
+          <S.Box>
+            {options.map(option => (
+              <Badge type="long" key={option.optionId} label={option.optionName} />
+            ))}
+          </S.Box>
+        </Modal.body>
+      </Modal>
       <S.Subtitle isLabeled={isHightestRoom}>체크리스트</S.Subtitle>
       {categories.map(category => {
         const { categoryId, categoryName, score } = category;
@@ -145,6 +168,12 @@ const S = {
     border-radius: 8px;
     ${boxShadow}
   `,
+  Box: styled.div`
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 10px;
+  `,
   Subtitle: styled.div<{ isLabeled: boolean }>`
     visibility: ${({ isLabeled }) => (isLabeled ? 'visible' : 'hidden')};
     margin-top: 20px;

diff --git a/frontend/src/components/common/Modal/Modal.tsx b/frontend/src/components/common/Modal/Modal.tsx
@@ -76,7 +76,7 @@ const positionMapper = (position: ModalPosition) => {
         transform: 'translate(-50%, -50%)',
         borderRadius: '8px',
         width: '100%',
-        maxWidth: '80%',
+        maxWidth: '85%',
       });
     case 'bottom':
       return css({

diff --git a/frontend/src/mocks/fixtures/roomsForCompare.ts b/frontend/src/mocks/fixtures/roomsForCompare.ts
@@ -10,7 +10,13 @@ export const threeRoomsForCompare = {
       contractTerm: 12,
       station: '잠실역',
       walkingTime: 10,
-      options: [1, 5, 6, 7, 10],
+      options: [
+        { optionId: 1, optionName: '냉장고' },
+        { optionId: 2, optionName: '전자레인지' },
+        { optionId: 3, optionName: '엘리베이터' },
+        { optionId: 4, optionName: '베란다' },
+        { optionId: 5, optionName: '반려동물 가능' },
+      ],
       realEstate: '방끗공인중개사',
       type: '원룸',
       size: 24,
@@ -43,7 +49,11 @@ export const threeRoomsForCompare = {
       station: '잠실역',
       walkingTime: 7,
       realEstate: '송파 부동산',
-      options: [1, 2, 3],
+      options: [
+        { optionId: 1, optionName: '냉장고' },
+        { optionId: 2, optionName: '전자레인지' },
+        { optionId: 3, optionName: '엘리베이터' },
+      ],
       categories: [
         {
           categoryId: 1,
@@ -65,7 +75,11 @@ export const threeRoomsForCompare = {
       score: 77,
       deposit: 1000,
       rent: 30,
-      options: [1, 2, 3],
+      options: [
+        { optionId: 1, optionName: '냉장고' },
+        { optionId: 2, optionName: '전자레인지' },
+        { optionId: 3, optionName: '엘리베이터' },
+      ],
       categories: [
         {
           categoryId: 1,
@@ -98,7 +112,11 @@ export const twoRoomsForCompare = {
       score: 87,
       deposit: 1000,
       rent: 30,
-      options: [1, 2, 3],
+      options: [
+        { optionId: 1, optionName: '냉장고' },
+        { optionId: 2, optionName: '전자레인지' },
+        { optionId: 3, optionName: '엘리베이터' },
+      ],
       categories: [
         {
           categoryId: 1,
@@ -126,7 +144,11 @@ export const twoRoomsForCompare = {
       score: 87,
       deposit: 1000,
       rent: 30,
-      options: [1, 2, 3],
+      options: [
+        { optionId: 1, optionName: '냉장고' },
+        { optionId: 2, optionName: '전자레인지' },
+        { optionId: 3, optionName: '엘리베이터' },
+      ],
       categories: [
         {
           categoryId: 1,

diff --git a/frontend/src/types/checklist.ts b/frontend/src/types/checklist.ts
@@ -29,23 +29,22 @@ export interface ChecklistFormAnswer {
   answer: number;
 }
 
-export interface Option {
-  id: number;
-  filled: string;
-  unfilled: string;
-}
-
 export interface ChecklistPreview extends RoomInfo {
   checklistId: number;
   badge?: Badge[];
   createdAt: string;
 }
 
+export interface Option {
+  optionId: number;
+  optionName: string;
+}
+
 export interface ChecklistCompare extends RoomInfo {
   checklistId: number;
   rank: number;
   score: number;
-  options: number[];
+  options: Option[];
   categories: CategoryScore[];
 }