Merge pull request #152 from Strong-Potato/117-feat-create-mypage

117 feat create mypage

src/components/Auth/Input/Input.module.scss

@@ -154,4 +154,8 @@
     margin-top: 2px;
     margin-bottom: 12px;
   }
+
+  .removeBtn {
+    top: 81px;
+  }
 }

src/components/Auth/Input/InputOldPassword.tsx

@@ -0,0 +1,39 @@
+import styles from "./Input.module.scss";
+
+import validationForm from "@/utils/inputValidation";
+
+import { InputOldPasswordProps } from "@/types/auth";
+
+function InputOldPassword({
+  register,
+  dirtyFields,
+  errors,
+}: InputOldPasswordProps) {
+  return (
+    <section className={styles.password}>
+      <label htmlFor="oldPassword">비밀번호</label>
+
+      <input
+        id="password"
+        type="password"
+        className={`${styles.input} ${
+          dirtyFields?.oldPassword && errors?.oldPassword ? styles.error : ""
+        }`}
+        placeholder="영문, 숫자, 특수문자 포함 8자 이상"
+        {...register("oldPassword", {
+          required: true,
+          pattern: {
+            value: validationForm.password,
+            message: "비밀번호 형식이 올바르지 않습니다.",
+          },
+        })}
+      />
+
+      {!dirtyFields?.oldPassword || errors?.oldPassword ? (
+        <small>{errors?.oldPassword?.message}</small>
+      ) : null}
+    </section>
+  );
+}
+
+export default InputOldPassword;

src/components/Auth/Login/LoginForm.tsx

@@ -49,10 +49,14 @@ function LoginForm() {
     if (showError(email as string, password as string)) return;
 
     try {
-      const res = await axios.post("/api/login", {
-        email,
-        password,
-      });
+      const res = await axios.post(
+        "/api/login",
+        {
+          email,
+          password,
+        },
+        { withCredentials: true },
+      );
       console.log(res.data);
 
       navigate("/", { replace: true });

src/components/Auth/ModifyPassword/ModifyPasswordForm.module.scss

@@ -0,0 +1,10 @@
+@use "@/sass" as *;
+
+.container {
+  position: relative;
+  color: $neutral900;
+
+  h2 {
+    @include typography(headline);
+  }
+}

src/components/Auth/ModifyPassword/ModifyPasswordForm.tsx

@@ -0,0 +1,71 @@
+import axios from "axios";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+
+import styles from "./ModifyPasswordForm.module.scss";
+
+import StepNewPassword from "./Step/StepNewPassword";
+import StepOldPassword from "./Step/StepOldPassword";
+
+import { AuthForm } from "@/types/auth";
+
+function ModifyPasswordForm() {
+  const {
+    register,
+    resetField,
+    handleSubmit,
+    watch,
+    formState: { errors, dirtyFields },
+  } = useForm<AuthForm>({
+    mode: "onChange",
+    defaultValues: {
+      oldPassword: "",
+      password: "",
+      passwordConfirm: "",
+    },
+  });
+  const watchFields = watch();
+
+  // steps : oldPassword, newPassword
+  const [step, setStep] = useState("oldPassword");
+  const [token, setToken] = useState("");
+
+  const onSubmit = async () => {
+    try {
+      const res = axios.post("/api/auth/modify/password", {
+        token,
+        newPassword: watchFields.password,
+      });
+
+      console.log(res);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <form className={styles.container} onSubmit={handleSubmit(onSubmit)}>
+      {step === "oldPassword" && (
+        <StepOldPassword
+          setToken={setToken}
+          register={register}
+          dirtyFields={dirtyFields}
+          errors={errors}
+          setStep={setStep}
+        />
+      )}
+
+      {step === "newPassword" && (
+        <StepNewPassword
+          register={register}
+          resetField={resetField}
+          watchFields={watchFields}
+          dirtyFields={dirtyFields}
+          errors={errors}
+        />
+      )}
+    </form>
+  );
+}
+
+export default ModifyPasswordForm;

src/components/Auth/ModifyPassword/Step/Step.module.scss

@@ -0,0 +1,41 @@
+@use "@/sass" as *;
+
+.container {
+  position: relative;
+
+  label {
+    display: block;
+
+    @include typography(tabLabel);
+    color: $neutral900;
+  }
+
+  small {
+    width: 100%;
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+
+    @include typography(captionSmall);
+    color: $danger300;
+
+    &.step__desc {
+      position: relative;
+      margin-top: 8px;
+      color: $neutral400;
+    }
+  }
+
+  .toFindPassword {
+    display: flex;
+    justify-content: center;
+    margin-top: 16px;
+
+    @include typography(captionSmall);
+    color: $neutral400;
+
+    &:hover {
+      font-weight: 600;
+    }
+  }
+}

src/components/Auth/ModifyPassword/Step/StepNewPassword.tsx

@@ -0,0 +1,51 @@
+import styles from "./Step.module.scss";
+
+import AuthButton from "../../Button/AuthButton";
+import InputPassword from "../../Input/InputPassword";
+import InputPasswordConfirm from "../../Input/InputPasswordConfirm";
+
+import { StepPasswordProps } from "@/types/auth";
+
+function StepNewPassword({
+  register,
+  resetField,
+  watchFields: { password, passwordConfirm },
+  dirtyFields,
+  errors,
+}: StepPasswordProps) {
+  return (
+    <section className={styles.container}>
+      <h2>새로운 비밀번호를 설정해주세요</h2>
+
+      <InputPassword
+        register={register}
+        dirtyFields={dirtyFields}
+        errors={errors}
+        resetField={resetField}
+      />
+
+      <InputPasswordConfirm
+        register={register}
+        password={password}
+        passwordConfirm={passwordConfirm}
+        dirtyFields={dirtyFields}
+        resetField={resetField}
+      />
+
+      <AuthButton
+        content="완료"
+        disabled={
+          !dirtyFields?.password ||
+          !dirtyFields?.passwordConfirm ||
+          errors?.password ||
+          password !== passwordConfirm
+            ? true
+            : false
+        }
+        type="submit"
+      />
+    </section>
+  );
+}
+
+export default StepNewPassword;

src/components/Auth/ModifyPassword/Step/StepOldPassword.tsx

@@ -0,0 +1,59 @@
+import axios from "axios";
+import { Link } from "react-router-dom";
+
+import styles from "./Step.module.scss";
+
+import AuthButton from "../../Button/AuthButton";
+import InputOldPassword from "../../Input/InputOldPassword";
+
+import { StepOldPasswordProps } from "@/types/auth";
+
+function StepOldPassword({
+  register,
+  dirtyFields,
+  errors,
+  setStep,
+  setToken,
+}: StepOldPasswordProps) {
+  const onClickNext = async () => {
+    try {
+      const res = await axios.post("/api/auth/modify/password/check");
+
+      setToken!(await res.data.data.token);
+      setStep!("newPassword");
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <section className={styles.container}>
+      <h2>비밀번호 확인</h2>
+
+      <small className={styles.step__desc}>
+        비밀번호 재설정을 위해 현재 비밀번호를 입력해주세요.
+      </small>
+
+      <InputOldPassword
+        register={register}
+        dirtyFields={dirtyFields}
+        errors={errors}
+      />
+
+      <AuthButton
+        content="다음"
+        disabled={
+          !dirtyFields?.oldPassword || errors?.oldPassword ? true : false
+        }
+        type="button"
+        onClick={onClickNext}
+      />
+
+      <div className={styles.toFindPassword}>
+        <Link to={"/auth/password/find"}>비밀번호를 잊으셨나요?</Link>
+      </div>
+    </section>
+  );
+}
+
+export default StepOldPassword;

src/components/Auth/Signup/AgreeForm.tsx

@@ -84,7 +84,7 @@ function AgreeForm({ setSignupStep }: AgreeProps) {
               required: true,
             })}
           />
-          <Link to={"/auth/signup/agreeService"}>
+          <Link to={"/auth/signup/agree/service"}>
             <label htmlFor="service">(필수) 서비스 이용약관 동의</label>
           </Link>
         </div>
@@ -97,7 +97,7 @@ function AgreeForm({ setSignupStep }: AgreeProps) {
               required: true,
             })}
           />
-          <Link to={"/auth/signup/agreePrivacy"}>
+          <Link to={"/auth/signup/agree/privacy"}>
             <label htmlFor="privacy">(필수) 개인정보 수집 및 이용 동의</label>
           </Link>
         </div>