Next 엄성민 스프린트 미션 9

.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,254 @@
+import config from "@/postcss.config.mjs";
+import axios from "axios";
+import { jwtDecode } from "jwt-decode";
+
+// 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 createCommentInArticle = async (id, content) => {
+  const url = `/article/${id}/comment`;
+  const response = await client.post(url, { content });
+  const data = response.data;
+  return data;
+};
+
+const getCommentsinArticle = async (id) => {
+  const url = `article/${id}/comments`;
+  const response = await client.get(url);
+  const data = response.data;
+  return data;
+};
+
+const deleteCommentInArticle = async (id) => {
+  const url = `article/${id}/comment`;
+  const response = await client.delete(url);
+  const data = response.data;
+  return data;
+};
+
+const patchCommentInArticle = async (id, content) => {
+  const url = `article/${id}/comment`;
+  const response = await client.patch(url, { content });
+  const data = response.data;
+  return data;
+};
+
+// 상품 관련 api
+const getProducts = async () => {
+  const url = "/products";
+  const response = await client.get(url);
+  const data = response.data;
+  return data;
+};
+
+// 로그인 관련 api
+const codeitURL = "https://panda-market-api.vercel.app";
+
+export const codeitClient = axios.create({
+  baseURL: codeitURL,
+});
+
+codeitClient.interceptors.request.use(async (config) => {
+  if (config.url === "/auth/refresh-token") return config;
+  const Authorization = config.headers.Authorization || "";
+  const accessToken = Authorization.split("Bearer ")[1];
+
+  if (!accessToken) return config;
+
+  const { exp } = jwtDecode(accessToken);
+  if (exp * 1000 >= Date.now()) return config;
+
+  const prevRefreshToken = localStorage.getItem("refreshToken");
+  const { accessToken: newAccessToken } = await api.refreshToken(
+    prevRefreshToken
+  );
+  config.headers.Authorization = `Bearer ${newAccessToken}`;
+
+  return config;
+});
+
+const signUp = async (dto) => {
+  const url = "/auth/signUp";
+  const response = await codeitClient.post(url, dto);
+  const data = response.data;
+
+  const { accessToken, refreshToken } = data;
+  codeitClient.defaults.headers.Authorization = `Bearer ${accessToken}`;
+  localStorage.setItem("refreshToken", refreshToken);
+  return data;
+};
+
+const logIn = async (dto) => {
+  const url = "/auth/signIn";
+  const response = await codeitClient.post(url, dto);
+  const data = response.data;
+
+  const { accessToken, refreshToken } = data;
+  codeitClient.defaults.headers.Authorization = `Bearer ${accessToken}`;
+  localStorage.setItem("refreshToken", refreshToken);
+
+  return data;
+};
+
+const refreshToken = async (prevRefreshToken) => {
+  const url = "/auth/refresh-token";
+  const response = await codeitClient.post(url, {
+    refreshToken: prevRefreshToken,
+  });
+  const data = response.data;
+  const { accessToken } = data;
+  codeitClient.defaults.headers.Authorization = `Bearer ${accessToken}`;
+
+  return data;
+};
+
+// 유저정보 관련
+const getUserData = async () => {
+  const url = "/users/me";
+  const response = await codeitClient.get(url);
+  const data = response.data;
+  return data;
+};
+
+// product
+const getProduct = async (productId) => {
+  const url = `/products/${productId}`;
+  const response = await codeitClient.get(url);
+  const data = response.data;
+  return data;
+};
+
+const deleteProduct = async (productId) => {
+  const url = `/products/${productId}`;
+  const response = await codeitClient.delete(url);
+  const data = response.data;
+  return data;
+};
+
+const patchProduct = async (productId, dto) => {
+  const url = `/products/${productId}`;
+  const response = await codeitClient.patch(url, dto);
+  const data = response.data;
+  return data;
+};
+
+const getCommentsInProduct = async (productId, limit = 10) => {
+  const options = {
+    params: {
+      limit,
+    },
+  };
+  const url = `/products/${productId}/comments`;
+  const response = await codeitClient.get(url, options);
+  const data = response.data;
+  return data;
+};
+
+const deleteCommentInProduct = async (commentId) => {
+  const url = `/comments/${commentId}`;
+  const response = await codeitClient.delete(url);
+  const data = response.data;
+  return data;
+};
+
+const patchCommentInProduct = async (commentId, content) => {
+  const url = `/comments/${commentId}`;
+  const response = await codeitClient.patch(url, { content });
+  const data = response.data;
+  return data;
+};
+
+const createCommentInProduct = async (productId, content) => {
+  const url = `/products/${productId}/comments`;
+  const response = await codeitClient.post(url, { content });
+  const data = response.data;
+  return data;
+};
+
+const createFavoriteProduct = async (productId) => {
+  const url = `/products/${productId}/favorite`;
+  const response = await codeitClient.post(url);
+  const data = response.data;
+  return data;
+};
+
+const deleteFavoriteProduct = async (productId) => {
+  const url = `/products/${productId}/favorite`;
+  const response = await codeitClient.delete(url);
+  const data = response.data;
+  return data;
+};
+
+const api = {
+  getArticles,
+  getArticle,
+  createArticle,
+  deleteArticle,
+  patchArticle,
+  createCommentInArticle,
+  getCommentsinArticle,
+  deleteCommentInArticle,
+  patchCommentInArticle,
+  getProducts,
+  signUp,
+  logIn,
+  refreshToken,
+  getUserData,
+  getProduct,
+  deleteProduct,
+  patchProduct,
+  getCommentsInProduct,
+  deleteCommentInProduct,
+  patchCommentInProduct,
+  createCommentInProduct,
+  createFavoriteProduct,
+  deleteFavoriteProduct,
+};
+
+export default api;

app/(provider)/(auth)/_components/ErrorModal.jsx

@@ -0,0 +1,22 @@
+"use client";
+
+import Button from "@/components/Button";
+import Modal from "@/components/Modal";
+import { useModal } from "@/contexts/ModalContext";
+
+function LoginErrorModal({ children }) {
+  const modal = useModal();
+  return (
+    <Modal>
+      <div className="text-[18px] font-medium text-nowrap">{children}</div>
+      <Button
+        onClick={modal.close}
+        className="w-[120px] h-[48px] rounded-lg py-3 px-[23px] md:w-[165px]"
+      >
+        확인
+      </Button>
+    </Modal>
+  );
+}
+
+export default LoginErrorModal;