feat: 1. 폴더삭제모달 완료 2. 폴더 이름 변경 모달 수정 (현재폴더명 출력)

src/components/Modals/AddFolderModal.jsx

@@ -7,6 +7,7 @@ export const AddFolderModal = ({
   isOpen,
   title,
   placeholder,
+  description,
   buttonText,
   onCloseClick,
   onKeyDown,
@@ -19,6 +20,7 @@ export const AddFolderModal = ({
         title={
           <S.ModalTitle>
             <h2>{title}</h2>
+            <p>{description}</p>
           </S.ModalTitle>
         }
         content={

src/components/Modals/DeleteModal.jsx

@@ -0,0 +1,32 @@
+import { Modal } from "../Modal/Modal";
+import { ModalContentBox } from "../Modal/ModalContentBox";
+
+import * as S from "./Modals.style";
+
+export const DeleteModal = ({
+  isOpen,
+  title,
+  description,
+  buttonText,
+  onCloseClick,
+  onKeyDown,
+}) => {
+  return (
+    <Modal isOpen={isOpen} onCloseClick={onCloseClick} onKeyDown={onKeyDown}>
+      <ModalContentBox
+        title={
+          <S.ModalTitle>
+            <h2>{title}</h2>
+            <p>{description}</p>
+          </S.ModalTitle>
+        }
+        content={
+          <S.ModalContent>
+            <button className="btn-primary red">{buttonText}</button>
+          </S.ModalContent>
+        }
+        onCloseClick={onCloseClick}
+      />
+    </Modal>
+  );
+};

src/components/Folder/FolderToolBar.jsx

@@ -3,6 +3,7 @@ import { ALL_LINKS_ID } from "../../api/constant";
 import { ALL_LINKS_TEXT, MODALS_ID, BUTTONS } from "./constant";
 import * as FolderToolBarLayout from "./FolderToolBar.style";
 import { AddFolderModal } from "../\bModals/AddFolderModal";
+import { DeleteModal } from "../\bModals/DeleteModal";
 
 export const FolderToolBar = ({
   folderList,
@@ -72,8 +73,11 @@ export const FolderToolBar = ({
       {/* "전체" 일 때를 제외한 버튼 출력 */}
       {selectedFolderId !== ALL_LINKS_ID && (
         <FolderToolBarLayout.IconButtonWrap>
-          {BUTTONS.map(({ text, iconSource }, index) => (
-            <FolderToolBarLayout.IconButton key={index}>
+          {BUTTONS.map(({ text, iconSource, modalId }, index) => (
+            <FolderToolBarLayout.IconButton
+              key={index}
+              onClick={() => setCurrentModal(modalId)}
+            >
               <FolderToolBarLayout.IconImage
                 src={iconSource}
                 alt={`${text} 아이콘`}
@@ -83,6 +87,23 @@ export const FolderToolBar = ({
               </FolderToolBarLayout.IconText>
             </FolderToolBarLayout.IconButton>
           ))}
+          <AddFolderModal
+            isOpen={currentModal === MODALS_ID.rename}
+            title="폴더 이름 변경"
+            placeholder="내용 입력"
+            description={folderName}
+            buttonText="변경하기"
+            onCloseClick={closeModal}
+            onKeyDown={handleKeyDown}
+          />
+          <DeleteModal
+            isOpen={currentModal === MODALS_ID.delete}
+            title="폴더 삭제"
+            description={folderName}
+            buttonText="삭제하기"
+            onCloseClick={closeModal}
+            onKeyDown={handleKeyDown}
+          />
         </FolderToolBarLayout.IconButtonWrap>
       )}
     </FolderToolBarLayout.FolderToolBarWrap>

src/components/Folder/constant.js

@@ -11,13 +11,16 @@ export const BUTTONS = [
   {
     iconSource: "images/icon/share.svg",
     text: "공유",
+    modalId: MODALS_ID.share,
   },
   {
     iconSource: "images/icon/pen.svg",
     text: "이름 변경",
+    modalId: MODALS_ID.rename,
   },
   {
     iconSource: "images/icon/delete.svg",
     text: "삭제",
+    modalId: MODALS_ID.delete,
   },
 ];

src/styles/button.css

@@ -18,6 +18,10 @@
   }
 }
 
+.btn-primary.red {
+  background: var(--Linkbrary-red);
+}
+
 .btn-sm {
   width: 12.8rem;
 }