feat / style : 게시판 수정, 게시판 삭제 모달창 추가

package.json

@@ -24,6 +24,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",
+    "react-modal": "^3.16.3",
     "react-router-dom": "^7.1.1",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "vite-plugin-node-polyfills": "^0.23.0"
@@ -33,6 +34,7 @@
     "@types/axios": "^0.14.4",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
+    "@types/react-modal": "^3.16.3",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^8.20.0",
     "@typescript-eslint/parser": "^8.20.0",

src/components/board/Header.tsx

@@ -1,21 +1,16 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import { BsTrashFill, BsThreeDotsVertical } from 'react-icons/bs';
+import EditBoardModal from '../modals/EditBoardModal';
+import DeleteBoardModal from '../modals/DeleteBoardModal';
 
 interface BoardHeader {
   boardName: string;
 }
 
 const Header: React.FC<BoardHeader> = ({ boardName }) => {
-  const handleEditButton = () => {
-    /* 추후 api 연동 */
-    alert('수정하기 버튼을 눌렀습니다.');
-  };
-
-  const handleDeleteButton = () => {
-    /* 추후 api 연동 */
-    alert('삭제하기 버튼을 눌렀습니다.');
-  };
+  const [isEditBoardModalOpen, setEditBoardModalOpen] = useState(false);
+  const [isDeleteBoardModalOpen, setDeleteBoardModalOpen] = useState(false);
 
   const handleCreateButton = () => {
     /* 추후 api 연동 */
@@ -28,10 +23,20 @@ const Header: React.FC<BoardHeader> = ({ boardName }) => {
         <Title>
           <Board>{boardName}</Board>
         </Title>
-        <EditButton onClick={handleEditButton} />
-        <DeleteButton onClick={handleDeleteButton} />
+        <EditButton onClick={() => setEditBoardModalOpen(true)} />
+        <DeleteButton onClick={() => setDeleteBoardModalOpen(true)} />
       </Info>
       <CreateButton onClick={handleCreateButton}>수업 생성</CreateButton>
+
+      {/* 모달 컴포넌트 */}
+      <EditBoardModal
+        isOpen={isEditBoardModalOpen}
+        onClose={() => setEditBoardModalOpen(false)}
+      />
+      <DeleteBoardModal
+        isOpen={isDeleteBoardModalOpen}
+        onClose={() => setDeleteBoardModalOpen(false)}
+      />
     </Container>
   );
 };

src/components/layout/sideBar/index.tsx

@@ -34,7 +34,9 @@ const Sidebar: React.FC = () => {
       <ProfileButton onClick={handleProfileClick}>
         <BsFillPersonFill className="ProfileIcon" />
       </ProfileButton>
-      {isModalOpen && <AddBoardModal onClose={handleCloseModal} />}
+      {isModalOpen && (
+        <AddBoardModal isOpen={isModalOpen} onClose={handleCloseModal} />
+      )}
     </SideBar>
   );
 };

src/components/modals/AddBoardModal/index.tsx

@@ -1,101 +1,99 @@
-import React, { useState } from "react";
+import React, { useState } from 'react';
 import {
   ModalOverlay,
   ModalContent,
   ModalHeader,
   InputFieldWrapper,
   InputField,
-  EmailList,
+  IdList,
   ButtonWrapper,
   SubmitButton,
   Line,
   ErrorMessage,
   SuccessMessage,
-} from "./style";
-import { BsXLg } from "react-icons/bs";
-
-const AddBoardModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
-  const [boardName, setBoardName] = useState("");
-  const [email, setEmail] = useState("");
-  const [emailList, setEmailList] = useState<string[]>([]);
-  const [emailError, setEmailError] = useState(false);
-  const [emailSuccess, setEmailSuccess] = useState(false);
-
-  const validateEmail = (email: string): boolean => {
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return emailRegex.test(email);
-  };
+} from './style';
+import { BsXLg } from 'react-icons/bs';
+import { BoardModalProps } from '../../../models/Modal';
 
+const AddBoardModal: React.FC<BoardModalProps> = ({ onClose }) => {
+  const [boardName, setBoardName] = useState('');
+  const [id, setId] = useState('');
+  const [idList, setIdList] = useState<string[]>([]);
+  const [idError, setIdError] = useState(false);
+  const [idSuccess, setIdSuccess] = useState(false);
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
+    if (e.key === 'Enter') {
       e.preventDefault(); // 기본 엔터 동작 방지
-      if (validateEmail(email)) {
-        if (!emailList.includes(email)) {
-          setEmailList([...emailList, email]);
-          setEmailSuccess(true);
-          setEmailError(false);
-          setEmail(""); // 입력 초기화
+      if (id.trim()) {
+        if (!idList.includes(id)) {
+          setIdList([...idList, id]);
+          setIdSuccess(true); // 성공 메시지 표시
+          setIdError(false); // 에러 메시지 제거
+          setId(''); // 입력 초기화
         } else {
-          setEmailError(true);
-          setEmailSuccess(false);
+          setIdError(true); // 중복된 ID 입력 시 에러 표시
+          setIdSuccess(false); // 성공 메시지 제거
         }
       } else {
-        setEmailError(true);
-        setEmailSuccess(false);
+        setIdError(true); // 빈 입력 값에 대한 에러 표시
+        setIdSuccess(false); // 성공 메시지 제거
       }
     }
   };
 
-  const handleRemoveEmail = (targetEmail: string) => {
-    setEmailList(emailList.filter((item) => item !== targetEmail));
+  const handleRemoveId = (targetId: string) => {
+    setIdList(idList.filter((item) => item !== targetId));
   };
 
   const handleCreateBoard = () => {
-    console.log("게시판 이름:", boardName);
-    console.log("참여자 이메일 목록:", emailList);
     onClose(); // 모달 닫기
   };
 
   return (
     <ModalOverlay>
       <ModalContent>
         <ModalHeader>
-            <h2>게시판 생성하기</h2>
-            <BsXLg className="CloseButton" onClick={onClose} />
+          <h2>교실 생성하기</h2>
+          <BsXLg className="CloseButton" onClick={onClose} />
         </ModalHeader>
         <Line />
         <InputField
           type="text"
-          placeholder="게시판 이름을 입력하세요."
+          placeholder="교실 이름을 입력하세요."
           value={boardName}
-          onChange={(e) => setBoardName(e.target.value)}    
+          onChange={(e) => setBoardName(e.target.value)}
         />
         <h3>참여자 초대하기</h3>
         <InputFieldWrapper>
           <InputField
             type="text"
-            placeholder="초대하려는 사용자의 이메일을 입력하세요."
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
+            placeholder="초대하려는 사용자의 아이디를 입력하세요."
+            value={id}
+            onChange={(e) => setId(e.target.value)}
             onKeyDown={handleKeyDown}
             style={{
-              borderColor: emailError ? "var(--red)" : "var(--light-gray)",
+              borderColor: idError ? 'var(--red)' : 'var(--light-gray)',
             }}
           />
-          {emailSuccess && <SuccessMessage>초대가 완료되었습니다.</SuccessMessage>}
-          {emailError && <ErrorMessage>틀린 이메일이거나 없는 이메일입니다.</ErrorMessage>}
+          {idSuccess && <SuccessMessage>초대가 완료되었습니다.</SuccessMessage>}
+          {idError && (
+            <ErrorMessage>틀린 아이디거나 없는 아이디입니다.</ErrorMessage>
+          )}
         </InputFieldWrapper>
-        <EmailList>
-          {emailList.map((item, index) => (
+        <IdList>
+          {idList.map((item, index) => (
             <div key={index} className="email-item">
               {item}
-              <BsXLg className="CloseEmailButton" onClick={() => handleRemoveEmail(item)} />
+              <BsXLg
+                className="CloseEmailButton"
+                onClick={() => handleRemoveId(item)}
+              />
             </div>
           ))}
-        </EmailList> 
+        </IdList>
         <ButtonWrapper>
-            <SubmitButton onClick={handleCreateBoard}>게시판 생성</SubmitButton>
+          <SubmitButton onClick={handleCreateBoard}>교실 생성</SubmitButton>
         </ButtonWrapper>
       </ModalContent>
     </ModalOverlay>