From 36458348e291c322a8e37539d45809871869feb6 Mon Sep 17 00:00:00 2001 From: Jeon Eonseok Date: Wed, 28 Aug 2024 15:35:19 +0900 Subject: [PATCH 01/11] =?UTF-8?q?refactor:=20device=20type=20provider=20co?= =?UTF-8?q?mponent=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 9 +++------ src/contexts/DeviceTypeProvider.tsx | 30 +++++++++++++++++++++++++++++ 2 files changed, 33 insertions(+), 6 deletions(-) create mode 100644 src/contexts/DeviceTypeProvider.tsx diff --git a/src/App.tsx b/src/App.tsx index e164e54c..68b075df 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,10 +8,9 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import { RouterProvider, createBrowserRouter } from 'react-router-dom'; import Layout from '@components/Layout'; -import { useDevice } from '@hooks/useDevice'; -import { DeviceTypeContext } from '@store/deviceTypeContext'; import { RecruitingInfoContext, RecruitingInfoType } from '@store/recruitingInfoContext'; import { ModeType, ThemeContext } from '@store/themeContext'; +import DeviceTypeProvider from 'contexts/DeviceTypeProvider'; import { dark, light } from 'styles/theme.css'; import { SessionExpiredDialog } from 'views/dialogs'; import ErrorPage from 'views/ErrorPage'; @@ -110,8 +109,6 @@ const App = () => { }, []), }; - const deviceType = useDevice(); - useEffect(() => { if (!isAmplitudeInitialized) { init(import.meta.env.VITE_AMPLITUDE_API_KEY); @@ -131,7 +128,7 @@ const App = () => { <> - + @@ -140,7 +137,7 @@ const App = () => { - + ); diff --git a/src/contexts/DeviceTypeProvider.tsx b/src/contexts/DeviceTypeProvider.tsx new file mode 100644 index 00000000..d459967d --- /dev/null +++ b/src/contexts/DeviceTypeProvider.tsx @@ -0,0 +1,30 @@ +import { createContext, type ReactNode, useContext } from 'react'; + +import { useDevice } from '@hooks/useDevice'; + +export interface DeviceTypeContextType { + deviceType: 'DESK' | 'TAB' | 'MOB'; +} + +export const DeviceTypeContext = createContext({ + deviceType: 'DESK', +}); + +// eslint-disable-next-line react-refresh/only-export-components +export const useDeviceType = () => { + const deviceType = useContext(DeviceTypeContext); + + if (!deviceType) { + throw new Error('DeviceTypeContext must be called from within an DeviceTypeProvider'); + } + + return deviceType; +}; + +const DeviceTypeProvider = ({ children }: { children: ReactNode }) => { + const deviceType = useDevice(); + + return {children}; +}; + +export default DeviceTypeProvider; From 22936a70e72fe0f28b4b2d9a3eef4c2d1515d560 Mon Sep 17 00:00:00 2001 From: Jeon Eonseok Date: Wed, 28 Aug 2024 15:51:53 +0900 Subject: [PATCH 02/11] =?UTF-8?q?chore:=20alias=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tsconfig.json | 2 +- vite.config.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index e55ed2fe..ba9875f0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -31,7 +31,7 @@ "@store/*": ["common/store/*"], "@type/*": ["common/type/*"], "@utils/*": ["common/utils/*"], - "pages/*": ["pages/*"], + "contexts/*": ["contexts/*"], "styles/*": ["styles/*"], "views/*": ["views/*"] } diff --git a/vite.config.ts b/vite.config.ts index 40690ac6..57e951d2 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -35,7 +35,7 @@ export default defineConfig({ find: '@utils', replacement: path.resolve(__dirname, 'src/common/utils'), }, - { find: 'pages', replacement: path.resolve(__dirname, 'src/pages') }, + { find: 'contexts', replacement: path.resolve(__dirname, 'src/contexts') }, { find: 'styles', replacement: path.resolve(__dirname, 'src/styles') }, { find: 'views', replacement: path.resolve(__dirname, 'src/views') }, ], From dd4ff9b6d4d3967a0b9fa798e39deaf57203f5b7 Mon Sep 17 00:00:00 2001 From: Jeon Eonseok Date: Wed, 28 Aug 2024 15:52:18 +0900 Subject: [PATCH 03/11] =?UTF-8?q?refactor:=20useDeviceType=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/components/Button/index.tsx | 6 +++--- src/common/components/Callout/index.tsx | 6 +++--- src/common/components/Dialog/index.tsx | 6 +++--- .../components/Input/components/Description/index.tsx | 6 ++---- .../components/Input/components/InputButton/index.tsx | 6 ++---- .../components/Input/components/InputLine/index.tsx | 4 ++-- .../components/Input/components/InputTheme/index.tsx | 8 ++++---- src/common/components/Input/components/TextBox/index.tsx | 6 +++--- src/common/components/Input/components/Timer/index.tsx | 6 +++--- .../Layout/components/Header/Nav/MenuItem/index.tsx | 5 ++--- .../Layout/components/Header/Nav/MenuList/index.tsx | 4 ++-- .../components/Layout/components/Header/Nav/index.tsx | 4 ++-- src/common/components/Layout/components/Header/index.tsx | 4 ++-- src/common/components/Select/index.tsx | 6 +++--- src/common/components/Textarea/components/Input/index.tsx | 6 +++--- src/common/components/Textarea/components/Label/index.tsx | 6 +++--- src/common/components/Title/index.tsx | 6 +++--- src/views/ApplyPage/components/ApplyCategory/index.tsx | 6 +++--- src/views/ApplyPage/components/ApplyHeader/index.tsx | 4 ++-- src/views/ApplyPage/components/ApplyInfo/index.tsx | 4 ++-- src/views/ApplyPage/components/BottomSection/index.tsx | 4 ++-- src/views/ApplyPage/components/CommonSection/index.tsx | 6 ++---- src/views/ApplyPage/components/DefaultSection/index.tsx | 6 +++--- src/views/ApplyPage/components/FileInput/index.tsx | 6 +++--- src/views/ApplyPage/components/Info/index.tsx | 6 ++---- src/views/ApplyPage/components/LinkInput/index.tsx | 6 ++---- src/views/ApplyPage/components/PartSection/index.tsx | 5 ++--- src/views/ApplyPage/index.tsx | 6 +++--- src/views/CompletePage/components/Survey.tsx | 6 +++--- src/views/CompletePage/index.tsx | 4 ++-- src/views/ErrorPage/components/ErrorCode/index.tsx | 6 ++---- src/views/ErrorPage/components/NoMore/index.tsx | 5 ++--- src/views/ErrorPage/index.tsx | 5 ++--- src/views/MyPage/index.tsx | 8 ++++---- src/views/PasswordPage/index.tsx | 6 ++---- src/views/ResultPage/components/FinalResult.tsx | 6 +++--- src/views/ResultPage/components/ScreeningResult.tsx | 6 +++--- src/views/ReviewPage/index.tsx | 4 ++-- src/views/SignInPage/components/SignInInfo/index.tsx | 4 ++-- src/views/SignInPage/index.tsx | 6 ++---- src/views/SignupPage/index.tsx | 6 ++---- src/views/dialogs/CompleteDialog/index.tsx | 6 +++--- src/views/dialogs/DraftDialog/index.tsx | 6 +++--- src/views/dialogs/ExistingApplicantDialog/index.tsx | 6 +++--- src/views/dialogs/ExitDialog/index.tsx | 6 +++--- src/views/dialogs/PreventApplyDialog/index.tsx | 6 +++--- src/views/dialogs/PreventReviewDialog/index.tsx | 6 +++--- src/views/dialogs/SessionExpiredDialog/index.tsx | 6 +++--- src/views/dialogs/SubmitDialog/index.tsx | 6 +++--- 49 files changed, 126 insertions(+), 148 deletions(-) diff --git a/src/common/components/Button/index.tsx b/src/common/components/Button/index.tsx index 48430d18..80ae6874 100644 --- a/src/common/components/Button/index.tsx +++ b/src/common/components/Button/index.tsx @@ -1,7 +1,7 @@ -import { useContext, useId, type ButtonHTMLAttributes, type ReactNode } from 'react'; +import { useId, type ButtonHTMLAttributes, type ReactNode } from 'react'; import { Link, To } from 'react-router-dom'; -import { DeviceTypeContext } from '@store/deviceTypeContext'; +import { useDeviceType } from 'contexts/DeviceTypeProvider'; import ButtonLoading from 'views/loadings/ButtonLoading'; import { buttonFontVar, container, outsideBox, paddings } from './style.css'; @@ -26,7 +26,7 @@ const Button = ({ isLink = false, ...buttonElementProps }: ButtonProps) => { - const { deviceType } = useContext(DeviceTypeContext); + const { deviceType } = useDeviceType(); const { disabled, type = 'button' } = buttonElementProps; const Tag = isLink ? Link : 'button'; diff --git a/src/common/components/Callout/index.tsx b/src/common/components/Callout/index.tsx index f2de0556..a23d1cf1 100644 --- a/src/common/components/Callout/index.tsx +++ b/src/common/components/Callout/index.tsx @@ -1,8 +1,8 @@ import { colors } from '@sopt-makers/colors'; import { IconAlertCircle } from '@sopt-makers/icons'; -import { useContext, type HTMLAttributes, type ReactNode } from 'react'; +import { type HTMLAttributes, type ReactNode } from 'react'; -import { DeviceTypeContext } from '@store/deviceTypeContext'; +import { useDeviceType } from 'contexts/DeviceTypeProvider'; import { buttonVar, container, warningWrapperVar } from './style.css'; @@ -13,7 +13,7 @@ interface CalloutProps extends HTMLAttributes { } const Callout = ({ children, size = 'sm', Button, ...calloutElementProps }: CalloutProps) => { - const { deviceType } = useContext(DeviceTypeContext); + const { deviceType } = useDeviceType(); return (
diff --git a/src/common/components/Dialog/index.tsx b/src/common/components/Dialog/index.tsx index b4a23bdb..43af777c 100644 --- a/src/common/components/Dialog/index.tsx +++ b/src/common/components/Dialog/index.tsx @@ -1,7 +1,7 @@ -import { forwardRef, useContext, type DialogHTMLAttributes, type ReactNode } from 'react'; +import { forwardRef, type DialogHTMLAttributes, type ReactNode } from 'react'; import { createPortal } from 'react-dom'; -import { DeviceTypeContext } from '@store/deviceTypeContext'; +import { useDeviceType } from 'contexts/DeviceTypeProvider'; import { containerVar } from './style.css'; @@ -10,7 +10,7 @@ interface DialogProps extends DialogHTMLAttributes { } const Dialog = forwardRef(({ children, ...dialogElementProps }: DialogProps, ref) => { - const { deviceType } = useContext(DeviceTypeContext); + const { deviceType } = useDeviceType(); return createPortal( diff --git a/src/common/components/Input/components/Description/index.tsx b/src/common/components/Input/components/Description/index.tsx index 0101107f..c2df2691 100644 --- a/src/common/components/Input/components/Description/index.tsx +++ b/src/common/components/Input/components/Description/index.tsx @@ -1,13 +1,11 @@ -import { useContext } from 'react'; - import { TextBoxProps } from '@components/Input/types'; -import { DeviceTypeContext } from '@store/deviceTypeContext'; +import { useDeviceType } from 'contexts/DeviceTypeProvider'; import { descriptionFontVar, descriptionVar } from './style.css'; // TextBox 내부 Input 하단의 부가텍스트 const Description = ({ children, styleType = 'default' }: Pick) => { - const { deviceType } = useContext(DeviceTypeContext); + const { deviceType } = useDeviceType(); return
{children}
; }; diff --git a/src/common/components/Input/components/InputButton/index.tsx b/src/common/components/Input/components/InputButton/index.tsx index b7208dcb..8914cf79 100644 --- a/src/common/components/Input/components/InputButton/index.tsx +++ b/src/common/components/Input/components/InputButton/index.tsx @@ -1,14 +1,12 @@ -import { useContext } from 'react'; - import Button from '@components/Button'; -import { DeviceTypeContext } from '@store/deviceTypeContext'; +import { useDeviceType } from 'contexts/DeviceTypeProvider'; import { buttonVar } from './style.css'; import { InputButtonProps } from './types'; // TextBox 내부 InputLine 우측 버튼 const InputButton = ({ isLoading, text, ...props }: InputButtonProps) => { - const { deviceType } = useContext(DeviceTypeContext); + const { deviceType } = useDeviceType(); return (