[style] 프로필 페이지, 스켈레톤, Pagination 등 담당 작업 반응형 스타일 수정

src/components/NoticeDetailSkeleton.tsx

@@ -3,46 +3,46 @@ import { Location, Time } from "@/assets/icon";
 function NoticeDetailSkeleton() {
   return (
     <section>
-      <div className="flex flex-col gap-3 md:gap-6 xl:w-[60.25rem] mx-auto px-3 md:px-8 py-10 md:py-[3.75rem]">
-        <div className="flex flex-col gap-2 mb-1 md:mb-2">
-          <span className="inline-block text-sm md:text-base text-primary font-bold leading-5">
+      <div className="flex flex-col gap-3 sm:gap-6 lg:w-[64rem] mx-auto px-3 sm:px-8 py-10 sm:py-[3.75rem]">
+        <div className="flex flex-col gap-2 mb-1 sm:mb-2">
+          <span className="inline-block text-sm sm:text-base text-primary font-bold leading-5">
             식당
           </span>
-          <h2 className="h-5 md:h-[1.75rem] animate-skeleton rounded-md" />
+          <h2 className="h-5 sm:h-[1.75rem] animate-skeleton rounded-sm" />
         </div>
         <article
           className={
-            "flex flex-col lg:flex-row gap-4 lg:gap-[1.875rem] w-full h-[30.25rem] md:h-[44.875rem] lg:h-[22.25rem] rounded-xl border border-gray-20 bg-white p-5 md:p-6 shadow-sm"
+            "flex flex-col lg:flex-row gap-4 lg:gap-[1.875rem] w-full h-[30.25rem] sm:h-[44.875rem] lg:h-[22.25rem] rounded-xl border border-gray-20 bg-white p-5 sm:p-6 shadow-sm"
           }
         >
           <div className="flex-1 h-full lg:h-[19.25rem]">
             <div className="w-full h-full animate-skeleton rounded-xl" />
           </div>
 
           <div className="flex flex-col justify-between w-full lg:w-[21.625rem] h-[15.75rem] lg:h-full">
-            <div className="flex flex-col gap-3 md:gap-4">
+            <div className="flex flex-col gap-3 sm:gap-4">
               <div className="flex flex-col justify-center">
                 <span className="inline-block w-[1.875rem] h-4 animate-skeleton rounded-sm lg:mt-4 mb-2" />
-                <span className="inline-block w-[10rem] h-[1.375rem] md:h-7 animate-skeleton rounded-sm" />
+                <span className="inline-block w-[10rem] h-[1.375rem] sm:h-7 animate-skeleton rounded-sm" />
               </div>
               <div className="flex flex-col gap-4">
                 <div className="flex items-center gap-1.5">
-                  <Time className="h-4 w-4 md:h-5 md:w-5" />
+                  <Time className="h-4 w-4 sm:h-5 sm:w-5" />
                   <div className="w-full h-4 animate-skeleton rounded-sm" />
                 </div>
                 <div className="flex items-center gap-1.5">
-                  <Location className="h-4 w-4 md:h-5 md:w-5" />
+                  <Location className="h-4 w-4 sm:h-5 sm:w-5" />
                   <div className="w-full h-4 animate-skeleton rounded-sm" />
                 </div>
               </div>
             </div>
-            <div className="w-full h-[2.625rem] animate-skeleton rounded-md" />
+            <div className="w-full h-[2.625rem] animate-skeleton rounded-sm" />
           </div>
         </article>
 
         <div className="flex flex-col gap-3 p-8 bg-gray-10 rounded-xl">
           <span className="font-bold leading-5">공고 설명</span>
-          <p className="w-full h-[3.25rem] animate-skeleton rounded-md" />
+          <p className="w-full h-[3.25rem] animate-skeleton rounded-sm" />
         </div>
       </div>
     </section>

src/components/PageErrorElement.tsx

@@ -17,8 +17,8 @@ function PageErrorElement() {
   };
 
   return (
-    <div className="flex-1 flex flex-col items-center gap-6 md:gap-10 mt-20 md:mt-48">
-      <h1 className="text-2xl md:text-3xl">문제가 발생했습니다.</h1>
+    <div className="flex-1 flex flex-col items-center gap-6 sm:gap-10 mt-20 sm:mt-48">
+      <h1 className="text-2xl sm:text-3xl">문제가 발생했습니다.</h1>
       <div className="flex gap-5">
         <Button
           variant="primary"

src/components/Pagination.tsx

@@ -52,7 +52,7 @@ export default function Pagination({
   const isLastPage = currentPage === totalPages;
 
   return (
-    <ul className="flex items-center md:gap-1 gap-0.5 select-none text-black">
+    <ul className="flex items-center sm:gap-1 gap-0.5 select-none text-black">
       {isTotalPagesMoreThanLimit && (
         <li className="flex items-center mr-4">
           <button
@@ -80,7 +80,7 @@ export default function Pagination({
               disabled={isActive}
               aria-current={isActive ? "page" : undefined}
               className={cn(
-                "md:w-10 md:h-10 w-8 h-8 grid place-content-center rounded-sm md:text-sm text-xs",
+                "sm:w-10 sm:h-10 w-8 h-8 grid place-content-center rounded-sm sm:text-sm text-xs",
                 "cursor-pointer disabled:cursor-default transition-colors duration-150 active:scale-95",
                 isActive ? "bg-red-30 text-white" : "hover:bg-gray-100",
               )}

src/pages/ProfilePage/components/UserApplicationTable.tsx

@@ -32,7 +32,7 @@ function UserApplicationTable({
       bodyRow={({ id, notice, shop, status }) => (
         <Table.Tr
           key={id}
-          className="text-sm md:text-[1rem]"
+          className="text-sm sm:text-[1rem]"
           showLastBottomBorder
         >
           <Table.Td>{shop.item.name}</Table.Td>

src/pages/ProfilePage/components/UserApplicationTableSkeleton.tsx

@@ -1,8 +1,8 @@
 function UserApplicationTableSkeleton() {
   return (
     <div className="w-full">
-      <div className="md:h-[3.125rem] h-[2.5rem] mb-3 animate-skeleton rounded-lg" />
-      <div className="md:h-[24.875rem] h-[19.625rem] w-full animate-skeleton rounded-lg" />
+      <div className="sm:h-[3.125rem] h-[2.5rem] mb-3 animate-skeleton rounded-lg" />
+      <div className="sm:h-[24.875rem] h-[19.625rem] w-full animate-skeleton rounded-lg" />
     </div>
   );
 }