refactor-fe: 아토믹 디자인 패턴 도입

frontend/src/components/appModal/ApplicantBaseInfo/ApplicantBaseInfo.stories.tsx → frontend/src/components/ApplicantModal/ApplicantBaseInfo/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',

frontend/src/components/appModal/ApplicantBaseInfo/index.tsx → frontend/src/components/ApplicantModal/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';
@@ -45,7 +45,7 @@
 
   const rejectAppHandler = () => {
     const confirmAction = (message: string, action: () => void) => {
       const isConfirmed = window.confirm(message);
       if (isConfirmed) {
         action();
         close();

frontend/src/components/appModal/ApplicantDetailInfo/AppDetailHeader/AppDetailHeader.stories.tsx → frontend/src/components/ApplicantModal/ApplicantDetailInfo/AppDetailHeader/AppDetailHeader.stories.tsx

@@ -2,7 +2,7 @@
 import Header from '.';
 
 const meta: Meta<typeof Header> = {
-  title: 'Components/ApplicantModal/ApplicantDetailInfo/Header',
+  title: 'Organisms/ApplicantModal/ApplicantDetailInfo/AppDetailHeader',
   component: Header,
   parameters: {
     layout: 'centered',
@@ -47,12 +47,12 @@
       {
         id: 0,
         name: '지원서',
         onClick: () => console.log('지원서가 클릭되었습니다.'),
       },
       {
         id: 1,
         name: '이력서',
         onClick: () => console.log('이력서가 클릭되었습니다.'),
       },
     ],
     activeTabId: 0,

frontend/src/components/appModal/ApplicantDetailInfo/ApplicantDetailInfo.stories.tsx → frontend/src/components/ApplicantModal/ApplicantDetailInfo/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',

frontend/src/components/appModal/ApplicantDetailInfo/QuestionSection/QuestionSection.stories.tsx → frontend/src/components/ApplicantModal/ApplicantDetailInfo/QuestionSection/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',

frontend/src/components/appModal/ApplicantDetailInfo/QuestionSection/index.tsx → frontend/src/components/ApplicantModal/ApplicantDetailInfo/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';
 

frontend/src/components/appModal/ApplicantEvalInfo/EvaluationAddButton/EvaluationAddButton.stories.tsx → frontend/src/components/ApplicantModal/ApplicantEvalInfo/EvaluationAddButton/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',

frontend/src/components/appModal/ApplicantEvalInfo/EvaluationAddButton/index.tsx → frontend/src/components/ApplicantModal/ApplicantEvalInfo/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 {

frontend/src/components/appModal/ApplicantEvalInfo/EvaluationCard/EvaluationCard.stories.tsx → frontend/src/components/ApplicantModal/ApplicantEvalInfo/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',

frontend/src/components/appModal/ApplicantEvalInfo/EvaluationForm/EvaluationForm.stories.tsx → frontend/src/components/ApplicantModal/ApplicantEvalInfo/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',

frontend/src/components/appModal/ApplicantEvalInfo/EvaluationForm/index.tsx → frontend/src/components/ApplicantModal/ApplicantEvalInfo/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';
 

frontend/src/components/appModal/ApplicantEvalInfo/EvaluationHeader/EvaluationHeader.stories.tsx → frontend/src/components/ApplicantModal/ApplicantEvalInfo/EvaluationHeader/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',

frontend/src/components/common/BaseModal/BaseModal.stories.tsx → frontend/src/components/ApplicantModal/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',

frontend/src/components/common/ModalHeader/index.tsx → frontend/src/components/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>

frontend/src/components/appModal/index.tsx → frontend/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>

frontend/src/components/common/Button/Button.stories.tsx → frontend/src/components/_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',

frontend/src/components/common/CheckBox/CheckBox.stories.tsx → frontend/src/components/_common/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',

frontend/src/components/common/CopyToClipboard/CopyToClipboard.stories.tsx → frontend/src/components/_common/atoms/CopyToClipboard/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: {

frontend/src/components/common/DateInput/DateInput.stories.tsx → frontend/src/components/_common/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',

frontend/src/components/common/DropdownItem/DropdownItem.stories.tsx → frontend/src/components/_common/atoms/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> = {

frontend/src/components/common/IconButton/IconButton.stories.tsx → frontend/src/components/_common/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' },

frontend/src/components/common/OpenInNewTab/OpenInNewTab.stories.tsx → frontend/src/components/_common/atoms/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: {

frontend/src/components/common/QuestionBox/QuestionBox.stories.tsx → frontend/src/components/_common/atoms/QuestionBox/QuestionBox.stories.tsx

@@ -2,7 +2,7 @@
 import QuestionBox from '.';
 
 const meta: Meta<typeof QuestionBox> = {
-  title: 'Components/QuestionBox',
+  title: 'Common/Atoms/QuestionBox',
   component: QuestionBox,
   parameters: {
     layout: 'centered',
@@ -77,7 +77,7 @@
     header: '이력서',
     type: 'file',
     fileName: '이력서 파일 명_어쩌구.pdf',
     onFileDownload: () => console.log('File downloaded'),
   },
   parameters: {
     docs: {

frontend/src/components/common/Radio/Radio.stories.tsx → frontend/src/components/_common/atoms/Radio/Radio.stories.tsx

@@ -2,7 +2,7 @@
 import Radio from '.';
 
 const meta: Meta<typeof Radio> = {
-  title: 'Common/Radio/Radio',
+  title: 'Common/Atoms/Radio',
   component: Radio,
   parameters: {
     layout: 'centered',
@@ -52,7 +52,7 @@
   args: {
     isChecked: false,
     isDisabled: false,
     onToggle: () => console.log('Radio 버튼이 클릭되었습니다!'),
   },
 };
 
@@ -68,6 +68,6 @@
   args: {
     isChecked: false,
     diameter: '5rem',
     onToggle: () => console.log('Radio 버튼이 클릭되었습니다!'),
   },
 };

frontend/src/components/common/Spinner/Spinner.stories.tsx → frontend/src/components/_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',

frontend/src/components/common/TextEditor/TextEditor.stories.tsx → frontend/src/components/_common/atoms/TextEditor/TextEditor.stories.tsx

@@ -2,7 +2,7 @@
 import TextEditor from '.';
 
 const meta = {
-  title: 'Common/Input/TextEditor',
+  title: 'Common/Atoms/TextEditor',
   component: TextEditor,
   parameters: {
     layout: 'centered',
@@ -54,7 +54,7 @@
             <p><br></p><p><span style="color: rgb(230, 0, 0);">색깔 입히기</span></p>
             <p><span style="background-color: rgb(255, 255, 102);">배경색 입히기</span></p><p><br></p>`,
     placeholder: '내용을 입력하세요...',
     onChange: (content: string) => console.log('입력 내용:', content),
   },
 };
 
@@ -77,6 +77,6 @@
             <p><span style="background-color: rgb(255, 255, 102);">배경색 입히기</span></p><p><br></p>`,
     theme: 'bubble',
     placeholder: '내용을 입력하세요...',
     onChange: (content: string) => console.log('입력 내용:', content),
   },
 };

frontend/src/components/common/Toast/Toast.stories.tsx → frontend/src/components/_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',

frontend/src/components/common/ToggleSwitch/ToggleSwitch.stories.tsx → frontend/src/components/_common/atoms/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',

frontend/src/components/common/Accordion/Accordion.stories.tsx → frontend/src/components/_common/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',

frontend/src/components/common/Accordion/index.tsx → frontend/src/components/_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>

frontend/src/components/recruitment/CheckBoxOption/CheckBoxOption.stories.tsx → frontend/src/components/_common/molecules/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',

frontend/src/components/recruitment/CheckBoxOption/index.tsx → frontend/src/components/_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 {

frontend/src/components/common/CheckboxLabelField/CheckboxLabelField.stories.tsx → frontend/src/components/_common/molecules/CheckboxLabelField/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',