+
+
+ {folders?.map(({ id, name }) => (
+
+ ))}
+
+
+
setCurrentModal(MODALS_ID.addFolder)} />
+ setInputValue(event.target.value)}
+ />
+
+
{folderName}
+ {selectedFolderId !== ALL_LINKS_ID && (
+
+ {BUTTONS.map(({ text, iconSource, modalId }) => (
+
setCurrentModal(modalId)}
+ />
+ ))}
+
+ setInputValue(event.target.value)}
+ />
+ {}}
+ />
+
+ )}
+
+ );
+};
diff --git a/src/folder/feature-folder-tool-bar/constant.js b/src/folder/feature-folder-tool-bar/constant.js
new file mode 100644
index 0000000000..fb0f2d1b14
--- /dev/null
+++ b/src/folder/feature-folder-tool-bar/constant.js
@@ -0,0 +1,32 @@
+export const MODALS_ID = {
+ addFolder: "addFolder",
+ share: "share",
+ rename: "rename",
+ delete: "delete",
+};
+
+export const BUTTONS = [
+ {
+ iconSource: "/images/share.svg",
+ text: "공유",
+ modalId: MODALS_ID.share,
+ },
+ {
+ iconSource: "/images/pen.svg",
+ text: "이름 변경",
+ modalId: MODALS_ID.rename,
+ },
+ {
+ iconSource: "/images/trash.svg",
+ text: "삭제",
+ modalId: MODALS_ID.delete,
+ },
+];
+
+export const ALL_LINKS_TEXT = "전체";
+
+export const KAKAO_SHARE_DATA = {
+ title: "Linkbrary",
+ description: "링크를 저장하고 공유하는 가장 쉬운 방법",
+ imageUrl: "https://codeit-frontend.codeit.com/static/images/brand/og_tag.png",
+};
diff --git a/src/folder/feature-folder-tool-bar/index.js b/src/folder/feature-folder-tool-bar/index.js
new file mode 100644
index 0000000000..4f6c195260
--- /dev/null
+++ b/src/folder/feature-folder-tool-bar/index.js
@@ -0,0 +1 @@
+export * from "./FolderToolBar";
diff --git a/src/folder/type.ts b/src/folder/type.ts
new file mode 100644
index 0000000000..b4b87f6dba
--- /dev/null
+++ b/src/folder/type.ts
@@ -0,0 +1,32 @@
+import { SampleLinkRawData } from "@/src/link/type";
+
+export type SampleFolderRawData = {
+ id: number;
+ name: string;
+ owner: {
+ id: number;
+ name: string;
+ profileImageSource: string;
+ };
+ links: SampleLinkRawData[];
+};
+
+export type FolderRawData = {
+ id: number;
+ created_at: string;
+ name: string;
+ user_id: number;
+ link?: {
+ count: number;
+ };
+};
+
+export type Folder = {
+ id: number;
+ createdAt: string;
+ name: string;
+ userId: number;
+ linkCount: number;
+};
+
+export type SelectedFolderId = number | "all";
diff --git a/src/folder/ui-add-folder-button/AddFolderButton.module.scss b/src/folder/ui-add-folder-button/AddFolderButton.module.scss
new file mode 100644
index 0000000000..adc80d3559
--- /dev/null
+++ b/src/folder/ui-add-folder-button/AddFolderButton.module.scss
@@ -0,0 +1,30 @@
+@import "@/styles/global.scss";
+
+.container {
+ display: flex;
+ align-items: center;
+ column-gap: 0.4rem;
+ font-size: 1.6rem;
+ font-weight: 500;
+
+ height: 3.5rem;
+ padding: 0 2.4rem;
+ border-radius: 2rem;
+ border: 0.1rem solid $color-white;
+ background-color: $color-primary;
+ color: $color-gray10;
+
+ @include tablet {
+ padding: 0;
+ background-color: transparent;
+ color: $color-primary;
+ }
+}
+
+.icon {
+ fill: $color-gray10;
+
+ @include tablet {
+ fill: $color-primary;
+ }
+}
diff --git a/src/folder/ui-add-folder-button/AddFolderButton.tsx b/src/folder/ui-add-folder-button/AddFolderButton.tsx
new file mode 100644
index 0000000000..7b09315dc6
--- /dev/null
+++ b/src/folder/ui-add-folder-button/AddFolderButton.tsx
@@ -0,0 +1,19 @@
+import styles from "./AddFolderButton.module.scss";
+import classNames from "classnames/bind";
+import AddIcon from "./add.svg";
+import { MouseEventHandler } from "react";
+
+const cx = classNames.bind(styles);
+
+type AddFolderButtonProps = {
+ onClick: MouseEventHandler