refactor: 기존 Form context의 deviceType을 DeviceType context의 deviceType…

…으로 대체
sopt-makers · Aug 17, 2024 · d36749a · d36749a
1 parent 501afe7
commit d36749a
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 11 deletions.
diff --git 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<TextBoxProps, 'children' | 'styleType'>) => {
- const { deviceType } = useContext(FormContext);
+ const { deviceType } = useContext(DeviceTypeContext);
 
  return <div className={`${descriptionVar[styleType]} ${descriptionFontVar[deviceType]}`}>{children}</div>;
 };

diff --git 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 (
  <Button isLoading={isLoading} className={buttonVar[deviceType]} {...props}>
  {text}

diff --git a/src/common/components/Input/components/InputLine/index.tsx b/src/common/components/Input/components/InputLine/index.tsx
@@ -1,6 +1,8 @@
 import { ChangeEvent, useContext } from 'react';
 import { useFormContext } from 'react-hook-form';
 
+import { DeviceTypeContext } from '@store/deviceTypeContext';
+
 import { inputFontVar, inputLineVar, inputVar } from './style.css';
 import { formatBirthdate } from './utils/formatBirthdate';
 import { formatPhoneNumber } from './utils/formatPhoneNumber';
@@ -24,7 +26,8 @@ const InputLine = ({
  trigger,
  setValue,
  } = useFormContext();
- const { required, deviceType } = useContext(FormContext);
+ const { required } = useContext(FormContext);
+ const { deviceType } = useContext(DeviceTypeContext);
  const { maxLength, minLength } = inputElementProps;
  const { defaultValue } = inputElementProps;
 

diff --git a/src/common/components/Input/components/InputTheme/index.tsx b/src/common/components/Input/components/InputTheme/index.tsx
@@ -9,10 +9,10 @@ import useMutateCheckUser from '@components/Input/hooks/useMutateCheckUser';
 import useMutateSendCode from '@components/Input/hooks/useMutateSendCode';
 import { VALIDATION_CHECK } from '@constants/validationCheck';
 import useScrollToHash from '@hooks/useScrollToHash';
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 
 import { successVar } from './style.css';
 import InputLine from '../InputLine';
-import { FormContext } from '../TextBox';
 
 export const TextBox이름 = () => {
  return (
@@ -40,7 +40,7 @@ export const TextBox이메일 = ({
  isVerified,
  onChangeVerification,
 }: TextBox이메일Props) => {
- const { deviceType } = useContext(FormContext);
+ const { deviceType } = useContext(DeviceTypeContext);
  const location = useLocation();
  const navigate = useNavigate();
 
@@ -188,7 +188,7 @@ export const TextBox이메일 = ({
 };
 
 export const TextBox비밀번호 = () => {
- const { deviceType } = useContext(FormContext);
+ const { deviceType } = useContext(DeviceTypeContext);
 
  const location = useLocation();
  const textVar = location.pathname === '/password' ? '새 비밀번호' : '비밀번호';

diff --git a/src/common/components/Input/components/TextBox/index.tsx b/src/common/components/Input/components/TextBox/index.tsx
@@ -1,6 +1,7 @@
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 
 import { TextBoxProps } from '@components/Input/types';
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 
 import { circle, containerVar, titleVar } from './style.css';
 
@@ -14,6 +15,8 @@ export const TextBox = ({
  size = 'md',
  required,
 }: Pick<TextBoxProps, 'children' | 'label' | 'name' | 'size' | 'required'>) => {
+ const { deviceType } = useContext(DeviceTypeContext);
+
  return (
  <FormContext.Provider value={{ required }}>
  <div className={containerVar[deviceType === 'DESK' ? size : deviceType]}>

diff --git a/src/common/components/Input/components/Timer/index.tsx b/src/common/components/Input/components/Timer/index.tsx
@@ -1,16 +1,17 @@
 import { differenceInSeconds } from 'date-fns';
 import { useContext, useEffect, useState } from 'react';
 
+import { DeviceTypeContext } from '@store/deviceTypeContext';
+
 import { timerVar } from './style.css';
 import { TimerProps } from './types';
 import formatTimer from './utils/formatTimer';
-import { FormContext } from '../TextBox';
 
 const INITIAL_TIME = 300;
 
 // TextBox 내부 타이머
 const Timer = ({ isActive, onResetTimer }: TimerProps) => {
- const { deviceType } = useContext(FormContext);
+ const { deviceType } = useContext(DeviceTypeContext);
  const [seconds, setSeconds] = useState(INITIAL_TIME - 1);
 
  useEffect(() => {