Merge pull request #310 from leehj322/Next-이형준-sprint11

[이형준]sprint11

next.config.mjs

@@ -3,12 +3,22 @@ const nextConfig = {
   reactStrictMode: true,
   images: {
     remotePatterns: [
+      // 정상적이지 않은 방법으로 올라온 이미지에 대해 처리하기 위해 임시 사용
+      {
+        protocol: "http",
+        hostname: "**",
+      },
       {
         protocol: "https",
-        hostname: "sprint-fe-project.s3.ap-northeast-2.amazonaws.com",
-        port: "",
-        pathname: "/Sprint_Mission/user/**",
+        hostname: "**",
       },
+      // 이후에 컴포넌트 상에 띄울때 s3주소만 필터링 해서 띄우고 나머지는 버리는 훅 추가 후 아래 설정으로 사용하기
+      // {
+      //   protocol: "https",
+      //   hostname: "sprint-fe-project.s3.ap-northeast-2.amazonaws.com",
+      //   port: "",
+      //   pathname: "/Sprint_Mission/user/**",
+      // },
     ],
   },
 };

src/axios/auth.ts

@@ -23,24 +23,16 @@ export async function signUpUser({
       password,
       passwordConfirmation,
     });
-    const { accessToken, refreshToken } = res.data;
-
-    localStorage.setItem("access_token", accessToken);
-    localStorage.setItem("refresh_token", refreshToken);
-    window.location.href = "/";
+    return res.data;
   } catch (error) {
-    console.log(error);
+    console.error(error);
   }
 }
 
 export async function logInUser({ email, password }: LogInUserProps) {
   try {
     const res = await axiosInstance.post("/auth/signIn", { email, password });
-    const { accessToken, refreshToken } = res.data;
-
-    localStorage.setItem("access_token", accessToken);
-    localStorage.setItem("refresh_token", refreshToken);
-    window.location.href = "/";
+    return res.data;
   } catch (error) {
     console.log(error);
   }

src/axios/instance.ts

@@ -27,7 +27,7 @@ const onErrorResponse = async (error: AxiosError | Error) => {
 
     switch (status) {
       case 400: {
-        alert("입력한 정보가 올바르지 않습니다.");
+        alert(data.message);
         break;
       }
 

src/components/@shared/GlobalNavBar.tsx

@@ -11,7 +11,7 @@ const NAV_MENU_INFO = [
 
 export default function GlobalNavBar() {
   const { pathname } = useRouter();
-  const isMain = pathname === "/" ? true : false;
+  const isMain = pathname === "/";
   const [isLogin, setIsLogin] = React.useState(false);
 
   React.useEffect(() => {

src/components/auth/AuthLogoImg.tsx

@@ -0,0 +1,9 @@
+import Image from "next/image";
+
+export default function AuthLogoImg() {
+  return (
+    <div className="relative my-0 mx-auto w-[198px] h-[66px] md:w-[396px] md:h-[132px]">
+      <Image fill src="/images/panda_logo_with_typo.png" alt="로고 이미지" />
+    </div>
+  );
+}

src/components/auth/AuthRedirectionLink.tsx

@@ -0,0 +1,18 @@
+import Link from "next/link";
+
+interface AuthLinkProps {
+  descriptionText: string;
+  linkText: string;
+  href: string;
+}
+
+export default function AuthRedirectionLink({ descriptionText, linkText, href }: AuthLinkProps) {
+  return (
+    <div className="flex justify-center gap-[4px] text-[14px] font-medium text-gray-800">
+      <p>{descriptionText}</p>
+      <Link className="underline text-brand-blue" href={href}>
+        {linkText}
+      </Link>
+    </div>
+  );
+}

src/components/auth/LoginForm.tsx

@@ -0,0 +1,71 @@
+import { logInUser, LogInUserProps } from "@/axios/auth";
+import React from "react";
+import BlueButton from "@/components/@shared/BlueButton";
+import GrayInput from "@/components/@shared/inputs/GrayInput";
+
+export default function LoginForm() {
+  const [logInValues, setLogInValues] = React.useState<LogInUserProps>({ email: "", password: "" });
+
+  const handleFormKeyDown = (e: React.KeyboardEvent<HTMLFormElement>) => {
+    if (logInValues.email === "" || logInValues.password === "") {
+      if (e.key === "Enter") e.preventDefault();
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const currentTargetId = e.target.id;
+    const currentValue = e.target.value;
+
+    setLogInValues((prevLogInValues) => ({ ...prevLogInValues, [currentTargetId]: currentValue }));
+  };
+
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const submitLogInForm = async () => {
+      const data = await logInUser(logInValues);
+      const { accessToken, refreshToken } = data;
+
+      localStorage.setItem("access_token", accessToken);
+      localStorage.setItem("refresh_token", refreshToken);
+      window.location.href = "/";
+    };
+
+    submitLogInForm();
+  };
+
+  return (
+    <form
+      className="flex flex-col gap-[24px] mt-[24px] md:mt-[40px]"
+      onSubmit={handleFormSubmit}
+      onKeyDown={handleFormKeyDown}
+    >
+      <div className="flex flex-col gap-[8px] md:gap-[16px]">
+        <label htmlFor="email" className="text-[14px] font-bold text-gray-800 md:text-[18px]">
+          이메일
+        </label>
+        <GrayInput id="email" placeholder="이메일을 입력해주세요" onChange={handleInputChange} />
+      </div>
+      <div className="flex flex-col gap-[8px] md:gap-[16px]">
+        <label htmlFor="password" className="text-[14px] font-bold text-gray-800 md:text-[18px]">
+          비밀번호
+        </label>
+        <GrayInput
+          id="password"
+          placeholder="비밀번호를 입력해주세요"
+          onChange={handleInputChange}
+        />
+      </div>
+      <div className="h-[56px]">
+        <BlueButton
+          shape="pill"
+          type="submit"
+          disabled={!logInValues.email || !logInValues.password}
+          customStyle="text-[20px]"
+        >
+          로그인
+        </BlueButton>
+      </div>
+    </form>
+  );
+}

src/components/auth/SignUpForm.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { signUpUser, SignUpUserProps } from "@/axios/auth";
+import GrayInput from "../@shared/inputs/GrayInput";
+import BlueButton from "../@shared/BlueButton";
+
+export default function SignUpForm() {
+  const [signUpValues, setSignUpValues] = React.useState<SignUpUserProps>({
+    email: "",
+    nickname: "",
+    password: "",
+    passwordConfirmation: "",
+  });
+
+  const handleFormKeyDown = (e: React.KeyboardEvent<HTMLFormElement>) => {
+    if (e.key === "Enter") e.preventDefault();
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const currentTargetId = e.target.id;
+    const currentValue = e.target.value;
+
+    setSignUpValues((prevSignUpValues) => ({
+      ...prevSignUpValues,
+      [currentTargetId]: currentValue,
+    }));
+  };
+
+  const handleSignUpUserSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const submitSignUpForm = async () => {
+      const data = await signUpUser(signUpValues);
+      const { accessToken, refreshToken } = data;
+
+      localStorage.setItem("access_token", accessToken);
+      localStorage.setItem("refresh_token", refreshToken);
+      window.location.href = "/";
+    };
+
+    submitSignUpForm();
+  };
+
+  return (
+    <form
+      className="flex flex-col gap-[24px] mt-[24px] md:mt-[40px]"
+      onSubmit={handleSignUpUserSubmit}
+      onKeyDown={handleFormKeyDown}
+    >
+      <div className="flex flex-col gap-[8px] md:gap-[16px]">
+        <label htmlFor="email" className="text-[14px] font-bold text-gray-800 md:text-[18px]">
+          이메일
+        </label>
+        <GrayInput id="email" placeholder="이메일을 입력해주세요" onChange={handleInputChange} />
+      </div>
+      <div className="flex flex-col gap-[8px] md:gap-[16px]">
+        <label htmlFor="nickname" className="text-[14px] font-bold text-gray-800 md:text-[18px]">
+          닉네임
+        </label>
+        <GrayInput id="nickname" placeholder="닉네임을 입력해주세요" onChange={handleInputChange} />
+      </div>
+      <div className="flex flex-col gap-[8px] md:gap-[16px]">
+        <label htmlFor="password" className="text-[14px] font-bold text-gray-800 md:text-[18px]">
+          비밀번호
+        </label>
+        <GrayInput
+          id="password"
+          placeholder="비밀번호를 입력해주세요"
+          onChange={handleInputChange}
+        />
+      </div>
+      <div className="flex flex-col gap-[8px] md:gap-[16px]">
+        <label
+          htmlFor="passwordConfirmation"
+          className="text-[14px] font-bold text-gray-800 md:text-[18px]"
+        >
+          비밀번호 확인
+        </label>
+        <GrayInput
+          id="passwordConfirmation"
+          placeholder="비밀번호를 다시 한 번 입력해주세요"
+          onChange={handleInputChange}
+        />
+      </div>
+      <div className="h-[56px]">
+        <BlueButton shape="pill" type="submit" disabled={false} customStyle="text-[20px]">
+          회원가입
+        </BlueButton>
+      </div>
+    </form>
+  );
+}

src/components/auth/SimpleLogin.tsx

@@ -0,0 +1,18 @@
+import Link from "next/link";
+import Image from "next/image";
+
+export default function SimpleLogin() {
+  return (
+    <div className="flex px-[24px] py-[16px] mt-[24px] mb-[24px] justify-between items-center bg-blue-login rounded-[8px] height-[74px]">
+      <p className="font-medium text-[16px] text-gray-800">간편 로그인하기</p>
+      <div className="flex gap-[16px]">
+        <Link href="https://www.google.com">
+          <Image width={42} height={42} src="/images/ic_google_login.png" alt="구글로그인" />
+        </Link>
+        <Link href="https://www.kakao.com">
+          <Image width={42} height={42} src="/images/ic_kakao_login.png" alt="카카오로그인" />
+        </Link>
+      </div>
+    </div>
+  );
+}

src/pages/login/index.tsx

@@ -0,0 +1,21 @@
+import AuthLogoImg from "@/components/auth/AuthLogoImg";
+import LoginForm from "@/components/auth/LoginForm";
+import SimpleLogin from "@/components/auth/SimpleLogin";
+import AuthRedirectionLink from "@/components/auth/AuthRedirectionLink";
+
+export default function LogIn() {
+  return (
+    <>
+      <div className="mt-[80px] mx-auto w-[343px] md:mt-[190px] md:w-[640px] xl:mt-[231px]">
+        <AuthLogoImg />
+        <LoginForm />
+        <SimpleLogin />
+        <AuthRedirectionLink
+          descriptionText="판다마켓이 처음이신가요?"
+          linkText="회원가입"
+          href="/signup"
+        />
+      </div>
+    </>
+  );
+}