[FE] 스토리북의 버그를 고치고, 관련 컴포넌트를 일부 수정한다.

frontend/.gitignore

@@ -24,7 +24,7 @@ stories
 
 
 private*
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/
+test-results/
+playwright-report/
+blob-report/
+playwright/.cache/

frontend/.storybook/preview.tsx

@@ -10,7 +10,9 @@ const decorator = Story => (
     <Global
       styles={css`
         ${normalize}
-        font-size: 10px;
+        html {
+          font-size: 62.5%;
+        }
       `}
     />
     <ThemeProvider theme={theme}>

frontend/src/apis/checklist.ts

@@ -1,6 +1,6 @@
 import fetcher from '@/apis/fetcher';
 import { BASE_URL, ENDPOINT } from '@/apis/url';
-import { ChecklistCustom, ChecklistInfo, ChecklistPostForm } from '@/types/checklist';
+import { ChecklistInfo, ChecklistPostForm, ChecklistSelectedQuestions } from '@/types/checklist';
 import { mapObjNullToUndefined, mapObjUndefinedToNull } from '@/utils/typeFunctions';
 
 export const getChecklistQuestions = async () => {
@@ -46,7 +46,7 @@ export const deleteChecklist = async (id: number) => {
   return response;
 };
 
-export const putCustomChecklist = async (questionIds: ChecklistCustom) => {
+export const putCustomChecklist = async (questionIds: ChecklistSelectedQuestions) => {
   const response = await fetcher.put({ url: BASE_URL + ENDPOINT.CHECKLIST_CUSTOM, body: questionIds });
 
   return response;

frontend/src/components/Answer/AnswerIcon.tsx

@@ -23,6 +23,7 @@ const AnswerColor: Record<AnswerType, { selected: string; notSelected?: string }
   },
   NONE: {
     selected: theme.palette.grey300,
+    notSelected: theme.palette.grey300,
   },
 };
 

frontend/src/components/ChecklistDetail/CheckListAnswer.tsx

@@ -37,7 +37,6 @@ const S = {
     flex-direction: row;
     align-items: center;
     box-sizing: border-box;
-    border-bottom: 0.1rem solid ${({ theme }) => theme.palette.grey200};
   `,
   Title: styled.div`
     display: flex;

frontend/src/components/ChecklistCustom/CustomTabs.tsx → frontend/src/components/ChecklistQuestionSelect/ChecklistQuestionSelectTabs.tsx

@@ -2,14 +2,14 @@ import Tabs from '@/components/_common/Tabs/Tabs';
 import { findCategoryClassNameByName } from '@/constants/category';
 import useChecklistQuestionSelectStore from '@/store/useChecklistQuestionSelectStore';
 
-export const ChecklistCustomTabs = () => {
+export const ChecklistQuestionSelectTabs = () => {
   const { validCategory: validCategoryEditMode } = useChecklistQuestionSelectStore();
 
-  const checklistCustomTabs = validCategoryEditMode.map(category => ({
+  const checklistQuestionSelectTabs = validCategoryEditMode.map(category => ({
     id: category.categoryId,
     name: category.categoryName as string,
     className: findCategoryClassNameByName(category.categoryName),
   }));
 
-  return <Tabs tabList={checklistCustomTabs} />;
+  return <Tabs tabList={checklistQuestionSelectTabs} />;
 };

frontend/src/components/ChecklistCustom/QuestionCardList/QuestionCardList.stories.tsx → frontend/src/components/ChecklistQuestionSelect/QuestionCardList/QuestionCardList.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import QuestionCardList from '@/components/ChecklistCustom/QuestionCardList/QuestionCardList';
+import QuestionCardList from '@/components/ChecklistQuestionSelect/QuestionCardList/QuestionCardList';
 import theme from '@/styles/theme';
 
 import mobileDecorator from '../../../../.storybook/common';

frontend/src/components/ChecklistCustom/QuestionCardList/QuestionCardList.tsx → frontend/src/components/ChecklistQuestionSelect/QuestionCardList/QuestionCardList.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 import Divider from '@/components/_common/Divider/Divider';
-import QuestionSelectCard from '@/components/ChecklistCustom/QuestionSelectCard/QuestionSelectCard';
+import QuestionSelectCard from '@/components/ChecklistQuestionSelect/QuestionSelectCard/QuestionSelectCard';
 import { ChecklistQuestionWithIsSelected } from '@/types/checklist';
 
 interface Props {

frontend/src/components/ChecklistCustom/QuestionListTemplate/QuestionListTemplate.tsx → frontend/src/components/ChecklistQuestionSelect/QuestionListTemplate/QuestionListTemplate.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import CounterBox from '@/components/_common/CounterBox/CounterBox';
 import { useTabContext } from '@/components/_common/Tabs/TabContext';
-import QuestionCardList from '@/components/ChecklistCustom/QuestionCardList/QuestionCardList';
+import QuestionCardList from '@/components/ChecklistQuestionSelect/QuestionCardList/QuestionCardList';
 import useChecklistQuestionSelectStore from '@/store/useChecklistQuestionSelectStore';
 
 const QuestionListTemplate = () => {

frontend/src/components/ChecklistCustom/QuestionSelectCard/QuestionSelectCard.tsx → frontend/src/components/ChecklistQuestionSelect/QuestionSelectCard/QuestionSelectCard.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 import Checkbox from '@/components/_common/Checkbox/Checkbox';
+import FlexBox from '@/components/_common/FlexBox/FlexBox';
 import { useTabContext } from '@/components/_common/Tabs/TabContext';
 import useChecklistQuestionSelect from '@/hooks/useChecklistQuestionSelect';
 import { flexCenter } from '@/styles/common';
@@ -18,18 +19,13 @@ const QuestionSelectCard = ({ question }: { question: ChecklistQuestionWithIsSel
   return (
     <S.Container isChecked={isSelected} onClick={handleCheckQuestion}>
       <S.FlexColumn>
-        <S.FlexRow>
+        <FlexBox.Vertical>
           <S.Title>{title}</S.Title>
-        </S.FlexRow>
-        {subtitle && <S.Subtitle>{subtitle}</S.Subtitle>}
+          {subtitle && <S.Subtitle>{subtitle}</S.Subtitle>}
+        </FlexBox.Vertical>
       </S.FlexColumn>
       <S.CheckBoxContainer>
-        <Checkbox
-          iconType="plus"
-          isChecked={isSelected}
-          setIsChecked={handleCheckQuestion}
-          onClick={handleCheckQuestion}
-        />
+        <Checkbox iconType="plus" isChecked={isSelected} onClick={handleCheckQuestion} />
       </S.CheckBoxContainer>
     </S.Container>
   );
@@ -66,8 +62,6 @@ const S = {
     gap: 1rem;
   `,
   Subtitle: styled.div`
-    padding-left: 2rem;
-
     color: ${({ theme }) => theme.palette.grey500};
     font-size: ${({ theme }) => theme.text.size.small};
     word-break: keep-all;

frontend/src/components/NewChecklist/NewRoomInfoForm/styled.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 import Button from '@/components/_common/Button/Button';
 import FormField from '@/components/_common/FormField/FormField';
 import Header from '@/components/_common/Header/Header';
-import RadioGroup from '@/components/_common/RadioGroup/RadioGroup';
 import { flexCenter, title4 } from '@/styles/common';
 
 const FormStyled = {
@@ -56,14 +55,5 @@ const FormStyled = {
     ${title4}
     white-space: pre;
   `,
-
-  RadioGroup: styled(RadioGroup)<{ width?: string }>`
-    ${({ width }) => (width ? `width:${width};` : '')}
-    flex: 1 0 auto;
-
-    ${flexCenter}
-    font-size: ${({ theme }) => theme.text.size.xSmall};
-    column-gap: 0.7rem;
-  `,
 };
 export default FormStyled;

frontend/src/components/NewChecklist/Option/OptionAllSelectBox.tsx

@@ -21,7 +21,6 @@ const OptionAllSelectBox = () => {
         {/*전체 선택 버튼*/}
         <Checkbox
           isChecked={selectedOptionActions.isAllSelected()}
-          setIsChecked={handleToggleAllSelect}
           onClick={handleToggleAllSelect}
           color={theme.palette.yellow500}
           hoverColor={theme.palette.yellow600}

frontend/src/components/NewChecklist/Option/OptionButton/OptionButton.stories.tsx

@@ -1,4 +1,3 @@
-import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import OptionButton from '@/components/NewChecklist/Option/OptionButton/OptionButton';
@@ -7,38 +6,22 @@ import { OPTIONS } from '@/constants/options';
 const meta = {
   title: 'components/OptionButton',
   component: OptionButton,
-  parameters: {
-    docs: {
-      description: {
-        component: 'Option버튼은 체크리스트의 다양한 옵션 아이템들을 선택할 수 있는 컴포넌트입니다.',
-      },
-    },
-    args: {
-      size: '8rem',
-    },
+  argTypes: {
+    option: { control: { disable: true } },
   },
-} satisfies Meta<typeof OptionButton>;
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { option: OPTIONS[0], isSelected: true },
   decorators: [
     Story => (
-      <S.Wrapper>
+      <div style={{ width: '80px', height: '80px' }}>
         <Story />
-      </S.Wrapper>
+      </div>
     ),
   ],
-};
+} satisfies Meta<typeof OptionButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-const S = {
-  Wrapper: styled.div`
-    display: flex;
-    width: 8rem;
-    height: 8rem;
-    align-items: center;
-    justify-content: center;
-  `,
+export const Good: Story = {
+  args: { option: OPTIONS[1], isSelected: true },
 };

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

@@ -1,6 +1,8 @@
+import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Accordion from '@/components/_common/Accordion/Accordion';
+import { flexSpaceBetween, title4 } from '@/styles/common';
 import theme from '@/styles/theme';
 
 /**
@@ -29,16 +31,27 @@ export const Default: Story = {
   render: () => {
     return (
       <Accordion totalCount={1}>
-        <Accordion.header id={1} text="청결도" />
+        <Accordion.header id={1} text="제목" />
         <Accordion.body id={1}>
-          <ul>
-            <li>list 1</li>
-            <li>list 2</li>
-            <li>list 3</li>
-          </ul>
+          <S.Content>카테고리의 내용이 있습니다.</S.Content>
         </Accordion.body>
       </Accordion>
     );
   },
   args: { totalCount: 1 },
 };
+
+const S = {
+  Content: styled.div`
+    ${flexSpaceBetween}
+    width: 100%;
+    padding: 1rem;
+    gap: 1rem;
+
+    ${title4}
+    background-color: ${({ theme }) => theme.palette.white};
+    flex-direction: row;
+    align-items: center;
+    box-sizing: border-box;
+  `,
+};

frontend/src/components/_common/Accordion/AccordionBody.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { useAccordionContext } from '@/components/_common/Accordion/AccordionContext';
 
@@ -9,29 +9,38 @@ interface Props {
 }
 
 const AccordionBody = ({ children, id }: Props) => {
-  const bodyRef = useRef(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
   const { isAccordionOpen } = useAccordionContext();
-
   const isCurrentAccordionOpen = isAccordionOpen(id);
+  const [maxHeight, setMaxHeight] = useState(0);
+
+  useEffect(() => {
+    if (bodyRef.current) {
+      if (isCurrentAccordionOpen) {
+        setMaxHeight(bodyRef.current.scrollHeight);
+      } else {
+        setMaxHeight(0);
+      }
+    }
+  }, [isCurrentAccordionOpen]);
 
   return (
-    <S.Container ref={bodyRef} isOpen={isCurrentAccordionOpen}>
+    <S.Container ref={bodyRef} isOpen={isCurrentAccordionOpen} maxHeight={maxHeight}>
       {children}
     </S.Container>
   );
 };
 
-export default AccordionBody;
-
 const S = {
-  Container: styled.div<{ isOpen: boolean }>`
-    display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
+  Container: styled.div<{ isOpen: boolean; maxHeight: number }>`
     overflow: hidden;
     margin-top: 1rem;
+    max-height: ${({ maxHeight }) => maxHeight}px;
+    transition: max-height 0.4s cubic-bezier(0.15, 0.1, 0.25, 1);
+    border-radius: 1.2rem;
 
     background-color: ${({ theme }) => theme.palette.white};
-    max-height: ${({ isOpen }) => (isOpen ? '100rem' : '0')};
-    transition: max-height 0.2s cubic-bezier(0.15, 0.1, 0.25, 1);
-    border-radius: 1.2rem;
   `,
 };
+
+export default AccordionBody;

frontend/src/components/_common/Checkbox/Checkbox.stories.tsx

@@ -20,15 +20,13 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const UnChecked: Story = {
+  args: {
+    isChecked: true,
+  },
+
   render: () => {
     const [isChecked, setIsChecked] = useState(false);
-    return (
-      <Checkbox
-        isChecked={isChecked}
-        onClick={() => setIsChecked(isChecked => !isChecked)}
-        setIsChecked={() => setIsChecked(isChecked => !isChecked)}
-      />
-    );
+    return <Checkbox isChecked={isChecked} onClick={() => setIsChecked(isChecked => !isChecked)} />;
   },
 };