sopt-makers · eonseok-jeon · Aug 17, 2024 · Aug 17, 2024 · Aug 17, 2024 · Aug 17, 2024
diff --git a/index.html b/index.html
@@ -17,6 +17,33 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta property="og:type" content="website" />
  <meta property="og:locale" content="ko_KR" />
+
+ <link rel="manifest" href="/makersManifest.webmanifest" />
+
+ <link rel="icon" href="/makersFavicon.ico" sizes="32x32" />
+ <link rel="icon" href="/makersIcon.svg" type="image/svg+xml" />
+ <link rel="apple-touch-icon" href="/makers-touch-icon.png" />
+
+ <meta property="og:title" content="SOPT makers 모집 지원하기" />
+ <meta property="og:description" content="SOPT makers의 신입 기수 모집페이지입니다." />
+ <meta property="og:site_name" content="SOPT makers 리크루팅" />
+ <meta property="og:url" content="https://recruiting.sopt.org" />
+
+ <meta property="og:image" content="/makersOg.png" />
+ <meta property="og:image:alt" content="SOPT makers 리크루팅" />
+ <meta property="og:image:width" content="800" />
+ <meta property="og:image:height" content="400" />
+
+ <meta property="twitter:card" content="website" />
+ <meta name="twitter:title" content="SOPT makers 모집 지원하기" />
+ <meta name="twitter:description" content="SOPT makers의 신입 기수 모집페이지입니다." />
+ <meta name="twitter:image" content="/makersOg.png" />
+ <meta property="twitter:image:alt" content="SOPT makers 리크루팅" />
+ <meta property="twitter:site" content="https://recruiting.sopt.org" />
+
+ <title>SOPT makers 모집 지원하기</title>
+ <meta name="author" content="sopt makers team official 4th" />
+ <meta name="description" content="SOPT makers의 신입 기수 모집페이지입니다." />
  </head>
  <body>
  <div id="modal"></div>

diff --git a/makersManifest.webmanifest b/makersManifest.webmanifest
diff --git a/manifest.webmanifest b/manifest.webmanifest
@@ -1,14 +1,14 @@
 {
  "icons": [
  {
- "src": "/icon-192.png",
+ "src": "/makers_192.png",
  "type": "image/png",
  "sizes": "192x192"
  },
  {
- "src": "/icon-512.png",
+ "src": "/makers_512.png",
  "type": "image/png",
  "sizes": "512x512"
  }
  ]
-}
+}
diff --git a/package.json b/package.json
@@ -27,7 +27,6 @@
  "react": "^18.2.0",
  "react-daum-postcode": "^3.1.3",
  "react-dom": "^18.2.0",
- "react-helmet-async": "^2.0.5",
  "react-hook-form": "^7.51.5",
  "react-responsive": "^10.0.0",
  "react-router-dom": "^6.23.1"

diff --git a/src/App.tsx b/src/App.tsx
@@ -5,10 +5,11 @@ import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@ta
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { AxiosError } from 'axios';
 import { useCallback, useEffect, useRef, useState } from 'react';
-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 +110,8 @@ const App = () => {
  }, []),
  };
 
+ const deviceType = useDevice();
+
  useEffect(() => {
  if (!isAmplitudeInitialized) {
  init(import.meta.env.VITE_AMPLITUDE_API_KEY);
@@ -127,8 +130,8 @@ const App = () => {
  return (
  <>
  <SessionExpiredDialog ref={sessionRef} />
- <HelmetProvider>
- <ThemeContext.Provider value={themeContextValue}>
+ <ThemeContext.Provider value={themeContextValue}>
+ <DeviceTypeContext.Provider value={{ deviceType }}>
  <RecruitingInfoContext.Provider value={recruitingInfoContextValue}>
  <QueryClientProvider client={queryClient}>
  <ReactQueryDevtools />
@@ -137,8 +140,8 @@ const App = () => {
  </div>
  </QueryClientProvider>
  </RecruitingInfoContext.Provider>
- </ThemeContext.Provider>
- </HelmetProvider>
+ </DeviceTypeContext.Provider>
+ </ThemeContext.Provider>
  </>
  );
 };

diff --git 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
@@ -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]}>

diff --git a/src/common/components/Checkbox/index.tsx b/src/common/components/Checkbox/index.tsx
@@ -33,7 +33,6 @@ const Checkbox = <T extends FieldValues>({
  })}
  type="checkbox"
  className={`amp-unmask ${hiddenCheckbox}`}
- disabled
  {...checkboxElementProps}
  />
  <span className={checkmark[errors && errors[name] ? 'error' : 'default']} />

diff --git 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<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}>

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,11 +1,11 @@
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 
 import { TextBoxProps } from '@components/Input/types';
-import { DeviceType, useDevice } from '@hooks/useDevice';
+import { DeviceTypeContext } from '@store/deviceTypeContext';
 
 import { circle, containerVar, titleVar } from './style.css';
 
-export const FormContext = createContext({} as Pick<TextBoxProps, 'required'> & { deviceType: DeviceType });
+export const FormContext = createContext({} as Pick<TextBoxProps, 'required'>);
 
 // TextBox Container
 export const TextBox = ({
@@ -15,10 +15,10 @@ export const TextBox = ({
  size = 'md',
  required,
 }: Pick<TextBoxProps, 'children' | 'label' | 'name' | 'size' | 'required'>) => {
- const deviceType = useDevice();
+ const { deviceType } = useContext(DeviceTypeContext);
 
  return (
- <FormContext.Provider value={{ required, deviceType }}>
+ <FormContext.Provider value={{ required }}>
  <div className={containerVar[deviceType === 'DESK' ? size : deviceType]}>
  <label className={titleVar[deviceType]} htmlFor={name}>
  <span>{label}</span>

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(() => {

diff --git a/src/common/components/Layout/components/Head.tsx b/src/common/components/Layout/components/Head.tsx
diff --git a/src/common/components/Layout/components/Header/Nav/MenuItem/index.tsx b/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]}`}>