질문 별 메모 기능 추가 및 카테고리 탭 리팩토링

frontend/src/assets/assets.tsx

@@ -36,6 +36,10 @@ import LampIcon from '@/assets/icons/lamp-icon.svg';
 import BangGgoodTextIcon from '@/assets/icons/logo.svg';
 import QuestionDot from '@/assets/icons/question-dot.svg';
 
+/*memo */
+import MemoEmpty from '@/assets/icons/memo-empty.svg';
+import MemoFilled from '@/assets/icons/memo-filled.svg';
+
 export {
   ArrowBack,
   ArrowDownSmall,
@@ -61,6 +65,8 @@ export {
   LocationLineIcon,
   LocationLogo,
   LocationLogoActive,
+  MemoEmpty,
+  MemoFilled,
   MyPageLogo,
   MyPageLogoActive,
   Plus,

frontend/src/components/ChecklistDetail/CheckListAnswer.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import { QuestionDot } from '@/assets/assets';
 import FaceMark from '@/components/common/FaceMark/FaceMark';
-import { emotionPhrase } from '@/components/NewChecklist/ChecklistQuestion/ChecklistQuestion';
+import { EMOTION_PHARSE } from '@/constants/emotion';
 import { ChecklistQuestionWithAnswer } from '@/types/checklist';
 
 interface Props {
@@ -24,7 +24,7 @@ const ChecklistAnswer = ({ QuestionAndAnswer }: Props) => {
       <S.Answer>
         <FaceMark>
           <FaceMark.FaceIcon emotion={answer} isFilled={true} />
-          <FaceMark.Footer>{emotionPhrase[answer]}</FaceMark.Footer>
+          <FaceMark.Footer>{EMOTION_PHARSE[answer]}</FaceMark.Footer>
         </FaceMark>
       </S.Answer>
     </S.Container>

frontend/src/components/ChecklistDetail/RoomInfoSection.tsx

@@ -9,7 +9,7 @@ interface Props {
   createdAt: string;
 }
 
-const RoomInfoSection = ({ room, score, createdAt }: Props) => {
+const RoomInfoSection = ({ room, score }: Props) => {
   // TODO: 로딩 중일 때 스켈레톤표시
   if (!room) return null;
   const { roomName, deposit, rent, address, contractTerm, floor, floorLevel, station, walkingTime, realEstate } = room;

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

@@ -1,58 +1,72 @@
 import styled from '@emotion/styled';
+import { useState } from 'react';
 
-import { QuestionDot } from '@/assets/assets';
+import { ArrowUpSmall, MemoEmpty, MemoFilled, QuestionDot } from '@/assets/assets';
 import FaceMark from '@/components/common/FaceMark/FaceMark';
-import useChecklistStore from '@/store/useChecklistStore';
+import { useTabContext } from '@/components/common/Tabs/TabContext';
+import QuestionMemo from '@/components/NewChecklist/ChecklistQuestion/QuestionMemo';
+import { EMOTION_PHARSE, EMOTIONS } from '@/constants/emotion';
+import useChecklistAnswer from '@/hooks/useChecklistAnswer';
+import { flexCenter } from '@/styles/common';
 import { ChecklistQuestion } from '@/types/checklist';
-import { Emotion, EmotionType } from '@/types/emotionAnswer';
+import { EmotionType } from '@/types/emotionAnswer';
 
 interface Props {
   question: ChecklistQuestion;
 }
 
-export const emotionPhrase: Record<EmotionType | string, string> = {
-  BAD: '별로에요',
-  SOSO: '평범해요',
-  GOOD: '좋아요',
-  null: '-',
-};
-
 const ChecklistQuestion = ({ question }: Props) => {
   const { questionId } = question;
-  const { deleteAnswer, addAnswer, questionSelectedAnswer } = useChecklistStore();
+  const { updateAnswer, findCategoryQuestion } = useChecklistAnswer();
+  const { currentTabId } = useTabContext();
+
+  const [isMemoOpen, setIsMemoOpen] = useState(false);
+
+  const { answer, memo } = findCategoryQuestion({ categoryId: currentTabId, questionId });
 
   const handleClick = (newAnswer: EmotionType) => {
-    if (questionSelectedAnswer(questionId) === newAnswer) {
-      deleteAnswer(questionId);
-    } else {
-      addAnswer({ questionId: questionId, newAnswer });
-    }
+    updateAnswer({ categoryId: currentTabId, questionId: questionId, newAnswer });
+  };
+
+  const handleCloseMemo = () => {
+    setIsMemoOpen(false);
   };
 
-  const emotions: Emotion[] = [
-    { name: 'BAD', id: 1 },
-    { name: 'SOSO', id: 2 },
-    { name: 'GOOD', id: 3 },
-  ];
+  const handleOpenMemo = () => {
+    setIsMemoOpen(true);
+  };
 
   return (
     <S.Container>
       <S.Title>
         <QuestionDot />
         {question?.title}
       </S.Title>
-      {question?.subtitle && <S.Subtitle>•{question?.subtitle}</S.Subtitle>}
+
+      {question?.subtitle && <S.Subtitle>{question?.subtitle}</S.Subtitle>}
+
+      <S.ButtonBox>
+        {isMemoOpen ? (
+          <ArrowUpSmall onClick={handleCloseMemo} />
+        ) : memo?.length ? (
+          <MemoFilled onClick={handleOpenMemo} />
+        ) : (
+          <MemoEmpty onClick={handleOpenMemo} />
+        )}
+      </S.ButtonBox>
+
       <S.Options>
-        {emotions.map(emotion => {
+        {EMOTIONS.map(emotion => {
           const { name: emotionName, id } = emotion;
           return (
             <FaceMark onClick={() => handleClick(emotionName)} key={id}>
-              <FaceMark.FaceIcon emotion={emotionName} isFilled={questionSelectedAnswer(questionId) === emotionName} />
-              <FaceMark.Footer>{emotionPhrase[emotionName]}</FaceMark.Footer>
+              <FaceMark.FaceIcon emotion={emotionName} isFilled={answer === emotionName} />
+              <FaceMark.Footer>{EMOTION_PHARSE[emotionName]}</FaceMark.Footer>
             </FaceMark>
           );
         })}
       </S.Options>
+      {isMemoOpen && <QuestionMemo questionId={questionId} text={memo} />}
     </S.Container>
   );
 };
@@ -61,10 +75,15 @@ export default ChecklistQuestion;
 
 const S = {
   Container: styled.div`
+    position: relative;
     padding: 16px;
+
+    background-color: ${({ theme }) => theme.palette.white};
+    border-radius: 8px;
   `,
   Title: styled.div`
     display: flex;
+    width: 90%;
     margin: 5px 0;
 
     font-size: ${({ theme }) => theme.text.size.medium};
@@ -88,4 +107,17 @@ const S = {
     margin-top: 10px;
     justify-content: space-between;
   `,
+  ButtonBox: styled.div`
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    ${flexCenter}
+
+    :hover {
+      background-color: ${({ theme }) => theme.palette.background};
+    }
+  `,
 };

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

@@ -0,0 +1,44 @@
+import styled from '@emotion/styled';
+
+import Button from '@/components/common/Button/Button';
+import { useTabContext } from '@/components/common/Tabs/TabContext';
+import Textarea from '@/components/common/Textarea/Textarea';
+import useChecklistAnswer from '@/hooks/useChecklistAnswer';
+import useInput from '@/hooks/useInput';
+
+interface Props {
+  questionId: number;
+  text: string;
+}
+const QuestionMemo = ({ questionId, text }: Props) => {
+  const { currentTabId } = useTabContext();
+  const { onChange, value } = useInput(text);
+  const { updateMemo } = useChecklistAnswer();
+
+  const handleUpdateMemo = () => {
+    updateMemo({ categoryId: currentTabId, questionId, newMemo: value });
+  };
+
+  return (
+    <S.Container>
+      <Textarea height="medium" value={value} onChange={onChange} />
+      <S.ButtonBox>
+        <Button label="저장" size="xSmall" isSquare={true} color="dark" onClick={handleUpdateMemo} />
+      </S.ButtonBox>
+    </S.Container>
+  );
+};
+
+export default QuestionMemo;
+
+const S = {
+  Container: styled.div`
+    position: relative;
+    margin-top: 15px;
+  `,
+  ButtonBox: styled.div`
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+  `,
+};

frontend/src/components/common/Accordion/AccodionHeader.tsx

@@ -1,23 +1,27 @@
 import styled from '@emotion/styled';
 
-import { ArrowDownSmall, ArrowUpSmall } from '@/assets/assets';
 import { useAccordionContext } from '@/components/common/Accordion/AccordionContext';
 import { flexCenter, title2 } from '@/styles/common';
 
 interface Props {
-  text: string;
   id: number;
+  openButton?: React.ReactNode;
+  closeButton?: React.ReactNode;
+  text?: string;
+  isMarked?: boolean;
 }
-const AccordionHeader = ({ text, id }: Props) => {
+const AccordionHeader = ({ id, openButton, closeButton, text, isMarked = true }: Props) => {
   const { isAccordionOpen, handleAccordionOpenChange } = useAccordionContext();
 
   return (
     <S.HeaderContainer onClick={() => handleAccordionOpenChange(id)}>
-      <S.FlexBox>
-        <S.HeaderMark isMarked={isAccordionOpen(id)} />
+      <S.FlexBetween>
+        <S.HeaderMark isMarked={isMarked} />
         <S.HeaderTitle>{text}</S.HeaderTitle>
-      </S.FlexBox>
-      <S.ArrowBox>{isAccordionOpen(id) ? <ArrowUpSmall /> : <ArrowDownSmall />}</S.ArrowBox>
+        <S.OpenBox onClick={() => handleAccordionOpenChange}>
+          {isAccordionOpen(id) ? openButton : closeButton}
+        </S.OpenBox>
+      </S.FlexBetween>
     </S.HeaderContainer>
   );
 };
@@ -26,12 +30,11 @@ export default AccordionHeader;
 
 const HeaderContainer = styled.div`
   display: flex;
-  width: 100%;
-  height: 50px;
+  position: relative;
+  height: 45px;
 
   background-color: ${({ theme }) => theme.palette.white};
   border-radius: 12px;
-  justify-content: space-between;
   gap: 10px;
 `;
 
@@ -40,22 +43,32 @@ const FlexBox = styled.div`
   gap:10px;
 `;
 
+const FlexBetween = styled.div`
+  display: flex;
+  height: 100%;
+  justify-content: space-between;
+`;
+
 const HeaderTitle = styled.div`
-  ${title2}
+  ${title2};
+  display: flex;
+  padding-left: 15px;
+  align-items: center;
 `;
 
 const HeaderMark = styled.div<{ isMarked: boolean }>`
   opacity: ${({ isMarked }) => (isMarked ? 1 : 0)};
   width: 12px;
-  height: 100%;
 
   background-color: ${({ theme }) => theme.palette.yellow500};
   border-radius: 8px 0 0 8px;
   transition: opacity 0.3s ease;
 `;
 
-const ArrowBox = styled.div`
-  width: 50px;
+const OpenBox = styled.div<{ onClick?: () => void }>`
+  position: absolute;
+  top: 10px;
+  right: 10px;
   ${flexCenter}
 `;
 
@@ -64,5 +77,6 @@ const S = {
   HeaderMark,
   HeaderTitle,
   FlexBox,
-  ArrowBox,
+  OpenBox,
+  FlexBetween,
 };

frontend/src/components/common/Accordion/Accordion.stories.tsx

@@ -29,7 +29,7 @@ export const Default: Story = {
   render: () => {
     return (
       <Accordion>
-        <Accordion.header text={'청결도'} id={1}></Accordion.header>
+        <Accordion.header id={1} text="청결도" />
         <Accordion.body id={1}>
           <ul>
             <li>list 1</li>

frontend/src/components/common/Accordion/Accordion.tsx

@@ -1,13 +1,12 @@
 import styled from '@emotion/styled';
-import { PropsWithChildren } from 'react';
 
 import AccordionHeader from '@/components/common/Accordion/AccodionHeader';
 import AccordionBody from '@/components/common/Accordion/AccordionBody';
 import { AccordionProvider } from '@/components/common/Accordion/AccordionContext';
 import { flexColumn } from '@/styles/common';
 
-interface Props extends PropsWithChildren {
-  // TODO: 내부 children 선언 혹은 extend 할지 통일하기
+interface Props {
+  children?: React.ReactNode;
   width?: string;
 }
 

frontend/src/components/common/Button/Button.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { title2, title3, title4 } from '@/styles/common';
 import theme from '@/styles/theme';
 
-type ButtonSize = 'small' | 'medium' | 'full';
+type ButtonSize = 'xSmall' | 'small' | 'medium' | 'full';
 type ColorOption = 'light' | 'dark' | 'disabled';
 
 interface Props extends React.HTMLAttributes<HTMLButtonElement> {
@@ -33,7 +33,7 @@ export default Button;
 
 const S = {
   Button: styled.button<{ size: ButtonSize; color: ColorOption; isSquare: boolean }>`
-    ${({ isSquare }) => (isSquare ? 'border-radius: 8px' : 'border-radius: 100px')};
+    ${({ isSquare }) => (isSquare ? 'border-radius: 4px' : 'border-radius: 100px')};
     ${({ size }) => sizeStyles[size]};
     ${({ color }) => ColorStyles[color]};
     cursor: pointer;
@@ -53,13 +53,13 @@ const ColorStyles = {
     }
   `,
   dark: css`
-    background-color: ${theme.palette.black};
+    background-color: ${theme.palette.grey600};
 
     color: ${theme.palette.white};
 
     &:hover,
     &:active {
-      background-color: ${theme.palette.grey600};
+      background-color: ${theme.palette.black};
     }
   `,
   disabled: css`
@@ -70,6 +70,10 @@ const ColorStyles = {
 };
 
 const sizeStyles = {
+  xSmall: css`
+    padding: 8px 15px;
+    ${title4}
+  `,
   small: css`
     padding: 10px 24px;
     ${title4}