Merge pull request #538 from yunajoe/part3-조연아-week15

[조연아] week15
codeit-bootcamp-frontend · Dec 20, 2023 · 73870f5 · 73870f5
2 parents 3dbef71 + 7c5a4b0
commit 73870f5
Show file tree

Hide file tree

Showing 36 changed files with 637 additions and 332 deletions.
diff --git a/api/folder.ts b/api/folder.ts
@@ -1,3 +1,5 @@
+import instance from "@/utils/interceptors";
+
 type UserRequest = {
   userId: number;
   folderId?: string;
@@ -40,6 +42,23 @@ export type FolderLinks = {
   folder_id?: number;
 };
 
+// 15week type변경
+
+export type FolderDataProps = {
+  data: FolderData;
+};
+
+export type FolderData = {
+  folder: Folder[];
+};
+
+export type Folder = {
+  id: number;
+  created_at: string;
+  name: string;
+  user_id: number;
+};
+
 const baseUrl = new URL("https://bootcamp-api.codeit.kr");
 const getUrl = (path: string) => new URL(path, baseUrl);
 
@@ -76,3 +95,41 @@ export const fetchFolderLinks = async ({ userId, folderId }: UserRequest) => {
     return jsonData;
   }
 };
+
+// 15 weekly mission 으로 인한 API변경
+
+export const AuthFolderData = async () => {
+  const requestUrl = getUrl("/api/folders");
+  const response = await instance.get(requestUrl.toString());
+  const result = await response.data;
+  return result;
+};
+
+// https://bootcamp-api.codeit.kr/api/links?folderId=1
+
+// export const AuthFolderLinks = async (
+//   accessToken: string,
+//   folderId?: string
+// ) => {
+//   const requestUrl = getUrl(`/api/links?folderId=${folderId}`);
+//   try {
+//     const response = await fetch(requestUrl, {
+//       method: "GET",
+//       headers: {
+//         Authorization: `Bearer ${accessToken}`,
+//       },
+//     });
+//     const result = await response.json();
+//     return result;
+//   } catch (error) {
+//     return error;
+//   }
+// };
+
+export const AuthFolderLinks = async (folderId?: string) => {
+  const folderIdParam = folderId ? `$folderId=${folderId}` : "";
+  const requestUrl = getUrl(`/api/links?${folderIdParam}`);
+  const response = await instance.get(requestUrl.toString());
+  const result = await response.data;
+  return result;
+};
diff --git a/api/share.ts b/api/share.ts
@@ -1,3 +1,5 @@
+import instance from "@/utils/interceptors";
+
 export type ShareUser = {
   id: number;
   name: string;
@@ -22,14 +24,65 @@ export type FolderContents = {
   id: number;
   name: string;
   owner: Owner;
-  links: LinkContents[];
-  count: number;
+  links?: AuthShareLinks[];
+  count?: number;
 };
 
 export type FolderContentsProps = {
   folder: FolderContents;
 };
 
+// 15-week
+
+export type AuthShareUserData = {
+  data: AuthShareUser[];
+};
+
+export type AuthShareUser = {
+  id: number;
+  created_at: string;
+  name: string;
+  image_source: string;
+  email: string;
+  auth_id: string;
+};
+
+export type AuthShareFolderData = {
+  data: AuthShareFolder[];
+};
+
+export type AuthShareFolder = {
+  id: number;
+  created_at: string;
+  name: string;
+  user_id: number;
+};
+
+export type AuthUserError = {
+  error: {
+    message: string;
+  };
+};
+export type AuthUser = {
+  id: number;
+  created_at: string;
+  name: string;
+  image_source: string;
+  email: string;
+  auth_id: string;
+};
+
+export type AuthShareLinks = {
+  id: number;
+  created_at: string;
+  updated_at: any;
+  url: string;
+  title: string;
+  description: string;
+  image_source: string;
+  folder_id: number;
+};
+
 const baseUrl = new URL("https://bootcamp-api.codeit.kr");
 const getUrl = (path: string) => new URL(path, baseUrl);
 
@@ -55,3 +108,59 @@ export const getShareFolderData = async () => {
     return jsonData;
   }
 };
+
+//  15week 으로 인한 api변경..
+export const getAuthShareUserData = async ({ userId }: { userId: number }) => {
+  const requestUrl = getUrl(`/api/users/${userId}`);
+  const response = await fetch(requestUrl, {
+    method: "GET",
+  });
+
+  if (response.status === 200) {
+    const jsonData = await response.json();
+    return jsonData;
+  }
+};
+
+export const getAuthSharedFolderData = async ({
+  folderId,
+}: {
+  folderId: string | string[] | undefined;
+}) => {
+  const requestUrl = getUrl(`/api/folders/${folderId}`);
+  const response = await fetch(requestUrl, {
+    method: "GET",
+  });
+
+  if (response.status === 200) {
+    const jsonData = await response.json();
+    return jsonData;
+  }
+};
+
+export const getAuthSharedLinksData = async ({
+  userId,
+  folderId,
+}: {
+  userId: number;
+  folderId: string | string[] | undefined;
+}) => {
+  const requestUrl = getUrl(`/api/users/${userId}/links?folderId=${folderId}`);
+  const response = await fetch(requestUrl, {
+    method: "GET",
+  });
+
+  if (response.status === 200) {
+    const jsonData = await response.json();
+    return jsonData;
+  }
+};
+
+// data: {error: message} => 401엘어
+// https://bootcamp-api.codeit.kr/docs 에서 인증이 필요한(자물쇠 아이콘이 있음) api의 경우 Authorization 리퀘스트 헤더에 “Bearer {accessToken}”을 함께 보내야 합니다.
+export const getCurrentUser = async () => {
+  const requestUrl = getUrl(`api/users`);
+  const response = await instance.get(requestUrl.toString());
+  const result = await response.data;
+  return result;
+};
diff --git a/components/datalist/DataList.tsx b/components/datalist/DataList.tsx
@@ -1,44 +1,22 @@
 import React, { useContext } from "react";
 import DataListItem from "./DataListItem";
 import styles from "./DataList.module.css";
-import LocaleContext from "../../contexts/LocaleContext";
 import SearchContext from "../../contexts/SearchContext";
+import { Folder } from "@/types/folderMenuListTypes";
+export type Data = Folder[] | [] | undefined;
 
 type DataListProps = {
   folderIdKey: string | undefined;
+  data: Data;
 };
 
-export default function DataList({ folderIdKey }: DataListProps) {
-  const { LinkSDataArr } = useContext(LocaleContext);
+export default function DataList({ folderIdKey, data }: DataListProps) {
   const { inputValue, handleInputFunc } = useContext(SearchContext);
 
   if (!folderIdKey) {
     return (
       <div className={styles.container}>
-        {LinkSDataArr?.map((data) => {
-          const { folderId, linksdata } = data;
-
-          if (!folderId) {
-            return linksdata?.map((item) => {
-              const { url, title, description } = item;
-              if (
-                url?.includes(inputValue) ||
-                title?.includes(inputValue) ||
-                description?.includes(inputValue)
-              )
-                return <DataListItem key={item.id} item={item} />;
-            });
-          }
-        })}
-      </div>
-    );
-  }
-
-  return (
-    <div className={styles.container}>
-      {LinkSDataArr?.filter((data) => data.folderId === Number(folderIdKey))
-        ?.map((data) => data.linksdata)[0]
-        ?.map((item) => {
+        {data?.map((item) => {
           const { url, title, description } = item;
           if (
             url?.includes(inputValue) ||
@@ -47,6 +25,21 @@ export default function DataList({ folderIdKey }: DataListProps) {
           )
             return <DataListItem key={item.id} item={item} />;
         })}
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      {data?.map((item) => {
+        const { url, title, description } = item;
+        if (
+          url?.includes(inputValue) ||
+          title?.includes(inputValue) ||
+          description?.includes(inputValue)
+        )
+          return <DataListItem key={item.id} item={item} />;
+      })}
     </div>
   );
 }
diff --git a/components/foldermenulist/FolderMenuList.tsx b/components/foldermenulist/FolderMenuList.tsx
@@ -1,40 +1,43 @@
 import React, { useContext } from "react";
 import Button from "../button/Button";
 import styles from "./FolderMenuList.module.css";
-import LocaleContext from "../../contexts/LocaleContext";
 import Plus from "@/public/images/plus.svg";
-
 import { useRouter } from "next/router";
+import { FolderMenuListProps } from "@/types/folderMenuListTypes";
 
-export default function FolderMenuList() {
-  const { LinkSDataArr, folderIdKey } = useContext(LocaleContext);
+export default function FolderMenuList({
+  folderMenu,
+  folderId,
+}: {
+  folderMenu: FolderMenuListProps[] | undefined;
+  folderId: string | undefined;
+}) {
   const router = useRouter();
-  // const { id } = router.query;
 
   return (
     <div className={styles.container}>
       <div className={styles.sub__container}>
-        {LinkSDataArr?.map((item) => {
-          const { folderId, folderName } = item;
+        {folderMenu?.map((item) => {
+          const { id, name } = item;
 
           let isActive = false;
-          if (String(folderId) === folderIdKey) {
-            isActive = true;
-          }
-          if (folderId === "" && !folderIdKey) {
+          if (id === Number(folderId)) {
             isActive = true;
           }
 
           return (
             <Button
               isActive={isActive}
               onClick={() => {
-                router.push(`/folder/${folderId}`);
+                if (id === 0) {
+                  router.push("/folder");
+                  return;
+                }
+                router.push(`/folder/${id}`);
               }}
-              // key={item.folderId}
-              key={folderId}
+              key={id}
             >
-              {folderName}
+              {name}
             </Button>
           );
         })}

diff --git a/components/imagelist/ImageList.tsx b/components/imagelist/ImageList.tsx
@@ -14,7 +14,7 @@ export default function ImageList({ data }: { data: FolderContentsProps }) {
     return (
       <ul>
         <div className={styles.container}>
-          {links.map((item) => (
+          {links?.map((item) => (
             <li key={item.id}>
               <ImageListItem item={item} />
             </li>
@@ -26,7 +26,7 @@ export default function ImageList({ data }: { data: FolderContentsProps }) {
   return (
     <ul>
       <div className={styles.container}>
-        {links.map((item) => {
+        {links?.map((item) => {
           const { url, title, description } = item;
           if (
             url.includes(inputValue) ||

diff --git a/components/imagelist/ImageListItem.tsx b/components/imagelist/ImageListItem.tsx
@@ -3,27 +3,18 @@ import styles from "./ImageListItem.module.css";
 import { getElapsedTime, parseDatestring } from "@/utils/caltime";
 import Card from "../card/Card";
 import Link from "next/link";
-import { LinkContents } from "@/api/share";
-import Image from "next/image";
+import { AuthShareLinks } from "@/api/share";
 
-export default function ImageListItem({ item }: { item: LinkContents }) {
-  const { id, createdAt, url, title, description, imageSource } = item;
-  const targetData = parseDatestring(createdAt);
+export default function ImageListItem({ item }: { item: AuthShareLinks }) {
+  const { id, created_at, url, title, description, image_source } = item;
+  const targetData = parseDatestring(created_at);
   const { year, month, day } = targetData;
-  const diffTime = getElapsedTime(createdAt);
+  const diffTime = getElapsedTime(created_at);
 
   return (
     <Link href={url}>
       <Card>
-        {/* <Image
-          className={styles.card__image}
-          src={imageSource}
-          alt={title}
-          width={20}
-          height={20}
-        /> */}
-        {/* <img src={imageSource}></img> */}
-        <img className={styles.card__image} src={imageSource} alt={title} />
+        <img className={styles.card__image} src={image_source} alt={title} />
         <p>{diffTime}</p>
         <p>{description}</p>
         <p>

diff --git a/components/input/Input.tsx b/components/input/Input.tsx
@@ -4,7 +4,7 @@ import styles from "./Input.module.css";
 import { ErrorMessage } from "@hookform/error-message";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
-import { InputProps } from "../types/hookFormTypes";
+import { InputProps } from "@/types/hookFormTypes";
 
 export default function Input({
   type,