Merge pull request #104 from Stocodi/fix/auth

Fix: 로그인 / 회원가입 페이지 요구사항 반영
Stocodi · Jan 28, 2024 · 22a9bdb · 22a9bdb
2 parents e81a428 + e778d06
commit 22a9bdb
Show file tree

Hide file tree

Showing 12 changed files with 251 additions and 85 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -55,9 +55,7 @@ export default function App() {
 
                     <Route path="/auth" element={<AuthLayout />}>
                         <Route path="signin" element={<SigninPage />} />
-                        <Route path="signup/step1" element={<SignupPage.One />} />
-                        <Route path="signup/step2" element={<SignupPage.Two />} />
-                        <Route path="signup/step3" element={<SignupPage.Three />} />
+                        <Route path="signup" element={<SignupPage />} />
                     </Route>
 
                     <Route path="/test" element={<TestLayout />}>

diff --git a/src/api/Authentication.ts b/src/api/Authentication.ts
@@ -11,7 +11,8 @@ export interface ILoginResponseBody {
     };
 }
 
-export interface ISignupRequestBody extends Omit<IUserSignup, "interest_categories" | "isEmailVerified" | "isNickNameVerified"> {
+export interface ISignupRequestBody
+    extends Omit<IUserSignup, "interest_categories" | "isEmailVerified" | "isPasswordVerified" | "isNickNameVerified"> {
     interest_categories: string[];
 }
 

diff --git a/src/components/auth-page/CategoryGrid.module.scss b/src/components/auth-page/CategoryGrid.module.scss
@@ -3,6 +3,9 @@
 .category_grid_container {
     margin: 0px auto;
 
+    max-height: 80%;
+    overflow: scroll;
+
     display: grid;
     grid-template-rows: repeat(5, 1fr);
     grid-template-columns: repeat(5, 1fr);

diff --git a/src/interfaces/forms/Input.module.scss b/src/interfaces/forms/Input.module.scss
@@ -17,6 +17,14 @@
     p {
         margin: 5px 0px;
         font-weight: bold;
+
+        display: flex;
+        justify-content: space-between;
+
+        span:last-child {
+            font-weight: normal;
+            color: red;
+        }
     }
 }
 

diff --git a/src/interfaces/forms/Input.tsx b/src/interfaces/forms/Input.tsx
@@ -9,13 +9,18 @@ export interface IInput {
     rest?: unknown;
     placeholder?: string;
     disabled?: boolean;
+    inlineStyle?: React.CSSProperties;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
 }
 
 export interface IInputContainer extends IInput {
     label: string;
 }
 
+export interface IInputVerifyContainer extends IInputContainer {
+    verifyLabel: string;
+}
+
 export interface ITextArea {
     width?: string;
     height?: string;
@@ -33,8 +38,17 @@ export interface IInputButtonContainer extends IInputContainer {
     onClick: MouseEventHandler<HTMLButtonElement>;
 }
 
-export const Input = forwardRef<HTMLInputElement, IInput>(({ width, height, onChange, disabled, ...rest }, ref) => {
-    return <input ref={ref} disabled={disabled} className={styles.input} style={{ width: width, height: height }} onChange={onChange} {...rest} />;
+export const Input = forwardRef<HTMLInputElement, IInput>(({ width, height, onChange, disabled, inlineStyle, ...rest }, ref) => {
+    return (
+        <input
+            ref={ref}
+            disabled={disabled}
+            className={styles.input}
+            style={{ ...inlineStyle, width: width, height: height }}
+            onChange={onChange}
+            {...rest}
+        />
+    );
 });
 
 export const InputContainer = forwardRef<HTMLInputElement, IInputContainer>(({ width, height, label, ...rest }, ref) => {
@@ -46,6 +60,20 @@ export const InputContainer = forwardRef<HTMLInputElement, IInputContainer>(({ w
     );
 });
 
+export const InputVerificationContainer = forwardRef<HTMLInputElement, IInputVerifyContainer>(
+    ({ width, height, label, verifyLabel, ...rest }, ref) => {
+        return (
+            <div className={styles.input_container} style={{ width: width }}>
+                <p>
+                    <span>{label}</span>
+                    <span>{verifyLabel}</span>
+                </p>
+                <Input ref={ref} width="inherit" height={height} {...rest} />
+            </div>
+        );
+    },
+);
+
 export const InputButtonContainer = forwardRef<HTMLInputElement, IInputButtonContainer>(
     ({ width, height, label, btnWidth, btnLabel, onClick, ...rest }, ref) => {
         return (

diff --git a/src/layouts/AuthLayout.module.scss b/src/layouts/AuthLayout.module.scss
@@ -48,6 +48,6 @@
 @include mobile {
     .auth_page_wrapper {
         border-radius: 0px;
-        padding: $p-mobile;
+        padding: 20px;
     }
 }
diff --git a/src/pages/auth-page/SigninPage.tsx b/src/pages/auth-page/SigninPage.tsx
@@ -8,10 +8,15 @@ import { InputContainer } from "../../interfaces/forms/Input";
 import { Title } from "../../components/auth-page/Title";
 
 import { handleLogin } from "../../api/Authentication";
+import { Dispatch } from "@reduxjs/toolkit";
+import { useDispatch } from "react-redux";
+import { UserInterfaceActions } from "../../store/user-interface-slice";
 
 // import { SocialLoginProviders } from "../../constants/SocialLogin";
 
 export default function SigninPage() {
+    const dispatch: Dispatch = useDispatch();
+
     const naviagte = useNavigate();
     const idRef = useRef<HTMLInputElement>(null);
     const pwRef = useRef<HTMLInputElement>(null);
@@ -20,6 +25,7 @@ export default function SigninPage() {
         // 로그인 요청 & 쿠키 저장
         try {
             await handleLogin(idRef.current?.value as string, pwRef.current?.value as string);
+            dispatch(UserInterfaceActions.closeNav());
             naviagte("/");
         } catch (err) {
             alert("아이디 혹은 비밀번호가 일치하지 않습니다");
@@ -35,7 +41,7 @@ export default function SigninPage() {
             <Title title="로그인" subtitle="로그인 후 서비스를 이용해보세요"></Title>
 
             <div className={styles.signin_container}>
-                <InputContainer ref={idRef} type="text" width="100%" height="50px" label="아이디"></InputContainer>
+                <InputContainer ref={idRef} type="text" width="100%" height="50px" label="이메일"></InputContainer>
                 <InputContainer ref={pwRef} type="password" width="100%" height="50px" label="비밀번호"></InputContainer>
             </div>
 
@@ -54,7 +60,7 @@ export default function SigninPage() {
 
                 <div className={styles.signup_link}>
                     아직 계정이 없으신가요?
-                    <Link to="/auth/signup/step1">회원가입</Link>
+                    <Link to="/auth/signup">회원가입</Link>
                 </div>
             </div>
 

diff --git a/src/pages/auth-page/SignupPage.module.scss b/src/pages/auth-page/SignupPage.module.scss
@@ -1,25 +1,25 @@
 @import "@/styles/utils.scss";
 
-.signin_page {
-    width: 100%;
-    height: 100%;
-}
+// .signin_page {
+//     width: 100%;
+//     height: 100%;
+// }
 
-.signin_background {
-    @include place-center;
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 40%;
-    height: 100%;
-    z-index: -1;
+// .signin_background {
+//     @include place-center;
+//     position: absolute;
+//     top: 0;
+//     right: 0;
+//     width: 40%;
+//     height: 100%;
+//     z-index: -1;
 
-    img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-    }
-}
+//     img {
+//         width: 100%;
+//         height: 100%;
+//         object-fit: cover;
+//     }
+// }
 
 .btn_group {
     display: flex;
@@ -28,3 +28,11 @@
     width: min(100%, 700px);
     margin: 0px auto;
 }
+
+.input_wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    width: 100%;
+}