From 45d5fb453e17c85cd6df84f188c0351d57a33fe8 Mon Sep 17 00:00:00 2001
From: cccwon2 <cccwon2@naver.com>
Date: Fri, 13 Dec 2024 14:16:03 +0900
Subject: [PATCH 1/8] =?UTF-8?q?refactor:=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=A0=95=EB=A0=AC=20=EB=93=9C=EB=9E=8D?=
 =?UTF-8?q?=EB=8B=A4=EC=9A=B4=20=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95,?=
 =?UTF-8?q?=20MyPageContent=20=EC=A0=9C=EA=B1=B0,=20sm=EC=9C=BC=EB=A1=9C?=
 =?UTF-8?q?=20=EC=8B=9C=EC=9E=91=ED=95=98=EB=8A=94=20CSS=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EB=93=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(pages)/albaTalk/addTalk/page.tsx     | 15 ++---
 .../{albaTalks => detail}/[talkId]/page.tsx   | 55 ++++++++-----------
 src/app/(pages)/albaTalk/page.tsx             |  2 +-
 .../components/FilterBar/SortSection.tsx      | 16 +++---
 .../mypage/components/FilterBar/index.tsx     |  6 +-
 .../mypage/components/MyPageContent.tsx       | 19 -------
 src/app/(pages)/mypage/page.tsx               | 16 +++++-
 .../ImageInput/ImageInputwithPlaceHolder.tsx  |  7 ++-
 .../components/modal/modals/edit/EditPost.tsx |  4 +-
 .../ImageInputwithplaceHolder.stories.tsx     |  2 +-
 10 files changed, 63 insertions(+), 79 deletions(-)
 rename src/app/(pages)/albaTalk/{albaTalks => detail}/[talkId]/page.tsx (86%)
 delete mode 100644 src/app/(pages)/mypage/components/MyPageContent.tsx

diff --git a/src/app/(pages)/albaTalk/addTalk/page.tsx b/src/app/(pages)/albaTalk/addTalk/page.tsx
index d2b92892..2da4cbcf 100644
--- a/src/app/(pages)/albaTalk/addTalk/page.tsx
+++ b/src/app/(pages)/albaTalk/addTalk/page.tsx
@@ -3,10 +3,10 @@
 import React, { useState, useCallback } from "react";
 import { useForm, SubmitHandler, Controller } from "react-hook-form";
 import { useRouter } from "next/navigation";
-import Button from "../../../components/button/default/Button";
+import Button from "@/app/components/button/default/Button";
 import BaseInput from "@/app/components/input/text/BaseInput";
-import ImageInputwithPlaceHolder from "../../../components/input/file/ImageInput/ImageInputwithPlaceHolder";
-import { usePost } from "../../../../hooks/usePost";
+import ImageInputWithPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputWithPlaceHolder";
+import { usePost } from "@/hooks/usePost";
 import axios from "axios";
 import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
 
@@ -91,7 +91,7 @@ export default function AddTalk() {
   return (
     <>
       <div className="flex min-h-screen w-full items-start justify-center bg-grayscale-50 py-8 font-nexon">
-        <div className="w-full max-w-[1480px] rounded-md bg-white px-4 sm:px-6 md:px-8 lg:px-10">
+        <div className="w-full max-w-[1480px] rounded-md bg-white px-4 md:px-8 lg:px-10">
           <div className="mb-[40px] flex h-[58px] w-full items-center justify-between border-b border-[#line-100] md:h-[78px] lg:h-[126px]">
             <h1 className="flex items-center text-[18px] font-semibold md:text-[20px] lg:text-[32px]">글쓰기</h1>
             <div className="hidden space-x-1 font-semibold md:flex md:space-x-2 lg:space-x-4">
@@ -112,10 +112,7 @@ export default function AddTalk() {
               </Button>
             </div>
           </div>
-          <form
-            className="mx-auto max-w-[1432px] space-y-6 px-2 sm:px-0 md:space-y-8"
-            onSubmit={handleSubmit(onSubmit)}
-          >
+          <form className="mx-auto max-w-[1432px] space-y-6 px-2 md:space-y-8" onSubmit={handleSubmit(onSubmit)}>
             <div className="w-full">
               <label
                 htmlFor="title"
@@ -169,7 +166,7 @@ export default function AddTalk() {
               >
                 이미지
               </label>
-              <ImageInputwithPlaceHolder onImageUpload={uploadImage} onImagesChange={handleImagesChange} />
+              <ImageInputWithPlaceHolder onImageUpload={uploadImage} onImagesChange={handleImagesChange} />
             </div>
           </form>
         </div>
diff --git a/src/app/(pages)/albaTalk/albaTalks/[talkId]/page.tsx b/src/app/(pages)/albaTalk/detail/[talkId]/page.tsx
similarity index 86%
rename from src/app/(pages)/albaTalk/albaTalks/[talkId]/page.tsx
rename to src/app/(pages)/albaTalk/detail/[talkId]/page.tsx
index d414ec57..657c6a2f 100644
--- a/src/app/(pages)/albaTalk/albaTalks/[talkId]/page.tsx
+++ b/src/app/(pages)/albaTalk/detail/[talkId]/page.tsx
@@ -111,14 +111,14 @@ export default function PostDetailPage() {
 
   return (
     <div className="min-h-screen bg-white py-12">
-      <div className="mx-auto flex w-full max-w-[1480px] flex-col items-center px-4 sm:px-6 lg:px-8">
+      <div className="mx-auto flex w-full max-w-[1480px] flex-col items-center px-4 lg:px-8">
         {/* Post Content Box */}
-        <div className="mb-12 flex h-[372px] w-full max-w-[327px] flex-col sm:h-[378px] sm:max-w-[600px] lg:h-[356px] lg:max-w-[1480px]">
+        <div className="mb-12 flex h-[372px] w-full max-w-[327px] flex-col lg:h-[356px]">
           <div className="flex h-full flex-col">
             {/* Title and Profile Section */}
-            <div className="flex h-[98px] flex-col justify-between sm:h-[104px] lg:h-[128px]">
+            <div className="flex h-[98px] flex-col justify-between lg:h-[128px]">
               <div className="mb-4 flex items-center justify-between">
-                <h1 className="text-[16px] font-semibold sm:text-[20px] lg:text-[24px]">{post.title}</h1>
+                <h1 className="text-[16px] font-semibold lg:text-[24px]">{post.title}</h1>
                 {post.writer.id === user?.id && (
                   <div className="relative" ref={optionsRef}>
                     <button onClick={() => setShowOptions(!showOptions)} className="text-grayscale-500">
@@ -147,14 +147,14 @@ export default function PostDetailPage() {
                       </svg>
                     </button>
                     {showOptions && (
-                      <div className="absolute right-0 mt-2 w-[80px] rounded-lg bg-white shadow-lg sm:w-[132px] lg:w-[132px]">
-                        <div className="flex h-[68px] flex-col justify-center gap-2 p-2 sm:h-[104px] lg:h-[104px]">
+                      <div className="absolute right-0 mt-2 w-[80px] rounded-lg bg-white shadow-lg lg:w-[132px]">
+                        <div className="flex h-[68px] flex-col justify-center gap-2 p-2 lg:h-[104px]">
                           <button
                             onClick={() => {
                               setShowEditModal(true);
                               setShowOptions(false);
                             }}
-                            className="rounded-md bg-grayscale-50 p-2 text-xs text-grayscale-400 hover:bg-orange-50 hover:text-black-400 sm:text-sm"
+                            className="rounded-md bg-grayscale-50 p-2 text-xs text-grayscale-400 hover:bg-orange-50 hover:text-black-400 lg:text-sm"
                           >
                             수정하기
                           </button>
@@ -165,7 +165,7 @@ export default function PostDetailPage() {
                               }
                               setShowOptions(false);
                             }}
-                            className="rounded-md bg-grayscale-50 p-2 text-xs text-grayscale-400 hover:bg-orange-50 hover:text-black-400 sm:text-sm"
+                            className="rounded-md bg-grayscale-50 p-2 text-xs text-grayscale-400 hover:bg-orange-50 hover:text-black-400 lg:text-sm"
                           >
                             삭제하기
                           </button>
@@ -178,7 +178,7 @@ export default function PostDetailPage() {
               <hr className="mb-4 border-t border-line-200" />
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
-                  {authorImageError ? ( // Updated author image rendering
+                  {authorImageError ? (
                     <div className="flex h-6 w-6 items-center justify-center rounded-full bg-gray-300">
                       <span className="text-sm font-semibold text-gray-600">
                         {post.writer.nickname.charAt(0).toUpperCase()}
@@ -194,11 +194,9 @@ export default function PostDetailPage() {
                       onError={() => setAuthorImageError(true)}
                     />
                   )}
-                  <span className="text-xs text-grayscale-500 sm:text-sm lg:text-base">{post.writer.nickname}</span>
-                  <span className="text-xs text-grayscale-500 sm:text-sm lg:text-base">|</span>
-                  <span className="text-xs text-grayscale-500 sm:text-sm lg:text-base">
-                    {formatDate(post.createdAt)}
-                  </span>
+                  <span className="text-xs text-grayscale-500 lg:text-base">{post.writer.nickname}</span>
+                  <span className="text-xs text-grayscale-500 lg:text-base">|</span>
+                  <span className="text-xs text-grayscale-500 lg:text-base">{formatDate(post.createdAt)}</span>
                 </div>
                 <div className="flex items-center gap-4">
                   <div className="flex items-center gap-1 sm:gap-2">
@@ -207,37 +205,37 @@ export default function PostDetailPage() {
                       alt="Comments"
                       width={24}
                       height={24}
-                      className="h-[22px] w-[22px] sm:h-6 sm:w-6"
+                      className="h-[22px] w-[22px] lg:h-6 lg:w-6"
                     />
-                    <span className="text-xs text-grayscale-500 sm:text-sm">{post.commentCount}</span>
+                    <span className="text-xs text-grayscale-500 lg:text-base">{post.commentCount}</span>
                   </div>
-                  <div className="flex items-center gap-1 sm:gap-2">
+                  <div className="flex items-center gap-1 lg:gap-2">
                     <button onClick={handleLikeClick} disabled={isPendingLike}>
                       <Image
                         src={post.isLiked ? "/icons/like/like-sm-active.svg" : "/icons/like/like-sm.svg"}
                         alt="Like"
                         width={24}
                         height={24}
-                        className="h-[22px] w-[22px] sm:h-6 sm:w-6"
+                        className="h-[22px] w-[22px] lg:h-6 lg:w-6"
                       />
                     </button>
-                    <span className="text-xs text-grayscale-500 sm:text-sm">{post.likeCount}</span>
+                    <span className="text-xs text-grayscale-500 lg:text-base">{post.likeCount}</span>
                   </div>
                 </div>
               </div>
             </div>
             {/* Content Section */}
-            <div className="mt-auto h-[210px] overflow-y-auto whitespace-pre-wrap text-xs text-black-400 sm:text-sm lg:h-[140px] lg:text-base">
+            <div className="mt-auto h-[210px] overflow-y-auto whitespace-pre-wrap text-xs text-black-400 lg:h-[140px] lg:text-base">
               {post.content}
             </div>
           </div>
         </div>
 
         {/* Comment Section */}
-        <div className="mb-12 flex w-full max-w-[327px] flex-col sm:max-w-[600px] lg:max-w-[1480px]">
+        <div className="mb-12 flex w-full max-w-[327px] flex-col lg:max-w-[1480px]">
           <h2 className="mb-4 text-[16px] font-semibold sm:text-[20px] lg:text-[24px]">댓글({post.commentCount})</h2>
           <hr className="mb-4 border-t border-line-200" />
-          <div className="mb-[7px] flex-grow sm:mb-[8.5px] lg:mb-[10px]"></div>
+          <div className="mb-[7px] flex-grow lg:mb-[10px]"></div>
           {/* Comment Input Box */}
           <div className="mt-auto">
             <div className="relative mb-4">
@@ -247,7 +245,7 @@ export default function PostDetailPage() {
                 placeholder="댓글을 입력해주세요."
                 value={newComment}
                 onChange={(e) => setNewComment(e.target.value)}
-                size="w-full h-[132px] sm:h-[132px] lg:h-[160px]"
+                size="w-full h-[132px] lg:h-[160px]"
               />
             </div>
             <div className="flex justify-end">
@@ -258,7 +256,7 @@ export default function PostDetailPage() {
                     setNewComment("");
                   }
                 }}
-                className="h-[52px] w-[108px] text-base sm:h-[50px] sm:text-base lg:h-[64px] lg:w-[214px] lg:text-xl"
+                className="h-[52px] w-[108px] text-base lg:h-[64px] lg:w-[214px] lg:text-xl"
               >
                 등록하기
               </Button>
@@ -267,7 +265,7 @@ export default function PostDetailPage() {
         </div>
 
         {/* Comments List or Empty State */}
-        <div className="w-full max-w-[327px] sm:max-w-[600px] lg:max-w-[1480px]">
+        <div className="w-full max-w-[327px]">
           {comments.length > 0 ? (
             <div className="space-y-4">
               {comments.map((comment, index) => (
@@ -293,12 +291,7 @@ export default function PostDetailPage() {
             </div>
           ) : (
             <div className="mt-8 flex justify-center">
-              <Image
-                src={`/images/emptyComment-${window.innerWidth >= 1024 ? "md" : "sm"}.svg`}
-                alt="No comments"
-                width={window.innerWidth >= 1024 ? 206 : 206}
-                height={window.innerWidth >= 1024 ? 204 : 152}
-              />
+              <Image src={`/images/emptyComment-md.svg`} alt="No comments" width={206} height={204} />
             </div>
           )}
         </div>
diff --git a/src/app/(pages)/albaTalk/page.tsx b/src/app/(pages)/albaTalk/page.tsx
index 3be2c6a5..64a03031 100644
--- a/src/app/(pages)/albaTalk/page.tsx
+++ b/src/app/(pages)/albaTalk/page.tsx
@@ -105,7 +105,7 @@ export default function AlbaTalk() {
                 <React.Fragment key={page.nextCursor}>
                   {page.data.map((post) => (
                     <div key={post.id} className="rounded-lg border border-grayscale-100 p-4 hover:bg-grayscale-50">
-                      <Link href={`/albatalk/${post.id}`}>
+                      <Link href={`/albatalk/detail/${post.id}`}>
                         <CardBoard
                           title={post.title}
                           content={post.content}
diff --git a/src/app/(pages)/mypage/components/FilterBar/SortSection.tsx b/src/app/(pages)/mypage/components/FilterBar/SortSection.tsx
index aee7ccbe..c3a70baa 100644
--- a/src/app/(pages)/mypage/components/FilterBar/SortSection.tsx
+++ b/src/app/(pages)/mypage/components/FilterBar/SortSection.tsx
@@ -27,14 +27,12 @@ export default function SortSection() {
   };
 
   return (
-    <div className="fixed right-6 top-[180px] z-10 md:right-28 md:top-[200px] lg:right-8">
-      <FilterDropdown
-        options={options.map((option) => option.label)}
-        className="!w-28 md:!w-40"
-        initialValue={currentLabel}
-        onChange={handleSortChange}
-        readOnly={isReadOnly}
-      />
-    </div>
+    <FilterDropdown
+      options={options.map((option) => option.label)}
+      className="!w-28 md:!w-40"
+      initialValue={currentLabel}
+      onChange={handleSortChange}
+      readOnly={isReadOnly}
+    />
   );
 }
diff --git a/src/app/(pages)/mypage/components/FilterBar/index.tsx b/src/app/(pages)/mypage/components/FilterBar/index.tsx
index c45c8dc0..f8721764 100644
--- a/src/app/(pages)/mypage/components/FilterBar/index.tsx
+++ b/src/app/(pages)/mypage/components/FilterBar/index.tsx
@@ -71,9 +71,11 @@ export default function FilterBar() {
 
       {/* 탭 메뉴 섹션 */}
       <nav className="border-b border-grayscale-200">
-        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between">
+        <div className="mx-auto flex max-w-screen-2xl items-center justify-between px-4 py-4 md:px-6 lg:px-8">
           <TabMenu />
-          <SortSection />
+          <div className="ml-auto">
+            <SortSection />
+          </div>
         </div>
       </nav>
     </div>
diff --git a/src/app/(pages)/mypage/components/MyPageContent.tsx b/src/app/(pages)/mypage/components/MyPageContent.tsx
deleted file mode 100644
index 9a1e7c19..00000000
--- a/src/app/(pages)/mypage/components/MyPageContent.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-"use client";
-
-import { useSearchParams } from "next/navigation";
-import PostsSection from "./sections/PostsSection";
-import CommentsSection from "./sections/CommentsSection";
-import ScrapsSection from "./sections/ScrapsSection";
-
-export default function MyPageContent() {
-  const searchParams = useSearchParams();
-  const currentTab = searchParams.get("tab") || "posts";
-
-  const TabContent = {
-    posts: <PostsSection />,
-    comments: <CommentsSection />,
-    scrap: <ScrapsSection />,
-  }[currentTab];
-
-  return TabContent;
-}
diff --git a/src/app/(pages)/mypage/page.tsx b/src/app/(pages)/mypage/page.tsx
index eb700fc6..6e625d72 100644
--- a/src/app/(pages)/mypage/page.tsx
+++ b/src/app/(pages)/mypage/page.tsx
@@ -1,7 +1,19 @@
 "use client";
 
-import MyPageContent from "./components/MyPageContent";
+import { useSearchParams } from "next/navigation";
+import PostsSection from "./components/sections/PostsSection";
+import CommentsSection from "./components/sections/CommentsSection";
+import ScrapsSection from "./components/sections/ScrapsSection";
 
 export default function MyPage() {
-  return <MyPageContent />;
+  const searchParams = useSearchParams();
+  const currentTab = searchParams.get("tab") || "posts";
+
+  const TabContent = {
+    posts: <PostsSection />,
+    comments: <CommentsSection />,
+    scrap: <ScrapsSection />,
+  }[currentTab];
+
+  return TabContent;
 }
diff --git a/src/app/components/input/file/ImageInput/ImageInputwithPlaceHolder.tsx b/src/app/components/input/file/ImageInput/ImageInputwithPlaceHolder.tsx
index 393788b6..e6e51e57 100644
--- a/src/app/components/input/file/ImageInput/ImageInputwithPlaceHolder.tsx
+++ b/src/app/components/input/file/ImageInput/ImageInputwithPlaceHolder.tsx
@@ -1,4 +1,5 @@
 "use client";
+
 import { HiUpload } from "react-icons/hi";
 import { useState, useRef } from "react";
 import { toast } from "react-hot-toast";
@@ -10,13 +11,13 @@ interface ImageInputType {
   id: string;
 }
 
-interface ImageInputwithPlaceHolderProps {
+interface ImageInputWithPlaceHolderProps {
   onImageUpload: (file: File) => Promise<string>;
   onImagesChange: (images: ImageInputType[]) => void;
   size?: "small" | "large";
 }
 
-const ImageInputwithPlaceHolder: React.FC<ImageInputwithPlaceHolderProps> = ({
+const ImageInputWithPlaceHolder: React.FC<ImageInputWithPlaceHolderProps> = ({
   onImageUpload,
   onImagesChange,
   size = "large",
@@ -79,4 +80,4 @@ const ImageInputwithPlaceHolder: React.FC<ImageInputwithPlaceHolderProps> = ({
   );
 };
 
-export default ImageInputwithPlaceHolder;
+export default ImageInputWithPlaceHolder;
diff --git a/src/app/components/modal/modals/edit/EditPost.tsx b/src/app/components/modal/modals/edit/EditPost.tsx
index 3f1167d2..37d19215 100644
--- a/src/app/components/modal/modals/edit/EditPost.tsx
+++ b/src/app/components/modal/modals/edit/EditPost.tsx
@@ -4,7 +4,7 @@ import React, { useCallback, useEffect } from "react";
 import { useForm, Controller } from "react-hook-form";
 import Button from "@/app/components/button/default/Button";
 import BaseInput from "@/app/components/input/text/BaseInput";
-import ImageInputwithPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputwithPlaceHolder";
+import ImageInputWithPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputWithPlaceHolder";
 import axios from "axios";
 import { Post } from "@/types/post";
 import { useMutation } from "@tanstack/react-query";
@@ -117,7 +117,7 @@ export default function EditPostModal({ post, onClose, onUpdate }: EditPostModal
               <label htmlFor="image" className="mb-2 block text-sm font-medium text-gray-700">
                 이미지
               </label>
-              <ImageInputwithPlaceHolder
+              <ImageInputWithPlaceHolder
                 onImageUpload={uploadImage}
                 onImagesChange={(newImages) => {
                   const imageUrls = newImages.map((img) => img.url).join(",");
diff --git a/src/app/stories/design-system/components/input/image/ImageInputwithplaceHolder.stories.tsx b/src/app/stories/design-system/components/input/image/ImageInputwithplaceHolder.stories.tsx
index 7e7424ca..36859ed7 100644
--- a/src/app/stories/design-system/components/input/image/ImageInputwithplaceHolder.stories.tsx
+++ b/src/app/stories/design-system/components/input/image/ImageInputwithplaceHolder.stories.tsx
@@ -1,4 +1,4 @@
-import ImageInputwithPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputwithPlaceHolder";
+import ImageInputwithPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputWithPlaceHolder";
 import { Meta, StoryObj } from "@storybook/react";
 
 const meta = {

From d99a2d6f46d6ecc1bec1f9b8f8735156969f8531 Mon Sep 17 00:00:00 2001
From: cccwon2 <cccwon2@naver.com>
Date: Fri, 13 Dec 2024 14:34:47 +0900
Subject: [PATCH 2/8] =?UTF-8?q?chore:=20DotLodingSpinner=20=EC=9D=84=20Dot?=
 =?UTF-8?q?LoadingSpinner=20=EB=A1=9C=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=ED=8C=8C=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(auth)/login/page.tsx                                   | 2 +-
 src/app/(auth)/signup/applicant/page.tsx                        | 2 +-
 src/app/(auth)/signup/owner/page.tsx                            | 2 +-
 src/app/(pages)/albaTalk/addTalk/page.tsx                       | 2 +-
 src/app/(pages)/albaTalk/detail/[talkId]/page.tsx               | 2 +-
 src/app/components/card/cardList/AlbaListItem.tsx               | 2 +-
 src/app/components/card/cardList/ScrapListItem.tsx              | 2 +-
 .../{DotLodingSpinner.tsx => DotLoadingSpinner.tsx}             | 0
 src/app/components/modal/modals/confirm/DeleteFormModal.tsx     | 2 +-
 src/app/components/modal/modals/confirm/SelectProgressModal.tsx | 2 +-
 src/app/components/modal/modals/form/ChangePasswordModal.tsx    | 2 +-
 src/app/components/modal/modals/form/EditMyProfileModal.tsx     | 2 +-
 src/app/components/modal/modals/form/EditOwnerProfileModal.tsx  | 2 +-
 13 files changed, 12 insertions(+), 12 deletions(-)
 rename src/app/components/loading-spinner/{DotLodingSpinner.tsx => DotLoadingSpinner.tsx} (100%)

diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
index b1c4d90d..c159138b 100644
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
 import { useLogin } from "@/hooks/queries/auth/useLogin";
 import { type LoginSchema, loginSchema } from "@/schemas/authSchema";
 import { zodResolver } from "@hookform/resolvers/zod";
diff --git a/src/app/(auth)/signup/applicant/page.tsx b/src/app/(auth)/signup/applicant/page.tsx
index 24882820..6b6b606a 100644
--- a/src/app/(auth)/signup/applicant/page.tsx
+++ b/src/app/(auth)/signup/applicant/page.tsx
@@ -7,7 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
 import Image from "next/image";
-import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
 
 export default function ApplicantSignupPage() {
   const { signup, isPending } = useSignup();
diff --git a/src/app/(auth)/signup/owner/page.tsx b/src/app/(auth)/signup/owner/page.tsx
index b4582ac1..1eb89131 100644
--- a/src/app/(auth)/signup/owner/page.tsx
+++ b/src/app/(auth)/signup/owner/page.tsx
@@ -7,7 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
 import Image from "next/image";
-import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
 
 export default function OwnerSignupPage() {
   const { signup, isPending } = useSignup();
diff --git a/src/app/(pages)/albaTalk/addTalk/page.tsx b/src/app/(pages)/albaTalk/addTalk/page.tsx
index 2da4cbcf..fcf76318 100644
--- a/src/app/(pages)/albaTalk/addTalk/page.tsx
+++ b/src/app/(pages)/albaTalk/addTalk/page.tsx
@@ -8,7 +8,7 @@ import BaseInput from "@/app/components/input/text/BaseInput";
 import ImageInputWithPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputWithPlaceHolder";
 import { usePost } from "@/hooks/usePost";
 import axios from "axios";
-import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
 
 interface FormInputs {
   title: string;
diff --git a/src/app/(pages)/albaTalk/detail/[talkId]/page.tsx b/src/app/(pages)/albaTalk/detail/[talkId]/page.tsx
index 657c6a2f..2b198664 100644
--- a/src/app/(pages)/albaTalk/detail/[talkId]/page.tsx
+++ b/src/app/(pages)/albaTalk/detail/[talkId]/page.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useRef, useCallback } from "react";
 import { useParams } from "next/navigation";
-import Comment from "@/app/components/card/board/detailComment";
+import Comment from "@/app/components/card/board/DetailComment";
 import BaseTextArea from "@/app/components/input/textarea/BaseTextArea";
 import Button from "@/app/components/button/default/Button";
 import { usePostActions } from "@/hooks/usePostActions";
diff --git a/src/app/components/card/cardList/AlbaListItem.tsx b/src/app/components/card/cardList/AlbaListItem.tsx
index 33a62e36..a3289aa0 100644
--- a/src/app/components/card/cardList/AlbaListItem.tsx
+++ b/src/app/components/card/cardList/AlbaListItem.tsx
@@ -11,7 +11,7 @@ import { FormListType } from "@/types/response/form";
 import { useFormScrap } from "@/hooks/queries/form/useFormScap";
 import { MdOutlineImage } from "react-icons/md";
 import { S3_URL } from "@/constants/config";
-import DotLoadingSpinner from "../../loading-spinner/DotLodingSpinner";
+import DotLoadingSpinner from "../../loading-spinner/DotLoadingSpinner";
 
 /**
  * 알바폼 리스트 아이템 컴포넌트
diff --git a/src/app/components/card/cardList/ScrapListItem.tsx b/src/app/components/card/cardList/ScrapListItem.tsx
index bf7b7f51..f118b81d 100644
--- a/src/app/components/card/cardList/ScrapListItem.tsx
+++ b/src/app/components/card/cardList/ScrapListItem.tsx
@@ -11,7 +11,7 @@ import { useFormScrap } from "@/hooks/queries/form/useFormScap";
 import { useRouter } from "next/navigation";
 import { MdOutlineImage } from "react-icons/md";
 import { S3_URL } from "@/constants/config";
-import DotLoadingSpinner from "../../loading-spinner/DotLodingSpinner";
+import DotLoadingSpinner from "../../loading-spinner/DotLoadingSpinner";
 
 /**
  * 알바폼 스크랩 리스트 아이템 컴포넌트
diff --git a/src/app/components/loading-spinner/DotLodingSpinner.tsx b/src/app/components/loading-spinner/DotLoadingSpinner.tsx
similarity index 100%
rename from src/app/components/loading-spinner/DotLodingSpinner.tsx
rename to src/app/components/loading-spinner/DotLoadingSpinner.tsx
diff --git a/src/app/components/modal/modals/confirm/DeleteFormModal.tsx b/src/app/components/modal/modals/confirm/DeleteFormModal.tsx
index b5e3a280..0106e159 100644
--- a/src/app/components/modal/modals/confirm/DeleteFormModal.tsx
+++ b/src/app/components/modal/modals/confirm/DeleteFormModal.tsx
@@ -7,7 +7,7 @@ import axios from "axios";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import type { ConfirmFormModalProps } from "@/types/modal";
-import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
 
 const DeleteFormModal = ({ id, isOpen, onClose, onConfirm, className }: ConfirmFormModalProps) => {
   const [isDeleting, setIsDeleting] = useState(false);
diff --git a/src/app/components/modal/modals/confirm/SelectProgressModal.tsx b/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
index 263d248a..1c61b04f 100644
--- a/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
+++ b/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
@@ -8,7 +8,7 @@ import { positionOptions } from "@/constants/positionOptions";
 import axios from "axios";
 import toast from "react-hot-toast";
 import type { ConfirmFormModalProps } from "@/types/modal";
-import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
 
 const SelectProgressModal = ({ id, isOpen, onClose, className }: ConfirmFormModalProps) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
diff --git a/src/app/components/modal/modals/form/ChangePasswordModal.tsx b/src/app/components/modal/modals/form/ChangePasswordModal.tsx
index 2f1a72e5..9635a1a5 100644
--- a/src/app/components/modal/modals/form/ChangePasswordModal.tsx
+++ b/src/app/components/modal/modals/form/ChangePasswordModal.tsx
@@ -6,7 +6,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useLogout } from "@/hooks/queries/auth/useLogout";
 import { usePassword } from "@/hooks/queries/user/me/useChangePassword";
-import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
 
 interface ChangePasswordModalProps {
   isOpen: boolean;
diff --git a/src/app/components/modal/modals/form/EditMyProfileModal.tsx b/src/app/components/modal/modals/form/EditMyProfileModal.tsx
index 77cda528..ec8bd89b 100644
--- a/src/app/components/modal/modals/form/EditMyProfileModal.tsx
+++ b/src/app/components/modal/modals/form/EditMyProfileModal.tsx
@@ -11,7 +11,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { nicknameSchema, mobilePhoneSchema } from "@/schemas/commonSchema";
-import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
 
 interface EditMyProfileModalProps {
   isOpen: boolean;
diff --git a/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx b/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx
index 76434228..3a9a40a5 100644
--- a/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx
+++ b/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx
@@ -11,7 +11,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { nicknameSchema, storePhoneSchema, mobilePhoneSchema } from "@/schemas/commonSchema";
-import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
 
 interface EditOwnerProfileModalProps {
   isOpen: boolean;

From 48c56e162c7393d6e7313965e0614bf144e84b2e Mon Sep 17 00:00:00 2001
From: cccwon2 <cccwon2@naver.com>
Date: Fri, 13 Dec 2024 15:02:52 +0900
Subject: [PATCH 3/8] =?UTF-8?q?chore:=20ImageInputPlaceHolder=20=EB=A1=9C?=
 =?UTF-8?q?=20=ED=8C=8C=EC=9D=BC=EB=AA=85=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(pages)/albaTalk/addTalk/page.tsx                 | 4 ++--
 ...InputwithPlaceHolder.tsx => ImageInputPlaceHolder.tsx} | 6 +++---
 src/app/components/modal/modals/edit/EditPost.tsx         | 2 +-
 ...lder.stories.tsx => ImageInputPlaceHolder.stories.tsx} | 8 ++++----
 4 files changed, 10 insertions(+), 10 deletions(-)
 rename src/app/components/input/file/ImageInput/{ImageInputwithPlaceHolder.tsx => ImageInputPlaceHolder.tsx} (94%)
 rename src/app/stories/design-system/components/input/image/{ImageInputwithplaceHolder.stories.tsx => ImageInputPlaceHolder.stories.tsx} (70%)

diff --git a/src/app/(pages)/albaTalk/addTalk/page.tsx b/src/app/(pages)/albaTalk/addTalk/page.tsx
index fcf76318..37997adf 100644
--- a/src/app/(pages)/albaTalk/addTalk/page.tsx
+++ b/src/app/(pages)/albaTalk/addTalk/page.tsx
@@ -5,7 +5,7 @@ import { useForm, SubmitHandler, Controller } from "react-hook-form";
 import { useRouter } from "next/navigation";
 import Button from "@/app/components/button/default/Button";
 import BaseInput from "@/app/components/input/text/BaseInput";
-import ImageInputWithPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputWithPlaceHolder";
+import ImageInputPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputPlaceHolder";
 import { usePost } from "@/hooks/usePost";
 import axios from "axios";
 import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
@@ -166,7 +166,7 @@ export default function AddTalk() {
               >
                 이미지
               </label>
-              <ImageInputWithPlaceHolder onImageUpload={uploadImage} onImagesChange={handleImagesChange} />
+              <ImageInputPlaceHolder onImageUpload={uploadImage} onImagesChange={handleImagesChange} />
             </div>
           </form>
         </div>
diff --git a/src/app/components/input/file/ImageInput/ImageInputwithPlaceHolder.tsx b/src/app/components/input/file/ImageInput/ImageInputPlaceHolder.tsx
similarity index 94%
rename from src/app/components/input/file/ImageInput/ImageInputwithPlaceHolder.tsx
rename to src/app/components/input/file/ImageInput/ImageInputPlaceHolder.tsx
index e6e51e57..b88c3856 100644
--- a/src/app/components/input/file/ImageInput/ImageInputwithPlaceHolder.tsx
+++ b/src/app/components/input/file/ImageInput/ImageInputPlaceHolder.tsx
@@ -11,13 +11,13 @@ interface ImageInputType {
   id: string;
 }
 
-interface ImageInputWithPlaceHolderProps {
+interface ImageInputPlaceHolderProps {
   onImageUpload: (file: File) => Promise<string>;
   onImagesChange: (images: ImageInputType[]) => void;
   size?: "small" | "large";
 }
 
-const ImageInputWithPlaceHolder: React.FC<ImageInputWithPlaceHolderProps> = ({
+const ImageInputPlaceHolder: React.FC<ImageInputPlaceHolderProps> = ({
   onImageUpload,
   onImagesChange,
   size = "large",
@@ -80,4 +80,4 @@ const ImageInputWithPlaceHolder: React.FC<ImageInputWithPlaceHolderProps> = ({
   );
 };
 
-export default ImageInputWithPlaceHolder;
+export default ImageInputPlaceHolder;
diff --git a/src/app/components/modal/modals/edit/EditPost.tsx b/src/app/components/modal/modals/edit/EditPost.tsx
index 37d19215..a1cfb65b 100644
--- a/src/app/components/modal/modals/edit/EditPost.tsx
+++ b/src/app/components/modal/modals/edit/EditPost.tsx
@@ -4,7 +4,7 @@ import React, { useCallback, useEffect } from "react";
 import { useForm, Controller } from "react-hook-form";
 import Button from "@/app/components/button/default/Button";
 import BaseInput from "@/app/components/input/text/BaseInput";
-import ImageInputWithPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputWithPlaceHolder";
+import ImageInputWithPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputPlaceHolder";
 import axios from "axios";
 import { Post } from "@/types/post";
 import { useMutation } from "@tanstack/react-query";
diff --git a/src/app/stories/design-system/components/input/image/ImageInputwithplaceHolder.stories.tsx b/src/app/stories/design-system/components/input/image/ImageInputPlaceHolder.stories.tsx
similarity index 70%
rename from src/app/stories/design-system/components/input/image/ImageInputwithplaceHolder.stories.tsx
rename to src/app/stories/design-system/components/input/image/ImageInputPlaceHolder.stories.tsx
index 36859ed7..aa254d6f 100644
--- a/src/app/stories/design-system/components/input/image/ImageInputwithplaceHolder.stories.tsx
+++ b/src/app/stories/design-system/components/input/image/ImageInputPlaceHolder.stories.tsx
@@ -1,17 +1,17 @@
-import ImageInputwithPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputWithPlaceHolder";
+import ImageInputPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputPlaceHolder";
 import { Meta, StoryObj } from "@storybook/react";
 
 const meta = {
   title: "Design System/Components/FileInput",
-  component: ImageInputwithPlaceHolder,
+  component: ImageInputPlaceHolder,
   parameters: {
     layout: "centered",
   },
-} satisfies Meta<typeof ImageInputwithPlaceHolder>;
+} satisfies Meta<typeof ImageInputPlaceHolder>;
 
 export default meta;
 
-type Story = StoryObj<typeof ImageInputwithPlaceHolder>;
+type Story = StoryObj<typeof ImageInputPlaceHolder>;
 
 export const UploadImagePlaceHolder: Story = {
   args: {

From 6331b7784e0436d314da619a82a45d0af0f6ec1c Mon Sep 17 00:00:00 2001
From: cccwon2 <cccwon2@naver.com>
Date: Fri, 13 Dec 2024 15:07:27 +0900
Subject: [PATCH 4/8] =?UTF-8?q?chore:=20DetailComment=20=EC=97=90=EC=84=9C?=
 =?UTF-8?q?=20CommentDetail=20=EB=A1=9C=20=ED=8C=8C=EC=9D=BC=EB=AA=85=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=AA=85=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(pages)/albaTalk/detail/[talkId]/page.tsx |  4 ++--
 .../{detailComment.tsx => CommentDetail.tsx}      | 15 ++++++++++++---
 2 files changed, 14 insertions(+), 5 deletions(-)
 rename src/app/components/card/board/{detailComment.tsx => CommentDetail.tsx} (95%)

diff --git a/src/app/(pages)/albaTalk/detail/[talkId]/page.tsx b/src/app/(pages)/albaTalk/detail/[talkId]/page.tsx
index 2b198664..e46b3b08 100644
--- a/src/app/(pages)/albaTalk/detail/[talkId]/page.tsx
+++ b/src/app/(pages)/albaTalk/detail/[talkId]/page.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useRef, useCallback } from "react";
 import { useParams } from "next/navigation";
-import Comment from "@/app/components/card/board/DetailComment";
+import CommentDetail from "@/app/components/card/board/CommentDetail";
 import BaseTextArea from "@/app/components/input/textarea/BaseTextArea";
 import Button from "@/app/components/button/default/Button";
 import { usePostActions } from "@/hooks/usePostActions";
@@ -274,7 +274,7 @@ export default function PostDetailPage() {
                   ref={index === comments.length - 1 ? lastCommentElementRef : undefined}
                   className="w-full"
                 >
-                  <Comment
+                  <CommentDetail
                     key={comment.id}
                     id={comment.id}
                     userName={comment.userName}
diff --git a/src/app/components/card/board/detailComment.tsx b/src/app/components/card/board/CommentDetail.tsx
similarity index 95%
rename from src/app/components/card/board/detailComment.tsx
rename to src/app/components/card/board/CommentDetail.tsx
index 3204fa98..3fcdb05b 100644
--- a/src/app/components/card/board/detailComment.tsx
+++ b/src/app/components/card/board/CommentDetail.tsx
@@ -5,7 +5,7 @@ import Image from "next/image";
 import BaseTextArea from "@/app/components/input/textarea/BaseTextArea";
 import Button from "@/app/components/button/default/Button";
 
-export interface CommentProps {
+export interface CommentDetailProps {
   id: number;
   userName: string;
   userImageUrl?: string;
@@ -16,7 +16,16 @@ export interface CommentProps {
   onDelete: (id: number) => void;
 }
 
-const Comment: React.FC<CommentProps> = ({ id, userName, userImageUrl, date, comment, isAuthor, onEdit, onDelete }) => {
+const CommentDetail: React.FC<CommentDetailProps> = ({
+  id,
+  userName,
+  userImageUrl,
+  date,
+  comment,
+  isAuthor,
+  onEdit,
+  onDelete,
+}) => {
   const [showOptions, setShowOptions] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
   const [editedComment, setEditedComment] = useState(comment);
@@ -129,4 +138,4 @@ const Comment: React.FC<CommentProps> = ({ id, userName, userImageUrl, date, com
   );
 };
 
-export default Comment;
+export default CommentDetail;

From 51d814e74bbe455595527a367838250551396dd5 Mon Sep 17 00:00:00 2001
From: cccwon2 <cccwon2@naver.com>
Date: Fri, 13 Dec 2024 15:36:25 +0900
Subject: [PATCH 5/8] =?UTF-8?q?refactor:=20=EC=95=8C=EB=B0=94=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D,=20=EC=95=8C=EB=B0=94=20=ED=86=A0=ED=81=AC=20?=
 =?UTF-8?q?=EB=AC=B4=ED=95=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EB=B2=84?=
 =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(pages)/albaTalk/page.tsx           | 12 +++++++-----
 src/app/components/card/board/CardBoard.tsx |  4 ++--
 src/hooks/queries/form/useForms.ts          | 14 +++++++++-----
 src/hooks/queries/post/usePosts.ts          | 16 ++++++++++------
 4 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/app/(pages)/albaTalk/page.tsx b/src/app/(pages)/albaTalk/page.tsx
index 64a03031..942a1c7e 100644
--- a/src/app/(pages)/albaTalk/page.tsx
+++ b/src/app/(pages)/albaTalk/page.tsx
@@ -11,6 +11,7 @@ import Link from "next/link";
 import { RiEdit2Fill } from "react-icons/ri";
 import FloatingBtn from "@/app/components/button/default/FloatingBtn";
 import CardBoard from "@/app/components/card/board/CardBoard";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 
 const POSTS_PER_PAGE = 10;
 
@@ -57,7 +58,7 @@ export default function AlbaTalk() {
   if (isLoading) {
     return (
       <div className="flex h-[calc(100vh-200px)] items-center justify-center">
-        <div>로딩 중...</div>
+        <LoadingSpinner />
       </div>
     );
   }
@@ -100,12 +101,12 @@ export default function AlbaTalk() {
           </div>
         ) : (
           <div className="mx-auto mt-4 w-full max-w-screen-xl px-3">
-            <div className="flex flex-col gap-4">
+            <div className="flex flex-wrap justify-start gap-6">
               {data?.pages.map((page) => (
                 <React.Fragment key={page.nextCursor}>
                   {page.data.map((post) => (
-                    <div key={post.id} className="rounded-lg border border-grayscale-100 p-4 hover:bg-grayscale-50">
-                      <Link href={`/albatalk/detail/${post.id}`}>
+                    <div key={post.id}>
+                      <Link href={`/albatalk/${post.id}`}>
                         <CardBoard
                           title={post.title}
                           content={post.content}
@@ -113,6 +114,7 @@ export default function AlbaTalk() {
                           updatedAt={post.updatedAt}
                           commentCount={post.commentCount}
                           likeCount={post.likeCount}
+                          onKebabClick={() => console.log("케밥 메뉴 클릭", post.id)}
                         />
                       </Link>
                     </div>
@@ -125,7 +127,7 @@ export default function AlbaTalk() {
             <div ref={ref} className="h-4 w-full">
               {isFetchingNextPage && (
                 <div className="flex justify-center py-4">
-                  <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary-orange-300 border-t-transparent" />
+                  <LoadingSpinner />
                 </div>
               )}
             </div>
diff --git a/src/app/components/card/board/CardBoard.tsx b/src/app/components/card/board/CardBoard.tsx
index dec8789b..5c033ca0 100644
--- a/src/app/components/card/board/CardBoard.tsx
+++ b/src/app/components/card/board/CardBoard.tsx
@@ -46,10 +46,10 @@ const CardBoard = ({
     <div
       className={`flex flex-col rounded-[16px] border p-4 ${
         variant === "primary" ? "border-primary-orange-100 bg-primary-orange-50" : "border-line-100 bg-grayscale-50"
-      } h-[210px] w-[327px] lg:h-[280px] lg:w-[477px]`}
+      } w-[277px] lg:w-[320px]`}
     >
       {/* Content Section */}
-      <div className="flex h-[162px] w-[279px] flex-1 flex-col lg:h-[232px] lg:w-[429px]">
+      <div className="flex w-[279px] flex-1 flex-col lg:w-[320px]">
         {/* Header */}
         <div className="mb-2 flex items-center justify-between">
           <h2 className="line-clamp-2 font-nexon text-[16px] font-semibold text-black-400 lg:text-[18px]">{title}</h2>
diff --git a/src/hooks/queries/form/useForms.ts b/src/hooks/queries/form/useForms.ts
index 34ee15e4..6e75405e 100644
--- a/src/hooks/queries/form/useForms.ts
+++ b/src/hooks/queries/form/useForms.ts
@@ -4,21 +4,20 @@ import type { FormListResponse } from "@/types/response/form";
 import toast from "react-hot-toast";
 
 interface UseFormsParams {
-  cursor?: string;
   limit?: number;
   orderBy?: string;
   keyword?: string;
   isRecruiting?: boolean;
 }
 
-export const useForms = ({ cursor, limit = 10, orderBy, keyword, isRecruiting }: UseFormsParams = {}) => {
+export const useForms = ({ limit = 10, orderBy, keyword, isRecruiting }: UseFormsParams = {}) => {
   const query = useInfiniteQuery<FormListResponse>({
     queryKey: ["forms", { limit, orderBy, keyword, isRecruiting }],
-    queryFn: async () => {
+    queryFn: async ({ pageParam }) => {
       try {
         const response = await axios.get("/api/forms", {
           params: {
-            cursor,
+            cursor: pageParam,
             limit,
             orderBy,
             keyword,
@@ -35,7 +34,12 @@ export const useForms = ({ cursor, limit = 10, orderBy, keyword, isRecruiting }:
         throw error;
       }
     },
-    getNextPageParam: (lastPage) => lastPage.nextCursor,
+    getNextPageParam: (lastPage) => {
+      if (!lastPage.nextCursor || lastPage.data.length === 0) {
+        return undefined;
+      }
+      return lastPage.nextCursor;
+    },
     initialPageParam: undefined,
     staleTime: 1000 * 60 * 5,
     gcTime: 1000 * 60 * 30,
diff --git a/src/hooks/queries/post/usePosts.ts b/src/hooks/queries/post/usePosts.ts
index e3309b2c..679e196b 100644
--- a/src/hooks/queries/post/usePosts.ts
+++ b/src/hooks/queries/post/usePosts.ts
@@ -4,20 +4,19 @@ import axios from "axios";
 import toast from "react-hot-toast";
 
 interface UsePostsParams {
-  cursor?: string;
   limit?: number;
   orderBy?: string;
   keyword?: string;
 }
 
-export const usePosts = ({ cursor, limit = 10, orderBy, keyword }: UsePostsParams = {}) => {
+export const usePosts = ({ limit = 10, orderBy, keyword }: UsePostsParams = {}) => {
   const query = useInfiniteQuery<PostListResponse>({
     queryKey: ["posts", { limit, orderBy, keyword }],
-    queryFn: async () => {
+    queryFn: async ({ pageParam }) => {
       try {
         const response = await axios.get("/api/posts", {
           params: {
-            cursor,
+            cursor: pageParam,
             limit,
             orderBy,
             keyword,
@@ -27,13 +26,18 @@ export const usePosts = ({ cursor, limit = 10, orderBy, keyword }: UsePostsParam
         return response.data;
       } catch (error) {
         if (axios.isAxiosError(error)) {
-          const errorMessage = error.response?.data?.message || "게시글 목록을 불러오는데 실패했습니다.";
+          const errorMessage = error.response?.data?.message || "알바 토크를 불러오는데 실패했습니다.";
           toast.error(errorMessage);
         }
         throw error;
       }
     },
-    getNextPageParam: (lastPage) => lastPage.nextCursor,
+    getNextPageParam: (lastPage) => {
+      if (!lastPage.nextCursor || lastPage.data.length === 0) {
+        return undefined;
+      }
+      return lastPage.nextCursor;
+    },
     initialPageParam: undefined,
     staleTime: 1000 * 60 * 5, // 5분
     gcTime: 1000 * 60 * 30, // 30분

From 5e2133de5d4b43a470598474e9f972461858aec0 Mon Sep 17 00:00:00 2001
From: cccwon2 <cccwon2@naver.com>
Date: Fri, 13 Dec 2024 15:40:36 +0900
Subject: [PATCH 6/8] =?UTF-8?q?chore:=20detail=20=ED=8F=B4=EB=8D=94=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20[albatalkId]=20=ED=8F=B4?=
 =?UTF-8?q?=EB=8D=94=EB=AA=85=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(pages)/albaTalk/{detail/[talkId] => [albatalkId]}/page.tsx   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/app/(pages)/albaTalk/{detail/[talkId] => [albatalkId]}/page.tsx (100%)

diff --git a/src/app/(pages)/albaTalk/detail/[talkId]/page.tsx b/src/app/(pages)/albaTalk/[albatalkId]/page.tsx
similarity index 100%
rename from src/app/(pages)/albaTalk/detail/[talkId]/page.tsx
rename to src/app/(pages)/albaTalk/[albatalkId]/page.tsx

From 4d137b9dd42a2d2a9e7dec087cc5bc97a429e003 Mon Sep 17 00:00:00 2001
From: cccwon2 <cccwon2@naver.com>
Date: Fri, 13 Dec 2024 16:05:58 +0900
Subject: [PATCH 7/8] =?UTF-8?q?design:=20=EC=95=8C=EB=B0=94=ED=86=A0?=
 =?UTF-8?q?=ED=81=AC,=20=EC=95=8C=EB=B0=94=EB=AA=A9=EB=A1=9D=20UI=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(pages)/albaList/page.tsx           |   2 +-
 src/app/(pages)/albaTalk/page.tsx           |   4 +-
 src/app/components/card/board/CardBoard.tsx | 170 +++++++++++---------
 3 files changed, 94 insertions(+), 82 deletions(-)

diff --git a/src/app/(pages)/albaList/page.tsx b/src/app/(pages)/albaList/page.tsx
index 8f719dfb..bb6d5f08 100644
--- a/src/app/(pages)/albaList/page.tsx
+++ b/src/app/(pages)/albaList/page.tsx
@@ -131,7 +131,7 @@ export default function AlbaList() {
       <div className="w-full pt-[132px]">
         {/* 폼 만들기 버튼 - 고정 위치 */}
         {isOwner && (
-          <Link href="/addform" className="fixed bottom-[50%] right-4 z-[9999] translate-y-1/2">
+          <Link href="/addform" className="fixed bottom-[50%] right-[5%] z-[9999] translate-y-1/2">
             <FloatingBtn icon={<IoAdd className="size-6" />} variant="orange">
               폼 만들기
             </FloatingBtn>
diff --git a/src/app/(pages)/albaTalk/page.tsx b/src/app/(pages)/albaTalk/page.tsx
index 942a1c7e..2649dfb2 100644
--- a/src/app/(pages)/albaTalk/page.tsx
+++ b/src/app/(pages)/albaTalk/page.tsx
@@ -88,9 +88,9 @@ export default function AlbaTalk() {
 
       {/* 메인 콘텐츠 영역 */}
       <div className="w-full pt-[132px]">
-        {/* 글쓰기 버튼 - 고정 위치 */}
+        {/* 글쓰기 버튼 - 고정 위치 수정 */}
         {user && (
-          <Link href="/albatalk/addtalk" className="fixed bottom-[50%] right-4 z-[9999] translate-y-1/2">
+          <Link href="/albatalk/addtalk" className="fixed bottom-[50%] right-[8%] z-[9999] translate-y-1/2">
             <FloatingBtn icon={<RiEdit2Fill className="size-6" />} variant="orange" />
           </Link>
         )}
diff --git a/src/app/components/card/board/CardBoard.tsx b/src/app/components/card/board/CardBoard.tsx
index 5c033ca0..51200ada 100644
--- a/src/app/components/card/board/CardBoard.tsx
+++ b/src/app/components/card/board/CardBoard.tsx
@@ -13,7 +13,7 @@ export interface CardBoardProps {
   commentCount: number;
   likeCount: number;
   variant?: "default" | "primary";
-  onKebabClick?: () => void; // 케밥 버튼 클릭 핸들러
+  onKebabClick?: () => void;
 }
 
 const CardBoard = ({
@@ -30,102 +30,114 @@ const CardBoard = ({
   const [isLiked, setIsLiked] = useState(false);
   const [likeDisplayCount, setLikeDisplayCount] = useState(likeCount);
 
+  const formatContent = (text: string) => {
+    if (text.length > 30) {
+      return text.slice(0, 30) + "...";
+    }
+    return text;
+  };
+
   const handleLikeClick = () => {
     if (isLiked) {
-      setLikeDisplayCount((prev) => prev - 1); // 좋아요 취소 시 감소
+      setLikeDisplayCount((prev) => prev - 1);
     } else {
-      setLikeDisplayCount((prev) => prev + 1); // 좋아요 클릭 시 증가
+      setLikeDisplayCount((prev) => prev + 1);
     }
-    setIsLiked((prev) => !prev); // 좋아요 상태 토글
+    setIsLiked((prev) => !prev);
   };
 
-  // 케밥 아이콘 경로 설정
   const kebabSrc = `/icons/menu/${isDesktop ? "kebab-menu-md.svg" : "kebab-menu-sm.svg"}`;
 
   return (
     <div
-      className={`flex flex-col rounded-[16px] border p-4 ${
+      className={`h-[220px] w-[320px] rounded-[16px] border p-4 lg:h-[240px] lg:w-[360px] ${
         variant === "primary" ? "border-primary-orange-100 bg-primary-orange-50" : "border-line-100 bg-grayscale-50"
-      } w-[277px] lg:w-[320px]`}
+      }`}
     >
-      {/* Content Section */}
-      <div className="flex w-[279px] flex-1 flex-col lg:w-[320px]">
-        {/* Header */}
-        <div className="mb-2 flex items-center justify-between">
-          <h2 className="line-clamp-2 font-nexon text-[16px] font-semibold text-black-400 lg:text-[18px]">{title}</h2>
-          {/* Kebab Icon */}
-          <button
-            type="button"
-            onClick={onKebabClick}
-            className="hover:text-grayscale-700 flex items-center justify-center text-grayscale-500"
-            aria-label="Options"
-          >
-            <Image src={kebabSrc} alt="Kebab Menu Icon" width={isDesktop ? 28 : 24} height={isDesktop ? 28 : 24} />
-            {/* 크기 조정 */}
-          </button>
-        </div>
-        {/* Content */}
-        <p className="line-clamp-2 whitespace-pre-wrap font-nexon text-[14px] font-normal leading-[1.5] text-grayscale-500 lg:text-[16px]">
-          {content}
-        </p>
-      </div>
-
-      {/* Footer Section */}
-      <div className="mt-4 flex h-[24px] w-[279px] items-center justify-between lg:h-[36px] lg:w-[429px]">
-        {/* Left Info */}
-        <div className="flex items-center gap-2 lg:gap-3">
-          {/* 유저 아이콘 */}
-          <Image
-            src={`/icons/user/${isDesktop ? "user-profile-md.svg" : "user-profile-sm.svg"}`}
-            alt="User Icon"
-            width={28}
-            height={28}
-          />
-          {/* 닉네임 + 수정일 */}
-          <div className="flex items-center gap-1 truncate">
-            <span className="truncate font-nexon text-[14px] font-normal text-grayscale-500 lg:text-[16px]">
-              {nickname}
-            </span>
-            <span className="text-grayscale-500">|</span>
-            <span className="whitespace-nowrap font-nexon text-[14px] font-normal text-grayscale-500 lg:text-[16px]">
-              {formatLocalDate(updatedAt)}
-            </span>
+      <div className="flex h-full flex-col justify-between">
+        {/* Content Section */}
+        <div className="flex flex-col">
+          {/* Header */}
+          <div className="mb-2 flex items-center justify-between">
+            <h2 className="line-clamp-2 flex-1 font-nexon text-[16px] font-semibold text-black-400 lg:text-[18px]">
+              {title}
+            </h2>
+            {/* Kebab Icon */}
+            <button
+              type="button"
+              onClick={onKebabClick}
+              className="hover:text-grayscale-700 ml-2 flex shrink-0 items-center justify-center text-grayscale-500"
+              aria-label="Options"
+            >
+              <Image src={kebabSrc} alt="Kebab Menu Icon" width={isDesktop ? 28 : 24} height={isDesktop ? 28 : 24} />
+            </button>
+          </div>
+          {/* Content */}
+          <div className="line-clamp-2 whitespace-pre-wrap break-all font-nexon text-xs font-normal leading-[1.5] text-grayscale-500 lg:text-base">
+            {formatContent(content)}
           </div>
         </div>
 
-        {/* Right Info */}
-        <div className="flex items-center gap-1 lg:gap-2">
-          {/* 댓글 아이콘 */}
-          <div className="flex items-center gap-1">
+        {/* Footer Section */}
+        <div className="flex items-center justify-between">
+          {/* Left Info */}
+          <div className="flex items-center gap-2 lg:gap-3">
+            {/* 유저 아이콘 */}
             <Image
-              src={`/icons/comment/${isDesktop ? "comment-md.svg" : "comment-sm.svg"}`}
-              alt="Comment Icon"
-              width={22}
-              height={22}
+              src={`/icons/user/${isDesktop ? "user-profile-md.svg" : "user-profile-sm.svg"}`}
+              alt="User Icon"
+              width={28}
+              height={28}
+              className="shrink-0"
             />
-            <span className="font-nexon text-[14px] font-normal text-grayscale-500 lg:text-[16px]">{commentCount}</span>
+            {/* 닉네임 + 수정일 */}
+            <div className="flex min-w-0 items-center gap-1">
+              <span className="truncate font-nexon text-[14px] font-normal text-grayscale-500 lg:text-[16px]">
+                {nickname}
+              </span>
+              <span className="shrink-0 text-grayscale-500">|</span>
+              <span className="shrink-0 whitespace-nowrap font-nexon text-[14px] font-normal text-grayscale-500 lg:text-[16px]">
+                {formatLocalDate(updatedAt)}
+              </span>
+            </div>
           </div>
-          {/* 좋아요 */}
-          <div className="flex items-center gap-1">
-            <Image
-              src={`/icons/like/${
-                isLiked
-                  ? isDesktop
-                    ? "like-md-active.svg"
-                    : "like-sm-active.svg"
-                  : isDesktop
-                    ? "like-md.svg"
-                    : "like-sm.svg"
-              }`}
-              alt="Like Icon"
-              width={22}
-              height={22}
-              className="cursor-pointer"
-              onClick={handleLikeClick}
-            />
-            <span className="font-nexon text-[14px] font-normal text-grayscale-500 lg:text-[16px]">
-              {likeDisplayCount}
-            </span>
+
+          {/* Right Info */}
+          <div className="flex shrink-0 items-center gap-1 lg:gap-2">
+            {/* 댓글 아이콘 */}
+            <div className="flex items-center gap-1">
+              <Image
+                src={`/icons/comment/${isDesktop ? "comment-md.svg" : "comment-sm.svg"}`}
+                alt="Comment Icon"
+                width={22}
+                height={22}
+              />
+              <span className="font-nexon text-[14px] font-normal text-grayscale-500 lg:text-[16px]">
+                {commentCount}
+              </span>
+            </div>
+            {/* 좋아요 */}
+            <div className="flex items-center gap-1">
+              <Image
+                src={`/icons/like/${
+                  isLiked
+                    ? isDesktop
+                      ? "like-md-active.svg"
+                      : "like-sm-active.svg"
+                    : isDesktop
+                      ? "like-md.svg"
+                      : "like-sm.svg"
+                }`}
+                alt="Like Icon"
+                width={22}
+                height={22}
+                className="cursor-pointer"
+                onClick={handleLikeClick}
+              />
+              <span className="font-nexon text-[14px] font-normal text-grayscale-500 lg:text-[16px]">
+                {likeDisplayCount}
+              </span>
+            </div>
           </div>
         </div>
       </div>

From 64bf305842a659937af54a739c3f72d3bf70060e Mon Sep 17 00:00:00 2001
From: cccwon2 <cccwon2@naver.com>
Date: Fri, 13 Dec 2024 16:10:51 +0900
Subject: [PATCH 8/8] =?UTF-8?q?fix:=20=EB=B9=8C=EB=93=9C=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(pages)/(albaform)/addform/page.tsx                    | 2 +-
 .../(albaform)/alba/[formId]/components/FormActions.tsx        | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/(pages)/(albaform)/addform/page.tsx b/src/app/(pages)/(albaform)/addform/page.tsx
index 66f9728e..d367bfeb 100644
--- a/src/app/(pages)/(albaform)/addform/page.tsx
+++ b/src/app/(pages)/(albaform)/addform/page.tsx
@@ -14,7 +14,7 @@ import WorkConditionSection from "./section/WorkConditionSection";
 import useEditing from "@/hooks/useEditing";
 import { SubmitFormDataType } from "@/types/addform";
 import CustomFormModal from "@/app/components/modal/modals/confirm/CustomFormModal";
-import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
 
 export default function AddFormPage() {
   const router = useRouter();
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/components/FormActions.tsx b/src/app/(pages)/(albaform)/alba/[formId]/components/FormActions.tsx
index 6e7cd314..2d00f288 100644
--- a/src/app/(pages)/(albaform)/alba/[formId]/components/FormActions.tsx
+++ b/src/app/(pages)/(albaform)/alba/[formId]/components/FormActions.tsx
@@ -11,7 +11,7 @@ import { CiMemoPad } from "react-icons/ci";
 import axios from "axios";
 import toast from "react-hot-toast";
 import { useRouter } from "next/navigation";
-import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
 
 interface FormActionsProps {
   formId: string | number;
@@ -36,6 +36,7 @@ export default function FormActions({ formId, albaFormDetailData }: FormActionsP
       toast.success("성공적으로 삭제되었습니다.");
       router.push(`/albalist`);
     } catch (error) {
+      console.error(error);
       toast.error("삭제 중 오류가 발생했습니다.");
     } finally {
       setLoading(false);