Merge remote-tracking branch 'origin/fe/develop' into fe-657-LAND_01

woowacourse-teams · Sep 13, 2024 · 0bb12ad · 0bb12ad
2 parents cdfb2b3 + 72104d1
commit 0bb12ad
Show file tree

Hide file tree

Showing 170 changed files with 230 additions and 253 deletions.
diff --git a/frontend/src/assets/icons/ellipsis.svg b/frontend/src/assets/icons/ellipsis.svg
diff --git a/frontend/src/assets/icons/index.ts b/frontend/src/assets/icons/index.ts
diff --git a/frontend/src/assets/images/chevronDown.svg b/frontend/src/assets/images/chevronDown.svg
diff --git a/frontend/src/assets/images/chevronLeft.svg b/frontend/src/assets/images/chevronLeft.svg
diff --git a/frontend/src/assets/images/chevronRight.svg b/frontend/src/assets/images/chevronRight.svg
diff --git a/frontend/src/assets/images/chevronUp.svg b/frontend/src/assets/images/chevronUp.svg
diff --git a/frontend/src/assets/images/ellipsis.svg b/frontend/src/assets/images/ellipsis.svg
diff --git a/...antBaseInfo/ApplicantBaseInfo.stories.tsx → ...antBaseInfo/ApplicantBaseInfo.stories.tsx b/...antBaseInfo/ApplicantBaseInfo.stories.tsx → ...antBaseInfo/ApplicantBaseInfo.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import ApplicantBaseInfo from '.';
 
 const meta: Meta<typeof ApplicantBaseInfo> = {
-  title: 'Components/ApplicantModal/ApplicantBaseInfo',
+  title: 'Organisms/ApplicantModal/ApplicantBaseInfo',
   component: ApplicantBaseInfo,
   parameters: {
     layout: 'centered',

diff --git a/...ents/appModal/ApplicantBaseInfo/index.tsx → ...pplicantModal/ApplicantBaseInfo/index.tsx b/...ents/appModal/ApplicantBaseInfo/index.tsx → ...pplicantModal/ApplicantBaseInfo/index.tsx
@@ -1,7 +1,7 @@
 import { useParams } from 'react-router-dom';
 
-import Dropdown from '@components/common/Dropdown';
-import Button from '@components/common/Button';
+import Dropdown from '@components/_common/molecules/Dropdown';
+import Button from '@components/_common/atoms/Button';
 import useProcess from '@hooks/useProcess';
 import useApplicant from '@hooks/useApplicant';
 import specificApplicant from '@hooks/useSpecificApplicant';

diff --git a/...nents/appModal/ApplicantBaseInfo/style.ts → ...ApplicantModal/ApplicantBaseInfo/style.ts b/...nents/appModal/ApplicantBaseInfo/style.ts → ...ApplicantModal/ApplicantBaseInfo/style.ts
diff --git a/...pDetailHeader/AppDetailHeader.stories.tsx → ...pDetailHeader/AppDetailHeader.stories.tsx b/...pDetailHeader/AppDetailHeader.stories.tsx → ...pDetailHeader/AppDetailHeader.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Header from '.';
 
 const meta: Meta<typeof Header> = {
-  title: 'Components/ApplicantModal/ApplicantDetailInfo/Header',
+  title: 'Organisms/ApplicantModal/ApplicantDetailInfo/AppDetailHeader',
   component: Header,
   parameters: {
     layout: 'centered',

diff --git a/...icantDetailInfo/AppDetailHeader/index.tsx → ...icantDetailInfo/AppDetailHeader/index.tsx b/...icantDetailInfo/AppDetailHeader/index.tsx → ...icantDetailInfo/AppDetailHeader/index.tsx
diff --git a/...licantDetailInfo/AppDetailHeader/style.ts → ...licantDetailInfo/AppDetailHeader/style.ts b/...licantDetailInfo/AppDetailHeader/style.ts → ...licantDetailInfo/AppDetailHeader/style.ts
diff --git a/...etailInfo/ApplicantDetailInfo.stories.tsx → ...etailInfo/ApplicantDetailInfo.stories.tsx b/...etailInfo/ApplicantDetailInfo.stories.tsx → ...etailInfo/ApplicantDetailInfo.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import ApplicantDetailInfo from '.';
 
 const meta: Meta<typeof ApplicantDetailInfo> = {
-  title: 'Components/ApplicantDetailInfo',
+  title: 'Organisms/ApplicantModal/ApplicantDetailInfo',
   component: ApplicantDetailInfo,
   parameters: {
     layout: 'centered',

diff --git a/...estionSection/QuestionSection.stories.tsx → ...estionSection/QuestionSection.stories.tsx b/...estionSection/QuestionSection.stories.tsx → ...estionSection/QuestionSection.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import QuestionSection from '.';
 
 const meta: Meta<typeof QuestionSection> = {
-  title: 'Components/ApplicantModal/ApplicantDetailInfo/QuestionSection',
+  title: 'Organisms/ApplicantModal/ApplicantDetailInfo/QuestionSection',
   component: QuestionSection,
   parameters: {
     layout: 'centered',

diff --git a/...icantDetailInfo/QuestionSection/index.tsx → ...icantDetailInfo/QuestionSection/index.tsx b/...icantDetailInfo/QuestionSection/index.tsx → ...icantDetailInfo/QuestionSection/index.tsx
@@ -1,4 +1,4 @@
-import QuestionBox from '@components/common/QuestionBox';
+import QuestionBox from '@components/_common/atoms/QuestionBox';
 import specificApplicant from '@hooks/useSpecificApplicant';
 import S from './style';
 

diff --git a/...licantDetailInfo/QuestionSection/style.ts → ...licantDetailInfo/QuestionSection/style.ts b/...licantDetailInfo/QuestionSection/style.ts → ...licantDetailInfo/QuestionSection/style.ts
diff --git a/...ts/appModal/ApplicantDetailInfo/index.tsx → ...licantModal/ApplicantDetailInfo/index.tsx b/...ts/appModal/ApplicantDetailInfo/index.tsx → ...licantModal/ApplicantDetailInfo/index.tsx
diff --git a/...nts/appModal/ApplicantDetailInfo/style.ts → ...plicantModal/ApplicantDetailInfo/style.ts b/...nts/appModal/ApplicantDetailInfo/style.ts → ...plicantModal/ApplicantDetailInfo/style.ts
diff --git a/...AddButton/EvaluationAddButton.stories.tsx → ...AddButton/EvaluationAddButton.stories.tsx b/...AddButton/EvaluationAddButton.stories.tsx → ...AddButton/EvaluationAddButton.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import EvaluationAddButton from '.';
 
 const meta = {
-  title: 'Components/ApplicantModal/ApplicantEvalInfo/EvaluationAddButton',
+  title: 'Organisms/ApplicantModal/ApplicantEvalInfo/EvaluationAddButton',
   component: EvaluationAddButton,
   parameters: {
     layout: 'centered',

diff --git a/...antEvalInfo/EvaluationAddButton/index.tsx → ...antEvalInfo/EvaluationAddButton/index.tsx b/...antEvalInfo/EvaluationAddButton/index.tsx → ...antEvalInfo/EvaluationAddButton/index.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/common/Button';
+import Button from '@components/_common/atoms/Button';
 import S from './style';
 
 interface EvaluationAddButtonProps {

diff --git a/...cantEvalInfo/EvaluationAddButton/style.ts → ...cantEvalInfo/EvaluationAddButton/style.ts b/...cantEvalInfo/EvaluationAddButton/style.ts → ...cantEvalInfo/EvaluationAddButton/style.ts
diff --git a/...EvaluationCard/EvaluationCard.stories.tsx → ...EvaluationCard/EvaluationCard.stories.tsx b/...EvaluationCard/EvaluationCard.stories.tsx → ...EvaluationCard/EvaluationCard.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import EvaluationCard from './index';
 
 const meta: Meta<typeof EvaluationCard> = {
-  title: 'Components/ApplicantModal/ApplicantEvalInfo/EvaluationCard',
+  title: 'Organisms/ApplicantModal/ApplicantEvalInfo/EvaluationCard',
   component: EvaluationCard,
   parameters: {
     layout: 'centered',

diff --git a/...pplicantEvalInfo/EvaluationCard/index.tsx → ...pplicantEvalInfo/EvaluationCard/index.tsx b/...pplicantEvalInfo/EvaluationCard/index.tsx → ...pplicantEvalInfo/EvaluationCard/index.tsx
diff --git a/...ApplicantEvalInfo/EvaluationCard/style.ts → ...ApplicantEvalInfo/EvaluationCard/style.ts b/...ApplicantEvalInfo/EvaluationCard/style.ts → ...ApplicantEvalInfo/EvaluationCard/style.ts
diff --git a/...EvaluationForm/EvaluationForm.stories.tsx → ...EvaluationForm/EvaluationForm.stories.tsx b/...EvaluationForm/EvaluationForm.stories.tsx → ...EvaluationForm/EvaluationForm.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import EvaluationForm from './index';
 
 const meta: Meta<typeof EvaluationForm> = {
-  title: 'Components/ApplicantModal/ApplicantEvalInfo/EvaluationForm',
+  title: 'Organisms/ApplicantModal/ApplicantEvalInfo/EvaluationForm',
   component: EvaluationForm,
   parameters: {
     layout: 'centered',

diff --git a/...pplicantEvalInfo/EvaluationForm/index.tsx → ...pplicantEvalInfo/EvaluationForm/index.tsx b/...pplicantEvalInfo/EvaluationForm/index.tsx → ...pplicantEvalInfo/EvaluationForm/index.tsx
@@ -1,14 +1,14 @@
 import { useState } from 'react';
 
-import RadioField from '@components/common/RadioField';
-import Button from '@components/common/Button';
-import TextField from '@components/common/TextField';
+import RadioField from '@components/_common/molecules/RadioField';
+import Button from '@components/_common/atoms/Button';
+import TextField from '@components/_common/molecules/TextField';
 
 import useEvaluationMutation from '@hooks/useEvaluationMutation';
 import ValidationError from '@utils/errors/ValidationError';
 import { validateEvalContent } from '@domain/validations/evaluation';
 
-import Spinner from '@components/common/Spinner';
+import Spinner from '@components/_common/atoms/Spinner';
 import { EVALUATION_CONTENT_MAX_LENGTH, EVALUATION_SCORE } from '../constants';
 import S from './style';
 

diff --git a/...ApplicantEvalInfo/EvaluationForm/style.ts → ...ApplicantEvalInfo/EvaluationForm/style.ts b/...ApplicantEvalInfo/EvaluationForm/style.ts → ...ApplicantEvalInfo/EvaluationForm/style.ts
diff --git a/...uationHeader/EvaluationHeader.stories.tsx → ...uationHeader/EvaluationHeader.stories.tsx b/...uationHeader/EvaluationHeader.stories.tsx → ...uationHeader/EvaluationHeader.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import EvaluationHeader from './index';
 
 const meta: Meta<typeof EvaluationHeader> = {
-  title: 'Components/ApplicantModal/ApplicantEvalInfo/EvaluationHeader',
+  title: 'Organisms/ApplicantModal/ApplicantEvalInfo/EvaluationHeader',
   component: EvaluationHeader,
   parameters: {
     layout: 'centered',

diff --git a/...licantEvalInfo/EvaluationHeader/index.tsx → ...licantEvalInfo/EvaluationHeader/index.tsx b/...licantEvalInfo/EvaluationHeader/index.tsx → ...licantEvalInfo/EvaluationHeader/index.tsx
diff --git a/...plicantEvalInfo/EvaluationHeader/style.ts → ...plicantEvalInfo/EvaluationHeader/style.ts b/...plicantEvalInfo/EvaluationHeader/style.ts → ...plicantEvalInfo/EvaluationHeader/style.ts
diff --git a/...s/appModal/ApplicantEvalInfo/constants.ts → ...icantModal/ApplicantEvalInfo/constants.ts b/...s/appModal/ApplicantEvalInfo/constants.ts → ...icantModal/ApplicantEvalInfo/constants.ts
diff --git a/...ents/appModal/ApplicantEvalInfo/index.tsx → ...pplicantModal/ApplicantEvalInfo/index.tsx b/...ents/appModal/ApplicantEvalInfo/index.tsx → ...pplicantModal/ApplicantEvalInfo/index.tsx
diff --git a/...nents/appModal/ApplicantEvalInfo/style.ts → ...ApplicantModal/ApplicantEvalInfo/style.ts b/...nents/appModal/ApplicantEvalInfo/style.ts → ...ApplicantModal/ApplicantEvalInfo/style.ts
diff --git a/...ts/common/BaseModal/BaseModal.stories.tsx → ...cantModal/BaseModal/BaseModal.stories.tsx b/...ts/common/BaseModal/BaseModal.stories.tsx → ...cantModal/BaseModal/BaseModal.stories.tsx
@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { ModalProvider, useModal } from '@contexts/ModalContext';
-import Button from '@components/common/Button';
+import Button from '@components/_common/atoms/Button';
 import BaseModal from '.';
 
 const meta: Meta<typeof BaseModal> = {
-  title: 'Common/Modal/BaseModal',
+  title: 'Common/Atoms/BaseModal',
   component: BaseModal,
   parameters: {
     layout: 'centered',

diff --git a/...src/components/common/BaseModal/index.tsx → ...onents/ApplicantModal/BaseModal/index.tsx b/...src/components/common/BaseModal/index.tsx → ...onents/ApplicantModal/BaseModal/index.tsx
diff --git a/...src/components/common/BaseModal/styled.ts → ...onents/ApplicantModal/BaseModal/styled.ts b/...src/components/common/BaseModal/styled.ts → ...onents/ApplicantModal/BaseModal/styled.ts
diff --git a/...c/components/common/ModalHeader/index.tsx → ...ents/ApplicantModal/ModalHeader/index.tsx b/...c/components/common/ModalHeader/index.tsx → ...ents/ApplicantModal/ModalHeader/index.tsx
@@ -1,13 +1,13 @@
 import { useModal } from '@contexts/ModalContext';
 import { MdClose } from 'react-icons/md';
-import IconButton from '../IconButton';
+import IconButton from '@components/_common/atoms/IconButton';
 import S from './style';
 
 interface ModalHeaderProps {
   title: string;
 }
 
-export default function ModalHeader({ title }: ModalHeaderProps) {
+export default function ApplicatnModalHeader({ title }: ModalHeaderProps) {
   const { close } = useModal();
   return (
     <S.Container>

diff --git a/...rc/components/common/ModalHeader/style.ts → ...nents/ApplicantModal/ModalHeader/style.ts b/...rc/components/common/ModalHeader/style.ts → ...nents/ApplicantModal/ModalHeader/style.ts
diff --git a/frontend/src/components/appModal/index.tsx → ...d/src/components/ApplicantModal/index.tsx b/frontend/src/components/appModal/index.tsx → ...d/src/components/ApplicantModal/index.tsx
@@ -1,14 +1,16 @@
-import BaseModal from '@components/common/BaseModal';
 import { useSpecificApplicantId } from '@contexts/SpecificApplicnatIdContext';
 import { useSpecificProcessId } from '@contexts/SpecificProcessIdContext';
-import ApplicantBaseInfo from './ApplicantBaseInfo';
 
-import ModalHeader from '../common/ModalHeader';
+import BaseModal from './BaseModal';
+
+import ApplicantBaseInfo from './ApplicantBaseInfo';
+import ApplicatnModalHeader from './ModalHeader';
 import QuestionSection from './ApplicantDetailInfo/QuestionSection';
-import S from './style';
 import ApplicantEvalInfo from './ApplicantEvalInfo';
 import EvaluationHeader from './ApplicantEvalInfo/EvaluationHeader';
 
+import S from './style';
+
 export default function ApplicantModal() {
   const { applicantId } = useSpecificApplicantId();
   const { processId } = useSpecificProcessId();
@@ -18,7 +20,7 @@ export default function ApplicantModal() {
     <BaseModal>
       <S.Container>
         <S.ModalHeader>
-          <ModalHeader title="지원서" />
+          <ApplicatnModalHeader title="지원서" />
         </S.ModalHeader>
 
         <S.ModalSidebar>

diff --git a/frontend/src/components/appModal/style.ts → ...nd/src/components/ApplicantModal/style.ts b/frontend/src/components/appModal/style.ts → ...nd/src/components/ApplicantModal/style.ts
diff --git a/...ponents/common/ApiErrorBoundary/index.tsx → .../_common/atoms/ApiErrorBoundary/index.tsx b/...ponents/common/ApiErrorBoundary/index.tsx → .../_common/atoms/ApiErrorBoundary/index.tsx
diff --git a/...mponents/common/ApiErrorBoundary/types.ts → ...s/_common/atoms/ApiErrorBoundary/types.ts b/...mponents/common/ApiErrorBoundary/types.ts → ...s/_common/atoms/ApiErrorBoundary/types.ts
diff --git a/...mponents/common/Button/Button.stories.tsx → ...s/_common/atoms/Button/Button.stories.tsx b/...mponents/common/Button/Button.stories.tsx → ...s/_common/atoms/Button/Button.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Button from '.';
 
 const meta = {
-  title: 'Common/Button/Button',
+  title: 'Common/Atoms/Button',
   component: Button,
   parameters: {
     layout: 'centered',

diff --git a/...nd/src/components/common/Button/index.tsx → ...components/_common/atoms/Button/index.tsx b/...nd/src/components/common/Button/index.tsx → ...components/_common/atoms/Button/index.tsx
diff --git a/...end/src/components/common/Button/style.ts → .../components/_common/atoms/Button/style.ts b/...end/src/components/common/Button/style.ts → .../components/_common/atoms/Button/style.ts
diff --git a/...ents/common/CheckBox/CheckBox.stories.tsx → ...ommon/atoms/CheckBox/CheckBox.stories.tsx b/...ents/common/CheckBox/CheckBox.stories.tsx → ...ommon/atoms/CheckBox/CheckBox.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import CheckBox from './index';
 
 const meta: Meta<typeof CheckBox> = {
-  title: 'Common/CheckBox/CheckBox',
+  title: 'Common/Atoms/CheckBox',
   component: CheckBox,
   parameters: {
     layout: 'centered',

diff --git a/.../src/components/common/CheckBox/index.tsx → ...mponents/_common/atoms/CheckBox/index.tsx b/.../src/components/common/CheckBox/index.tsx → ...mponents/_common/atoms/CheckBox/index.tsx
diff --git a/.../src/components/common/CheckBox/styles.ts → ...mponents/_common/atoms/CheckBox/styles.ts b/.../src/components/common/CheckBox/styles.ts → ...mponents/_common/atoms/CheckBox/styles.ts
diff --git a/...pyToClipboard/CopyToClipboard.stories.tsx → ...pyToClipboard/CopyToClipboard.stories.tsx b/...pyToClipboard/CopyToClipboard.stories.tsx → ...pyToClipboard/CopyToClipboard.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import CopyToClipboard from '.';
 
 const meta = {
-  title: 'Common/Button/CopyToClipboard',
+  title: 'Common/Atoms/CopyToClipboard',
   component: CopyToClipboard,
   parameters: {
     docs: {

diff --git a/...mponents/common/CopyToClipboard/index.tsx → ...s/_common/atoms/CopyToClipboard/index.tsx b/...mponents/common/CopyToClipboard/index.tsx → ...s/_common/atoms/CopyToClipboard/index.tsx
diff --git a/...omponents/common/CopyToClipboard/style.ts → ...ts/_common/atoms/CopyToClipboard/style.ts b/...omponents/common/CopyToClipboard/style.ts → ...ts/_common/atoms/CopyToClipboard/style.ts
diff --git a/...ts/common/DateInput/DateInput.stories.tsx → ...mon/atoms/DateInput/DateInput.stories.tsx b/...ts/common/DateInput/DateInput.stories.tsx → ...mon/atoms/DateInput/DateInput.stories.tsx
@@ -4,7 +4,7 @@ import formatDate from '@utils/formatDate';
 import DateInput from './index';
 
 const meta: Meta<typeof DateInput> = {
-  title: 'Common/Input/DateInput',
+  title: 'Common/Atoms/DateInput',
   component: DateInput,
   parameters: {
     layout: 'centered',

diff --git a/...src/components/common/DateInput/index.tsx → ...ponents/_common/atoms/DateInput/index.tsx b/...src/components/common/DateInput/index.tsx → ...ponents/_common/atoms/DateInput/index.tsx
diff --git a/.../src/components/common/DateInput/style.ts → ...mponents/_common/atoms/DateInput/style.ts b/.../src/components/common/DateInput/style.ts → ...mponents/_common/atoms/DateInput/style.ts
diff --git a/...mon/DropdownItem/DropdownItem.stories.tsx → ...oms/DropdownItem/DropdownItem.stories.tsx b/...mon/DropdownItem/DropdownItem.stories.tsx → ...oms/DropdownItem/DropdownItem.stories.tsx
@@ -4,7 +4,7 @@ import DropdownItem, { DropdownItemProps } from '.';
 
 export default {
   component: DropdownItem,
-  title: 'Common/Dropdown/DropdownItem',
+  title: 'Common/Atoms/DropdownItem',
 } as Meta;
 
 const Template: StoryObj<DropdownItemProps> = {

diff --git a/.../components/common/DropdownItem/index.tsx → ...ents/_common/atoms/DropdownItem/index.tsx b/.../components/common/DropdownItem/index.tsx → ...ents/_common/atoms/DropdownItem/index.tsx
diff --git a/...c/components/common/DropdownItem/style.ts → ...nents/_common/atoms/DropdownItem/style.ts b/...c/components/common/DropdownItem/style.ts → ...nents/_common/atoms/DropdownItem/style.ts
diff --git a/.../common/IconButton/IconButton.stories.tsx → ...n/atoms/IconButton/IconButton.stories.tsx b/.../common/IconButton/IconButton.stories.tsx → ...n/atoms/IconButton/IconButton.stories.tsx
@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import EllipsisIcon from '@assets/icons/ellipsis.svg';
+import { HiEllipsisVertical } from 'react-icons/hi2';
+
 import IconButton from '.';
 
 const meta = {
-  title: 'Common/Button/IconButton',
+  title: 'Common/Atoms/IconButton',
   component: IconButton,
   parameters: {
     layout: 'centered',
@@ -45,12 +46,7 @@ const meta = {
       control: { type: 'select' },
       options: ['Ellipsis'],
       mapping: {
-        Ellipsis: (
-          <img
-            src={EllipsisIcon}
-            alt="더보기 아이콘 버튼"
-          />
-        ),
+        Ellipsis: <HiEllipsisVertical />,
       },
       table: {
         type: { summary: 'React.ReactNode' },

diff --git a/...rc/components/common/IconButton/index.tsx → ...onents/_common/atoms/IconButton/index.tsx b/...rc/components/common/IconButton/index.tsx → ...onents/_common/atoms/IconButton/index.tsx
diff --git a/...src/components/common/IconButton/style.ts → ...ponents/_common/atoms/IconButton/style.ts b/...src/components/common/IconButton/style.ts → ...ponents/_common/atoms/IconButton/style.ts
diff --git a/...mon/OpenInNewTab/OpenInNewTab.stories.tsx → ...oms/OpenInNewTab/OpenInNewTab.stories.tsx b/...mon/OpenInNewTab/OpenInNewTab.stories.tsx → ...oms/OpenInNewTab/OpenInNewTab.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import OpenInNewTab from '.';
 
 const meta = {
-  title: 'Common/Button/OpenInNewTab',
+  title: 'Common/Atoms/OpenInNewTab',
   component: OpenInNewTab,
   parameters: {
     docs: {

diff --git a/.../components/common/OpenInNewTab/index.tsx → ...ents/_common/atoms/OpenInNewTab/index.tsx b/.../components/common/OpenInNewTab/index.tsx → ...ents/_common/atoms/OpenInNewTab/index.tsx
diff --git a/...c/components/common/OpenInNewTab/style.ts → ...nents/_common/atoms/OpenInNewTab/style.ts b/...c/components/common/OpenInNewTab/style.ts → ...nents/_common/atoms/OpenInNewTab/style.ts
diff --git a/...ommon/QuestionBox/QuestionBox.stories.tsx → ...atoms/QuestionBox/QuestionBox.stories.tsx b/...ommon/QuestionBox/QuestionBox.stories.tsx → ...atoms/QuestionBox/QuestionBox.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import QuestionBox from '.';
 
 const meta: Meta<typeof QuestionBox> = {
-  title: 'Components/QuestionBox',
+  title: 'Common/Atoms/QuestionBox',
   component: QuestionBox,
   parameters: {
     layout: 'centered',

diff --git a/...c/components/common/QuestionBox/index.tsx → ...nents/_common/atoms/QuestionBox/index.tsx b/...c/components/common/QuestionBox/index.tsx → ...nents/_common/atoms/QuestionBox/index.tsx
diff --git a/...rc/components/common/QuestionBox/style.ts → ...onents/_common/atoms/QuestionBox/style.ts b/...rc/components/common/QuestionBox/style.ts → ...onents/_common/atoms/QuestionBox/style.ts
diff --git a/...components/common/Radio/Radio.stories.tsx → ...nts/_common/atoms/Radio/Radio.stories.tsx b/...components/common/Radio/Radio.stories.tsx → ...nts/_common/atoms/Radio/Radio.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Radio from '.';
 
 const meta: Meta<typeof Radio> = {
-  title: 'Common/Radio/Radio',
+  title: 'Common/Atoms/Radio',
   component: Radio,
   parameters: {
     layout: 'centered',

diff --git a/...end/src/components/common/Radio/index.tsx → .../components/_common/atoms/Radio/index.tsx b/...end/src/components/common/Radio/index.tsx → .../components/_common/atoms/Radio/index.tsx
diff --git a/...tend/src/components/common/Radio/style.ts → ...c/components/_common/atoms/Radio/style.ts b/...tend/src/components/common/Radio/style.ts → ...c/components/_common/atoms/Radio/style.ts
diff --git a/...onents/common/Spinner/Spinner.stories.tsx → ..._common/atoms/Spinner/Spinner.stories.tsx b/...onents/common/Spinner/Spinner.stories.tsx → ..._common/atoms/Spinner/Spinner.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Spinner from '.';
 
 const meta = {
-  title: 'Common/Spinner',
+  title: 'Common/Atoms/Spinner',
   component: Spinner,
   parameters: {
     layout: 'centered',

diff --git a/...d/src/components/common/Spinner/index.tsx → ...omponents/_common/atoms/Spinner/index.tsx b/...d/src/components/common/Spinner/index.tsx → ...omponents/_common/atoms/Spinner/index.tsx
diff --git a/...nd/src/components/common/Spinner/style.ts → ...components/_common/atoms/Spinner/style.ts b/...nd/src/components/common/Spinner/style.ts → ...components/_common/atoms/Spinner/style.ts
diff --git a/.../common/TextEditor/TextEditor.stories.tsx → ...n/atoms/TextEditor/TextEditor.stories.tsx b/.../common/TextEditor/TextEditor.stories.tsx → ...n/atoms/TextEditor/TextEditor.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import TextEditor from '.';
 
 const meta = {
-  title: 'Common/Input/TextEditor',
+  title: 'Common/Atoms/TextEditor',
   component: TextEditor,
   parameters: {
     layout: 'centered',

diff --git a/...rc/components/common/TextEditor/index.tsx → ...onents/_common/atoms/TextEditor/index.tsx b/...rc/components/common/TextEditor/index.tsx → ...onents/_common/atoms/TextEditor/index.tsx
diff --git a/...rc/components/common/TextEditor/style.css → ...onents/_common/atoms/TextEditor/style.css b/...rc/components/common/TextEditor/style.css → ...onents/_common/atoms/TextEditor/style.css
diff --git a/...components/common/Toast/Toast.stories.tsx → ...nts/_common/atoms/Toast/Toast.stories.tsx b/...components/common/Toast/Toast.stories.tsx → ...nts/_common/atoms/Toast/Toast.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Toast from '.';
 
 const meta: Meta<typeof Toast> = {
-  title: 'Common/Toast',
+  title: 'Common/Atoms/Toast',
   component: Toast,
   parameters: {
     layout: 'centered',

diff --git a/...end/src/components/common/Toast/index.tsx → .../components/_common/atoms/Toast/index.tsx b/...end/src/components/common/Toast/index.tsx → .../components/_common/atoms/Toast/index.tsx
diff --git a/...tend/src/components/common/Toast/style.ts → ...c/components/_common/atoms/Toast/style.ts b/...tend/src/components/common/Toast/style.ts → ...c/components/_common/atoms/Toast/style.ts
diff --git a/...mon/ToggleSwitch/ToggleSwitch.stories.tsx → ...oms/ToggleSwitch/ToggleSwitch.stories.tsx b/...mon/ToggleSwitch/ToggleSwitch.stories.tsx → ...oms/ToggleSwitch/ToggleSwitch.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import ToggleSwitch from './index';
 
 const meta: Meta<typeof ToggleSwitch> = {
-  title: 'Common/ToggleSwitch',
+  title: 'Common/Atoms/ToggleSwitch',
   component: ToggleSwitch,
   parameters: {
     layout: 'centered',

diff --git a/.../components/common/ToggleSwitch/index.tsx → ...ents/_common/atoms/ToggleSwitch/index.tsx b/.../components/common/ToggleSwitch/index.tsx → ...ents/_common/atoms/ToggleSwitch/index.tsx
diff --git a/...c/components/common/ToggleSwitch/style.ts → ...nents/_common/atoms/ToggleSwitch/style.ts b/...c/components/common/ToggleSwitch/style.ts → ...nents/_common/atoms/ToggleSwitch/style.ts
diff --git a/...ts/common/Accordion/Accordion.stories.tsx → ...molecules/Accordion/Accordion.stories.tsx b/...ts/common/Accordion/Accordion.stories.tsx → ...molecules/Accordion/Accordion.stories.tsx
@@ -3,7 +3,7 @@ import Accordion from './index';
 import S from './style';
 
 const meta: Meta<typeof Accordion> = {
-  title: 'Common/Accordion',
+  title: 'Common/Molecules/Accordion',
   component: Accordion,
   parameters: {
     layout: 'centered',

diff --git a/...src/components/common/Accordion/index.tsx → ...nts/_common/molecules/Accordion/index.tsx b/...src/components/common/Accordion/index.tsx → ...nts/_common/molecules/Accordion/index.tsx
@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
-import { HiOutlineClipboardList } from 'react-icons/hi';
+import { HiChevronDown, HiChevronUp, HiOutlineClipboardList } from 'react-icons/hi';
 
 import S from './style';
-import ChevronButton from '../ChevronButton';
 
 interface AccordionProps {
   title: React.ReactNode;
@@ -24,10 +23,7 @@ function Accordion({ title, children }: AccordionProps) {
           <HiOutlineClipboardList />
           <S.TitleText>{title}</S.TitleText>
         </S.Title>
-        <ChevronButton
-          size="sm"
-          direction={isOpen ? 'down' : 'up'}
-        />
+        {isOpen ? <HiChevronDown size={24} /> : <HiChevronUp size={24} />}
       </S.Header>
       {isOpen && <S.List>{children}</S.List>}
     </S.Container>

diff --git a/.../src/components/common/Accordion/style.ts → ...ents/_common/molecules/Accordion/style.ts b/.../src/components/common/Accordion/style.ts → ...ents/_common/molecules/Accordion/style.ts
diff --git a/...CheckBoxOption/CheckBoxOption.stories.tsx → ...CheckBoxOption/CheckBoxOption.stories.tsx b/...CheckBoxOption/CheckBoxOption.stories.tsx → ...CheckBoxOption/CheckBoxOption.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import CheckBoxOption from './index';
 
 const meta: Meta<typeof CheckBoxOption> = {
-  title: 'Components/Recruitment/CheckBox/CheckBoxOption',
+  title: 'Common/Molecules/CheckBoxOption',
   component: CheckBoxOption,
   parameters: {
     layout: 'centered',

diff --git a/...ents/recruitment/CheckBoxOption/index.tsx → ...common/molecules/CheckBoxOption/index.tsx b/...ents/recruitment/CheckBoxOption/index.tsx → ...common/molecules/CheckBoxOption/index.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable prefer-arrow-callback */
 import { ComponentPropsWithRef } from 'react';
 import { HiOutlineX } from 'react-icons/hi';
-import CheckBox from '@components/common/CheckBox';
+import CheckBox from '@components/_common/atoms/CheckBox';
 import S from './style';
 
 interface CheckBoxOptionProps {

diff --git a/...nents/recruitment/CheckBoxOption/style.ts → ..._common/molecules/CheckBoxOption/style.ts b/...nents/recruitment/CheckBoxOption/style.ts → ..._common/molecules/CheckBoxOption/style.ts
diff --git a/...LabelField/CheckboxLabelField.stories.tsx → ...LabelField/CheckboxLabelField.stories.tsx b/...LabelField/CheckboxLabelField.stories.tsx → ...LabelField/CheckboxLabelField.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import CheckboxLabelField from './index';
 
 const meta: Meta<typeof CheckboxLabelField> = {
-  title: 'Common/Checkbox/CheckboxLabelField',
+  title: 'Common/Molecules/CheckboxLabelField',
   component: CheckboxLabelField,
   parameters: {
     layout: 'centered',