[김동현] week16

src/api/api.tsx

@@ -18,8 +18,8 @@ export async function getFolders() {
   }
 }
 
-export async function getUserFolders(folderId: string | undefined) {
-  let url = "/users/1/links";
+export async function getUserFolders(userId: string = '1', folderId?: string ) {
+  let url = "/users/${userId}/links";
 
   if (folderId) {
     url += `?folderId=${folderId}`;
@@ -33,9 +33,9 @@ export async function getUserFolders(folderId: string | undefined) {
   }
 }
 
-export async function getButtonList() {
+export async function getButtonList(userId: string = '1') {
   try {
-    const response = await http.get("/users/1/folders");
+    const response = await http.get("/users/${userId}/folders");
     return response.data;
   } catch (error) {
     throw new Error("버튼 리스트를 불러오는데 실패했습니다.");

src/components/ButtonGroup.tsx

@@ -1,12 +1,17 @@
 import "./ButtonGroup.css";
 import add_icon from "../assets/svg/add.svg";
+import { ButtonGroupProps } from "../types/type";
+
+function ButtonGroup({ buttonList }: ButtonGroupProps) {
+  if (!Array.isArray(buttonList)) {
+    return null; 
+  }
 
-function ButtonGroup({ buttonList }: any) {
   return (
     <div className="button_area">
       <div className="button_list">
         <button className="button_folder">전체</button>
-        {buttonList.map((button: any) => (
+        {buttonList.map((button) => (
           <button key={button.id} type="button" className="button_folder">
             {button.name}
           </button>

src/components/CardList.tsx

@@ -1,10 +1,11 @@
+import { FolderData, FolderProps } from "types/type";
 import Card from "./Card";
 import "./CardList.css";
 
-function CardList({ items }: any) {
+function CardList({ folderList }: FolderProps) {
   return (
     <ul className="card_list">
-      {items ? items.map((item: any) => <Card item={item} key={item.id} />) : null}
+      {folderList ? folderList.map((item: FolderData) => <Card cardList={item} key={item.id} />) : null}
     </ul>
   );
 }

src/components/CardsArea.tsx

@@ -1,13 +1,14 @@
 import "./CardsArea.css";
 import CardList from "./CardList";
+import { FolderProps } from "types/type";
 
 // 에러처리, 로딩처리 추후 추가 예정
-function CardsArea({ foldersData }: any) {
+function CardsArea({ folderList }: FolderProps) {
   return (
     <div className="card_area">
       <div className="card_wrapper">
         {/* {buttonData ? <ButtonList buttonData={buttonData} /> : " "} */}
-        <CardList items={foldersData} />
+        <CardList folderList={folderList} />
       </div>
     </div>
   );

src/pages/folder/FolderPage.tsx

@@ -12,12 +12,12 @@ import pen_icon from "../../assets/svg/pen.svg";
 import share_icon from "../../assets/svg/share.svg";
 import delete_icon from "../../assets/svg/delete.svg";
 import ButtonGroup from "../../components/ButtonGroup";
-import { UserData, FolderData, ButtonData } from "@/src/types/type";
+import { UserData, FolderData, ButtonData } from "types/type";
 
 function FolderPage() {
-  const [users, setUsers] = useState<UserData | undefined>();
-  const [folders, setFolders] = useState<FolderData | undefined>();
-  const [buttons, setButtons] = useState<ButtonData | undefined>();
+  const [users, setUsers] = useState<UserData>();
+  const [folders, setFolders] = useState<FolderData[]>();
+  const [buttons, setButtons] = useState<ButtonData[]>();
   // const [folderTitle, setFolderTitle] = useState("전체");
   const [folderTitle] = useState("전체");
   // const [isLoading, setIsLoading] = useState(false);
@@ -74,9 +74,7 @@ function FolderPage() {
 
     loadUserFoldersData();
   }, [id]);
-
-  console.log(folders);
-
+
   return (
     <div className="folderPage">
       <Gnb userEmail={users?.email} />
@@ -105,7 +103,7 @@ function FolderPage() {
         </div>
         {folders ? (
           <div>
-            <CardsArea foldersData={folders} />
+            <CardsArea folderList={folders} />
           </div>
         ) : (
           <div className="folder_no_link">저장된 링크가 없습니다.</div>

src/pages/share/SharePage.tsx

@@ -6,11 +6,11 @@ import Banner from "../../components/Banner";
 import SearchBar from "../../components/SearchBar";
 import CardsArea from "../../components/CardsArea";
 import Footer from "../../components/Footer";
-import { FolderData, UserData } from "@/src/types/type";
+import { FolderData, UserData } from "../../types/type";
 
 function SharePage() {
   const [users, setUsers] = useState<UserData | undefined>();
-  const [folders, setFolders] = useState<FolderData | undefined>();
+  const [folders, setFolders] = useState<FolderData[]>();
   // const [isLoading, setIsLoading] = useState(false);
   // const [error, setError] = useState(null);
 
@@ -53,7 +53,7 @@ function SharePage() {
       <Banner userName={users?.name} />
       <div className="sharePage_contents">
         <SearchBar />
-        <CardsArea foldersData={folders} />
+        <CardsArea folderList={folders} />
       </div>
       <Footer />
     </div>

src/types/type.d.ts

@@ -14,6 +14,10 @@ export interface FolderData {
   imageSource?: string;
 }
 
+export interface FolderProps{
+  folderList: FolderData[] | undefined;
+}
+
 export interface ButtonData {
   id: number;
   created_at: string;
@@ -23,6 +27,11 @@ export interface ButtonData {
   link?: any;
 }
 
+
+export interface ButtonGroupProps {
+  buttonList: ButtonData[] | undefined;
+};
+
 export interface Icon {
   id: number;
   name: string;

tsconfig.json

@@ -13,8 +13,29 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"]
+      "api/*": [
+        "src/api/*"
+      ],
+      "assets/*": [
+        "src/assets/*"
+      ],
+      "components/*": [
+        "src/components/*"
+      ],
+      "constants/*": [
+        "src/constants/*"
+      ],
+      "pages/*": [
+        "src/pages/*"
+      ],
+      "types/*":[
+        "src/types/*"
+      ],
+      "util/*": [
+        "src/util/*"
+      ],
     },
     "typeRoots": ["./node_modules/@types", "@types"]
   },