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

2026-02-26 17:08:23 +00:00 · 2026-02-26 17:08:23 +00:00 · ec9511ecd2
commit ec9511ecd2
parent 4a5af73f54
5 changed files with 94 additions and 84 deletions
--- a/src/app/(app)/cancellation/page.tsx
+++ b/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={
--- a/src/app/(app)/orders/page.tsx
+++ b/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">
-        <Subheading>Overview</Subheading>
+      <div className="flex flex-col gap-4 sm:mt-10 sm:flex-row sm:items-end sm:justify-between lg:mt-14">
+        <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">
+          <div className="flex-1 sm:w-40 sm:flex-none">
            <Select name="order_type">
              <option value="all">전체 유형</option>
              <option value="assets">애셋</option>
              <option value="textures">텍스처</option>
            </Select>
-          <InputGroup>
+          </div>
+          <InputGroup className="w-full sm:flex-1">
            <MagnifyingGlassIcon />
            <Input name="search" placeholder="검색&hellip;" aria-label="Search" />
          </InputGroup>
--- a/src/app/(app)/page.tsx
+++ b/src/app/(app)/page.tsx
@ -1,6 +1,5 @@
 import { Stat } from '@/app/stat'
-import { Divider } from '@/components/divider'
-import { Heading, Subheading } from '@/components/heading'
+import { Heading } from '@/components/heading'
 import { Select } from '@/components/select'
 import { getRecentOrders } from '@/data'

@ -9,9 +8,10 @@ export default async function Home() {

  return (
    <>
-      <Heading>Overview</Heading>
-      <div className="mt-18 flex items-end justify-between">
-        <Subheading>Orders Overview</Subheading>
+      <div className="grid gap-16 sm:mt-12 lg:mt-14">
+        <div className="grid gap-4">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+            <Heading>Orders Overview</Heading>
            <div>
              <Select name="period">
                <option value="last_week">최근 1주일</option>
@ -21,16 +21,18 @@ export default async function Home() {
              </Select>
            </div>
          </div>
-      <div className="mt-4 grid gap-8 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
+          <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 className="mt-18 flex items-end justify-between">
-        <Subheading>Products Overview</Subheading>
+        <div className="grid gap-4">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+            <Heading>Products Overview</Heading>
            <div>
              <Select name="period">
                <option value="last_week">최근 1주일</option>
@ -40,16 +42,18 @@ export default async function Home() {
              </Select>
            </div>
          </div>
-      <div className="mt-4 grid gap-8 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
+          <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 className="mt-18 flex items-end justify-between">
-        <Subheading>Users Overview</Subheading>
+        <div className="grid gap-4">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+            <Heading>Users Overview</Heading>
            <div>
              <Select name="period">
                <option value="last_week">최근 1주일</option>
@ -59,13 +63,15 @@ export default async function Home() {
              </Select>
            </div>
          </div>
-      <div className="mt-4 grid gap-8 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
+          <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>
    </>
  )
 }
--- a/src/app/(app)/products/ProductsClient.tsx
+++ b/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">
--- a/src/app/(app)/users/UsersClient.tsx
+++ b/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">
-        <Subheading>Overview</Subheading>
+      <div className="flex flex-col gap-4 sm:mt-10 sm:flex-row sm:items-end sm:justify-between lg:mt-14">
+        <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">
-          <Select name="user_type" className="flex-1">
+        <div className="flex w-full flex-col gap-2 sm:max-w-2xl sm:flex-row sm:items-center sm:justify-end">
+          <div className="flex-1 sm:w-40 sm:flex-none">
+            <Select name="user_type">
              <option value="all">전체 유형</option>
              <option value="normal">일반</option>
              <option value="corp">기업</option>
              <option value="org">기관</option>
              <option value="edu">교육</option>ㄴ
            </Select>
-          <InputGroup className="flex-2">
+          </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>