+ {isModalOpen && modalName === "FolderAddButton" &&
}
diff --git a/src/components/folder/FolderModifier/FolderModifier.module.scss b/src/components/folder/FolderModifier copy/FolderModifier.module.scss
similarity index 88%
rename from src/components/folder/FolderModifier/FolderModifier.module.scss
rename to src/components/folder/FolderModifier copy/FolderModifier.module.scss
index 3764fc87d..871c975c0 100644
--- a/src/components/folder/FolderModifier/FolderModifier.module.scss
+++ b/src/components/folder/FolderModifier copy/FolderModifier.module.scss
@@ -7,10 +7,12 @@
& button {
display: flex;
justify-content: center;
+ flex-wrap: nowrap;
}
}
.folder-title {
+ width: 100%;
font-size: 24px;
font-style: normal;
font-weight: 600;
@@ -21,9 +23,9 @@
.modifier-container {
display: flex;
flex-direction: column;
- align-items: flex-start;
+ align-items: flex-end;
+ width: 100%;
gap: 1rem;
- padding: 0 4rem;
@include desktop {
flex-direction: row;
diff --git a/src/components/folder/FolderModifier copy/FolderModifier.tsx b/src/components/folder/FolderModifier copy/FolderModifier.tsx
new file mode 100644
index 000000000..8725e326b
--- /dev/null
+++ b/src/components/folder/FolderModifier copy/FolderModifier.tsx
@@ -0,0 +1,83 @@
+/*FolderModifier 컴포넌트:
+ 각 folder의 수정, 삭제, 공유 버튼 컴포넌트로, 전체 폴더에선 렌더링되지 않음.
+*/
+
+import Image from "next/image";
+
+import FolderDeleteModal from "@/modals/FolderDeleteModal/FolderDeleteModal";
+import FolderEditModal from "@/modals/FolderEditModal/FolderEditModal";
+import FolderShareModal from "@/modals/FolderShareModal/FolderShareModal";
+import { useModalStore } from "@/store/useModalStore";
+
+import styles from "./FolderModifier.module.scss";
+
+interface FolderModifierProps {
+ folderId: string;
+ folderTitle: string;
+}
+
+function FolderTitle({ title }: { title: string }) {
+ return
{title}
;
+}
+
+function FolderModifier({ folderId, folderTitle }: FolderModifierProps) {
+ const modalName = useModalStore((state) => state.modalName);
+ const isModalOpen = useModalStore((state) => state.isModalOpen);
+ const showModal = useModalStore((state) => state.showModal);
+
+ const handleClickModalButton = (e: any) => {
+ const id = e.target?.id;
+ showModal(id);
+ };
+
+ return (
+
+ {isModalOpen && modalName === "FolderDeleteModal" && (
+
+ )}
+ {isModalOpen && modalName === "FolderShareModal" && (
+
+ )}
+ {isModalOpen && modalName === "FolderEditModal" && (
+
+ )}
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default FolderModifier;
diff --git a/src/components/folder/FolderModifier/FolderModifier.tsx b/src/components/folder/FolderModifier/FolderModifier.tsx
deleted file mode 100644
index 353115606..000000000
--- a/src/components/folder/FolderModifier/FolderModifier.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-/*FolderModifier 컴포넌트:
- 각 folder의 수정, 삭제, 공유 버튼 컴포넌트로, 전체 폴더에선 렌더링되지 않음.
-*/
-
-import Image from "next/image";
-import {
- DeleteFolderModal,
- RenameFolderModal,
- ShareFolderModal,
-} from "@/components/modals";
-import { FolderInterface, ModalInterface } from "@/types";
-import styles from "./FolderModifier.module.scss";
-
-function FolderTitle({ title }: { title: string }) {
- return
{title}
;
-}
-
-function FolderModifier({
- folder,
- onClick,
-}: {
- folder: FolderInterface;
- onClick: (m: ModalInterface) => void;
-}) {
- const handleFolderModifier = (id: string) => {
- if (id === "folderShareButton") {
- const newModal = {
- component:
,
- show: true,
- };
- onClick(newModal);
- }
- if (id === "folderRenameButton") {
- const newModal = {
- component:
,
- show: true,
- };
- onClick(newModal);
- }
- if (id === "folderDeleteButton") {
- const newModal = {
- component:
,
- show: true,
- };
- onClick(newModal);
- } else {
- return;
- }
- };
-
- return (
-
-
-
- {folder.name !== "전체" && (
-
-
-
-
-
-
-
- )}
-
- );
-}
-
-export default FolderModifier;
diff --git a/src/components/folder/FolderTagList/FolderTagList.module.scss b/src/components/folder/FolderTagList/FolderTagList.module.scss
index 2927fb26c..0d2d2e7f0 100644
--- a/src/components/folder/FolderTagList/FolderTagList.module.scss
+++ b/src/components/folder/FolderTagList/FolderTagList.module.scss
@@ -1,33 +1,32 @@
@import "@/styles/global.scss";
-.folder-tag-list {
+.folder-list {
width: 100%;
-}
-
-.folder-tags-container {
- width: 60%;
display: flex;
- gap: 1rem;
- flex-wrap: wrap;
- @include desktop {
- width: 1060px;
- margin: auto;
+ justify-content: flex-start;
+ align-items: center;
+ & .folder-tag {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ justify-content: flex-start;
+ align-items: center;
+ width: 80%;
+ max-width: 90rem;
+ min-width: 20rem;
}
}
-.folder-name-button {
- padding: 1rem;
- white-space: nowrap;
- border-radius: 10px;
- background-color: white;
+.folder-button {
+ border-radius: 5px;
border: 1px solid var(--color-primary);
-
+ background: #fff;
+ padding: 8px 12px;
&:hover {
- background-color: var(--linkbrary-bg, #f0f6ff);
+ background-color: var(--color-linkbrary);
+ }
+ &[data-selected="true"] {
+ background-color: var(--color-primary);
+ color: white;
}
-}
-
-.clicked {
- background-color: var(--color-primary);
- color: white;
}
diff --git a/src/components/folder/FolderTagList/FolderTagList.tsx b/src/components/folder/FolderTagList/FolderTagList.tsx
index be3fa4e27..3ee01ecfc 100644
--- a/src/components/folder/FolderTagList/FolderTagList.tsx
+++ b/src/components/folder/FolderTagList/FolderTagList.tsx
@@ -1,68 +1,60 @@
-/*FolderTagList 컴포넌트
- 클릭하면 해당 folder의 CardList 컴포넌트를 보여주는 folder 이름 버튼 리스트.
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
- folders: 사용자의 전체 folderList 값을 가져옴.
- current: 현재 위치한 folder. current folder button은 클래스 이름으로 `clicked` 를 가짐.
- onClick: folder tag 버튼을 누를 때 발생하는 함수.
-*/
+import { getFolderList } from "@/api/getFolderCRUDApi";
+import { FoldersArray, InitialFolderType } from "@/types/FolderType";
-import { FolderInterface } from "@/types";
import styles from "./FolderTagList.module.scss";
-function FolderTag({
- folder,
- onClick,
- clicked = false,
-}: {
- folder: FolderInterface;
- onClick: (folder: FolderInterface) => void;
- clicked?: boolean;
-}) {
- const handleFolderTagButton = () => {
- if (folder) {
- onClick(folder);
- }
- };
+const INITIAL_FOLDER: InitialFolderType = {
+ name: "전체",
+};
- return (
-
- );
+interface FolderTagListProps {
+ currentId?: string;
}
-function FolderTagList({
- folders,
- current,
- onClick,
-}: {
- folders: FolderInterface[];
- current: FolderInterface;
- onClick: (folder: FolderInterface) => void;
-}) {
+
+export default function FolderTagList({ currentId }: FolderTagListProps) {
+ const { data } = useQuery({
+ queryKey: ["folder-list"],
+ queryFn: () => getFolderList(),
+ staleTime: 1000 * 30,
+ });
+
+ const [folderList, setFolderList] = useState
([]);
+
+ useEffect(() => {
+ if (data && data.length > 0) {
+ setFolderList(() => [...data]);
+ } else {
+ setFolderList(() => []);
+ }
+ }, [data]);
+
return (
-
-
- {folders?.map((folder) => {
- return (
-
- );
+
+
+
+ {folderList.map((folder) => {
+ if ("id" in folder) {
+ return (
+
+ );
+ }
})}
);
}
-
-export default FolderTagList;
diff --git a/src/components/folder/LinkAddBar/LinkAddBar.tsx b/src/components/folder/LinkAddBar/LinkAddBar.tsx
deleted file mode 100644
index 915994461..000000000
--- a/src/components/folder/LinkAddBar/LinkAddBar.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/*LinkAddBar 컴포넌트
- input에 링크를 작성하고 submit하면 AddCardModal이 뜨게 하는 컴포넌트.
-*/
-
-import { useState, ChangeEvent } from "react";
-import Image from "next/image";
-import styles from "./LinkAddBar.module.scss";
-
-function LinkAddBar() {
- const [keyword, setKeyword] = useState("");
- const handleKeywordChange = (e: ChangeEvent
) =>
- setKeyword(e.target.value);
-
- return (
- <>
-
-
- );
-}
-
-export default LinkAddBar;
diff --git a/src/components/folder/index.tsx b/src/components/folder/index.tsx
deleted file mode 100644
index 911cc2043..000000000
--- a/src/components/folder/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import FolderTagList from "./FolderTagList/FolderTagList";
-import LinkAddBar from "./LinkAddBar/LinkAddBar";
-import FolderModifier from "./FolderModifier/FolderModifier";
-import FolderMaker from "./FolderMaker/FolderMaker";
-
-export { FolderTagList, LinkAddBar, FolderModifier, FolderMaker };
diff --git a/src/components/modals/AddCardModal/AddCardModal.tsx b/src/components/modals/AddCardModal/AddCardModal.tsx
deleted file mode 100644
index 5750825cd..000000000
--- a/src/components/modals/AddCardModal/AddCardModal.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { MouseEvent } from "react";
-import { CardInterface, FolderInterface } from "@/types";
-import styles from "./AddCardModal.module.scss";
-
-function AddCardModal({
- card,
- folderList,
-}: {
- card: CardInterface;
- folderList?: FolderInterface[];
-}) {
- const handleToggle = (e: MouseEvent) => {
- (e.target as Element).classList.toggle(`${styles["checked"]}`);
- };
-
- return (
-
-
폴더에 추가
-
{card.url}
-
- {folderList?.map((folder) => {
- return (
-
- {folder?.name}
-
- {folder?.link?.count}개 링크
-
-
- );
- })}
-
-
-
폴더 추가
-
-
-
- );
-}
-
-export default AddFolderModal;
diff --git a/src/components/modals/DeleteCardModal/DeleteCardModal.tsx b/src/components/modals/DeleteCardModal/DeleteCardModal.tsx
deleted file mode 100644
index f4dde552e..000000000
--- a/src/components/modals/DeleteCardModal/DeleteCardModal.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { CardInterface } from "@/types";
-import styles from "./DeleteCardModal.module.scss";
-
-function DeleteCardModal({ card }: { card: CardInterface }) {
- return (
-
-
링크 삭제
-
{card.url}
-
-
-
폴더 삭제
-
{folder.name}
-
-
{children}
;
-}
-
-export { ModalBackground, ModalContainer };
diff --git a/src/components/modals/RenameFolderModal/RenameFolderModal.tsx b/src/components/modals/RenameFolderModal/RenameFolderModal.tsx
deleted file mode 100644
index 5b55b3e5c..000000000
--- a/src/components/modals/RenameFolderModal/RenameFolderModal.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { FolderInterface } from "@/types";
-import styles from "./RenameFolderModal.module.scss";
-
-function RenameFolderModal({ folder }: { folder: FolderInterface }) {
- return (
-
-
폴더 이름 변경
-
-
-
- );
-}
-
-export default RenameFolderModal;
diff --git a/src/components/modals/ShareFolderModal/ShareFolderModal.tsx b/src/components/modals/ShareFolderModal/ShareFolderModal.tsx
deleted file mode 100644
index ca0d81695..000000000
--- a/src/components/modals/ShareFolderModal/ShareFolderModal.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import Image from "next/image";
-import { FolderInterface } from "@/types";
-import styles from "./ShareFolderModal.module.scss";
-
-function ShareFolderModal({ folder }: { folder: FolderInterface }) {
- const handleLinkCopyButton = () => {
- // Todo - 링크 복사할 때 url 뭐 복사하는지 체크하기
- let url = "https://bootcamp-api.codeit.kr/shared";
- const query = new URLSearchParams();
- query.append("user", "1");
- query.append("folder", folder.id || "");
- url = `${url}?${query.toString()}`;
- navigator.clipboard.writeText(url);
- };
-
- return (
-
-
폴더 공유
-
{folder.name}
-
-
-
-
-
-
-
- {hasError &&
{errorMsg}
}
- {defaultType === "password" && (
-
- )}
-
+