[Design] Mobile ver. - 로그인, 비밀번호 페이지 구현 (#354)

* chore: PC미지원 주석 처리 * fix: Header, Layout min-width 제거 * feat: react-responsive 설치 및 useDevice 훅 추가 * chore: useDevice return 값 수정 * design: Callout 반응형 * fix: Callout 기존 디자인 자잘한 수정 * design: TextBox 반응형 * design: InputLine 반응형 * design: InputButton 반응형 * design: Description 반응형 * design: Timer 반응형 * design: InputTheme success 반응형 * design: Heading(Title) 반응형 * design: SignInPage 반응형 * design: PasswordPage 반응형 * design: Callout white-space 수정
sopt-makers · Aug 12, 2024 · dabc5c0 · dabc5c0
1 parent f11ccb2
commit dabc5c0
Show file tree

Hide file tree

Showing 33 changed files with 399 additions and 98 deletions.
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "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"
   },
   "devDependencies": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -44,13 +44,13 @@ const router = createBrowserRouter([
 ]);
 
 const App = () => {
-  useEffect(() => {
-    const isMobile = /Mobi/i.test(window.navigator.userAgent);
-    if (isMobile) {
-      alert('PC로 지원해주세요.');
-      window.location.href = 'https://makers.sopt.org/recruit';
-    }
-  }, []);
+  // useEffect(() => {
+  //   const isMobile = /Mobi/i.test(window.navigator.userAgent);
+  //   if (isMobile) {
+  //     alert('PC로 지원해주세요.');
+  //     window.location.href = 'https://makers.sopt.org/recruit';
+  //   }
+  // }, []);
 
   const sessionRef = useRef<HTMLDialogElement>(null);
 

diff --git a/src/common/components/Button/index.tsx b/src/common/components/Button/index.tsx
@@ -1,9 +1,10 @@
 import { useId, type ButtonHTMLAttributes, type ReactNode } from 'react';
 import { Link, To } from 'react-router-dom';
 
+import { useDevice } from '@hooks/useDevice';
 import ButtonLoading from 'views/loadings/ButtonLoading';
 
-import { container, outsideBox, paddings } from './style.css';
+import { buttonFontVar, container, outsideBox, paddings } from './style.css';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
   children?: ReactNode;
@@ -25,6 +26,7 @@ const Button = ({
   isLink = false,
   ...buttonElementProps
 }: ButtonProps) => {
+  const DEVICE_TYPE = useDevice();
   const { disabled, type = 'button' } = buttonElementProps;
   const Tag = isLink ? Link : 'button';
 
@@ -44,7 +46,7 @@ const Button = ({
       disabled={isLoading || disabled}
       {...buttonElementProps}>
       <div
-        className={`${container[isLoading || disabled ? 'disabled' : buttonStyle]} ${paddings[padding]} ${className}`}>
+        className={`${container[isLoading || disabled ? 'disabled' : buttonStyle]} ${paddings[padding]} ${buttonFontVar[DEVICE_TYPE]} ${className}`}>
         {isLoading ? <ButtonLoading width={loadingWidth} /> : children}
       </div>
     </Tag>

diff --git a/src/common/components/Button/style.css.ts b/src/common/components/Button/style.css.ts
@@ -39,7 +39,6 @@ const containerBase = style({
   width: 'fit-content',
   borderRadius: 12,
   transition: 'background-color 0.3s ease-out',
-  ...theme.font.TITLE_5_18_SB,
 
   selectors: {
     '&:disabled, &:disabled:hover': {
@@ -122,3 +121,15 @@ export const container = styleVariants({
     },
   ],
 });
+
+export const buttonFontVar = styleVariants({
+  DESK: {
+    ...theme.font.TITLE_5_18_SB,
+  },
+  TAB: {
+    ...theme.font.TITLE_5_18_SB,
+  },
+  MOB: {
+    ...theme.font.TITLE_6_16_SB,
+  },
+});
diff --git a/src/common/components/Callout/index.tsx b/src/common/components/Callout/index.tsx
@@ -1,7 +1,9 @@
 import { colors } from '@sopt-makers/colors';
 import { IconAlertCircle } from '@sopt-makers/icons';
 
-import { button, container, warningWrapper } from './style.css';
+import { useDevice } from '@hooks/useDevice';
+
+import { buttonVar, container, warningWrapperVar } from './style.css';
 
 import type { HTMLAttributes, ReactNode } from 'react';
 
@@ -12,9 +14,10 @@ interface CalloutProps extends HTMLAttributes<HTMLElement> {
 }
 
 const Callout = ({ children, size = 'sm', Button, ...calloutElementProps }: CalloutProps) => {
+  const DEVICE_TYPE = useDevice();
   return (
-    <article className={container[size]} {...calloutElementProps}>
-      <div className={warningWrapper}>
+    <article className={container[DEVICE_TYPE === 'DESK' ? size : DEVICE_TYPE]} {...calloutElementProps}>
+      <div className={warningWrapperVar[DEVICE_TYPE]}>
         <IconAlertCircle
           style={{
             width: 32,
@@ -27,7 +30,7 @@ const Callout = ({ children, size = 'sm', Button, ...calloutElementProps }: Call
         />
         {children}
       </div>
-      {Button && <div className={button}>{Button}</div>}
+      {Button && <div className={buttonVar[DEVICE_TYPE]}>{Button}</div>}
     </article>
   );
 };

diff --git a/src/common/components/Callout/style.css.ts b/src/common/components/Callout/style.css.ts
@@ -6,27 +6,76 @@ const containerBase = style({
   display: 'flex',
   flexDirection: 'column',
 
-  wordBreak: 'keep-all',
   padding: '28px 28px',
   borderRadius: 15,
   backgroundColor: theme.color.subBackground,
-  whiteSpace: 'pre-line',
+  whiteSpace: 'pre-wrap',
   ...theme.font.HEADING_6_18_B,
   letterSpacing: -0.36,
 });
 
 export const container = styleVariants({
   sm: [containerBase, { width: 466 }],
   lg: [containerBase, { width: 720 }],
+  TAB: [
+    containerBase,
+    {
+      width: 367,
+      padding: '28px 16px',
+      ...theme.font.HEADING_7_16_B,
+      letterSpacing: '-0.24px',
+    },
+  ],
+  MOB: [
+    containerBase,
+    {
+      width: 312,
+      padding: '28px 16px',
+      ...theme.font.TITLE_7_14_SB,
+      letterSpacing: '-0.21px',
+    },
+  ],
 });
 
-export const warningWrapper = style({
+const warningWrapper = style({
   display: 'flex',
   gap: 22,
   alignItems: 'center',
 });
 
+export const warningWrapperVar = styleVariants({
+  DESK: [warningWrapper],
+  TAB: [
+    warningWrapper,
+    {
+      gap: 8,
+    },
+  ],
+  MOB: [
+    warningWrapper,
+    {
+      gap: 8,
+    },
+  ],
+});
+
 export const button = style({
   marginTop: 8,
   marginLeft: 'auto',
 });
+
+export const buttonVar = styleVariants({
+  DESK: [button],
+  TAB: [
+    button,
+    {
+      marginTop: 20,
+    },
+  ],
+  MOB: [
+    button,
+    {
+      marginTop: 12,
+    },
+  ],
+});
diff --git a/src/common/components/Input/components/Description/index.tsx b/src/common/components/Input/components/Description/index.tsx
@@ -1,10 +1,13 @@
 import { TextBoxProps } from '@components/Input/types';
+import { useDevice } from '@hooks/useDevice';
 
-import { descriptionVar } from './style.css';
+import { descriptionFontVar, descriptionVar } from './style.css';
 
 // TextBox 내부 Input 하단의 부가텍스트
-const Description = ({ children, styleType = 'default' }: Pick<TextBoxProps, 'children' | 'styleType'>) => (
-  <div className={descriptionVar[styleType]}>{children}</div>
-);
+const Description = ({ children, styleType = 'default' }: Pick<TextBoxProps, 'children' | 'styleType'>) => {
+  const DEVICE_TYPE = useDevice();
+
+  return <div className={`${descriptionVar[styleType]} ${descriptionFontVar[DEVICE_TYPE]}`}>{children}</div>;
+};
 
 export default Description;
diff --git a/src/common/components/Input/components/Description/style.css.ts b/src/common/components/Input/components/Description/style.css.ts
@@ -7,7 +7,6 @@ const description = style({
   gap: 10,
 
   color: theme.color.lightestText,
-  ...theme.font.LABEL_2_16_SB,
 });
 
 export const descriptionVar = styleVariants(
@@ -22,3 +21,9 @@ export const descriptionVar = styleVariants(
     },
   ],
 );
+
+export const descriptionFontVar = styleVariants({
+  DESK: { ...theme.font.LABEL_2_16_SB },
+  TAB: { ...theme.font.LABEL_2_16_SB },
+  MOB: { ...theme.font.LABEL_3_14_SB },
+});
diff --git a/src/common/components/Input/components/InputButton/index.tsx b/src/common/components/Input/components/InputButton/index.tsx
@@ -1,12 +1,14 @@
 import Button from '@components/Button';
+import { useDevice } from '@hooks/useDevice';
 
-import { textWidth } from './style.css';
+import { buttonVar } from './style.css';
 import { InputButtonProps } from './types';
 
 // TextBox 내부 InputLine 우측 버튼
 const InputButton = ({ isLoading, text, ...props }: InputButtonProps) => {
+  const DEVICE_TYPE = useDevice();
   return (
-    <Button isLoading={isLoading} className={textWidth} {...props}>
+    <Button isLoading={isLoading} className={buttonVar[DEVICE_TYPE]} {...props}>
       {text}
     </Button>
   );

diff --git a/src/common/components/Input/components/InputButton/style.css.ts b/src/common/components/Input/components/InputButton/style.css.ts
@@ -1,7 +1,26 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 
-export const textWidth = style({
-  width: 148,
+export const button = style({
   paddingLeft: 0,
   paddingRight: 0,
 });
+export const buttonVar = styleVariants({
+  DESK: [
+    button,
+    {
+      width: 148,
+    },
+  ],
+  TAB: [
+    button,
+    {
+      width: 116,
+    },
+  ],
+  MOB: [
+    button,
+    {
+      width: 99,
+    },
+  ],
+});
diff --git a/src/common/components/Input/components/InputLine/index.tsx b/src/common/components/Input/components/InputLine/index.tsx
@@ -1,7 +1,9 @@
 import { ChangeEvent, useContext } from 'react';
 import { useFormContext } from 'react-hook-form';
 
-import { inputLine, inputVar } from './style.css';
+import { useDevice } from '@hooks/useDevice';
+
+import { inputFontVar, inputLineVar, inputVar } from './style.css';
 import { formatBirthdate } from './utils/formatBirthdate';
 import { formatPhoneNumber } from './utils/formatPhoneNumber';
 import { TextBoxProps } from '../../types';
@@ -17,6 +19,7 @@ const InputLine = ({
   children,
   ...inputElementProps
 }: Omit<TextBoxProps, 'label' | 'size'>) => {
+  const DEVICE_TYPE = useDevice();
   const {
     register,
     formState: { errors },
@@ -43,11 +46,11 @@ const InputLine = ({
 
   return (
     <>
-      <div className={inputLine}>
+      <div className={inputLineVar[DEVICE_TYPE]}>
         <input
           id={name}
           defaultValue={defaultValue}
-          className={inputVar[errors[name] ? 'error' : 'default']}
+          className={`${inputVar[errors[name] ? 'error' : 'default']} ${inputFontVar[DEVICE_TYPE]}`}
           {...inputElementProps}
           {...register(name, {
             required: required && '필수 입력 항목이에요.',

diff --git a/src/common/components/Input/components/InputLine/style.css.ts b/src/common/components/Input/components/InputLine/style.css.ts
@@ -3,28 +3,36 @@ import { style, styleVariants } from '@vanilla-extract/css';
 import { formColors } from '@constants/styleValues';
 import { theme } from 'styles/theme.css';
 
-export const inputLine = style({
+const inputLine = style({
   display: 'flex',
   gap: 10,
 
   position: 'relative',
 });
 
+export const inputLineVar = styleVariants({
+  DESK: [inputLine],
+  TAB: [
+    inputLine,
+    {
+      gap: 5,
+    },
+  ],
+  MOB: [
+    inputLine,
+    {
+      gap: 5,
+    },
+  ],
+});
+
 const input = style({
   flex: 1,
 
   padding: 16,
   backgroundColor: theme.color.white,
   borderRadius: 12,
 
-  color: theme.color.baseText,
-  ...theme.font.BODY_2_16_R,
-
-  '::placeholder': {
-    color: theme.color.placeholder,
-    ...theme.font.BODY_2_16_R,
-  },
-
   ':focus': {
     boxShadow: `0 0 0 1px ${theme.color.primary} inset`,
   },
@@ -55,3 +63,22 @@ export const inputVar = styleVariants(formColors, ({ boxShadow, focusShadow }) =
     },
   },
 ]);
+
+export const inputFontVar = styleVariants(
+  {
+    DESK: theme.font.BODY_2_16_R,
+    TAB: theme.font.BODY_2_16_R,
+    MOB: theme.font.BODY_4_13_R,
+  },
+  (font) => [
+    {
+      color: theme.color.baseText,
+      ...font,
+
+      '::placeholder': {
+        color: theme.color.placeholder,
+        ...font,
+      },
+    },
+  ],
+);