[chore] 배포용 머지

next.config.ts

@@ -1,8 +1,15 @@
 import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
+
   images: {
-    domains: ['www.thecocktaildb.com'],
+    domains: ['team2-app-s3-bucket.s3.ap-northeast-2.amazonaws.com'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'www.thecocktaildb.com',
+      },
+    ],
   },
   env: {
     NPUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,

package.json

@@ -18,6 +18,7 @@
     ]
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.90.2",
     "@tanstack/react-virtual": "^3.13.12",
     "class-variance-authority": "^0.7.1",
     "gsap": "^3.13.0",
@@ -26,7 +27,9 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-hot-toast": "^2.6.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",
@@ -61,4 +64,4 @@
   },
   "homepage": "https://github.com/prgrms-web-devcourse-final-project/WEB5_6_HaeDokCoding_FE#readme",
   "description": ""
-}
+}

src/app/api/kakao/KaKaoScript.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import Script from 'next/script';
+
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Kakao: any;
+  }
+}
+function KaKaoScript() {
+  const onLoad = () => {
+    window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY);
+  };
+  return <Script src="https://developers.kakao.com/sdk/js/kakao.js" async onLoad={onLoad} />;
+}
+export default KaKaoScript;

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,21 @@
+'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();
+  console.log(params);
+
+  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

@@ -3,7 +3,7 @@ import PageHeader from '@/domains/shared/components/page-header/PageHeader';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
-  title: 'SSOUL | 커뮤니티',
+  title: '커뮤니티',
   description: '칵테일에 관한 모든 이야기',
 };
 
@@ -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>
   );
 }