feat / style : 게시판 생성 모달 api 연결, sidebar 스타일 수정

F3B4-KDT-Project · Feb 2, 2025 · 6e46526 · 6e46526
1 parent 973148c
commit 6e46526
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 22 deletions.
diff --git a/src/apis/Board/createBoardApi.ts b/src/apis/Board/createBoardApi.ts
@@ -0,0 +1,24 @@
+import { CreateBoardRequest, CreateBoardResponse } from '../../models/Modal';
+import { http } from '../../apis/httpClient';
+
+export const createBoardApi = async ({
+  title,
+}: CreateBoardRequest): Promise<CreateBoardResponse> => {
+  const token = localStorage.getItem('accessToken'); // 토큰 가져오기
+  if (!token) {
+    throw new Error('토큰이 없습니다. 로그인 상태를 확인해주세요.');
+  }
+
+  const response = await http.post<CreateBoardResponse>(
+    '/api/boards',
+    { title },
+    {
+      headers: {
+        Authorization: `Bearer ${token}`, // 헤더에 토큰 추가
+        'Content-Type': 'application/json',
+      },
+    }
+  );
+
+  return response;
+};
diff --git a/src/components/layout/sideBar/index.tsx b/src/components/layout/sideBar/index.tsx
@@ -1,22 +1,27 @@
 import React, { useState } from 'react';
-import { SideBar, AddButton, ProfileButton } from './style';
+import { SideBar, AddButton, ProfileButton, BoardItem } from './style';
 import { IoIosAdd } from 'react-icons/io';
 import { BsFillPersonFill } from 'react-icons/bs';
 import AddBoardModal from '../../modals/AddBoardModal';
 
 const Sidebar: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [boards, setBoards] = useState<string[]>([]);
 
   const handleAddClick = () => {
     setIsModalOpen(true);
   };
 
   const handleCloseModal = () => {
-    console.log('모달 닫기 클릭됨!');
-
     setIsModalOpen(false);
   };
 
+  const handleAddBoard = (boardName: string) => {
+    const truncatedName =
+      boardName.length > 5 ? `${boardName.slice(0, 5)}...` : boardName;
+    setBoards([truncatedName, ...boards]); // 새로운 게시판을 맨 위에 추가
+  };
+
   const handleProfileClick = () => {};
 
   const hiddenPaths: string[] = ['/sign-in', '/sign-up'];
@@ -27,15 +32,19 @@ const Sidebar: React.FC = () => {
 
   return (
     <SideBar>
-      <AddButton onClick={handleAddClick}>
-        <IoIosAdd className="AddIcon" />
-      </AddButton>
-
+      <div>
+        {boards.map((board, index) => (
+          <BoardItem key={index}>{board}</BoardItem>
+        ))}
+        <AddButton onClick={handleAddClick}>
+          <IoIosAdd className="AddIcon" />
+        </AddButton>
+      </div>
       <ProfileButton onClick={handleProfileClick}>
         <BsFillPersonFill className="ProfileIcon" />
       </ProfileButton>
       {isModalOpen && (
-        <AddBoardModal isOpen={isModalOpen} onClose={handleCloseModal} />
+        <AddBoardModal onClose={handleCloseModal} onAddBoard={handleAddBoard} />
       )}
     </SideBar>
   );

diff --git a/src/components/layout/sideBar/style.ts b/src/components/layout/sideBar/style.ts
@@ -9,13 +9,13 @@ export const SideBar = styled.div`
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
+  padding: 2rem 0rem;
 `;
 
 export const AddButton = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-top: 2rem;
   cursor: pointer;
   transition: transform 0.2s;
   background-color: var(--input);
@@ -45,7 +45,6 @@ export const AddButton = styled.div`
 export const ProfileButton = styled.div`
   display: flex;
   justify-content: center;
-  margin-bottom: 2rem;
   align-items: center;
   cursor: pointer;
   transition: transform 0.2s;
@@ -70,3 +69,20 @@ export const ProfileButton = styled.div`
     color: var(--light-gray);
   }
 `;
+
+export const BoardItem = styled.div`
+  width: 5rem;
+  height: 5rem;
+  margin-bottom: 2rem;
+  border-radius: 50%;
+  background: var(--input);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--white);
+  font-family: 'Pretendard';
+  font-size: 1rem;
+  font-weight: 700;
+  text-align: center;
+  line-height: normal;
+`;
diff --git a/src/components/modals/AddBoardModal/index.tsx b/src/components/modals/AddBoardModal/index.tsx
@@ -15,35 +15,35 @@ import {
 import { BsXLg } from 'react-icons/bs';
 import { BoardModalProps } from '../../../models/Modal';
 import { useBoardInvite } from '../../../hooks/Board/useBoardInvite';
+import { useCreateBoard } from '../../../hooks/Board/useCreateBoard';
 
-const AddBoardModal: React.FC<BoardModalProps> = ({ onClose }) => {
+const AddBoardModal: React.FC<BoardModalProps> = ({ onClose, onAddBoard }) => {
   const [boardName, setBoardName] = useState('');
   const [id, setId] = useState('');
   const [idList, setIdList] = useState<string[]>([]);
   const [idError, setIdError] = useState(false);
   const [idSuccess, setIdSuccess] = useState(false);
 
   const { mutate: inviteUser } = useBoardInvite();
+  const { mutate: createBoard } = useCreateBoard();
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       e.preventDefault(); // 기본 Enter 동작 방지
-      if (id.trim() && !idList.includes(id)) {
+      if (id.trim() && id.trim() && !idList.includes(id)) {
         // API 호출
         inviteUser(
-          { boardId: 1 /* 실제 boardId를 전달해야 합니다 */, loginId: id },
+          { boardId: 1, loginId: id },
           {
-            onSuccess: (data) => {
-              setIdList([...idList, id]); // 초대 성공 시 리스트에 추가
+            onSuccess: () => {
+              setIdList([...idList, id]);
               setIdSuccess(true);
               setIdError(false);
-              setId(''); // 입력 초기화
-              console.log(`초대 성공: ${data.message}`);
+              setId('');
             },
-            onError: (error) => {
+            onError: () => {
               setIdError(true);
               setIdSuccess(false);
-              console.error(`초대 실패:`, error);
             },
           }
         );
@@ -60,10 +60,23 @@ const AddBoardModal: React.FC<BoardModalProps> = ({ onClose }) => {
 
   const handleCreateBoard = () => {
     if (!boardName.trim()) {
-      alert('게시판 이름을 입력하세요.');
+      alert('교실 이름을 입력하세요.');
       return;
     }
-    onClose(); // 모달 닫기
+
+    createBoard(
+      { title: boardName },
+      {
+        onSuccess: () => {
+          onAddBoard(boardName); // Sidebar에 교실 이름 전달
+          onClose(); // 모달 닫기
+        },
+        onError: (error) => {
+          console.error('교실 생성 실패:', error);
+          alert('교실 생성에 실패했습니다. 다시 시도해주세요.');
+        },
+      }
+    );
   };
 
   return (

diff --git a/src/hooks/Board/useCreateBoard.ts b/src/hooks/Board/useCreateBoard.ts
@@ -0,0 +1,15 @@
+import { useMutation } from '@tanstack/react-query';
+import { createBoardApi } from '../../apis/Board/createBoardApi';
+import { CreateBoardRequest, CreateBoardResponse } from '../../models/Modal';
+
+export const useCreateBoard = () => {
+  return useMutation<CreateBoardResponse, Error, CreateBoardRequest>({
+    mutationFn: createBoardApi,
+    onSuccess: (data) => {
+      console.log('교실 생성 성공:', data);
+    },
+    onError: (error) => {
+      console.error('교실 생성 실패:', error);
+    },
+  });
+};
diff --git a/src/models/Modal.ts b/src/models/Modal.ts
@@ -1,6 +1,6 @@
 export interface BoardModalProps {
-  isOpen: boolean;
   onClose: () => void;
+  onAddBoard: (boardName: string) => void;
 }
 
 export interface InviteRequest {
@@ -12,3 +12,14 @@ export interface InviteResponse {
   status: number;
   message: string;
 }
+
+export interface CreateBoardRequest {
+  title: string;
+}
+
+export interface CreateBoardResponse {
+  id: number;
+  title: string;
+  createdAt: string;
+  updatedAt: string;
+}