Feat/write#19

next.config.ts

@@ -3,6 +3,7 @@ import type { NextConfig } from 'next';
 const nextConfig: NextConfig = {
 
   images: {
+    domains: ['team2-app-s3-bucket.s3.ap-northeast-2.amazonaws.com'],
     remotePatterns: [
       {
         protocol: 'https',

package.json

@@ -27,8 +27,9 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-hot-toast": "^2.6.0",
-    "react-intersection-observer": "^9.16.0",
-    "react-use": "^17.6.0"
+    "react-use": "^17.6.0",
+    "swiper": "^12.0.2",
+    "react-intersection-observer": "^9.16.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

src/app/community/[id]/page.tsx

@@ -1,75 +1,48 @@
-'use client';
-
-import { fetchPostById } from '@/domains/community/api/fetchPost';
-import DetailContent from '@/domains/community/detail/DetailContent';
-import DetailHeader from '@/domains/community/detail/DetailHeader';
-import DetailTitle from '@/domains/community/detail/DetailTitle';
-import DetailTabDesktop from '@/domains/community/detail/tab/DetailTabDesktop';
-import { Post } from '@/domains/community/types/post';
-import Comment from '@/domains/community/detail/Comment';
-import StarBg from '@/domains/shared/components/star-bg/StarBg';
-import { useParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import DetailSkeleton from '@/domains/community/detail/DetailSkeleton';
+import { Metadata } from 'next';
+import { getApi } from '@/app/api/config/appConfig';
+import DetailPage from '@/domains/community/detail/DetailPage';
+
+type RouteParams = { id: number };
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<RouteParams>;
+}): Promise<Metadata> {
+  const { id } = await params;
+  const res = await fetch(`${getApi}/posts/${id}`, {
+    cache: 'no-store',
+  });
+  const post = await res.json();
+  console.log(post);
+  return {
+    title: post.title,
+    description: post.content?.slice(0, 80),
+    openGraph: {
+      title: post.title,
+      description: post.content?.slice(0, 80),
+      url: `https://your-domain.com/community/${id}`,
+      images: [
+        {
+          url: post.imageUrls?.[0],
+          width: 800,
+          height: 600,
+          alt: post.title,
+        },
+      ],
+      type: 'article',
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: post.title,
+      description: post.content?.slice(0, 80),
+      images: [post.imageUrls?.[0]],
+    },
+  };
+}
 
 function Page() {
-  const params = useParams();
-  const [postDetail, setPostDetail] = useState<Post | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-
-  useEffect(() => {
-    const postId = params.id;
-    const fetchData = async () => {
-      setIsLoading(true);
-      const data = await fetchPostById(postId);
-      if (!data) return;
-
-      setPostDetail(data);
-      setIsLoading(false);
-    };
-    fetchData();
-  }, [params.id, setPostDetail]);
-
-  if (isLoading) return <DetailSkeleton />;
-  if (!postDetail) return null;
-
-  const {
-    categoryName,
-    title,
-    userNickName,
-    createdAt,
-    viewCount,
-    postId,
-    tags,
-    content,
-    likeCount,
-    commentCount,
-  } = postDetail;
-
-  return (
-    <div className="w-full relative">
-      <StarBg className="w-full h-32 absolute"></StarBg>
-      <article className="page-layout max-w-824 z-5">
-        <DetailHeader categoryName={categoryName} />
-        <DetailTitle title={title} userNickname={userNickName} />
-        <DetailContent
-          content={content}
-          createdAt={createdAt}
-          viewCount={viewCount}
-          postId={postId}
-          tags={tags}
-          likeCount={likeCount}
-          commentCount={commentCount}
-        />
-        <section className="mb-10">
-          <Comment postId={postId} />
-        </section>
-      </article>
-      <div className="hidden md:block">
-        <DetailTabDesktop likeCount={likeCount} commentCount={commentCount} />
-      </div>
-    </div>
-  );
+  return <DetailPage />;
 }
 
 export default Page;

src/app/community/edit/[postId]/page.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import WriteSection from '@/domains/community/write/WriteSection';
+import StarBg from '@/domains/shared/components/star-bg/StarBg';
+import { useParams } from 'next/navigation';
+
+function Page() {
+  const params = useParams();
+
+  return (
+    <div className="w-full mb-20 flex relative">
+      <StarBg className="w-full h-32 absolute"></StarBg>
+      <div className="page-layout max-w-824 flex-1 z-5">
+        <WriteSection mode="edit" postId={params.postId} />
+      </div>
+    </div>
+  );
+}
+
+export default Page;

src/app/community/page.tsx

@@ -12,7 +12,7 @@ function Page() {
     <div className="w-full">
       <PageHeader title="Community" description="칵테일에 관한 모든 이야기" />
       <div className="page-layout max-w-1024">
-        <div className="mt-3 mb-10 flex flex-col gap-8 ">
+        <div className="mt-3 mb-40 flex flex-col gap-8 ">
           <section aria-labelledby="community-heading">
             <h1 id="community-heading" className="sr-only">
               커뮤니티 페이지

src/app/community/write/page.tsx

@@ -1,34 +1,15 @@
 'use client';
 
-import Tag from '@/domains/community/components/tag/Tag';
-import Category from '@/domains/community/write/Category';
-import TagModal from '@/domains/community/write/cocktail-tag/TagModal';
-import CompleteBtn from '@/domains/community/write/CompleteBtn';
-import FormTitle from '@/domains/community/write/FormTitle';
-import ImageSection from '@/domains/community/write/image-upload/ImageSection';
-import WriteForm from '@/domains/community/write/WriteForm';
+import WriteSection from '@/domains/community/write/WriteSection';
 import StarBg from '@/domains/shared/components/star-bg/StarBg';
-import { useState } from 'react';
 
 function Page() {
-  const [isOpen, setIsOpen] = useState(false);
-
   return (
     <div className="w-full mb-20 flex relative">
       <StarBg className="w-full h-32 absolute"></StarBg>
       <div className="page-layout max-w-824 flex-1 z-5">
-        <CompleteBtn />
-        <section>
-          <FormTitle />
-          <Category />
-          <WriteForm />
-        </section>
-        <ImageSection />
-        <section className="mt-8">
-          <Tag use="write" onClick={() => setIsOpen(true)} />
-        </section>
+        <WriteSection mode="create" />
       </div>
-      {isOpen && <TagModal isOpen={isOpen} setIsOpen={setIsOpen} />}
     </div>
   );
 }

src/app/layout.tsx

@@ -5,6 +5,9 @@ import Header from '@/shared/components/header/Header';
 import FooterWrapper from '@/shared/components/footer/FooterWrapper';
 import ScrollTopBtnWrapper from '@/shared/components/scroll-top/ScrollTopBtnWrapper';
 import KaKaoScript from './api/kakao/KaKaoScript';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
 import Provider from '@/shared/api/Provider';
 import ClientInitHook from '@/domains/login/components/ClientInitHook';
 

src/domains/community/api/fetchCocktails.ts

@@ -0,0 +1,12 @@
+import { getApi } from '@/app/api/config/appConfig';
+
+export const fetchCocktails = async () => {
+  try {
+    const res = await fetch(`${getApi}/cocktails`);
+    if (!res.ok) throw new Error('칵테일 데이터 불러오기 실패');
+    const data = await res.json();
+    return data.data;
+  } catch (error) {
+    console.error(error);
+  }
+};

src/domains/community/api/fetchComment.ts

@@ -1,7 +1,8 @@
 import { getApi } from '@/app/api/config/appConfig';
 import { CommentType } from '../types/post';
+import { ParamValue } from 'next/dist/server/request/params';
 
-export const fetchComment = async (postId: number): Promise<CommentType[] | null> => {
+export const fetchComment = async (postId: ParamValue | number): Promise<CommentType[] | null> => {
   try {
     const res = await fetch(`${getApi}/posts/${postId}/comments`, {
       method: 'GET',
@@ -21,7 +22,7 @@ export const fetchComment = async (postId: number): Promise<CommentType[] | null
   }
 };
 
-export const postComments = async (postId: number, content: string) => {
+export const postComments = async (postId: number | ParamValue, content: string) => {
   try {
     const res = await fetch(`${getApi}/posts/${postId}/comments`, {
       method: 'POST',
@@ -48,7 +49,7 @@ export const postComments = async (postId: number, content: string) => {
 
 export async function updateComment(
   accessToken: string | null,
-  postId: number,
+  postId: number | ParamValue,
   commentId: number,
   content: string
 ): Promise<void> {
@@ -70,7 +71,7 @@ export async function updateComment(
 
 export async function deleteComment(
   accessToken: string | null,
-  postId: number,
+  postId: number | ParamValue,
   commentId: number
 ): Promise<void> {
   const response = await fetch(`${getApi}/posts/${postId}/comments/${commentId}`, {

src/domains/community/api/fetchPost.ts

@@ -20,7 +20,7 @@ export const fetchPost = async (lastId?: number | null): Promise<Post[] | null>
   }
 };
 
-export const fetchPostById = async (postId: ParamValue) => {
+export const fetchPostById = async (postId: ParamValue | number) => {
   try {
     const res = await fetch(`${getApi}/posts/${postId}`, {
       method: 'GET',
@@ -87,3 +87,11 @@ export const fetchPostByTab = async ({
     return null;
   }
 };
+
+export async function likePost(postId: number | ParamValue) {
+  const res = await fetch(`${getApi}/posts/${postId}/like`, {
+    method: 'POST',
+    credentials: 'include',
+  });
+  if (!res.ok) throw new Error('좋아요 실패');
+}

src/domains/community/components/comment/CommentBtn.tsx

@@ -1,19 +1,25 @@
 import CommentIcon from '@/shared/assets/icons/comment_28.svg';
 import { useState } from 'react';
 
-function CommentBtn({ size }: { size: 'sm' | 'md' }) {
+type Props = {
+  size: 'sm' | 'md';
+  onClick?: () => void;
+};
+
+function CommentBtn({ size, onClick }: Props) {
   const [isClick, setIsClick] = useState(false);
 
   const handleClick = () => {
     setIsClick(!isClick);
   };
+
   return (
     <button
       type="button"
       className={`${size === 'md' ? 'w-13.75 h-13.75 flex-center border-1 border-white rounded-full' : ''} bg-primary`}
       aria-label="코멘트 버튼"
       aria-pressed={isClick}
-      onClick={handleClick}
+      onClick={onClick ? onClick : handleClick}
     >
       <CommentIcon
         className="duration-100  hover:[&_*]:fill-tertiary/50 [&_*]:duration-200"

src/domains/community/components/like/LikeBtn.tsx

@@ -1,19 +1,22 @@
 import LikeIcon from '@/shared/assets/icons/like_28.svg';
 import { useState } from 'react';
 
-function LikeBtn({ size }: { size: 'sm' | 'md' }) {
-  const [isClick, setIsClick] = useState(false);
+type Props = {
+  size: 'sm' | 'md';
+  onClick?: () => void;
+  isClick?: boolean; // 외부에서 제어
+};
 
-  const handleClick = () => {
-    setIsClick(!isClick);
-  };
+function LikeBtn({ size, onClick, isClick = false }: Props) {
   return (
     <button
       type="button"
       className={`${size === 'md' ? 'w-13.75 h-13.75 flex-center border-1 border-white rounded-full' : ''} bg-primary`}
       aria-label="좋아요 버튼"
       aria-pressed={isClick}
-      onClick={handleClick}
+      onClick={() => {
+        if (onClick) onClick();
+      }}
     >
       <LikeIcon
         fill={`${isClick ? '#81689d' : 'transparent'}`}

src/domains/community/components/post-info/PostInfo.tsx

@@ -30,7 +30,7 @@ function PostInfo({
       <li aria-hidden="true">|</li>
       <li>조회 {viewCount || 0}</li>
       <li aria-hidden="true">|</li>
-      <li>댓글 {commentCount + 1 || 0}</li>
+      <li>댓글 {commentCount || 0}</li>
     </ul>
   );
 }