feat: 커뮤니티페이지 퍼블리싱 #20

potato-club · Apr 10, 2024 · 1ed5d6a · 1ed5d6a
1 parent ed2bfff
commit 1ed5d6a
Show file tree

Hide file tree

Showing 4 changed files with 223 additions and 4 deletions.
diff --git a/pages/communityPage.tsx b/pages/communityPage.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import CommunityPage from "../src/container/CommunityPage/CommunityPage";
+
+const communityPage = () => {
+  return <CommunityPage />;
+};
+
+export default communityPage;
diff --git a/public/data/posts.json b/public/data/posts.json
@@ -0,0 +1,82 @@
+[
+  {
+    "id": 1,
+    "title": "첫 번째 게시물",
+    "content": "이것은 첫 번째 게시물입니다.",
+    "author": "작성자1",
+    "date": "2024-04-08",
+    "viewCount": 100
+  },
+  {
+    "id": 2,
+    "title": "두 번째 게시물",
+    "content": "이것은 두 번째 게시물입니다.",
+    "author": "작성자2",
+    "date": "2024-04-09",
+    "viewCount": 90
+  },
+  {
+    "id": 3,
+    "title": "세 번째 게시물",
+    "content": "이것은 세 번째 게시물입니다.",
+    "author": "작성자3",
+    "date": "2024-04-10",
+    "viewCount": 120
+  },
+  {
+    "id": 4,
+    "title": "첫 번째 게시물",
+    "content": "이것은 첫 번째 게시물입니다.",
+    "author": "작성자1",
+    "date": "2024-04-08",
+    "viewCount": 100
+  },
+  {
+    "id": 5,
+    "title": "두 번째 게시물",
+    "content": "이것은 두 번째 게시물입니다.",
+    "author": "작성자2",
+    "date": "2024-04-09",
+    "viewCount": 90
+  },
+  {
+    "id": 6,
+    "title": "세 번째 게시물",
+    "content": "이것은 세 번째 게시물입니다.",
+    "author": "작성자3",
+    "date": "2024-04-10",
+    "viewCount": 140
+  },
+  {
+    "id": 3,
+    "title": "세 번째 게시물",
+    "content": "이것은 세 번째 게시물입니다.",
+    "author": "작성자3",
+    "date": "2024-04-10",
+    "viewCount": 120
+  },
+  {
+    "id": 4,
+    "title": "첫 번째 게시물",
+    "content": "이것은 첫 번째 게시물입니다.",
+    "author": "작성자1",
+    "date": "2024-04-08",
+    "viewCount": 100
+  },
+  {
+    "id": 5,
+    "title": "두 번째 게시물",
+    "content": "이것은 두 번째 게시물입니다.",
+    "author": "작성자2",
+    "date": "2024-04-09",
+    "viewCount": 90
+  },
+  {
+    "id": 6,
+    "title": "세 번째 게시물",
+    "content": "이것은 세 번째 게시물입니다.",
+    "author": "작성자3",
+    "date": "2024-04-10",
+    "viewCount": 120
+  }
+]
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -27,6 +27,10 @@ const Header = () => {
     setMenuState(2);
     router.push("/mentoringPage");
   };
+  const communityClick = () => {
+    setMenuState(3);
+    router.push("/communityPage");
+  };
 
   return (
     <>
@@ -57,10 +61,7 @@ const Header = () => {
           <MenuDiv $isSelected={menuState === 2} onClick={mentoringClick}>
             멘토링
           </MenuDiv>
-          <MenuDiv
-            $isSelected={menuState === 3}
-            onClick={() => setMenuState(3)}
-          >
+          <MenuDiv $isSelected={menuState === 3} onClick={communityClick}>
             커뮤니티
           </MenuDiv>
         </MenuWrapper>

diff --git a/src/container/CommunityPage/CommunityPage.tsx b/src/container/CommunityPage/CommunityPage.tsx
@@ -0,0 +1,128 @@
+import React from "react";
+import styled from "styled-components";
+import postsData from "../../../public/data/posts.json";
+
+interface Post {
+  id: number;
+  title: string;
+  content: string;
+  author: string;
+  date: string;
+  viewCount: number;
+}
+
+const CommunityPage: React.FC = () => {
+  const posts: Post[] = postsData as Post[];
+  const hotPosts = posts.filter((post) => post.viewCount >= 140);
+
+  return (
+    <Wrapper>
+      <Title>커뮤니티 페이지</Title>
+      <Separator />
+      <HotPostsContainer>
+        <HotPostsTitle>Hot 게시글</HotPostsTitle>
+        {hotPosts.map((post) => (
+          <HotPost key={post.id}>
+            <HotPostTitle>{post.title}</HotPostTitle>
+            <HotPostInfo>
+              작성자: {post.author} | 날짜: {post.date} | 조회수:{" "}
+              {post.viewCount}
+            </HotPostInfo>
+          </HotPost>
+        ))}
+      </HotPostsContainer>
+      <Separator />
+      <Table>
+        <thead>
+          <tr>
+            <Th>글 ID</Th>
+            <Th>제목</Th>
+            <Th>작성자</Th>
+            <Th>날짜</Th>
+            <Th>조회수</Th>
+          </tr>
+        </thead>
+        <tbody>
+          {posts.map((post) => (
+            <tr key={post.id}>
+              <Td>{post.id}</Td>
+              <Td>{post.title}</Td>
+              <Td>{post.author}</Td>
+              <Td>{post.date}</Td>
+              <Td>{post.viewCount}</Td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+    </Wrapper>
+  );
+};
+
+export default CommunityPage;
+
+const Wrapper = styled.div`
+  width: 100%;
+  min-height: 100vh;
+  background-color: #f2f2f2;
+  color: black;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Title = styled.h1`
+  font-size: 2.5rem;
+  color: black;
+  margin-bottom: 20px;
+`;
+
+const Separator = styled.hr`
+  width: 100%;
+  margin-bottom: 20px;
+`;
+
+const HotPostsContainer = styled.div`
+  width: 60%;
+  margin-bottom: 20px;
+`;
+
+const HotPostsTitle = styled.h2`
+  font-size: 1.8rem;
+  color: #333;
+  margin-bottom: 10px;
+`;
+
+const HotPost = styled.div`
+  background-color: #ffeded;
+  border-radius: 8px;
+  padding: 10px;
+  margin-bottom: 10px;
+`;
+
+const HotPostTitle = styled.h3`
+  font-size: 1.4rem;
+  color: #000000;
+`;
+
+const HotPostInfo = styled.p`
+  font-size: 1rem;
+  color: #555;
+`;
+
+const Table = styled.table`
+  width: 60%;
+  border-collapse: collapse;
+`;
+
+const Th = styled.th`
+  padding: 10px;
+  text-align: left;
+  background-color: #bebebe;
+  color: white;
+`;
+
+const Td = styled.td`
+  padding: 10px;
+  background-color: white;
+`;