From dc1264748c61fbf98950c20028f55d40646a84d2 Mon Sep 17 00:00:00 2001 From: codingaring Date: Thu, 9 May 2024 14:39:46 +0900 Subject: [PATCH 01/33] =?UTF-8?q?=F0=9F=94=A5=20Delete=20:=20delete=20unne?= =?UTF-8?q?cessary=20files?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- types/ChildrenProp.ts | 5 ----- util/getFormattedFolders.ts | 29 ----------------------------- 2 files changed, 34 deletions(-) delete mode 100644 types/ChildrenProp.ts delete mode 100644 util/getFormattedFolders.ts diff --git a/types/ChildrenProp.ts b/types/ChildrenProp.ts deleted file mode 100644 index e90e46f853..0000000000 --- a/types/ChildrenProp.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { ReactNode } from "react"; - -export interface ChildrenProp { - children: ReactNode; -} diff --git a/util/getFormattedFolders.ts b/util/getFormattedFolders.ts deleted file mode 100644 index 32d8a6210a..0000000000 --- a/util/getFormattedFolders.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { getElapsedTime } from "./getElapsedTime"; -import { formatData } from "./formatDate"; -import { FolderPageDataForm, LinkDataForm } from "../types/DataForm"; - -const getFormattedFolders = (folder: FolderPageDataForm) => { - const { name, owner, links } = folder; - - const mapLinks = (link: LinkDataForm) => { - const { id, createdAt, url, imageSource, title, description } = link; - return { - id, - url, - imageSource, - alt: `${title ?? url}의 대표 이미지`, - elapsedTime: getElapsedTime(createdAt), - description, - createdAt: formatData(createdAt), - }; - }; - - return { - profileImage: owner?.profileImageSource, - ownerName: owner?.name, - folderName: name, - links: links?.map(mapLinks) ?? [], - }; -}; - -export default getFormattedFolders; From 14eb7b6c61eed637de30102df30e913fa4077834 Mon Sep 17 00:00:00 2001 From: codingaring Date: Thu, 9 May 2024 14:47:26 +0900 Subject: [PATCH 02/33] =?UTF-8?q?=E2=9C=A8=20Faet=20:=20add=20handleToken?= =?UTF-8?q?=20function?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- util/handleToken.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 util/handleToken.ts diff --git a/util/handleToken.ts b/util/handleToken.ts new file mode 100644 index 0000000000..69521b423e --- /dev/null +++ b/util/handleToken.ts @@ -0,0 +1,19 @@ +const ACCESS_TOKEN = "accessToken"; +const REFRESH_TOKEN = "refreshToken"; + +export const setToken = (accessToken: string, refreshToken: string) => { + localStorage.setItem(ACCESS_TOKEN, accessToken); + localStorage.setItem(REFRESH_TOKEN, refreshToken); +}; + +export const getToken = () => { + const accessToken = localStorage.getItem(ACCESS_TOKEN); + const refreshToken = localStorage.getItem(REFRESH_TOKEN); + + return { accessToken, refreshToken }; +}; + +export const removeToken = () => { + localStorage.removeItem(ACCESS_TOKEN); + localStorage.removeItem(REFRESH_TOKEN); +}; From a50c45d3612908d2a4e9c7aa2ed72e6f411f7758 Mon Sep 17 00:00:00 2001 From: codingaring Date: Thu, 9 May 2024 15:05:30 +0900 Subject: [PATCH 03/33] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20:=20refac?= =?UTF-8?q?tor=20getCategory=20function?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data-access/getCategory.ts | 13 ++++++++++++- pages/folder/[[...folderId]].tsx | 7 +++---- types/DataForm.ts | 12 ------------ 3 files changed, 15 insertions(+), 17 deletions(-) diff --git a/data-access/getCategory.ts b/data-access/getCategory.ts index e98653c457..f2680c8b79 100644 --- a/data-access/getCategory.ts +++ b/data-access/getCategory.ts @@ -1,6 +1,17 @@ import { BASE_URL } from "./BASE_URL"; -export async function getCategory() { +export interface FolderListDataForm { + id: number | string; + created_at: string; + favorite: true; + link: { + count: number; + }; + name: string; + user_id: number; +} + +export async function getCategory(): Promise { const response = await fetch(`${BASE_URL}users/1/folders`); const result = await response.json(); return result; diff --git a/pages/folder/[[...folderId]].tsx b/pages/folder/[[...folderId]].tsx index 0bf2c0f490..631d3c9f46 100644 --- a/pages/folder/[[...folderId]].tsx +++ b/pages/folder/[[...folderId]].tsx @@ -1,8 +1,7 @@ import { useEffect, useState } from "react"; -import { FolderListDataForm } from "../../types/DataForm"; import * as S from "../../styles/pages/FolderStyled"; import { useIntersectionObserver } from "@hooks/useIntersectionObserver"; -import { getCategory } from "@data-access/getCategory"; +import { FolderListDataForm, getCategory } from "@data-access/getCategory"; import FolderHeader from "@components/folder/FolderHeader"; import { SearchBar } from "@components/common/SearchBar"; import { FolderContent } from "@components/folder/FolderContent/FolderContent"; @@ -19,8 +18,8 @@ function Folder() { const floatingState = !isHeaderVisible && !isFooterVisible ? true : false; const handleLoadCategory = async () => { - const { data } = await getCategory(); - setCategoryData(data); + const folderListInfo = await getCategory(); + setCategoryData(folderListInfo); }; useEffect(() => { diff --git a/types/DataForm.ts b/types/DataForm.ts index 1a337ca638..69dc5b6cbb 100644 --- a/types/DataForm.ts +++ b/types/DataForm.ts @@ -1,17 +1,5 @@ //favorite, link, name, user_id -//getCategory -export interface FolderListDataForm { - id: number | string; - created_at: string; - favorite: true; - link: { - count: number; - }; - name: string; - user_id: number; -} - //getFolders export interface getFolderDataForm { created_at: string; From f8fbe8bb421536745904119448ced5972378f11a Mon Sep 17 00:00:00 2001 From: codingaring Date: Thu, 9 May 2024 15:10:05 +0900 Subject: [PATCH 04/33] =?UTF-8?q?=F0=9F=9A=9A=20Rename=20:=20data=20->=20f?= =?UTF-8?q?olderInfo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/folder/FolderContent/FolderContent.tsx | 11 ++++++++--- components/folder/FolderHeader/FolderHeader.tsx | 15 ++++++++------- components/shared/AddLinkBar/AddLinkBar.tsx | 8 ++++---- pages/folder/[[...folderId]].tsx | 8 ++++---- 4 files changed, 24 insertions(+), 18 deletions(-) diff --git a/components/folder/FolderContent/FolderContent.tsx b/components/folder/FolderContent/FolderContent.tsx index 11cb145c9b..313fec11a8 100644 --- a/components/folder/FolderContent/FolderContent.tsx +++ b/components/folder/FolderContent/FolderContent.tsx @@ -1,7 +1,7 @@ import * as S from "./FolderContentStyled"; import { useEffect, useState, MouseEvent, useContext } from "react"; import { CategoryNav } from "../CategoryNav/CategoryNav"; -import { FolderListDataForm, getFolderDataForm } from "../../../types/DataForm"; +import { getFolderDataForm } from "../../../types/DataForm"; import { useRecoilValue } from "recoil"; import { searchState } from "recoil/SearchKeyWord"; import { getFolders } from "@data-access/getFolders"; @@ -13,13 +13,18 @@ import { CardItem } from "@components/common/CardItem"; import { RefactorModal } from "@components/common/RefactorModal/RefactorModal"; import { ModalContext } from "@components/common/RefactorModal/ModalContext"; import { useRouter } from "next/router"; +import { FolderListDataForm } from "@data-access/getCategory"; interface LoadFolderDataProps { folderId: string; searchKeyWord: string; } -export function FolderContent({ data }: { data: FolderListDataForm[] }) { +export function FolderContent({ + folderInfo, +}: { + folderInfo: FolderListDataForm[]; +}) { const [folder, setFolder] = useState([]); const [folderId, setFolderId] = useState(""); const [activeCategoryName, setActiveCategoryName] = useState("전체"); @@ -72,7 +77,7 @@ export function FolderContent({ data }: { data: FolderListDataForm[] }) { - {data.map((category) => ( + {folderInfo.map((category) => ( ))} - + 폴더 추가 + diff --git a/components/folder/KebabMenu/KebabMenu.tsx b/components/folder/KebabMenu/KebabMenu.tsx index bb24067965..9981b8b715 100644 --- a/components/folder/KebabMenu/KebabMenu.tsx +++ b/components/folder/KebabMenu/KebabMenu.tsx @@ -1,10 +1,10 @@ -import { useContext, useEffect, useState } from "react"; +import { useState } from "react"; import * as S from "./KebabMenuStyled"; import { MouseEvent } from "react"; -import { ModalContext } from "@components/common/RefactorModal/ModalContext"; -import { RefactorModal } from "@components/common/RefactorModal/RefactorModal"; import { getCategory } from "@data-access/getCategory"; -import { useEffectOnce } from "@hooks/useEffectOnce"; +import { useModal } from "@hooks/useModal"; +import DeleteLink from "@components/common/Modals/DeleteLink"; +import { AddToFolder } from "@components/common/Modals/AddToFolder"; interface Props { selectURL: string; @@ -12,7 +12,8 @@ interface Props { export function KebabMenu({ selectURL }: Props) { const [categoryList, setCategoryList] = useState(); - const { handleModalState } = useContext(ModalContext); + const deleteLinkModal = useModal(); + const addToFolderModal = useModal(); const handleShowModal = (e: MouseEvent) => { e.preventDefault(); @@ -23,28 +24,23 @@ export function KebabMenu({ selectURL }: Props) { }; handleCategoryList(); - - switch (e.currentTarget.id) { - case "deleteLink": - handleModalState({ - isOpenModal: true, - selectURL: selectURL, - modalType: "deleteLink", - }); - break; - case "addToFolder": - handleModalState({ - isOpenModal: true, - selectURL: selectURL, - data: categoryList, - modalType: "addToFolder", - }); - } }; return ( <> - + {deleteLinkModal.isOpenModal && ( + + )} + {addToFolderModal.isOpenModal && ( + + )} + <>