refactor: 마이페이지 정렬 드랍다운 위치 수정 등

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";

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();

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();

src/app/(pages)/albaTalk/albaTalks/[talkId]/page.tsx → src/app/(pages)/albaTalk/[albatalkId]/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";
@@ -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) => (
@@ -276,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}
@@ -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>

src/app/(pages)/albaTalk/addTalk/page.tsx

@@ -3,12 +3,12 @@
 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 ImageInputPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputPlaceHolder";
+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;
@@ -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} />
+              <ImageInputPlaceHolder onImageUpload={uploadImage} onImagesChange={handleImagesChange} />
             </div>
           </form>
         </div>

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,11 +101,11 @@ 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">
+                    <div key={post.id}>
                       <Link href={`/albatalk/${post.id}`}>
                         <CardBoard
                           title={post.title}
@@ -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>

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}
+    />
   );
 }

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>

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;
 }

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>