Merge pull request #18 from TripMingle/feat/SWM-264

[feat/SWM-264] 정보글 상세보기 페이지 개발
TripMingle · Nov 5, 2024 · 1f7e94f · 1f7e94f
2 parents 6e8389f + f8764b6
commit 1f7e94f
Show file tree

Hide file tree

Showing 19 changed files with 344 additions and 38 deletions.
diff --git a/public/icons/empty_heart.svg b/public/icons/empty_heart.svg
diff --git a/public/icons/full_heart.svg b/public/icons/full_heart.svg
diff --git a/src/api/post.ts b/src/api/post.ts
@@ -19,3 +19,15 @@ export const getPostList = async (
 export const postPost = async (data: PostForm) => {
   return postFetch(`/post`, data);
 };
+
+export const postPostComment = async (
+  postId: number,
+  comment: string,
+  parentCommentId?: number,
+) => {
+  const data = {
+    parentCommentId: parentCommentId ?? -1,
+    comment: comment,
+  };
+  return postFetch(`/post/comment?postId=${postId}`, data);
+};
diff --git a/src/app/[country]/board/[id]/page.tsx b/src/app/[country]/board/[id]/page.tsx
@@ -144,7 +144,7 @@ const Page = async ({
               </strong>
               {' 개'}
             </p>
-            <CommentInput boardId={boardDetail.boardId} />
+            <CommentInput id={boardDetail.boardId} />
             <CommentList comments={boardDetail.boardComments} />
           </div>
         </div>

diff --git a/src/app/[country]/post/[id]/page.tsx b/src/app/[country]/post/[id]/page.tsx
@@ -0,0 +1,88 @@
+import Image from 'next/image';
+import '@/styles/font.css';
+import Header from '@/components/header/Header';
+import * as styles from '@/styles/country/board/id/page.css';
+import TravelerCard from '@/components/country/board/id/TravelerCard';
+import CommentInput from '@/components/common/CommentInput';
+import CommentList from '@/components/country/post/id/CommentList';
+import { headers } from 'next/headers';
+import { PostDetailType } from '@/types/country/post';
+import Like from '@/components/country/post/id/Like';
+
+const Page = async ({
+  params,
+}: {
+  params: { country: string; id: string };
+}) => {
+  console.log(params);
+  const headersList = headers();
+  const host = headersList.get('host');
+  const protocol = process.env.NODE_ENV === 'production' ? 'https' : 'http';
+
+  const postData = await fetch(
+    `${protocol}://${host}/api/post?postId=${params.id}`,
+  ).then((res) => res.json());
+
+  const postDetail: PostDetailType = postData.data;
+
+  return (
+    <main>
+      <Header />
+      <div className={styles.pageContainer}>
+        <div className={styles.container}>
+          <div className={styles.contentContainer}>
+            <p className={styles.title}>{postDetail.title}</p>
+            <div>
+              <Like
+                isLike={postDetail.myLikeState}
+                likeCount={postDetail.likeCount}
+              />
+              <span className={styles.iconContainer}>
+                <Image
+                  className={styles.icon}
+                  src="/icons/comment.svg"
+                  width={20}
+                  height={20}
+                  alt="commendIcon"
+                />
+                <span>{postDetail.commentCount}</span>
+              </span>
+            </div>
+            <div className={styles.infoContainer}>
+              <p className={styles.infoTitle}>내용</p>
+              <div className={styles.infoContent}>{postDetail.content}</div>
+            </div>
+          </div>
+          <TravelerCard
+            props={{
+              userImageUrl: postDetail.userImageUrl,
+              nickName: postDetail.userNickName,
+              userId: 0,
+              ageRange: postDetail.userAgeRange,
+              gender: postDetail.userGender,
+              nationality: postDetail.userNationality,
+              selfIntroduction: postDetail.selfIntroduce ?? '',
+            }}
+            title="작성자"
+            type="post"
+          />
+        </div>
+        <div className={styles.container}>
+          <div className={styles.commentContainer}>
+            <p className={styles.commentTitle}>
+              {'댓글 '}
+              <strong className={styles.commentTitleStrong}>
+                {postDetail.commentCount}
+              </strong>
+              {' 개'}
+            </p>
+            <CommentInput id={postDetail.postingId} type="post" />
+            <CommentList comments={postDetail.postingComments} />
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default Page;
diff --git a/src/app/api/post/comment/route.ts b/src/app/api/post/comment/route.ts
@@ -0,0 +1,28 @@
+import { getAccessToken } from '@/utils/server/token';
+import { NextRequest, NextResponse } from 'next/server';
+
+export const POST = async (req: NextRequest) => {
+  const baseurl = `${process.env.API_URL}`;
+  const pathname = `/postings`;
+  const body = req.body;
+  const postId = req.nextUrl.searchParams.get('postId');
+
+  let token = await getAccessToken();
+  if (!token)
+    return NextResponse.json(
+      { error: 'access token이 없거나 만료되었습니다.' },
+      { status: 500 },
+    );
+  console.log(`${baseurl}${pathname}/${postId}/comments`);
+
+  return await fetch(`${baseurl}${pathname}/${postId}/comments`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token.value}`,
+    },
+    body,
+    // @ts-ignore -- 연결이 단방향임을 나타냄
+    duplex: 'half',
+  });
+};
diff --git a/src/app/api/post/route.ts b/src/app/api/post/route.ts
@@ -1,6 +1,22 @@
 import { getAccessToken } from '@/utils/server/token';
 import { NextRequest, NextResponse } from 'next/server';
 
+export const GET = async (req: NextRequest) => {
+  const baseurl = `${process.env.API_URL}`;
+  const pathname = `/postings`;
+  const postId = req.nextUrl.searchParams.get('postId');
+  let accesstoken = await getAccessToken();
+  let token = accesstoken?.value || process.env.ACCESS_TOKEN;
+
+  return await fetch(`${baseurl}${pathname}/${postId}/details`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+  });
+};
+
 export const POST = async (req: NextRequest) => {
   const baseurl = `${process.env.API_URL}`;
   const pathname = `/postings`;

diff --git a/src/components/common/CommentInput.tsx b/src/components/common/CommentInput.tsx
@@ -7,9 +7,16 @@ import { useUserStore } from '@/store/userStore';
 import useModal from '@/hooks/useModal';
 import { useRouter } from 'next/navigation';
 import LoginModal from './LoginModal';
+import { postPostComment } from '@/api/post';
 
 // TODO :: isOpen, openModal
-const CommentInput = ({ boardId }: { boardId: number }) => {
+const CommentInput = ({
+  id,
+  type = 'board',
+}: {
+  id: number;
+  type?: string;
+}) => {
   const [content, setContent] = useState<string>('');
 
   const { isOpen, openModal, closeModal } = useModal();
@@ -33,7 +40,11 @@ const CommentInput = ({ boardId }: { boardId: number }) => {
 
   const submitComment = async () => {
     if (content.trim()) {
-      await postBoardComment(boardId, content.trim());
+      if (type == 'board') {
+        await postBoardComment(id, content.trim());
+      } else {
+        await postPostComment(id, content.trim());
+      }
       router.refresh();
     }
     setContent('');

diff --git a/src/components/country/PostPreviewItem.tsx b/src/components/country/PostPreviewItem.tsx
@@ -1,10 +1,18 @@
 import Profile from '../common/Profile';
 import * as styles from '@/styles/country/post-preview-item.css';
 import { PostPreviewProps } from '@/types/country/post';
+import { usePathname, useRouter } from 'next/navigation';
 
 const PostPreviewItem = ({ props }: { props: PostPreviewProps }) => {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const clickHandler = async () => {
+    router.push(pathname + `/post/${props.postingId}`);
+  };
+
   return (
-    <div className={styles.postCard}>
+    <div className={styles.postCard} onClick={clickHandler}>
       <span className={styles.title}>{props.title}</span>
       <span className={styles.content}>{props.content}</span>
       <div className={styles.profileContainer}>

diff --git a/src/components/country/board/id/TravelerCard.tsx b/src/components/country/board/id/TravelerCard.tsx
@@ -15,12 +15,20 @@ type Props = {
 
 // TODO: // OpenModal props
 
-const TravelerCard = ({ props }: { props: Props }) => {
+const TravelerCard = ({
+  props,
+  title = '여행장',
+  type = 'board',
+}: {
+  props: Props;
+  title?: string;
+  type?: string;
+}) => {
   return (
     <div className={styles.cardContainer}>
       <div className={styles.travelerTitle}>
         <Image src="/icons/flag.svg" width={24} height={24} alt="flagIcon" />
-        여행장
+        {title}
       </div>
       <div className={styles.profileContainer}>
         <Profile
@@ -53,7 +61,11 @@ const TravelerCard = ({ props }: { props: Props }) => {
         <span className={styles.infoTitle}>동행 평점</span>
         <span className={styles.infoContent}>별 네개</span>
       </div>
-      <ChatButton nickName={props.nickName} userId={props.userId} />
+      {type == 'board' ? (
+        <ChatButton nickName={props.nickName} userId={props.userId} />
+      ) : (
+        <></>
+      )}
     </div>
   );
 };

diff --git a/src/components/country/post/PostCardList.tsx b/src/components/country/post/PostCardList.tsx
@@ -1,6 +1,5 @@
 'use client';
 import Pagenation from '@/components/common/Pagination';
-import Profile from '@/components/common/Profile';
 import * as styles from '@/styles/country/post/page.css';
 import { useEffect, useState } from 'react';
 import SelectCateogry from './SelectCategory';
@@ -10,6 +9,7 @@ import { usePostStore } from '@/store/postStore';
 import EmptyPost from '../EmptyPost';
 import { usePathname } from 'next/navigation';
 import { getCountryName } from '@/utils/country';
+import PostCardListItem from './PostCardListItem';
 
 const PostCardList = () => {
   const pathname = usePathname();
@@ -57,7 +57,7 @@ const PostCardList = () => {
           <ul className={styles.postContainer}>
             {postList.map((post) => (
               <li key={post.postingId} className={styles.postItemContainer}>
-                <PostPreview props={post} />
+                <PostCardListItem props={post} />
               </li>
             ))}
           </ul>
@@ -74,27 +74,4 @@ const PostCardList = () => {
   );
 };
 
-// postcard와 css가 다름
-const PostPreview = ({ props }: { props: PostPreviewProps }) => {
-  return (
-    <div className={styles.postCard}>
-      <span className={styles.title}>{props.title}</span>
-      <span className={styles.content}>{props.content}</span>
-      <div className={styles.profileContainer}>
-        <Profile
-          url={props.userImageUrl}
-          width={18}
-          height={18}
-          changeWidth={24}
-          changeHeight={24}
-        />
-        <span className={styles.profileInfo}>
-          {`${props.userNickName} · ${props.userAgeRange.slice(0, 2)}대 · 
-          ${props.userGender === 'male' ? '남' : '여'} · ${props.userNationality}`}
-        </span>
-      </div>
-    </div>
-  );
-};
-
 export default PostCardList;
diff --git a/src/components/country/post/PostCardListItem.tsx b/src/components/country/post/PostCardListItem.tsx
@@ -0,0 +1,36 @@
+import { PostPreviewProps } from '@/types/country/post';
+import Profile from '@/components/common/Profile';
+import * as styles from '@/styles/country/post/page.css';
+import { usePathname, useRouter } from 'next/navigation';
+
+// postcard와 css가 다름
+const PostCardListItem = ({ props }: { props: PostPreviewProps }) => {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const clickHandler = async () => {
+    router.push(pathname + `/${props.postingId}`);
+  };
+
+  return (
+    <div className={styles.postCard} onClick={clickHandler}>
+      <span className={styles.title}>{props.title}</span>
+      <span className={styles.content}>{props.content}</span>
+      <div className={styles.profileContainer}>
+        <Profile
+          url={props.userImageUrl}
+          width={18}
+          height={18}
+          changeWidth={24}
+          changeHeight={24}
+        />
+        <span className={styles.profileInfo}>
+          {`${props.userNickName} · ${props.userAgeRange.slice(0, 2)}대 · 
+            ${props.userGender === 'male' ? '남' : '여'} · ${props.userNationality}`}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default PostCardListItem;
diff --git a/src/components/country/post/id/Comment.tsx b/src/components/country/post/id/Comment.tsx
@@ -0,0 +1,27 @@
+import * as styles from '@/styles/components/common/comment.css';
+import Profile from '@/components/common/Profile';
+import { formatDate } from '@/utils/date';
+import { PostCommentType } from '@/types/country/post';
+
+const Comment = ({ props }: { props: PostCommentType }) => {
+  return (
+    <div className={styles.commentContainer}>
+      <Profile
+        url={props.userImageUrl}
+        width={30}
+        height={30}
+        changeWidth={36}
+        changeHeight={36}
+      />
+      <div className={styles.contentContainer}>
+        <div className={styles.infoContainer}>
+          <span className={styles.name}>{props.userNickName}</span>
+          <span className={styles.time}>{formatDate(props.createdAt)}</span>
+        </div>
+        <p className={styles.content}>{props.comment}</p>
+      </div>
+    </div>
+  );
+};
+
+export default Comment;
diff --git a/src/components/country/post/id/CommentList.tsx b/src/components/country/post/id/CommentList.tsx
@@ -0,0 +1,17 @@
+import Comment from './Comment';
+import { commentListContainer } from '@/styles/components/common/comment.css';
+import { PostCommentType } from '@/types/country/post';
+
+const CommentList = ({ comments }: { comments: PostCommentType[] }) => {
+  return (
+    <ul className={commentListContainer}>
+      {comments.map((comment) => (
+        <li key={comment.commentId}>
+          <Comment props={comment} />
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default CommentList;