[김창민] week20

1-weekly-mission-week15-main/pages/folder/[[...folderId]]/index.tsx

@@ -1,5 +1,4 @@
-import { useGetFolders } from "@/src/folder/data-access-folder";
-import { useGetLinks } from "@/src/link/data-access-link";
+import { useGetFolders, useGetLinks } from "@/src/auth/data-access-auth/api";
 import { Layout } from "@/src/sharing/feature-layout";
 import { FolderLayout } from "@/src/page-layout/FolderLayout";
 import { FolderToolBar } from "@/src/folder/feature-folder-tool-bar";
@@ -21,9 +20,13 @@ const FolderPage = () => {
     }
     return undefined;
   }, [router.isReady, folderId]);
+
   const { data: folders } = useGetFolders();
-  const { data: links, loading } = useGetLinks(currentFolderId);
-  const { searchValue, handleChange, handleCloseClick, result } = useSearchLink(links);
+  const { data: links, isLoading } = useGetLinks();
+
+  const { searchValue, handleChange, handleCloseClick, result } =
+    useSearchLink(links);
+
   const { ref, isIntersecting } = useIntersectionObserver<HTMLDivElement>();
 
   useEffect(() => {
@@ -38,10 +41,16 @@ const FolderPage = () => {
       <FolderLayout
         linkForm={<LinkForm hideFixedLinkForm={isIntersecting} />}
         searchBar={
-          <SearchBar value={searchValue} onChange={handleChange} onCloseClick={handleCloseClick} />
+          <SearchBar
+            value={searchValue}
+            onChange={handleChange}
+            onCloseClick={handleCloseClick}
+          />
+        }
+        folderToolBar={
+          <FolderToolBar folders={folders} selectedFolderId={currentFolderId} />
         }
-        folderToolBar={<FolderToolBar folders={folders} selectedFolderId={currentFolderId} />}
-        cardList={loading ? null : <CardList links={result} />}
+        cardList={isLoading ? null : <CardList links={result} />}
       />
     </Layout>
   );

1-weekly-mission-week15-main/pages/shared/[folderId]/index.tsx

@@ -1,24 +1,20 @@
 import {
-  useGetFolder,
-  useGetSampleFolder,
-} from "@/src/folder/data-access-folder";
+  useGetFolders,
+  useGetUser,
+  useGetSharedLinks,
+} from "@/src/auth/data-access-auth/api";
 import { Layout } from "@/src/sharing/feature-layout";
 import { SharedLayout } from "@/src/page-layout/SharedLayout";
 import { CardList } from "@/src/link/ui-card-list";
 import { FolderInfo } from "@/src/folder/ui-folder-info";
 import { ReadOnlyCard } from "@/src/link/ui-read-only-card";
 import { SearchBar } from "@/src/link/ui-search-bar";
 import { useSearchLink } from "@/src/link/util-search-link/useSearchLink";
-import { useRouter } from "next/router";
-import { useGetUser } from "@/src/user/data-access-user/useGetUser";
-import { useGetSharedLinks } from "@/src/link/data-access-link";
 
 const SharedPage = () => {
-  const router = useRouter();
-  const { folderId } = router.query;
-  const { data: folder } = useGetFolder(folderId as string);
-  const { data: owner } = useGetUser(folder.userId);
-  const { data: links } = useGetSharedLinks(folder.userId, folderId as string);
+  const { data: folder } = useGetFolders();
+  const { data: owner } = useGetUser();
+  const { data: links } = useGetSharedLinks();
 
   const { searchValue, handleChange, handleCloseClick, result } =
     useSearchLink(links);
@@ -28,9 +24,9 @@ const SharedPage = () => {
       <SharedLayout
         folderInfo={
           <FolderInfo
-            profileImage={owner.imageSource}
-            ownerName={owner.name}
-            folderName={folder.name}
+            profileImage={owner?.imageSource}
+            ownerName={owner?.name}
+            folderName={folder?.name}
           />
         }
         searchBar={

1-weekly-mission-week15-main/src/auth/data-access-auth/api.ts

@@ -0,0 +1,164 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { useState, useEffect } from "react";
+import { Link } from "@/src/link/type";
+
+const BASE_URL = "https://bootcamp-api.codeit.kr/api/linkbrary/v1";
+const DEFAULT_USER = {
+  id: 0,
+  name: "",
+  email: "",
+  imageSource: "",
+};
+
+interface LoginParams {
+  email: string;
+  password: string;
+}
+
+interface SignUpParams extends LoginParams {}
+
+export function usePostLogin() {
+  return useMutation({
+    mutationFn: async ({ email, password }: LoginParams) => {
+      const response = await fetch(`${BASE_URL}/auth/sign-in`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ email, password }),
+      });
+      const data = await response.json();
+
+      if (data?.accessToken) {
+        localStorage.setItem("accessToken", data.accessToken);
+      }
+      return data;
+    },
+  });
+}
+
+export function usePostSignup() {
+  return useMutation({
+    mutationFn: async ({ email, password }: SignUpParams) => {
+      const response = await fetch(`${BASE_URL}/auth/sign-up`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ email, password }),
+      });
+      const data = await response.json();
+      return data;
+    },
+  });
+}
+
+export function useGetUser() {
+  const [token, setToken] = useState<string | null>(null);
+
+  useEffect(() => {
+    setToken(localStorage.getItem("accessToken"));
+  }, []);
+
+  return useQuery({
+    queryKey: ["userInfo"],
+    queryFn: async () => {
+      const response = await fetch(`${BASE_URL}/users`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      const responseData = await response.json();
+
+      const data = responseData?.[0] && {
+        id: responseData?.[0].id,
+        name: responseData?.[0].name,
+        email: responseData?.[0].email,
+        imageSource: responseData?.[0].image_source,
+      };
+      localStorage.setItem("userId", data.id);
+
+      return data;
+    },
+    enabled: !!token,
+    initialData: DEFAULT_USER,
+  });
+}
+
+export function useGetFolders() {
+  const [token, setToken] = useState<string | null>(null);
+
+  useEffect(() => {
+    setToken(localStorage.getItem("accessToken"));
+  }, []);
+
+  return useQuery({
+    queryKey: ["folders"],
+    queryFn: async () => {
+      const response = await fetch(`${BASE_URL}/folders`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      const data = await response.json();
+      localStorage.setItem("folderId", data?.[0].id);
+
+      return data;
+    },
+    enabled: !!token,
+  });
+}
+export function useGetLinks() {
+  const [token, setToken] = useState<string | null>(null);
+
+  useEffect(() => {
+    setToken(localStorage.getItem("accessToken"));
+  }, []);
+
+  return useQuery({
+    queryKey: ["links"],
+    queryFn: async () => {
+      const response = await fetch(`${BASE_URL}/sample/links`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      const data = await response.json();
+      return data;
+    },
+  });
+}
+
+export function useGetSharedLinks() {
+  const [userId, setUserId] = useState<number | null>(null);
+  const [folderId, setFolderId] = useState<number | null>(null);
+
+  useEffect(() => {
+    setUserId(Number(localStorage.getItem("userId")));
+    setFolderId(Number(localStorage.getItem("folderId")));
+  }, []);
+
+  return useQuery<Link[]>({
+    queryKey: ["userLinks"],
+    queryFn: async () => {
+      const response = await fetch(
+        `${BASE_URL}/users/${userId}/links?folderId=${folderId}`,
+        {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      const data = await response.json();
+      return data;
+    },
+    enabled: !!userId,
+  });
+}

1-weekly-mission-week15-main/src/auth/feature-sign-in-form/SignInForm.tsx

@@ -1,7 +1,7 @@
 import { Input } from "@/src/sharing/ui-input";
 import { PasswordInput } from "@/src/sharing/ui-password-input";
 import { Controller, useForm } from "react-hook-form";
-import { useSignIn } from "../data-access-auth";
+import { usePostLogin } from "../data-access-auth/api";
 import { ERROR_MESSAGE, PLACEHOLDER } from "./constant";
 import { useEffect } from "react";
 import styles from "./SignInForm.module.scss";
@@ -16,30 +16,38 @@ export const SignInForm = () => {
     defaultValues: { email: "", password: "" },
     mode: "onBlur",
   });
-  const { execute, data, error } = useSignIn({
-    email: watch("email"),
-    password: watch("password"),
-  });
+  const { mutate: signIn, data, error } = usePostLogin();
 
-  useTokenRedirect(data?.data.accessToken);
+  useTokenRedirect(data?.data?.accessToken);
 
   useEffect(() => {
     if (error) {
       setError("email", { type: "invalid", message: ERROR_MESSAGE.emailCheck });
-      setError("password", { type: "invalid", message: ERROR_MESSAGE.passwordCheck });
+      setError("password", {
+        type: "invalid",
+        message: ERROR_MESSAGE.passwordCheck,
+      });
     }
   }, [error, setError]);
 
   return (
-    <form className={cx("form")} onSubmit={handleSubmit(execute)}>
+    <form
+      className={cx("form")}
+      onSubmit={handleSubmit((formData) =>
+        signIn({ email: formData.email, password: formData.password })
+      )}
+    >
       <div className={cx("input-box")}>
         <label className={cx("label")}>이메일</label>
         <Controller
           control={control}
           name="email"
           rules={{
             required: ERROR_MESSAGE.emailRequired,
-            pattern: { value: /\S+@\S+\.\S+/, message: ERROR_MESSAGE.emailInvalid },
+            pattern: {
+              value: /\S+@\S+\.\S+/,
+              message: ERROR_MESSAGE.emailInvalid,
+            },
           }}
           render={({ field, fieldState }) => (
             <Input