Skip to content

Commit f8e3e92

Browse files
baeggminbaeggmin
authored
Merge pull request #303 from 1022gusl/Next-박연학-sprint10
[박연학] sprint10
2 parents 4fadba0 + 239c2c9 commit f8e3e92

25 files changed

+922
-60
lines changed

‎app/addboard/AddBoard.module.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.header {
2+
padding: 26px 0;
3+
display: flex;
4+
align-items: center;
5+
justify-content: space-between;
6+
}
7+
8+
.headerTitle {
9+
font-size: 20px;
10+
font-weight: 700;
11+
line-height: 32px;
12+
color: #1f2937;
13+
}
14+
15+
.headerButton {
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
width: 74px;
20+
height: 42px;
21+
padding: 12px 20px;
22+
border: none;
23+
background-color: #3692ff;
24+
border-radius: 8px;
25+
font-size: 16px;
26+
font-weight: 600;
27+
color: #f3f4f6;
28+
cursor: pointer;
29+
}
30+
31+
.headerButton:disabled {
32+
background-color: #9ca3af;
33+
cursor: not-allowed;
34+
}

‎app/addboard/layout.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export const metadata = {
2+
title: "판다마켓",
3+
description: "판다마켓 메인홈",
4+
};
5+
6+
export default function BoardsLayout({
7+
children,
8+
}: {
9+
children: React.ReactNode;
10+
}) {
11+
return <>{children}</>;
12+
}

‎app/addboard/page.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
"use client";
2+
3+
import { useState } from "react";
4+
import ImageUpload from "../components/ui/ImageUpload";
5+
import InputField from "../components/ui/InputField";
6+
import styles from "./AddBoard.module.css";
7+
8+
export default function AddBoard() {
9+
const [title, setTitle] = useState("");
10+
const [content, setContent] = useState("");
11+
12+
const isButtonDisabled = !title || !content;
13+
14+
const handleSubmit = () => {
15+
alert("등록했습니다!");
16+
setTitle("");
17+
setContent("");
18+
};
19+
/*심화 요구사항에 회원가입, 로그인 api를 사용하여 받은 accessToken을 사용하여 게시물 등록을 합니다가 있는데
20+
어떻게 해야 할 지 감이 안 잡힙니다...
21+
로그인 기능을 추가해야 하나요? 아니면 백엔드 서버에서 받아와야 하는건가요?
22+
일단 등록버튼을 클릭하면 인풋필드를 비우고 등록했다는 내용을 화면에 표시되도록 했습니다
23+
*/
24+
25+
return (
26+
<div className="container">
27+
<div className={styles.header}>
28+
<h2 className={styles.headerTitle}>상품 등록하기</h2>
29+
<button
30+
onClick={handleSubmit}
31+
disabled={isButtonDisabled}
32+
className={styles.headerButton}
33+
>
34+
등록
35+
</button>
36+
</div>
37+
<InputField
38+
id="title"
39+
label="*제목"
40+
type="text"
41+
placeholder="제목을 입력해주세요"
42+
value={title}
43+
onChange={(e) => setTitle(e.target.value)}
44+
/>
45+
<InputField
46+
id="content"
47+
label="*내용"
48+
type="textarea"
49+
placeholder="내용을 입력해주세요"
50+
value={content}
51+
onChange={(e) => setContent(e.target.value)}
52+
/>
53+
<ImageUpload title="이미지" />
54+
</div>
55+
);
56+
}

‎app/boards/[id]/BoardDetailPage.module.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.buttonContainer {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
margin: 40px 0;
6+
}
7+
8+
.goToButton {
9+
width: 240px;
10+
height: 48px;
11+
border-radius: 40px;
12+
border: none;
13+
background-color: #3692ff;
14+
font-size: 18px;
15+
font-weight: 600;
16+
text-align: center;
17+
color: #f3f4f6;
18+
cursor: pointer;
19+
}

‎app/boards/[id]/page.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
"use client";
2+
3+
import { useRouter, useParams } from "next/navigation";
4+
import BoardDetail from "@/app/components/boards/id/BoardDetail";
5+
import CommentSection from "@/app/components/boards/id/CommentSection";
6+
import styles from "./BoardDetailPage.module.css";
7+
8+
export default function BoardDetailPage() {
9+
const router = useRouter();
10+
const params = useParams();
11+
const id = params?.id as string;
12+
13+
const handleGoBack = () => {
14+
router.push("/boards");
15+
};
16+
17+
return (
18+
<div className="container">
19+
<BoardDetail id={id} />
20+
<CommentSection articleId={Number(id)} />
21+
<div className={styles.buttonContainer}>
22+
<button className={styles.goToButton} onClick={handleGoBack}>
23+
목록으로 돌아가기
24+
</button>
25+
</div>
26+
</div>
27+
);
28+
}

‎app/components/boards/AllPost.module.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@
2929
margin: 20px 0;
3030
padding-bottom: 20px;
3131
border-bottom: 1px solid #e5e7eb;
32+
transition: background-color 0.3s ease, box-shadow 0.3s ease;
33+
}
34+
35+
.post:hover {
36+
background-color: #f9fafb;
37+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
3238
}
3339

3440
.postContents {

‎app/components/boards/AllPost.tsx‎

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export default function AllPost() {
7777
<div className="container">
7878
<div className={styles.titleContainer}>
7979
<div className={styles.sectionTitle}>게시글</div>
80-
<Link href="/addPost" className={styles.addPostLink}>
80+
<Link href="/addboard" className={styles.addPostLink}>
8181
글쓰기
8282
</Link>
8383
</div>
@@ -104,37 +104,43 @@ export default function AllPost() {
104104
<div className={styles.postsContainer}>
105105
{paginatedArticles.length > 0 ? (
106106
paginatedArticles.map((article) => (
107-
<div key={article.id} className={styles.post}>
108-
<div className={styles.postContents}>
109-
<h3 className={styles.title}>{article.title}</h3>
110-
<div className={styles.imgContainer}>
111-
<Image
112-
src={article.image || "/images/default.png"}
113-
alt={article.title || "default"}
114-
width={48}
115-
height={48}
116-
className={styles.image}
117-
/>
118-
</div>
119-
</div>
120-
<div className={styles.postFooter}>
121-
<div className={styles.info}>
122-
<p>{article.writer.nickname}</p>
123-
<div className={styles.metaDate}>
124-
{new Date(article.createdAt).toLocaleDateString()}
107+
<Link
108+
key={article.id}
109+
href={`/boards/${article.id}`}
110+
className={styles.postLink}
111+
>
112+
<div className={styles.post}>
113+
<div className={styles.postContents}>
114+
<h3 className={styles.title}>{article.title}</h3>
115+
<div className={styles.imgContainer}>
116+
<Image
117+
src={article.image || "/images/default.png"}
118+
alt={article.title || "default"}
119+
width={48}
120+
height={48}
121+
className={styles.image}
122+
/>
125123
</div>
126124
</div>
127-
<div className={styles.metaLike}>
128-
<Image
129-
width={16}
130-
height={16}
131-
src="/images/ic_heart.png"
132-
alt="하트"
133-
/>
134-
{article.likeCount}
125+
<div className={styles.postFooter}>
126+
<div className={styles.info}>
127+
<p>{article.writer.nickname}</p>
128+
<div className={styles.metaDate}>
129+
{new Date(article.createdAt).toLocaleDateString()}
130+
</div>
131+
</div>
132+
<div className={styles.metaLike}>
133+
<Image
134+
width={16}
135+
height={16}
136+
src="/images/ic_heart.png"
137+
alt="하트"
138+
/>
139+
{article.likeCount}
140+
</div>
135141
</div>
136142
</div>
137-
</div>
143+
</Link>
138144
))
139145
) : (
140146
<p>검색 결과가 없습니다.</p>

‎app/components/boards/BestPost.module.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,11 @@
1111
gap: 20px;
1212
}
1313

14-
.post {
14+
.detailLink {
1515
width: 100%;
16+
}
17+
18+
.post {
1619
height: 169px;
1720
border-radius: 8px;
1821
padding: 0 24px;

‎app/components/boards/BestPost.tsx‎

Lines changed: 40 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
44
import { fetchArticles, Article, PaginatedResponse } from "@/app/lib/api/api";
55
import Image from "next/image";
66
import usePageSize from "@/app/hooks/usePagesize";
7+
import Link from "next/link";
78

89
export default function BestPost() {
910
const [articles, setArticles] = useState<Article[]>([]);
@@ -40,46 +41,54 @@ export default function BestPost() {
4041
<h2 className={styles.sectionTitle}>베스트 게시글</h2>
4142
<div className={styles.postList}>
4243
{articles.map((article) => (
43-
<div key={article.id} className={styles.post}>
44-
<div className={styles.bestMedal}>
45-
<Image
46-
width={16}
47-
height={16}
48-
src="/images/ic_medal.png"
49-
alt="메달"
50-
/>
51-
Best
52-
</div>
53-
<div className={styles.postContents}>
54-
<h3 className={styles.title}>{article.title}</h3>
55-
<div className={styles.imgContainer}>
44+
<Link
45+
key={article.id}
46+
href={`/boards/${article.id}`}
47+
className={styles.detailLink}
48+
>
49+
<div className={styles.post}>
50+
<div className={styles.bestMedal}>
5651
<Image
57-
src={article.image || "/images/default.png"}
58-
alt={article.title || "default"}
59-
width={48}
60-
height={48}
61-
className={styles.image}
52+
width={16}
53+
height={16}
54+
src="/images/ic_medal.png"
55+
alt="메달"
6256
/>
57+
Best
6358
</div>
64-
</div>
65-
<div className={styles.metaContainer}>
66-
<div className={styles.postInfo}>
67-
<div className={styles.metaName}>{article.writer.nickname}</div>
68-
<div className={styles.metaLike}>
59+
<div className={styles.postContents}>
60+
<h3 className={styles.title}>{article.title}</h3>
61+
<div className={styles.imgContainer}>
6962
<Image
70-
width={16}
71-
height={16}
72-
src="/images/ic_heart.png"
73-
alt="하트"
63+
src={article.image || "/images/default.png"}
64+
alt={article.title || "default"}
65+
width={48}
66+
height={48}
67+
className={styles.image}
7468
/>
75-
{article.likeCount}
7669
</div>
7770
</div>
78-
<div className={styles.metaDate}>
79-
{new Date(article.createdAt).toLocaleDateString()}
71+
<div className={styles.metaContainer}>
72+
<div className={styles.postInfo}>
73+
<div className={styles.metaName}>
74+
{article.writer.nickname}
75+
</div>
76+
<div className={styles.metaLike}>
77+
<Image
78+
width={16}
79+
height={16}
80+
src="/images/ic_heart.png"
81+
alt="하트"
82+
/>
83+
{article.likeCount}
84+
</div>
85+
</div>
86+
<div className={styles.metaDate}>
87+
{new Date(article.createdAt).toLocaleDateString()}
88+
</div>
8089
</div>
8190
</div>
82-
</div>
91+
</Link>
8392
))}
8493
</div>
8594
</div>

‎app/components/boards/id/BoardDetail.module.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.container {
2+
padding-top: 25px;
3+
}
4+
5+
.content {
6+
font-size: 16px;
7+
font-weight: 400;
8+
line-height: 26px;
9+
color: #1f2937;
10+
}

0 commit comments

Comments
 (0)