[김준영] Week16

components/folder/card/CardList.tsx

@@ -42,30 +42,31 @@ const CardList = ({ links }: { links: TLink[] | undefined }) => {
   //   loadLinks();
   // }, [currentFolder, keyword]);
 
-  if (links?.length === 0) return <NoLink />;
+  if (!links || links?.length === 0) return <NoLink />;
   return (
     <CardListContainer>
-      {links?.map((link) => {
-        const createdAt = link.created_at || link.createdAt;
-        const imageSource = link.image_source || link.imageSource;
+      {links &&
+        links.map((link) => {
+          const createdAt = link.created_at || link.createdAt;
+          const imageSource = link.image_source || link.imageSource;
 
-        const createdDate = new Date(createdAt as string);
-        const currentDate = new Date();
+          const createdDate = new Date(createdAt as string);
+          const currentDate = new Date();
 
-        return (
-          <Card
-            key={link.id}
-            id={link.id}
-            cardImage={imageSource}
-            cardTime={{
-              createdDateString: formatDate(createdDate),
-              timeDifference: getTimeDifference(createdDate, currentDate),
-            }}
-            cardDescription={link.description || ""}
-            cardUrl={link.url}
-          />
-        );
-      })}
+          return (
+            <Card
+              key={link.id}
+              id={link.id}
+              cardImage={imageSource}
+              cardTime={{
+                createdDateString: formatDate(createdDate),
+                timeDifference: getTimeDifference(createdDate, currentDate),
+              }}
+              cardDescription={link.description || ""}
+              cardUrl={link.url}
+            />
+          );
+        })}
     </CardListContainer>
   );
 };

components/folder/tag/TagList.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Tag from "@/components/folder/tag/Tag";
 import styled from "styled-components";
 import { useFolder } from "@/contexts/FolderContext";
 import { TFolder } from "@/utils/types";
+import { getFolderInfo } from "@/utils/api";
 
 const TagListContainer = styled.div`
   width: 90%;
@@ -12,13 +13,28 @@ const TagListContainer = styled.div`
   gap: 10px;
 `;
 
-const TagList = ({ foldersInfo }: { foldersInfo: TFolder[] }) => {
+const TagList = ({
+  foldersInfo,
+  folderId,
+}: {
+  foldersInfo: TFolder[];
+  folderId: number;
+}) => {
   const { currentFolder, setCurrentFolder } = useFolder();
 
   const handleClickTag = (id: number, name: string) => {
     setCurrentFolder({ id, name });
   };
 
+  const loadFolder = async () => {
+    const res = await getFolderInfo(folderId);
+    setCurrentFolder({ id: res.id, name: res.name });
+  };
+
+  useEffect(() => {
+    loadFolder();
+  }, []);
+
   return (
     <TagListContainer>
       <Tag
@@ -29,7 +45,7 @@ const TagList = ({ foldersInfo }: { foldersInfo: TFolder[] }) => {
       >
         전체
       </Tag>
-      {foldersInfo.length !== 0
+      {foldersInfo
         ? foldersInfo.map((folder) => {
             return (
               <Tag

components/sharing/modal/ModalFolderList.tsx

@@ -27,7 +27,6 @@ function ModalFolderList() {
     loadFolders();
   }, []);
 
-  if (!folders) return <></>;
   return (
     <FolderList>
       {folders.map((folder: TFolder) => (

contexts/MyInfoContext.tsx

@@ -0,0 +1,58 @@
+import React, {
+  createContext,
+  ReactNode,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+
+export type MyInfo = {
+  id: number;
+  created_at: string;
+  name: string;
+  image_source: string;
+  email: string;
+  auth_id: string;
+};
+
+type MyInfoContextValue = {
+  myInfo: MyInfo;
+  setMyInfo: (value: MyInfo) => void;
+};
+
+const MyInfoContext = createContext<MyInfoContextValue>({
+  myInfo: {
+    id: 0,
+    created_at: "",
+    name: "",
+    image_source: "",
+    email: "",
+    auth_id: "",
+  },
+  setMyInfo: () => {},
+});
+
+export const MyInfoProvider = ({ children }: { children: ReactNode }) => {
+  const [myInfo, setMyInfo] = useState({
+    id: 0,
+    created_at: "",
+    name: "",
+    image_source: "",
+    email: "",
+    auth_id: "",
+  });
+
+  const value = useMemo(() => ({ myInfo, setMyInfo }), [myInfo]);
+
+  return (
+    <MyInfoContext.Provider value={value}>{children}</MyInfoContext.Provider>
+  );
+};
+
+export const useMyInfo = () => {
+  const context = useContext(MyInfoContext);
+  if (!context) {
+    throw new Error("");
+  }
+  return context;
+};

next.config.js

@@ -2,25 +2,10 @@
 const nextConfig = {
   reactStrictMode: true,
   images: {
-    domains: [
-      "jasonwatmore.com",
-      "codeit-images.codeit.com",
-      "codeit-frontend.codeit.com",
-      "reactjs.org",
-      "assets.vercel.com",
-      "tanstack.com",
-      "storybook.js.org",
-      "testing-library.com",
-      "*.*",
-      "static.cdninstagram.com",
-      "s.pstatic.net",
-    ],
     remotePatterns: [
       {
         protocol: "https",
-        hostname: "bootcamp-api.codeit.kr",
-        port: "",
-        pathname: "/api/**", //**는 해당 경로 뒤에 모든 경로,
+        hostname: "**",
       },
     ],
   },

pages/_app.tsx

@@ -1,17 +1,20 @@
 import "@/styles/globals.css";
-import type {AppProps} from "next/app";
-import {FolderProvider} from "@/contexts/FolderContext";
+import type { AppProps } from "next/app";
+import { FolderProvider } from "@/contexts/FolderContext";
+import { MyInfoProvider } from "@/contexts/MyInfoContext";
 
 declare global {
-    interface Window {
-        Kakao: any;
-    }
+  interface Window {
+    Kakao: any;
+  }
 }
 
-export default function App({Component, pageProps}: AppProps) {
-    return (
-        <FolderProvider>
-            <Component {...pageProps} />
-        </FolderProvider>
-    );
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <MyInfoProvider>
+      <FolderProvider>
+        <Component {...pageProps} />
+      </FolderProvider>
+    </MyInfoProvider>
+  );
 }