Skip to content

[홍명주] Sprint 9 #144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gyulrangdev merged 8 commits into from
Oct 14, 2025
Merged

[홍명주] Sprint 9 #144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7c14074
style: Improve styles and add board link button
MyeongjuHong Oct 1, 2025
414c0dd
chore: Add api url variable
MyeongjuHong Oct 1, 2025
4ccd9e1
feat: Add fetch error handling logic on board detail page
MyeongjuHong Oct 1, 2025
dc80347
fix: Add return; to further execution
MyeongjuHong Oct 1, 2025
7b4127d
fix: Fix Error message including statusText
MyeongjuHong Oct 1, 2025
f176516
style: Update board page styles
MyeongjuHong Oct 1, 2025
5fd3d02
feat: Add header url styling via path name
MyeongjuHong Oct 1, 2025
43467e7
feat: Add cursor pointer
MyeongjuHong Oct 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions public/icons/ic_back.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 17 additions & 14 deletions src/app/board/[id]/BoardDetail.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
"use client";

import ActionDropdown from "@/components/ActionDropdown";
import { API_BASE_URL } from "@/lib/api";
import Image from "next/image";
import { useRouter } from "next/navigation";
import React from "react";

const BoardDetail = ({ data }) => {
const router = useRouter();

const handleModify = () => {
router.push(
`/board/new?id=${data.id}&title=${encodeURIComponent(
Expand All @@ -16,31 +18,30 @@ const BoardDetail = ({ data }) => {
)}&author=${encodeURIComponent(data.author)}`
);
};

const handleDelete = async () => {
try {
const res = await fetch(`http://localhost:4000/posts/${data.id}`, {
const res = await fetch(`${API_BASE_URL}/posts/${data.id}`, {
Copy link
Collaborator

@gyulrangdev gyulrangdev Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

env로 분리하신 점 좋습니다!

method: "DELETE",
// header 필요해? // 오답노트: 나중에 인가시에 필요
});

if (!res.ok) {
alert("게시글 삭제에 실패했습니다.");
console.error(res.statusText);
}
if (!res.ok) throw new Error(`delete failed: ${res.statusText}`);

alert("삭제가 완료되었습니다.");
router.push("/board");
} catch (err) {
console.error(err);
}
};

return (
<div>
<div className="pt-2">
<div className="flex justify-between">
<div>{data.title}</div>
<div className="text-xl font-bold">{data.title}</div>
<ActionDropdown onModify={handleModify} onDelete={handleDelete} />
</div>
<div className="flex items-center gap-8">
<div className="flex items-center gap-8 my-4">
<div className="flex items-center gap-4">
<div>
<Image
Expand All @@ -51,23 +52,25 @@ const BoardDetail = ({ data }) => {
/>
</div>
<div className="flex items-center gap-2">
<div>{data.author}</div>
<div>{data.createdAt.split("T")[0].replace(/-/g, ".")}</div>
<div className="text-lg text-gray-600">{data.author}</div>
<div className="text-sm text-gray-500">
{data.createdAt.split("T")[0].replace(/-/g, ". ")}
</div>
</div>
</div>
<div className="w-px h-6 bg-gray-200"></div>
<div className="flex gap-1">
<div className="flex items-center gap-1 border border-gray-300 rounded-full pl-2 pr-3 py-1 text-gray-500">
<Image
src="/icons/heart-inactive.svg"
alt="Mark this post"
width={16}
height={16}
width={24}
height={24}
/>
{data.likes}
</div>
</div>
<hr className="border-t border-gray-200" />
<div>{data.content}</div>
<div className="mt-6 mb-8 text-lg">{data.content}</div>
</div>
);
};
Expand Down
17 changes: 14 additions & 3 deletions src/app/board/[id]/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,22 @@
import React from "react";
import BoardDetail from "./BoardDetail";
import Comments from "@/app/components/comments";
import { API_BASE_URL } from "@/lib/api";
import { notFound } from "next/navigation";

const BoardDetailPage = async ({ params }) => {
const { id } = await params;
const res = await fetch(`http://localhost:4000/posts/${id}`);
const post = await res.json();
const { id } = await params;
let post;
try {
const res = await fetch(`${API_BASE_URL}/posts/${id}`);

if (!res.ok) notFound();

post = await res.json();
} catch (err) {
console.err("fetch failed: ", err);
return <>게시물 로드 중 문제가 발생했습니다.</>;
}
return (
<div>
<BoardDetail data={post} />
Expand Down
14 changes: 7 additions & 7 deletions src/app/board/_components/BestItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ import React from "react";

const BestItem = ({ post }) => {
const isoDate = post.createdAt;
const formatted = isoDate.split("T")[0].replace(/-/g, ".");
const formatted = isoDate.split("T")[0].replace(/-/g, ". ");
return (
<Link
href={`/board/${post.id}`}
className="rounded-lg bg-gray-50 px-6 pb-3 grow"
>
<Image src="/images/badge.svg" alt="" width={102} height={123} />
<div className="flex justify-between mt-4 mb-10">
<div>{post.title}</div>
<div className="flex justify-between my-4 gap-2">
<div className="text-gray-800 text-xl font-semibold">{post.title}</div>
<Image
src={post.thumbnail}
alt="post thumbnail"
Expand All @@ -21,10 +21,10 @@ const BestItem = ({ post }) => {
className="border border-gray-200 rounded-md"
/>
</div>
<div className="flex justify-between">
<div className="flex justify-between text-sm">
<div className="flex gap-2">
<div>{post.author}</div>
<div className="flex gap-1">
<div className="text-gray-600">{post.author}</div>
<div className="flex gap-1 text-gray-500">
<Image
src="/icons/heart-inactive.svg"
alt="Mark this post"
Expand All @@ -34,7 +34,7 @@ const BestItem = ({ post }) => {
{post.likes}
</div>
</div>
<div>{formatted}</div>
<div className="text-gray-400">{formatted}</div>
</div>
</Link>
);
Expand Down
14 changes: 9 additions & 5 deletions src/app/board/_components/BoardBest.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
import React from "react";
import BestItem from "./BestItem";
import { API_BASE_URL } from "@/lib/api";

const BoardBest = async () => {
const res = await fetch(
"http://localhost:4000/posts?_sort=likes&_order=asc&_limit=3"
`${API_BASE_URL}/posts?_sort=likes&_order=asc&_limit=3`
);
const posts = await res.json();
return (
<div className="flex flex-1 gap-4">
{posts.map((post) => (
<BestItem key={post.id} post={post} />
))}
<div className="flex flex-col gap-5">
<div className="text-xl font-bold text-gray-900">베스트 게시글</div>
<div className="flex flex-1 gap-4">
{posts.map((post) => (
<BestItem key={post.id} post={post} />
))}
</div>
</div>
);
};
Expand Down
14 changes: 8 additions & 6 deletions src/app/board/_components/BoardItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const BoardItem = ({ post }) => {
return (
<Link href={`/board/${post.id}`} className="flex flex-col">
<div className="flex justify-between">
<div className="text-xl">{post.title}</div>
<div className="text-xl text-gray-800 font-semibold">{post.title}</div>
<Image
src={post.thumbnail}
width={72}
Expand All @@ -15,25 +15,27 @@ const BoardItem = ({ post }) => {
className="border border-gray-200 rounded-md"
/>
</div>
<div className="flex justify-between mt-4 mb-6">
<div className="flex justify-between mt-4 mb-6 text-sm">
<div className="flex items-center gap-2">
<Image
src="/profile-default.svg"
width={24}
height={24}
alt="click likes"
/>
<div>{post.author}</div>
<div>{post.createdAt.split("T")[0].replace(/-/g, ".")}</div>
<div className="text-gray-600">{post.author}</div>
<div className="text-gray-500">
{post.createdAt.split("T")[0].replace(/-/g, ". ")}
</div>
</div>
<div className="flex gap-1">
<div className="flex gap-1 items-center">
<Image
src="/icons/heart-inactive.svg"
width={24}
height={24}
alt="click likes"
/>
<div>{post.likes}</div>
<div className="text-gray-500">{post.likes}</div>
</div>
</div>
<hr className="border-t border-gray-200" />
Expand Down
9 changes: 4 additions & 5 deletions src/app/board/_components/BoardList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import React, { useEffect, useRef, useState } from "react";
import BoardItem from "./BoardItem";
import Button from "@/app/components/Button";
import Link from "next/link";
import { API_BASE_URL } from "@/lib/api";

const BoardList = () => {
const [posts, setPosts] = useState([]);
Expand All @@ -16,11 +17,9 @@ const BoardList = () => {
sort === "latest" ? "_sort=-createdAt" : "_sort=-likes";

try {
const res = await fetch(`http://localhost:4000/posts?${sortParams}`);
const res = await fetch(`${API_BASE_URL}/posts?${sortParams}`);

if (!res.ok) {
throw new Error("response error: ", res.statusText);
}
if (!res.ok) throw new Error(`get failed: ${res.statusText}`);

const data = await res.json();
setPosts(data);
Expand All @@ -39,7 +38,7 @@ const BoardList = () => {
return (
<div className="flex flex-col gap-6">
<div className="flex justify-between items-center">
<h1 className="text-lg font-bold">게시글</h1>
<h1 className="text-xl font-bold text-gray-900">게시글</h1>
<Link href="/board/new">
<Button>글쓰기</Button>
</Link>
Expand Down
7 changes: 4 additions & 3 deletions src/app/board/new/BoardForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";

import Button from "@/app/components/Button";
import { API_BASE_URL } from "@/lib/api";
import { useRouter, useSearchParams } from "next/navigation";
import React, { useState } from "react";

Expand All @@ -23,9 +24,9 @@ const BoardForm = () => {

try {
const apiUrl = isModifyMode
? `http://localhost:4000/posts/${modifyId}`
: "http://localhost:4000/posts";
const method = isModifyMode ? "PUT" : "POST";
? `${API_BASE_URL}/posts/${modifyId}`
: `${API_BASE_URL}/posts`;
const method = isModifyMode ? "PATCH" : "POST";

const res = await fetch(apiUrl, {
method: method,
Expand Down
19 changes: 11 additions & 8 deletions src/app/components/comments/_components/Item.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,18 @@ const Item = ({ data, onModify, onDelete }) => {
const [modifyMode, setModifyMode] = useState(false);

return (
<div>
<div className="flex flex-col gap-4 bg-gray-50 p-4 pb-3 border-b border-b-gray-200">
{modifyMode ? (
<form className="flex flex-col">
<input
<form className="flex flex-col gap-4">
<textarea
value={text}
onChange={(e) => setText(e.target.value)}
className="bg-gray-100 p-4 rounded-lg"
className="bg-gray-100 p-4 rounded-lg resize-none"
/>
<div className="flex justify-end gap-2">
<button
onClick={() => setModifyMode(false)}
className="px-6 py-2 rounded-lg text-white bg-gray-400"
className="px-6 py-2 text-gray-700"
>
취소
</button>
Expand All @@ -46,13 +46,16 @@ const Item = ({ data, onModify, onDelete }) => {
/>
</div>
)}
<div className="flex gap-2">
<div className="flex gap-2 items-center">
<Image src={data.profile} alt="writer image" width={40} height={40} />
<div>
<div>{data.author}</div>
<div>{data.createdAt.split("T")[0].replace(/-/g, ".")}</div>
<div className="text-sm text-gray-500">{data.author}</div>
<div className="text-xs text-gray-400">
{data.createdAt.split("T")[0].replace(/-/g, ". ")}
</div>
</div>
</div>
{/* <hr className="border-t border-gray-200" /> */}
</div>
);
};
Expand Down
Loading