Merge pull request #491 from jangmoonwon/part3-장문원-week20

[장문원] week20

components/folder/tool-bar/ToolBar.tsx

@@ -1,21 +1,25 @@
 import styles from "./ToolBar.module.scss";
 import classNames from "classnames/bind";
-import { useFolders } from "@/pages/api/useFolders";
 import ToolBarBtnList from "../tool-bar-button-list/ToolBarBtnList";
 import { useState } from "react";
 import AddFolderButton from "../add-folder-button/AddFolderButton";
 import FolderButtons from "@/components/folder/folder-buttons/FolderButtons";
 import Share from "@/public/share.svg";
 import Pen from "@/public/pen.svg";
 import Delete from "@/public/delete.svg";
+import { getFolders } from "@/pages/api/getFolders";
+import { useQuery } from "@tanstack/react-query";
 
 const ALL_FOLDER_ID = 0;
 const ALL_FOLDER_NAME = "전체";
 
 const cx = classNames.bind(styles);
 
 export default function ToolBar() {
-  const { data } = useFolders();
+  const { data } = useQuery({
+    queryKey: ["folders"],
+    queryFn: getFolders,
+  });
   const [currentId, setCurrentId] = useState(ALL_FOLDER_ID);
   const [currentName, setCurrentName] = useState(ALL_FOLDER_NAME);
 

components/ui/loading/Loading.module.scss

@@ -0,0 +1,12 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #ffffff;
+  height: 100vh;
+}
+
+.text {
+  font-size: 10rem;
+  font-weight: 700;
+}

components/ui/loading/Loading.tsx

@@ -0,0 +1,12 @@
+import styles from "./Loading.module.scss";
+import classNames from "classnames/bind";
+
+const cx = classNames.bind(styles);
+
+export default function Loading() {
+  return (
+    <div className={cx("container")}>
+      <h1 className={cx("text")}>Loading...</h1>
+    </div>
+  );
+}

package.json

@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.4.0",
+    "@tanstack/react-query": "^5.48.0",
+    "@tanstack/react-query-devtools": "^5.48.0",
     "@types/classnames": "^2.3.1",
     "@types/sass": "^1.45.0",
     "axios": "^1.6.8",

pages/_app.tsx

@@ -1,6 +1,14 @@
 import "@/styles/resets.css";
 import type { AppProps } from "next/app";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+const queryClient = new QueryClient();
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
-}
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Component {...pageProps} />
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );

pages/api/axiosInstance.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 const axiosInstance = axios.create({
-  baseURL: "https://bootcamp-api.codeit.kr/api",
+  baseURL: "https://bootcamp-api.codeit.kr/api/linkbrary/v1",
 });
 
 export default axiosInstance;

pages/api/getFolders.ts

@@ -0,0 +1,15 @@
+import axiosInstance from "./axiosInstance";
+
+type Data = {
+  id: number;
+  created_at: string;
+  favorite: boolean;
+  name: string;
+  link_count: number;
+};
+
+export async function getFolders(): Promise<Data[]> {
+  const response = await axiosInstance.get("/users/1/folders");
+  const data: Data[] = response.data;
+  return data;
+}

pages/api/getLinks.ts

@@ -0,0 +1,17 @@
+import axiosInstance from "./axiosInstance";
+
+type Data = {
+  id: number;
+  created_at: string;
+  favorite: boolean;
+  url: string;
+  title: string;
+  image_source: string;
+  description: string;
+};
+
+export async function getLinks(): Promise<Data[]> {
+  const response = await axiosInstance.get("/users/1/links");
+  const data: Data[] = response.data;
+  return data;
+}

pages/api/getSampleLinks.ts

@@ -0,0 +1,16 @@
+import axiosInstance from "./axiosInstance";
+
+type Data = {
+  id: number;
+  created_at: string;
+  url: string;
+  title: string;
+  description: string;
+  image_source: string;
+};
+
+export async function getSampleLinks(): Promise<Data[]> {
+  const response = await axiosInstance.get("/sample/links");
+  const data: Data[] = response.data;
+  return data;
+}

pages/folder/index.tsx

@@ -4,19 +4,24 @@ import AddLinkBar from "@/components/folder/add-link-bar/AddLinkBar";
 import Layout from "@/components/layout/layout/Layout";
 import ToolBar from "@/components/folder/tool-bar/ToolBar";
 import CardList from "@/components/ui/card-list/CardList";
-import { useLinks } from "../api/useLinks";
 import formatDate from "@/lib/formatDate";
 import { getElapsedTime } from "@/lib/getElapsedTime";
 import Card from "@/components/ui/card/Card";
 import SearchBar from "@/components/shared/search-bar/SearchBar";
+import { useQuery } from "@tanstack/react-query";
+import { getLinks } from "../api/getLinks";
+import Loading from "@/components/ui/loading/Loading";
 
 const cx = classNames.bind(styles);
 
 export default function Folder() {
-  const { data, isLoading, isError } = useLinks();
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["links"],
+    queryFn: getLinks,
+  });
 
-  if (isLoading) return <div>loading</div>;
-  if (isError) return <div>error</div>;
+  if (isLoading) return <Loading />;
+  if (isError) return <div>Error</div>;
   if (!data) return <div>data없음</div>;
 
   return (
@@ -42,3 +47,5 @@ export default function Folder() {
         </div>
       </div>
     </Layout>
+  );
+}

pages/shared/index.tsx

@@ -7,37 +7,42 @@ import formatDate from "@/lib/formatDate";
 import { getElapsedTime } from "@/lib/getElapsedTime";
 import styles from "./Shared.module.scss";
 import classNames from "classnames/bind";
-import { useFolder } from "@/pages/hooks-test/useFolder";
+import { getSampleLinks } from "../api/getSampleLinks";
+import { useQuery } from "@tanstack/react-query";
+import Loading from "@/components/ui/loading/Loading";
 
 const cx = classNames.bind(styles);
 
 export default function Shared() {
-  const { data, isLoading, isError } = useFolder();
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["sampleLinks"],
+    queryFn: getSampleLinks,
+  });
 
-  if (isLoading) return <div>loading</div>;
-  if (isError) return <div>error</div>;
+  if (isLoading) return <Loading />;
+  if (isError) return <div>Error</div>;
   if (!data) return <div>data가 없음</div>;
 
   return (
     <Layout isSticky={false}>
       <div className={cx("container")}>
-        <FolderInfo
+        {/* <FolderInfo
           folderName={data.name}
           ownerName={data.owner.name}
           profileImage={data.owner.profileImageSource}
-        />
+        /> */}
         <div className={cx("item")}>
           <SearchBar />
           <CardList>
-            {data.links.map((link) => (
+            {data.map((link) => (
               <Card
                 key={link.id}
                 href={link.url}
-                imageSource={link.imageSource}
+                imageSource={link.image_source}
                 alt={"card"}
-                elapsedTime={getElapsedTime(link.createdAt)}
+                elapsedTime={getElapsedTime(link.created_at)}
                 description={link.description}
-                createdAt={formatDate(link.createdAt)}
+                createdAt={formatDate(link.created_at)}
               />
             ))}
           </CardList>

pages/test/index.tsx

@@ -1,19 +1,37 @@
-
 import styles from "./test.module.scss";
 import classNames from "classnames/bind";
-import { Button } from "./test";
+import { useQuery } from "@tanstack/react-query";
+import { getUsers } from "../api/testApi";
+import { useRouter } from "next/router";
 
 const cx = classNames.bind(styles);
 
 export default function Test() {
+  const router = useRouter();
+  const { userId } = router.query;
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["users", userId],
+    queryFn: () => getUsers(userId as string),
+  });
+
+  console.log(data);
+
+  const user = data && Array.isArray(data) ? data[0] : data;
+
+  if (isLoading) return "로딩 중입니다...";
+
   return (
     <div className={cx("container")}>
-      <Button variant="red" size="sm" className={cx("font-weight")}>
-        <span>red</span>
-      </Button>
-      <Button variant="sky" size="lg">
-        <span>sky</span>
-      </Button>
+      <h1>test page</h1>
+      {user ? (
+        <>
+          <h1>{user.email}</h1>
+          <h1>{user.name}</h1>
+        </>
+      ) : (
+        <h1>데이터가 없습니다</h1>
+      )}
     </div>
   );
 }