[FE] 폴더 구조 리팩터링

frontend/src/assets/index.ts

@@ -1,15 +1,46 @@
 import AlarmSound from '@/assets/audio/alarm_sound.mp3';
-import Driver from '@/assets/images/characters/driver.png';
-import Navigator from '@/assets/images/characters/navigator.png';
 import CheckBoxChecked from '@/assets/images/check_box_checked.svg';
 import CheckBoxUnchecked from '@/assets/images/check_box_unchecked.svg';
+import checkBranchCreated from '@/assets/images/docs/check-branch-created.webp';
+import clone from '@/assets/images/docs/clone.webp';
+import createBranch from '@/assets/images/docs/create-branch.webp';
+import createFork from '@/assets/images/docs/create-fork.webp';
+import createRoom from '@/assets/images/docs/create-room.webp';
+import forkRepository from '@/assets/images/docs/fork-repository.webp';
+import inputName from '@/assets/images/docs/input-name.webp';
+import inputPairName from '@/assets/images/docs/input-pair-name.webp';
+import selectDriver from '@/assets/images/docs/select-driver.webp';
+import selectMission from '@/assets/images/docs/select-mission.webp';
+import setRole from '@/assets/images/docs/set-role.webp';
+import setTimer from '@/assets/images/docs/set-timer.webp';
+import startFree from '@/assets/images/docs/start-free.webp';
+import startWithMission from '@/assets/images/docs/start-with-mission.webp';
+import Driver from '@/assets/images/driver.png';
 import GithubLogoWhite from '@/assets/images/github-mark-white.png';
 import GithubLogo from '@/assets/images/github-mark.png';
 import LogoIcon from '@/assets/images/logo_icon.svg';
 import LogoIconWithTitle from '@/assets/images/logo_icon_with_title.svg';
 import LogoTitle from '@/assets/images/logo_title.svg';
+import Navigator from '@/assets/images/navigator.png';
 import Wave from '@/assets/images/wave.svg';
 
+export const DOCS_IMAGES = {
+  checkBranchCreated,
+  clone,
+  createBranch,
+  createFork,
+  createRoom,
+  forkRepository,
+  inputName,
+  inputPairName,
+  selectDriver,
+  selectMission,
+  setRole,
+  setTimer,
+  startFree,
+  startWithMission,
+};
+
 export {
   GithubLogo,
   GithubLogoWhite,

frontend/src/components/CoduoDocs/ContentBox/ContentBox.styles.ts

@@ -0,0 +1,65 @@
+import { Link } from 'react-router-dom';
+
+import styled from 'styled-components';
+
+export const Title = styled.p`
+  color: ${({ theme }) => theme.color.primary[700]};
+  font-size: ${({ theme }) => theme.fontSize.base};
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+
+  @media (width <= 1400px) {
+    font-size: ${({ theme }) => theme.fontSize.base};
+  }
+`;
+
+export const ContentList = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  position: relative;
+
+  padding-left: 15px;
+
+  @media (width <= 1400px) {
+    gap: 0.8rem;
+  }
+`;
+
+export const ContentItem = styled(Link)<{ $isActive: boolean }>`
+  position: relative;
+
+  color: ${({ $isActive, theme }) => ($isActive ? theme.color.black[90] : theme.color.black[60])};
+  font-size: ${({ theme }) => theme.fontSize.lg};
+  text-decoration: none;
+
+  transition: all 0.1s;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: -2rem;
+
+    width: 3px;
+    height: 145%;
+
+    background-color: ${({ $isActive, theme }) => ($isActive ? theme.color.secondary[500] : theme.color.black[30])};
+
+    transition: all 0.2s;
+    content: '';
+  }
+
+  @media (width <= 1400px) {
+    font-size: ${({ theme }) => theme.fontSize.md};
+  }
+`;
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.1rem;
+
+  @media (width <= 1400px) {
+    gap: 0.9rem;
+  }
+`;

frontend/src/components/CoduoDocs/FloatingSidebar/ContentBox.tsx → frontend/src/components/CoduoDocs/ContentBox/ContentBox.tsx

@@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { Content } from '@/pages/CoduoDocs/CoduoDocs.type';
 
-import * as S from './FloatingSidebar.styles';
+import * as S from './ContentBox.styles';
 
 interface ContentBoxProps {
   title: string;

frontend/src/components/CoduoDocs/DocsImage/DocsImage.tsx

@@ -3,20 +3,16 @@ import * as S from './DocsImage.styles';
 interface DocsImageProps {
   information?: string;
   src: string;
-  webpSrc: string;
   alt: string;
   id?: string;
 }
 
-const DocsImage = ({ information, src, alt, webpSrc, id, children }: React.PropsWithChildren<DocsImageProps>) => {
+const DocsImage = ({ information, src, alt, id, children }: React.PropsWithChildren<DocsImageProps>) => {
   return (
     <S.Container>
       {information && <S.Contents id={id}>{information}</S.Contents>}
       {children}
-      <picture>
-        <source srcSet={webpSrc} type="image/webp" />
-        <img src={src} alt={alt} loading="lazy" />
-      </picture>
+      <img src={src} alt={alt} loading="lazy" />
     </S.Container>
   );
 };

frontend/src/components/CoduoDocs/FloatingSidebar/FloatingSidebar.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import ContentBox from '@/components/CoduoDocs/FloatingSidebar/ContentBox';
+import ContentBox from '@/components/CoduoDocs/ContentBox/ContentBox';
 import FloatingSidebar from '@/components/CoduoDocs/FloatingSidebar/FloatingSidebar';
 
 import { START_CONTENT } from '@/constants/coduoDocs';

frontend/src/components/CoduoDocs/FloatingSidebar/FloatingSidebar.styles.ts

@@ -1,5 +1,3 @@
-import { Link } from 'react-router-dom';
-
 import styled from 'styled-components';
 
 export const Layout = styled.div`
@@ -26,65 +24,3 @@ export const Layout = styled.div`
     display: none;
   }
 `;
-
-export const Title = styled.p`
-  color: ${({ theme }) => theme.color.primary[700]};
-  font-size: ${({ theme }) => theme.fontSize.base};
-  font-weight: ${({ theme }) => theme.fontWeight.semibold};
-
-  @media (width <= 1400px) {
-    font-size: ${({ theme }) => theme.fontSize.base};
-  }
-`;
-
-export const ContentList = styled.ul`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-
-  position: relative;
-
-  padding-left: 15px;
-
-  @media (width <= 1400px) {
-    gap: 0.8rem;
-  }
-`;
-
-export const ContentItem = styled(Link)<{ $isActive: boolean }>`
-  position: relative;
-
-  color: ${({ $isActive, theme }) => ($isActive ? theme.color.black[90] : theme.color.black[60])};
-  font-size: ${({ theme }) => theme.fontSize.lg};
-  text-decoration: none;
-
-  transition: all 0.1s;
-
-  &::before {
-    position: absolute;
-    top: 0;
-    left: -2rem;
-
-    width: 3px;
-    height: 145%;
-
-    background-color: ${({ $isActive, theme }) => ($isActive ? theme.color.secondary[500] : theme.color.black[30])};
-
-    transition: all 0.2s;
-    content: '';
-  }
-
-  @media (width <= 1400px) {
-    font-size: ${({ theme }) => theme.fontSize.md};
-  }
-`;
-
-export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1.1rem;
-
-  @media (width <= 1400px) {
-    gap: 0.9rem;
-  }
-`;

frontend/src/components/CoduoDocs/SourceCode/SourceCode.tsx

@@ -1,4 +1,4 @@
-import useCopyClipBoard from '@/hooks/common/useCopyClipboard';
+import useCopyClipBoard from '@/hooks/_common/useCopyClipboard';
 
 import * as S from './SourceCode.styles';
 

frontend/src/components/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryManagementModal.tsx → frontend/src/components/CompletedPairRoom/CategoryManagementModal/CategoryManagementModal.tsx

@@ -1,5 +1,5 @@
-import { Modal } from '@/components/common/Modal';
-import CategoryItem from '@/components/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryItem/CategoryItem';
+import { Modal } from '@/components/_common/Modal';
+import CategoryItem from '@/components/CompletedPairRoom/CategoryManagementModal/CategoryItem/CategoryItem';
 import { Category } from '@/components/PairRoom/ReferenceCard/ReferenceCard.type';
 
 import * as S from './CategoryManagementModal.styles';

frontend/src/components/CompletedPairRoom/ReferenceCard/Header/Header.tsx

@@ -1,6 +1,6 @@
 import { IoIosLink } from 'react-icons/io';
 
-import Button from '@/components/common/Button/Button';
+import Button from '@/components/_common/Button/Button';
 
 import { theme } from '@/styles/theme';
 

frontend/src/components/CompletedPairRoom/ReferenceCard/ReferenceCard.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 
-import CategoryManagementModal from '@/components/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryManagementModal';
+import CategoryManagementModal from '@/components/CompletedPairRoom/CategoryManagementModal/CategoryManagementModal';
 import Header from '@/components/CompletedPairRoom/ReferenceCard/Header/Header';
 import ReferenceList from '@/components/CompletedPairRoom/ReferenceCard/ReferenceList/ReferenceList';
 import { PairRoomCard } from '@/components/PairRoom/PairRoomCard';
 
-import useModal from '@/hooks/common/useModal';
+import useModal from '@/hooks/_common/useModal';
 import useCategories, { DEFAULT_CATEGORY_ID, DEFAULT_CATEGORY_VALUE } from '@/hooks/PairRoom/useCategories';
 
 import { useGetReference } from '@/queries/PairRoom/reference/query';

frontend/src/components/CompletedPairRoom/RetrospectButton/RetrospectButton.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 
-import Button from '@/components/common/Button/Button';
+import Button from '@/components/_common/Button/Button';
 
 import useUserStore from '@/stores/userStore';
 

frontend/src/components/CompletedPairRoom/TodoListCard/TodoItem/TodoItem.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import { Todo } from '@/apis/todo';
 
-import useCopyClipBoard from '@/hooks/common/useCopyClipboard';
+import useCopyClipBoard from '@/hooks/_common/useCopyClipboard';
 
 import * as S from './TodoItem.styles';
 

frontend/src/components/Landing/HowToPair/HowToPair.tsx

@@ -1,6 +1,6 @@
 import { Driver, Navigator } from '@/assets';
 
-import { ScrollAnimationContainer } from '@/components/common/Animation/ScrollAnimationContainer';
+import { ScrollAnimationContainer } from '@/components/_common/ScrollAnimationContainer/ScrollAnimationContainer';
 
 import * as S from './HowToPair.styles';
 

frontend/src/components/Main/PairRoomCreateModal/PairRoomCreateModal.tsx

@@ -1,7 +1,7 @@
 import { Link } from 'react-router-dom';
 
-import Button from '@/components/common/Button/Button';
-import { Modal } from '@/components/common/Modal';
+import Button from '@/components/_common/Button/Button';
+import { Modal } from '@/components/_common/Modal';
 
 import * as S from './PairRoomCreateModal.styles';
 

frontend/src/components/Main/PairRoomEntryModal/PairRoomEntryModal.tsx

@@ -1,14 +1,14 @@
 import { useNavigate } from 'react-router-dom';
 
-import Button from '@/components/common/Button/Button';
-import Input from '@/components/common/Input/Input';
-import { Modal } from '@/components/common/Modal';
+import Button from '@/components/_common/Button/Button';
+import Input from '@/components/_common/Input/Input';
+import { Modal } from '@/components/_common/Modal';
 
 import useToastStore from '@/stores/toastStore';
 
 import { getPairRoomExists } from '@/apis/pairRoom';
 
-import useInput from '@/hooks/common/useInput';
+import useInput from '@/hooks/_common/useInput';
 
 interface PairRoomEntryModal {
   isOpen: boolean;

frontend/src/pages/MyPage/MyPageContent/ListLayout/ListLayout.tsx → frontend/src/components/MyPage/ListLayout/ListLayout.tsx

@@ -1,4 +1,4 @@
-import Spinner from '@/components/common/Spinner/Spinner';
+import Spinner from '@/components/_common/Spinner/Spinner';
 
 import * as S from './ListLayout.styles';