[docs] 폴더구조정리

next.config.ts

@@ -2,17 +2,6 @@ import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
 
-  // TurboPack 설정
-  experimental: {
-    turbo: {
-      rules: {
-        '*.svg': {
-          loaders: ['@svgr/webpack'],
-          as: '*.js',
-        },
-      },
-    },
-  },
   // webpack 설정
   webpack: (config) => {
     // @ts-expect-error 타입 에러 무시
@@ -42,6 +31,14 @@ const nextConfig: NextConfig = {
     fileLoaderRule.exclude = /\.svg$/i;
     return config;
   },
+  turbopack: {
+    rules: {
+      '*.svg': {
+        loaders: ['@svgr/webpack'],
+        as: '*.js',
+      },
+    }
+  },
 };
 
 export default nextConfig;

src/app/api/login/set-pre-login-path/route.ts

@@ -0,0 +1,18 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(req: NextRequest) {
+  const { path } = await req.json(); // 클라이언트가 보내는 페이지 경로
+  const res = NextResponse.json({ ok: true });
+
+  res.cookies.set({
+    name: 'preLoginPath',
+    value: path,
+    path: '/',
+    maxAge: 60 * 30, // 30분
+    httpOnly: false, // JS에서 읽을 수 있게
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'lax',
+  });
+
+  return res;
+}

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

@@ -0,0 +1,29 @@
+import CommentList from '@/domains/community/detail/comment/CommentList';
+import DetailComment from '@/domains/community/detail/comment/DetailComment';
+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 StarBg from '@/domains/shared/starBg/StarBg';
+
+function Page() {
+  return (
+    <div className="w-full mb-10 flex relative">
+      <StarBg className="w-full h-32 absolute"></StarBg>
+      <article className="page-layout max-w-824 flex-1 z-5">
+        <DetailHeader />
+        <DetailTitle />
+        <DetailContent />
+        <section className="mb-10">
+          <DetailComment />
+          <CommentList />
+        </section>
+      </article>
+      <div className="hidden md:block">
+        <DetailTabDesktop />
+      </div>
+    </div>
+  );
+}
+
+export default Page;

src/app/community/page.tsx

@@ -1,37 +1,45 @@
-import CommunityFilter from '@/shared/components/community/CommunityFilter';
-import CommunityHeader from '@/shared/components/community/CommunityHeader';
-import CommunityTab from '@/shared/components/community/CommunityTab';
-import PostCard from '@/shared/components/community/PostCard';
-import WriteBtn from '@/shared/components/community/WriteBtn';
+import CommunityFilter from '@/domains/community/CommunityFilter';
+import CommunityTab from '@/domains/community/CommunityTab';
+import PostCard from '@/domains/community/PostCard';
+import WriteBtn from '@/domains/community/WriteBtn';
+import PageHeader from '@/domains/shared/pageHeader/PageHeader';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: '커뮤니티',
+  description: '칵테일에 관한 모든 이야기',
+};
 
 function Page() {
   return (
-    <main className="page-layout max-w-1024">
-      <div className="mt-3 mb-10 flex flex-col gap-8 ">
-        <section aria-labelledby="community-heading">
-          <h1 id="community-heading" className="sr-only">
-            커뮤니티 페이지
-          </h1>
-          <CommunityHeader />
-        </section>
+    <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 ">
+          <section aria-labelledby="community-heading">
+            <h1 id="community-heading" className="sr-only">
+              커뮤니티 페이지
+            </h1>
+          </section>
 
-        <section
-          aria-label="탭과 글쓰기"
-          className="flex justify-between item-center sm:flex-row flex-col gap-4 mt-1"
-        >
-          <CommunityTab />
-          <WriteBtn />
-        </section>
+          <section
+            aria-label="탭과 글쓰기"
+            className="flex justify-between item-center sm:flex-row flex-col gap-4 mt-1"
+          >
+            <CommunityTab />
+            <WriteBtn />
+          </section>
 
-        <section aria-label="게시물 목록">
-          <CommunityFilter />
-          <PostCard label="레시피" />
-          <PostCard label="팁" />
-          <PostCard label="질문" />
-          <PostCard label="자유" />
-        </section>
+          <section aria-label="게시물 목록">
+            <CommunityFilter />
+            <PostCard label="레시피" />
+            <PostCard label="팁" />
+            <PostCard label="질문" />
+            <PostCard label="자유" />
+          </section>
+        </div>
       </div>
-    </main>
+    </div>
   );
 }
 export default Page;

src/app/community/write/page.tsx

@@ -0,0 +1,5 @@
+function Page() {
+  return <div className="page-layout max-w-824"></div>;
+}
+
+export default Page;

src/app/design-system/page.tsx

@@ -7,11 +7,12 @@ import { useState } from 'react';
 import { customToast } from '@/shared/components/toast/CustomToastUtils';
 import ModalLayout from '@/shared/components/modalPop/ModalLayout';
 import ConfirmPop from '@/shared/components/modalPop/ConfirmPop';
-import SelectBox from '@/shared/components/InputBox/SelectBox';
-import LikeBtn from '@/shared/components/like/LikeBtn';
-import Share from '@/shared/components/share/Share';
-import Keep from '@/shared/components/keep/Keep';
+import SelectBox from '@/domains/shared/select-box/SelectBox';
+
 import Spinner from '@/shared/components/spinner/Spinner';
+import LikeBtn from '@/domains/community/components/like/LikeBtn';
+import Share from '@/domains/shared/share/Share';
+import Keep from '@/domains/shared/keep/Keep';
 
 function Page() {
   const [isModalOpen, setModalOpen] = useState(false);
@@ -141,12 +142,12 @@ function Page() {
         <h2 className="text-2xl font-semibold pb-1">Icons</h2>
         <div className="space-y-2">
           <h3 className="text-lg font-medium border-b pb-1">like</h3>
-          <LikeBtn />
+          <LikeBtn size="md" />
         </div>
         <div className="space-y-2">
           <h3 className="text-lg font-medium border-b pb-1">Share</h3>
-          <Share />
-          <Share variants="community" />
+          <Share size="md" />
+          <Share variants="community" size="md" />
         </div>
         <div className="space-y-2">
           <h3 className="text-lg font-medium border-b pb-1">keep</h3>

src/app/layout.tsx

@@ -18,10 +18,7 @@ export default function RootLayout({
     <html lang="ko-KR">
       <body className="relative flex flex-col min-h-screen">
         <Header />
-        <main className="flex flex-1 pt-[2.75rem] md:pt-[3.75rem]">
-          <div id="observer-target" className="h-[0.5px]"></div>
-          {children}
-        </main>
+        <main className="flex flex-1 pt-[2.75rem] md:pt-[3.75rem]">{children}</main>
         <FooterWrapper />
 
         <div id="modal-root"></div>

src/app/login/first-user/page.tsx

@@ -1,4 +1,4 @@
-import LoginRedirectHandler from '@/shared/components/auth/LoginRedirectHandler';
+import LoginRedirectHandler from '@/domains/shared/auth/LoginRedirectHandler';
 
 function Page() {
   return <LoginRedirectHandler />;

src/app/login/page.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import type { Metadata } from 'next';
 import loginBg from '@/shared/assets/images/login_bg.webp';
-import SocialLogin from './SocialLogin';
+import SocialLogin from '@/domains/login/main/SocialLogin';
 
 export const metadata: Metadata = {
   title: 'SSOUL | 로그인',

src/app/login/success/page.tsx

@@ -1,4 +1,4 @@
-import LoginRedirectHandler from '@/shared/components/auth/LoginRedirectHandler';
+import LoginRedirectHandler from '@/domains/shared/auth/LoginRedirectHandler';
 
 function Page() {
   return <LoginRedirectHandler />;

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

@@ -1,9 +1,11 @@
-import StarBg from '@/shared/components/starBg/StarBg';
+import DetailMain from '@/domains/recipe/details/DetailMain';
+import StarBg from '@/domains/shared/starBg/StarBg';
 
 function page() {
   return (
-    <div className="w-full">
-      <StarBg className="h-200 lg:h-202" />
+    <div className="w-full relative">
+      <StarBg className="absolute top-0 left-0 h-200 lg:h-200" />
+      <DetailMain />
     </div>
   );
 }

src/app/recipe/page.tsx

@@ -1,10 +1,10 @@
-import PageHeader from '@/shared/components/pageHeader/PageHeader';
 import { Metadata } from 'next';
-import Glass from '@/shared/assets/images/recipe_page_header.webp';
-import SelectBox from '@/shared/components/InputBox/SelectBox';
+import SelectBox from '@/domains/shared/select-box/SelectBox';
 import Input from '@/shared/components/InputBox/Input';
-import CocktailList from '@/shared/components/recipePage/cocktailList/CocktailList';
-import Accordion from './components/Accordion';
+
+import Accordion from '../../domains/recipe/components/main/Accordion';
+import CocktailList from '@/domains/recipe/CocktailList';
+import PageHeader from '@/domains/shared/pageHeader/PageHeader';
 
 export const metadata: Metadata = {
   title: 'SSOUL | 칵테일레시피',
@@ -15,11 +15,7 @@ function Page() {
   return (
     <div className="w-full">
       <section>
-        <PageHeader
-          src={Glass}
-          title="Cocktail Recipes"
-          description="다양하고 재밌는 칵테일 레시피"
-        />
+        <PageHeader title="Cocktail Recipes" description="다양하고 재밌는 칵테일 레시피" />
       </section>
       <div className="page-layout max-w-1224 mt-6">
         <section className="flex flex-col-reverse items-start gap-6 md:flex-row md:justify-between md:items-center ">

src/app/recommend/page.tsx

@@ -1,7 +1,7 @@
+import ChatForm from '@/domains/recommend/components/ChatForm';
+import MyChat from '@/domains/recommend/components/MyChat';
+import SsuryChat from '@/domains/recommend/components/SsuryChat';
 import Bg from '@/shared/assets/images/recommend_bg.webp';
-import ChatForm from './components/ChatForm';
-import SsuryChat from './components/SsuryChat';
-import MyChat from './components/MyChat';
 
 function Page() {
   return (

src/shared/components/community/CommunityFilter.tsx → src/domains/community/CommunityFilter.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import SelectBox from '../InputBox/SelectBox';
+import SelectBox from '../shared/select-box/SelectBox';
+
 function CommunityFilter() {
   return (
     <section

src/domains/community/CommunityHeader.tsx

@@ -0,0 +1,11 @@
+import PageHeader from '../shared/pageHeader/PageHeader';
+
+function CommunityHeader() {
+  return (
+    <section aria-label="커뮤니티 헤더">
+      <PageHeader title="Community" description="칵테일에 관한 모든 이야기" />
+    </section>
+  );
+}
+
+export default CommunityHeader;

src/shared/components/community/PostCard.tsx → src/domains/community/PostCard.tsx

@@ -1,11 +1,13 @@
 import Image from 'next/image';
 import prePost from '@/shared/assets/images/prepost_img.webp';
-import PostLabel from './PostLabel';
+
+import PostInfo from './PostInfo';
+import Label from '../shared/label/Label';
 
 function PostCard({ label }: { label: string }) {
   return (
     <article className="pt-[30] pb-3 border-b-1 border-gray-light">
-      <PostLabel title={label} />
+      <Label title={label} />
 
       <section className="flex items-start justify-between mt-3 cursor-pointer" role="link">
         <div className="flex flex-col gap-3">
@@ -14,18 +16,7 @@ function PostCard({ label }: { label: string }) {
             <p>칵테일 처음 만들어 보는데 랄랄</p>
             <p>가나다라마바사아자차카파타하</p>
           </div>
-          <ul
-            className="flex font-light sm:gap-3 gap-1 sm:text-[14px] text-[12px] text-gray"
-            aria-label="게시글 정보"
-          >
-            <li>실버븬</li>
-            <li aria-hidden="true">|</li>
-            <li>3분 전</li>
-            <li aria-hidden="true">|</li>
-            <li>조회 3</li>
-            <li aria-hidden="true">|</li>
-            <li>댓글 3</li>
-          </ul>
+          <PostInfo hasUserName={true} />
         </div>
         <figure className="flex items-start">
           <Image

src/domains/community/PostInfo.tsx

@@ -0,0 +1,22 @@
+function PostInfo({ hasUserName = false }: { hasUserName?: boolean }) {
+  return (
+    <ul
+      className="flex font-light sm:gap-3 gap-1 sm:text-[14px] text-[12px] text-gray"
+      aria-label="게시글 정보"
+    >
+      {hasUserName && (
+        <>
+          <li>실버븬</li>
+          <li aria-hidden="true">|</li>
+        </>
+      )}
+      <li>3분 전</li>
+      <li aria-hidden="true">|</li>
+      <li>조회 3</li>
+      <li aria-hidden="true">|</li>
+      <li>댓글 3</li>
+    </ul>
+  );
+}
+
+export default PostInfo;

src/domains/community/WriteBtn.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import Write from '@/shared/assets/icons/edit_28.svg';
+import { useRouter } from 'next/navigation';
+
+type RouterType = ReturnType<typeof useRouter>;
+
+function WriteBtn() {
+  const router = useRouter();
+
+  const handleClick = (router: RouterType) => {
+    router.push('/community/write');
+  };
+
+  return (
+    <button
+      className="flex items-center justify-center py-1 px-2.5 bg-tertiary rounded-lg"
+      onClick={() => handleClick(router)}
+      aria-label="새 글 작성"
+    >
+      <Write aria-hidden />
+      글쓰기
+    </button>
+  );
+}
+
+export default WriteBtn;