[이정윤] week20

types/folder.d.ts → @types/folder.types.ts

@@ -1,23 +1,23 @@
 // sample folder
-interface Folder {
+export interface Folder {
   folder: FolderData;
 }
 
-interface FolderData {
+export interface FolderData {
   id: number;
   name: string;
   owner: Owner;
   links: FolderLinks[];
   count: number;
 }
 
-interface Owner {
+export interface Owner {
   id: number;
   name: string;
   profileImageSource: string;
 }
 
-interface FolderLinks {
+export interface FolderLinks {
   id?: number;
   createdAt: string;
   url: string;
@@ -27,19 +27,19 @@ interface FolderLinks {
 }
 
 // user folder
-interface UserFolderData {
+export interface UserFolderData {
   data: UserFolder[];
 }
 
-interface UserFolders {
+export interface UserFolders {
   created_at: string;
   favorite: boolean;
   id: number;
   link_count: number;
   name: string;
 }
 
-interface UserFolder {
+export interface UserFolder {
   id: number;
   created_at: string;
   favorite: boolean;

types/link.d.ts → @types/link.types.ts

@@ -1,7 +1,7 @@
-interface LinksData {
+export interface LinksData {
   data: Link[];
 }
-interface Link {
+export interface Link {
   id: number;
   created_at: string;
   updated_at: null;
@@ -12,8 +12,9 @@ interface Link {
   folder_id: number;
 }
 
-interface FolderLink {
+export interface FolderLink {
   id: number;
+  favorite: boolean;
   created_at: string;
   url: string;
   title: string;

types/user.d.ts → @types/user.types.ts

@@ -1,15 +1,15 @@
-interface SampleUser {
+export interface SampleUser {
   id: number;
   name: string;
   email: string;
   profileImageSource: string;
 }
 
-interface UserData {
+export interface UserData {
   data: User[];
 }
 
-interface User {
+export interface User {
   id: number;
   created_at: string;
   name: string;

components/AddLink/AddLinkButton.tsx

@@ -4,6 +4,7 @@ import ModalContainer from "../Modal/ModalContainer/ModalContainer";
 import useModal from "@/hooks/useModal";
 import AddLinkModalContent from "../Modal/AddLinkModalContent/AddLinkModalContent";
 import isValidURL from "@/utils/isValidURL";
+import { UserFolders } from "@/@types/folder.types";
 
 interface Props {
   inputValue: string;

components/AddLink/AddLinkInput.tsx

@@ -7,6 +7,7 @@ import Image from "next/image";
 import classNames from "classnames";
 import isValidURL from "@/utils/isValidURL";
 import AddLinkButton from "./AddLinkButton";
+import { UserFolders } from "@/@types/folder.types";
 
 interface Props {
   folderData?: UserFolders[];

components/Card/CardFavoriteButton.tsx

@@ -0,0 +1,48 @@
+import Image from "next/image";
+
+import styles from "./CardItem.module.css";
+
+import starOnImg from "@/assets/images/star-on.svg";
+import starOffImg from "@/assets/images/star-off.svg";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import fetcher from "@/lib/axios";
+import { UserFolders } from "@/@types/folder.types";
+
+interface FolderPageCardItemProps {
+  isFavorite: boolean;
+  linkId: number;
+}
+
+function CardFavoriteButton({ isFavorite, linkId }: FolderPageCardItemProps) {
+  const queryClient = useQueryClient();
+
+  const toggleFavoriteMutation = useMutation({
+    mutationFn: async () => {
+      const response = await fetcher<UserFolders[]>({
+        url: `/links/${linkId}`,
+        method: "put",
+        data: { favorite: !isFavorite },
+      });
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["links"] });
+      queryClient.invalidateQueries({ queryKey: ["links", "all"] });
+    },
+    onError: (error) => {
+      const errorResponse = (error as any).response;
+      window.alert(errorResponse?.data.message);
+    },
+  });
+
+  const handleButtonClick = () => {
+    toggleFavoriteMutation.mutate();
+  };
+  return (
+    <button className={styles.bookmarkButton} onClick={handleButtonClick}>
+      <Image src={isFavorite ? starOnImg : starOffImg} alt="즐겨찾기 이미지" />
+    </button>
+  );
+}
+
+export default CardFavoriteButton;

components/Card/CardList.tsx

@@ -2,6 +2,8 @@ import { ReactNode } from "react";
 import FolderPageCardItem from "./FolderPageCardItem";
 import { formatDate, getTimeDiff, prettyFormatTimeDiff } from "@/utils/utils";
 import SharedPageCardItem from "./SharedPageCardItem";
+import { FolderLink } from "@/@types/link.types";
+import { UserFolders } from "@/@types/folder.types";
 
 interface CardListProps {
   type: "folder" | "shared";
@@ -17,7 +19,15 @@ function CardList({
   return (
     LinksData &&
     LinksData.map((link) => {
-      const { id, created_at, url, title, description, image_source } = link;
+      const {
+        id,
+        created_at,
+        url,
+        title,
+        description,
+        image_source,
+        favorite,
+      } = link;
 
       const formattedCreatedAt = formatDate(created_at);
       const timeDiff = getTimeDiff(created_at);
@@ -28,6 +38,7 @@ function CardList({
           <FolderPageCardItem
             key={url}
             id={id}
+            favorite={favorite}
             folderListData={folderListData}
             formatTimeDiff={formatTimeDiff}
             formattedCreatedAt={formattedCreatedAt}

components/Card/FolderPageCardItem.tsx

@@ -6,12 +6,14 @@ import CardMenu from "@/components/CardMenu/CardMenu";
 import { blurDataURL } from "@/utils/utils";
 
 import logoImg from "@/assets/images/emptyImg.svg";
-import starImg from "@/assets/images/star.svg";
 
 import styles from "./CardItem.module.css";
+import CardFavoriteButton from "./CardFavoriteButton";
+import { UserFolders } from "@/@types/folder.types";
 
 interface FolderPageCardItemProps {
   id: number;
+  favorite: boolean;
   folderListData: UserFolders[];
   formatTimeDiff: string;
   formattedCreatedAt: string;
@@ -23,6 +25,7 @@ interface FolderPageCardItemProps {
 
 function FolderPageCardItem({
   id,
+  favorite,
   folderListData,
   formatTimeDiff,
   formattedCreatedAt,
@@ -48,9 +51,7 @@ function FolderPageCardItem({
           blurDataURL={blurDataURL}
         />
       </Link>
-      <button className={styles.bookmarkButton}>
-        <Image src={starImg} alt="즐겨찾기 이미지" />
-      </button>
+      <CardFavoriteButton isFavorite={favorite} linkId={id} />
       <div className={styles.contentContainer}>
         <div className={styles.container}>
           <p className={styles.timeDiff}>{formatTimeDiff}</p>

components/CardMenu/CardMenu.tsx

@@ -10,6 +10,7 @@ import ModalContainer from "@/components/Modal/ModalContainer/ModalContainer";
 import kebabImg from "@/assets/images/kebab.svg";
 
 import styles from "./CardMenu.module.css";
+import { UserFolders } from "@/@types/folder.types";
 
 interface Props {
   linkId: number;

components/Category/CategoryList.tsx

@@ -3,6 +3,7 @@ import { ReactNode, Dispatch, SetStateAction } from "react";
 import styles from "./CategoryList.module.css";
 
 import CategoryButton from "./CategoryButton";
+import { UserFolders } from "@/@types/folder.types";
 
 interface Props {
   folderListData?: UserFolders[];

components/Modal/AddFolderModalContent/AddFolderModalContent.tsx

@@ -5,6 +5,7 @@ import ModalTitle from "../ModalTitle/ModalTitle";
 import { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import fetcher from "@/lib/axios";
+import { UserFolders } from "@/@types/folder.types";
 
 interface Props {
   onClose: () => void;

components/Modal/AddLinkModalContent/AddLinkModalContent.tsx

@@ -11,6 +11,7 @@ import ModalButton from "../ModalButton/ModalButton";
 import Image from "next/image";
 import fetcher from "@/lib/axios";
 import { useSetFolderId } from "@/contexts/UserContext";
+import { UserFolders } from "@/@types/folder.types";
 
 interface Props {
   inputValue: string;
@@ -74,23 +75,28 @@ function AddLinkModalContent({ inputValue, folderListData, onClose }: Props) {
         <p className={styles.link}>{inputValue}</p>
       </div>
       <div className={styles.optionsContainer}>
-        {folderListDataArray?.map((folder) => (
-          <div
-            className={classNames(
-              styles.optionContainer,
-              selectedFolder === folder && styles.selected
-            )}
-            key={folder.id}
-            id={folder.name}
-            onClick={() => handleCheckClick(folder)}
-          >
-            <div className={styles.option}>
-              <h2>{folder.name}</h2>
-              <p>{`${folder?.link_count}개 링크`}</p>
+        {folderListDataArray?.map((folder) => {
+          if (folder.name === "⭐️ 즐겨찾기") return;
+          return (
+            <div
+              className={classNames(
+                styles.optionContainer,
+                selectedFolder === folder && styles.selected
+              )}
+              key={folder.id}
+              id={folder.name}
+              onClick={() => handleCheckClick(folder)}
+            >
+              <div className={styles.option}>
+                <h2>{folder.name}</h2>
+                <p>{`${folder?.link_count}개 링크`}</p>
+              </div>
+              {selectedFolder === folder && (
+                <Image src={checkImg} alt="check" />
+              )}
             </div>
-            {selectedFolder === folder && <Image src={checkImg} alt="check" />}
-          </div>
-        ))}
+          );
+        })}
       </div>
       <ModalButton color="blue" onClick={handleAddLink}>
         추가하기

components/Modal/DeleteFolderModalContent/DeleteFolderModalContent.tsx

@@ -8,6 +8,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import fetcher from "@/lib/axios";
 import { useFolderId, useSetFolderId } from "@/contexts/UserContext";
 import { useRouter } from "next/router";
+import { UserFolders } from "@/@types/folder.types";
 
 interface Props {
   onClose: () => void;

components/Modal/DeleteLinkModalContent/DeleteLinkModalContent.tsx

@@ -6,6 +6,7 @@ import ModalButton from "../ModalButton/ModalButton";
 import ModalTitle from "../ModalTitle/ModalTitle";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import fetcher from "@/lib/axios";
+import { UserFolders } from "@/@types/folder.types";
 
 interface Props {
   linkId: number;

components/Modal/EditFolderNameModalContent/EditFolderNameModalContent.tsx

@@ -7,6 +7,7 @@ import ModalTitle from "../ModalTitle/ModalTitle";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import fetcher from "@/lib/axios";
 import { useFolderId } from "@/contexts/UserContext";
+import { UserFolders } from "@/@types/folder.types";
 
 interface Props {
   currentFolderName: string;

components/NavBar/LoginButton.tsx

@@ -20,7 +20,7 @@ function LoginButton() {
   };
   const handleLogout = () => {
     removeTokens();
-    router.push("/");
+    window.location.href = "/";
   };
 
   useEffect(() => {

components/Search/Search.tsx

@@ -8,6 +8,7 @@ import {
 } from "react";
 
 import SearchBar from "./SearchBar";
+import { FolderLink } from "@/@types/link.types";
 
 interface Props {
   linksListData?: FolderLink[];

constants/constants.ts

@@ -20,4 +20,6 @@ const PW_FIELD_INFO = {
 
 const BASE_URL = "https://bootcamp-api.codeit.kr/api/linkbrary/v1";
 
-export { EMAIL_FIELD_INFO, PW_FIELD_INFO, BASE_URL };
+const ENDPOINT_REFRESH_TOKEN = "auth/refresh-token";
+
+export { EMAIL_FIELD_INFO, PW_FIELD_INFO, BASE_URL, ENDPOINT_REFRESH_TOKEN };

contexts/AuthContext.tsx

@@ -74,8 +74,8 @@ const AuthProvider = ({ children }: { children: ReactNode }) => {
         method: "post",
         data: { email, password },
       });
-      console.log(response.data);
       const { accessToken, refreshToken } = response.data;
+
       saveTokens({ accessToken, refreshToken });
       getUser();
       return true;