[정진호] week19

apis/instance.ts

@@ -0,0 +1,20 @@
+import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
+
+const instance = axios.create({
+  baseURL: "https://bootcamp-api.codeit.kr/api/linkbrary/v1",
+  timeout: 10000,
+});
+
+export const request = (config: AxiosRequestConfig) => {
+  const client = instance;
+  return client(config);
+};
+
+const fetcher = async <T>(config: AxiosRequestConfig) => {
+  const response = await request({ ...config });
+  const { data, status }: { data: T; status: number } = response;
+
+  return { data, status };
+};
+
+export default fetcher;

apis/queryClientProvider.ts

@@ -0,0 +1,71 @@
+import { getAccessToken } from "@/business/getAccessToken";
+import { QueryClient } from "@tanstack/react-query";
+import { GetServerSidePropsContext } from "next";
+import { FolderById, Folders, Link, User, UserById } from "@/types/server.type";
+import fetcher from "./instance";
+
+export const queryClientProvider = async (context: GetServerSidePropsContext) => {
+  const queryClient = new QueryClient();
+
+  const accessToken = getAccessToken(context) as string;
+
+  const url = context.req.url as string;
+
+  await queryClient.prefetchQuery({
+    queryKey: ["currentUser"],
+    queryFn: () => fetcher<User[]>({ method: "get", url: "/users", headers: { Authorization: accessToken } }),
+  });
+
+  const folder_ID = context.query["id"];
+
+  if (folder_ID) {
+    const folderData = await queryClient.fetchQuery({
+      queryKey: ["FolderById", folder_ID],
+      queryFn: () => fetcher<FolderById[]>({ method: "get", url: `/folders/${folder_ID}` }),
+    });
+
+    const [{ user_id: user_ID }] = folderData?.data ?? [];
+
+    if (user_ID) {
+      await queryClient.prefetchQuery({
+        queryKey: ["userById", user_ID],
+        queryFn: () => fetcher<UserById[]>({ method: "get", url: `/users/${user_ID}` }),
+      });
+
+      await queryClient.prefetchQuery({
+        queryKey: ["LinkById", folder_ID],
+        queryFn: () => fetcher<Link[]>({ method: "get", url: `/folders/${folder_ID}/links` }),
+      });
+    }
+  }
+
+  if (url === "/folder") {
+    const folderData = await queryClient.fetchQuery({
+      queryKey: ["Folders"],
+      queryFn: () => fetcher<Folders[]>({ method: "get", url: "/folders", headers: { Authorization: accessToken } }),
+    });
+
+    if (folderData?.data) {
+      await queryClient.prefetchQuery({
+        queryKey: ["Links", 0],
+        queryFn: () => fetcher<Link[]>({ method: "get", url: `/links`, headers: { Authorization: accessToken } }),
+      });
+
+      folderData.data.forEach(async (data) => {
+        const folder_Id = data.id;
+
+        await queryClient.prefetchQuery({
+          queryKey: ["Links", folder_Id],
+          queryFn: () =>
+            fetcher<Link[]>({
+              method: "get",
+              url: `/folders/${folder_Id}/links`,
+              headers: { Authorization: accessToken },
+            }),
+        });
+      });
+    }
+  }
+
+  return { queryClient, accessToken };
+};

business/getAccessToken.ts

@@ -0,0 +1,7 @@
+import { GetServerSidePropsContext } from "next";
+
+export const getAccessToken = (context: GetServerSidePropsContext) => {
+  const accessToken = context.req.cookies["accessToken"];
+
+  return accessToken ?? "";
+};

business/sign/signError.ts

@@ -0,0 +1,74 @@
+import { handleInputErrorFunc } from "@/types/client.type";
+import { isEmail, isPassword } from "./validation";
+import instance from "@/apis/instance";
+
+const errorText = {
+  email: {
+    null: "이메일을 입력해주세요",
+    wrong: "올바른 이메일 주소가 아닙니다",
+    dup: "이미 사용 중인 이메일입니다",
+  },
+  password: {
+    null: "비밀번호를 입력해주세요",
+    wrong: "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요",
+  },
+  passwordCheck: {
+    wrong: "비밀번호가 일치하지 않아요",
+  },
+};
+
+const checkEmail = async (value: string) => {
+  const response = await instance.post("/users/check-email", { data: { email: value } });
+
+  return response.status === 409;
+};
+
+const signinEmail = ({ value, setErrorText }: handleInputErrorFunc) => {
+  if (value === "") {
+    setErrorText(errorText["email"]["null"]);
+  } else if (!isEmail(value)) {
+    setErrorText(errorText["email"]["wrong"]);
+  } else {
+    setErrorText("");
+  }
+};
+
+const signinPassword = ({ value, setErrorText }: handleInputErrorFunc) => {
+  if (value === "") {
+    setErrorText(errorText["password"]["null"]);
+  } else {
+    setErrorText("");
+  }
+};
+
+const signupEmail = async ({ value, setErrorText }: handleInputErrorFunc) => {
+  if (value === "") {
+    setErrorText(errorText["email"]["null"]);
+  } else if (!isEmail(value)) {
+    setErrorText(errorText["email"]["wrong"]);
+  } else if (await checkEmail(value)) {
+    setErrorText(errorText["email"]["dup"]);
+  } else {
+    setErrorText("");
+  }
+};
+
+const signupPassword = ({ value, setErrorText }: handleInputErrorFunc) => {
+  if (value === "") {
+    setErrorText(errorText["password"]["null"]);
+  } else if (!isPassword(value)) {
+    setErrorText(errorText["password"]["wrong"]);
+  } else {
+    setErrorText("");
+  }
+};
+
+const signupPasswordCheck = ({ value, setErrorText, valueToCompare }: handleInputErrorFunc) => {
+  if (value !== valueToCompare) {
+    setErrorText(errorText["passwordCheck"]["wrong"]);
+  } else {
+    setErrorText("");
+  }
+};
+
+export { signinEmail, signinPassword, signupEmail, signupPassword, signupPasswordCheck };

business/sign/validation.ts

@@ -0,0 +1,11 @@
+const isEmail = (input: string) => {
+  const emailRegex = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
+  return emailRegex.test(input);
+};
+
+const isPassword = (input: string) => {
+  const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d).{8,}$/;
+  return passwordRegex.test(input);
+};
+
+export { isEmail, isPassword };

components/Binder/Binder.tsx

@@ -1,56 +1,41 @@
 import styles from "./Binder.module.css";
-import Card from "../Card/Card";
-import { Dispatch, FormEvent, MouseEvent, SetStateAction, useCallback, useEffect, useState } from "react";
-import { Linkinfo } from "@/API/getLinksByFolderID";
+import { Link } from "@/types/server.type";
+import { Dispatch, FormEvent, MouseEvent, SetStateAction, useEffect, useState } from "react";
+import Card from "./Card/Card";
+import EmptyNoti from "./EmptyNoti/EmptyNoti";
 
 interface Props {
-  cards: Linkinfo[];
+  cards: Link[];
   shared?: Boolean;
   handleClick?: (e: MouseEvent | FormEvent) => void;
-  setTarget?: Dispatch<SetStateAction<string | null | undefined>>;
-  setTargetURL?: React.Dispatch<React.SetStateAction<string>>;
   value: string;
 }
 
-function Binder({ cards, shared = false, value: searchValue, handleClick, setTarget, setTargetURL }: Props) {
-  const [links, setLinks] = useState(cards);
-
-  const handleButtonClick = (e: MouseEvent | FormEvent, targetName: string) => {
-    if (handleClick && setTarget) {
-      handleClick(e);
-      setTarget(targetName);
-    }
-  };
-
-  const filterLinks = useCallback(
-    (searchValue: string) => {
-      const filteredLinks = cards.filter(
-        (link) =>
-          link.url?.toLowerCase().includes(searchValue.toLowerCase()) ||
-          link.title?.toLowerCase().includes(searchValue.toLowerCase()) ||
-          link.description?.toLowerCase().includes(searchValue.toLowerCase())
-      );
-      setLinks(filteredLinks);
-    },
-    [cards]
+const filterLinks = (searchValue: string, setLinks: Dispatch<SetStateAction<Link[]>>, cards: Link[]) => {
+  const filteredLinks = cards.filter(
+    (link) =>
+      link.url?.toLowerCase().includes(searchValue.toLowerCase()) ||
+      link.title?.toLowerCase().includes(searchValue.toLowerCase()) ||
+      link.description?.toLowerCase().includes(searchValue.toLowerCase())
   );
+  setLinks(filteredLinks);
+};
+
+function Binder({ cards, shared = false, value: searchValue }: Props) {
+  const [links, setLinks] = useState(cards);
 
   useEffect(() => {
-    filterLinks(searchValue);
-  }, [searchValue, filterLinks]);
+    filterLinks(searchValue, setLinks, cards);
+  }, [searchValue, cards]);
+
+  if (cards.length === 0) return <EmptyNoti />;
 
   return (
     <article className={styles.root}>
       {links.map((card) => {
         return (
           <li className={styles.cardContainer} key={card.id}>
-            <Card
-              card={card}
-              setTargetURL={setTargetURL}
-              shared={shared}
-              deleteLink={(e) => handleButtonClick(e, "deleteLink")}
-              addLinkToFolder={(e) => handleButtonClick(e, "AddLinkToFolderFromCard")}
-            />
+            <Card card={card} shared={shared} />
           </li>
         );
       })}

components/Binder/Card/Card.module.css

@@ -0,0 +1,106 @@
+.root {
+  width: 34rem;
+  height: 33.4rem;
+  border-radius: 1.5rem;
+  box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.08);
+}
+
+.image {
+  width: 100%;
+  height: 20rem;
+  border-top-right-radius: 1.5rem;
+  border-top-left-radius: 1.5rem;
+  background-position: center;
+  background-size: 112%;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-start;
+}
+
+.star {
+  width: 3.4rem;
+  height: 3.4rem;
+  margin: 1.5rem;
+}
+
+.deleteButton {
+  font-size: 1.6rem;
+  width: 100%;
+  padding: 1.6rem 2rem;
+  background: var(--error);
+}
+
+.addButton {
+  font-size: 1.6rem;
+  width: 100%;
+  padding: 1.6rem 2rem;
+}
+
+@keyframes hoverImageSizeChanger {
+  from {
+    background-size: 112%;
+  }
+
+  to {
+    background-size: 125%;
+  }
+}
+
+.hoverImage {
+  animation: hoverImageSizeChanger 0.25s ease-in-out forwards;
+}
+
+.hoverBgColor {
+  background-color: #f0f6ff;
+}
+
+.explanation {
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 2rem;
+  gap: 1rem;
+}
+
+.header {
+  display: flex;
+  font-size: 1.3rem;
+  color: #666;
+  justify-content: space-between;
+}
+
+.text {
+  font-size: 1.6rem;
+  width: 30rem;
+  line-height: 24px;
+  height: 4.9rem;
+}
+
+.text div {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 1.6rem;
+}
+
+.footer {
+  height: 1.9rem;
+  font-size: 1.4rem;
+}
+
+@media (max-width: 1191px) {
+  .text {
+    width: 100%;
+    max-width: 35vw;
+  }
+
+  .root {
+    width: 100%;
+  }
+}
+
+@media (max-width: 767px) {
+  .text {
+    width: 100%;
+    max-width: 55vw;
+  }
+}