[김유경] Week20

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/axios/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,8 @@ export const CardItem = ({
   image_source,
   description,
   created_at,
+  folderList,
+  linkId,
 }: CardInfoDataForm) => {
   const [isHovered, setIsHovered] = useState(false);
   const location = useRouter();
@@ -34,6 +36,8 @@ export const CardItem = ({
             isHovered={isHovered}
             currentLocation={currentLocation}
             selectURL={url}
+            folderList={folderList}
+            linkId={linkId}
           />
         </Card>
       </a>

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,39 @@
+import { ModalInput } from "../ModalElements/ModalInput";
+import Modal from "../Modal";
+import { BaseModalProps } from "../ModalProp";
+import { PrimaryButton } from "@styles/common/PrimaryButton";
+import { postNewFolder } from "@data-access/axios/postNewFolder";
+import { useMutation } from "@tanstack/react-query";
+import { useInputValue } from "@hooks/useInputValue";
+import { MouseEvent } from "react";
+
+export function AddFolder({ handleCloseModal }: BaseModalProps) {
+  const { insertValue, onChange } = useInputValue();
+  const createFolderMutation = useMutation({
+    mutationFn: (createFolderName: string) =>
+      postNewFolder({ folderName: createFolderName }),
+  });
+
+  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,51 @@
-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 } from "@tanstack/react-query";
+import { postAddToFolder } from "@data-access/axios/postAddToFolder";
+import { MouseEvent, useState } from "react";
+
+export function AddToFolder({
+  linkURL,
+  folderList,
+  handleCloseModal,
+}: AddToFolderProps) {
+  const [selectFolderId, setSelectFolderId] = useState<number>();
+  const addToFolderMutation = useMutation({
+    mutationFn: ({ url, folderId }: { url: string; folderId: number }) =>
+      postAddToFolder({ url: url, folderId: folderId }),
+  });
+
+  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 });
+    }
+  };
 
-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}>
+        {folderList?.map((folder) => (
+          <S.SelectFolder
+            id={folder.id}
+            key={folder.id}
+            onClick={handleFolderId}
+          >
             <S.FolderName>{folder.name}</S.FolderName>
-            <S.FolderCount>{folder.link.count}개 링크</S.FolderCount>
+            <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,7 +13,7 @@ export const FolderListContainer = styled.div`
   overflow: hidden scroll;
 `;
 
-export const SelectFolder = styled.div`
+export const SelectFolder = styled.button`
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
@@ -22,10 +27,15 @@ export const SelectFolder = styled.div`
 `;
 
 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,30 @@
 import * as S from "./DeleteFolderStyled";
 import { ModalButtonRed } from "../ModalElements/ModalButtonRed";
 import { DeleteFolderProps } from "../ModalProp";
+import Modal from "../Modal";
+import { useMutation } from "@tanstack/react-query";
+import { deleteFolder } from "@data-access/axios/deleteFolder";
+import { MouseEvent } from "react";
+
+export default function DeleteFolder({
+  selectFolder,
+  folderId,
+  handleCloseModal,
+}: DeleteFolderProps) {
+  const deleteFolderMutation = useMutation({
+    mutationFn: ({ folderId }: { folderId: number | string }) =>
+      deleteFolder({ folderId }),
+  });
+
+  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>
   );
 }

components/common/Modals/DeleteLink/DeleteLink.tsx

@@ -1,12 +1,30 @@
 import { ModalButtonRed } from "../ModalElements/ModalButtonRed";
 import * as S from "./DeleteLinkStyled";
 import { DeleteLinkProps } from "../ModalProp";
+import Modal from "../Modal";
+import { useMutation } from "@tanstack/react-query";
+import { deleteLink } from "@data-access/axios/deleteLink";
+import { MouseEvent } from "react";
+
+export default function DeleteLink({
+  deleteURL,
+  handleCloseModal,
+  linkId,
+}: DeleteLinkProps) {
+  const deleteLinkMutation = useMutation({
+    mutationFn: ({ linkId }: { linkId: number }) => deleteLink({ linkId }),
+  });
+
+  const handleDeleteLink = (event: MouseEvent<HTMLButtonElement>) => {
+    deleteLinkMutation.mutate({ linkId: Number(event.currentTarget.id) });
+  };
 
-export default function DeleteLink({ deleteURL }: DeleteLinkProps) {
   return (
-    <>
+    <Modal title="삭제하기" handleCloseModal={handleCloseModal}>
       <S.DeleteLinkURL>{deleteURL}</S.DeleteLinkURL>
-      <ModalButtonRed type="button">삭제하기</ModalButtonRed>
-    </>
+      <ModalButtonRed type="button" id={linkId} onClick={handleDeleteLink}>
+        삭제하기
+      </ModalButtonRed>
+    </Modal>
   );
 }

components/common/Modals/Modal/Modal.tsx

@@ -1,25 +1,20 @@
 import ModalPortal from "@components/Portal";
-import { ModalCloseButton } from "../ModalElements/ModalCloseButton";
-import { ModalContainer } from "../ModalElements/ModalContainer";
+import { ModalProps } from "../ModalProp";
 import { ModalDim } from "../ModalElements/ModalDim";
+import { ModalContainer } from "../ModalElements/ModalContainer";
+import { ModalCloseButton } from "../ModalElements/ModalCloseButton";
 import { ModalTitle } from "../ModalElements/ModalTitle";
-import { ModalProps } from "../ModalProp";
-import { ModalContext } from "@components/common/RefactorModal/ModalContext";
-import { useContext } from "react";
-
-export default function Modal({ children, title }: ModalProps) {
-  const { handleModalState } = useContext(ModalContext);
-  function handleCloseModal() {
-    handleModalState({
-      isOpenModal: false,
-    });
-  }
 
+export default function Modal({
+  children,
+  title,
+  handleCloseModal,
+}: ModalProps) {
   return (
     <ModalPortal>
       <ModalDim onClick={handleCloseModal} />
       <ModalContainer>
-        <ModalCloseButton handleModalClose={handleCloseModal} />
+        <ModalCloseButton handleCloseModal={handleCloseModal} />
         <ModalTitle>{title}</ModalTitle>
         {children}
       </ModalContainer>

components/common/Modals/ModalElements/ModalCloseButton.tsx

@@ -12,9 +12,9 @@ export const CloseButtonModal = styled.button`
   right: 1.2rem;
 `;
 
-export function ModalCloseButton({ handleModalClose }: BaseModalProps) {
+export function ModalCloseButton({ handleCloseModal }: BaseModalProps) {
   return (
-    <CloseButtonModal type="button" onClick={handleModalClose}>
+    <CloseButtonModal type="button" onClick={handleCloseModal}>
       X
     </CloseButtonModal>
   );