Skip to content

Commit

Permalink
Merge pull request #23 from potato-club/feat/communityPage
Browse files Browse the repository at this point in the history 
feat: 커뮤니티페이지 세부 메뉴 추가 #20
  • Loading branch information
@jihy30n
jihy30n authored Apr 30, 2024
2 parents ea0a335 + 1932a2c commit 896a795
Show file tree
Hide file tree
Showing 4 changed files with 186 additions and 74 deletions.
156 changes: 118 additions & 38 deletions public/data/posts.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,58 +25,138 @@
},
{
"id": 4,
"title": "첫 번째 게시물",
"content": "이것은 첫 번째 게시물입니다.",
"author": "작성자1",
"date": "2024-04-08",
"viewCount": 100
"title": "네 번째 게시물",
"content": "이것은 네 번째 게시물입니다.",
"author": "작성자4",
"date": "2024-04-11",
"viewCount": 110
},
{
"id": 5,
"title": "두 번째 게시물",
"content": "이것은 두 번째 게시물입니다.",
"author": "작성자2",
"date": "2024-04-09",
"viewCount": 90
"title": "다섯 번째 게시물",
"content": "이것은 다섯 번째 게시물입니다.",
"author": "작성자5",
"date": "2024-04-12",
"viewCount": 130
},
{
"id": 6,
"title": "세 번째 게시물",
"content": "이것은 세 번째 게시물입니다.",
"author": "작성자3",
"date": "2024-04-10",
"title": "여섯 번째 게시물",
"content": "이것은 여섯 번째 게시물입니다.",
"author": "작성자6",
"date": "2024-04-13",
"viewCount": 140
},
{
"id": 3,
"title": "세 번째 게시물",
"content": "이것은 세 번째 게시물입니다.",
"author": "작성자3",
"date": "2024-04-10",
"viewCount": 120
"id": 7,
"title": "일곱 번째 게시물",
"content": "이것은 일곱 번째 게시물입니다.",
"author": "작성자7",
"date": "2024-04-14",
"viewCount": 150
},
{
"id": 4,
"title": "첫 번째 게시물",
"content": "이것은 첫 번째 게시물입니다.",
"author": "작성자1",
"date": "2024-04-08",
"viewCount": 100
"id": 8,
"title": "여덟 번째 게시물",
"content": "이것은 여덟 번째 게시물입니다.",
"author": "작성자8",
"date": "2024-04-15",
"viewCount": 160
},
{
"id": 5,
"title": "두 번째 게시물",
"content": "이것은 두 번째 게시물입니다.",
"author": "작성자2",
"date": "2024-04-09",
"viewCount": 90
"id": 9,
"title": "아홉 번째 게시물",
"content": "이것은 아홉 번째 게시물입니다.",
"author": "작성자9",
"date": "2024-04-16",
"viewCount": 170
},
{
"id": 6,
"title": "세 번째 게시물",
"content": "이것은 세 번째 게시물입니다.",
"author": "작성자3",
"date": "2024-04-10",
"viewCount": 120
"id": 10,
"title": "열 번째 게시물",
"content": "이것은 열 번째 게시물입니다.",
"author": "작성자10",
"date": "2024-04-17",
"viewCount": 180
},
{
"id": 11,
"title": "열한 번째 게시물",
"content": "이것은 열한 번째 게시물입니다.",
"author": "작성자11",
"date": "2024-04-18",
"viewCount": 190
},
{
"id": 12,
"title": "열두 번째 게시물",
"content": "이것은 열두 번째 게시물입니다.",
"author": "작성자12",
"date": "2024-04-19",
"viewCount": 200
},
{
"id": 13,
"title": "열세 번째 게시물",
"content": "이것은 열세 번째 게시물입니다.",
"author": "작성자13",
"date": "2024-04-20",
"viewCount": 210
},
{
"id": 14,
"title": "열네 번째 게시물",
"content": "이것은 열네 번째 게시물입니다.",
"author": "작성자14",
"date": "2024-04-21",
"viewCount": 220
},
{
"id": 15,
"title": "열다섯 번째 게시물",
"content": "이것은 열다섯 번째 게시물입니다.",
"author": "작성자15",
"date": "2024-04-22",
"viewCount": 230
},
{
"id": 16,
"title": "열여섯 번째 게시물",
"content": "이것은 열여섯 번째 게시물입니다.",
"author": "작성자16",
"date": "2024-04-23",
"viewCount": 240
},
{
"id": 17,
"title": "열일곱 번째 게시물",
"content": "이것은 열일곱 번째 게시물입니다.",
"author": "작성자17",
"date": "2024-04-24",
"viewCount": 250
},
{
"id": 18,
"title": "열여덟 번째 게시물",
"content": "이것은 열여덟 번째 게시물입니다.",
"author": "작성자18",
"date": "2024-04-25",
"viewCount": 260
},
{
"id": 19,
"title": "열아홉 번째 게시물",
"content": "이것은 열아홉 번째 게시물입니다.",
"author": "작성자19",
"date": "2024-04-26",
"viewCount": 270
},
{
"id": 20,
"title": "스무 번째 게시물",
"content": "이것은 스무 번째 게시물입니다.",
"author": "작성자20",
"date": "2024-04-27",
"viewCount": 280
}
]
2 changes: 2 additions & 0 deletions src/components/pagination.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import React, { useState, useEffect } from "react";
import styled from "styled-components";
95 changes: 62 additions & 33 deletions src/container/CommunityPage/CommunityPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import styled from "styled-components";
import postsData from "../../../public/data/posts.json";

Expand All @@ -11,46 +11,59 @@ interface Post {
viewCount: number;
}

interface MenuTypes {
$isSelected: boolean;
}

const categories = ["전체글", "질문", "정보", "잡담", "기타"];

const CommunityPage: React.FC = () => {
const posts: Post[] = postsData as Post[];
const hotPosts = posts.filter((post) => post.viewCount >= 140);
const [cateState, setCateState] = useState<number>(0);
const hotPosts = posts.filter((post) => post.viewCount >= 140).slice(0, 5); // 상위 5개만 선택

return (
<Wrapper>
<Title>커뮤니티 페이지</Title>
<Separator />
<HotPostsTitle> 인기글 </HotPostsTitle>
<HotPostsContainer>
<HotPostsTitle>Hot 게시글</HotPostsTitle>
{hotPosts.map((post) => (
<HotPost key={post.id}>
<HotPostTitle>{post.title}</HotPostTitle>
<HotPostInfo>
작성자: {post.author} | 날짜: {post.date} | 조회수:{" "}
작성자: {post.author} | 날짜: {post.date} | 조회수:
{post.viewCount}
</HotPostInfo>
</HotPost>
))}
</HotPostsContainer>
<Separator />
<CateBtnWrapper>
{categories.map((category, index) => (
<CateBtn
key={index}
$isSelected={cateState === index}
onClick={() => setCateState(index)}
>
{category}
</CateBtn>
))}
</CateBtnWrapper>

<Table>
<thead>
<tr>
<Th>글 ID</Th>
<Th>제목</Th>
<Th>작성자</Th>
<Th>날짜</Th>
<Th>조회수</Th>
</tr>
<PostInfo>
{Object.keys(posts[0]).map((key) => (
<PostColumn key={key}>{key}</PostColumn>
))}
</PostInfo>
</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>
<PostInfo key={post.id}>
{Object.values(post).map((value, index) => (
<PostCell key={index}>{value}</PostCell>
))}
</PostInfo>
))}
</tbody>
</Table>
Expand All @@ -63,20 +76,14 @@ export default CommunityPage;
const Wrapper = styled.div`
width: 100%;
min-height: 100vh;
background-color: #f2f2f2;
background-color: white;
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;
Expand All @@ -85,28 +92,45 @@ const Separator = styled.hr`
const HotPostsContainer = styled.div`
width: 60%;
margin-bottom: 20px;
border: 2px solid #dddddd;
border-radius: 30px;
`;

const CateBtn = styled.button<MenuTypes>`
width: 80px;
color: ${(props) => (props.$isSelected ? "#5649ea" : "#B6B6B6")};
font-size: 20px;
font-weight: 600;
`;

const CateBtnWrapper = styled.div`
width: 60%;
display: flex;
margin-top: 50px;
margin-bottom: 30px;
`;

const HotPostsTitle = styled.h2`
font-size: 1.8rem;
font-size: 25px;
font-weight: 600;
color: #333;
margin-bottom: 10px;
text-align: left;
`;

const HotPost = styled.div`
background-color: #ffeded;
border-radius: 8px;
padding: 10px;
margin-bottom: 10px;
`;

const HotPostTitle = styled.h3`
font-size: 1.4rem;
font-size: 20px;
color: #000000;
`;

const HotPostInfo = styled.p`
font-size: 1rem;
font-size: 15px;
color: #555;
`;

Expand All @@ -115,14 +139,19 @@ const Table = styled.table`
border-collapse: collapse;
`;

const Th = styled.th`
const PostInfo = styled.tr`
background-color: #bebebe;
color: black;
`;

const PostColumn = styled.th`
padding: 10px;
text-align: left;
background-color: #bebebe;
color: white;
`;

const Td = styled.td`
const PostCell = styled.td`
padding: 10px;
background-color: white;
`;
7 changes: 4 additions & 3 deletions src/container/SignUpPage/SignUpTags.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,10 @@ function SignUpTags() {

const router = useRouter();

const onSubmit = (data: any) => {
router.push("/signup-page");
};
// //추후 수정
// const onSubmit = (data: any) => {
// router.push("/signupPage");
// };

const options = tags.map((tag: any) => ({
value: tag.name,
Expand Down

0 comments on commit 896a795

Please sign in to comment.