[Deploy] 배포

Merge pull request #417 from sopt-makers/develop
sopt-makers · Aug 17, 2024 · 613c78c · 613c78c
2 parents c886a2f + ab0a374
commit 613c78c
Show file tree

Hide file tree

Showing 59 changed files with 203 additions and 257 deletions.
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]}`}>