From dbd0713a2b008a4b6c4aa9efaeb725d53658ee47 Mon Sep 17 00:00:00 2001 From: Eonseok Jeon <121864459+eonseok-jeon@users.noreply.github.com> Date: Sat, 17 Aug 2024 20:46:31 +0900 Subject: [PATCH 1/6] =?UTF-8?q?[Fix]=20=EC=A0=84=EC=B2=B4=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EA=B6=8C=EC=9E=A5=20=EC=A0=9C=EA=B1=B0=20(#409)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 지원서 다시보기 누를 시 alert 뜨는 거 제거 * chore: 안 쓰는 코드 제거 --- src/views/MyPage/index.tsx | 25 +++++++------------------ 1 file changed, 7 insertions(+), 18 deletions(-) diff --git a/src/views/MyPage/index.tsx b/src/views/MyPage/index.tsx index 0562bc5c..23590390 100644 --- a/src/views/MyPage/index.tsx +++ b/src/views/MyPage/index.tsx @@ -1,5 +1,5 @@ import { track } from '@amplitude/analytics-browser'; -import { MouseEvent, useContext } from 'react'; +import { useContext } from 'react'; import Button from '@components/Button'; import Callout from '@components/Callout'; @@ -35,26 +35,15 @@ const MyInfoItem = ({ label, value }: { label: string; value?: string | number | const StatusButton = ({ label, to, trackingEvent }: { label: string; to: string; trackingEvent: string }) => { const deviceType = useDevice(); - const handlePreventMobile = (e: MouseEvent) => { - track(trackingEvent); - if (label === '지원상태') return; - - const isMobile = /Mobi/i.test(window.navigator.userAgent); - if (isMobile) { - alert('PC로 이용해주세요.'); - e.preventDefault(); - return; - } - if (deviceType !== 'DESK') { - alert('전체화면 이용을 권장드려요.'); - return; - } - }; - return (
  • {label} -
    • From 0dbd2e67ff3488dbae6151663b0380f1c3107e96 Mon Sep 17 00:00:00 2001 From: Eonseok Jeon <121864459+eonseok-jeon@users.noreply.github.com> Date: Sat, 17 Aug 2024 20:48:10 +0900 Subject: [PATCH 2/6] =?UTF-8?q?[Fix]=20deviceType=20undefined=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=EB=9C=A8=EB=8A=94=20=EC=9D=B4=EC=8A=88=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0=20(#411)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: device type context 생성 * refactor: form context에서 device type 제거 * feat: device type context provider 감싸주기 * refactor: 기존 Form context의 deviceType을 DeviceType context의 deviceType으로 대체 * refactor: device type context 적용 --- src/App.tsx | 22 ++++++++++++------- src/common/components/Button/index.tsx | 6 ++--- src/common/components/Callout/index.tsx | 7 +++--- src/common/components/Dialog/index.tsx | 6 ++--- .../Input/components/Description/index.tsx | 4 ++-- .../Input/components/InputButton/index.tsx | 4 ++-- .../Input/components/InputLine/index.tsx | 5 ++++- .../Input/components/InputTheme/index.tsx | 6 ++--- .../Input/components/TextBox/index.tsx | 10 ++++----- .../Input/components/Timer/index.tsx | 5 +++-- .../components/Header/Nav/MenuItem/index.tsx | 5 +++-- .../components/Header/Nav/MenuList/index.tsx | 4 ++-- .../Layout/components/Header/Nav/index.tsx | 4 ++-- .../Layout/components/Header/index.tsx | 4 ++-- src/common/components/Select/index.tsx | 6 ++--- .../Textarea/components/Input/index.tsx | 6 ++--- .../Textarea/components/Label/index.tsx | 6 ++--- src/common/components/Title/index.tsx | 6 ++--- src/common/store/deviceTypeContext.ts | 9 ++++++++ .../components/ApplyCategory/index.tsx | 6 ++--- .../components/ApplyHeader/index.tsx | 4 ++-- .../ApplyPage/components/ApplyInfo/index.tsx | 4 ++-- .../components/BottomSection/index.tsx | 4 ++-- .../components/CommonSection/index.tsx | 6 +++-- .../components/DefaultSection/index.tsx | 6 ++--- .../ApplyPage/components/FileInput/index.tsx | 6 ++--- src/views/ApplyPage/components/Info/index.tsx | 6 +++-- .../ApplyPage/components/LinkInput/index.tsx | 6 +++-- .../components/PartSection/index.tsx | 5 +++-- src/views/ApplyPage/index.tsx | 6 ++--- src/views/CompletePage/components/Survey.tsx | 6 ++--- src/views/CompletePage/index.tsx | 4 ++-- .../ErrorPage/components/ErrorCode/index.tsx | 6 +++-- .../ErrorPage/components/NoMore/index.tsx | 5 +++-- src/views/ErrorPage/index.tsx | 5 +++-- src/views/MyPage/index.tsx | 8 +++---- src/views/PasswordPage/index.tsx | 6 +++-- .../ResultPage/components/FinalResult.tsx | 6 ++--- .../ResultPage/components/ScreeningResult.tsx | 6 ++--- src/views/ReviewPage/index.tsx | 4 ++-- .../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 ++--- .../dialogs/ExistingApplicantDialog/index.tsx | 6 ++--- src/views/dialogs/ExitDialog/index.tsx | 6 ++--- .../dialogs/PreventApplyDialog/index.tsx | 6 ++--- .../dialogs/PreventReviewDialog/index.tsx | 6 ++--- .../dialogs/SessionExpiredDialog/index.tsx | 6 ++--- src/views/dialogs/SubmitDialog/index.tsx | 6 ++--- 51 files changed, 170 insertions(+), 134 deletions(-) create mode 100644 src/common/store/deviceTypeContext.ts diff --git a/src/App.tsx b/src/App.tsx index 8739cd47..cbd36b76 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,6 +9,8 @@ import { HelmetProvider } from 'react-helmet-async'; 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 { dark, light } from 'styles/theme.css'; @@ -109,6 +111,8 @@ const App = () => { }, []), }; + const deviceType = useDevice(); + useEffect(() => { if (!isAmplitudeInitialized) { init(import.meta.env.VITE_AMPLITUDE_API_KEY); @@ -129,14 +133,16 @@ const App = () => { - - - -
    - -
    -     -     + + + + +
    + +
    +     +     +     diff --git a/src/common/components/Button/index.tsx b/src/common/components/Button/index.tsx index 9c5c207b..48430d18 100644 --- a/src/common/components/Button/index.tsx +++ b/src/common/components/Button/index.tsx @@ -1,7 +1,7 @@ -import { useId, type ButtonHTMLAttributes, type ReactNode } from 'react'; +import { useContext, useId, type ButtonHTMLAttributes, type ReactNode } from 'react'; import { Link, To } from 'react-router-dom'; -import { useDevice } from '@hooks/useDevice'; +import { DeviceTypeContext } from '@store/deviceTypeContext'; 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 = useDevice(); + const { deviceType } = useContext(DeviceTypeContext); 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 a611d86c..f2de0556 100644 --- a/src/common/components/Callout/index.tsx +++ b/src/common/components/Callout/index.tsx @@ -1,12 +1,11 @@ import { colors } from '@sopt-makers/colors'; import { IconAlertCircle } from '@sopt-makers/icons'; +import { useContext, type HTMLAttributes, type ReactNode } from 'react'; -import { useDevice } from '@hooks/useDevice'; +import { DeviceTypeContext } from '@store/deviceTypeContext'; import { buttonVar, container, warningWrapperVar } from './style.css'; -import type { HTMLAttributes, ReactNode } from 'react'; - interface CalloutProps extends HTMLAttributes { children?: ReactNode; size?: 'sm' | 'lg'; @@ -14,7 +13,7 @@ interface CalloutProps extends HTMLAttributes { } const Callout = ({ children, size = 'sm', Button, ...calloutElementProps }: CalloutProps) => { - const deviceType = useDevice(); + const { deviceType } = useContext(DeviceTypeContext); return (
    diff --git a/src/common/components/Dialog/index.tsx b/src/common/components/Dialog/index.tsx index 492183a5..b4a23bdb 100644 --- a/src/common/components/Dialog/index.tsx +++ b/src/common/components/Dialog/index.tsx @@ -1,7 +1,7 @@ -import { forwardRef, type DialogHTMLAttributes, type ReactNode } from 'react'; +import { forwardRef, useContext, type DialogHTMLAttributes, type ReactNode } from 'react'; import { createPortal } from 'react-dom'; -import { useDevice } from '@hooks/useDevice'; +import { DeviceTypeContext } from '@store/deviceTypeContext'; import { containerVar } from './style.css'; @@ -10,7 +10,7 @@ interface DialogProps extends DialogHTMLAttributes { } const Dialog = forwardRef(({ children, ...dialogElementProps }: DialogProps, ref) => { - const deviceType = useDevice(); + const { deviceType } = useContext(DeviceTypeContext); return createPortal( diff --git a/src/common/components/Input/components/Description/index.tsx b/src/common/components/Input/components/Description/index.tsx index b18a0bbf..0101107f 100644 --- a/src/common/components/Input/components/Description/index.tsx +++ b/src/common/components/Input/components/Description/index.tsx @@ -1,13 +1,13 @@ import { useContext } from 'react'; import { TextBoxProps } from '@components/Input/types'; +import { DeviceTypeContext } from '@store/deviceTypeContext'; import { descriptionFontVar, descriptionVar } from './style.css'; -import { FormContext } from '../TextBox'; // TextBox 내부 Input 하단의 부가텍스트 const Description = ({ children, styleType = 'default' }: Pick) => { - const { deviceType } = useContext(FormContext); + const { deviceType } = useContext(DeviceTypeContext); return
    {children}
    ; }; diff --git a/src/common/components/Input/components/InputButton/index.tsx b/src/common/components/Input/components/InputButton/index.tsx index 34417a7b..b7208dcb 100644 --- a/src/common/components/Input/components/InputButton/index.tsx +++ b/src/common/components/Input/components/InputButton/index.tsx @@ -1,14 +1,14 @@ import { useContext } from 'react'; import Button from '@components/Button'; +import { DeviceTypeContext } from '@store/deviceTypeContext'; import { buttonVar } from './style.css'; import { InputButtonProps } from './types'; -import { FormContext } from '../TextBox'; // TextBox 내부 InputLine 우측 버튼 const InputButton = ({ isLoading, text, ...props }: InputButtonProps) => { - const { deviceType } = useContext(FormContext); + const { deviceType } = useContext(DeviceTypeContext); return (