Merge pull request #30 from KERT-core/feature/board

feat: 게시판 리스트 페이지 및 뷰어 페이지 완료
KERT-core · Aug 31, 2024 · c8c6267 · c8c6267
2 parents 1cc83f4 + daf046a
commit c8c6267
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 6 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -22,6 +22,7 @@ import {
 } from './components/display/dashboard';
 import DevDocument from './pages/DevDocument';
 import Board from './pages/Board';
+import Article from './pages/Article';
 
 export default function App() {
   return (
@@ -32,6 +33,7 @@ export default function App() {
           <Route index path="/" element={<MainPage />} />
           <Route path="/developer" element={<DevDocument />} />
           <Route path="/board" element={<Board />} />
+          <Route path="/articles/:id" element={<Article />} />
           <Route path="*" element={<NotFound />} />
           <Route path="/dashboard" element={<DashboardLayout />}>
             <Route index path="/dashboard" element={<DashboardHome />} />

diff --git a/src/pages/Article.jsx b/src/pages/Article.jsx
@@ -0,0 +1,69 @@
+import styled from 'styled-components';
+import { Text } from '../components/typograph/Text';
+
+const ArticleContainer = styled.div`
+  width: 100%;
+  margin: 0 auto;
+  margin-top: 80px;
+  padding: 3rem 4rem;
+
+  @media (min-width: 640px) {
+    max-width: 640px;
+  }
+  @media (min-width: 768px) {
+    max-width: 768px;
+  }
+  @media (min-width: 1024px) {
+    max-width: 1024px;
+  }
+  @media (min-width: 1280px) {
+    max-width: 1280px;
+  }
+`;
+
+const ArticleHeader = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 1rem;
+  gap: 1rem;
+`;
+
+const ArticleTitleGroup = styled.div`
+  padding: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+`;
+
+const ArticleHorizontalLine = styled.hr`
+  width: 100%;
+  margin: 1.5rem 0;
+  border: 1px solid #282c30;
+`;
+
+export default function Article() {
+  return (
+    <ArticleContainer>
+      <ArticleHeader>
+        <Text size="18px" weight="bold" color="--secondary-text-color">
+          카테고리
+        </Text>
+        <ArticleTitleGroup>
+          <Text size="40px" weight="extrabold">
+            제목을 입력하세요
+          </Text>
+          <Text size="m" color="--secondary-text-color">
+            카드에 표시될 설명을 입력하세요
+          </Text>
+        </ArticleTitleGroup>
+        <Text size="s" color="--secondary-text-color">
+          KERT 관리자 | 2024.07.27
+        </Text>
+      </ArticleHeader>
+      <ArticleHorizontalLine />
+    </ArticleContainer>
+  );
+}
diff --git a/src/pages/Board.jsx b/src/pages/Board.jsx
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { Button } from '../components/forms/Button';
+import { Text } from '../components/typograph/Text';
 
 const Container = styled.div`
   width: 100%;
@@ -19,9 +20,6 @@ const Container = styled.div`
   @media (min-width: 1280px) {
     max-width: 1280px;
   }
-  @media (min-width: 1536px) {
-    max-width: 1536px;
-  }
 `;
 
 const TitleBox = styled.div`
@@ -53,6 +51,52 @@ const ButtonGroup = styled.div`
   margin-top: 2rem;
 `;
 
+const PostItems = styled.div`
+  padding: 2rem 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 3rem;
+`;
+
+const PostCardWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 10px;
+`;
+
+const PostCardContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+`;
+
+const PostCardImage = styled.img`
+  width: 100%;
+  height: 50%;
+  border-radius: 10px;
+  object-fit: cover;
+`;
+
+const PostCard = ({ title, description, author, image }) => {
+  return (
+    <PostCardWrapper>
+      <PostCardImage src={image} />
+      <PostCardContainer>
+        <Text size="l" weight="extrabold">
+          {title}
+        </Text>
+        <Text size="s">{description}</Text>
+        <Text size="s" weight="bold">
+          {author}
+        </Text>
+      </PostCardContainer>
+    </PostCardWrapper>
+  );
+};
+
 export default function Board() {
   return (
     <Container>
@@ -61,11 +105,28 @@ export default function Board() {
         <Description>열심히 소통하는 KERT, 자세히 알아볼 수 있어요</Description>
       </TitleBox>
       <ButtonGroup>
-        <Button type="rounded">asdf</Button>
-        <Button type="rounded" color="var(--secondary-color)">
-          asdf
+        <Button type="rounded">전체</Button>
+        <Button type="rounded" color="--transparent-button-background">
+          공지
+        </Button>
+        <Button type="rounded" color="--transparent-button-background">
+          블로그
+        </Button>
+        <Button type="rounded" color="--transparent-button-background">
+          기.보.교
         </Button>
       </ButtonGroup>
+      <PostItems>
+        {Array.from({ length: 9 }).map((_, index) => (
+          <PostCard
+            key={index}
+            title="여기에 제목 입력"
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit....."
+            author="KERT 관리자"
+            image={`https://picsum.photos/200?random=${index}`}
+          />
+        ))}
+      </PostItems>
     </Container>
   );
 }
diff --git a/src/styles/global.js b/src/styles/global.js
@@ -10,6 +10,7 @@ export const GlobalStyle = createGlobalStyle`
         --warning-color: #F1C40F;
         --success-color: #2ECC71;
         --container-border-width: 1px;
+        --transparent-button-background: rgba(255, 255, 255, 0.05);
     }
 
     body {