Feat/verify 관리자 페이지 비밀번호 입력 페이지

pages/[id]/verify.tsx

@@ -1,7 +1,127 @@
-import React from 'react';
+import Header from '@src/components/common/Header';
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import verifyPlanet from '@assets/verify_planet.svg';
+import styled from '@emotion/styled';
+import RoundButton from '@src/components/common/RoundButton';
+import UnderlinedButton from '@src/components/common/UnderlinedButton';
+import { flexColumnCenter } from '@src/lib/style/mixin';
+import { useRouter } from 'next/router';
+import Input from '@src/components/common/Input';
+import ToastMessage from '@src/components/common/ToastMessage';
+import { PW_MINLENGTH, TOAST_DELAY } from '@src/constants';
+import useInput from '@src/hooks/useInput';
 
 function verify() {
-  return <div>verify</div>;
+  const router = useRouter();
+  const [isWrong, setIsWrong] = useState(false);
+  const [password, setPassword, onChange] = useInput<string>('');
+  const [isDisabled, setIsDisabled] = useState(false);
+
+  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    router.push('/');
+  };
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    // @TODO POST 코드 작성
+    setIsWrong(true);
+    setTimeout(() => {
+      setIsWrong(false);
+    }, TOAST_DELAY);
+  };
+
+  useEffect(() => {
+    const passwordLength = password.length;
+    if (passwordLength < PW_MINLENGTH) {
+      setIsDisabled(true);
+    } else {
+      setIsDisabled(false);
+    }
+  }, [password]);
+  return (
+    <>
+      <Header />
+      <Styled.Main>
+        <Styled.ImageSection>
+          <Image src={verifyPlanet} alt="관리자 인증 페이지 행성 사진" />
+        </Styled.ImageSection>
+        <Styled.Form onSubmit={handleSubmit}>
+          <label htmlFor="pw-input" className="label">
+            비밀번호를 입력해주세요.
+          </label>
+          <Input
+            id="pw-input"
+            type="number"
+            placeholder="ex.0000"
+            value={password}
+            align="middle"
+            onChange={onChange}
+            maxLength={4}
+          />
+        </Styled.Form>
+        <UnderlinedButton handleClick={handleSubmit} disabled={isDisabled}>
+          확인
+        </UnderlinedButton>
+        <Styled.CreatePlanet>
+          <p className="additional-text">
+            우주의 주인이 아니신가요? <br /> 나만의 우주를 만들어보세요.
+          </p>
+          <RoundButton handleClick={handleOnClick}>우주 생성하러 가기</RoundButton>
+          {isWrong && (
+            <ToastMessage>
+              틀린 비밀번호입니다. <br /> 다시 입력해주세요.
+            </ToastMessage>
+          )}
+        </Styled.CreatePlanet>
+      </Styled.Main>
+    </>
+  );
 }
 
 export default verify;
+const Styled = {
+  Main: styled.main`
+    width: 80vw;
+    max-width: 500px;
+    color: white;
+    margin-top: 4.84vh;
+    ${flexColumnCenter};
+    @media (max-width: 767px) {
+      max-width: 400px;
+    }
+  `,
+  ImageSection: styled.section`
+    margin-bottom: 4.84vh;
+    width: 100%;
+    & * {
+      width: 100%;
+    }
+  `,
+  Form: styled.form`
+    ${flexColumnCenter};
+    font-size: 15px;
+    width: 75%;
+    .label {
+      margin-bottom: 2.96vh;
+    }
+    margin-bottom: 4.84vh;
+    @media (max-width: 315px) {
+      font-size: 13px;
+    }
+  `,
+  CreatePlanet: styled.section`
+    width: 75%;
+    ${flexColumnCenter};
+    margin-top: 11.25vh;
+    font-size: 15px;
+    .additional-text {
+      margin-bottom: 3.59vh;
+      line-height: 200%;
+      @media (max-width: 767px) {
+        line-height: 150%;
+      }
+    }
+    @media (max-width: 315px) {
+      font-size: 13px;
+    }
+  `,
+};

src/components/common/Input.tsx

@@ -0,0 +1,54 @@
+import React, { ChangeEvent, InputHTMLAttributes } from 'react';
+import styled from '@emotion/styled';
+
+type Align = 'left' | 'middle';
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'maxLength'> {
+  className?: string;
+  align: Align;
+  valid?: boolean;
+  maxLength?: number;
+  [key: string]: any;
+}
+function Input({ className, align, valid = true, maxLength, onChange, ...props }: InputProps) {
+  const handleChangeWithMaxLength = (e: ChangeEvent<HTMLInputElement>) => {
+    if (String(e.target.value).length <= maxLength && typeof e.target.valueAsNumber === 'number') {
+      onChange(e);
+    }
+  };
+
+  return (
+    <>
+      <Styled.Input
+        className={className}
+        align={align}
+        valid={valid}
+        onChange={maxLength ? handleChangeWithMaxLength : onChange}
+        {...props}
+      />
+    </>
+  );
+}
+
+export default Input;
+
+const Styled = {
+  Input: styled.input<InputProps>`
+    display: block;
+    background: transparent;
+    outline: 0;
+    border: 0;
+    width: 100%;
+    border-bottom: 1px solid #565656;
+    padding-bottom: 10px;
+    color: #565656;
+    &:focus {
+      color: white;
+      border-bottom: ${({ valid }) => (valid ? '1px solid #FFFFFF' : '1px solid #ffc5c5')};
+    }
+    text-align: ${({ align }) => (align === 'middle' ? 'center' : 'left')};
+    &::placeholder {
+      color: #565656;
+    }
+  `,
+};

src/components/common/UnderlinedButton.tsx

@@ -4,7 +4,9 @@ import React from 'react';
 
 interface ButtonProps {
   children: string;
-  handleClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  handleClick?: (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.FormEvent<HTMLFormElement>,
+  ) => void;
   [key: string]: any;
 }
 

src/constants/index.ts

@@ -1,5 +1,6 @@
 const TOAST_DELAY = 3000;
 
 const PW_DIGIT = 4;
+const PW_MINLENGTH = 1;
 
-export { TOAST_DELAY, PW_DIGIT };
+export { TOAST_DELAY, PW_DIGIT, PW_MINLENGTH };

src/hooks/useInput.ts

@@ -0,0 +1,13 @@
+import { useState, useCallback, ChangeEvent, Dispatch, SetStateAction } from 'react';
+
+const useInput = <T>(
+  inputValue: T,
+): [T, Dispatch<SetStateAction<T>>, (e?: ChangeEvent<HTMLInputElement>) => void] => {
+  const [value, setValue] = useState<typeof inputValue>(inputValue);
+  const onChnage = useCallback((e) => {
+    setValue(e.target.value);
+  }, []);
+  return [value, setValue, onChnage];
+};
+
+export default useInput;