From aeeafe8edcbe681df731b55e00377daca8ccd63a Mon Sep 17 00:00:00 2001
From: celine <wisohyun0@gmail.com>
Date: Mon, 20 Oct 2025 16:30:35 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20design:=20=EC=95=8C=EB=A6=BC=20?=
 =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=82=B4?=
 =?UTF-8?q?=EA=B0=80=EA=B2=8C=20=EC=95=8C=EB=A6=BC=20=EC=82=AD=EC=A0=9C=20?=
 =?UTF-8?q?#97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/frame/frame.tsx         |   2 +-
 src/components/ui/table/Table.tsx             |  24 +-
 .../[shopId]/notices/[noticeId]/edit.tsx      | 152 +++++++------
 .../[shopId]/notices/[noticeId]/index.tsx     |  82 ++++---
 .../shops/[shopId]/notices/register/index.tsx | 208 +++++++++---------
 src/pages/my-profile/index.tsx                |  26 +--
 6 files changed, 242 insertions(+), 252 deletions(-)

diff --git a/src/components/layout/frame/frame.tsx b/src/components/layout/frame/frame.tsx
index 5c7d5f1..65670e2 100644
--- a/src/components/layout/frame/frame.tsx
+++ b/src/components/layout/frame/frame.tsx
@@ -13,7 +13,7 @@ const Frame = ({ title, content, buttonText, href }: FrameProps) => {
   return (
     <>
       <Container as='section' className='flex flex-col gap-4 py-10 tablet:py-[60px]'>
-        <h1 className='text-heading-s font-bold tablet:text-heading-l'>{title}</h1>
+        <h1 className='text-heading-l font-bold tablet:text-heading-l'>{title}</h1>
         <div className='flex flex-col items-center justify-center gap-4 rounded-xl border border-solid border-gray-200 px-6 py-[60px]'>
           <h2 className='text-body-s font-normal tablet:text-body-l'>{content}</h2>
           <div className='tablet:w-[346px]'>
diff --git a/src/components/ui/table/Table.tsx b/src/components/ui/table/Table.tsx
index c0a3a61..37d562a 100644
--- a/src/components/ui/table/Table.tsx
+++ b/src/components/ui/table/Table.tsx
@@ -33,13 +33,11 @@ export default function Table({
   noticeId,
 }: TableProps) {
   return (
-    <div className='py-[60px]'>
-      <div className='px-8 text-xl font-bold md:px-10 lg:mx-auto lg:max-w-[1000px] lg:px-0'>
-        <h2 className='text-heading-l font-semibold'>
-          {userRole === 'employer' ? '신청자 목록' : '신청 내역'}
-        </h2>
-      </div>
-      <div className='m-7 overflow-hidden rounded-lg border bg-white lg:mx-auto lg:max-w-[1000px]'>
+    <>
+      <h2 className='mb-4 text-heading-l font-bold tablet:mb-8'>
+        {userRole === 'employer' ? '신청자 목록' : '신청 내역'}
+      </h2>
+      <div className='overflow-hidden rounded-lg border bg-white'>
         <div className='scroll-bar overflow-x-auto'>
           <table className='w-full table-fixed border-collapse'>
             <thead>
@@ -48,7 +46,7 @@ export default function Table({
                   <th
                     key={index}
                     className={cn(
-                      'md:borde-r-0 bg-red-100 px-2 py-3 text-left text-xs font-normal',
+                      'bg-red-100 px-2 py-3 text-left text-body-l font-normal md:border-0',
                       index < headers.length - 1 && 'border-r md:border-r-0',
                       index === 0 && 'sticky left-0 z-10 w-[200px]',
                       index > 0 && index < headers.length - 1 && 'w-[245px]',
@@ -76,10 +74,12 @@ export default function Table({
           </table>
         </div>
 
-        <div className='flex justify-center px-3 py-2'>
-          <Pagination total={total} limit={limit} offset={offset} onPageChange={onPageChange} />
-        </div>
+        {offset >= 2 && (
+          <div className='flex justify-center px-3 py-2'>
+            <Pagination total={total} limit={limit} offset={offset} onPageChange={onPageChange} />
+          </div>
+        )}
       </div>
-    </div>
+    </>
   );
 }
diff --git a/src/pages/employer/shops/[shopId]/notices/[noticeId]/edit.tsx b/src/pages/employer/shops/[shopId]/notices/[noticeId]/edit.tsx
index 2d0c694..8746d63 100644
--- a/src/pages/employer/shops/[shopId]/notices/[noticeId]/edit.tsx
+++ b/src/pages/employer/shops/[shopId]/notices/[noticeId]/edit.tsx
@@ -1,4 +1,4 @@
-import { Container, Wrapper } from '@/components/layout';
+import { Container } from '@/components/layout';
 import { Button, DateInput, Input, Modal, TimeInput } from '@/components/ui';
 import useAuth from '@/hooks/useAuth';
 import axiosInstance from '@/lib/axios';
@@ -98,82 +98,80 @@ const EmployerNoticeEditPage = () => {
   if (!user?.shop) return null;
 
   return (
-    <Wrapper>
-      <Container isPage>
-        <p className='mb-4 text-3xl font-bold'>공고 편집</p>
-
-        <form onSubmit={handleSubmit} className='flex w-full flex-col gap-4'>
-          <div className='grid grid-cols-1 gap-4 tablet:grid-cols-2 tablet:gap-6'>
-            <Input
-              id='wage'
-              label='시급'
-              requiredMark
-              placeholder='12,500'
-              inputMode='numeric'
-              suffix='원'
-              value={wage}
-              onChange={e => setWage(e.currentTarget.value.replace(/\D+/g, ''))}
-            />
-
-            <Input
-              id='workhour'
-              label='업무 시간'
-              requiredMark
-              placeholder='4'
-              inputMode='numeric'
-              suffix='시간'
-              value={workhour?.toString() ?? ''}
-              onChange={e => setWorkhour(Number(e.currentTarget.value))}
-            />
-
-            <DateInput
-              label='시작 날짜'
-              requiredMark
-              value={date ?? undefined}
-              onChange={selectedDate =>
-                setDate(selectedDate instanceof Date ? selectedDate : new Date(selectedDate))
-              }
-            />
-
-            <TimeInput label='시작 시간' requiredMark value={time} onChange={setTime} />
-          </div>
-
-          <div className='flex flex-col gap-2'>
-            <label htmlFor='description' className='text-sm font-medium'>
-              공고 설명 <span className='text-red-500'>*</span>
-            </label>
-            <textarea
-              id='description'
-              name='description'
-              className='rounded-md border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-400'
-              rows={4}
-              placeholder='공고에 대한 설명을 입력하세요.'
-              value={description}
-              onChange={e => setDescription(e.target.value)}
-            />
-          </div>
-
-          <Button
-            type='submit'
-            variant='primary'
-            size='lg'
-            className='mt-5 w-full'
-            disabled={!wage || !date || !time || !workhour || !description}
-          >
-            등록하기
-          </Button>
-        </form>
-
-        <Modal
-          open={modalOpen}
-          onClose={handleModalClose}
-          title='편집 완료'
-          variant='success'
-          primaryText='확인'
-          onPrimary={handleModalClose}
-        />
-      </Container>
-    </Wrapper>
+    <Container isPage>
+      <p className='mb-4 text-3xl font-bold'>공고 편집</p>
+
+      <form onSubmit={handleSubmit} className='flex w-full flex-col gap-4'>
+        <div className='grid grid-cols-1 gap-4 tablet:grid-cols-2 tablet:gap-6'>
+          <Input
+            id='wage'
+            label='시급'
+            requiredMark
+            placeholder='12,500'
+            inputMode='numeric'
+            suffix='원'
+            value={wage}
+            onChange={e => setWage(e.currentTarget.value.replace(/\D+/g, ''))}
+          />
+
+          <Input
+            id='workhour'
+            label='업무 시간'
+            requiredMark
+            placeholder='4'
+            inputMode='numeric'
+            suffix='시간'
+            value={workhour?.toString() ?? ''}
+            onChange={e => setWorkhour(Number(e.currentTarget.value))}
+          />
+
+          <DateInput
+            label='시작 날짜'
+            requiredMark
+            value={date ?? undefined}
+            onChange={selectedDate =>
+              setDate(selectedDate instanceof Date ? selectedDate : new Date(selectedDate))
+            }
+          />
+
+          <TimeInput label='시작 시간' requiredMark value={time} onChange={setTime} />
+        </div>
+
+        <div className='flex flex-col gap-2'>
+          <label htmlFor='description' className='text-sm font-medium'>
+            공고 설명 <span className='text-red-500'>*</span>
+          </label>
+          <textarea
+            id='description'
+            name='description'
+            className='rounded-md border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-400'
+            rows={4}
+            placeholder='공고에 대한 설명을 입력하세요.'
+            value={description}
+            onChange={e => setDescription(e.target.value)}
+          />
+        </div>
+
+        <Button
+          type='submit'
+          variant='primary'
+          size='lg'
+          className='mt-5 w-full'
+          disabled={!wage || !date || !time || !workhour || !description}
+        >
+          등록하기
+        </Button>
+      </form>
+
+      <Modal
+        open={modalOpen}
+        onClose={handleModalClose}
+        title='편집 완료'
+        variant='success'
+        primaryText='확인'
+        onPrimary={handleModalClose}
+      />
+    </Container>
   );
 };
 
diff --git a/src/pages/employer/shops/[shopId]/notices/[noticeId]/index.tsx b/src/pages/employer/shops/[shopId]/notices/[noticeId]/index.tsx
index 38bae19..b290953 100644
--- a/src/pages/employer/shops/[shopId]/notices/[noticeId]/index.tsx
+++ b/src/pages/employer/shops/[shopId]/notices/[noticeId]/index.tsx
@@ -1,4 +1,4 @@
-import { Container, Wrapper } from '@/components/layout';
+import { Container } from '@/components/layout';
 import { Button, Modal, Notice, Table } from '@/components/ui';
 import { TableRowProps } from '@/components/ui/table/TableRowProps';
 import useAuth from '@/hooks/useAuth';
@@ -186,50 +186,46 @@ const EmployerNoticeDetailPage = ({ notice }: { notice: NoticeCard }) => {
   }, [notice.shopId, notice.id, offset, limit]);
 
   return (
-    <Wrapper>
+    <>
+      <Notice notice={notice} className='py-10 tablet:py-16'>
+        <Button
+          size='xs38'
+          full
+          className='font-bold'
+          variant={'secondary'}
+          onClick={handleEditClick}
+          disabled={!canEdit}
+        >
+          공고 편집하기
+        </Button>
+        <Modal
+          open={modalOpen}
+          onClose={() => setModalOpen(false)}
+          variant='warning'
+          title={modal?.title ?? '유저 정보를 확인해주세요'}
+          primaryText={modal?.primaryText ?? '확인'}
+          onPrimary={modal?.onPrimary ?? (() => setModalOpen(false))}
+          secondaryText={modal?.secondaryText}
+          onSecondary={modal?.onSecondary}
+        />
+      </Notice>
       <Container isPage>
-        <div>
-          <Notice notice={notice} className='py-10 tablet:py-16'>
-            <Button
-              size='xs38'
-              full
-              className='font-bold'
-              variant={'secondary'}
-              onClick={handleEditClick}
-              disabled={!canEdit}
-            >
-              공고 편집하기
-            </Button>
-            <Modal
-              open={modalOpen}
-              onClose={() => setModalOpen(false)}
-              variant='warning'
-              title={modal?.title ?? '유저 정보를 확인해주세요'}
-              primaryText={modal?.primaryText ?? '확인'}
-              onPrimary={modal?.onPrimary ?? (() => setModalOpen(false))}
-              secondaryText={modal?.secondaryText}
-              onSecondary={modal?.onSecondary}
-            />
-          </Notice>
-          <Table
-            headers={headers}
-            tableData={data}
-            userRole='employer'
-            total={data.length}
-            limit={limit}
-            offset={offset}
-            onPageChange={setOffset}
-            onStatusUpdate={(id, newStatus) =>
-              setData(prev =>
-                prev.map(row => (row.id === id ? { ...row, status: newStatus } : row))
-              )
-            }
-            shopId={notice.shopId}
-            noticeId={notice.id}
-          />
-        </div>
+        <Table
+          headers={headers}
+          tableData={data}
+          userRole='employer'
+          total={data.length}
+          limit={limit}
+          offset={offset}
+          onPageChange={setOffset}
+          onStatusUpdate={(id, newStatus) =>
+            setData(prev => prev.map(row => (row.id === id ? { ...row, status: newStatus } : row)))
+          }
+          shopId={notice.shopId}
+          noticeId={notice.id}
+        />
       </Container>
-    </Wrapper>
+    </>
   );
 };
 
diff --git a/src/pages/employer/shops/[shopId]/notices/register/index.tsx b/src/pages/employer/shops/[shopId]/notices/register/index.tsx
index d4d98eb..0900a43 100644
--- a/src/pages/employer/shops/[shopId]/notices/register/index.tsx
+++ b/src/pages/employer/shops/[shopId]/notices/register/index.tsx
@@ -1,4 +1,4 @@
-import { Container, Wrapper } from '@/components/layout';
+import { Container } from '@/components/layout';
 import { Button, DateInput, Input, Modal, TimeInput } from '@/components/ui';
 import useAuth from '@/hooks/useAuth';
 import axiosInstance from '@/lib/axios';
@@ -92,117 +92,115 @@ const EmployerNoticeRegisterPage = () => {
   };
 
   return (
-    <Wrapper>
-      <Container isPage>
-        <p className='mb-4 text-heading-l font-bold'>공고 등록</p>
-        <form onSubmit={handleSubmit} className='flex w-full flex-col gap-4'>
-          <div className='grid grid-cols-2 gap-6'>
-            <Input
-              id='wage'
-              label='시급'
-              requiredMark
-              placeholder='12,500'
-              inputMode='numeric'
-              suffix='원'
-              value={wage}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                setWage(e.currentTarget.value.replace(/\D+/g, ''))
-              }
-            />
-            <Input
-              id='workhour'
-              label='업무 시간'
-              requiredMark
-              placeholder='4'
-              inputMode='numeric'
-              suffix='시간'
-              value={workhour?.toString() ?? ''}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                setWorkhour(Number(e.currentTarget.value))
+    <Container isPage>
+      <p className='mb-4 text-heading-l font-bold'>공고 등록</p>
+      <form onSubmit={handleSubmit} className='flex w-full flex-col gap-4'>
+        <div className='grid grid-cols-2 gap-6'>
+          <Input
+            id='wage'
+            label='시급'
+            requiredMark
+            placeholder='12,500'
+            inputMode='numeric'
+            suffix='원'
+            value={wage}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setWage(e.currentTarget.value.replace(/\D+/g, ''))
+            }
+          />
+          <Input
+            id='workhour'
+            label='업무 시간'
+            requiredMark
+            placeholder='4'
+            inputMode='numeric'
+            suffix='시간'
+            value={workhour?.toString() ?? ''}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setWorkhour(Number(e.currentTarget.value))
+            }
+          />
+          <DateInput
+            label='시작 날짜'
+            requiredMark
+            value={date ?? undefined}
+            onChange={selectedDate => {
+              setDate(selectedDate instanceof Date ? selectedDate : new Date(selectedDate));
+            }}
+          />
+          <TimeInput
+            label='시작 시간'
+            requiredMark
+            value={time ? { date: time, period: time.getHours() >= 12 ? '오후' : '오전' } : null}
+            onChange={(value: TimeValue | null) => {
+              if (value && value.date < new Date()) {
+                setPastTimeModal(true);
+                setTime(null);
+                return;
               }
-            />
-            <DateInput
-              label='시작 날짜'
-              requiredMark
-              value={date ?? undefined}
-              onChange={selectedDate => {
-                setDate(selectedDate instanceof Date ? selectedDate : new Date(selectedDate));
-              }}
-            />
-            <TimeInput
-              label='시작 시간'
-              requiredMark
-              value={time ? { date: time, period: time.getHours() >= 12 ? '오후' : '오전' } : null}
-              onChange={(value: TimeValue | null) => {
-                if (value && value.date < new Date()) {
-                  setPastTimeModal(true);
-                  setTime(null);
-                  return;
-                }
-                setTime(value?.date ?? null);
-              }}
-            />
-          </div>
-          <div className='flex flex-col gap-2'>
-            <label
-              htmlFor='description'
-              className={cn('text-base text-black', 'leading-[var(--lh-body-l)]')}
-            >
-              공고 설명 <span className='text-red-500'>*</span>
-            </label>
-            <textarea
-              id='description'
-              name='description'
-              className='rounded-md border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-400'
-              rows={4}
-              placeholder='공고에 대한 설명을 입력하세요.'
-              value={description}
-              onChange={e => setDescription(e.target.value)}
-            />
-          </div>
-          <Button
-            type='submit'
-            variant='primary'
-            size='lg'
-            className='mt-5 w-full'
-            disabled={!wage || !date || !time || !workhour || !description || pastTimeModal}
-          >
-            등록하기
-          </Button>
-        </form>
-
-        {pastTimeModal && (
-          <Modal
-            open={pastTimeModal}
-            title='과거 시간은 선택할 수 없습니다'
-            variant='warning'
-            primaryText='확인'
-            onPrimary={() => setPastTimeModal(false)}
-            onClose={() => setPastTimeModal(false)}
+              setTime(value?.date ?? null);
+            }}
           />
-        )}
-
-        {accessModal && (
-          <Modal
-            open={accessModal}
-            title='접근 권한이 없습니다'
-            variant='warning'
-            primaryText='확인'
-            onPrimary={() => router.replace('/')}
-            onClose={() => setAccessModal(false)}
+        </div>
+        <div className='flex flex-col gap-2'>
+          <label
+            htmlFor='description'
+            className={cn('text-base text-black', 'leading-[var(--lh-body-l)]')}
+          >
+            공고 설명 <span className='text-red-500'>*</span>
+          </label>
+          <textarea
+            id='description'
+            name='description'
+            className='rounded-md border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-400'
+            rows={4}
+            placeholder='공고에 대한 설명을 입력하세요.'
+            value={description}
+            onChange={e => setDescription(e.target.value)}
           />
-        )}
+        </div>
+        <Button
+          type='submit'
+          variant='primary'
+          size='lg'
+          className='mt-5 w-full'
+          disabled={!wage || !date || !time || !workhour || !description || pastTimeModal}
+        >
+          등록하기
+        </Button>
+      </form>
+
+      {pastTimeModal && (
+        <Modal
+          open={pastTimeModal}
+          title='과거 시간은 선택할 수 없습니다'
+          variant='warning'
+          primaryText='확인'
+          onPrimary={() => setPastTimeModal(false)}
+          onClose={() => setPastTimeModal(false)}
+        />
+      )}
 
+      {accessModal && (
         <Modal
-          open={successModal}
-          onClose={() => setSuccessModal(false)}
-          title='등록 완료'
-          variant='success'
+          open={accessModal}
+          title='접근 권한이 없습니다'
+          variant='warning'
           primaryText='확인'
-          onPrimary={modalHandler}
+          onPrimary={() => router.replace('/')}
+          onClose={() => setAccessModal(false)}
         />
-      </Container>
-    </Wrapper>
+      )}
+
+      <Modal
+        open={successModal}
+        onClose={() => setSuccessModal(false)}
+        title='등록 완료'
+        variant='success'
+        primaryText='확인'
+        onPrimary={modalHandler}
+      />
+    </Container>
   );
 };
 
diff --git a/src/pages/my-profile/index.tsx b/src/pages/my-profile/index.tsx
index fe8dd8a..9f34141 100644
--- a/src/pages/my-profile/index.tsx
+++ b/src/pages/my-profile/index.tsx
@@ -82,7 +82,7 @@ export default function MyProfileDetailPage() {
   const pagedRows = useMemo(() => currentRows.slice(offset, offset + limit), [currentRows, offset]);
 
   return (
-    <main className='mx-auto w-full max-w-[1440px] py-6 tablet:py-8'>
+    <>
       {/* ───────────────── 상단 영역 ───────────────── */}
       {profileIsEmpty ? (
         // ✅ 2중 컨테이너 제거: Frame만 단독 렌더
@@ -191,22 +191,20 @@ export default function MyProfileDetailPage() {
             />
           ) : (
             <Container as='section' isPage className='pt-0'>
-              <div className='mx-auto w-full lg:mx-auto lg:max-w-[1000px]'>
-                <Table
-                  headers={headers}
-                  tableData={pagedRows}
-                  userRole={userType}
-                  total={currentTotal}
-                  limit={limit}
-                  offset={offset}
-                  onPageChange={setOffset}
-                  onStatusUpdate={() => {}} // ✅ 이 페이지에서는 상태 변경 없음(필수 prop 무해한 no-op)
-                />
-              </div>
+              <Table
+                headers={headers}
+                tableData={pagedRows}
+                userRole={userType}
+                total={currentTotal}
+                limit={limit}
+                offset={offset}
+                onPageChange={setOffset}
+                onStatusUpdate={() => {}} // ✅ 이 페이지에서는 상태 변경 없음(필수 prop 무해한 no-op)
+              />
             </Container>
           )}
         </section>
       )}
-    </main>
+    </>
   );
 }