asset의 폴더 구조를 정리하고 파일 이름을 수정한다.

frontend/src/Router.tsx

@@ -3,7 +3,7 @@ import { createBrowserRouter } from 'react-router-dom';
 import { ROUTE_PATH } from '@/constants/routePath';
 import CategoryChoosePage from '@/pages/CategoryChoosePage';
 import ChecklistListPage from '@/pages/ChecklistListPage';
-import ChecklistPreviewPage from '@/pages/ChecklistSummaryPage';
+import ChecklistSummaryPage from '@/pages/ChecklistSummaryPage';
 import NewChecklistPage from '@/pages/NewChecklistPage/NewChecklistPage';
 import NotFound from '@/pages/NotFound';
 import RoomComparePage from '@/pages/RoomComparePage';
@@ -18,7 +18,7 @@ const router = createBrowserRouter([
     path: ROUTE_PATH.checklistList,
   },
   {
-    element: <ChecklistPreviewPage />,
+    element: <ChecklistSummaryPage />,
     path: '/checklists/:id',
   },
   {

frontend/src/assets/assets.tsx

@@ -1,13 +1,16 @@
 /* Arrow */
-import ArrowBack from '@/assets/arrow-back.svg';
-import InputRequiredDot from '@/assets/input-required-dot.svg';
+import ArrowBack from '@/assets/icons/arrow/arrow-back.svg';
+import ArrowDownSmall from '@/assets/icons/arrow/arrow-down-small.svg';
+import ArrowRightGreen from '@/assets/icons/arrow/arrow-right-green.svg';
+import ArrowRightYellow from '@/assets/icons/arrow/arrow-right-yellow.svg';
+import ArrowUpSmall from '@/assets/icons/arrow/arrow-up-small.svg';
 
-/* face icon */
-import ArrowDownSmall from '@/assets/arrow-down-small.svg';
-import ArrowRightGreen from '@/assets/arrow-right-green.svg';
-import ArrowUpSmall from '@/assets/arrow-up-small.svg';
-import XIcon from '@/assets/delete.svg';
-import ArrowRightYellow from '@/assets/icons/arrow-right-yellow.svg';
+/*common-icons */
+import CheckIcon from '@/assets/icons/check.svg';
+import CloseIcon from '@/assets/icons/close.svg';
+import XIcon from '@/assets/icons/delete.svg';
+import LocationLineIcon from '@/assets/icons/location-lined.svg';
+import Plus from '@/assets/icons/plus.svg';
 
 /* face icon */
 import FaceIconBadGray from '@/assets/face-icon/face-icon-bad-gray.svg';
@@ -16,25 +19,23 @@ import FaceIconGoodGray from '@/assets/face-icon/face-icon-good-gray.svg';
 import FaceIconGood from '@/assets/face-icon/face-icon-good.svg';
 import FaceIconSosoGray from '@/assets/face-icon/face-icon-soso-gray.svg';
 import FaceIconSoso from '@/assets/face-icon/face-icon-soso.svg';
-import Plus from '@/assets/plus.svg';
+
 /* logos */
-import ChecklistLogoActive from '@/assets/logos/checklist-logo-active.svg';
-import ChecklistLogo from '@/assets/logos/checklist-logo.svg';
-import HomeLogoActive from '@/assets/logos/home-logo-active.svg';
-import HomeLogo from '@/assets/logos/home-logo.svg';
-import LocationLogoActive from '@/assets/logos/location-logo-active.svg';
-import LocationLogo from '@/assets/logos/location-logo.svg';
-import MyPageLogoActive from '@/assets/logos/my-page-logo-active.svg';
-import MyPageLogo from '@/assets/logos/my-page-logo.svg';
-/*common-icons */
-import CheckIcon from '@/assets/check.svg';
+import ChecklistLogoActive from '@/assets/icons/footer-icon/checklist-logo-active.svg';
+import ChecklistLogo from '@/assets/icons/footer-icon/checklist-logo.svg';
+import HomeLogoActive from '@/assets/icons/footer-icon/home-logo-active.svg';
+import HomeLogo from '@/assets/icons/footer-icon/home-logo.svg';
+import LocationLogoActive from '@/assets/icons/footer-icon/location-logo-active.svg';
+import LocationLogo from '@/assets/icons/footer-icon/location-logo.svg';
+import MyPageLogoActive from '@/assets/icons/footer-icon/my-page-logo-active.svg';
+import MyPageLogo from '@/assets/icons/footer-icon/my-page-logo.svg';
 
 /* etc */
 import BangBangIcon from '@/assets/icons/bang-bang-icon.svg';
-import CloseIcon from '@/assets/icons/close.svg';
+import InputRequiredDot from '@/assets/icons/input-required-dot.svg';
 import LampIcon from '@/assets/icons/lamp-icon.svg';
-import LocationLineIcon from '@/assets/icons/location-lined.svg';
-import QuestionDot from '@/assets/question-dot.svg';
+import QuestionDot from '@/assets/icons/question-dot.svg';
+
 export {
   ArrowBack,
   ArrowDownSmall,

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

@@ -23,8 +23,7 @@ const Container = styled.div<{ isOpen: boolean }>`
   overflow: hidden;
 
   height: ${({ isOpen }) => (isOpen ? 'auto' : '0')};
-
-  /* margin-top: ${({ isOpen }) => (isOpen ? '10px' : '0')}; */
+  margin-top: ${({ isOpen }) => (isOpen ? '10px' : '0')};
 
   background-color: ${({ theme }) => theme.palette.white};
   transition: max-height 0.3s cubic-bezier(0.15, 0.1, 0.25, 1);

frontend/src/pages/ChecklistSummaryPage.tsx

@@ -15,7 +15,7 @@ export interface addAnswerProps {
   newAnswer: number;
 }
 
-const ChecklistPreviewPage = () => {
+const ChecklistSummaryPage = () => {
   // TODO: Param 으로 변경해보기
   const location = useLocation();
   const checklistId = location.state?.id;
@@ -38,12 +38,12 @@ const ChecklistPreviewPage = () => {
         <S.Wrapper>
           <Accordion>
             {checklist?.categories?.map(category => (
-              <>
+              <div key={category.categoryId}>
                 <Accordion.header text={category.categoryName} id={category.categoryId} />
                 <Accordion.body id={category.categoryId}>
                   <ChecklistCategory type="preview" key={category.categoryId} category={category} />
                 </Accordion.body>
-              </>
+              </div>
             ))}
           </Accordion>
         </S.Wrapper>
@@ -52,7 +52,7 @@ const ChecklistPreviewPage = () => {
   );
 };
 
-export default ChecklistPreviewPage;
+export default ChecklistSummaryPage;
 
 const S = {
   Wrapper: styled.div`

frontend/src/pages/NewChecklistPage/NewChecklistInfoTemplate.tsx

@@ -114,7 +114,7 @@ const S = {
     font-size: ${({ theme }) => theme.text.size.large};
   `,
   SubmitButton: styled(Button)`
-    width: 96%;
+    width: 100%;
     border-radius: 4px;
 
     background-color: ${({ theme }) => theme.palette.yellow500};