feat / style : 게시판 페이지 ui 작업, 사이드바 height 수정, 게시글 컴포넌트&게시판 생성 모달 추가

src/App.tsx

@@ -13,7 +13,7 @@ function App() {
   return (
     <Router>
       <AppContainer>
-        <Sidebar theme="dark" /> 
+        <Sidebar /> 
         <ContentWrapper>
           <Routes>
             <Route path="/sign-up" element={<SignUp />} />

src/components/board/Header.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { BsTrashFill,BsThreeDotsVertical } from 'react-icons/bs';
+
+interface BoardHeader{
+    boardName : string;
+  }
+
+  const Header:React.FC<BoardHeader> = ({ boardName }) => {
+
+    const handleEditButton = () =>{
+
+        /* 추후 api 연동 */
+        alert('수정하기 버튼을 눌렀습니다.')
+    };
+
+    const handleDeleteButton = () => {
+
+        /* 추후 api 연동 */
+        alert('삭제하기 버튼을 눌렀습니다.')
+    }
+
+    const handleCreateButton = () => {
+
+        /* 추후 api 연동 */
+        alert('생성하기 버튼을 눌렀습니다.')
+    }
+
+    return (
+
+      <Container>
+          <Info>
+            <Title>
+              <Board>{boardName}</Board>
+            </Title>
+            <EditButton 
+              onClick={handleEditButton}
+            />
+            <DeleteButton 
+              onClick={handleDeleteButton}
+          />
+          </Info>
+          <CreateButton onClick={handleCreateButton}>수업 생성</CreateButton>
+        </Container>
+    )
+  };
+
+  export default Header;
+
+  const Container=styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    width: 100%;
+  `;
+
+  const Info=styled.div`
+    display: flex;
+    flex-direction: row;
+
+    width: 100%;
+  `;
+
+  const Title = styled.div`
+      display: flex;
+      margin-right: 1.19rem;
+  `;
+
+  const Board = styled.p`
+      color: var(--white);
+      margin: 0; /* 기본 마진 제거 */
+
+      text-shadow: 0px 0px 4px var(--black);
+      font-family: "Pretendard";
+      font-size: 4.0625rem;
+      font-style: normal;
+      font-weight: 700;
+      line-height: normal;
+  `;
+
+  const EditButton=styled(BsThreeDotsVertical)`
+      color: var(--light-gray);
+      width: 1.5rem;
+      height: 1.5rem;
+      flex-shrink: 0;
+  `;
+
+  const DeleteButton=styled(BsTrashFill)`
+      color: var(--light-gray);
+      width: 1.5rem;
+      height: 1.5rem;
+      flex-shrink: 0;
+  `;
+
+  const CreateButton=styled.button`
+      color: var(--white);
+      text-align: center;
+      font-family: "Pretendard";
+      font-size: 1.375rem;
+      font-style: normal;
+      font-weight: 700;
+      line-height: normal;
+      width: 9.92306rem;
+      height: 3.25rem;
+      flex-shrink: 0;
+      border: none;
+      border-radius: 3.125rem;
+      background: var(--gray);
+
+      margin-top: 3rem;
+
+      &:hover {
+        background: var(--black);
+      }
+`;

src/components/board/PostCard/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { PostCardProps } from '../../../models/PostCard';
+import { CardContainer, Title, Badge, Date } from "./style";
+
+const PostCard: React.FC<PostCardProps> = ({ postName, badgeCount, date }) => {
+    return (
+      <CardContainer>
+        {/* 게시글 제목 */}
+        <Title>
+          {postName}
+          {badgeCount > 0 && <Badge>{badgeCount > 99 ? "99+" : badgeCount}</Badge>}
+        </Title>
+        {/* 게시글 생성 시간 */}
+        <Date>{date}</Date>
+      </CardContainer>
+    );
+  };
+
+export default PostCard;

src/components/board/PostCard/style.ts

@@ -0,0 +1,52 @@
+import styled from "@emotion/styled";
+
+export const CardContainer = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.13rem 1.75rem;
+    background-color: var(--post);
+    border-radius: 0.9375rem;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--light-gray);
+    }
+`;
+
+export const Title = styled.div`
+    display: flex;
+    align-items: center;
+    color: var(--background);
+    font-family: "Pretendard";
+    font-size: 1.5625rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+`;
+
+export const Badge = styled.span`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 0.69rem;
+    background-color: var(--red);
+    color: var(--white);
+    font-family: "Pretendard";
+    font-size: 1.25rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    width: 2.8125rem;
+    height: 2.8125rem;
+    border-radius: 50%;
+`;
+
+export const Date = styled.span`
+    color: var(--background);
+    font-family: "Pretendard";
+    font-size: 1.25rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+`;

src/components/layout/sideBar/index.tsx

@@ -1,19 +1,24 @@
-import React from "react";
+import React, { useState } from "react";
 import { SideBar, AddButton, ProfileButton } from "./style";
+import { IoIosAdd } from "react-icons/io";
+import { BsFillPersonFill } from "react-icons/bs"; 
+import AddBoardModal from "../../modals/AddBoardModal"; 
 
-import DarkAddIcon from '../../../assets/icons/addbtn_dark.svg';
-import LightAddIcon from '../../../assets/icons/addbtn_light.svg';
-import ProfileIcon from '../../../assets/icons/profilebtn.svg';
+const Sidebar: React.FC = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
-interface SidebarProps {
-  theme: "dark" | "light"; 
-}
-
-const Sidebar: React.FC<SidebarProps> = ({ theme }) => {
   const handleAddClick = () => {
+    setIsModalOpen(true); 
   };    
 
+  const handleCloseModal = () => {
+    console.log("모달 닫기 클릭됨!"); 
+
+    setIsModalOpen(false);
+  };
+
   const handleProfileClick = () => {
+
   };
 
   const hiddenPaths: string[] = ["/sign-in", "/sign-up"];
@@ -22,23 +27,16 @@ const Sidebar: React.FC<SidebarProps> = ({ theme }) => {
     return null;
   }  
 
-    return (
-    <SideBar theme={theme}>
+  return (
+    <SideBar>
         <AddButton onClick={handleAddClick}>
-          {theme === "dark" ? (
-            <img src={DarkAddIcon} alt="Add" />
-          ) : (
-            <img src={LightAddIcon} alt="Add" />
-          )}
+          <IoIosAdd className="AddIcon"/>
         </AddButton>
 
-        <ProfileButton onClick={handleProfileClick}>
-            {theme === "dark" ? (
-            <img src={ProfileIcon} alt="Profile" />
-            ) : (
-            <img src={ProfileIcon} alt="Profile" />
-            )}
-        </ProfileButton>
+      <ProfileButton onClick={handleProfileClick}>
+        <BsFillPersonFill className="ProfileIcon"/>
+      </ProfileButton>
+      {isModalOpen && <AddBoardModal onClose={handleCloseModal} />}
     </SideBar>
   );
 };