Next 엄성민 - 스프린트 미션 8

.github/pull-request-template.md

@@ -3,7 +3,11 @@
 ### 기본
 
 - [x]
+<<<<<<< HEAD
+- [테스트s]
+=======
 - []
+>>>>>>> upstream/next-엄성민
 - []
 
 ### 심화

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -43,7 +43,11 @@ _위 이미지는 판다마켓의 대표 이미지입니다._ 📸
    - **스프린트 미션 8부터** 시작하는 프론트엔드 내용을 포함하고 있어요.
    - 만약 스프린트 미션 9부터 프론트엔드 코드를 React가 아닌 Next로 구현하고 싶다면 next 브랜치를 사용해요.
 
+<<<<<<< HEAD
+> _스프린트 미션 내 백엔드 요구사항은 [백엔드 레포지토리](https://github.com/codeit-sprint-fullstack/4-sprint-mission-be)의 브랜치에서 관리해주세요_
+=======
 > _스프린트 미션 내 백엔드 요구사항은 [백엔드 레포지토리](https://github.com/codeit-sprint-fullstack/2-Sprint-mission-Be)의 브랜치에서 관리해주세요_
+>>>>>>> upstream/next-엄성민
 
 ---
 

api/index.js

@@ -0,0 +1,101 @@
+import axios from "axios";
+
+// const baseURL = "http://localhost:3100";
+const baseURL = "https://four-sprint-mission-be-1.onrender.com";
+
+const client = axios.create({
+  baseURL,
+});
+
+// 게시글 관련 api
+const getArticles = async (keyword = "", order = "recent") => {
+  const options = {
+    params: {
+      keyword,
+      orderBy: order,
+    },
+  };
+  const url = `/article`;
+  const response = await client.get(url, options);
+  const data = response.data;
+  return data;
+};
+
+const getArticle = async (id) => {
+  const url = `/article/${id}`;
+  const response = await client.get(url);
+  const data = response.data;
+  return data;
+};
+
+const createArticle = async (newArticle) => {
+  const url = `/article`;
+  const response = await client.post(url, newArticle);
+  const data = response.data;
+  return data;
+};
+
+const deleteArticle = async (id) => {
+  const url = `/article/${id}`;
+  const response = await client.delete(url);
+  const data = response.data;
+  return data;
+};
+
+const patchArticle = async (id, article) => {
+  const url = `/article/${id}`;
+  const response = await client.patch(url, article);
+  const data = response.data;
+  return data;
+};
+
+const createComment = async (id, content) => {
+  const url = `/article/${id}/comment`;
+  const response = await client.post(url, { content });
+  const data = response.data;
+  return data;
+};
+
+const getComments = async (id) => {
+  const url = `article/${id}/comments`;
+  const response = await client.get(url);
+  const data = response.data;
+  return data;
+};
+
+const deleteComment = async (id) => {
+  const url = `article/${id}/comment`;
+  const response = await client.delete(url);
+  const data = response.data;
+  return data;
+};
+
+const patchComment = async (id, content) => {
+  const url = `article/${id}/comment`;
+  const response = await client.patch(url, { content });
+  const data = response.data;
+  return data;
+};
+
+// 상품 관련 api
+const getProduct = async () => {
+  const url = "/products";
+  const response = await client.get(url);
+  const data = response.data;
+  return data;
+};
+
+const api = {
+  getArticles,
+  getArticle,
+  createArticle,
+  deleteArticle,
+  patchArticle,
+  createComment,
+  getComments,
+  deleteComment,
+  patchComment,
+  getProduct,
+};
+
+export default api;

app/(auth)/_components/InputBox.jsx

@@ -0,0 +1,24 @@
+import clsx from "clsx";
+import React from "react";
+
+function InputBox({ userData, handleChange, name, placeholder, title }) {
+  return (
+    <div className="flex flex-col md:gap-4 gap-2">
+      <p className="font-bold md:text-[18px] text-[14px]">{title}</p>
+      <input
+        name={name}
+        className={clsx(
+          "md:w-[640px] md:h-p[56px] rounded-xl px-6 py-4 bg-[#F3F4F6] w-[343px] h-14 focus:outline-blue"
+        )}
+        placeholder={placeholder}
+        value={userData[name] || ""}
+        onChange={handleChange}
+        type={
+          name === "password" || name === "passwordCheck" ? "password" : "text"
+        }
+      />
+    </div>
+  );
+}
+
+export default InputBox;

app/(auth)/_components/SocialLogin.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Google from "@/assets/svg/ic_google.svg";
+import Kakao from "@/assets/svg/ic_kakao.svg";
+import Image from "next/image";
+
+function SocialLogin() {
+  return (
+    <div className="w-full h-[74px] px-[23px] py-4 flex justify-between items-center rounded-lg bg-[#E6F2FF]">
+      <p className="font-medium"> 간편 로그인하기</p>
+      <div className="flex gap-4">
+        <Image src={Google.src} alt="googleicon" width={42} height={42} />
+        <Image src={Kakao.src} alt="kakaoicon" width={42} height={42} />
+      </div>
+    </div>
+  );
+}
+
+export default SocialLogin;

app/(auth)/layout.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { basicFont } from "@/assets/fonts";
+
+function layout({ children }) {
+  return (
+    <div
+      className={`min-w-max min-h-screen ${basicFont.className} text-[#1F2937] flex items-center`}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default layout;

app/(auth)/login/page.jsx

@@ -0,0 +1,110 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import Image from "next/image";
+import Logo from "@/assets/svg/pandaLogo.svg";
+import Link from "next/link";
+import Button from "@/components/Button";
+import InputBox from "../_components/InputBox";
+import SocialLogin from "../_components/SocialLogin";
+
+function loginPage() {
+  const [userData, setUserData] = useState({ email: "", password: "" });
+  // const [error, setError] = useState({ email: "", password: "" });
+
+  const [disabled, setDisabled] = useState(true);
+  const [isActive, setIsActive] = useState("inactive");
+
+  useEffect(() => {
+    if (userData.email === "" || userData.password === "") {
+      //disable없애고 errorMsg 없으면 진행 있으면 강조
+      setDisabled(true);
+      setIsActive("inactive");
+    } else {
+      setDisabled(false);
+      setIsActive("active");
+    }
+  }, [userData]);
+
+  // const handleErrorMsg = (name, value) => {
+  //   switch (name) {
+  //     case "email":
+  //       if (!value) return "이메일을 입력해주세요";
+  //       return "";
+  //     case "password":
+  //       if (!value) return "비밀번호를 입력해주세요";
+  //   }
+  // };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log(userData);
+  };
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setUserData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+    // const errorMsg = handleErrorMsg(name, value);
+    // setError((prev) => ({ ...prev, [name]: errorMsg }));
+  };
+
+  return (
+    <div className="md:w-[640px] flex flex-col md:gap-10 gap-6 m-auto w-[343px] ">
+      {/* 로고 */}
+      <div className="md:w-[369px] md:h-[132px] w-[198px] h-[66px] relative self-center">
+        <Link href="/">
+          <Image src={Logo.src} alt="logo" fill />
+        </Link>
+      </div>
+
+      <div className="flex flex-col gap-6">
+        <form className="flex flex-col gap-6" onSubmit={handleSubmit}>
+          {/* 입력 칸 */}
+          <div className="flex flex-col gap-2">
+            <InputBox
+              title="이메일"
+              name="email"
+              handleChange={handleChange}
+              userData={userData}
+              placeholder="이메일을 입력해주세요"
+            />
+            {/* {error.email && <div className="text-red pl-4">{error.email}</div>} */}
+          </div>
+
+          <InputBox
+            title="비밀번호"
+            name="password"
+            handleChange={handleChange}
+            userData={userData}
+            placeholder="비밀번호를 입력해주세요"
+          />
+
+          {/* 버튼 */}
+          <Button
+            className="w-full h-14 rounded-[40px] px-[124px] py-4"
+            isActive={isActive}
+            disabled={disabled}
+          >
+            로그인
+          </Button>
+        </form>
+
+        {/* 간편 로그인 */}
+        <SocialLogin />
+
+        {/* 회원가입 이동 */}
+        <div className="flex justify-center gap-1 font-medium">
+          <p>판다마켓이 처음이신가요?</p>{" "}
+          <Link href="/signup" className="text-blue">
+            회원가입
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default loginPage;