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

frontend/src/apis/room.ts

@@ -0,0 +1,14 @@
+import fetcher from '@/apis/fetcher';
+import { BASE_URL, ENDPOINT } from '@/apis/url';
+
+export const getRoomCompare = async (roomId1: number, roomId2: number) => {
+  const response = await fetcher.get({ url: BASE_URL + ENDPOINT.ROOM_COMPARE(roomId1, roomId2) });
+  const data = await response.json();
+  return data.checklists;
+};
+
+export const getRoomCategoryDetail = async ({ roomId, categoryId }: { roomId: number; categoryId: number }) => {
+  const response = await fetcher.get({ url: BASE_URL + ENDPOINT.ROOM_CATEGORY_DETAIL(roomId, categoryId) });
+  const data = await response.json();
+  return data;
+};

frontend/src/apis/url.ts

@@ -15,7 +15,9 @@ export const ENDPOINT = {
   CHECKLIST_ID: (id: number) => `/checklists/${id}`,
   CHECKLIST_ID_V1: (id: number) => `/v1/checklists/${id}`,
   //compare
-  CHECKLIST_COMPARE: (roomId1: number, roomId2: number) => `/v1/checklists/compare?id=${roomId1}&id=${roomId2}`,
+  ROOM_COMPARE: (roomId1: number, roomId2: number) => `/v1/checklists/comparison?id=${roomId1}&id=${roomId2}`,
+  ROOM_CATEGORY_DETAIL: (roomId: number, categoryId: number) =>
+    `/v1/comparison/checklists/${roomId}/categories/${categoryId}/questions`,
 
   // like
   LIKE: (id: number | ':id') => `/checklists/${id}/like`,

frontend/src/components/ChecklistDetail/ChecklistAnswerSection.tsx

@@ -1,5 +1,6 @@
 import Accordion from '@/components/_common/Accordion/Accordion';
-import CategoryAccordion from '@/components/ChecklistDetail/CategoryAccordion';
+import Divider from '@/components/_common/Divider/Divider';
+import ChecklistAnswer from '@/components/ChecklistDetail/CheckListAnswer';
 import { CATEGORY_COUNT } from '@/constants/category';
 import { ChecklistCategoryWithAnswer } from '@/types/checklist';
 
@@ -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) => (
+                <>
+                  <ChecklistAnswer key={`answer-${question.questionId}`} QuestionAndAnswer={question} />
+                  {index !== category.questions.length - 1 && <Divider />}
+                </>
+              ))}
             </Accordion.body>
           </div>
         );

frontend/src/components/ChecklistList/CustomBanner.tsx

@@ -1,21 +1,25 @@
 import styled from '@emotion/styled';
 
-import { PencilIcon } from '@/assets/assets';
 import Button from '@/components/_common/Button/Button';
 import { boxShadow, flexCenter, flexRow } from '@/styles/common';
 
 interface Props {
   onClick?: () => void;
+  title: string;
+  buttonColor: string;
+  buttonText: string;
+  Icon: React.ReactElement;
+  buttonDetailText: string;
 }
 
-const CustomBanner = ({ onClick }: Props) => {
+const CustomBanner = ({ onClick, Icon, title, buttonColor, buttonText, buttonDetailText }: Props) => {
   return (
     <S.Banner onClick={onClick}>
       <S.Wrapper>
-        <PencilIcon width={30} height={30} aria-hidden="true" />
-        <S.Title>체크리스트 질문 템플릿</S.Title>
+        {Icon}
+        <S.Title>{title}</S.Title>
       </S.Wrapper>
-      <S.Button aria-label="체크리스트 질문 템플릿을 편집하려면 이 버튼을 누르세요." label={'수정하기'} />
+      <S.Button aria-label={buttonDetailText} label={buttonText} buttonColor={buttonColor} />
     </S.Banner>
   );
 };
@@ -47,10 +51,10 @@ const S = {
   Title: styled.span`
     ${flexCenter}
   `,
-  Button: styled(Button)`
+  Button: styled(Button)<{ buttonColor: string }>`
     padding: 0.6rem 1rem;
 
-    background-color: ${({ theme }) => theme.palette.green500};
+    background-color: ${({ buttonColor }) => buttonColor};
 
     color: ${({ theme }) => theme.palette.white};
     border-radius: 0.8rem;

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

@@ -4,9 +4,10 @@ import Divider from '@/components/_common/Divider/Divider';
 import Layout from '@/components/_common/layout/Layout';
 import { useTabContext } from '@/components/_common/Tabs/TabContext';
 import ChecklistQuestionItem from '@/components/NewChecklist/ChecklistQuestion/ChecklistQuestion';
+import ChecklistQuestionAnswers from '@/components/NewChecklist/ChecklistQuestion/ChecklistQuestionAnswers';
 import MoveNextButton from '@/components/NewChecklist/MoveNextButton';
 import useChecklistStore from '@/store/useChecklistStore';
-import { flexColumn } from '@/styles/common';
+import { flexColumn, flexRow, flexSpaceBetween } from '@/styles/common';
 import theme from '@/styles/theme';
 import { ChecklistQuestion } from '@/types/checklist';
 
@@ -28,11 +29,15 @@ const EditChecklistQuestionTemplate = () => {
           const isLastQuestion = questions?.questions.length - 1 === index;
           return (
             <>
-              <ChecklistQuestionItem
-                key={`${currentTabId}-${question.questionId}`}
-                question={question}
-                answer={answer}
-              />
+              <S.QuestionBox key={question.questionId}>
+                <ChecklistQuestionItem
+                  key={`${currentTabId}-${question.questionId}`}
+                  question={question}
+                  width={'80%'}
+                />
+                <ChecklistQuestionAnswers title={question.title} answer={answer} questionId={question.questionId} />
+              </S.QuestionBox>
+
               {!isLastQuestion && <Divider />}
             </>
           );
@@ -56,6 +61,15 @@ const S = {
     gap: 0.2rem;
   `,
   QuestionBox: styled.div`
+    position: relative;
+    width: 100%;
+    ${flexRow}
+    ${flexSpaceBetween}
+  padding: 1.6rem;
+    border-radius: 0.8rem;
+
+    box-sizing: border-box;
+
     background-color: ${({ theme }) => theme.palette.white};
   `,
 };

frontend/src/components/Main/ChecklistPreviewCard.tsx

@@ -15,7 +15,7 @@ interface Props {
 
 const ChecklistPreviewCard = ({ index, checklist }: Props) => {
   const navigate = useNavigate();
-  const colorList = ['green', 'blue', 'red'];
+  const colorList = ['green', 'blue', 'yellow'];
   const { color200, color500 } = getSeqColor(index, colorList);
 
   const { checklistId, station, roomName, deposit, rent, address } = checklist;

frontend/src/components/MyPage/UserFeature.tsx

@@ -14,6 +14,7 @@ const UserFeature = () => {
   useUserQuery();
 
   const queryClient = useQueryClient();
+
   const checklist = queryClient.getQueryData([QUERY_KEYS.CHECKLIST_LIST]);
 
   const { isModalOpen: isLogoutModalOpen, openModal: openLogoutModal, closeModal: closeLogoutModal } = useModal();

frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestion.tsx

@@ -2,79 +2,31 @@ import styled from '@emotion/styled';
 import React from 'react';
 
 import HighlightText from '@/components/_common/Highlight/HighlightText';
-import ChecklistQuestionAnswers from '@/components/NewChecklist/ChecklistQuestion/ChecklistQuestionAnswers';
-import { flexCenter, flexRow, flexSpaceBetween } from '@/styles/common';
-import { AnswerType } from '@/types/answer';
 import { ChecklistQuestion } from '@/types/checklist';
 
+type FontSize = 'medium' | 'small';
 interface Props {
   question: ChecklistQuestion;
-  answer: AnswerType;
+  width?: string;
+  fontSize?: FontSize;
 }
 
-const ChecklistQuestionItem = ({ question, answer }: Props) => {
-  const { questionId, title, highlights } = question;
+const ChecklistQuestionItem = ({ question, width = '100%', fontSize = 'medium' }: Props) => {
+  const { title, highlights } = question;
 
   return (
-    <S.Container>
-      <S.Question className="question">
-        <HighlightText title={title} highlights={highlights} />
-      </S.Question>
-      <S.Options>
-        <ChecklistQuestionAnswers title={title} answer={answer} questionId={questionId} />
-      </S.Options>
-    </S.Container>
+    <S.Question className="question" width={width}>
+      <HighlightText fontSize={fontSize} title={title} highlights={highlights} />
+    </S.Question>
   );
 };
 
 export default React.memo(ChecklistQuestionItem);
 
 const S = {
-  Container: styled.div`
-    position: relative;
-    width: 100%;
-    ${flexRow}
-    ${flexSpaceBetween}
-    padding: 1.6rem;
-    border-radius: 0.8rem;
-
-    box-sizing: border-box;
-
-    background-color: ${({ theme }) => theme.palette.white};
-  `,
-  Question: styled.div`
+  Question: styled.div<{ width: string }>`
     display: flex;
-    width: 80%;
+    width: ${({ width }) => width};
     flex-flow: column wrap;
   `,
-  Subtitle: styled.div`
-    width: 100%;
-
-    color: ${({ theme }) => theme.palette.grey500};
-    font-size: ${({ theme }) => theme.text.size.small};
-    word-break: keep-all;
-  `,
-  Options: styled.div`
-    width: 8rem;
-
-    ${flexRow}
-    gap: 1.5rem;
-
-    ${flexSpaceBetween}
-    align-items: center;
-    cursor: pointer;
-  `,
-  ButtonBox: styled.div`
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    border-radius: 50%;
-    width: 4rem;
-    height: 4rem;
-    ${flexCenter}
-
-    :hover {
-      background-color: ${({ theme }) => theme.palette.background};
-    }
-  `,
 };

frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionAnswers.tsx

@@ -1,10 +1,12 @@
+import styled from '@emotion/styled';
 import React, { useCallback } from 'react';
 
 import { useTabContext } from '@/components/_common/Tabs/TabContext';
 import AnswerIcon from '@/components/Answer/AnswerIcon';
 import { ANSWER_OPTIONS } from '@/constants/answer';
 import useChecklistQuestionAnswer from '@/hooks/useChecklistQuestionAnswer';
 import { trackChecklistQuestion } from '@/service/amplitude/trackEvent';
+import { flexRow, flexSpaceBetween } from '@/styles/common';
 import { Answer, AnswerType } from '@/types/answer';
 
 interface Props {
@@ -26,7 +28,7 @@ const ChecklistQuestionAnswers = ({ questionId, answer, title }: Props) => {
   );
 
   return (
-    <>
+    <S.Options>
       {ANSWER_OPTIONS.map((option: Answer) => {
         const isSelected = answer === option.name;
 
@@ -46,8 +48,21 @@ const ChecklistQuestionAnswers = ({ questionId, answer, title }: Props) => {
           {title + statusMessage}
         </div>
       )}
-    </>
+    </S.Options>
   );
 };
 
+const S = {
+  Options: styled.div`
+    width: 8rem;
+
+    ${flexRow}
+    gap: 1.5rem;
+
+    ${flexSpaceBetween}
+    align-items: center;
+    cursor: pointer;
+  `,
+};
+
 export default React.memo(ChecklistQuestionAnswers);

frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionTemplate.tsx

@@ -4,10 +4,11 @@ import Divider from '@/components/_common/Divider/Divider';
 import Layout from '@/components/_common/layout/Layout';
 import { useTabContext } from '@/components/_common/Tabs/TabContext';
 import ChecklistQuestionItem from '@/components/NewChecklist/ChecklistQuestion/ChecklistQuestion';
+import ChecklistQuestionAnswers from '@/components/NewChecklist/ChecklistQuestion/ChecklistQuestionAnswers';
 import MoveNextButton from '@/components/NewChecklist/MoveNextButton';
 import useInitialChecklist from '@/hooks/useInitialChecklist';
 import useChecklistStore from '@/store/useChecklistStore';
-import { flexCenter, flexColumn } from '@/styles/common';
+import { flexCenter, flexColumn, flexRow, flexSpaceBetween } from '@/styles/common';
 import theme from '@/styles/theme';
 import { ChecklistQuestion } from '@/types/checklist';
 
@@ -29,17 +30,20 @@ const ChecklistQuestionTemplate = () => {
           const isLastQuestion = questions?.questions.length - 1 === index;
           return (
             <>
-              <ChecklistQuestionItem
-                key={`${currentTabId}-${question.questionId}`}
-                question={question}
-                answer={answer}
-              />
+              <S.QuestionBox key={question.questionId}>
+                <ChecklistQuestionItem
+                  key={`${currentTabId}-${question.questionId}`}
+                  question={question}
+                  width={'80%'}
+                />
+                <ChecklistQuestionAnswers title={question.title} answer={answer} questionId={question.questionId} />
+              </S.QuestionBox>
+
               {!isLastQuestion && <Divider />}
             </>
           );
         })}
       </S.ContentBox>
-
       <MoveNextButton marginTop="2rem" marginBottom="4rem" />
     </Layout>
   );
@@ -57,6 +61,15 @@ const S = {
     gap: 0.2rem;
   `,
   QuestionBox: styled.div`
+    position: relative;
+    width: 100%;
+    ${flexRow}
+    ${flexSpaceBetween}
+    padding: 1.6rem;
+    border-radius: 0.8rem;
+
+    box-sizing: border-box;
+
     background-color: ${({ theme }) => theme.palette.white};
   `,
 };

frontend/src/components/NewChecklist/MemoModal/MemoButton.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { Memo } from '@/assets/assets';
 import { boxShadow, title3 } from '@/styles/common';
 
-interface Props extends React.HTMLAttributes<HTMLButtonElement> {
+interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   onClick?: () => void;
 }