[김유경] Week21

components/common/CardContent/CardContent.tsx

@@ -1,8 +1,8 @@
 import { KebabMenu } from "@components/folder/KebabMenu/KebabMenu";
 import * as S from "./CardContentStyled";
-import { MouseEvent, useState } from "react";
-import { FolderListDataForm } from "../../../types/DataForm";
 import Image from "next/image";
+import { usePortalContents } from "@hooks/usePortalContents";
+import { FolderListDataForm } from "@data-access/getCategory";
 
 interface CardContentProps {
   elapsedTime: string;
@@ -11,6 +11,8 @@ interface CardContentProps {
   isHovered: boolean;
   currentLocation: string;
   selectURL: string;
+  folderList: FolderListDataForm[];
+  linkId: number;
 }
 
 export const CardContent = ({
@@ -20,28 +22,28 @@ export const CardContent = ({
   isHovered,
   currentLocation,
   selectURL,
+  folderList,
+  linkId,
 }: CardContentProps) => {
-  const [isOpened, setIsClick] = useState(false);
-  const className = isHovered
-    ? "CardContent CardContent-hovered"
-    : "CardContent";
-
-  const handleClickMenu = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    setIsClick(isOpened === false ? true : false);
-  };
+  const kebabMenu = usePortalContents();
 
   return (
     <S.CardContentContainer isHovered={isHovered}>
-      <div className="CardContent-time-kebab">
+      <>
         <S.ElapsedTime>{elapsedTime}</S.ElapsedTime>
-        {currentLocation === "/folder" && (
-          <S.KebabButton type="button" onClick={handleClickMenu}>
+        {!currentLocation.includes("shared") && (
+          <S.KebabButton type="button" onClick={kebabMenu.toggleContents}>
             <Image fill src="/images/kebab.svg" alt="메뉴 보기" />
           </S.KebabButton>
         )}
-        {isOpened && <KebabMenu selectURL={selectURL} />}
-      </div>
+        {kebabMenu.isOpenModal && (
+          <KebabMenu
+            folderList={folderList}
+            selectURL={selectURL}
+            linkId={linkId}
+          />
+        )}
+      </>
 
       <S.Description>{description}</S.Description>
       <S.CreatedAtText>{createdAt}</S.CreatedAtText>

components/common/CardItem/CardItem.tsx

@@ -13,6 +13,10 @@ export const CardItem = ({
   image_source,
   description,
   created_at,
+  folderList,
+  linkId,
+  favorite,
+  folderId,
 }: CardInfoDataForm) => {
   const [isHovered, setIsHovered] = useState(false);
   const location = useRouter();
@@ -26,14 +30,22 @@ export const CardItem = ({
       <a href={url} target="_blank" rel="noopener noreferrer">
         <Card onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}>
           <CardImage imageSource={image_source} isZoomedIn={isHovered} />
-          {currentLocation === "/folder" && <WishListButton />}
+          {currentLocation.includes("folder") && (
+            <WishListButton
+              folderId={folderId}
+              linkId={linkId}
+              isFavorite={favorite}
+            />
+          )}
           <CardContent
             elapsedTime={getElapsedTime(created_at)}
             description={description}
             createdAt={formatData(created_at)}
             isHovered={isHovered}
             currentLocation={currentLocation}
             selectURL={url}
+            folderList={folderList}
+            linkId={linkId}
           />
         </Card>
       </a>

components/common/CardList/CardListStyled.ts

@@ -7,6 +7,7 @@ export const CardListContainer = styled.div`
   width: 100%;
   max-width: 106rem;
   row-gap: 2rem;
+  min-height: 10rem;
 
   @media (min-width: 768px) {
     grid-template-columns: repeat(auto-fill, 34rem);

components/common/EmptyLink/EmptyLinkStyled.ts

@@ -1,6 +1,9 @@
 import styled from "styled-components";
 
 export const EmptyLinkContainer = styled.div`
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 0);
   width: auto;
   height: 10rem;
   margin-top: 4rem;

components/common/Layout/Layout.tsx

@@ -1,21 +1,8 @@
 import Footer from "../Footer";
-import { PropsWithChildren, useEffect } from "react";
+import { PropsWithChildren } from "react";
 import { NavigationBar } from "../NavigationBar";
-import { useRouter } from "next/router";
 
 export const Layout = ({ children }: PropsWithChildren) => {
-  const router = useRouter();
-  const currentPath = router.pathname;
-
-  useEffect(() => {
-    const localStorageToken = localStorage.getItem("accessToken");
-    if (currentPath !== "/") {
-      if (localStorageToken === null) {
-        router.push("/signin");
-      }
-    }
-  }, [currentPath, router]);
-
   return (
     <>
       <div>

components/common/Modals/AddFolder/AddFolder.tsx

@@ -0,0 +1,45 @@
+import { ModalInput } from "../ModalElements/ModalInput";
+import Modal from "../Modal";
+import { BaseModalProps } from "../ModalProp";
+import { PrimaryButton } from "@styles/common/PrimaryButton";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useInputValue } from "@hooks/useInputValue";
+import { MouseEvent } from "react";
+import { postNewFolder } from "@data-access/postNewFolder";
+
+export function AddFolder({ handleCloseModal }: BaseModalProps) {
+  const { insertValue, onChange } = useInputValue();
+  const queryClient = useQueryClient();
+  const createFolderMutation = useMutation({
+    mutationFn: (createFolderName: string) =>
+      postNewFolder({ folderName: createFolderName }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["folderList"],
+      });
+    },
+  });
+
+  const handleCreateNewFolder = async (
+    event: MouseEvent<HTMLButtonElement>
+  ) => {
+    const createFolderName = insertValue;
+
+    createFolderMutation.mutate(createFolderName);
+    handleCloseModal(event);
+  };
+
+  return (
+    <Modal title={"폴더 추가"} handleCloseModal={handleCloseModal}>
+      <ModalInput
+        value={insertValue}
+        onChange={onChange}
+        placeholder="내용 입력"
+        type="text"
+      ></ModalInput>
+      <PrimaryButton type="button" onClick={handleCreateNewFolder}>
+        추가하기
+      </PrimaryButton>
+    </Modal>
+  );
+}

components/common/Modals/AddFolder/index.ts

@@ -0,0 +1 @@
+export * from "./AddFolder";

components/common/Modals/AddToFolder/AddToFolder.tsx

@@ -1,21 +1,67 @@
-import { ModalButtonBlue } from "../ModalElements/ModalButtonBlue";
 import * as S from "./AddToFolderStyled";
+import Modal from "../Modal";
 import { AddToFolderProps } from "../ModalProp";
+import { PrimaryButton } from "@styles/common/PrimaryButton";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { MouseEvent, useEffect, useState } from "react";
+import { postAddToFolder } from "@data-access/postAddToFolder";
+
+export function AddToFolder({
+  linkURL,
+  folderList,
+  handleCloseModal,
+  handleReset,
+}: AddToFolderProps) {
+  const [selectFolderId, setSelectFolderId] = useState<number>();
+  const queryClient = useQueryClient();
+  const addToFolderMutation = useMutation({
+    mutationFn: ({ url, folderId }: { url: string; folderId: number }) =>
+      postAddToFolder({ url, folderId }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [`folderContents-${selectFolderId}`],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [`folderContents-${""}`],
+      });
+    },
+  });
+
+  const handleFolderId = (event: MouseEvent<HTMLButtonElement>) => {
+    setSelectFolderId(Number(event.currentTarget.id));
+  };
+
+  const handleAddToFolder = async (event: MouseEvent<HTMLButtonElement>) => {
+    if (linkURL && selectFolderId) {
+      addToFolderMutation.mutate({ url: linkURL, folderId: selectFolderId });
+      handleCloseModal(event);
+      handleReset();
+    }
+  };
 
-export function AddToFolder({ linkURL, data }: AddToFolderProps) {
   return (
-    <>
+    <Modal handleCloseModal={handleCloseModal} title={"폴더에 추가"}>
       <S.SelectLink>{linkURL}</S.SelectLink>
       <S.FolderListContainer>
-        {data?.map((folder) => (
-          <S.SelectFolder key={folder.id}>
-            <S.FolderName>{folder.name}</S.FolderName>
-            <S.FolderCount>{folder.link.count}개 링크</S.FolderCount>
-            <S.SelectFolderIcon />
-          </S.SelectFolder>
-        ))}
+        {folderList?.map((folder) => {
+          console.log(selectFolderId === folder.id);
+          return (
+            <S.SelectFolder
+              id={folder.id}
+              key={folder.id}
+              onClick={handleFolderId}
+              isSelect={selectFolderId === Number(folder.id)}
+            >
+              <S.FolderName>{folder.name}</S.FolderName>
+              <S.FolderCount>{folder.link_count}개 링크</S.FolderCount>
+              <S.SelectFolderIcon />
+            </S.SelectFolder>
+          );
+        })}
       </S.FolderListContainer>
-      <ModalButtonBlue type="button">삭제하기</ModalButtonBlue>
-    </>
+      <PrimaryButton type="button" onClick={handleAddToFolder}>
+        추가하기
+      </PrimaryButton>
+    </Modal>
   );
 }

components/common/Modals/AddToFolder/AddToFolderStyled.ts

@@ -1,5 +1,10 @@
 import styled from "styled-components";
 
+export const AddToFolderContainer = styled.div`
+  width: 30rem;
+  display: flex;
+  flex-direction: column;
+`;
 export const FolderListContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -8,24 +13,27 @@ export const FolderListContainer = styled.div`
   overflow: hidden scroll;
 `;
 
-export const SelectFolder = styled.div`
+export const SelectFolder = styled.button<{ isSelect: boolean }>`
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
   padding: 0.8rem;
   gap: 0.8rem;
-
-  &:hover {
-    background-color: var(--light-blue);
-  }
+  background-color: ${({ isSelect }) =>
+    isSelect ? "var(--light-blue)" : "transparent"};
 `;
 
 export const SelectLink = styled.p`
+  width: 30rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
   color: var(--gray60);
   font-size: 1.4rem;
   line-height: 2.2rem;
   text-align: center;
+  margin: 0.5rem 0 2.5rem 0;
 `;
 
 export const FolderName = styled.p`

components/common/Modals/DeleteFolder/DeleteFolder.tsx

@@ -1,12 +1,36 @@
 import * as S from "./DeleteFolderStyled";
 import { ModalButtonRed } from "../ModalElements/ModalButtonRed";
 import { DeleteFolderProps } from "../ModalProp";
+import Modal from "../Modal";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { MouseEvent } from "react";
+import { deleteFolder } from "@data-access/deleteFolder";
+
+export default function DeleteFolder({
+  selectFolder,
+  folderId,
+  handleCloseModal,
+}: DeleteFolderProps) {
+  const queryClient = useQueryClient();
+  const deleteFolderMutation = useMutation({
+    mutationFn: ({ folderId }: { folderId: number | string }) =>
+      deleteFolder({ folderId }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["folderList"],
+      });
+    },
+  });
+
+  const handleDeleteFolder = (event: MouseEvent<HTMLButtonElement>) => {
+    deleteFolderMutation.mutate({ folderId: folderId });
+    handleCloseModal(event);
+  };
 
-export default function DeleteFolder({ selectFolder }: DeleteFolderProps) {
   return (
-    <>
+    <Modal title="폴더 삭제" handleCloseModal={handleCloseModal}>
       <S.DeleteFolderSubtitle>{selectFolder}</S.DeleteFolderSubtitle>
-      <ModalButtonRed>삭제하기</ModalButtonRed>
-    </>
+      <ModalButtonRed onClick={handleDeleteFolder}>삭제하기</ModalButtonRed>
+    </Modal>
   );
 }