Merge pull request #82 from KDT-Web-IDE-Project/61-style

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/Post/MessageCard/index.tsx

@@ -9,7 +9,6 @@ const MessageCard: React.FC<Message> = ({
   content,
   time,
 }) => {
-
   // 임시 함수: userId를 가공하거나 기본 출력용으로 활용
   const getUserIdDisplay = (id: string | number) => {
     return `User: ${id}`;

src/components/board/Header.tsx

@@ -0,0 +1,107 @@
+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,21 @@
+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,44 +1,40 @@
-import React from "react";
-import { SideBar, AddButton, ProfileButton } from "./style";
+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 handleProfileClick = () => {
+  const handleCloseModal = () => {
+    console.log('모달 닫기 클릭됨!');
+
+    setIsModalOpen(false);
   };
 
-  const hiddenPaths: string[] = ["/sign-in", "/sign-up"];
+  const handleProfileClick = () => {};
+
+  const hiddenPaths: string[] = ['/sign-in', '/sign-up'];
 
   if (hiddenPaths.includes(location.pathname)) {
     return null;
-  }  
-
-    return (
-    <SideBar theme={theme}>
-        <AddButton onClick={handleAddClick}>
-          {theme === "dark" ? (
-            <img src={DarkAddIcon} alt="Add" />
-          ) : (
-            <img src={LightAddIcon} alt="Add" />
-          )}
-        </AddButton>
-
-        <ProfileButton onClick={handleProfileClick}>
-            {theme === "dark" ? (
-            <img src={ProfileIcon} alt="Profile" />
-            ) : (
-            <img src={ProfileIcon} alt="Profile" />
-            )}
-        </ProfileButton>
+  }
+
+  return (
+    <SideBar>
+      <AddButton onClick={handleAddClick}>
+        <IoIosAdd className="AddIcon" />
+      </AddButton>
+
+      <ProfileButton onClick={handleProfileClick}>
+        <BsFillPersonFill className="ProfileIcon" />
+      </ProfileButton>
+      {isModalOpen && <AddBoardModal onClose={handleCloseModal} />}
     </SideBar>
   );
 };