[Refactor] 도메인에 종속되지 않는 공통 컴포넌트, 훅 common 폴더로 이동

.storybook/preview.tsx

@@ -1,7 +1,7 @@
 import type { Preview } from '@storybook/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
-import ModalProvider from '../src/shared/components/ModalProvider/ModalProvier';
+import ModalProvider from '../src/common/components/Modal/ModalProvider';
 import '../src/shared/styles/global.css';
 import '../src/shared/styles/reset.css';
 

src/App.tsx

@@ -4,8 +4,8 @@ import { useEffect } from 'react';
 import { Toaster } from 'react-hot-toast';
 import { RouterProvider } from 'react-router-dom';
 import { router } from '@/routes/router.tsx';
+import ModalProvider from '@/common/components/Modal/ModalProvider';
 import GlobalErrorBoundary from '@/shared/components/ErrorBoundary/GlobalErrorBoundary/GlobalErrorBoundary';
-import ModalProvider from '@/shared/components/ModalProvider/ModalProvier';
 import queryClient from './queryClient';
 import './shared/styles/index.css';
 

src/shared/components/BlurButton/BlurButton.tsx → src/common/components/BlurButton/BlurButton.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
-import { fixedContainerStyle, blurCapStyle, wrapperStyle } from '@/shared/components/BlurButton/BlurButton.css';
+import { fixedContainerStyle, blurCapStyle, wrapperStyle } from '@/common/components/BlurButton/BlurButton.css';
 
 interface BlurButtonPropTypes {
   blurColor?: 'gray' | 'white';

src/shared/components/BoxButton/BoxButton.tsx → src/common/components/BoxButton/BoxButton.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import type { ButtonHTMLAttributes } from 'react';
-import { buttonStyle } from '@/shared/components/BoxButton/boxButton.css';
+import { buttonStyle } from '@/common/components/BoxButton/boxButton.css';
 
 export interface BoxButtonPropTypes extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary' | 'outline' | 'temp' | 'heart' | 'transparency' | 'quaternary';

src/shared/components/Card/Card.tsx → src/common/components/Card/Card.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import type { ComponentProps } from 'react';
-import { cardStyle } from '@/shared/components/Card/card.css';
+import { cardStyle } from '@/common/components/Card/card.css';
 
 type CardProps = ComponentProps<'div'>;
 

src/shared/components/Divider/Divider.tsx → src/common/components/Divider/Divider.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import type { HTMLAttributes } from 'react';
-import { dividerStyle } from '@/shared/components/Divider/divider.css';
+import { dividerStyle } from '@/common/components/Divider/divider.css';
 
 interface DividerProps extends HTMLAttributes<HTMLDivElement> {
   direction?: 'horizontal' | 'vertical';

src/common/components/Dropdown/Dropdown.tsx

@@ -7,8 +7,8 @@ import {
   listStyle,
   triggerStyle,
 } from '@/common/components/Dropdown/dropdown.css';
+import useOutsideClick from '@/common/hooks/useOutsideClick';
 import SvgIcArrowDownGray1032 from '@/shared/assets/svg/IcArrowDownGray1032';
-import useOutsideClick from '@/shared/hooks/useOutsideClick';
 
 interface DropdownProps {
   selectedOption: string;

src/shared/components/Head/Head.tsx → src/common/components/Head/Head.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import type { ComponentPropsWithRef } from 'react';
 import { forwardRef } from 'react';
-import { headStyle } from '@/shared/components/Head/head.css';
+import { headStyle } from '@/common/components/Head/head.css';
 
 type HeadLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 type HeadTag =

src/shared/components/Input/Input.tsx → src/common/components/Input/Input.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import type { ForwardedRef, InputHTMLAttributes, ReactNode } from 'react';
 import { forwardRef, useState } from 'react';
-import * as style from '@/shared/components/Input/input.css';
-import Text from '@/shared/components/Text/Text';
+import * as style from '@/common/components/Input/input.css';
+import Text from '@/common/components/Text/Text';
 
 interface InputPropTypes extends InputHTMLAttributes<HTMLInputElement> {
   isError?: boolean;

src/common/components/Modal/Modal.tsx

@@ -8,7 +8,7 @@ import {
   closeButtonStyle,
   descriptionStyle,
 } from '@/common/components/Modal/modal.css';
-import BoxButton from '@/shared/components/BoxButton/BoxButton';
+import BoxButton from '@/common/components/BoxButton/BoxButton';
 import { vars } from '@/shared/styles/theme.css';
 
 interface DialogProps {

src/shared/components/Spinner/Spinner.tsx → src/common/components/Spinner/Spinner.tsx

@@ -1,4 +1,4 @@
-import { spinnerStyle } from '@/shared/components/Spinner/spinner.css';
+import { spinnerStyle } from '@/common/components/Spinner/spinner.css';
 
 const Spinner = () => {
   return <span className={spinnerStyle}></span>;

src/shared/components/Tab/TabButton.tsx → src/common/components/Tab/TabButton.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { tabButtonStyle } from '@/shared/components/Tab/index.css';
+import { tabButtonStyle } from '@/common/components/Tab/index.css';
 
 interface TabButtonPropTypes {
   children: ReactNode;

src/shared/components/Tab/TabList.tsx → src/common/components/Tab/TabList.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
-import { tabListStyle } from '@/shared/components/Tab/index.css';
+import { tabListStyle } from '@/common/components/Tab/index.css';
 
 interface TabListPropTypes {
   children: ReactNode;

src/shared/components/Tab/TabPanel.tsx → src/common/components/Tab/TabPanel.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { tabPanelStyle } from '@/shared/components/Tab/index.css';
+import { tabPanelStyle } from '@/common/components/Tab/index.css';
 
 interface TabPanelPropTypes {
   children: ReactNode;

src/shared/components/Tab/TabRoot.tsx → src/common/components/Tab/TabRoot.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { tabRootStyle } from '@/shared/components/Tab/index.css';
+import { tabRootStyle } from '@/common/components/Tab/index.css';
 
 interface TabRootPropTypes {
   children: ReactNode;

src/common/components/Tab/index.tsx

@@ -0,0 +1,4 @@
+export { default as TabButton } from '@/common/components/Tab/TabButton';
+export { default as TabList } from '@/common/components/Tab/TabList';
+export { default as TabPanel } from '@/common/components/Tab/TabPanel';
+export { default as TabRoot } from '@/common/components/Tab/TabRoot';

src/shared/components/Tag/Tag.tsx → src/common/components/Tag/Tag.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import type { ComponentPropsWithoutRef } from 'react';
-import { tagStyle } from '@/shared/components/Tag/tag.css';
+import { tagStyle } from '@/common/components/Tag/tag.css';
 
 interface TagProps extends ComponentPropsWithoutRef<'div'> {
   size?: 'small' | 'medium' | 'large' | 'thumbnail' | 'mypage' | 'search' | 'sort' | 'timeSelector';

src/shared/components/Text/Text.tsx → src/common/components/Text/Text.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import type { HTMLAttributes } from 'react';
-import { textStyle } from '@/shared/components/Text/text.css';
+import { textStyle } from '@/common/components/Text/text.css';
 
 interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
   as?: 'p' | 'span';

src/shared/components/Toast/Toast.tsx → src/common/components/Toast/Toast.tsx

@@ -1,7 +1,7 @@
 import toast from 'react-hot-toast';
 import SvgIcCautionAlert0120 from '@/shared/assets/svg/IcCautionAlert0120';
 import SvgIcClear from '@/shared/assets/svg/IcClear';
-import { toastContentStyle } from '@/shared/components/Toast/toast.css';
+import { toastContentStyle } from '@/common/components/Toast/toast.css';
 import { vars } from '@/shared/styles/theme.css';
 
 export type iconType = 'success' | 'fail' | 'default';

src/stories/BoxButton.stories.tsx → src/common/stories/BoxButton.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import type { BoxButtonPropTypes } from '@/shared/components/BoxButton/BoxButton';
-import BoxButton from '@/shared/components/BoxButton/BoxButton';
+import type { BoxButtonPropTypes } from '@/common/components/BoxButton/BoxButton';
+import BoxButton from '@/common/components/BoxButton/BoxButton';
 
 const meta = {
   title: 'Common/BoxButton',

src/stories/Divider.stories.tsx → src/common/stories/Divider.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Divider from '@/shared/components/Divider/Divider';
+import Divider from '@/common/components/Divider/Divider';
 
 const meta = {
   title: 'Common/Divider',

src/stories/Head.stories.tsx → src/common/stories/Head.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Head from '@/shared/components/Head/Head';
+import Head from '@/common/components/Head/Head';
 
 const meta = {
   title: 'Common/Head',

src/stories/Header.stories.tsx → src/common/stories/Header.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
 import { BrowserRouter } from 'react-router-dom';
-import Header from '@/shared/components/Header/Header';
+import Header from '@/common/components/Header/Header';
 
 const meta: Meta<typeof Header> = {
   title: 'Common/Header',

src/stories/Input.stories.tsx → src/common/stories/Input.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Input from '@/shared/components/Input/Input';
+import Input from '@/common/components/Input/Input';
 
 const meta = {
   title: 'Common/Input',

src/stories/Modal.stories.tsx → src/common/stories/Modal.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import type { ReactElement } from 'react';
 import Modal from '@/common/components/Modal/Modal';
 import { useModalStore } from '@/common/stores/modal';
-import BoxButton from '@/shared/components/BoxButton/BoxButton';
+import BoxButton from '@/common/components/BoxButton/BoxButton';
 
 const meta = {
   title: 'Common/Modal',

src/stories/Tab.stories.tsx → src/common/stories/Tab.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { TabButton, TabList, TabPanel, TabRoot } from '@/shared/components/Tab';
+import { TabButton, TabList, TabPanel, TabRoot } from '@/common/components/Tab';
 
 export default {
   title: 'Common/Tabs',

src/stories/Tag.stories.tsx → src/common/stories/Tag.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import Tag from '@/common/components/Tag/Tag';
 import IcCalendarcheckColor3D24 from '@/shared/assets/svg/IcCalendarcheckColor3D24';
 import IcCalendarcheckMono3D24 from '@/shared/assets/svg/IcCalendarcheckMono3D24';
-import Tag from '@/shared/components/Tag/Tag';
 
 const meta = {
   title: 'Common/Tag',

src/stories/Text.stories.tsx → src/common/stories/Text.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Text from '@/shared/components/Text/Text';
+import Text from '@/common/components/Text/Text';
 
 const meta = {
   title: 'Common/Text',

src/stories/Toast.stories.tsx → src/common/stories/Toast.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { Toaster } from 'react-hot-toast';
-import type { iconType, notifyProps } from '@/shared/components/Toast/Toast';
-import { notify } from '@/shared/components/Toast/Toast';
+import type { iconType, notifyProps } from '@/common/components/Toast/Toast';
+import { notify } from '@/common/components/Toast/Toast';
 
 const meta: Meta = {
   title: 'Common/Toast',

src/layout/Layout.tsx

@@ -1,8 +1,8 @@
 import { Outlet, ScrollRestoration, useLocation } from 'react-router-dom';
 import { ROUTES_CONFIG } from '@/routes/routesConfig';
+import Header from '@/common/components/Header/Header';
 import { ApiErrorBoundary } from '@/shared/components/ErrorBoundary/ApiErrorBoundary/ApiErrorBoundary';
 import GlobalErrorBoundary from '@/shared/components/ErrorBoundary/GlobalErrorBoundary/GlobalErrorBoundary';
-import Header from '@/shared/components/Header/Header';
 
 const Layout = () => {
   const { pathname } = useLocation();

src/pages/accountRegister/AccountRegister.tsx

@@ -9,15 +9,15 @@ import ConfirmBottomSheet from '@/pages/accountRegister/components/ConfirmBottom
 import { ACCOUNT_REGISTER_FORM_KEY } from '@/pages/accountRegister/constants/registerSection';
 import { accountRegisterSchema } from '@/pages/accountRegister/schema/accountRegisterSchema';
 import { ROUTES_CONFIG } from '@/routes/routesConfig';
+import Input from '@/common/components/Input/Input';
 import { useGetBankList, useGetRole, useGetTeacherAccount } from '@/shared/apis/queries';
 import SvgIcArrowDownGray1032 from '@/shared/assets/svg/IcArrowDownGray1032';
 import BankBottomSheet from '@/shared/components/BankBottomSheet/BankBottomSheet';
-import BoxButton from '@/shared/components/BoxButton/BoxButton';
-import Divider from '@/shared/components/Divider/Divider';
-import Head from '@/shared/components/Head/Head';
-import Input from '@/shared/components/Input/Input';
-import Text from '@/shared/components/Text/Text';
-import { notify } from '@/shared/components/Toast/Toast';
+import BoxButton from '@/common/components/BoxButton/BoxButton';
+import Divider from '@/common/components/Divider/Divider';
+import Head from '@/common/components/Head/Head';
+import Text from '@/common/components/Text/Text';
+import { notify } from '@/common/components/Toast/Toast';
 import { MAX_ACCOUNT_NUMBER_LENGTH } from '@/shared/constants/account';
 import { queryKeys } from '@/shared/constants/queryKey';
 import { allowOnlyNumberKey, allowOnlyNumberPaste } from '@/shared/utils/inputUtils';

src/pages/accountRegister/components/ConfirmBottomSheet/ConfirmBottomSheet.tsx

@@ -1,10 +1,10 @@
 import { AnimatePresence, motion } from 'motion/react';
 import * as styles from '@/pages/accountRegister/components/ConfirmBottomSheet/confirmBottomSheet.css';
+import BoxButton from '@/common/components/BoxButton/BoxButton';
+import Head from '@/common/components/Head/Head';
+import Text from '@/common/components/Text/Text';
+import useOutsideClick from '@/common/hooks/useOutsideClick';
 import SvgIcClear from '@/shared/assets/svg/IcClear';
-import BoxButton from '@/shared/components/BoxButton/BoxButton';
-import Head from '@/shared/components/Head/Head';
-import Text from '@/shared/components/Text/Text';
-import useOutsideClick from '@/shared/hooks/useOutsideClick';
 import { vars } from '@/shared/styles/theme.css';
 
 interface ConfirmBottomSheetPropTypes {

src/pages/class/Class.tsx

@@ -6,9 +6,9 @@ import LimitedChip from '@/pages/class/components/LimitedChip/LimitedChip';
 import TabWrapper from '@/pages/class/components/TabWrapper/TabWrapper';
 import { LOW_SEAT_THRESHOLD } from '@/pages/class/constants';
 import ErrorPage from '@/pages/error/ErrorPage';
+import Divider from '@/common/components/Divider/Divider';
+import Text from '@/common/components/Text/Text';
 import IcCircleCautionFilled from '@/shared/assets/svg/IcCircleCautionFilled';
-import Divider from '@/shared/components/Divider/Divider';
-import Text from '@/shared/components/Text/Text';
 import { chipWrapperStyle, topImgStyle, withdrawIconStyle, withdrawImgStyle } from './class.css';
 
 const Class = () => {

src/pages/class/components/ClassButtonWrapper/ClassButtonWrapper.tsx

@@ -4,10 +4,10 @@ import { useClassButtonState } from '@/pages/class/hooks/useClassButtonState';
 import { useHeartToggle } from '@/pages/class/hooks/useHeartToggle';
 import type { LessonDetailResponseTypes } from '@/pages/class/types/api';
 import { ROUTES_CONFIG } from '@/routes/routesConfig';
+import BlurButton from '@/common/components/BlurButton/BlurButton';
 import IcHeartFilledGray07 from '@/shared/assets/svg/IcHeartFilledGray07';
 import IcHeartOutlinedGray07 from '@/shared/assets/svg/IcHeartOutlinedGray07';
-import BlurButton from '@/shared/components/BlurButton/BlurButton';
-import BoxButton from '@/shared/components/BoxButton/BoxButton';
+import BoxButton from '@/common/components/BoxButton/BoxButton';
 import { WITHDRAW_USER_NAME } from '@/shared/constants/withdrawUser';
 
 const ClassButtonWrapper = ({ lessonData }: { lessonData: LessonDetailResponseTypes }) => {

src/pages/class/components/ClassInfoWrapper/ClassInfoWrapper.tsx

@@ -17,10 +17,10 @@ import type { LessonDetailResponseTypes } from '@/pages/class/types/api';
 import { getDDayLabel } from '@/pages/class/utils/dDay';
 import type { GenreTypes } from '@/pages/onboarding/types/genreTypes';
 import { ROUTES_CONFIG } from '@/routes/routesConfig';
+import Head from '@/common/components/Head/Head';
+import Tag from '@/common/components/Tag/Tag';
+import Text from '@/common/components/Text/Text';
 import IcCircleCautionFilled from '@/shared/assets/svg/IcCircleCautionFilled';
-import Head from '@/shared/components/Head/Head';
-import Tag from '@/shared/components/Tag/Tag';
-import Text from '@/shared/components/Text/Text';
 import { genreMapping, levelMapping } from '@/shared/constants/index';
 import { WITHDRAW_USER_NAME } from '@/shared/constants/withdrawUser';
 

src/pages/class/components/LimitedChip/LimitedChip.tsx

@@ -1,7 +1,7 @@
 import * as styles from '@/pages/class/components/LimitedChip/limitedChip.css';
 import type { LessonDetailResponseTypes } from '@/pages/class/types/api';
+import Text from '@/common/components/Text/Text';
 import IcThunderMain0424 from '@/shared/assets/svg/IcThunderMain0424';
-import Text from '@/shared/components/Text/Text';
 import { vars } from '@/shared/styles/theme.css';
 
 const LimitedChip = ({ lessonData }: { lessonData: LessonDetailResponseTypes }) => {

src/pages/class/components/TabWrapper/TabIntro/TabIntro.tsx

@@ -1,6 +1,6 @@
 import * as styles from '@/pages/class/components/TabWrapper/TabIntro/tabIntro.css';
 import type { LessonDetailResponseTypes } from '@/pages/class/types/api';
-import Text from '@/shared/components/Text/Text';
+import Text from '@/common/components/Text/Text';
 
 const TabIntro = ({ lessonData }: { lessonData: LessonDetailResponseTypes }) => {
   const { detail } = lessonData;

src/pages/class/components/TabWrapper/TabLevel/TabLevel.tsx

@@ -12,10 +12,10 @@ import {
   recommendationHeaderStyle,
 } from '@/pages/class/components/TabWrapper/TabLevel/tabLevel.css';
 import type { LessonDetailResponseTypes } from '@/pages/class/types/api';
+import Head from '@/common/components/Head/Head';
+import Text from '@/common/components/Text/Text';
+import { notify } from '@/common/components/Toast/Toast';
 import IcQuesitonmark from '@/shared/assets/svg/IcQuesitonmark';
-import Head from '@/shared/components/Head/Head';
-import Text from '@/shared/components/Text/Text';
-import { notify } from '@/shared/components/Toast/Toast';
 import { LEVEL, levelMapping } from '@/shared/constants/index';
 
 const IcSparkleMain20 = lazy(() => import('@/shared/assets/svg/IcSparkleMain20'));

src/pages/class/components/TabWrapper/TabLocation/TabLocation.tsx

@@ -13,8 +13,8 @@ import {
   textGroupStyle,
 } from '@/pages/class/components/TabWrapper/TabLocation/tabLocation.css';
 import type { LessonDetailResponseTypes } from '@/pages/class/types/api';
-import Head from '@/shared/components/Head/Head';
-import Text from '@/shared/components/Text/Text';
+import Head from '@/common/components/Head/Head';
+import Text from '@/common/components/Text/Text';
 
 const IcLocation60 = lazy(() => import('@/shared/assets/svg/IcLocation60'));
 

src/pages/class/components/TabWrapper/TabPeriod/TabPeriod.tsx

@@ -7,8 +7,8 @@ import {
   periodInfoStyle,
 } from '@/pages/class/components/TabWrapper/TabPeriod/tabPeriod.css';
 import type { LessonDetailResponseTypes } from '@/pages/class/types/api';
-import Text from '@/shared/components/Text/Text';
-import { calculatePeriod, formatDate } from '@/shared/utils/dateCalculate';
+import Text from '@/common/components/Text/Text';
+import { calculatePeriod, formatDateToKR } from '@/shared/utils/date';
 
 const TabPeriod = ({ lessonData }: { lessonData: LessonDetailResponseTypes }) => {
   const { lessonRound } = lessonData;
@@ -29,7 +29,7 @@ const TabPeriod = ({ lessonData }: { lessonData: LessonDetailResponseTypes }) =>
               </div>
               <div className={periodInfoStyle}>
                 <Text tag="b2_sb" color="black">
-                  {formatDate(startDateTime)}
+                  {formatDateToKR(startDateTime)}
                 </Text>
                 <Text tag="b3_m" color="gray7">
                   {startTime} - {formattedEndTime} ({durationString})

src/pages/class/components/TabWrapper/TabWrapper.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { tabPanelStyle, tabListWrapperStyle } from '@/pages/class/components/TabWrapper/tabWrapper.css';
 import type { LessonDetailResponseTypes } from '@/pages/class/types/api';
-import { TabButton, TabList, TabPanel, TabRoot } from '@/shared/components/Tab';
-import { notify } from '@/shared/components/Toast/Toast';
+import { TabButton, TabList, TabPanel, TabRoot } from '@/common/components/Tab';
+import { notify } from '@/common/components/Toast/Toast';
 import { CLASS_TABS } from '@/shared/constants';
 
 interface TabWrapperPropTypes {