diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index a570d4aa4..705358396 100644 --- a/.storybook/preview.tsx +++ b/.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'; diff --git a/src/App.tsx b/src/App.tsx index a1214c90d..60b9ed369 100644 --- a/src/App.tsx +++ b/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'; diff --git a/src/shared/components/BlurButton/BlurButton.css.ts b/src/common/components/BlurButton/BlurButton.css.ts similarity index 100% rename from src/shared/components/BlurButton/BlurButton.css.ts rename to src/common/components/BlurButton/BlurButton.css.ts diff --git a/src/shared/components/BlurButton/BlurButton.tsx b/src/common/components/BlurButton/BlurButton.tsx similarity index 92% rename from src/shared/components/BlurButton/BlurButton.tsx rename to src/common/components/BlurButton/BlurButton.tsx index 047cb13e4..d2f6a9128 100644 --- a/src/shared/components/BlurButton/BlurButton.tsx +++ b/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'; diff --git a/src/shared/components/BoxButton/BoxButton.tsx b/src/common/components/BoxButton/BoxButton.tsx similarity index 92% rename from src/shared/components/BoxButton/BoxButton.tsx rename to src/common/components/BoxButton/BoxButton.tsx index 8337b6c01..60b74be10 100644 --- a/src/shared/components/BoxButton/BoxButton.tsx +++ b/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 { variant?: 'primary' | 'secondary' | 'outline' | 'temp' | 'heart' | 'transparency' | 'quaternary'; diff --git a/src/shared/components/BoxButton/boxButton.css.ts b/src/common/components/BoxButton/boxButton.css.ts similarity index 100% rename from src/shared/components/BoxButton/boxButton.css.ts rename to src/common/components/BoxButton/boxButton.css.ts diff --git a/src/shared/components/Card/Card.tsx b/src/common/components/Card/Card.tsx similarity index 82% rename from src/shared/components/Card/Card.tsx rename to src/common/components/Card/Card.tsx index 6836c2c7e..943c50145 100644 --- a/src/shared/components/Card/Card.tsx +++ b/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'>; diff --git a/src/shared/components/Card/card.css.ts b/src/common/components/Card/card.css.ts similarity index 100% rename from src/shared/components/Card/card.css.ts rename to src/common/components/Card/card.css.ts diff --git a/src/shared/components/Divider/Divider.tsx b/src/common/components/Divider/Divider.tsx similarity index 94% rename from src/shared/components/Divider/Divider.tsx rename to src/common/components/Divider/Divider.tsx index c5ecec779..a913e97fd 100644 --- a/src/shared/components/Divider/Divider.tsx +++ b/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 { direction?: 'horizontal' | 'vertical'; diff --git a/src/shared/components/Divider/divider.css.ts b/src/common/components/Divider/divider.css.ts similarity index 100% rename from src/shared/components/Divider/divider.css.ts rename to src/common/components/Divider/divider.css.ts diff --git a/src/common/components/Dropdown/Dropdown.tsx b/src/common/components/Dropdown/Dropdown.tsx index 53a0275b4..de2540107 100644 --- a/src/common/components/Dropdown/Dropdown.tsx +++ b/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; diff --git a/src/shared/components/Head/Head.tsx b/src/common/components/Head/Head.tsx similarity index 95% rename from src/shared/components/Head/Head.tsx rename to src/common/components/Head/Head.tsx index 89b5b9b9c..0c5e55afa 100644 --- a/src/shared/components/Head/Head.tsx +++ b/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 = diff --git a/src/shared/components/Head/head.css.ts b/src/common/components/Head/head.css.ts similarity index 100% rename from src/shared/components/Head/head.css.ts rename to src/common/components/Head/head.css.ts diff --git a/src/shared/components/Header/Header.tsx b/src/common/components/Header/Header.tsx similarity index 100% rename from src/shared/components/Header/Header.tsx rename to src/common/components/Header/Header.tsx diff --git a/src/shared/components/Header/header.css.ts b/src/common/components/Header/header.css.ts similarity index 100% rename from src/shared/components/Header/header.css.ts rename to src/common/components/Header/header.css.ts diff --git a/src/shared/components/Input/Input.tsx b/src/common/components/Input/Input.tsx similarity index 96% rename from src/shared/components/Input/Input.tsx rename to src/common/components/Input/Input.tsx index 1bf26b16a..c932a127d 100644 --- a/src/shared/components/Input/Input.tsx +++ b/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 { isError?: boolean; diff --git a/src/shared/components/Input/input.css.ts b/src/common/components/Input/input.css.ts similarity index 100% rename from src/shared/components/Input/input.css.ts rename to src/common/components/Input/input.css.ts diff --git a/src/common/components/Modal/Modal.tsx b/src/common/components/Modal/Modal.tsx index 670f99947..d2fabd89d 100644 --- a/src/common/components/Modal/Modal.tsx +++ b/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 { diff --git a/src/shared/components/ModalProvider/ModalProvier.tsx b/src/common/components/Modal/ModalProvider.tsx similarity index 100% rename from src/shared/components/ModalProvider/ModalProvier.tsx rename to src/common/components/Modal/ModalProvider.tsx diff --git a/src/shared/components/Spinner/Spinner.tsx b/src/common/components/Spinner/Spinner.tsx similarity index 63% rename from src/shared/components/Spinner/Spinner.tsx rename to src/common/components/Spinner/Spinner.tsx index 68466eca3..01c056b86 100644 --- a/src/shared/components/Spinner/Spinner.tsx +++ b/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 ; diff --git a/src/shared/components/Spinner/spinner.css.ts b/src/common/components/Spinner/spinner.css.ts similarity index 100% rename from src/shared/components/Spinner/spinner.css.ts rename to src/common/components/Spinner/spinner.css.ts diff --git a/src/shared/components/Tab/TabButton.tsx b/src/common/components/Tab/TabButton.tsx similarity index 90% rename from src/shared/components/Tab/TabButton.tsx rename to src/common/components/Tab/TabButton.tsx index e4562a983..0775911c2 100644 --- a/src/shared/components/Tab/TabButton.tsx +++ b/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; diff --git a/src/shared/components/Tab/TabList.tsx b/src/common/components/Tab/TabList.tsx similarity index 85% rename from src/shared/components/Tab/TabList.tsx rename to src/common/components/Tab/TabList.tsx index 89bf93ae4..7bf84e539 100644 --- a/src/shared/components/Tab/TabList.tsx +++ b/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; diff --git a/src/shared/components/Tab/TabPanel.tsx b/src/common/components/Tab/TabPanel.tsx similarity index 86% rename from src/shared/components/Tab/TabPanel.tsx rename to src/common/components/Tab/TabPanel.tsx index 99f626c2e..e3a4e008e 100644 --- a/src/shared/components/Tab/TabPanel.tsx +++ b/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; diff --git a/src/shared/components/Tab/TabRoot.tsx b/src/common/components/Tab/TabRoot.tsx similarity index 81% rename from src/shared/components/Tab/TabRoot.tsx rename to src/common/components/Tab/TabRoot.tsx index b0936edda..f25fa1d36 100644 --- a/src/shared/components/Tab/TabRoot.tsx +++ b/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; diff --git a/src/shared/components/Tab/index.css.ts b/src/common/components/Tab/index.css.ts similarity index 100% rename from src/shared/components/Tab/index.css.ts rename to src/common/components/Tab/index.css.ts diff --git a/src/common/components/Tab/index.tsx b/src/common/components/Tab/index.tsx new file mode 100644 index 000000000..1397189e3 --- /dev/null +++ b/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'; diff --git a/src/shared/components/Tag/Tag.tsx b/src/common/components/Tag/Tag.tsx similarity index 91% rename from src/shared/components/Tag/Tag.tsx rename to src/common/components/Tag/Tag.tsx index 41ea5f104..0abf42fe3 100644 --- a/src/shared/components/Tag/Tag.tsx +++ b/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'; diff --git a/src/shared/components/Tag/tag.css.ts b/src/common/components/Tag/tag.css.ts similarity index 100% rename from src/shared/components/Tag/tag.css.ts rename to src/common/components/Tag/tag.css.ts diff --git a/src/shared/components/Text/Text.tsx b/src/common/components/Text/Text.tsx similarity index 95% rename from src/shared/components/Text/Text.tsx rename to src/common/components/Text/Text.tsx index 1b3f0cfb1..3fe5c43c1 100644 --- a/src/shared/components/Text/Text.tsx +++ b/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 { as?: 'p' | 'span'; diff --git a/src/shared/components/Text/text.css.ts b/src/common/components/Text/text.css.ts similarity index 100% rename from src/shared/components/Text/text.css.ts rename to src/common/components/Text/text.css.ts diff --git a/src/shared/components/Toast/Toast.tsx b/src/common/components/Toast/Toast.tsx similarity index 96% rename from src/shared/components/Toast/Toast.tsx rename to src/common/components/Toast/Toast.tsx index e9ba0d9e5..cbc5f8fcc 100644 --- a/src/shared/components/Toast/Toast.tsx +++ b/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'; diff --git a/src/shared/components/Toast/toast.css.ts b/src/common/components/Toast/toast.css.ts similarity index 100% rename from src/shared/components/Toast/toast.css.ts rename to src/common/components/Toast/toast.css.ts diff --git a/src/shared/hooks/useDebounce.ts b/src/common/hooks/useDebounce.ts similarity index 100% rename from src/shared/hooks/useDebounce.ts rename to src/common/hooks/useDebounce.ts diff --git a/src/shared/hooks/useFunnel.tsx b/src/common/hooks/useFunnel.tsx similarity index 100% rename from src/shared/hooks/useFunnel.tsx rename to src/common/hooks/useFunnel.tsx diff --git a/src/shared/hooks/useIntersect.ts b/src/common/hooks/useIntersect.ts similarity index 100% rename from src/shared/hooks/useIntersect.ts rename to src/common/hooks/useIntersect.ts diff --git a/src/shared/hooks/useOutsideClick.ts b/src/common/hooks/useOutsideClick.ts similarity index 100% rename from src/shared/hooks/useOutsideClick.ts rename to src/common/hooks/useOutsideClick.ts diff --git a/src/stories/BoxButton.stories.tsx b/src/common/stories/BoxButton.stories.tsx similarity index 88% rename from src/stories/BoxButton.stories.tsx rename to src/common/stories/BoxButton.stories.tsx index 70bdba122..07082246d 100644 --- a/src/stories/BoxButton.stories.tsx +++ b/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', diff --git a/src/stories/Divider.stories.tsx b/src/common/stories/Divider.stories.tsx similarity index 95% rename from src/stories/Divider.stories.tsx rename to src/common/stories/Divider.stories.tsx index 9ba8cae9e..483f025ec 100644 --- a/src/stories/Divider.stories.tsx +++ b/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', diff --git a/src/stories/Dropdown.stories.tsx b/src/common/stories/Dropdown.stories.tsx similarity index 100% rename from src/stories/Dropdown.stories.tsx rename to src/common/stories/Dropdown.stories.tsx diff --git a/src/stories/Head.stories.tsx b/src/common/stories/Head.stories.tsx similarity index 97% rename from src/stories/Head.stories.tsx rename to src/common/stories/Head.stories.tsx index 22175b689..0b6d2ce36 100644 --- a/src/stories/Head.stories.tsx +++ b/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', diff --git a/src/stories/Header.stories.tsx b/src/common/stories/Header.stories.tsx similarity index 95% rename from src/stories/Header.stories.tsx rename to src/common/stories/Header.stories.tsx index 41740ce6a..882fb2144 100644 --- a/src/stories/Header.stories.tsx +++ b/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 = { title: 'Common/Header', diff --git a/src/stories/Input.stories.tsx b/src/common/stories/Input.stories.tsx similarity index 88% rename from src/stories/Input.stories.tsx rename to src/common/stories/Input.stories.tsx index 0751a0a3f..607f878e1 100644 --- a/src/stories/Input.stories.tsx +++ b/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', diff --git a/src/stories/Modal.stories.tsx b/src/common/stories/Modal.stories.tsx similarity index 95% rename from src/stories/Modal.stories.tsx rename to src/common/stories/Modal.stories.tsx index 03b4cae4c..21621209b 100644 --- a/src/stories/Modal.stories.tsx +++ b/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', diff --git a/src/stories/Tab.stories.tsx b/src/common/stories/Tab.stories.tsx similarity index 91% rename from src/stories/Tab.stories.tsx rename to src/common/stories/Tab.stories.tsx index 08196debb..cef0bce14 100644 --- a/src/stories/Tab.stories.tsx +++ b/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', diff --git a/src/stories/Tag.stories.tsx b/src/common/stories/Tag.stories.tsx similarity index 97% rename from src/stories/Tag.stories.tsx rename to src/common/stories/Tag.stories.tsx index 86a410ec9..0e743484f 100644 --- a/src/stories/Tag.stories.tsx +++ b/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', diff --git a/src/stories/Text.stories.tsx b/src/common/stories/Text.stories.tsx similarity index 98% rename from src/stories/Text.stories.tsx rename to src/common/stories/Text.stories.tsx index ee2f917ff..32faf6e14 100644 --- a/src/stories/Text.stories.tsx +++ b/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', diff --git a/src/stories/Toast.stories.tsx b/src/common/stories/Toast.stories.tsx similarity index 93% rename from src/stories/Toast.stories.tsx rename to src/common/stories/Toast.stories.tsx index 8caab2efc..afc8197d1 100644 --- a/src/stories/Toast.stories.tsx +++ b/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', diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx index 4801d136d..d0d0f4e91 100644 --- a/src/layout/Layout.tsx +++ b/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(); diff --git a/src/pages/accountRegister/AccountRegister.tsx b/src/pages/accountRegister/AccountRegister.tsx index be5c071c5..29e93b2c6 100644 --- a/src/pages/accountRegister/AccountRegister.tsx +++ b/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'; diff --git a/src/pages/accountRegister/components/.gitkeep b/src/pages/accountRegister/components/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/pages/accountRegister/components/ConfirmBottomSheet/ConfirmBottomSheet.tsx b/src/pages/accountRegister/components/ConfirmBottomSheet/ConfirmBottomSheet.tsx index 92df28356..c6bddc5d7 100644 --- a/src/pages/accountRegister/components/ConfirmBottomSheet/ConfirmBottomSheet.tsx +++ b/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 { diff --git a/src/pages/class/Class.tsx b/src/pages/class/Class.tsx index baf074c68..a0a2cdb50 100644 --- a/src/pages/class/Class.tsx +++ b/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 = () => { diff --git a/src/pages/class/components/ClassButtonWrapper/ClassButtonWrapper.tsx b/src/pages/class/components/ClassButtonWrapper/ClassButtonWrapper.tsx index 47615b6a7..a3d7f3ce3 100644 --- a/src/pages/class/components/ClassButtonWrapper/ClassButtonWrapper.tsx +++ b/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 }) => { diff --git a/src/pages/class/components/ClassInfoWrapper/ClassInfoWrapper.tsx b/src/pages/class/components/ClassInfoWrapper/ClassInfoWrapper.tsx index 29c9e2c5b..fc9dd8af5 100644 --- a/src/pages/class/components/ClassInfoWrapper/ClassInfoWrapper.tsx +++ b/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'; diff --git a/src/pages/class/components/LimitedChip/LimitedChip.tsx b/src/pages/class/components/LimitedChip/LimitedChip.tsx index 92fd0b441..21775a93a 100644 --- a/src/pages/class/components/LimitedChip/LimitedChip.tsx +++ b/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 }) => { diff --git a/src/pages/class/components/TabWrapper/TabIntro/TabIntro.tsx b/src/pages/class/components/TabWrapper/TabIntro/TabIntro.tsx index 461e30dfb..b18095c62 100644 --- a/src/pages/class/components/TabWrapper/TabIntro/TabIntro.tsx +++ b/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; diff --git a/src/pages/class/components/TabWrapper/TabLevel/TabLevel.tsx b/src/pages/class/components/TabWrapper/TabLevel/TabLevel.tsx index ec0b06836..3a6092ecd 100644 --- a/src/pages/class/components/TabWrapper/TabLevel/TabLevel.tsx +++ b/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')); diff --git a/src/pages/class/components/TabWrapper/TabLocation/TabLocation.tsx b/src/pages/class/components/TabWrapper/TabLocation/TabLocation.tsx index 355e1b2d2..11e649f8e 100644 --- a/src/pages/class/components/TabWrapper/TabLocation/TabLocation.tsx +++ b/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')); diff --git a/src/pages/class/components/TabWrapper/TabPeriod/TabPeriod.tsx b/src/pages/class/components/TabWrapper/TabPeriod/TabPeriod.tsx index d45bfc82c..645308eb3 100644 --- a/src/pages/class/components/TabWrapper/TabPeriod/TabPeriod.tsx +++ b/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 }) =>
- {formatDate(startDateTime)} + {formatDateToKR(startDateTime)} {startTime} - {formattedEndTime} ({durationString}) diff --git a/src/pages/class/components/TabWrapper/TabWrapper.tsx b/src/pages/class/components/TabWrapper/TabWrapper.tsx index c56b18f0e..1c1e90d1e 100644 --- a/src/pages/class/components/TabWrapper/TabWrapper.tsx +++ b/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 { diff --git a/src/pages/dancer/Dancer.tsx b/src/pages/dancer/Dancer.tsx index 43dcfdbe0..2baef38e9 100644 --- a/src/pages/dancer/Dancer.tsx +++ b/src/pages/dancer/Dancer.tsx @@ -4,9 +4,9 @@ import DancerInfo from '@/pages/dancer/components/DancerInfo/DancerInfo'; import TabWrapper from '@/pages/dancer/components/TabWrapper/TabWrapper'; import { genresWrapperStyle, gradientOverlayStyle, textWrapperStyle, topImgStyle } from '@/pages/dancer/dancer.css'; import ErrorPage from '@/pages/error/ErrorPage'; -import Head from '@/shared/components/Head/Head'; -import Tag from '@/shared/components/Tag/Tag'; -import Text from '@/shared/components/Text/Text'; +import Tag from '@/common/components/Tag/Tag'; +import Head from '@/common/components/Head/Head'; +import Text from '@/common/components/Text/Text'; import { genreMapping } from '@/shared/constants/index'; const Dancer = () => { diff --git a/src/pages/dancer/components/DancerInfo/DancerClassItem/DancerClassItem.tsx b/src/pages/dancer/components/DancerInfo/DancerClassItem/DancerClassItem.tsx index 5f1c57027..61544c7e0 100644 --- a/src/pages/dancer/components/DancerInfo/DancerClassItem/DancerClassItem.tsx +++ b/src/pages/dancer/components/DancerInfo/DancerClassItem/DancerClassItem.tsx @@ -6,8 +6,8 @@ import { tagWrapperStyle, } from '@/pages/dancer/components/DancerInfo/DancerClassItem/dancerClassItem.css'; import type { ClassItemPropTypes } from '@/pages/dancer/types/api'; -import Head from '@/shared/components/Head/Head'; -import Tag from '@/shared/components/Tag/Tag'; +import Tag from '@/common/components/Tag/Tag'; +import Head from '@/common/components/Head/Head'; import { genreMapping, levelMapping } from '@/shared/constants/index'; const DancerClassItem = ({ imageUrl, remainingDays, genre, level, name }: ClassItemPropTypes) => { diff --git a/src/pages/dancer/components/DancerInfo/DancerInfo.tsx b/src/pages/dancer/components/DancerInfo/DancerInfo.tsx index 19ad214f0..5751c6c6a 100644 --- a/src/pages/dancer/components/DancerInfo/DancerInfo.tsx +++ b/src/pages/dancer/components/DancerInfo/DancerInfo.tsx @@ -19,9 +19,9 @@ import { expandInstagramUrl, expandYouTubeUrl } from '@/pages/dancer/utils/url'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; import IcInstagram20 from '@/shared/assets/svg/IcInstagram20'; import IcYoutube20 from '@/shared/assets/svg/IcYoutube20'; -import Divider from '@/shared/components/Divider/Divider'; -import Head from '@/shared/components/Head/Head'; -import Text from '@/shared/components/Text/Text'; +import Divider from '@/common/components/Divider/Divider'; +import Head from '@/common/components/Head/Head'; +import Text from '@/common/components/Text/Text'; const DancerInfo = ({ dancerData }: { dancerData: DancerDetailResponseTypes }) => { const { instagram, youtube, detail, nickname, lessons } = dancerData; diff --git a/src/pages/dancer/components/TabWrapper/TabEducation/TabEducation.tsx b/src/pages/dancer/components/TabWrapper/TabEducation/TabEducation.tsx index 7c35d8ea4..143c9841e 100644 --- a/src/pages/dancer/components/TabWrapper/TabEducation/TabEducation.tsx +++ b/src/pages/dancer/components/TabWrapper/TabEducation/TabEducation.tsx @@ -1,7 +1,7 @@ import { textStyle, sectionStyle, emptyMessageStyle } from '@/pages/dancer/components/TabWrapper/TabEducation/TabEducation.css'; import type { DancerDetailResponseTypes } from '@/pages/dancer/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 TabEducation = ({ dancerData }: { dancerData: DancerDetailResponseTypes }) => { const { educations } = dancerData; diff --git a/src/pages/dancer/components/TabWrapper/TabExperience/TabExperience.tsx b/src/pages/dancer/components/TabWrapper/TabExperience/TabExperience.tsx index 5ea85b108..d9f53cc71 100644 --- a/src/pages/dancer/components/TabWrapper/TabExperience/TabExperience.tsx +++ b/src/pages/dancer/components/TabWrapper/TabExperience/TabExperience.tsx @@ -1,7 +1,11 @@ -import { textStyle, sectionStyle, emptyMessageStyle } from '@/pages/dancer/components/TabWrapper/TabExperience/TabExperience.css'; +import { + textStyle, + sectionStyle, + emptyMessageStyle, +} from '@/pages/dancer/components/TabWrapper/TabExperience/TabExperience.css'; import type { DancerDetailResponseTypes } from '@/pages/dancer/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 TabExperience = ({ dancerData }: { dancerData: DancerDetailResponseTypes }) => { const { experiences } = dancerData; diff --git a/src/pages/dancer/components/TabWrapper/TabPrize/TabPrize.tsx b/src/pages/dancer/components/TabWrapper/TabPrize/TabPrize.tsx index f217a08b1..61bfb0454 100644 --- a/src/pages/dancer/components/TabWrapper/TabPrize/TabPrize.tsx +++ b/src/pages/dancer/components/TabWrapper/TabPrize/TabPrize.tsx @@ -1,7 +1,7 @@ import { textStyle, sectionStyle, emptyMessageStyle } from '@/pages/dancer/components/TabWrapper/TabPrize/TabPrize.css'; import type { DancerDetailResponseTypes } from '@/pages/dancer/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 TabPrize = ({ dancerData }: { dancerData: DancerDetailResponseTypes }) => { const { prizes } = dancerData; diff --git a/src/pages/dancer/components/TabWrapper/TabVideo/TabVideo.tsx b/src/pages/dancer/components/TabWrapper/TabVideo/TabVideo.tsx index d6296adcd..2b4ec13b3 100644 --- a/src/pages/dancer/components/TabWrapper/TabVideo/TabVideo.tsx +++ b/src/pages/dancer/components/TabWrapper/TabVideo/TabVideo.tsx @@ -1,6 +1,6 @@ import { iframeStyle, sectionStyle, emptyMessageStyle, videoWrapperStyle } from '@/pages/dancer/components/TabWrapper/TabVideo/tabVideo.css'; import type { DancerDetailResponseTypes } from '@/pages/dancer/types/api'; -import Head from '@/shared/components/Head/Head'; +import Head from '@/common/components/Head/Head'; import { getYoutubeEmbedUrl } from '@/shared/constants/regex'; const TabVideo = ({ dancerData }: { dancerData: DancerDetailResponseTypes }) => { diff --git a/src/pages/dancer/components/TabWrapper/TabWrapper.tsx b/src/pages/dancer/components/TabWrapper/TabWrapper.tsx index bf3a2ae50..bf84ae8df 100644 --- a/src/pages/dancer/components/TabWrapper/TabWrapper.tsx +++ b/src/pages/dancer/components/TabWrapper/TabWrapper.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import { tabPanelStyle, tabListWrapperStyle } from '@/pages/dancer/components/TabWrapper/tabWrapper.css'; import type { DancerDetailResponseTypes } from '@/pages/dancer/types/api'; -import { TabButton, TabList, TabPanel, TabRoot } from '@/shared/components/Tab'; +import { TabButton, TabList, TabPanel, TabRoot } from '@/common/components/Tab'; import { DANCER_TABS } from '@/shared/constants'; interface TabWrapperPropTypes { diff --git a/src/pages/editProfiles/EditProfile.tsx b/src/pages/editProfiles/EditProfile.tsx index f0ccc5a8a..e46a7b9c7 100644 --- a/src/pages/editProfiles/EditProfile.tsx +++ b/src/pages/editProfiles/EditProfile.tsx @@ -1,7 +1,7 @@ import ProfileForm from '@/pages/editProfiles/components/ProfileForm/ProfileForm'; import { containerStyle } from '@/pages/editProfiles/editProfile.css'; import { useGetMyPage } from '@/pages/mypage/apis/queries'; -import Head from '@/shared/components/Head/Head'; +import Head from '@/common/components/Head/Head'; const EditProfile = () => { const { data } = useGetMyPage(); diff --git a/src/pages/editProfiles/api/queries.ts b/src/pages/editProfiles/api/queries.ts index 4a75d7a41..5eb56c5b5 100644 --- a/src/pages/editProfiles/api/queries.ts +++ b/src/pages/editProfiles/api/queries.ts @@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'; import { patchMyProfile } from '@/pages/editProfiles/api/axios'; import type { UpdateProfileRequestTypes } from '@/pages/editProfiles/types/api'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; -import { notify } from '@/shared/components/Toast/Toast'; +import { notify } from '@/common/components/Toast/Toast'; import { lessonKeys, memberKeys } from '@/shared/constants/queryKey'; export const usePatchMyProfile = () => { diff --git a/src/pages/editProfiles/components/BottomSheet/BottomSheet.tsx b/src/pages/editProfiles/components/BottomSheet/BottomSheet.tsx index 153655490..ea460a700 100644 --- a/src/pages/editProfiles/components/BottomSheet/BottomSheet.tsx +++ b/src/pages/editProfiles/components/BottomSheet/BottomSheet.tsx @@ -1,8 +1,8 @@ import { AnimatePresence, motion } from 'motion/react'; import * as styles from '@/pages/editProfiles/components/BottomSheet/bottomSheet.css'; import IcCloseBlack24 from '@/shared/assets/svg/IcCloseBlack24'; -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'; interface BottomSheetPropTypes { onClose: () => void; diff --git a/src/pages/editProfiles/components/ProfileForm/ProfileForm.tsx b/src/pages/editProfiles/components/ProfileForm/ProfileForm.tsx index 68d96d56b..d2fa96ec0 100644 --- a/src/pages/editProfiles/components/ProfileForm/ProfileForm.tsx +++ b/src/pages/editProfiles/components/ProfileForm/ProfileForm.tsx @@ -18,10 +18,10 @@ import { useVerification } from '@/pages/editProfiles/hooks/useVerification'; import { profileSchema } from '@/pages/editProfiles/schema/profileSchema'; import type { ProfileFormValues } from '@/pages/editProfiles/schema/profileSchema'; import type { UpdateProfileRequestTypes } from '@/pages/editProfiles/types/api'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; -import Input from '@/shared/components/Input/Input'; -import Text from '@/shared/components/Text/Text'; -import { notify } from '@/shared/components/Toast/Toast'; +import Input from '@/common/components/Input/Input'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; +import Text from '@/common/components/Text/Text'; +import { notify } from '@/common/components/Toast/Toast'; import { MAX_NAME_LENGTH, MAX_PHONENUMBER_LENGTH, diff --git a/src/pages/editProfiles/components/ProfileImageUpload/ProfileImageUpload.tsx b/src/pages/editProfiles/components/ProfileImageUpload/ProfileImageUpload.tsx index 70efdb465..8f555c36d 100644 --- a/src/pages/editProfiles/components/ProfileImageUpload/ProfileImageUpload.tsx +++ b/src/pages/editProfiles/components/ProfileImageUpload/ProfileImageUpload.tsx @@ -5,7 +5,7 @@ import BottomSheet from '@/pages/editProfiles/components/BottomSheet/BottomSheet import * as styles from '@/pages/editProfiles/components/ProfileImageUpload/profileImageUpload.css'; import type { ProfileFormValues } from '@/pages/editProfiles/schema/profileSchema'; import IcProfileBasic from '@/shared/assets/svg/IcProfileBasic'; -import Text from '@/shared/components/Text/Text'; +import Text from '@/common/components/Text/Text'; import useImageUploader from '@/shared/hooks/useImageUploader'; interface ProfileImageUploadPropTypes { diff --git a/src/pages/editProfiles/hooks/useVerification.ts b/src/pages/editProfiles/hooks/useVerification.ts index b71719fce..e4e871ee6 100644 --- a/src/pages/editProfiles/hooks/useVerification.ts +++ b/src/pages/editProfiles/hooks/useVerification.ts @@ -5,7 +5,7 @@ import { usePostPhoneRequest, usePostPhoneVerify } from '@/pages/onboarding/apis import type { tokenTypes } from '@/pages/onboarding/types/api'; import type { phoneVerifyTypes } from '@/pages/onboarding/types/onboardInfoTypes'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; -import { notify } from '@/shared/components/Toast/Toast'; +import { notify } from '@/common/components/Toast/Toast'; import { PHONE_AUTH_MESSAGES, REQUEST_DELAY, TIMER_DURATION } from '@/shared/constants/userInfo'; import { useVerificationTimer } from '@/shared/hooks/useVerificationTimer'; import { getAccessToken } from '@/shared/utils/handleToken'; diff --git a/src/pages/error/ErrorPage.tsx b/src/pages/error/ErrorPage.tsx index ff6e44d0f..6ff223ba0 100644 --- a/src/pages/error/ErrorPage.tsx +++ b/src/pages/error/ErrorPage.tsx @@ -8,9 +8,9 @@ import { errorIconStyle, } from '@/pages/error/error.css'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; -import Head from '@/shared/components/Head/Head'; -import Text from '@/shared/components/Text/Text'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; +import Head from '@/common/components/Head/Head'; +import Text from '@/common/components/Text/Text'; const IcError = lazy(() => import('@/shared/assets/svg/IcError')); diff --git a/src/pages/home/components/DancerItem/DancerItem.tsx b/src/pages/home/components/DancerItem/DancerItem.tsx index 326b52464..25ad40ffe 100644 --- a/src/pages/home/components/DancerItem/DancerItem.tsx +++ b/src/pages/home/components/DancerItem/DancerItem.tsx @@ -2,8 +2,8 @@ import { useNavigate } from 'react-router-dom'; import { dancerImageStyle, dancerItemStyle, dancerInfoStyle } from '@/pages/home/components/DancerItem/dancerItem.css'; import type { DancerTypes } from '@/pages/home/types/dancerTypes'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; -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'; interface DancerItemPropTypes extends Omit { genre: string; diff --git a/src/pages/home/components/Footer/Footer.tsx b/src/pages/home/components/Footer/Footer.tsx index b129eb6e9..e915427b7 100644 --- a/src/pages/home/components/Footer/Footer.tsx +++ b/src/pages/home/components/Footer/Footer.tsx @@ -6,8 +6,8 @@ import { infoRowStyle, } from '@/pages/home/components/Footer/footer.css'; import IcHeaderLogoSmallBlack from '@/shared/assets/svg/IcHeaderLogoSmallBlack'; -import Divider from '@/shared/components/Divider/Divider'; -import Text from '@/shared/components/Text/Text'; +import Divider from '@/common/components/Divider/Divider'; +import Text from '@/common/components/Text/Text'; const Footer = () => { return ( diff --git a/src/pages/home/components/GenreItem/GenreItem.tsx b/src/pages/home/components/GenreItem/GenreItem.tsx index 7d281e23b..99c377967 100644 --- a/src/pages/home/components/GenreItem/GenreItem.tsx +++ b/src/pages/home/components/GenreItem/GenreItem.tsx @@ -1,5 +1,5 @@ import { containerStyle, genreStyle, medalStyle } from '@/pages/home/components/GenreItem/genreItem.css'; -import Text from '@/shared/components/Text/Text'; +import Text from '@/common/components/Text/Text'; interface GenreItemPropTypes { medalIcon: JSX.Element; diff --git a/src/pages/home/components/LatestLessons/LatestLessons.tsx b/src/pages/home/components/LatestLessons/LatestLessons.tsx index 7fc5ab976..ff3412bab 100644 --- a/src/pages/home/components/LatestLessons/LatestLessons.tsx +++ b/src/pages/home/components/LatestLessons/LatestLessons.tsx @@ -5,7 +5,7 @@ import { titleStyle, } from '@/pages/home/components/LatestLessons/latestLessons.css'; import LessonItem from '@/pages/home/components/LessonItem/LessonItem'; -import Head from '@/shared/components/Head/Head'; +import Head from '@/common/components/Head/Head'; const LatestLessons = () => { const { data: latestLessonDatas } = useGetLatestLessons(); diff --git a/src/pages/home/components/LessonItem/LessonItem.tsx b/src/pages/home/components/LessonItem/LessonItem.tsx index 8b3b8c10a..9b555781f 100644 --- a/src/pages/home/components/LessonItem/LessonItem.tsx +++ b/src/pages/home/components/LessonItem/LessonItem.tsx @@ -22,11 +22,11 @@ import { import { MAX_REMAINING_DAYS, MIN_REMAINING_DAYS } from '@/pages/home/constants/index'; import type { LessonTypes } from '@/pages/home/types/classTypes'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; -import Head from '@/shared/components/Head/Head'; -import Tag from '@/shared/components/Tag/Tag'; -import Text from '@/shared/components/Text/Text'; +import Head from '@/common/components/Head/Head'; +import Tag from '@/common/components/Tag/Tag'; +import Text from '@/common/components/Text/Text'; import { genreMapping, levelMapping } from '@/shared/constants'; -import { calculateRemainingDate } from '@/shared/utils/dateCalculate'; +import { calculateRemainingDate } from '@/shared/utils/date'; const LessonItem = ({ id, diff --git a/src/pages/home/components/PopularGenre/PopularGenre.tsx b/src/pages/home/components/PopularGenre/PopularGenre.tsx index ad4be8456..c185192d6 100644 --- a/src/pages/home/components/PopularGenre/PopularGenre.tsx +++ b/src/pages/home/components/PopularGenre/PopularGenre.tsx @@ -5,7 +5,7 @@ import { genreWrapperStyle } from '@/pages/home/components/LessonItem/lessonItem import { genreListStyle } from '@/pages/home/components/PopularGenre/popularGenre.css'; import { GENRE_ICONS } from '@/pages/home/constants'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; -import Head from '@/shared/components/Head/Head'; +import Head from '@/common/components/Head/Head'; import { genreMapping } from '@/shared/constants'; const PopularGenre = () => { diff --git a/src/pages/home/components/SliderItem/SliderItem.tsx b/src/pages/home/components/SliderItem/SliderItem.tsx index a5e548719..76de8e707 100644 --- a/src/pages/home/components/SliderItem/SliderItem.tsx +++ b/src/pages/home/components/SliderItem/SliderItem.tsx @@ -1,5 +1,5 @@ import { containerStyle, descriptionStyle, imageStyle } from '@/pages/home/components/SliderItem/sliderItem.css'; -import Head from '@/shared/components/Head/Head'; +import Head from '@/common/components/Head/Head'; interface SliderItemPropTypes { imageUrl: string; diff --git a/src/pages/home/components/UpcomingLessons/UpcomingLessons.tsx b/src/pages/home/components/UpcomingLessons/UpcomingLessons.tsx index 30b268607..b5baad906 100644 --- a/src/pages/home/components/UpcomingLessons/UpcomingLessons.tsx +++ b/src/pages/home/components/UpcomingLessons/UpcomingLessons.tsx @@ -6,7 +6,7 @@ import { deadlineLessonWrapperStyle, titleStyle, } from '@/pages/home/components/UpcomingLessons/upcomingLessons.css'; -import Head from '@/shared/components/Head/Head'; +import Head from '@/common/components/Head/Head'; const UpcomingLessons = () => { const { data: upcomingLessonList } = useGetUpcomingLessons(); diff --git a/src/pages/instructor/classDetail/ClassDetail.tsx b/src/pages/instructor/classDetail/ClassDetail.tsx index 370cb1997..135a02e54 100644 --- a/src/pages/instructor/classDetail/ClassDetail.tsx +++ b/src/pages/instructor/classDetail/ClassDetail.tsx @@ -12,7 +12,7 @@ import StudentTab from '@/pages/instructor/classDetail/components/StudentTab/Stu import ClassInfo from '@/pages/mypage/components/mypageReservationDetail/components/ClassInfo/ClassInfo'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; import ClassCard from '@/shared/components/ClassCard'; -import Head from '@/shared/components/Head/Head'; +import Head from '@/common/components/Head/Head'; import { USER_ROLE } from '@/shared/constants/userRole'; export type TabStatus = 'APPROVE' | 'CANCEL'; diff --git a/src/pages/instructor/classDetail/components/InfoEditButton/InfoEditButton.tsx b/src/pages/instructor/classDetail/components/InfoEditButton/InfoEditButton.tsx index 9465a8564..c10f826cd 100644 --- a/src/pages/instructor/classDetail/components/InfoEditButton/InfoEditButton.tsx +++ b/src/pages/instructor/classDetail/components/InfoEditButton/InfoEditButton.tsx @@ -1,6 +1,6 @@ import { useNavigate } from 'react-router-dom'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; interface InfoEditButtonProps { id: string; diff --git a/src/pages/instructor/classDetail/components/StudentCard/StudentCard.tsx b/src/pages/instructor/classDetail/components/StudentCard/StudentCard.tsx index f0370b8c0..462c35bea 100644 --- a/src/pages/instructor/classDetail/components/StudentCard/StudentCard.tsx +++ b/src/pages/instructor/classDetail/components/StudentCard/StudentCard.tsx @@ -6,16 +6,16 @@ import type { Student } from '@/pages/instructor/classDetail/types/api'; import { formatPhoneNumber } from '@/pages/instructor/utils/format'; import { STATUS_KOREAN_MAP } from '@/pages/mypage/components/mypageReservation/constants/statusMap'; import type { ReservationStatus } from '@/pages/mypage/components/mypageReservation/types/reservationStatus'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; +import Head from '@/common/components/Head/Head'; import Modal from '@/common/components/Modal/Modal'; +import Text from '@/common/components/Text/Text'; +import { notify } from '@/common/components/Toast/Toast'; import { useModalStore } from '@/common/stores/modal'; import ApplyTag from '@/shared/components/ApplyTag/ApplyTag'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; -import Head from '@/shared/components/Head/Head'; -import Text from '@/shared/components/Text/Text'; -import { notify } from '@/shared/components/Toast/Toast'; import { teacherKeys } from '@/shared/constants/queryKey'; import { WITHDRAW_USER_NAME } from '@/shared/constants/withdrawUser'; -import { formatDateTime } from '@/shared/utils/timeUtils'; +import { formatDateToKRWithTime } from '@/shared/utils/date'; const STATUS_BUTTON_MAP: Record< Exclude, @@ -129,7 +129,7 @@ const StudentCard = ({ studentData, index, lessonId, selectedTab }: StudentCardP
- {formatDateTime(studentData.reservationDateTime)} + {formatDateToKRWithTime(studentData.reservationDateTime)} ; diff --git a/src/pages/instructor/classRegister/components/ClassGenre/ClassGenre.tsx b/src/pages/instructor/classRegister/components/ClassGenre/ClassGenre.tsx index 2af1301f1..3621a4c41 100644 --- a/src/pages/instructor/classRegister/components/ClassGenre/ClassGenre.tsx +++ b/src/pages/instructor/classRegister/components/ClassGenre/ClassGenre.tsx @@ -9,7 +9,7 @@ import { import Description from '@/pages/instructor/classRegister/components/Description'; import { CLASS_GENRE_SUBTITLE } from '@/pages/instructor/classRegister/constants/registerSectionText'; import GenreButton from '@/pages/search/components/TabContainer/TagSection/BottomSheet/GenreButton/GenreButton'; -import Text from '@/shared/components/Text/Text'; +import Text from '@/common/components/Text/Text'; import { GENRE_CATEGORY } from '@/shared/constants'; interface ClassGenrePropTypes { diff --git a/src/pages/instructor/classRegister/components/ClassLevel/ClassLevel.tsx b/src/pages/instructor/classRegister/components/ClassLevel/ClassLevel.tsx index 4d01a681a..63929d658 100644 --- a/src/pages/instructor/classRegister/components/ClassLevel/ClassLevel.tsx +++ b/src/pages/instructor/classRegister/components/ClassLevel/ClassLevel.tsx @@ -3,7 +3,7 @@ import { useFormContext } from 'react-hook-form'; import Description from '@/pages/instructor/classRegister/components/Description'; import { CLASS_LEVEL_SUBTITLE } from '@/pages/instructor/classRegister/constants/registerSectionText'; import LevelButton from '@/shared/components/LevelButton/LevelButton'; -import Text from '@/shared/components/Text/Text'; +import Text from '@/common/components/Text/Text'; import { LEVEL } from '@/shared/constants'; interface ClassLevelPropTypes { diff --git a/src/pages/instructor/classRegister/components/ClassName/ClassName.tsx b/src/pages/instructor/classRegister/components/ClassName/ClassName.tsx index a0e68b708..5615e2a85 100644 --- a/src/pages/instructor/classRegister/components/ClassName/ClassName.tsx +++ b/src/pages/instructor/classRegister/components/ClassName/ClassName.tsx @@ -5,7 +5,7 @@ import Description from '@/pages/instructor/classRegister/components/Description import { MAX_CLASS_NAME_LENGTH } from '@/pages/instructor/classRegister/constants/formLimit'; import { CLASS_NAME_SUBTITLE } from '@/pages/instructor/classRegister/constants/registerSectionText'; import type { ClassRegisterFormTypes } from '@/pages/instructor/classRegister/types/classRegisterForm'; -import Input from '@/shared/components/Input/Input'; +import Input from '@/common/components/Input/Input'; interface ClassNamePropTypes { className: string; diff --git a/src/pages/instructor/classRegister/components/ClassPersonnel/ClassPersonnel.tsx b/src/pages/instructor/classRegister/components/ClassPersonnel/ClassPersonnel.tsx index dda9c0d8a..5f1ddb15b 100644 --- a/src/pages/instructor/classRegister/components/ClassPersonnel/ClassPersonnel.tsx +++ b/src/pages/instructor/classRegister/components/ClassPersonnel/ClassPersonnel.tsx @@ -3,8 +3,8 @@ import { useFormContext } from 'react-hook-form'; import Description from '@/pages/instructor/classRegister/components/Description'; import { CLASS_PERSONNEL_SUBTITLE } from '@/pages/instructor/classRegister/constants/registerSectionText'; import type { ClassRegisterFormTypes } from '@/pages/instructor/classRegister/types/classRegisterForm'; -import Input from '@/shared/components/Input/Input'; -import Text from '@/shared/components/Text/Text'; +import Input from '@/common/components/Input/Input'; +import Text from '@/common/components/Text/Text'; import { ONLY_NUMBER } from '@/shared/constants/regex'; interface ClassPersonnelPropTypes { diff --git a/src/pages/instructor/classRegister/components/ClassPlace/ClassPlace.tsx b/src/pages/instructor/classRegister/components/ClassPlace/ClassPlace.tsx index 2f52accd5..ae424b32a 100644 --- a/src/pages/instructor/classRegister/components/ClassPlace/ClassPlace.tsx +++ b/src/pages/instructor/classRegister/components/ClassPlace/ClassPlace.tsx @@ -25,11 +25,11 @@ import { } from '@/pages/instructor/classRegister/constants/registerSectionText'; import type { ClassRegisterFormTypes } from '@/pages/instructor/classRegister/types/classRegisterForm'; import type { LocationsData, LocationTypes } from '@/pages/instructor/classRegister/types/index'; +import Input from '@/common/components/Input/Input'; +import Text from '@/common/components/Text/Text'; import BtnCheck from '@/shared/assets/svg/BtnCheck'; import IcSearchGray from '@/shared/assets/svg/IcSearchGray'; import IcXCircleGray0424 from '@/shared/assets/svg/IcXCircleGray0424'; -import Input from '@/shared/components/Input/Input'; -import Text from '@/shared/components/Text/Text'; interface ClassPlacePropTypes { register: UseFormRegister; diff --git a/src/pages/instructor/classRegister/components/ClassRecommend/ClassRecommend.tsx b/src/pages/instructor/classRegister/components/ClassRecommend/ClassRecommend.tsx index 9b05b6c91..2e1a962b6 100644 --- a/src/pages/instructor/classRegister/components/ClassRecommend/ClassRecommend.tsx +++ b/src/pages/instructor/classRegister/components/ClassRecommend/ClassRecommend.tsx @@ -15,7 +15,7 @@ import { CLASS_RECOMMEND_PLACEHOLDER, CLASS_RECOMMEND_SUBTITLE, } from '@/pages/instructor/classRegister/constants/registerSectionText'; -import Text from '@/shared/components/Text/Text'; +import Text from '@/common/components/Text/Text'; import type { ClassRegisterFormTypes } from '../../types/classRegisterForm'; interface ClassRecommendPropTypes { diff --git a/src/pages/instructor/classRegister/components/ClassRepresentImage/ClassRepresentImage.tsx b/src/pages/instructor/classRegister/components/ClassRepresentImage/ClassRepresentImage.tsx index fe32d64c9..806e1173a 100644 --- a/src/pages/instructor/classRegister/components/ClassRepresentImage/ClassRepresentImage.tsx +++ b/src/pages/instructor/classRegister/components/ClassRepresentImage/ClassRepresentImage.tsx @@ -13,7 +13,7 @@ import Description from '@/pages/instructor/classRegister/components/Description import { CLASS_REPRESENT_IMAGE_SUBTITLE } from '@/pages/instructor/classRegister/constants/registerSectionText'; import IcPlusGray0524 from '@/shared/assets/svg/IcPlusGray0524'; import IcXCircleMain0324 from '@/shared/assets/svg/IcXCircleMain0324'; -import Text from '@/shared/components/Text/Text'; +import Text from '@/common/components/Text/Text'; interface ClassRepresentImagePropTypes { handleUploaderClick: () => void; diff --git a/src/pages/instructor/classRegister/components/ClassSchedule/ClassRegisterBottomSheet/ClassRegisterBottomSheet.tsx b/src/pages/instructor/classRegister/components/ClassSchedule/ClassRegisterBottomSheet/ClassRegisterBottomSheet.tsx index 45b4afd03..6072bcc3e 100644 --- a/src/pages/instructor/classRegister/components/ClassSchedule/ClassRegisterBottomSheet/ClassRegisterBottomSheet.tsx +++ b/src/pages/instructor/classRegister/components/ClassSchedule/ClassRegisterBottomSheet/ClassRegisterBottomSheet.tsx @@ -2,7 +2,7 @@ import type { MouseEvent } from 'react'; import * as styles from '@/pages/instructor/classRegister/components/ClassSchedule/ClassRegisterBottomSheet/classRegisterBottomSheet.css'; import ClassRegisterFunnel from '@/pages/instructor/classRegister/components/ClassSchedule/ClassRegisterFunnel/ClassRegisterFunnel'; import { useLocalFunnel } from '@/pages/instructor/classRegister/hooks/useLocalFunnel'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; import { CLASS_REGISTER_TOTAL_STEP } from '@/shared/constants'; interface ClassRegisterBottomSheetPropTypes { diff --git a/src/pages/instructor/classRegister/components/ClassSchedule/ClassSchedule.tsx b/src/pages/instructor/classRegister/components/ClassSchedule/ClassSchedule.tsx index 90ed6c0cb..7ce96c305 100644 --- a/src/pages/instructor/classRegister/components/ClassSchedule/ClassSchedule.tsx +++ b/src/pages/instructor/classRegister/components/ClassSchedule/ClassSchedule.tsx @@ -13,11 +13,10 @@ import { import Description from '@/pages/instructor/classRegister/components/Description'; import { CLASS_SCHEDULE_SUBTITLE } from '@/pages/instructor/classRegister/constants/registerSectionText'; import type { TimesTypes } from '@/pages/instructor/classRegister/types/classSchedule'; +import Text from '@/common/components/Text/Text'; import IcPlusGray0524 from '@/shared/assets/svg/IcPlusGray0524'; import IcXCircleGray0424 from '@/shared/assets/svg/IcXCircleGray0424'; -import Text from '@/shared/components/Text/Text'; -import { calculatePeriod, formatDate } from '@/shared/utils/dateCalculate'; -import { formatDuration } from '@/shared/utils/timeUtils'; +import { calculatePeriod, formatDateToKR, formatDuration } from '@/shared/utils/date'; interface ClassSchedulePropTypes { openBottomSheet: () => void; @@ -42,7 +41,7 @@ const ClassSchedule = ({ openBottomSheet, times, handleRemoveTime }: ClassSchedu
{idx + 1}회차
- {formatDate(time.date)} + {formatDateToKR(time.date)} {`${calculatePeriod(time.startTime, time.endTime).startTime} ~ ${ calculatePeriod(time.startTime, time.endTime).formattedEndTime diff --git a/src/pages/instructor/classRegister/components/ClassSchedule/DateStep/DateStep.tsx b/src/pages/instructor/classRegister/components/ClassSchedule/DateStep/DateStep.tsx index a78df1ecf..9087c2c0f 100644 --- a/src/pages/instructor/classRegister/components/ClassSchedule/DateStep/DateStep.tsx +++ b/src/pages/instructor/classRegister/components/ClassSchedule/DateStep/DateStep.tsx @@ -1,6 +1,6 @@ import { useState, useMemo } from 'react'; import CalendarCustom from '@/pages/search/components/Calendar/Calendar'; -import { getDateWithoutTime } from '@/shared/utils/timeUtils'; +import { getDateWithoutTime } from '@/shared/utils/date'; interface DateStepProps { startDate: string; diff --git a/src/pages/instructor/classRegister/components/ClassSchedule/TimeStep/TimeControl/TimeControl.tsx b/src/pages/instructor/classRegister/components/ClassSchedule/TimeStep/TimeControl/TimeControl.tsx index ffbafe2da..1ea4633bd 100644 --- a/src/pages/instructor/classRegister/components/ClassSchedule/TimeStep/TimeControl/TimeControl.tsx +++ b/src/pages/instructor/classRegister/components/ClassSchedule/TimeStep/TimeControl/TimeControl.tsx @@ -1,8 +1,11 @@ -import * as styles from '@/pages/instructor/classRegister/components/ClassSchedule/TimeStep/TimeControl/timeControl.css'; +import { + timeControlWrapperStyle, + timeValueWrapperStyle, + buttonStyle, +} from '@/pages/instructor/classRegister/components/ClassSchedule/TimeStep/TimeControl/timeControl.css'; import IcArrowDownGray1032 from '@/shared/assets/svg/IcArrowDownGray1032'; import IcArrowUpGray1032 from '@/shared/assets/svg/IcArrowUpGray1032'; -import Flex from '@/shared/components/Flex/Flex'; -import Head from '@/shared/components/Head/Head'; +import Head from '@/common/components/Head/Head'; interface TimeControlProps { label: string; @@ -13,27 +16,27 @@ interface TimeControlProps { disableDecrease?: boolean; } const TimeControl = ({ label, value, onIncrease, onDecrease, disableIncrease, disableDecrease }: TimeControlProps) => ( - +
-
+
{label === 'minute' ? (value === 0 ? '00' : '30') : value}
- +
); export default TimeControl; diff --git a/src/pages/instructor/classRegister/components/ClassSchedule/TimeStep/TimeControl/timeControl.css.ts b/src/pages/instructor/classRegister/components/ClassSchedule/TimeStep/TimeControl/timeControl.css.ts index f4185c51d..bcb8ace52 100644 --- a/src/pages/instructor/classRegister/components/ClassSchedule/TimeStep/TimeControl/timeControl.css.ts +++ b/src/pages/instructor/classRegister/components/ClassSchedule/TimeStep/TimeControl/timeControl.css.ts @@ -1,18 +1,23 @@ import { style } from '@vanilla-extract/css'; import { vars } from '@/shared/styles/theme.css'; +export const timeControlWrapperStyle = style({ + display: 'flex', + flexDirection: 'column', + width: '100%', + alignItems: 'center', + gap: '0.4rem', +}); + export const buttonStyle = style({ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', - width: '100%', height: '3.2rem', padding: '0rem 1rem', - borderRadius: '4px', - backgroundColor: vars.colors.gray02, }); @@ -20,10 +25,9 @@ export const timeValueWrapperStyle = style({ display: 'flex', justifyContent: 'center', alignItems: 'center', - width: '100%', padding: '1.2rem 1rem', - borderRadius: '4px', border: `1px solid ${vars.colors.gray02}`, }); + diff --git a/src/pages/instructor/classRegister/components/ClassSchedule/TimeStep/TimeStep.tsx b/src/pages/instructor/classRegister/components/ClassSchedule/TimeStep/TimeStep.tsx index b815f17cb..491dbc3ac 100644 --- a/src/pages/instructor/classRegister/components/ClassSchedule/TimeStep/TimeStep.tsx +++ b/src/pages/instructor/classRegister/components/ClassSchedule/TimeStep/TimeStep.tsx @@ -1,9 +1,14 @@ import { useMemo } from 'react'; import TimeControl from '@/pages/instructor/classRegister/components/ClassSchedule/TimeStep/TimeControl/TimeControl'; -import Flex from '@/shared/components/Flex/Flex'; -import Head from '@/shared/components/Head/Head'; -import Tag from '@/shared/components/Tag/Tag'; -import Text from '@/shared/components/Text/Text'; +import { + timeStepControlsRowStyle, + timeStepMessageWrapperStyle, + timeStepTagListStyle, + timeStepWrapperStyle, +} from '@/pages/instructor/classRegister/components/ClassSchedule/TimeStep/timeStep.css'; +import Head from '@/common/components/Head/Head'; +import Tag from '@/common/components/Tag/Tag'; +import Text from '@/common/components/Text/Text'; import { TIME_RANGE } from '@/shared/constants'; import { decreaseHour, @@ -17,7 +22,7 @@ import { formatTimeDisplay, getDateWithoutTime, HOURS_IN_HALF_DAY, -} from '@/shared/utils/timeUtils'; +} from '@/shared/utils/date'; interface TimeStepPropTypes { hour: number; @@ -313,21 +318,21 @@ const TimeStep = ({ }; return ( - +
클래스 시작 시간 {/* 메시지가 있을 경우에만 표시 */} {minTimeConstraints && minTimeDisplay && getConstraintMessage() && ( - +
{getConstraintMessage()} - +
)} - +
- +
클래스 진행 시간 - +
{TIME_RANGE.map((time) => { const timeConflict = hasTimeConflict(hour, minute, ampm, time.id); return ( @@ -370,8 +375,8 @@ const TimeStep = ({ ); })} - - +
+
); }; diff --git a/src/pages/instructor/classRegister/components/ClassSchedule/TimeStep/timeStep.css.ts b/src/pages/instructor/classRegister/components/ClassSchedule/TimeStep/timeStep.css.ts index e69de29bb..3e6ce2039 100644 --- a/src/pages/instructor/classRegister/components/ClassSchedule/TimeStep/timeStep.css.ts +++ b/src/pages/instructor/classRegister/components/ClassSchedule/TimeStep/timeStep.css.ts @@ -0,0 +1,27 @@ +import { style } from '@vanilla-extract/css'; + +export const timeStepWrapperStyle = style({ + display: 'flex', + flexDirection: 'column', +}); + +export const timeStepMessageWrapperStyle = style({ + paddingTop: '0.8rem', +}); + +export const timeStepControlsRowStyle = style({ + display: 'flex', + justifyContent: 'center', + gap: '1rem', + paddingTop: '1.6rem', + paddingBottom: '2.4rem', + width: '100%', +}); + +export const timeStepTagListStyle = style({ + display: 'flex', + flexWrap: 'wrap', + gap: '0.8rem', + paddingTop: '1.6rem', +}); + diff --git a/src/pages/instructor/classRegister/components/Description/index.css.ts b/src/pages/instructor/classRegister/components/Description/index.css.ts index 20f552d9c..b762946c3 100644 --- a/src/pages/instructor/classRegister/components/Description/index.css.ts +++ b/src/pages/instructor/classRegister/components/Description/index.css.ts @@ -1,5 +1,16 @@ import { style } from '@vanilla-extract/css'; +export const descriptionWrapperStyle = style({ + display: 'flex', + flexDirection: 'column', + gap: '0.4rem', +}); + +export const descriptionHeaderRowStyle = style({ + display: 'flex', + gap: '0.8rem', +}); + export const essentialTextStyle = style({ alignSelf: 'flex-end', }); diff --git a/src/pages/instructor/classRegister/components/Description/index.tsx b/src/pages/instructor/classRegister/components/Description/index.tsx index 625332f02..36e1e1250 100644 --- a/src/pages/instructor/classRegister/components/Description/index.tsx +++ b/src/pages/instructor/classRegister/components/Description/index.tsx @@ -1,7 +1,10 @@ -import { essentialTextStyle } from '@/pages/instructor/classRegister/components/Description/index.css'; -import Flex from '@/shared/components/Flex/Flex'; -import Head from '@/shared/components/Head/Head'; -import Text from '@/shared/components/Text/Text'; +import { + descriptionHeaderRowStyle, + descriptionWrapperStyle, + essentialTextStyle, +} from '@/pages/instructor/classRegister/components/Description/index.css'; +import Head from '@/common/components/Head/Head'; +import Text from '@/common/components/Text/Text'; interface DescriptionProps { title: string; @@ -10,19 +13,19 @@ interface DescriptionProps { const Description = ({ title, subTitle }: DescriptionProps) => { return ( - - +
+
{title} *필수 - +
{subTitle} - +
); }; diff --git a/src/pages/instructor/classRegister/hooks/useClassRegisterForm.ts b/src/pages/instructor/classRegister/hooks/useClassRegisterForm.ts index 3168c1567..0100e8f1c 100644 --- a/src/pages/instructor/classRegister/hooks/useClassRegisterForm.ts +++ b/src/pages/instructor/classRegister/hooks/useClassRegisterForm.ts @@ -1,8 +1,7 @@ import type { ChangeEvent } from 'react'; import { useState } from 'react'; import type { LocationTypes, RepresentImageUrlsTypes } from '@/pages/instructor/classRegister/types'; -// import { ONLY_NUMERIC } from '@/shared/constants/regex'; -import { formatToISOString } from '@/shared/utils/timeUtils'; +import { formatToISOString } from '@/shared/utils/date'; export const useClassRegisterForm = () => { const [imageUrls, setImageUrls] = useState({ imageUrls: '' }); diff --git a/src/pages/instructor/classRegisterCompletion/ClassRegisterCompletion.tsx b/src/pages/instructor/classRegisterCompletion/ClassRegisterCompletion.tsx index 2c275861f..e483983bb 100644 --- a/src/pages/instructor/classRegisterCompletion/ClassRegisterCompletion.tsx +++ b/src/pages/instructor/classRegisterCompletion/ClassRegisterCompletion.tsx @@ -8,9 +8,9 @@ import { } from '@/pages/instructor/classRegisterCompletion/classRegisterCompletion.css'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; import { ClearGif } from '@/shared/assets/gif'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; -import Head from '@/shared/components/Head/Head'; -import Text from '@/shared/components/Text/Text'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; +import Head from '@/common/components/Head/Head'; +import Text from '@/common/components/Text/Text'; const ClassRegisterCompletion = () => { const navigate = useNavigate(); diff --git a/src/pages/instructor/lessonList/LessonList.tsx b/src/pages/instructor/lessonList/LessonList.tsx index 155a41ced..4f5cbc103 100644 --- a/src/pages/instructor/lessonList/LessonList.tsx +++ b/src/pages/instructor/lessonList/LessonList.tsx @@ -3,9 +3,9 @@ import { useGetMyLessons } from '@/pages/instructor/lessonList/apis/queries'; import { emptyTextStyle } from '@/pages/instructor/lessonList/lessonList.css'; import type { LessonStatus } from '@/pages/instructor/lessonList/types/lessonStatus'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; +import Text from '@/common/components/Text/Text'; import ClassCard from '@/shared/components/ClassCard'; -import Text from '@/shared/components/Text/Text'; import { USER_ROLE } from '@/shared/constants/userRole'; import type { Lesson } from '@/shared/types/lessonTypes'; diff --git a/src/pages/instructor/lessonManage/LessonManage.tsx b/src/pages/instructor/lessonManage/LessonManage.tsx index 891767fd9..d6cd8d56c 100644 --- a/src/pages/instructor/lessonManage/LessonManage.tsx +++ b/src/pages/instructor/lessonManage/LessonManage.tsx @@ -4,7 +4,7 @@ import { useGetLessonStatus } from '@/pages/instructor/lessonList/apis/queries'; import type { LessonStatus } from '@/pages/instructor/lessonList/types/lessonStatus'; import { layoutStyle, containerStyle, titleStyle, lessonListSectionStyle } from '@/pages/instructor/lessonManage/lessonManage.css'; import Dropdown from '@/common/components/Dropdown/Dropdown'; -import Head from '@/shared/components/Head/Head'; +import Head from '@/common/components/Head/Head'; const options = ['ALL', 'APPLYING', 'FINISHED'] as const; diff --git a/src/pages/instructorRegister/InstructorRegister.tsx b/src/pages/instructorRegister/InstructorRegister.tsx index 148f76f0b..b49e1ea35 100644 --- a/src/pages/instructorRegister/InstructorRegister.tsx +++ b/src/pages/instructorRegister/InstructorRegister.tsx @@ -8,10 +8,10 @@ import PersonalSNSSection from '@/pages/instructorRegister/components/PersonalSN import VideoLinkSection from '@/pages/instructorRegister/components/VideoLinkSection/VideoLinkSection'; import useInstructorRegisterForm from '@/pages/instructorRegister/hooks/useInstructorRegisterForm'; import * as styles from '@/pages/instructorRegister/instructorRegister.css'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; +import Divider from '@/common/components/Divider/Divider'; +import Head from '@/common/components/Head/Head'; import { useGetRole } from '@/shared/apis/queries'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; -import Divider from '@/shared/components/Divider/Divider'; -import Head from '@/shared/components/Head/Head'; import useBlockBackWithUnsavedChanges from '@/shared/hooks/useBlockBackWithUnsavedChanges'; import useImageUploader from '@/shared/hooks/useImageUploader'; diff --git a/src/pages/instructorRegister/components/CareerSection/InputSection/InputSection.tsx b/src/pages/instructorRegister/components/CareerSection/InputSection/InputSection.tsx index 6b3a08115..c72209e8f 100644 --- a/src/pages/instructorRegister/components/CareerSection/InputSection/InputSection.tsx +++ b/src/pages/instructorRegister/components/CareerSection/InputSection/InputSection.tsx @@ -2,16 +2,19 @@ import { useRef, useState } from 'react'; import { addButtonStyle, checkboxStyle, - inputContainerStyle, hiddenCheckboxStyle, + inputCheckboxLabelStyle, + inputContainerStyle, + inputHeaderRightStyle, + inputHeaderRowStyle, + inputListWrapperStyle, } from '@/pages/instructorRegister/components/CareerSection/careerSection.css'; import type { InputItemTypes } from '@/pages/instructorRegister/types/inputItemTypes'; +import Input from '@/common/components/Input/Input'; import BtnCheck from '@/shared/assets/svg/BtnCheck'; import IcPlusGray0524 from '@/shared/assets/svg/IcPlusGray0524'; import IcXCircleGray from '@/shared/assets/svg/IcXCircleGray'; -import Flex from '@/shared/components/Flex/Flex'; -import Input from '@/shared/components/Input/Input'; -import Text from '@/shared/components/Text/Text'; +import Text from '@/common/components/Text/Text'; interface InputSectionPropTypes { title: string; @@ -71,24 +74,24 @@ const InputSection = ({ return (
- +
{title} - +
해당없음 -
{!isNoneChecked && ( - +
{inputItems.map(({ id, value }, index) => ( )} - +
)}
); diff --git a/src/pages/instructorRegister/components/CareerSection/careerSection.css.ts b/src/pages/instructorRegister/components/CareerSection/careerSection.css.ts index 08b5ac79f..a55ad36f5 100644 --- a/src/pages/instructorRegister/components/CareerSection/careerSection.css.ts +++ b/src/pages/instructorRegister/components/CareerSection/careerSection.css.ts @@ -10,6 +10,25 @@ export const inputContainerStyle = style({ padding: '1.2rem 0', }); +export const inputHeaderRowStyle = style({ + display: 'flex', + justifyContent: 'space-between', + width: '100%', +}); + +export const inputHeaderRightStyle = style({ + display: 'flex', + gap: '0.8rem', + alignItems: 'center', +}); + +export const inputCheckboxLabelStyle = style({ + display: 'flex', + alignItems: 'center', + gap: '0.4rem', + cursor: 'pointer', +}); + export const addButtonStyle = style({ display: 'flex', justifyContent: 'center', @@ -44,3 +63,10 @@ export const containerStyle = style({ width: '100%', paddingBottom: '2rem', }); + +export const inputListWrapperStyle = style({ + display: 'flex', + flexDirection: 'column', + gap: '0.8rem', + width: '100%', +}); diff --git a/src/pages/instructorRegister/components/DancerNameSection/DancerNameSection.tsx b/src/pages/instructorRegister/components/DancerNameSection/DancerNameSection.tsx index 86fabd85c..2e9d40b26 100644 --- a/src/pages/instructorRegister/components/DancerNameSection/DancerNameSection.tsx +++ b/src/pages/instructorRegister/components/DancerNameSection/DancerNameSection.tsx @@ -6,9 +6,9 @@ import type { duplicateStateTypes, instructorRegisterFormTypes, } from '@/pages/instructorRegister/types/instructorRegisterForm'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; -import Input from '@/shared/components/Input/Input'; -import Text from '@/shared/components/Text/Text'; +import Input from '@/common/components/Input/Input'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; +import Text from '@/common/components/Text/Text'; interface DancerNameSectionPropTypes { duplicateState: duplicateStateTypes; diff --git a/src/pages/instructorRegister/components/Description/Description.tsx b/src/pages/instructorRegister/components/Description/Description.tsx index 2acf0c6cb..3b29d4be7 100644 --- a/src/pages/instructorRegister/components/Description/Description.tsx +++ b/src/pages/instructorRegister/components/Description/Description.tsx @@ -1,6 +1,6 @@ import { flexCustomStyle } from '@/pages/instructorRegister/components/Description/description.css'; -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'; interface DescriptionProps { title: string; diff --git a/src/pages/instructorRegister/components/ImageUploadSection/ImageUploadSection.tsx b/src/pages/instructorRegister/components/ImageUploadSection/ImageUploadSection.tsx index 98cd0849b..508ce5266 100644 --- a/src/pages/instructorRegister/components/ImageUploadSection/ImageUploadSection.tsx +++ b/src/pages/instructorRegister/components/ImageUploadSection/ImageUploadSection.tsx @@ -1,6 +1,6 @@ import * as styles from '@/pages/instructorRegister/components/ImageUploadSection/imageUploadSection.css'; +import Text from '@/common/components/Text/Text'; import IcProfileBasic from '@/shared/assets/svg/IcProfileBasic'; -import Text from '@/shared/components/Text/Text'; interface ImageUploadSectionPropTypes { handleUploaderClick?: () => void; diff --git a/src/pages/instructorRegister/components/IntroductionSection/IntroductionSection.tsx b/src/pages/instructorRegister/components/IntroductionSection/IntroductionSection.tsx index 00327717d..25b36ae74 100644 --- a/src/pages/instructorRegister/components/IntroductionSection/IntroductionSection.tsx +++ b/src/pages/instructorRegister/components/IntroductionSection/IntroductionSection.tsx @@ -11,7 +11,7 @@ import { INSTRUCTOR_REGISTER_PLACEHOLDER, MAX_INTRODUCTION_LENGTH, } from '@/pages/instructorRegister/constants/registerSection'; -import Text from '@/shared/components/Text/Text'; +import Text from '@/common/components/Text/Text'; import type { instructorRegisterFormTypes } from '../../types/instructorRegisterForm'; const IntroductionSection = () => { diff --git a/src/pages/instructorRegister/components/PersonalSNSSection/PersonalSNSSection.tsx b/src/pages/instructorRegister/components/PersonalSNSSection/PersonalSNSSection.tsx index 4dee1d8d2..2eb471e0b 100644 --- a/src/pages/instructorRegister/components/PersonalSNSSection/PersonalSNSSection.tsx +++ b/src/pages/instructorRegister/components/PersonalSNSSection/PersonalSNSSection.tsx @@ -10,7 +10,7 @@ import { inputWrapperStyle, } from '@/pages/instructorRegister/components/PersonalSNSSection/personalSNSSection.css'; import SvgIcAt12 from '@/shared/assets/svg/IcAt12'; -import Text from '@/shared/components/Text/Text'; +import Text from '@/common/components/Text/Text'; import { vars } from '@/shared/styles/theme.css'; import { INSTRUCTOR_REGISTER_PLACEHOLDER } from '../../constants/registerSection'; diff --git a/src/pages/instructorRegister/hooks/useInstructorRegisterForm.ts b/src/pages/instructorRegister/hooks/useInstructorRegisterForm.ts index caac8dff2..6ee2906c3 100644 --- a/src/pages/instructorRegister/hooks/useInstructorRegisterForm.ts +++ b/src/pages/instructorRegister/hooks/useInstructorRegisterForm.ts @@ -11,7 +11,7 @@ import type { instructorRegisterFormTypes, } from '@/pages/instructorRegister/types/instructorRegisterForm'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; -import { notify } from '@/shared/components/Toast/Toast'; +import { notify } from '@/common/components/Toast/Toast'; import { authKeys, teacherKeys } from '@/shared/constants/queryKey'; import { USER_ROLE } from '@/shared/constants/userRole'; import { setAccessToken, setRefreshToken } from '@/shared/utils/handleToken'; diff --git a/src/pages/instructorRegisterCompletion/InstructorRegisterCompletion.tsx b/src/pages/instructorRegisterCompletion/InstructorRegisterCompletion.tsx index fe4fdc56a..a388a2b70 100644 --- a/src/pages/instructorRegisterCompletion/InstructorRegisterCompletion.tsx +++ b/src/pages/instructorRegisterCompletion/InstructorRegisterCompletion.tsx @@ -7,9 +7,9 @@ import { } from '@/pages/instructorRegisterCompletion/instructorRegisterCompletion.css'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; import { ClearGif } from '@/shared/assets/gif'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; -import Head from '@/shared/components/Head/Head'; -import Text from '@/shared/components/Text/Text'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; +import Head from '@/common/components/Head/Head'; +import Text from '@/common/components/Text/Text'; const InstructorRegisterCompletion = () => { const navigate = useNavigate(); diff --git a/src/pages/loading/Loading.tsx b/src/pages/loading/Loading.tsx index d446ab88e..829d03cbe 100644 --- a/src/pages/loading/Loading.tsx +++ b/src/pages/loading/Loading.tsx @@ -1,24 +1,17 @@ +import { loadingContainerStyle, loadingInnerWrapperStyle } from '@/pages/loading/loading.css'; import { LoadingGif } from '@/shared/assets/gif'; -import Flex from '@/shared/components/Flex/Flex'; -import Head from '@/shared/components/Head/Head'; +import Head from '@/common/components/Head/Head'; const Loading = () => { return ( - - - +
+
+ 로딩 중 로딩 중... - - +
+
); }; diff --git a/src/pages/loading/loading.css.ts b/src/pages/loading/loading.css.ts new file mode 100644 index 000000000..dba0a3c2a --- /dev/null +++ b/src/pages/loading/loading.css.ts @@ -0,0 +1,21 @@ +import { style } from '@vanilla-extract/css'; + +export const loadingContainerStyle = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + paddingTop: '19.5rem', + paddingRight: '11.7rem', + paddingBottom: '27.3rem', + paddingLeft: '11.8rem', +}); + +export const loadingInnerWrapperStyle = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + gap: '1.3rem', +}); + diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx index d9d283fe8..46839f4a3 100644 --- a/src/pages/login/Login.tsx +++ b/src/pages/login/Login.tsx @@ -1,7 +1,7 @@ import KakaoButton from '@/pages/login/components/KakaoButton/KakaoButton'; import { containerStyle, videoStyle, buttonContainerStyle, titleWrapperStyle } from '@/pages/login/login.css'; import LoginWepm from '@/shared/assets/webm/login.webm'; -import Head from '@/shared/components/Head/Head'; +import Head from '@/common/components/Head/Head'; const Login = () => { return ( diff --git a/src/pages/login/components/KakaoButton/KakaoButton.tsx b/src/pages/login/components/KakaoButton/KakaoButton.tsx index 723c21573..1f51b223b 100644 --- a/src/pages/login/components/KakaoButton/KakaoButton.tsx +++ b/src/pages/login/components/KakaoButton/KakaoButton.tsx @@ -1,6 +1,6 @@ import { buttonStyle, kakaoButtonStyle, buttonContentStyle } from '@/pages/login/components/KakaoButton/kakaoButton.css'; import IcKakaoKakaobrown28 from '@/shared/assets/svg/IcKakaoKakaobrown28'; -import Head from '@/shared/components/Head/Head'; +import Head from '@/common/components/Head/Head'; const KakaoButton = () => { const redirect_uri = import.meta.env.VITE_KAKAO_REDIRECT_URI; diff --git a/src/pages/mypage/components/BottomList/BottomList.tsx b/src/pages/mypage/components/BottomList/BottomList.tsx index f7095be98..0e62e71d8 100644 --- a/src/pages/mypage/components/BottomList/BottomList.tsx +++ b/src/pages/mypage/components/BottomList/BottomList.tsx @@ -6,12 +6,12 @@ import { GOOGLE_FORM_LINK } from '@/pages/mypage/constants/link'; import type { BottomListItem } from '@/pages/mypage/utils/getBottomList'; import { getBottomListData } from '@/pages/mypage/utils/getBottomList'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; +import Divider from '@/common/components/Divider/Divider'; import Modal from '@/common/components/Modal/Modal'; +import { notify } from '@/common/components/Toast/Toast'; import { useModalStore } from '@/common/stores/modal'; import { useWithdrawStore } from '@/common/stores/withdraw'; import IcArrowRightSmallGray0732 from '@/shared/assets/svg/IcArrowRightSmallGray0732'; -import Divider from '@/shared/components/Divider/Divider'; -import { notify } from '@/shared/components/Toast/Toast'; interface BottomListPropTypes { userRole: 'STUDENT' | 'TEACHER'; @@ -98,10 +98,7 @@ const BottomList = ({ userRole }: BottomListPropTypes) => {
    {LIST_DATA.map((item) => (
    - diff --git a/src/pages/mypage/components/CancelConfirmPage/CancelConfirmPage.tsx b/src/pages/mypage/components/CancelConfirmPage/CancelConfirmPage.tsx index 44dc3dc86..d6667afd9 100644 --- a/src/pages/mypage/components/CancelConfirmPage/CancelConfirmPage.tsx +++ b/src/pages/mypage/components/CancelConfirmPage/CancelConfirmPage.tsx @@ -19,13 +19,13 @@ import { useGetReservationsDetail } from '@/pages/mypage/components/mypageReserv import { CANCEL_CONFIRM_DESCRIPTION, CANCEL_CONFIRM_MESSAGE } from '@/pages/mypage/constants/modalMessage'; import ApplicantInfo from '@/pages/reservation/components/ApplicantInfo/ApplicantInfo'; import ClassInfo from '@/pages/reservation/components/ClassInfo/ClassInfo'; +import BlurBotton from '@/common/components/BlurButton/BlurButton'; import Modal from '@/common/components/Modal/Modal'; import { useModalStore } from '@/common/stores/modal'; import { useGetBankList } from '@/shared/apis/queries'; import BankBottomSheet from '@/shared/components/BankBottomSheet/BankBottomSheet'; -import BlurBotton from '@/shared/components/BlurButton/BlurButton'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; -import Head from '@/shared/components/Head/Head'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; +import Head from '@/common/components/Head/Head'; import RefundAccountSection from './components/RefundAccountSection/RefundAccountSection'; import RefundPolicySection from './components/RefundPolicySection/RefundPolicySection'; diff --git a/src/pages/mypage/components/CancelConfirmPage/components/RefundAccountSection/RefundAccountSection.tsx b/src/pages/mypage/components/CancelConfirmPage/components/RefundAccountSection/RefundAccountSection.tsx index a95738684..9e61e3f73 100644 --- a/src/pages/mypage/components/CancelConfirmPage/components/RefundAccountSection/RefundAccountSection.tsx +++ b/src/pages/mypage/components/CancelConfirmPage/components/RefundAccountSection/RefundAccountSection.tsx @@ -1,9 +1,9 @@ import type { UseFormRegister } from 'react-hook-form'; import * as styles from '@/pages/mypage/components/CancelConfirmPage/components/RefundAccountSection/refundAccountSection.css.ts'; +import Input from '@/common/components/Input/Input'; import SvgIcArrowDownGray1032 from '@/shared/assets/svg/IcArrowDownGray1032'; -import Head from '@/shared/components/Head/Head'; -import Input from '@/shared/components/Input/Input'; -import Text from '@/shared/components/Text/Text'; +import Head from '@/common/components/Head/Head'; +import Text from '@/common/components/Text/Text'; import { MAX_ACCOUNT_NUMBER_LENGTH } from '@/shared/constants/account'; import { ONLY_NUMBER } from '@/shared/constants/regex'; diff --git a/src/pages/mypage/components/CancelConfirmPage/components/RefundPolicySection/RefundPolicySection.tsx b/src/pages/mypage/components/CancelConfirmPage/components/RefundPolicySection/RefundPolicySection.tsx index 7fa2e6a81..793ce4869 100644 --- a/src/pages/mypage/components/CancelConfirmPage/components/RefundPolicySection/RefundPolicySection.tsx +++ b/src/pages/mypage/components/CancelConfirmPage/components/RefundPolicySection/RefundPolicySection.tsx @@ -5,11 +5,11 @@ import { agreementContainerSelectedStyle, contentWrapperStyle, } from '@/pages/mypage/components/CancelConfirmPage/components/RefundPolicySection/refundPolicySection.css'; +import Head from '@/common/components/Head/Head'; +import Text from '@/common/components/Text/Text'; import IcCheckcircleGray0524 from '@/shared/assets/svg/IcCheckcircleGray0524'; import IcCheckcircleMain0324 from '@/shared/assets/svg/IcCheckcircleMain0324'; import IcFrame from '@/shared/assets/svg/IcFrame'; -import Head from '@/shared/components/Head/Head'; -import Text from '@/shared/components/Text/Text'; import { vars } from '@/shared/styles/theme.css'; interface RefundPolicySectionProps { diff --git a/src/pages/mypage/components/TabWrapper/TabWrapper.tsx b/src/pages/mypage/components/TabWrapper/TabWrapper.tsx index 8c4c7abb9..8ad67e0a1 100644 --- a/src/pages/mypage/components/TabWrapper/TabWrapper.tsx +++ b/src/pages/mypage/components/TabWrapper/TabWrapper.tsx @@ -2,7 +2,7 @@ import StudentContent from '@/pages/mypage/components/TabWrapper/components/Stud import TeacherContent from '@/pages/mypage/components/TabWrapper/components/TeacherContent/TeacherContent'; import * as styles from '@/pages/mypage/components/TabWrapper/tabWrapper.css'; import { MYPAGE_TABS } from '@/pages/mypage/constants/tabs'; -import { TabButton, TabList, TabPanel } from '@/shared/components/Tab'; +import { TabButton, TabList, TabPanel } from '@/common/components/Tab'; import { useTabNavigation } from '@/shared/hooks/useTabNavigation'; const TabWrapper = () => { diff --git a/src/pages/mypage/components/TabWrapper/components/StudentContent/StudentContent.tsx b/src/pages/mypage/components/TabWrapper/components/StudentContent/StudentContent.tsx index 26978d141..511a9729e 100644 --- a/src/pages/mypage/components/TabWrapper/components/StudentContent/StudentContent.tsx +++ b/src/pages/mypage/components/TabWrapper/components/StudentContent/StudentContent.tsx @@ -4,9 +4,9 @@ import ClassProgress from '@/pages/mypage/components/TabWrapper/components/Stude import MenuButton from '@/pages/mypage/components/TabWrapper/components/StudentContent/components/MenuButton/MenuButton'; import * as styles from '@/pages/mypage/components/TabWrapper/components/StudentContent/studentContent.css'; import { MENU_LIST } from '@/pages/mypage/constants/myPageList'; -import Divider from '@/shared/components/Divider/Divider'; +import Divider from '@/common/components/Divider/Divider'; import InfoComponent from '@/shared/components/InfoComponent/InfoComponent'; -import Text from '@/shared/components/Text/Text'; +import Text from '@/common/components/Text/Text'; import { formatPhoneNumberNoSpace } from '@/shared/utils/formatPhoneNumber'; const StudentContent = () => { diff --git a/src/pages/mypage/components/TabWrapper/components/StudentContent/components/ClassProgress/ClassProgress.tsx b/src/pages/mypage/components/TabWrapper/components/StudentContent/components/ClassProgress/ClassProgress.tsx index 6d39e1078..edf9450b9 100644 --- a/src/pages/mypage/components/TabWrapper/components/StudentContent/components/ClassProgress/ClassProgress.tsx +++ b/src/pages/mypage/components/TabWrapper/components/StudentContent/components/ClassProgress/ClassProgress.tsx @@ -6,8 +6,8 @@ import { arrowIconStyle, } from '@/pages/mypage/components/TabWrapper/components/StudentContent/components/ClassProgress/ClassProgress.css'; import SvgIcArrowRightGray0614 from '@/shared/assets/svg/IcArrowRightGray0614'; -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 ClassProgress = () => { const { data, isLoading } = useGetMyLessonCounts(); diff --git a/src/pages/mypage/components/TabWrapper/components/StudentContent/components/MenuButton/MenuButton.tsx b/src/pages/mypage/components/TabWrapper/components/StudentContent/components/MenuButton/MenuButton.tsx index dd0219d3d..6911f3a96 100644 --- a/src/pages/mypage/components/TabWrapper/components/StudentContent/components/MenuButton/MenuButton.tsx +++ b/src/pages/mypage/components/TabWrapper/components/StudentContent/components/MenuButton/MenuButton.tsx @@ -1,7 +1,7 @@ import { useNavigate } from 'react-router-dom'; import { buttonStyle } from '@/pages/mypage/components/TabWrapper/components/StudentContent/components/MenuButton/menuButton.css'; -import Text from '@/shared/components/Text/Text'; -import { notify } from '@/shared/components/Toast/Toast'; +import Text from '@/common/components/Text/Text'; +import { notify } from '@/common/components/Toast/Toast'; interface MenuButtonPropTypes { path?: string; diff --git a/src/pages/mypage/components/TabWrapper/components/TeacherContent/TeacherContent.tsx b/src/pages/mypage/components/TabWrapper/components/TeacherContent/TeacherContent.tsx index 7339e7dc8..cb3f34984 100644 --- a/src/pages/mypage/components/TabWrapper/components/TeacherContent/TeacherContent.tsx +++ b/src/pages/mypage/components/TabWrapper/components/TeacherContent/TeacherContent.tsx @@ -23,16 +23,16 @@ import { import { VISIT_KEY } from '@/pages/mypage/constants/storageKey'; import { getUser } from '@/pages/mypage/utils/storage'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; +import Divider from '@/common/components/Divider/Divider'; +import Text from '@/common/components/Text/Text'; +import { notify } from '@/common/components/Toast/Toast'; import { useGetRole, useGetTeacherAccount } from '@/shared/apis/queries'; import IcArrowRightSmallGray0732 from '@/shared/assets/svg/IcArrowRightSmallGray0732'; import IcInstagram20 from '@/shared/assets/svg/IcInstagram20'; import IcPlusWhite24 from '@/shared/assets/svg/IcPlusWhite24'; import IcReview from '@/shared/assets/svg/IcReview'; import IcYoutube20 from '@/shared/assets/svg/IcYoutube20'; -import Divider from '@/shared/components/Divider/Divider'; import InfoComponent from '@/shared/components/InfoComponent/InfoComponent'; -import Text from '@/shared/components/Text/Text'; -import { notify } from '@/shared/components/Toast/Toast'; const TeacherContent = () => { const navigate = useNavigate(); diff --git a/src/pages/mypage/components/TabWrapper/components/TeacherContent/components/EmptyClassList/EmptyClassList.tsx b/src/pages/mypage/components/TabWrapper/components/TeacherContent/components/EmptyClassList/EmptyClassList.tsx index 9e4532ad1..055aeca5c 100644 --- a/src/pages/mypage/components/TabWrapper/components/TeacherContent/components/EmptyClassList/EmptyClassList.tsx +++ b/src/pages/mypage/components/TabWrapper/components/TeacherContent/components/EmptyClassList/EmptyClassList.tsx @@ -1,5 +1,5 @@ +import Head from '@/common/components/Head/Head'; import IcMyEmpty from '@/shared/assets/svg/IcMyEmpty'; -import Head from '@/shared/components/Head/Head'; import * as styles from './EmptyClassList.css'; const EmptyClassList = () => { diff --git a/src/pages/mypage/components/TabWrapper/components/TeacherContent/components/ToolTip/ToolTip.tsx b/src/pages/mypage/components/TabWrapper/components/TeacherContent/components/ToolTip/ToolTip.tsx index 16190bcaa..6b9023c89 100644 --- a/src/pages/mypage/components/TabWrapper/components/TeacherContent/components/ToolTip/ToolTip.tsx +++ b/src/pages/mypage/components/TabWrapper/components/TeacherContent/components/ToolTip/ToolTip.tsx @@ -4,7 +4,7 @@ import { VISIT_KEY } from '@/pages/mypage/constants/storageKey'; import { setUser } from '@/pages/mypage/utils/storage'; import IcTriangle from '@/shared/assets/svg/IcTriangle'; import IcXBlack from '@/shared/assets/svg/IcXBlack'; -import Text from '@/shared/components/Text/Text'; +import Text from '@/common/components/Text/Text'; interface ToolTipPropTypes { title: string; diff --git a/src/pages/mypage/components/TabWrapper/components/TeacherContent/components/UnregisteredTeacher/UnregisteredTeacher.tsx b/src/pages/mypage/components/TabWrapper/components/TeacherContent/components/UnregisteredTeacher/UnregisteredTeacher.tsx index 3b04ee09f..2ee4bc60e 100644 --- a/src/pages/mypage/components/TabWrapper/components/TeacherContent/components/UnregisteredTeacher/UnregisteredTeacher.tsx +++ b/src/pages/mypage/components/TabWrapper/components/TeacherContent/components/UnregisteredTeacher/UnregisteredTeacher.tsx @@ -1,8 +1,8 @@ import { useNavigate } from 'react-router-dom'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; import IcProfile from '@/shared/assets/svg/IcProfile'; -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'; import * as styles from './unregisteredTeacher.css'; interface UnregisteredTeacherPropTypes { diff --git a/src/pages/mypage/components/Withdraw/Withdraw.tsx b/src/pages/mypage/components/Withdraw/Withdraw.tsx index 4d98cec3b..e74165228 100644 --- a/src/pages/mypage/components/Withdraw/Withdraw.tsx +++ b/src/pages/mypage/components/Withdraw/Withdraw.tsx @@ -6,7 +6,7 @@ import ReasonStep from '@/pages/mypage/components/Withdraw/components/ReasonStep import WithdrawHeader from '@/pages/mypage/components/Withdraw/components/WithdrawHeader/WithdrawHeader'; import type { WithdrawReasonTypes } from '@/pages/mypage/components/Withdraw/constants'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; -import { useFunnel } from '@/shared/hooks/useFunnel'; +import { useFunnel } from '@/common/hooks/useFunnel'; const Withdraw = () => { const navigate = useNavigate(); diff --git a/src/pages/mypage/components/Withdraw/components/CompleteStep/CompleteStep.tsx b/src/pages/mypage/components/Withdraw/components/CompleteStep/CompleteStep.tsx index d6faf9166..c415faff6 100644 --- a/src/pages/mypage/components/Withdraw/components/CompleteStep/CompleteStep.tsx +++ b/src/pages/mypage/components/Withdraw/components/CompleteStep/CompleteStep.tsx @@ -6,11 +6,11 @@ import { boxValueStyle, buttonContainerStyle, } from '@/pages/mypage/components/Withdraw/components/CompleteStep/completeStep.css'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; -import Head from '@/shared/components/Head/Head'; -import Text from '@/shared/components/Text/Text'; -import { formatToYYYYMMDD } from '@/shared/utils/timeCalculate'; -import { getDateWithoutTime } from '@/shared/utils/timeUtils'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; +import Head from '@/common/components/Head/Head'; +import Text from '@/common/components/Text/Text'; +import { formatToYYYYMMDD } from '@/shared/utils/date'; +import { getDateWithoutTime } from '@/shared/utils/date'; interface CompleteStepPropTypes { email: string; diff --git a/src/pages/mypage/components/Withdraw/components/NoticeStep/NoticeStep.tsx b/src/pages/mypage/components/Withdraw/components/NoticeStep/NoticeStep.tsx index f999a6412..1aca053ef 100644 --- a/src/pages/mypage/components/Withdraw/components/NoticeStep/NoticeStep.tsx +++ b/src/pages/mypage/components/Withdraw/components/NoticeStep/NoticeStep.tsx @@ -14,17 +14,17 @@ import { agreeSectionStyle, } from '@/pages/mypage/components/Withdraw/components/NoticeStep/noticeStep.css'; import { NOTICE_CONTENTS } from '@/pages/mypage/components/Withdraw/constants'; +import BlurButton from '@/common/components/BlurButton/BlurButton'; import Modal from '@/common/components/Modal/Modal'; import { useModalStore } from '@/common/stores/modal'; import { useWithdrawStore } from '@/common/stores/withdraw'; import IcCheckcircleGray0524 from '@/shared/assets/svg/IcCheckcircleGray0524'; import IcCheckcircleMain0324 from '@/shared/assets/svg/IcCheckcircleMain0324'; -import BlurButton from '@/shared/components/BlurButton/BlurButton'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; -import Divider from '@/shared/components/Divider/Divider'; -import Head from '@/shared/components/Head/Head'; -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 { vars } from '@/shared/styles/theme.css'; import { clearStorage } from '@/shared/utils/handleToken'; diff --git a/src/pages/mypage/components/Withdraw/components/ReasonStep/ReasonStep.tsx b/src/pages/mypage/components/Withdraw/components/ReasonStep/ReasonStep.tsx index fd480dc22..6e94a2cb1 100644 --- a/src/pages/mypage/components/Withdraw/components/ReasonStep/ReasonStep.tsx +++ b/src/pages/mypage/components/Withdraw/components/ReasonStep/ReasonStep.tsx @@ -10,13 +10,13 @@ import { } from '@/pages/mypage/components/Withdraw/components/ReasonStep/reasonStep.css'; import type { WithdrawReasonTypes } from '@/pages/mypage/components/Withdraw/constants'; import { WITHDRAW_REASONS } from '@/pages/mypage/components/Withdraw/constants'; +import BlurButton from '@/common/components/BlurButton/BlurButton'; +import Input from '@/common/components/Input/Input'; import IcCheckcircleGray0524 from '@/shared/assets/svg/IcCheckcircleGray0524'; import IcCheckcircleMain0324 from '@/shared/assets/svg/IcCheckcircleMain0324'; -import BlurButton from '@/shared/components/BlurButton/BlurButton'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; -import Head from '@/shared/components/Head/Head'; -import Input from '@/shared/components/Input/Input'; -import Text from '@/shared/components/Text/Text'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; +import Head from '@/common/components/Head/Head'; +import Text from '@/common/components/Text/Text'; import { vars } from '@/shared/styles/theme.css'; interface ReasonStepProps { diff --git a/src/pages/mypage/components/mypageCancelClass/DepositeButton/DepositeButton.tsx b/src/pages/mypage/components/mypageCancelClass/DepositeButton/DepositeButton.tsx index 032890f22..01c4b58ad 100644 --- a/src/pages/mypage/components/mypageCancelClass/DepositeButton/DepositeButton.tsx +++ b/src/pages/mypage/components/mypageCancelClass/DepositeButton/DepositeButton.tsx @@ -1,5 +1,5 @@ import * as styles from '@/pages/mypage/components/mypageCancelClass/DepositeButton/depositeButton.css'; -import Text from '@/shared/components/Text/Text'; +import Text from '@/common/components/Text/Text'; interface DepositeButtonProps { text: string; diff --git a/src/pages/mypage/components/mypageCancelClass/MypageCancelClass.tsx b/src/pages/mypage/components/mypageCancelClass/MypageCancelClass.tsx index 1179c8cf6..555a0dd5b 100644 --- a/src/pages/mypage/components/mypageCancelClass/MypageCancelClass.tsx +++ b/src/pages/mypage/components/mypageCancelClass/MypageCancelClass.tsx @@ -14,11 +14,11 @@ import { } from '@/pages/mypage/components/mypageCancelClass/mypageCancelClass.css'; import ReservationList from '@/pages/mypage/components/mypageReservation/components/ReservationList'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; +import BlurButton from '@/common/components/BlurButton/BlurButton'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; +import Head from '@/common/components/Head/Head'; import { useGetBankList } from '@/shared/apis/queries'; import BankBottomSheet from '@/shared/components/BankBottomSheet/BankBottomSheet'; -import BlurButton from '@/shared/components/BlurButton/BlurButton'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; -import Head from '@/shared/components/Head/Head'; const MypageCancelClass = () => { const navigate = useNavigate(); diff --git a/src/pages/mypage/components/mypageCancelClass/components/AccountInputSection/AccountInputSection.tsx b/src/pages/mypage/components/mypageCancelClass/components/AccountInputSection/AccountInputSection.tsx index fb8c563ae..dc9e214c4 100644 --- a/src/pages/mypage/components/mypageCancelClass/components/AccountInputSection/AccountInputSection.tsx +++ b/src/pages/mypage/components/mypageCancelClass/components/AccountInputSection/AccountInputSection.tsx @@ -1,9 +1,9 @@ import type { UseFormRegister } from 'react-hook-form'; import * as styles from '@/pages/mypage/components/mypageCancelClass/components/AccountInputSection/accountInputSetion.css'; +import Head from '@/common/components/Head/Head'; +import Input from '@/common/components/Input/Input'; +import Text from '@/common/components/Text/Text'; import SvgIcArrowDownGray1032 from '@/shared/assets/svg/IcArrowDownGray1032'; -import Head from '@/shared/components/Head/Head'; -import Input from '@/shared/components/Input/Input'; -import Text from '@/shared/components/Text/Text'; import { MAX_ACCOUNT_NUMBER_LENGTH } from '@/shared/constants/account'; import { ONLY_NUMBER } from '@/shared/constants/regex'; diff --git a/src/pages/mypage/components/mypageReservation/MypageReservation.tsx b/src/pages/mypage/components/mypageReservation/MypageReservation.tsx index 65ac530c1..5cbc665c1 100644 --- a/src/pages/mypage/components/mypageReservation/MypageReservation.tsx +++ b/src/pages/mypage/components/mypageReservation/MypageReservation.tsx @@ -1,11 +1,6 @@ import { useState } from 'react'; import { useGetReservationStatus } from '@/pages/mypage/components/mypageReservation/apis/queries'; import ReservationList from '@/pages/mypage/components/mypageReservation/components/ReservationList'; -import { - options, - STATUS_ENGLISH_MAP, - STATUS_KOREAN_MAP, -} from '@/pages/mypage/components/mypageReservation/constants/statusMap'; import { containerStyle, layoutStyle, @@ -13,8 +8,13 @@ import { reservationListSectionStyle, } from '@/pages/mypage/components/mypageReservation/mypageReservation.css'; import type { ReservationStatus } from '@/pages/mypage/components/mypageReservation/types/reservationStatus'; +import { + options, + STATUS_ENGLISH_MAP, + STATUS_KOREAN_MAP, +} from '@/pages/mypage/components/mypageReservation/constants/statusMap'; import Dropdown from '@/common/components/Dropdown/Dropdown'; -import Head from '@/shared/components/Head/Head'; +import Head from '@/common/components/Head/Head'; const MyPageReservation = () => { const { data: reservationStatus } = useGetReservationStatus(); diff --git a/src/pages/mypage/components/mypageReservation/components/ReservationList.tsx b/src/pages/mypage/components/mypageReservation/components/ReservationList.tsx index bb35e0e12..1db9933c7 100644 --- a/src/pages/mypage/components/mypageReservation/components/ReservationList.tsx +++ b/src/pages/mypage/components/mypageReservation/components/ReservationList.tsx @@ -4,9 +4,9 @@ import { useGetReservations } from '@/pages/mypage/components/mypageReservation/ import { type ReservationStatus } from '@/pages/mypage/components/mypageReservation/types/reservationStatus'; import { type Reservation } from '@/pages/mypage/components/mypageReservation/types/reservationTypes'; import { handleBoxButtonClick, handleCancelClick, handleClassCardClick } from '@/pages/mypage/utils/clickUtils'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; import ClassCard from '@/shared/components/ClassCard'; -import Text from '@/shared/components/Text/Text'; +import Text from '@/common/components/Text/Text'; import { USER_ROLE } from '@/shared/constants/userRole'; interface ReservationListProps { diff --git a/src/pages/mypage/components/mypageReservationDetail/MypageReservationDetail.tsx b/src/pages/mypage/components/mypageReservationDetail/MypageReservationDetail.tsx index 15e617be6..dfc669b91 100644 --- a/src/pages/mypage/components/mypageReservationDetail/MypageReservationDetail.tsx +++ b/src/pages/mypage/components/mypageReservationDetail/MypageReservationDetail.tsx @@ -6,9 +6,9 @@ import ClassInfo from '@/pages/mypage/components/mypageReservationDetail/compone import ReservationProgress from '@/pages/mypage/components/mypageReservationDetail/components/ReservationProgress/ReservationProgress'; import * as styles from '@/pages/mypage/components/mypageReservationDetail/mypageReservationDetail.css'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; import ClassCard from '@/shared/components/ClassCard'; -import Head from '@/shared/components/Head/Head'; +import Head from '@/common/components/Head/Head'; const MyPageReservationDetail = () => { const { id: reservationId } = useParams<{ id: string }>(); diff --git a/src/pages/mypage/components/mypageReservationDetail/components/ApplicantInfo/ApplicantInfo.tsx b/src/pages/mypage/components/mypageReservationDetail/components/ApplicantInfo/ApplicantInfo.tsx index 32a909cd1..ac115b57c 100644 --- a/src/pages/mypage/components/mypageReservationDetail/components/ApplicantInfo/ApplicantInfo.tsx +++ b/src/pages/mypage/components/mypageReservationDetail/components/ApplicantInfo/ApplicantInfo.tsx @@ -1,7 +1,7 @@ import * as styles from '@/pages/mypage/components/mypageReservationDetail/components/ApplicantInfo/applicantInfo.css'; -import Text from '@/shared/components/Text/Text'; +import Text from '@/common/components/Text/Text'; +import { formatDateToKRWithTime } from '@/shared/utils/date'; import { formatPhoneNumberNoSpace } from '@/shared/utils/formatPhoneNumber'; -import { formatDateTime } from '@/shared/utils/timeCalculate'; interface ApplicantInfoPropTypes { memberName: string; @@ -33,7 +33,7 @@ const ApplicantInfo = ({ memberName, memberPhoneNumber, reservationDateTime }: A 신청일시 - {formatDateTime(reservationDateTime)} + {formatDateToKRWithTime(reservationDateTime)}
diff --git a/src/pages/mypage/components/mypageReservationDetail/components/ClassContent/ClassContent.tsx b/src/pages/mypage/components/mypageReservationDetail/components/ClassContent/ClassContent.tsx index 80527f317..7812406bf 100644 --- a/src/pages/mypage/components/mypageReservationDetail/components/ClassContent/ClassContent.tsx +++ b/src/pages/mypage/components/mypageReservationDetail/components/ClassContent/ClassContent.tsx @@ -1,9 +1,9 @@ import { useParams } from 'react-router-dom'; import { useGetReservationsDetail } from '@/pages/mypage/components/mypageReservationDetail/apis/queries'; import { containerStyle } from '@/pages/mypage/components/mypageReservationDetail/components/ClassContent/ClassContent.css'; -import Text from '@/shared/components/Text/Text'; +import Text from '@/common/components/Text/Text'; +import { getClassStatus } from '@/shared/utils/date'; import { getStatusMessage } from '@/shared/utils/getStatusMessage'; -import { getClassStatus } from '@/shared/utils/timeCalculate'; const ClassContent = () => { const lessonId = Number(useParams<{ id: string }>().id); diff --git a/src/pages/mypage/components/mypageReservationDetail/components/ClassInfo/ClassInfo.tsx b/src/pages/mypage/components/mypageReservationDetail/components/ClassInfo/ClassInfo.tsx index 0aeb50d10..e69cf2df4 100644 --- a/src/pages/mypage/components/mypageReservationDetail/components/ClassInfo/ClassInfo.tsx +++ b/src/pages/mypage/components/mypageReservationDetail/components/ClassInfo/ClassInfo.tsx @@ -7,8 +7,8 @@ import { scheduleWrapperStyle, scheduleItemStyle, } from '@/pages/mypage/components/mypageReservationDetail/components/ClassInfo/ClassInfo.css'; -import Text from '@/shared/components/Text/Text'; -import { calculatePeriod, formatSimpleDate } from '@/shared/utils/dateCalculate'; +import Text from '@/common/components/Text/Text'; +import { calculatePeriod, formatDateToSimpleKR } from '@/shared/utils/date'; interface ClassInfoPropTypes { location: string; @@ -54,7 +54,7 @@ const ClassInfo = ({ location, locationDetail, lessonRound = [] }: ClassInfoProp return (
- {id + 1}회차: {formatSimpleDate(round.startDateTime)} + {id + 1}회차: {formatDateToSimpleKR(round.startDateTime)} {startTime} - {formattedEndTime} ({durationString}) diff --git a/src/pages/mypage/components/mypageReservationDetail/components/ReservationProgress/ReservationProgress.tsx b/src/pages/mypage/components/mypageReservationDetail/components/ReservationProgress/ReservationProgress.tsx index a53e260a9..e760ffc24 100644 --- a/src/pages/mypage/components/mypageReservationDetail/components/ReservationProgress/ReservationProgress.tsx +++ b/src/pages/mypage/components/mypageReservationDetail/components/ReservationProgress/ReservationProgress.tsx @@ -10,9 +10,9 @@ import { statusWrapper, textStyle, } from '@/pages/mypage/components/mypageReservationDetail/components/ReservationProgress/ReservationProgress.css'; +import Text from '@/common/components/Text/Text'; import SvgIcClear from '@/shared/assets/svg/IcClear'; import SvgIcMeatball from '@/shared/assets/svg/IcMeatball'; -import Text from '@/shared/components/Text/Text'; import { vars } from '@/shared/styles/theme.css'; interface ReservationProgressProps { diff --git a/src/pages/onboarding/Onboarding.tsx b/src/pages/onboarding/Onboarding.tsx index a30c02439..eb7e02c4b 100644 --- a/src/pages/onboarding/Onboarding.tsx +++ b/src/pages/onboarding/Onboarding.tsx @@ -9,9 +9,9 @@ import { FINAL_ONBOARDING_STEP } from '@/pages/onboarding/constants'; import * as styles from '@/pages/onboarding/onboarding.css'; import type { OnboardInfoTypes, OnboardingState } from '@/pages/onboarding/types/onboardInfoTypes'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; -import { notify } from '@/shared/components/Toast/Toast'; +import { notify } from '@/common/components/Toast/Toast'; +import { useFunnel } from '@/common/hooks/useFunnel'; import { PHONE_AUTH_MESSAGES } from '@/shared/constants/userInfo'; -import { useFunnel } from '@/shared/hooks/useFunnel'; import { setStorage } from '@/shared/utils/handleToken'; const Onboarding = () => { diff --git a/src/pages/onboarding/apis/queries.ts b/src/pages/onboarding/apis/queries.ts index 7d3870244..985f71e76 100644 --- a/src/pages/onboarding/apis/queries.ts +++ b/src/pages/onboarding/apis/queries.ts @@ -3,7 +3,7 @@ import type { AxiosError } from 'axios'; import { postOnboard, postPhoneRequest, postPhoneVerify } from '@/pages/onboarding/apis/axios'; import type { tokenTypes } from '@/pages/onboarding/types/api'; import type { OnboardInfoTypes, PhoneRequestTypes, phoneVerifyTypes } from '@/pages/onboarding/types/onboardInfoTypes'; -import { notify } from '@/shared/components/Toast/Toast'; +import { notify } from '@/common/components/Toast/Toast'; import { PHONE_AUTH_MESSAGES } from '@/shared/constants/userInfo'; import type { ApiError } from '@/shared/types/api'; diff --git a/src/pages/onboarding/components/FinishStep/FinishStep.tsx b/src/pages/onboarding/components/FinishStep/FinishStep.tsx index 266e1a373..e58e8e0ef 100644 --- a/src/pages/onboarding/components/FinishStep/FinishStep.tsx +++ b/src/pages/onboarding/components/FinishStep/FinishStep.tsx @@ -1,7 +1,7 @@ import * as styles from '@/pages/onboarding/components/FinishStep/finishStep.css'; +import Head from '@/common/components/Head/Head'; +import Text from '@/common/components/Text/Text'; import { ClearGif } from '@/shared/assets/gif'; -import Head from '@/shared/components/Head/Head'; -import Text from '@/shared/components/Text/Text'; interface FinishStepProps { name: string; diff --git a/src/pages/onboarding/components/InfoStep/InfoStep.tsx b/src/pages/onboarding/components/InfoStep/InfoStep.tsx index c3eabe8d1..54ee47310 100644 --- a/src/pages/onboarding/components/InfoStep/InfoStep.tsx +++ b/src/pages/onboarding/components/InfoStep/InfoStep.tsx @@ -13,11 +13,11 @@ import { import { INFO_KEY } from '@/pages/onboarding/constants'; import type { OnboardInfoTypes } from '@/pages/onboarding/types/onboardInfoTypes'; import { validateTypingPhoneNumber } from '@/pages/onboarding/utils/validate'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; -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 Input from '@/common/components/Input/Input'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; +import Head from '@/common/components/Head/Head'; +import Text from '@/common/components/Text/Text'; +import { notify } from '@/common/components/Toast/Toast'; import { ONLY_KOREAN_AND_ENGLISH } from '@/shared/constants/regex'; import { MAX_PHONENUMBER_LENGTH, diff --git a/src/pages/onboarding/components/SubmitButton/SubmitButton.tsx b/src/pages/onboarding/components/SubmitButton/SubmitButton.tsx index 964e6b1d0..b8ad90e16 100644 --- a/src/pages/onboarding/components/SubmitButton/SubmitButton.tsx +++ b/src/pages/onboarding/components/SubmitButton/SubmitButton.tsx @@ -1,7 +1,7 @@ import { FINAL_ONBOARDING_STEP } from '@/pages/onboarding/constants'; import type { OnboardInfoTypes } from '@/pages/onboarding/types/onboardInfoTypes'; import { validatePhoneNumber } from '@/pages/onboarding/utils/validate'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; interface SubmitButtonPropTypes { currentStep: number; diff --git a/src/pages/reservation/Reservation.tsx b/src/pages/reservation/Reservation.tsx index 59883f6cc..034384dbb 100644 --- a/src/pages/reservation/Reservation.tsx +++ b/src/pages/reservation/Reservation.tsx @@ -6,7 +6,7 @@ import ReservationStep from '@/pages/reservation/components/ReservationStep/Rese import SuccessStep from '@/pages/reservation/components/SuccessStep/SuccessStep'; import type { ClassReservationResponseTypes } from '@/pages/reservation/types/api'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; -import { useFunnel } from '@/shared/hooks/useFunnel'; +import { useFunnel } from '@/common/hooks/useFunnel'; const Reservation = () => { const navigate = useNavigate(); diff --git a/src/pages/reservation/components/AgreeCheckBox/AgreeCheckBox.tsx b/src/pages/reservation/components/AgreeCheckBox/AgreeCheckBox.tsx index 22dc6c169..42f0210ca 100644 --- a/src/pages/reservation/components/AgreeCheckBox/AgreeCheckBox.tsx +++ b/src/pages/reservation/components/AgreeCheckBox/AgreeCheckBox.tsx @@ -1,9 +1,9 @@ +import { containerStyle, contentStyle } from '@/pages/reservation/components/AgreeCheckBox/agreeCheckBox.css'; +import Text from '@/common/components/Text/Text'; import IcArrowRightSmallGray0732 from '@/shared/assets/svg/IcArrowRightSmallGray0732'; import IcArrowRightSmallMain0332New from '@/shared/assets/svg/IcArrowRightSmallMain0332New'; import IcCheckGray0724 from '@/shared/assets/svg/IcCheckGray0724'; import IcCheckMain0324 from '@/shared/assets/svg/IcCheckMain0324'; -import Text from '@/shared/components/Text/Text'; -import { containerStyle, contentStyle } from '@/pages/reservation/components/AgreeCheckBox/agreeCheckBox.css'; interface AgreeCheckBoxPropTypes { text: string; diff --git a/src/pages/reservation/components/ApplicantInfo/ApplicantInfo.tsx b/src/pages/reservation/components/ApplicantInfo/ApplicantInfo.tsx index 7208fb9a6..8b483462e 100644 --- a/src/pages/reservation/components/ApplicantInfo/ApplicantInfo.tsx +++ b/src/pages/reservation/components/ApplicantInfo/ApplicantInfo.tsx @@ -1,5 +1,9 @@ -import { bookerComponentStyle, textLabelStyle, rowStyle } from '@/pages/reservation/components/ApplicantInfo/applicantInfo.css'; -import Text from '@/shared/components/Text/Text'; +import { + bookerComponentStyle, + textLabelStyle, + rowStyle, +} from '@/pages/reservation/components/ApplicantInfo/applicantInfo.css'; +import Text from '@/common/components/Text/Text'; import { formatPhoneNumberNoSpace } from '@/shared/utils/formatPhoneNumber'; interface ApplicantInfoPropTypes { diff --git a/src/pages/reservation/components/ClassInfo/ClassInfo.tsx b/src/pages/reservation/components/ClassInfo/ClassInfo.tsx index a203fd48f..645ffc18d 100644 --- a/src/pages/reservation/components/ClassInfo/ClassInfo.tsx +++ b/src/pages/reservation/components/ClassInfo/ClassInfo.tsx @@ -8,10 +8,10 @@ import { scheduleItemStyle, locationInfoStyle, } from '@/pages/reservation/components/ClassInfo/classInfo.css'; -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'; import { levelMapping } from '@/shared/constants'; -import { calculatePeriod, formatSimpleDate } from '@/shared/utils/dateCalculate'; +import { calculatePeriod, formatDateToSimpleKR } from '@/shared/utils/date'; interface ClassInfoPropTypes { lessonName: string; @@ -63,7 +63,7 @@ const ClassInfo = ({ return (
- {id + 1}회차: {formatSimpleDate(round.startDateTime)} + {id + 1}회차: {formatDateToSimpleKR(round.startDateTime)} {startTime} - {formattedEndTime} ({durationString}) diff --git a/src/pages/reservation/components/ConfirmationBottomSheet/ConfirmationBottomSheet.tsx b/src/pages/reservation/components/ConfirmationBottomSheet/ConfirmationBottomSheet.tsx index c42a4730c..c7c98de77 100644 --- a/src/pages/reservation/components/ConfirmationBottomSheet/ConfirmationBottomSheet.tsx +++ b/src/pages/reservation/components/ConfirmationBottomSheet/ConfirmationBottomSheet.tsx @@ -1,9 +1,9 @@ import { AnimatePresence, motion } from 'motion/react'; import * as styles from '@/pages/reservation/components/ConfirmationBottomSheet/confirmationBottomSheet.css'; 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 BoxButton from '@/common/components/BoxButton/BoxButton'; +import Head from '@/common/components/Head/Head'; +import Text from '@/common/components/Text/Text'; import { vars } from '@/shared/styles/theme.css'; interface ConfirmationBottomSheetPropTypes { diff --git a/src/pages/reservation/components/ConfirmationStep/ConfirmationStep.tsx b/src/pages/reservation/components/ConfirmationStep/ConfirmationStep.tsx index 9b8ad542b..95136a827 100644 --- a/src/pages/reservation/components/ConfirmationStep/ConfirmationStep.tsx +++ b/src/pages/reservation/components/ConfirmationStep/ConfirmationStep.tsx @@ -15,10 +15,10 @@ import { accountNumberWrapperStyle, } from '@/pages/reservation/components/ConfirmationStep/confirmationStep.css'; import SvgIcCopy from '@/shared/assets/svg/IcCopy'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; -import Head from '@/shared/components/Head/Head'; -import Text from '@/shared/components/Text/Text'; -import { notify } from '@/shared/components/Toast/Toast'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; +import Head from '@/common/components/Head/Head'; +import Text from '@/common/components/Text/Text'; +import { notify } from '@/common/components/Toast/Toast'; interface ConfirmationStepPropTypes { onNext: () => void; diff --git a/src/pages/reservation/components/ReservationStep/ReservationStep.tsx b/src/pages/reservation/components/ReservationStep/ReservationStep.tsx index 675533afd..59ada0213 100644 --- a/src/pages/reservation/components/ReservationStep/ReservationStep.tsx +++ b/src/pages/reservation/components/ReservationStep/ReservationStep.tsx @@ -24,14 +24,14 @@ import { } from '@/pages/reservation/components/ReservationStep/reservationStep.css'; import TopInfoContent from '@/pages/reservation/components/TopInfoContent/TopInfoContent'; import { AGREEMENT_TERMS } from '@/pages/reservation/constants/index'; +import BlurBotton from '@/common/components/BlurButton/BlurButton'; import IcCheckcircleGray0524 from '@/shared/assets/svg/IcCheckcircleGray0524'; import IcCheckcircleMain0324 from '@/shared/assets/svg/IcCheckcircleMain0324'; -import BlurBotton from '@/shared/components/BlurButton/BlurButton'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; -import Divider from '@/shared/components/Divider/Divider'; -import Head from '@/shared/components/Head/Head'; -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 { vars } from '@/shared/styles/theme.css'; import type { ClassReservationResponseTypes } from '../../types/api'; @@ -82,9 +82,7 @@ const ReservationStep = ({ onNext }: ReservationStepPropTypes) => { setIsAllChecked(newAgreements.every((isChecked) => isChecked)); }; - const agreementClassStyle = `${agreementBoxStyle} ${ - isAllChecked ? agreementCheckedStyle : agreementUncheckedStyle - }`; + const agreementClassStyle = `${agreementBoxStyle} ${isAllChecked ? agreementCheckedStyle : agreementUncheckedStyle}`; return (
diff --git a/src/pages/reservation/components/SuccessStep/SuccessStep.tsx b/src/pages/reservation/components/SuccessStep/SuccessStep.tsx index 1884eb01a..af0d92c26 100644 --- a/src/pages/reservation/components/SuccessStep/SuccessStep.tsx +++ b/src/pages/reservation/components/SuccessStep/SuccessStep.tsx @@ -1,5 +1,5 @@ import { flexCustomStyle, successButtonContainer, sectionStyle } from '@/pages/reservation/components/SuccessStep/successStep.css'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; import Completion from '@/shared/components/Completion/Completion'; interface SuccessStepPropTypes { diff --git a/src/pages/reservation/components/TopInfoContent/TopInfoContent.tsx b/src/pages/reservation/components/TopInfoContent/TopInfoContent.tsx index af0fd5b53..2611ee11f 100644 --- a/src/pages/reservation/components/TopInfoContent/TopInfoContent.tsx +++ b/src/pages/reservation/components/TopInfoContent/TopInfoContent.tsx @@ -1,5 +1,5 @@ import * as styles from '@/pages/reservation/components/TopInfoContent/topInfoContent.css'; -import Head from '@/shared/components/Head/Head'; +import Head from '@/common/components/Head/Head'; interface TopInfoContentPropTypes { name: string; diff --git a/src/pages/search/Search.css.ts b/src/pages/search/Search.css.ts new file mode 100644 index 000000000..818d16eb2 --- /dev/null +++ b/src/pages/search/Search.css.ts @@ -0,0 +1,6 @@ +import { style } from '@vanilla-extract/css'; + +export const searchPageWrapperStyle = style({ + display: 'flex', +}); + diff --git a/src/pages/search/Search.tsx b/src/pages/search/Search.tsx index 27689244f..839840ce5 100644 --- a/src/pages/search/Search.tsx +++ b/src/pages/search/Search.tsx @@ -1,5 +1,6 @@ import { useState } from 'react'; import { useLocation } from 'react-router-dom'; +import { searchPageWrapperStyle } from '@/pages/search/Search.css'; import { useGetClassList, useGetDancerList } from '@/pages/search/apis/queries'; import SearchBar from '@/pages/search/components/SearchBar/SearchBar'; import TabContainer from '@/pages/search/components/TabContainer/TabContainer'; @@ -7,9 +8,8 @@ import type { TAB_TYPES } from '@/pages/search/constants/index'; import { DEFAULT_SORT_TAGS, SORT_LABELS, TAB } from '@/pages/search/constants/index'; import { formatDateEndTime, formatDateStartTime } from '@/pages/search/utils/formatDate'; import { handleSearchChange } from '@/pages/search/utils/searchHandlers'; -import Flex from '@/shared/components/Flex/Flex'; +import useDebounce from '@/common/hooks/useDebounce'; import { genreEngMapping, labelToSortOptionMap, levelEngMapping } from '@/shared/constants'; -import useDebounce from '@/shared/hooks/useDebounce'; import { useTabNavigation } from '@/shared/hooks/useTabNavigation'; import SearchHeader from './components/SearchHeader/SearchHeader'; @@ -46,7 +46,7 @@ const Search = () => { }); return ( - +
@@ -70,7 +70,7 @@ const Search = () => { selectedTab={selectedTab} setSelectedTab={setSelectedTab} /> - +
); }; diff --git a/src/pages/search/components/SearchIntro/SearchIntro.tsx b/src/pages/search/components/SearchIntro/SearchIntro.tsx index 13e19f4f8..d8632d0f9 100644 --- a/src/pages/search/components/SearchIntro/SearchIntro.tsx +++ b/src/pages/search/components/SearchIntro/SearchIntro.tsx @@ -3,9 +3,9 @@ import { contentWrapperStyle, titleWrapperStyle, } from '@/pages/search/components/SearchIntro/searchIntro.css'; +import Head from '@/common/components/Head/Head'; +import Text from '@/common/components/Text/Text'; import IcSpeaker3D from '@/shared/assets/svg/IcSpeaker3D'; -import Head from '@/shared/components/Head/Head'; -import Text from '@/shared/components/Text/Text'; const SearchIntro = () => { return ( diff --git a/src/pages/search/components/TabContainer/DancerList/DancerList.tsx b/src/pages/search/components/TabContainer/DancerList/DancerList.tsx index b2eda208b..86481b647 100644 --- a/src/pages/search/components/TabContainer/DancerList/DancerList.tsx +++ b/src/pages/search/components/TabContainer/DancerList/DancerList.tsx @@ -8,8 +8,8 @@ import { } from '@/pages/search/components/TabContainer/DancerList/dancerList.css'; import type { DancerTypes } from '@/pages/search/types/dancer'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; -import Head from '@/shared/components/Head/Head'; -import Tag from '@/shared/components/Tag/Tag'; +import Head from '@/common/components/Head/Head'; +import Tag from '@/common/components/Tag/Tag'; import { genreMapping } from '@/shared/constants/index'; import { vars } from '@/shared/styles/theme.css'; diff --git a/src/pages/search/components/TabContainer/EmptyView/EmptyView.tsx b/src/pages/search/components/TabContainer/EmptyView/EmptyView.tsx index 9fe11b914..778716b67 100644 --- a/src/pages/search/components/TabContainer/EmptyView/EmptyView.tsx +++ b/src/pages/search/components/TabContainer/EmptyView/EmptyView.tsx @@ -1,6 +1,6 @@ -import { EmptyGif } from '@/shared/assets/gif'; -import Head from '@/shared/components/Head/Head'; import { containerStyle, textWrapperStyle } from '@/pages/search/components/TabContainer/EmptyView/EmptyView.css'; +import Head from '@/common/components/Head/Head'; +import { EmptyGif } from '@/shared/assets/gif'; const EmptyView = () => { return ( diff --git a/src/pages/search/components/TabContainer/TabContainer.tsx b/src/pages/search/components/TabContainer/TabContainer.tsx index 8782348f8..f95e73a9f 100644 --- a/src/pages/search/components/TabContainer/TabContainer.tsx +++ b/src/pages/search/components/TabContainer/TabContainer.tsx @@ -13,10 +13,10 @@ import { } from '@/pages/search/components/TabContainer/tabContainer.css'; import { TAB } from '@/pages/search/constants'; import type { ClassListResponseTypes, DancerListResponseTypes } from '@/pages/search/types/api'; +import { TabButton, TabList, TabPanel, TabRoot } from '@/common/components/Tab'; +import Text from '@/common/components/Text/Text'; import IcArrowUnderGray from '@/shared/assets/svg/IcArrowUnderGray'; import IcXMain04 from '@/shared/assets/svg/IcXMain04'; -import { TabButton, TabList, TabPanel, TabRoot } from '@/shared/components/Tab'; -import Text from '@/shared/components/Text/Text'; interface TagItem { label: string; diff --git a/src/pages/search/components/TabContainer/TagSection/BottomSheet/BottomSheet.tsx b/src/pages/search/components/TabContainer/TagSection/BottomSheet/BottomSheet.tsx index 9a9a8108b..d4de8093b 100644 --- a/src/pages/search/components/TabContainer/TagSection/BottomSheet/BottomSheet.tsx +++ b/src/pages/search/components/TabContainer/TagSection/BottomSheet/BottomSheet.tsx @@ -16,9 +16,9 @@ import { levelButtonWrapperStyle, buttonWrapperStyle, } from '@/pages/search/components/TabContainer/TagSection/BottomSheet/bottomSheet.css'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; import LevelButton from '@/shared/components/LevelButton/LevelButton'; -import { TabButton, TabList, TabPanel, TabRoot } from '@/shared/components/Tab'; +import { TabButton, TabList, TabPanel, TabRoot } from '@/common/components/Tab'; import { LEVEL } from '@/shared/constants'; import { GENRE_CATEGORY } from '@/shared/constants/index'; diff --git a/src/pages/search/components/TabContainer/TagSection/Dropdown/index.tsx b/src/pages/search/components/TabContainer/TagSection/Dropdown/index.tsx index 8e2d44a51..5f3d9959e 100644 --- a/src/pages/search/components/TabContainer/TagSection/Dropdown/index.tsx +++ b/src/pages/search/components/TabContainer/TagSection/Dropdown/index.tsx @@ -1,6 +1,6 @@ import type { ButtonHTMLAttributes, ReactNode } from 'react'; import { createContext, useContext, useState } from 'react'; -import useOutsideClick from '@/shared/hooks/useOutsideClick'; +import useOutsideClick from '@/common/hooks/useOutsideClick'; import * as styles from './index.css'; interface DropdownContextPropTypes { diff --git a/src/pages/search/components/TabContainer/TagSection/TagSection.tsx b/src/pages/search/components/TabContainer/TagSection/TagSection.tsx index b02fed606..74d26381e 100644 --- a/src/pages/search/components/TabContainer/TagSection/TagSection.tsx +++ b/src/pages/search/components/TabContainer/TagSection/TagSection.tsx @@ -1,8 +1,12 @@ import { useState } from 'react'; import BottomSheet from '@/pages/search/components/TabContainer/TagSection/BottomSheet/BottomSheet'; -import { tagCustomStyle, containerStyle, tagWrapperStyle } from '@/pages/search/components/TabContainer/TagSection/tagSection.css'; +import { + tagCustomStyle, + containerStyle, + tagWrapperStyle, +} from '@/pages/search/components/TabContainer/TagSection/tagSection.css'; +import Tag from '@/common/components/Tag/Tag'; import IcFilterGray from '@/shared/assets/svg/IcFilterGray'; -import Tag from '@/shared/components/Tag/Tag'; interface TagItemTypes { label: string; diff --git a/src/queryClient.ts b/src/queryClient.ts index ab9e64b05..6ae06230b 100644 --- a/src/queryClient.ts +++ b/src/queryClient.ts @@ -1,6 +1,6 @@ import { MutationCache, QueryClient } from '@tanstack/react-query'; import { isAxiosError } from 'axios'; -import { notify } from '@/shared/components/Toast/Toast'; +import { notify } from '@/common/components/Toast/Toast'; const DEFAULT_ERROR_MESSAGE = '요청에 실패했어요.'; diff --git a/src/shared/components/BankBottomSheet/BankBottomSheet.tsx b/src/shared/components/BankBottomSheet/BankBottomSheet.tsx index d0bbb89fb..e7e652bd2 100644 --- a/src/shared/components/BankBottomSheet/BankBottomSheet.tsx +++ b/src/shared/components/BankBottomSheet/BankBottomSheet.tsx @@ -1,9 +1,9 @@ import clsx from 'clsx'; import { AnimatePresence, motion } from 'motion/react'; import { useEffect, useRef, useState } from 'react'; +import Text from '@/common/components/Text/Text'; +import useOutsideClick from '@/common/hooks/useOutsideClick'; import * as styles from '@/shared/components/BankBottomSheet/bankBottomSheet.css'; -import Text from '@/shared/components/Text/Text'; -import useOutsideClick from '@/shared/hooks/useOutsideClick'; import type { BankListResponseTypes } from '@/shared/types/api'; interface BankBottomSheetPropTypes { diff --git a/src/shared/components/ClassCard/ClassCardBody.tsx b/src/shared/components/ClassCard/ClassCardBody.tsx index 23ff13c2a..caf8f73aa 100644 --- a/src/shared/components/ClassCard/ClassCardBody.tsx +++ b/src/shared/components/ClassCard/ClassCardBody.tsx @@ -1,6 +1,9 @@ import clsx from 'clsx'; import type { GenreTypes } from '@/pages/onboarding/types/genreTypes'; import type { LevelTypes } from '@/pages/onboarding/types/levelTypes'; +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 { cardStyle, @@ -12,11 +15,8 @@ import { infoWrapperStyle, infoRowStyle, } from '@/shared/components/ClassCard/style.css'; -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'; -import { formatLessonDateRange } from '@/shared/utils/timeCalculate'; +import { formatLessonDateRange } from '@/shared/utils/date'; interface ClassCardBodyProps { name: string; diff --git a/src/shared/components/ClassCard/ClassCardFooter.tsx b/src/shared/components/ClassCard/ClassCardFooter.tsx index 84fffd6c4..f830890a5 100644 --- a/src/shared/components/ClassCard/ClassCardFooter.tsx +++ b/src/shared/components/ClassCard/ClassCardFooter.tsx @@ -1,7 +1,7 @@ import type { PropsWithChildren } from 'react'; +import Text from '@/common/components/Text/Text'; import IcArrowRightGray0614 from '@/shared/assets/svg/IcArrowRightGray0614'; import { askTextStyle, footerWrapperStyle } from '@/shared/components/ClassCard/style.css'; -import Text from '@/shared/components/Text/Text'; interface ClassCardFooterProps extends PropsWithChildren { showAsk?: boolean; diff --git a/src/shared/components/ClassCard/ClassCardHeader.tsx b/src/shared/components/ClassCard/ClassCardHeader.tsx index 963a70f94..3d320edba 100644 --- a/src/shared/components/ClassCard/ClassCardHeader.tsx +++ b/src/shared/components/ClassCard/ClassCardHeader.tsx @@ -1,13 +1,13 @@ import type { RecruitingStatus } from '@/pages/mypage/components/mypageReservation/types/recruitingStatus'; import type { ReservationStatus } from '@/pages/mypage/components/mypageReservation/types/reservationStatus'; +import Divider from '@/common/components/Divider/Divider'; +import Text from '@/common/components/Text/Text'; import SvgIcClear from '@/shared/assets/svg/IcClear'; import SvgIcMeatball from '@/shared/assets/svg/IcMeatball'; import { dividerStyle, headerWrapperStyle, headerContentStyle } from '@/shared/components/ClassCard/style.css'; -import Divider from '@/shared/components/Divider/Divider'; -import Text from '@/shared/components/Text/Text'; import { USER_ROLE } from '@/shared/constants/userRole'; import { vars } from '@/shared/styles/theme.css'; -import { formatDate } from '@/shared/utils/timeCalculate'; +import { formatDateToKR } from '@/shared/utils/date'; const memberStatus = (status: ReservationStatus) => { switch (status) { @@ -55,7 +55,7 @@ const ClassCardHeader = ({ role, status, date }: ClassCardHeaderProps) => { {statusText} {date && ( - {`${formatDate(date)} ${role === USER_ROLE.MEMBER ? '신청' : '개설'}`} + {`${formatDateToKR(date)} ${role === USER_ROLE.MEMBER ? '신청' : '개설'}`} )}
diff --git a/src/shared/components/Completion/Completion.tsx b/src/shared/components/Completion/Completion.tsx index 4c8739479..6f84d3473 100644 --- a/src/shared/components/Completion/Completion.tsx +++ b/src/shared/components/Completion/Completion.tsx @@ -1,7 +1,7 @@ +import Head from '@/common/components/Head/Head'; +import Text from '@/common/components/Text/Text'; import { ClearGif } from '@/shared/assets/gif'; import { flexCustomStyle, clearStyle, titleWrapperStyle } from '@/shared/components/Completion/completion.css'; -import Head from '@/shared/components/Head/Head'; -import Text from '@/shared/components/Text/Text'; interface CompletionPropTypes { title: string; diff --git a/src/shared/components/ErrorBoundary/FetchErrorBoundary/FetchErrorBoundary.tsx b/src/shared/components/ErrorBoundary/FetchErrorBoundary/FetchErrorBoundary.tsx index d78043e82..8109a0c3d 100644 --- a/src/shared/components/ErrorBoundary/FetchErrorBoundary/FetchErrorBoundary.tsx +++ b/src/shared/components/ErrorBoundary/FetchErrorBoundary/FetchErrorBoundary.tsx @@ -4,13 +4,13 @@ import { isAxiosError } from 'axios'; import type { ErrorInfo } from 'react'; import { Suspense, type ReactNode } from 'react'; import { ErrorBoundary, type FallbackProps } from 'react-error-boundary'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; import { errorContainerStyle, buttonContainer, } from '@/shared/components/ErrorBoundary/FetchErrorBoundary/fetchErrorBoundary.css'; -import Spinner from '@/shared/components/Spinner/Spinner'; -import Text from '@/shared/components/Text/Text'; +import Spinner from '@/common/components/Spinner/Spinner'; +import Text from '@/common/components/Text/Text'; import type { ApiError } from '@/shared/types/ApiError'; import { ERROR_LEVEL } from '@/shared/types/errorLevel'; diff --git a/src/shared/components/Flex/Flex.tsx b/src/shared/components/Flex/Flex.tsx deleted file mode 100644 index 4b7f5357e..000000000 --- a/src/shared/components/Flex/Flex.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import clsx from 'clsx'; -import type { ElementType, HTMLAttributes } from 'react'; -import { flexStyle } from '@/shared/components/Flex/flex.css'; - -interface FlexProps extends HTMLAttributes { - tag?: ElementType; - direction?: 'row' | 'column'; - align?: 'flexStart' | 'flexEnd' | 'center' | 'stretch' | 'baseline'; - justify?: 'flexStart' | 'flexEnd' | 'center' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly'; - gap?: string; - wrap?: 'nowrap' | 'wrap' | 'wrapReverse'; - grow?: 'grow0' | 'grow1'; - position?: 'static' | 'absolute' | 'relative' | 'fixed' | 'sticky'; - width?: string; - height?: string; - margin?: string; - padding?: string; - marginTop?: string; - marginBottom?: string; - marginRight?: string; - marginLeft?: string; - paddingTop?: string; - paddingBottom?: string; - paddingRight?: string; - paddingLeft?: string; - border?: string; - borderRadius?: string; - borderColor?: string; - borderWidth?: string; - borderBottom?: string; - borderTop?: string; -} - -const Flex = ({ - tag = 'div', - direction, - align, - justify, - gap, - wrap, - grow, - position, - width, - height, - margin, - padding, - marginTop, - marginBottom, - marginRight, - marginLeft, - paddingTop, - paddingBottom, - paddingRight, - paddingLeft, - border, - borderRadius, - borderColor, - borderWidth, - borderBottom, - borderTop, - children, - className, - ...props -}: FlexProps) => { - const Element = tag; - - const inlineStyles = { - position, - gap, - width, - height, - margin, - padding, - marginTop, - marginBottom, - marginRight, - marginLeft, - paddingTop, - paddingBottom, - paddingRight, - paddingLeft, - border, - borderRadius, - borderColor, - borderWidth, - borderBottom, - borderTop, - }; - - return ( - - {children} - - ); -}; - -export default Flex; diff --git a/src/shared/components/Flex/flex.css.ts b/src/shared/components/Flex/flex.css.ts deleted file mode 100644 index 0d97eaaf8..000000000 --- a/src/shared/components/Flex/flex.css.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { recipe } from '@vanilla-extract/recipes'; - -export const flexStyle = recipe({ - base: { - display: 'flex', - }, - variants: { - direction: { - row: { flexDirection: 'row' }, - column: { flexDirection: 'column' }, - }, - align: { - flexStart: { alignItems: 'flex-start' }, - flexEnd: { alignItems: 'flex-end' }, - center: { alignItems: 'center' }, - stretch: { alignItems: 'stretch' }, - baseline: { alignItems: 'baseline' }, - }, - justify: { - flexStart: { justifyContent: 'flex-start' }, - flexEnd: { justifyContent: 'flex-end' }, - center: { justifyContent: 'center' }, - spaceBetween: { justifyContent: 'space-between' }, - spaceAround: { justifyContent: 'space-around' }, - spaceEvenly: { justifyContent: 'space-evenly' }, - }, - wrap: { - nowrap: { flexWrap: 'nowrap' }, - wrap: { flexWrap: 'wrap' }, - wrapReverse: { flexWrap: 'wrap-reverse' }, - }, - grow: { - grow0: { flexGrow: 0 }, - grow1: { flexGrow: 1 }, - }, - }, - defaultVariants: { - direction: 'row', - align: 'flexStart', - justify: 'flexStart', - wrap: 'nowrap', - grow: 'grow0', - }, -}); diff --git a/src/shared/components/LevelButton/LevelButton.tsx b/src/shared/components/LevelButton/LevelButton.tsx index 75723d497..d3bf0e928 100644 --- a/src/shared/components/LevelButton/LevelButton.tsx +++ b/src/shared/components/LevelButton/LevelButton.tsx @@ -1,10 +1,10 @@ -import Head from '@/shared/components/Head/Head'; +import Head from '@/common/components/Head/Head'; +import Text from '@/common/components/Text/Text'; import { headCustomStyle, levelButtonStyle, onboardingLevelButtonStyle, } from '@/shared/components/LevelButton/levelButton.css'; -import Text from '@/shared/components/Text/Text'; interface LevelButtonProps { level: { diff --git a/src/shared/components/ProgressBar/ProgressBar.tsx b/src/shared/components/ProgressBar/ProgressBar.tsx deleted file mode 100644 index ee39c89d2..000000000 --- a/src/shared/components/ProgressBar/ProgressBar.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import clsx from 'clsx'; -import type { ComponentPropsWithoutRef } from 'react'; -import * as styles from '@/shared/components/ProgressBar/progressBar.css'; - -interface ProgressBarProps extends ComponentPropsWithoutRef<'div'> { - totalStep: number; - currentStep: number; -} - -const ProgressBar = ({ totalStep, currentStep, className }: ProgressBarProps) => { - return ( -
- {[...Array(totalStep)].map((_, index) => { - const isActive = index + 1 === Math.min(currentStep, totalStep); - return
; - })} -
- ); -}; - -export default ProgressBar; diff --git a/src/shared/components/ProgressBar/progressBar.css.ts b/src/shared/components/ProgressBar/progressBar.css.ts deleted file mode 100644 index 2123bd89e..000000000 --- a/src/shared/components/ProgressBar/progressBar.css.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { style } from '@vanilla-extract/css'; -import { recipe } from '@vanilla-extract/recipes'; -import { vars } from '@/shared/styles/theme.css'; - -export const progressBarWrapperStyle = style({ - display: 'flex', - width: '100%', - height: '0.4rem', - gap: '0.4rem', - padding: '0 2rem', -}); - -export const progressBarSegmentStyle = recipe({ - base: { - flex: 1, - height: '0.4rem', - borderRadius: '2px', - transition: 'background 0.3s', - }, - variants: { - isActive: { - true: { - backgroundColor: vars.colors.main03, - }, - false: { - backgroundColor: vars.colors.gray02, - }, - }, - }, -}); diff --git a/src/shared/components/Tab/index.tsx b/src/shared/components/Tab/index.tsx deleted file mode 100644 index 3de374e64..000000000 --- a/src/shared/components/Tab/index.tsx +++ /dev/null @@ -1,4 +0,0 @@ -export { default as TabButton } from '@/shared/components/Tab/TabButton'; -export { default as TabList } from '@/shared/components/Tab/TabList'; -export { default as TabPanel } from '@/shared/components/Tab/TabPanel'; -export { default as TabRoot } from '@/shared/components/Tab/TabRoot'; diff --git a/src/shared/hooks/useImageUploader.ts b/src/shared/hooks/useImageUploader.ts index e62b4ef7f..ea7697db8 100644 --- a/src/shared/hooks/useImageUploader.ts +++ b/src/shared/hooks/useImageUploader.ts @@ -1,7 +1,7 @@ import { useEffect, useRef, useState } from 'react'; +import { notify } from '@/common/components/Toast/Toast'; import { useImageMutation } from '@/shared/apis/queries'; import { resizeImage } from '@/shared/utils/resizeImage'; -import { notify } from '../components/Toast/Toast'; const useImageUploader = ( onSuccess: (url: string) => void, diff --git a/src/shared/hooks/useIntersectCallback.ts b/src/shared/hooks/useIntersectCallback.ts deleted file mode 100644 index 1c356d1c6..000000000 --- a/src/shared/hooks/useIntersectCallback.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { useCallback, useState } from 'react'; - -export const useIntersectCallback = (initialVisible: boolean, options?: IntersectionObserverInit) => { - const [isVisible, setIsVisible] = useState(initialVisible); - - const callback = useCallback((entries: IntersectionObserverEntry[]) => { - entries.forEach((entry) => { - setIsVisible(!entry.isIntersecting); - }); - }, []); - - const ref = useCallback( - (node: HTMLDivElement | null) => { - if (!node) return; - if (node) { - const threshold = 1 - (node.offsetHeight - 60) / node.offsetHeight; - const observer = new IntersectionObserver(callback, { ...options, threshold }); - observer.observe(node); - } - }, - [callback, options] - ); - - return [ref, isVisible] as const; -}; diff --git a/src/shared/utils/date.ts b/src/shared/utils/date.ts new file mode 100644 index 000000000..9be69d64f --- /dev/null +++ b/src/shared/utils/date.ts @@ -0,0 +1,271 @@ +// 시간을 계산, "익일" 여부를 판단 +export const calculatePeriod = (start: string, end: string) => { + const startDate = new Date(start); + const endDate = new Date(end); + + const startTime = `${startDate.getHours().toString().padStart(2, '0')}:${startDate + .getMinutes() + .toString() + .padStart(2, '0')}`; + const endTime = `${endDate.getHours().toString().padStart(2, '0')}:${endDate + .getMinutes() + .toString() + .padStart(2, '0')}`; + + const isNextDay = endDate.getDate() !== startDate.getDate(); + const formattedEndTime = isNextDay ? `익일 ${endTime}` : endTime; + + const totalMinutes = Math.abs(endDate.getTime() - startDate.getTime()) / 1000 / 60; + const hours = Math.floor(totalMinutes / 60); + const minutes = Math.ceil(totalMinutes % 60); + + const durationString = minutes > 0 ? `총 ${hours}시간 ${minutes}분` : `총 ${hours}시간`; + + return { startTime, formattedEndTime, durationString }; +}; + +// 날짜를 포맷팅 (ex. "2025년 1월 8일 수요일") +export const formatDateToKR = (dateString: string) => { + const date = new Date(dateString); + const days = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일']; + return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일 ${days[date.getDay()]}`; +}; + +// 날짜를 간단하게 포맷팅 (ex. "2025년 1월 8일 (수)") +export const formatDateToSimpleKR = (dateString: string) => { + const date = new Date(dateString); + const days = ['일', '월', '화', '수', '목', '금', '토']; + return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일 (${days[date.getDay()]})`; +}; + +// 현재를 기준으로 마감이 언젠지 계산 +export const calculateRemainingDate = (startDate: string, remainingDays: number) => { + if (remainingDays > 0) { + return `마감 D-${remainingDays}`; + } + + const startTime = new Date(startDate); + const currentTime = new Date(); + + return startTime < currentTime ? '마감' : 'D-Day'; +}; + +// 날짜 차이 계산 +export const getDateDiff = (date: string) => { + const date1 = new Date(); + const date2 = new Date(date); + + date1.setHours(0, 0, 0, 0); + date2.setHours(0, 0, 0, 0); + + const diffDate = date1.getTime() - date2.getTime(); + + return Math.abs(diffDate / (1000 * 60 * 60 * 24)); +}; + +export type ClassStatus = 'ongoing' | 'upcoming' | 'completed'; + +// 레슨 시작, 끝 시간과 현재 시간을 비교해서 클래스/레슨의 상태를 계산하는 함수 +export const getClassStatus = ( + lessonStartDateTime: string | undefined, + lessonEndDateTime: string | undefined +): { status: ClassStatus; remainingDays?: number } => { + if (!lessonStartDateTime || !lessonEndDateTime) { + // 날짜가 제공되지 않으면 기본 상태 반환 + return { status: 'completed' }; + } + + const currentTime = new Date(); + const startTime = new Date(lessonStartDateTime); + const endTime = new Date(lessonEndDateTime); + + // 유효하지 않은 날짜를 방어 + if (isNaN(startTime.getTime()) || isNaN(endTime.getTime())) { + throw new Error('Invalid date format provided for lessonStartDateTime or lessonEndDateTime'); + } + + // 날짜만 비교하기 위해 시간, 분, 초, 밀리초를 0으로 초기화 + currentTime.setHours(0, 0, 0, 0); + startTime.setHours(0, 0, 0, 0); + endTime.setHours(0, 0, 0, 0); + + if (currentTime < startTime) { + // 수강 예정 상태 + const remainingDays = Math.ceil((startTime.getTime() - currentTime.getTime()) / (1000 * 60 * 60 * 24)); + return { status: 'upcoming', remainingDays }; + } + + if (currentTime >= startTime && currentTime <= endTime) { + // 수강 중 상태 + return { status: 'ongoing' }; + } + + // 수강 완료 상태 + return { status: 'completed' }; +}; + +// 날짜를 YYYY년 MM월 DD일 형식으로 변환하는 함수 +export const formatDate = (dateString: string): string => { + const date = new Date(dateString); + const year = date.getFullYear(); + const month = date.getMonth() + 1; + const day = date.getDate(); + + return `${year}년 ${month}월 ${day}일`; +}; + +// 날짜를 YYYY-MM-DD로 변환하는 함수 +export const formatToYYYYMMDD = (date: Date) => { + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, '0'); + return `${year}-${month}-${day}`; +}; + +// 날짜를 YYYY년 MM월 DD일 HH시 MM분 SS초로 변환하는 함수 +export const formatDateToKRWithTime = (dateString: string): string => { + const date = new Date(dateString); + + const year = date.getFullYear(); + const month = date.getMonth() + 1; // 월은 0부터 시작하므로 +1 + const day = date.getDate(); + const hours = date.getHours(); + const minutes = date.getMinutes(); + const seconds = date.getSeconds(); + + // 'YYYY년 MM월 DD일 HH시 mm분 ss초' 형식으로 반환 + return `${year}년 ${month}월 ${day}일 ${hours}시 ${minutes}분 ${seconds}초`; +}; + +// 날짜를 받아서 ~~년 월 일 - ~~년 월 일로 반환하는 함수 +export const formatLessonDateRange = (lessonStartDateTime: string, lessonEndDateTime: string): string => { + const startFormatted = formatDate(lessonStartDateTime); + const endFormatted = formatDate(lessonEndDateTime); + + return `${startFormatted} - ${endFormatted}`; +}; + +// 시간 관련 상수 +export const HOURS_IN_HALF_DAY = 12; +export const MINUTES_IN_HALF_HOUR = 30; +export const FIRST_HOUR = 1; + +// 시간 증가 +export const increaseHour = (currentHour: number): number => + currentHour === HOURS_IN_HALF_DAY ? FIRST_HOUR : currentHour + 1; + +// 시간 감소 +export const decreaseHour = (currentHour: number): number => + currentHour === FIRST_HOUR ? HOURS_IN_HALF_DAY : currentHour - 1; + +// 분 증가 (30분 단위) +export const increaseMinute = ({ + currentMinute, + setHour, +}: { + currentMinute: number; + setHour: React.Dispatch>; +}): number => { + if (currentMinute === 0) { + return MINUTES_IN_HALF_HOUR; + } else if (currentMinute === MINUTES_IN_HALF_HOUR) { + setHour((prevHour) => (prevHour === HOURS_IN_HALF_DAY ? FIRST_HOUR : prevHour + 1)); + return 0; + } + return currentMinute; +}; + +// 분 감소 (30분 단위) +export const decreaseMinute = ({ + currentMinute, + setHour, +}: { + currentMinute: number; + setHour: React.Dispatch>; +}): number => { + if (currentMinute === MINUTES_IN_HALF_HOUR) { + return 0; + } else if (currentMinute === 0) { + setHour((prevHour) => (prevHour === FIRST_HOUR ? HOURS_IN_HALF_DAY : prevHour - 1)); + return MINUTES_IN_HALF_HOUR; + } + return currentMinute; +}; + +// AM/PM 토글 +export const toggleAmpm = (currentAmpm: string): string => (currentAmpm === 'AM' ? 'PM' : 'AM'); + +// 날짜에서 시간 정보를 제거 (00:00:00으로 설정) +export const getDateWithoutTime = (date: Date): Date => { + const newDate = new Date(date); + newDate.setHours(0, 0, 0, 0); + return newDate; +}; + +// 12시간 형식에서 24시간 형식으로 변환 +export const convertTo24HourFormat = (hour: number, ampm: string): number => { + if (ampm === 'PM' && hour !== HOURS_IN_HALF_DAY) { + return hour + HOURS_IN_HALF_DAY; + } else if (ampm === 'AM' && hour === HOURS_IN_HALF_DAY) { + return 0; + } + return hour; +}; + +// 시간과 분을 분 단위로 변환 +export const convertToMinutes = (hour: number, minute: number, ampm: string): number => { + const hour24 = convertTo24HourFormat(hour, ampm); + return hour24 * 60 + minute; +}; + +// 시간 간격(분)이 겹치는지 확인 +export const isTimeOverlapping = (startTime1: Date, endTime1: Date, startTime2: Date, endTime2: Date): boolean => { + return startTime1 < endTime2 && endTime1 > startTime2; +}; + +// return 형식: 12:00 AM +export const formatTimeDisplay = (hour: number, minute: number, ampm: string): string => { + return `${hour}:${minute === 0 ? '00' : minute} ${ampm}`; +}; + +export const formatToISOString = (date: string, hour: number, minute: number, ampm: string, selectedTime: number) => { + let adjustedHour = hour; + if (ampm === 'PM' && hour !== HOURS_IN_HALF_DAY) { + adjustedHour += HOURS_IN_HALF_DAY; + } else if (ampm === 'AM' && hour === HOURS_IN_HALF_DAY) { + adjustedHour = 0; + } + + const startDate = new Date(date); + startDate.setHours(adjustedHour, minute, 0, 0); + + const durationInMinutes = selectedTime * 60; + + const endDate = new Date(startDate); + endDate.setMinutes(startDate.getMinutes() + durationInMinutes); + + // 날짜를 직접 변환하여 Z를 붙이지 않도록 + const formatTime = (date: Date) => { + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, '0'); + const hours = String(date.getHours()).padStart(2, '0'); + const minutes = String(date.getMinutes()).padStart(2, '0'); + const seconds = String(date.getSeconds()).padStart(2, '0'); + const milliseconds = String(date.getMilliseconds()).padStart(3, '0'); + + return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}.${milliseconds}`; + }; + + return { + startTime: formatTime(startDate), + endTime: formatTime(endDate), + }; +}; + +export const formatDuration = (duration: number) => { + const hours = Math.floor(duration); + const minutes = Math.round((duration - hours) * 60); + + return minutes === 0 ? `총 ${hours}시간` : `총 ${hours}시간 ${minutes}분`; +}; diff --git a/src/shared/utils/dateCalculate.ts b/src/shared/utils/dateCalculate.ts deleted file mode 100644 index 01294d054..000000000 --- a/src/shared/utils/dateCalculate.ts +++ /dev/null @@ -1,50 +0,0 @@ -// 시간을 계산, "익일" 여부를 판단 -export const calculatePeriod = (start: string, end: string) => { - const startDate = new Date(start); - const endDate = new Date(end); - - const startTime = `${startDate.getHours().toString().padStart(2, '0')}:${startDate - .getMinutes() - .toString() - .padStart(2, '0')}`; - const endTime = `${endDate.getHours().toString().padStart(2, '0')}:${endDate - .getMinutes() - .toString() - .padStart(2, '0')}`; - - const isNextDay = endDate.getDate() !== startDate.getDate(); - const formattedEndTime = isNextDay ? `익일 ${endTime}` : endTime; - - const totalMinutes = Math.abs(endDate.getTime() - startDate.getTime()) / 1000 / 60; - const hours = Math.floor(totalMinutes / 60); - const minutes = Math.ceil(totalMinutes % 60); - - const durationString = minutes > 0 ? `총 ${hours}시간 ${minutes}분` : `총 ${hours}시간`; - - return { startTime, formattedEndTime, durationString }; -}; - -// 날짜를 포맷팅 (ex. "2025년 1월 8일 수요일") -export const formatDate = (dateString: string) => { - const date = new Date(dateString); - const days = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일']; - return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일 ${days[date.getDay()]}`; -}; - -export const formatSimpleDate = (dateString: string) => { - const date = new Date(dateString); - const days = ['일', '월', '화', '수', '목', '금', '토']; - return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일 (${days[date.getDay()]})`; -}; - -// 현재를 기준으로 마감이 언젠지 계산 -export const calculateRemainingDate = (startDate: string, remainingDays: number) => { - if (remainingDays > 0) { - return `마감 D-${remainingDays}`; - } - - const startTime = new Date(startDate); - const currentTime = new Date(); - - return startTime < currentTime ? '마감' : 'D-Day'; -}; diff --git a/src/shared/utils/getDateDiff.ts b/src/shared/utils/getDateDiff.ts deleted file mode 100644 index a6deeb4e4..000000000 --- a/src/shared/utils/getDateDiff.ts +++ /dev/null @@ -1,11 +0,0 @@ -export const getDateDiff = (date: string) => { - const date1 = new Date(); - const date2 = new Date(date); - - date1.setHours(0, 0, 0, 0); - date2.setHours(0, 0, 0, 0); - - const diffDate = date1.getTime() - date2.getTime(); - - return Math.abs(diffDate / (1000 * 60 * 60 * 24)); -}; diff --git a/src/shared/utils/getStatusMessage.tsx b/src/shared/utils/getStatusMessage.tsx index ff56d1a93..bb530ac3b 100644 --- a/src/shared/utils/getStatusMessage.tsx +++ b/src/shared/utils/getStatusMessage.tsx @@ -1,4 +1,4 @@ -import Text from '@/shared/components/Text/Text'; +import Text from '@/common/components/Text/Text'; import { statusMessageStyle } from '@/shared/utils/getStatusMessage.css'; type Status = 'upcoming' | 'ongoing' | 'completed'; diff --git a/src/shared/utils/timeCalculate.ts b/src/shared/utils/timeCalculate.ts deleted file mode 100644 index 57abb3c7e..000000000 --- a/src/shared/utils/timeCalculate.ts +++ /dev/null @@ -1,81 +0,0 @@ -export type ClassStatus = 'ongoing' | 'upcoming' | 'completed'; - -// 레슨 시작, 끝 시간과 현재 시간을 비교해서 클래스/레슨의 상태를 계산하는 함수 -export const getClassStatus = ( - lessonStartDateTime: string | undefined, - lessonEndDateTime: string | undefined -): { status: ClassStatus; remainingDays?: number } => { - if (!lessonStartDateTime || !lessonEndDateTime) { - // 날짜가 제공되지 않으면 기본 상태 반환 - return { status: 'completed' }; - } - - const currentTime = new Date(); - const startTime = new Date(lessonStartDateTime); - const endTime = new Date(lessonEndDateTime); - - // 유효하지 않은 날짜를 방어 - if (isNaN(startTime.getTime()) || isNaN(endTime.getTime())) { - throw new Error('Invalid date format provided for lessonStartDateTime or lessonEndDateTime'); - } - - // 날짜만 비교하기 위해 시간, 분, 초, 밀리초를 0으로 초기화 - currentTime.setHours(0, 0, 0, 0); - startTime.setHours(0, 0, 0, 0); - endTime.setHours(0, 0, 0, 0); - - if (currentTime < startTime) { - // 수강 예정 상태 - const remainingDays = Math.ceil((startTime.getTime() - currentTime.getTime()) / (1000 * 60 * 60 * 24)); - return { status: 'upcoming', remainingDays }; - } - - if (currentTime >= startTime && currentTime <= endTime) { - // 수강 중 상태 - return { status: 'ongoing' }; - } - - // 수강 완료 상태 - return { status: 'completed' }; -}; - -// 날짜를 YYYY년 MM월 DD일 형식으로 변환하는 함수 -export const formatDate = (dateString: string): string => { - const date = new Date(dateString); - const year = date.getFullYear(); - const month = date.getMonth() + 1; - const day = date.getDate(); - - return `${year}년 ${month}월 ${day}일`; -}; - -// 날짜를 YYYY-MM-DD로 변환하는 함수 -export const formatToYYYYMMDD = (date: Date) => { - const year = date.getFullYear(); - const month = String(date.getMonth() + 1).padStart(2, '0'); - const day = String(date.getDate()).padStart(2, '0'); - return `${year}-${month}-${day}`; -}; - -// 날짜를 YYYY년 MM월 DD일 HH시 MM분 SS초로 변환하는 함수 -export const formatDateTime = (dateString: string): string => { - const date = new Date(dateString); - - const year = date.getFullYear(); - const month = date.getMonth() + 1; // 월은 0부터 시작하므로 +1 - const day = date.getDate(); - const hours = date.getHours(); - const minutes = date.getMinutes(); - const seconds = date.getSeconds(); - - // 'YYYY년 MM월 DD일 HH시 mm분 ss초' 형식으로 반환 - return `${year}년 ${month}월 ${day}일 ${hours}시 ${minutes}분 ${seconds}초`; -}; - -// 날짜를 받아서 ~~년 월 일 - ~~년 월 일로 반환하는 함수 -export const formatLessonDateRange = (lessonStartDateTime: string, lessonEndDateTime: string): string => { - const startFormatted = formatDate(lessonStartDateTime); - const endFormatted = formatDate(lessonEndDateTime); - - return `${startFormatted} - ${endFormatted}`; -}; diff --git a/src/shared/utils/timeUtils.ts b/src/shared/utils/timeUtils.ts deleted file mode 100644 index 2d560b8f6..000000000 --- a/src/shared/utils/timeUtils.ts +++ /dev/null @@ -1,155 +0,0 @@ -// 시간 관련 상수 -export const HOURS_IN_HALF_DAY = 12; -export const MINUTES_IN_HALF_HOUR = 30; -export const FIRST_HOUR = 1; - -// 시간 증가 -export const increaseHour = (currentHour: number): number => - currentHour === HOURS_IN_HALF_DAY ? FIRST_HOUR : currentHour + 1; - -// 시간 감소 -export const decreaseHour = (currentHour: number): number => - currentHour === FIRST_HOUR ? HOURS_IN_HALF_DAY : currentHour - 1; - -// 분 증가 (30분 단위) -export const increaseMinute = ({ - currentMinute, - setHour, -}: { - currentMinute: number; - setHour: React.Dispatch>; -}): number => { - if (currentMinute === 0) { - return MINUTES_IN_HALF_HOUR; - } else if (currentMinute === MINUTES_IN_HALF_HOUR) { - setHour((prevHour) => (prevHour === HOURS_IN_HALF_DAY ? FIRST_HOUR : prevHour + 1)); - return 0; - } - return currentMinute; -}; - -// 분 감소 (30분 단위) -export const decreaseMinute = ({ - currentMinute, - setHour, -}: { - currentMinute: number; - setHour: React.Dispatch>; -}): number => { - if (currentMinute === MINUTES_IN_HALF_HOUR) { - return 0; - } else if (currentMinute === 0) { - setHour((prevHour) => (prevHour === FIRST_HOUR ? HOURS_IN_HALF_DAY : prevHour - 1)); - return MINUTES_IN_HALF_HOUR; - } - return currentMinute; -}; - -// AM/PM 토글 -export const toggleAmpm = (currentAmpm: string): string => (currentAmpm === 'AM' ? 'PM' : 'AM'); - -// 날짜에서 시간 정보를 제거 (00:00:00으로 설정) -export const getDateWithoutTime = (date: Date): Date => { - const newDate = new Date(date); - newDate.setHours(0, 0, 0, 0); - return newDate; -}; - -// 12시간 형식에서 24시간 형식으로 변환 -export const convertTo24HourFormat = (hour: number, ampm: string): number => { - if (ampm === 'PM' && hour !== HOURS_IN_HALF_DAY) { - return hour + HOURS_IN_HALF_DAY; - } else if (ampm === 'AM' && hour === HOURS_IN_HALF_DAY) { - return 0; - } - return hour; -}; - -// 시간과 분을 분 단위로 변환 -export const convertToMinutes = (hour: number, minute: number, ampm: string): number => { - const hour24 = convertTo24HourFormat(hour, ampm); - return hour24 * 60 + minute; -}; - -// 시간 간격(분)이 겹치는지 확인 -export const isTimeOverlapping = (startTime1: Date, endTime1: Date, startTime2: Date, endTime2: Date): boolean => { - return startTime1 < endTime2 && endTime1 > startTime2; -}; - -// 시간을 읽기 쉬운 형식으로 포맷팅 -export const formatTimeDisplay = (hour: number, minute: number, ampm: string): string => { - return `${hour}:${minute === 0 ? '00' : minute} ${ampm}`; -}; - -export const formatToISOString = (date: string, hour: number, minute: number, ampm: string, selectedTime: number) => { - let adjustedHour = hour; - if (ampm === 'PM' && hour !== HOURS_IN_HALF_DAY) { - adjustedHour += HOURS_IN_HALF_DAY; - } else if (ampm === 'AM' && hour === HOURS_IN_HALF_DAY) { - adjustedHour = 0; - } - - const startDate = new Date(date); - startDate.setHours(adjustedHour, minute, 0, 0); - - const durationInMinutes = selectedTime * 60; - - const endDate = new Date(startDate); - endDate.setMinutes(startDate.getMinutes() + durationInMinutes); - - // 날짜를 직접 변환하여 Z를 붙이지 않도록 - const formatTime = (date: Date) => { - const year = date.getFullYear(); - const month = String(date.getMonth() + 1).padStart(2, '0'); - const day = String(date.getDate()).padStart(2, '0'); - const hours = String(date.getHours()).padStart(2, '0'); - const minutes = String(date.getMinutes()).padStart(2, '0'); - const seconds = String(date.getSeconds()).padStart(2, '0'); - const milliseconds = String(date.getMilliseconds()).padStart(3, '0'); - - return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}.${milliseconds}`; - }; - - return { - startTime: formatTime(startDate), - endTime: formatTime(endDate), - }; -}; - -export const formatDuration = (duration: number) => { - const hours = Math.floor(duration); - const minutes = Math.round((duration - hours) * 60); - - return minutes === 0 ? `총 ${hours}시간` : `총 ${hours}시간 ${minutes}분`; -}; - -// 년.월.일. 시:분:초 -export const formatDateTime = (dateInput: string) => { - // 1. 입력값을 바탕으로 Date 객체를 생성합니다. - const date = new Date(dateInput); - - // 2. 생성된 Date 객체가 유효한지 확인합니다. - // isNaN(date) 또는 isNaN(date.getTime())으로 확인할 수 있습니다. - if (isNaN(date.getTime())) { - return '유효하지 않은 날짜입니다.'; - } - - // 3. 연, 월, 일, 시, 분, 초를 각각 추출합니다. - const year = date.getFullYear(); - // getMonth()는 0부터 시작하므로 (0=1월), 1을 더해줍니다. - const month = date.getMonth() + 1; - const day = date.getDate(); - const hours = date.getHours(); - const minutes = date.getMinutes(); - const seconds = date.getSeconds(); - - // 4. 월, 일, 시, 분, 초가 한 자리 수일 경우 앞에 '0'을 붙여줍니다. (예: 1 -> "01") - const paddedMonth = String(month).padStart(2, '0'); - const paddedDay = String(day).padStart(2, '0'); - const paddedHours = String(hours).padStart(2, '0'); - const paddedMinutes = String(minutes).padStart(2, '0'); - const paddedSeconds = String(seconds).padStart(2, '0'); - - // 5. 최종 형식에 맞게 문자열을 조합하여 반환합니다. - return `${year}. ${paddedMonth}. ${paddedDay}. ${paddedHours}:${paddedMinutes}:${paddedSeconds}`; -}; diff --git a/src/shared/utils/transformDateToDotFormat.ts b/src/shared/utils/transformDateToDotFormat.ts deleted file mode 100644 index 6f99c02be..000000000 --- a/src/shared/utils/transformDateToDotFormat.ts +++ /dev/null @@ -1,9 +0,0 @@ -export const transformDateToDotFormat = (dateString: string) => { - const date = new Date(dateString); - - const year = date.getFullYear(); - const month = String(date.getMonth() + 1).padStart(2, '0'); - const day = String(date.getDate()).padStart(2, '0'); - - return `${year}.${month}.${day}`; -}; diff --git a/src/stories/ClassCard.stories.tsx b/src/stories/ClassCard.stories.tsx index d964ebbea..6304c70b4 100644 --- a/src/stories/ClassCard.stories.tsx +++ b/src/stories/ClassCard.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import type { ComponentProps } from 'react'; import type { GenreTypes } from '@/pages/onboarding/types/genreTypes'; import type { LevelTypes } from '@/pages/onboarding/types/levelTypes'; -import BoxButton from '@/shared/components/BoxButton/BoxButton'; +import BoxButton from '@/common/components/BoxButton/BoxButton'; import ClassCard from '@/shared/components/ClassCard'; import { USER_ROLE } from '@/shared/constants/userRole'; diff --git a/src/stories/ProgressBar.stories.tsx b/src/stories/ProgressBar.stories.tsx deleted file mode 100644 index 312d7d6a9..000000000 --- a/src/stories/ProgressBar.stories.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import ProgressBar from '@/shared/components/ProgressBar/ProgressBar'; - -const meta = { - title: 'Common/ProgressBar', - component: ProgressBar, - parameters: { - layout: 'centered', - }, - tags: ['autodocs'], - argTypes: { - totalStep: { - control: { type: 'number' }, - description: 'Total number of steps in the progress bar', - defaultValue: 5, - }, - currentStep: { - control: { type: 'number' }, - description: 'Current active step in the progress bar', - defaultValue: 1, - }, - }, -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const totalFiveStep: Story = { - args: { - totalStep: 5, - currentStep: 1, - }, -}; - -export const totalFourStep: Story = { - args: { - totalStep: 4, - currentStep: 1, - }, -};