feat: Implement post detail page responsive layout

src/components/layout/PostDetailBottomBarLayout.tsx

@@ -1,18 +1,36 @@
 const smallBottomBar = () => {
   return (
-    <div className="flex items-center justify-between rounded-lg bg-gray-800 p-4">
-      <div className="flex items-center gap-4 text-white">
-        <span className="font-bold">참여시 100 Point - small</span>
+    <div className="flex w-[493px] flex-col justify-between gap-4 rounded-lg bg-gray-800 p-4">
+      <div className="flex flex-row gap-4">
+        <div className="w-100 rounded-lg bg-gray-300 p-4">
+          <div className="font-bold">참여하기</div>
+        </div>
+        <div className="w-10 rounded-lg bg-gray-300 p-4">
+          <div className="font-bold">♥︎</div>
+        </div>
+      </div>
+      <div className="flex flex-col gap-4 text-white">
+        <div className="font-bold">사전퀴즈 100문항</div>
+        <div className="font-bold">참여시 100 Point</div>
       </div>
     </div>
   );
 };
 
 const largeBottomBar = () => {
   return (
-    <div className="items-center justify-between rounded-lg bg-gray-800 p-4">
-      <div className="flex items-center gap-4 text-white">
-        <span className="font-bold">참여시 100 Point</span>
+    <div className="flex h-[96px] items-center justify-between bg-gray-100 p-4">
+      <div className="flex flex-col gap-4">
+        <div className="font-bold">200 point</div>
+        <div className="font-bold">사전 퀴즈 - 10문항</div>
+      </div>
+      <div className="flex flex-row gap-4">
+        <div className="rounded-lg bg-gray-300 p-4">
+          <div className="font-bold">참여하기</div>
+        </div>
+        <div className="w-10 rounded-lg bg-gray-300 p-4">
+          <div className="font-bold">♥︎</div>
+        </div>
       </div>
     </div>
   );

src/pages/index.tsx

@@ -11,10 +11,6 @@ const Home = () => {
           <Button href="api/hello">API 테스트</Button>
         </div>
 
-        <div className="flex flex-col gap-4">
-          <Button href="test/home">홈 - 테스트 페이지로 이동</Button>
-        </div>
-
         <div className="mt-8 space-y-4">
           <h1 className="font-pretendard">Pretendard _ Regular</h1>
           <h1 className="font-ibm text-4xl font-bold">Headline_ Pretendard Bold 36pt</h1>

src/pages/layout/post-detail/index.tsx

@@ -1,10 +1,11 @@
 import CommonLayout from '@/components/layout/CommonLayout';
+import PostCardLayout from '@/components/layout/PostCardLayout';
 import PostDetailBottomBarLayout from '@/components/layout/PostDetailBottomBarLayout';
 
 const PostDetailTest = () => {
   return (
-    <div className="min-h-screen bg-gray-900 px-10 pb-15">
-      <div className="mx-auto tablet:max-w-[800px] desktop:max-w-[1040px] wide:max-w-[1520px]">
+    <div className="min-h-screen bg-gray-900">
+      <div className="mx-auto px-5 tablet:max-w-[800px] desktop:max-w-[1040px] wide:max-w-[1520px]">
         {/* header */}
         <CommonLayout height="h-23" backgroundColor="bg-gray-300" title="header" />
         <div className="mt-15 mb-12">
@@ -18,15 +19,30 @@ const PostDetailTest = () => {
             backgroundColor="bg-gray-200"
             title="post detail content"
           />
+
           <div className="hidden wide:block">
-            <PostDetailBottomBarLayout isSmall={false} />
-          </div>
-        </div>
-        <div>
-          <div className="hidden max-wide:block">
             <PostDetailBottomBarLayout isSmall={true} />
           </div>
         </div>
+        {/* 댓글 */}
+        <div className="my-18">
+          <CommonLayout height="h-[332px]" backgroundColor="bg-gray-400" title="comment" />
+        </div>
+        {/* 같은 카테고리의 글 */}
+        <div className="font-title mb-6 text-white">같은 카테고리의 글</div>
+        <div className="grid grid-cols-1 gap-5 pb-15 tablet:grid-cols-2 desktop:grid-cols-3 wide:grid-cols-4">
+          {[...Array(8)].map((_, i) => (
+            <PostCardLayout key={i + 1} item={i + 1} />
+          ))}
+        </div>
+      </div>
+      <div className="sticky bottom-0 hidden max-wide:block">
+        <div className="mx-[-20px]">
+          <div className="w-full border-t-3 border-red-500" />
+        </div>
+        <div className="mx-auto px-5 tablet:max-w-[800px] desktop:max-w-[1040px] wide:max-w-[1520px]">
+          <PostDetailBottomBarLayout isSmall={false} />
+        </div>
       </div>
     </div>
   );

tsconfig.json

@@ -17,6 +17,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/pages/layout/create-form"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }