반응형 레이아웃 수정 및 시스템 컬러 폰트

src/app/(app)/cancellation/page.tsx

@@ -19,7 +19,7 @@ export default async function CancellationPage() {
 
   return (
     <>
-      <div className="mt-14 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+      <div className="flex flex-col gap-4 sm:mt-10 sm:flex-row sm:items-end sm:justify-between lg:mt-14">
         <Heading>Cancellation</Heading>
 
         <div className="flex w-full flex-col gap-2 sm:max-w-2xl sm:flex-row sm:items-center sm:justify-end">
@@ -67,7 +67,7 @@ export default async function CancellationPage() {
           {cancelledOrders.length > 0 ? (
             cancelledOrders.map((order) => (
               <TableRow key={order.id} href={order.cancellationUrl || order.url} title={`Order #${order.id} 취소 상세`}>
-                <TableCell className="font-medium text-zinc-950">{order.id}</TableCell>
+                <TableCell className="font-medium">{order.id}</TableCell>
                 {/* <TableCell className="text-zinc-500">{order.date}</TableCell> */}
                 <TableCell className="font-medium text-zinc-500">{order.cancellationDate}</TableCell>
                 {/* 처리 일자 추가 (값이 없으면 '-' 출력) */}
@@ -77,17 +77,17 @@ export default async function CancellationPage() {
                 <TableCell>
                   <div className="flex items-center gap-2">
                     <Avatar src={undefined} initials={order.customer.name[0]} className="size-6" />
-                    <span className="text-zinc-950">{order.customer.name}</span>
+                    <span className="">{order.customer.name}</span>
                   </div>
                 </TableCell>
                 <TableCell className="text-zinc-500">{order.event.productType}</TableCell>
                 <TableCell>
                   <div className="flex items-center gap-2">
                     <Avatar src={order.event.thumbUrl} className="size-6" />
-                    <span className="max-w-[150px] truncate text-zinc-950">{order.event.name}</span>
+                    <span className="max-w-[150px] truncate">{order.event.name}</span>
                   </div>
                 </TableCell>
-                <TableCell className="text-right font-semibold text-zinc-950">{order.amount.krw}</TableCell>
+                <TableCell className="text-right font-semibold ">{order.amount.krw}</TableCell>
                 <TableCell>
                   <Badge
                     color={

src/app/(app)/orders/page.tsx

@@ -1,7 +1,7 @@
 import { Stat } from '@/app/stat'
 import { Avatar } from '@/components/avatar'
 import { Divider } from '@/components/divider'
-import { Heading, Subheading } from '@/components/heading'
+import { Heading } from '@/components/heading'
 import { Input, InputGroup } from '@/components/input'
 import {
   Pagination,
@@ -26,8 +26,8 @@ export default async function Orders() {
 
   return (
     <>
-      <div className="mt-8 flex items-end justify-between">
+      <div className="flex flex-col gap-4 sm:mt-10 sm:flex-row sm:items-end sm:justify-between lg:mt-14">
-        <Subheading>Overview</Subheading>
+        <Heading>Overview</Heading>
         <div>
           <Select name="period">
             <option value="last_week">최근 1주일</option>
@@ -44,15 +44,17 @@ export default async function Orders() {
         <Stat title="총 주문(건)" value="1,030" change="+1.5%" />
       </div>
       <Divider className="mt-10" />
-      <div className="mt-14 flex items-end justify-between gap-4">
+      <div className="mt-14 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
         <Heading>Orders</Heading>
-        <div className="grid grid-cols-2 gap-2">
+        <div className="flex w-full flex-col gap-2 sm:max-w-2xl sm:flex-row sm:items-center sm:justify-end">
-          <Select name="order_type">
+          <div className="flex-1 sm:w-40 sm:flex-none">
-            <option value="all">전체 유형</option>
+            <Select name="order_type">
-            <option value="assets">애셋</option>
+              <option value="all">전체 유형</option>
-            <option value="textures">텍스처</option>
+              <option value="assets">애셋</option>
-          </Select>
+              <option value="textures">텍스처</option>
-          <InputGroup>
+            </Select>
+          </div>
+          <InputGroup className="w-full sm:flex-1">
             <MagnifyingGlassIcon />
             <Input name="search" placeholder="검색&hellip;" aria-label="Search" />
           </InputGroup>

src/app/(app)/page.tsx

@@ -1,6 +1,5 @@
 import { Stat } from '@/app/stat'
-import { Divider } from '@/components/divider'
+import { Heading } from '@/components/heading'
-import { Heading, Subheading } from '@/components/heading'
 import { Select } from '@/components/select'
 import { getRecentOrders } from '@/data'
 
@@ -9,63 +8,70 @@ export default async function Home() {
 
   return (
     <>
-      <Heading>Overview</Heading>
+      <div className="grid gap-16 sm:mt-12 lg:mt-14">
-      <div className="mt-18 flex items-end justify-between">
+        <div className="grid gap-4">
-        <Subheading>Orders Overview</Subheading>
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
-        <div>
+            <Heading>Orders Overview</Heading>
-          <Select name="period">
+            <div>
-            <option value="last_week">최근 1주일</option>
+              <Select name="period">
-            <option value="last_month">최근 1개월</option>
+                <option value="last_week">최근 1주일</option>
-            <option value="last_quarter">최근 3개월</option>
+                <option value="last_month">최근 1개월</option>
-            <option value="last_year">최근 1년</option>
+                <option value="last_quarter">최근 3개월</option>
-          </Select>
+                <option value="last_year">최근 1년</option>
+              </Select>
+            </div>
+          </div>
+          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
+            <Stat title="총 판매금액(원)" value="2,600,000" change="+3.5%" />
+            <Stat title="애셋 판매(원)" value="1,200,000" change="-0.5%" />
+            <Stat title="텍스처 판매(원)" value="1,400,000" change="+4.5%" />
+            <Stat title="총 주문(건)" value="1,030" change="+1.5%" />
+          </div>
+          {/* <Divider className="mt-10 mb-10" /> */}
         </div>
-      </div>
-      <div className="mt-4 grid gap-8 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
-        <Stat title="총 판매금액(원)" value="2,600,000" change="+3.5%" />
-        <Stat title="애셋 판매(원)" value="1,200,000" change="-0.5%" />
-        <Stat title="텍스처 판매(원)" value="1,400,000" change="+4.5%" />
-        <Stat title="총 주문(건)" value="1,030" change="+1.5%" />
-      </div>
-      {/* <Divider className="mt-10 mb-10" /> */}
 
-      <div className="mt-18 flex items-end justify-between">
+        <div className="grid gap-4">
-        <Subheading>Products Overview</Subheading>
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
-        <div>
+            <Heading>Products Overview</Heading>
-          <Select name="period">
+            <div>
-            <option value="last_week">최근 1주일</option>
+              <Select name="period">
-            <option value="last_month">최근 1개월</option>
+                <option value="last_week">최근 1주일</option>
-            <option value="last_quarter">최근 3개월</option>
+                <option value="last_month">최근 1개월</option>
-            <option value="last_year">최근 1년</option>
+                <option value="last_quarter">최근 3개월</option>
-          </Select>
+                <option value="last_year">최근 1년</option>
+              </Select>
+            </div>
+          </div>
+          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
+            <Stat title="애셋" value="21,200" change="-0.5%" />
+            <Stat title="텍스처" value="121,400" change="+4.5%" />
+            <Stat title="판매" value="231,030" change="+1.5%" />
+            <Stat title="미판매" value="352,630" change="+3.5%" />
+          </div>
+          {/* <Divider className="mt-10 mb-10" /> */}
         </div>
-      </div>
-      <div className="mt-4 grid gap-8 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
-        <Stat title="애셋" value="21,200" change="-0.5%" />
-        <Stat title="텍스처" value="121,400" change="+4.5%" />
-        <Stat title="판매" value="231,030" change="+1.5%" />
-        <Stat title="미판매" value="352,630" change="+3.5%" />
-      </div>
-      {/* <Divider className="mt-10 mb-10" /> */}
 
-      <div className="mt-18 flex items-end justify-between">
+        <div className="grid gap-4">
-        <Subheading>Users Overview</Subheading>
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
-        <div>
+            <Heading>Users Overview</Heading>
-          <Select name="period">
+            <div>
-            <option value="last_week">최근 1주일</option>
+              <Select name="period">
-            <option value="last_month">최근 1개월</option>
+                <option value="last_week">최근 1주일</option>
-            <option value="last_quarter">최근 3개월</option>
+                <option value="last_month">최근 1개월</option>
-            <option value="last_year">최근 1년</option>
+                <option value="last_quarter">최근 3개월</option>
-          </Select>
+                <option value="last_year">최근 1년</option>
+              </Select>
+            </div>
+          </div>
+          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
+            <Stat title="일반" value="3,630" change="+3.5%" />
+            <Stat title="기관" value="1,200" change="-0.5%" />
+            <Stat title="기업" value="1,400" change="+4.5%" />
+            <Stat title="교육" value="1,030" change="+1.5%" />
+          </div>
+          {/* <Divider className="mt-10 mb-10" /> */}
         </div>
       </div>
-      <div className="mt-4 grid gap-8 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
-        <Stat title="일반" value="3,630" change="+3.5%" />
-        <Stat title="기관" value="1,200" change="-0.5%" />
-        <Stat title="기업" value="1,400" change="+4.5%" />
-        <Stat title="교육" value="1,030" change="+1.5%" />
-      </div>
-      {/* <Divider className="mt-10 mb-10" /> */}
     </>
   )
 }

src/app/(app)/products/ProductsClient.tsx

@@ -32,7 +32,7 @@ export default function ProductsClient({ products }: { products: any[] }) {
 
   return (
     <>
-      <div className="mt-14 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+      <div className="flex flex-col gap-4 sm:mt-10 sm:flex-row sm:items-end sm:justify-between lg:mt-14">
         <Heading>Products</Heading>
 
         <div className="flex w-full flex-col gap-2 sm:max-w-4xl sm:flex-row sm:items-center sm:justify-end">

src/app/(app)/users/UsersClient.tsx

@@ -12,7 +12,7 @@ import {
   DropdownMenu,
   DropdownSection,
 } from '@/components/dropdown'
-import { Heading, Subheading } from '@/components/heading'
+import { Heading } from '@/components/heading'
 import { Input, InputGroup } from '@/components/input'
 import { Link } from '@/components/link'
 import {
@@ -43,8 +43,8 @@ export default function UsersClient({ initialUsers }: { initialUsers: any[] }) {
 
   return (
     <>
-      <div className="mt-8 flex items-end justify-between">
+      <div className="flex flex-col gap-4 sm:mt-10 sm:flex-row sm:items-end sm:justify-between lg:mt-14">
-        <Subheading>Overview</Subheading>
+        <Heading>Overview</Heading>
         <div>
           <Select name="period">
             <option value="last_week">최근 1주일</option>
@@ -64,17 +64,19 @@ export default function UsersClient({ initialUsers }: { initialUsers: any[] }) {
 
       <Divider className="mt-10" />
 
-      <div className="mt-14 flex items-end justify-between gap-4">
+      <div className="mt-14 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
         <Heading>Users</Heading>
-        <div className="flex max-w-xl justify-end gap-2">
+        <div className="flex w-full flex-col gap-2 sm:max-w-2xl sm:flex-row sm:items-center sm:justify-end">
-          <Select name="user_type" className="flex-1">
+          <div className="flex-1 sm:w-40 sm:flex-none">
-            <option value="all">전체 유형</option>
+            <Select name="user_type">
-            <option value="normal">일반</option>
+              <option value="all">전체 유형</option>
-            <option value="corp">기업</option>
+              <option value="normal">일반</option>
-            <option value="org">기관</option>
+              <option value="corp">기업</option>
-            <option value="edu">교육</option>ㄴ
+              <option value="org">기관</option>
-          </Select>
+              <option value="edu">교육</option>ㄴ
-          <InputGroup className="flex-2">
+            </Select>
+          </div>
+          <InputGroup className="w-full sm:flex-1">
             <MagnifyingGlassIcon />
             <Input name="search" placeholder="사용자 검색&hellip;" aria-label="Search" />
           </InputGroup>
@@ -108,7 +110,7 @@ export default function UsersClient({ initialUsers }: { initialUsers: any[] }) {
                     initials={!user.avatar ? user.name[0] : undefined}
                     className="size-8"
                   />
-                  <span className="font-medium text-zinc-950">{user.name}</span>
+                  <span className="font-medium">{user.name}</span>
                 </div>
               </TableCell>
               <TableCell>