refactor: device type context 적용

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';
 

src/common/components/Callout/index.tsx

@@ -1,20 +1,19 @@
 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<HTMLElement> {
  children?: ReactNode;
  size?: 'sm' | 'lg';
  Button?: ReactNode;
 }
 
 const Callout = ({ children, size = 'sm', Button, ...calloutElementProps }: CalloutProps) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
  return (
  <article className={container[deviceType === 'DESK' ? size : deviceType]} {...calloutElementProps}>
  <div className={warningWrapperVar[deviceType]}>

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<HTMLDialogElement> {
 }
 
 const Dialog = forwardRef<HTMLDialogElement, DialogProps>(({ children, ...dialogElementProps }: DialogProps, ref) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
 
  return createPortal(
  <dialog ref={ref} className={containerVar[deviceType]} {...dialogElementProps}>

src/common/components/Layout/components/Header/Nav/MenuItem/index.tsx

@@ -1,7 +1,8 @@
 import { track } from '@amplitude/analytics-browser';
+import { useContext } from 'react';
 import { NavLink } from 'react-router-dom';
 
-import { useDevice } from '@hooks/useDevice';
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 
 import { menuItemVar, menuLinkVar } from './style.css';
 
@@ -15,7 +16,7 @@ interface MenuItemProps {
 }
 
 const MenuItem = ({ text, path, target, amplitudeId, className, onClick }: MenuItemProps) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
 
  return (
  <li className={`${className} ${menuItemVar[deviceType]}`}>

src/common/components/Layout/components/Header/Nav/MenuList/index.tsx

@@ -2,15 +2,15 @@ import { reset, track } from '@amplitude/analytics-browser';
 import { useContext, useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { useDevice } from '@hooks/useDevice';
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 import { RecruitingInfoContext } from '@store/recruitingInfoContext';
 
 import { dimmedBgVar, menuContainerVar, menuList, menuMobListVar } from './style.css';
 import { MENU_ITEMS, MENU_ITEMS_MAKERS } from '../../contants';
 import MenuItem from '../MenuItem';
 
 const MenuList = ({ isMenuOpen, onClickMenuToggle }: { isMenuOpen?: boolean; onClickMenuToggle?: () => void }) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
  const navigate = useNavigate();
  const { pathname } = useLocation();
  const [isShown, setIsShown] = useState(isMenuOpen);

src/common/components/Layout/components/Header/Nav/index.tsx

@@ -1,15 +1,15 @@
 import { IconMenu, IconXClose } from '@sopt-makers/icons';
 import { useContext } from 'react';
 
-import { useDevice } from '@hooks/useDevice';
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 import { ThemeContext } from '@store/themeContext';
 import { theme } from 'styles/theme.css';
 
 import MenuList from './MenuList';
 import { menuIconVar } from './style.css';
 
 const Nav = ({ isMenuOpen, onClickMenuToggle }: { isMenuOpen: boolean; onClickMenuToggle: () => void }) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
  const { isLight } = useContext(ThemeContext);
 
  return deviceType !== 'DESK' ? (

src/common/components/Layout/components/Header/index.tsx

@@ -4,7 +4,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import MakersDarkLogo from '@assets/MakersDarkLogo';
 import MakersLogo from '@assets/MakersLogo';
 import NowsoptLogo from '@assets/NowsoptLogo';
-import { useDevice } from '@hooks/useDevice';
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 import { RecruitingInfoContext } from '@store/recruitingInfoContext';
 import { ThemeContext } from '@store/themeContext';
 
@@ -13,7 +13,7 @@ import MenuList from './Nav/MenuList';
 import { containerSizeVer, containerVar, logoVar } from './style.css';
 
 const Header = () => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const handleClickMenuToggle = () => {
  setIsMenuOpen((prev) => !prev);

src/common/components/Select/index.tsx

@@ -1,9 +1,9 @@
 import { IconChevronDown } from '@sopt-makers/icons';
-import { ChangeEvent } from 'react';
+import { ChangeEvent, useContext } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { circle, containerVar, titleVar } from '@components/Input/components/TextBox/style.css';
-import { useDevice } from '@hooks/useDevice';
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 
 import {
  errorVar,
@@ -17,7 +17,7 @@ import {
 import { SelectBoxProps } from './type';
 
 const SelectBox = ({ label, name, options, size = 'sm', required, ...inputElementProps }: SelectBoxProps) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
 
  const { register, formState, clearErrors, getValues, setValue, setError } = useFormContext();
  const { errors } = formState;

src/common/components/Textarea/components/Input/index.tsx

@@ -1,7 +1,7 @@
-import { useEffect, type TextareaHTMLAttributes } from 'react';
+import { useContext, useEffect, type TextareaHTMLAttributes } from 'react';
 import { type FieldValues, type Path, useFormContext } from 'react-hook-form';
 
-import { useDevice } from '@hooks/useDevice';
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 
 import {
  containerVar,
@@ -26,7 +26,7 @@ const Input = <T extends FieldValues>({
  isFileInput,
  ...textareaElements
 }: InputProps<T>) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
 
  const {
  watch,

src/common/components/Textarea/components/Label/index.tsx

@@ -1,6 +1,6 @@
-import { Fragment, type HTMLAttributes } from 'react';
+import { Fragment, useContext, type HTMLAttributes } from 'react';
 
-import { useDevice } from '@hooks/useDevice';
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 
 import { requireDot, labelStyleVar } from './style.css';
 
@@ -12,7 +12,7 @@ interface LabelProps extends HTMLAttributes<HTMLHeadingElement> {
 }
 
 const Label = ({ children, maxCount, required, label, ...headerElementProps }: LabelProps) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
  const questionArray = children.split('\n');
  const firstEmptyIndex = questionArray.indexOf('');
 

src/common/components/Title/index.tsx

@@ -1,14 +1,14 @@
-import { ReactNode } from 'react';
+import { ReactNode, useContext } from 'react';
 
-import { useDevice } from '@hooks/useDevice';
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 
 import { headingVar } from './style.css';
 
 interface TitleProps {
  children: ReactNode;
 }
 const Title = ({ children }: TitleProps) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
  return <h1 className={headingVar[deviceType]}>{children}</h1>;
 };
 

src/views/ApplyPage/components/ApplyCategory/index.tsx

@@ -1,8 +1,8 @@
-import { memo } from 'react';
+import { memo, useContext } from 'react';
 import { Link } from 'react-router-dom';
 
-import { useDevice } from '@hooks/useDevice';
 import useScrollPosition from '@hooks/useScrollPosition';
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 
 import { CATEGORY } from './constant';
 import { activeLinkStyleVar, categoryLinkStyleVar, categoryList, container, containerVar } from './style.css';
@@ -12,7 +12,7 @@ interface ApplyCategoryProps {
  minIndex: number;
 }
 const ApplyCategory = memo(({ isReview, minIndex }: ApplyCategoryProps) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
  const { isScrollingDown, isScrollTop } = useScrollPosition(isReview ? 380 : 950);
 
  return (

src/views/ApplyPage/components/ApplyHeader/index.tsx

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 
 import Button from '@components/Button';
 import Title from '@components/Title';
-import { useDevice } from '@hooks/useDevice';
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 import { RecruitingInfoContext } from '@store/recruitingInfoContext';
 
 import { buttonWrapper, headerContainerVar } from './style.css';
@@ -15,7 +15,7 @@ interface ApplyHeaderProps {
 }
 
 const ApplyHeader = ({ isReview, isLoading, onSaveDraft, onSubmitData }: ApplyHeaderProps) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
  const {
  recruitingInfo: { soptName, season, group, isMakers },
  } = useContext(RecruitingInfoContext);

src/views/ApplyPage/components/ApplyInfo/index.tsx

@@ -3,7 +3,7 @@ import { ko } from 'date-fns/locale';
 import { memo, useContext } from 'react';
 
 import Callout from '@components/Callout';
-import { useDevice } from '@hooks/useDevice';
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 import { RecruitingInfoContext } from '@store/recruitingInfoContext';
 
 import {
@@ -19,7 +19,7 @@ import {
 import { APPLY_INFO } from '../../constant';
 
 const ApplyInfo = memo(({ isReview }: { isReview: boolean }) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
  const {
  recruitingInfo: {
  applicationStart,

src/views/ApplyPage/components/BottomSection/index.tsx

@@ -4,7 +4,7 @@ import Checkbox from '@components/Checkbox';
 import Contentbox from '@components/Checkbox/components/Contentbox';
 import SelectBox from '@components/Select';
 import { PRIVACY_POLICY } from '@constants/policy';
-import { useDevice } from '@hooks/useDevice';
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 import { RecruitingInfoContext } from '@store/recruitingInfoContext';
 import { SELECT_OPTIONS } from 'views/ApplyPage/constant';
 
@@ -16,7 +16,7 @@ interface BottomSectionProps {
 }
 
 const BottomSection = ({ isReview, knownPath }: BottomSectionProps) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
  const {
  recruitingInfo: { isMakers },
  } = useContext(RecruitingInfoContext);

src/views/ApplyPage/components/CommonSection/index.tsx

@@ -1,5 +1,7 @@
+import { useContext } from 'react';
+
 import Textarea from '@components/Textarea';
-import { useDevice } from '@hooks/useDevice';
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 import { sectionContainerVar, sectionTitleVar } from 'views/ApplyPage/style.css';
 import { Answers, Questions } from 'views/ApplyPage/types';
 
@@ -15,7 +17,7 @@ interface CommonSectionProps {
 }
 
 const CommonSection = ({ isReview, refCallback, questions, commonQuestionsDraft }: CommonSectionProps) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
  const commonQuestionsById = commonQuestionsDraft?.reduce(
  (acc, draft) => {
  acc ? (acc[draft.id] = draft) : undefined;

src/views/ApplyPage/components/DefaultSection/index.tsx

@@ -1,11 +1,11 @@
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, useContext, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { InputLine, TextBox } from '@components/Input';
 import Radio from '@components/Radio';
 import SelectBox from '@components/Select';
 import { VALIDATION_CHECK } from '@constants/validationCheck';
-import { useDevice } from '@hooks/useDevice';
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 import { SELECT_OPTIONS } from 'views/ApplyPage/constant';
 import { sectionTitleVar } from 'views/ApplyPage/style.css';
 import { Applicant } from 'views/ApplyPage/types';
@@ -113,7 +113,7 @@ interface DefaultSectionProps {
 }
 
 const DefaultSection = ({ isMakers, isReview, refCallback, applicantDraft }: DefaultSectionProps) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
  const {
  address,
  birthday,

src/views/ApplyPage/components/FileInput/index.tsx

@@ -1,12 +1,12 @@
 import { track } from '@amplitude/analytics-browser';
 import { nanoid } from 'nanoid';
-import { ChangeEvent, useEffect, useRef, useState } from 'react';
+import { ChangeEvent, useContext, useEffect, useRef, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import 'firebase/compat/storage';
 import { STATE_CHANGED, storage } from '@constants/firebase.ts';
 import { VALIDATION_CHECK } from '@constants/validationCheck';
-import { useDevice } from '@hooks/useDevice';
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 
 import IconPlusButton from './icons/IconPlusButton';
 import {
@@ -32,7 +32,7 @@ const LIMIT_SIZE = 1024 ** 2 * 50; // 50MB
 const ACCEPTED_FORMATS = '.pdf';
 
 const FileInput = ({ section, id, isReview, disabled, defaultFile }: FileInputProps) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
  const inputRef = useRef<HTMLInputElement>(null);
 
  const [uploadPercent, setUploadPercent] = useState(-1);

src/views/ApplyPage/components/Info/index.tsx

@@ -1,9 +1,11 @@
-import { useDevice } from '@hooks/useDevice';
+import { useContext } from 'react';
+
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 
 import { containerVar, infoVar } from './style.css';
 
 const Info = ({ value }: { value: string }) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
  return (
  <article>
  <ol className={containerVar[deviceType]}>

src/views/ApplyPage/components/LinkInput/index.tsx

@@ -1,9 +1,11 @@
-import { useDevice } from '@hooks/useDevice';
+import { useContext } from 'react';
+
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 
 import { containerVar, label, linkVar } from './style.css';
 
 const LinkInput = ({ urls }: { urls: string[] }) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
  return (
  <>
  {urls.length === 1 && (

src/views/ApplyPage/components/PartSection/index.tsx

@@ -1,8 +1,9 @@
+import { useContext } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import SelectBox from '@components/Select';
 import Textarea from '@components/Textarea';
-import { useDevice } from '@hooks/useDevice';
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 import { sectionContainerVar, sectionTitleVar } from 'views/ApplyPage/style.css';
 import { Answers, Questions } from 'views/ApplyPage/types';
 
@@ -31,7 +32,7 @@ const PartSection = ({
  partQuestionsDraft,
  questionTypes,
 }: PartSectionProps) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
  const { getValues } = useFormContext();
 
  const partOptions = questionTypes?.sort((a, b) => a.id - b.id).map(({ typeKr }) => typeKr);