diff --git a/api/folder.ts b/api/folder.ts index b605ef741..ae1d74360 100644 --- 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 index 4497b772c..95df821dd 100644 --- 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 index 73d173c7b..52fdd7ef3 100644 --- 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 (
- {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 ; - }); - } - })} -
- ); - } - - return ( -
- {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 ; })} +
+ ); + } + + return ( +
+ {data?.map((item) => { + const { url, title, description } = item; + if ( + url?.includes(inputValue) || + title?.includes(inputValue) || + description?.includes(inputValue) + ) + return ; + })}
); } diff --git a/components/foldermenulist/FolderMenuList.tsx b/components/foldermenulist/FolderMenuList.tsx index c59ba1657..fb5c2de29 100644 --- a/components/foldermenulist/FolderMenuList.tsx +++ b/components/foldermenulist/FolderMenuList.tsx @@ -1,27 +1,27 @@ 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 (
- {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; } @@ -29,12 +29,15 @@ export default function FolderMenuList() { ); })} diff --git a/components/imagelist/ImageList.tsx b/components/imagelist/ImageList.tsx index c1daecd03..4bd815465 100644 --- a/components/imagelist/ImageList.tsx +++ b/components/imagelist/ImageList.tsx @@ -14,7 +14,7 @@ export default function ImageList({ data }: { data: FolderContentsProps }) { return (
diff --git a/public/images/delete.svg b/public/images/delete.svg deleted file mode 100644 index a40fbf0da..000000000 --- a/public/images/delete.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/public/images/link.png b/public/images/link.png deleted file mode 100644 index 48485b8ae..000000000 Binary files a/public/images/link.png and /dev/null differ diff --git a/public/images/namechange.svg b/public/images/namechange.svg deleted file mode 100644 index 2292ac2ee..000000000 --- a/public/images/namechange.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/public/images/share.svg b/public/images/share.svg deleted file mode 100644 index 10db8b25c..000000000 --- a/public/images/share.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/styles/utils.module.css b/styles/utils.module.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/types/folderMenuBarTypes.ts b/types/folderMenuBarTypes.ts new file mode 100644 index 000000000..414ac4f6b --- /dev/null +++ b/types/folderMenuBarTypes.ts @@ -0,0 +1,20 @@ +type Link = { + id: number; + created_at: string; + updated_at: string | null; + url: string; + title: string; + description: string; + image_source: string | null; + folder_id: number; +}; + +type FolderMenuBar = { + folderId: number; + folderName: string; + links?: { data: { folder: Link[] } }; +}; + +export type FolderMenuBarData = { + [key: string]: FolderMenuBar; +}; diff --git a/types/folderMenuListTypes.ts b/types/folderMenuListTypes.ts new file mode 100644 index 000000000..b5f3633dc --- /dev/null +++ b/types/folderMenuListTypes.ts @@ -0,0 +1,26 @@ +export type FolderMenuListProps = { + name: string; + user_id: number; + links?: Links; + id?: number; + created_at?: string; +}; + +export type Links = { + data: FolderData; +}; + +export type FolderData = { + folder: Folder[]; +}; + +export type Folder = { + id: number; + created_at: string; + updated_at: any; + url: string; + title: string; + description: string; + image_source?: string; + folder_id: number; +}; diff --git a/components/types/hookFormTypes.ts b/types/hookFormTypes.ts similarity index 100% rename from components/types/hookFormTypes.ts rename to types/hookFormTypes.ts diff --git a/components/types/mappedFolderTypes.ts b/types/mappedFolderTypes.ts similarity index 100% rename from components/types/mappedFolderTypes.ts rename to types/mappedFolderTypes.ts diff --git a/utils/interceptors.ts b/utils/interceptors.ts new file mode 100644 index 000000000..c4d64433c --- /dev/null +++ b/utils/interceptors.ts @@ -0,0 +1,14 @@ +import axios from "axios"; + +const instance = axios.create(); + +instance.interceptors.request.use(function (config) { + const currentToken = localStorage.getItem("myToken")!; + if (!currentToken) { + window.location.href = "/signin"; + } + config.headers.Authorization = `Bearer ${currentToken}`; + return config; +}); + +export default instance; diff --git a/utils/mapdata.ts b/utils/mapdata.ts index 85ae18578..9922d23b4 100644 --- a/utils/mapdata.ts +++ b/utils/mapdata.ts @@ -1,5 +1,5 @@ import { UserFolder, fetchFolderLinks } from "@/api/folder"; -import { MappedDataProps } from "@/components/types/mappedFolderTypes"; +import { MappedDataProps } from "@/types/mappedFolderTypes"; type accCopyReduceType = { [key: number]: MappedDataProps; @@ -9,8 +9,7 @@ const USER_ID = 1; export const mapFolderData = (arr: UserFolder[]) => { const arrCopy = arr?.slice(); - // id가 null 이나 undefined이 이면은 Links를 가져오기 위해전체 데이터를 따로? 만들어야 하는데 - // 0이면은 불러와진당 싱기방기 + arrCopy.push({ id: 0, name: "전체" }); const mapObj = arrCopy &&