nbnloper / edupay-admin star
Forked from ldu0009 / edupay-admin
임동욱 임동욱 08-18
merge: AdminShell 레이아웃 구성
@8a5fa9677c0ba823eaf24a1245a725cbbdf5cf85
e04e73e
8a5fa96
app/(protected)/(basic)/_components/admin-footer.tsx
--- app/(protected)/(basic)/_components/admin-footer.tsx
+++ app/(protected)/(basic)/_components/admin-footer.tsx
@@ -1,9 +1,17 @@
 
-import { Footer } from '@/components/ui/footer';
 
+interface AdminFooterProps {
 
+  /** 배치·타이포를 셸이 정한다 — 풋터는 레이아웃의 일부라 자기 모양을 따로 갖지 않는다. */
 
+  className?: string;
 
+}
 
 
-export function AdminFooter() {
 
+/**
 
+ * Basic 레이아웃 풋터. `components/ui/footer`를 쓰지 않는다 — 그쪽은 Tailwind 제거 이후
 
+ * 무스타일이라 여기 넘겨받은 클래스로 셸이 직접 그린다(헤더가 components/ui/header를 떠난
 
+ * 것과 같은 이유다).
 
+ */
 
+export function AdminFooter({ className }: AdminFooterProps) {
 
   return (
 
-    <Footer className="text-center">
 
+    <footer className={className}>
 
       &copy; {new Date().getFullYear()} 에듀페이. All rights reserved.
 
-    </Footer>
 
+    </footer>
 
   );
 
 }
 
8a5fa96
app/(protected)/(basic)/_components/admin-shell.module.scss (added)
+++ app/(protected)/(basic)/_components/admin-shell.module.scss
@@ -0,0 +1,59 @@
+// Basic 레이아웃 셸 — 헤더·사이드바·본문·풋터의 배치만 책임진다.
+//
+// @fox에 넣지 않고 레이아웃 전용으로 둔다(사용자 확정) — 로고·프로필처럼 이 앱에만 있는
+// 구성을 전제로 한 배치라 포터블 디자인시스템에 들어갈 성격이 아니다. 대신 여백·색·서체는
+// 전부 @fox 토큰을 거치므로 없는 이름을 쓰면 빌드가 실패한다.
+//
+// **뷰포트를 채우고 그 안에서만 스크롤한다.** 헤더는 항상 보이고 사이드바와 본문이 각자
+// 스크롤한다 — 사이드바가 `overflow-y: auto`를 전제로 만들어져 있어(시안 높이 1251px이
+// 뷰포트보다 크다) 행 높이가 뷰포트에 묶여 있어야 그 스크롤이 동작한다.
+// globals.scss가 `html, body { block-size: 100% }`와 `body { display: flex }`를 깔아 두므로
+// 이 셸은 그 flex 자식으로서 남은 높이를 그대로 받는다.
+
+@use "@fox/styles/abstracts" as fox;
+
+.shell {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  // 자식이 넘칠 때 셸이 늘어나지 않게 한다 — 늘어나면 안쪽 스크롤 대신 페이지가 스크롤된다.
+  min-block-size: 0;
+}
+
+.body {
+  display: flex;
+  flex: 1;
+  min-block-size: 0;
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  // flex 자식의 기본 min-inline-size는 auto라, 넓은 표가 들어오면 줄어들지 않고 사이드바를
+  // 밀어낸다. 0으로 낮춰야 표 쪽이 스크롤된다.
+  min-inline-size: 0;
+  background: fox.color(background-default);
+  overflow-y: auto;
+}
+
+.main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  // 헤더의 좌우 여백과 같은 값이라 세로 기준선이 맞는다.
+  padding: fox.padding(8);
+}
+
+.footer {
+  flex-shrink: 0;
+  padding-block: fox.padding(6);
+  padding-inline: fox.padding(8);
+  border-block-start: fox.border(1) solid fox.color(border-neutral-subtler);
+  color: fox.color(font-neutral-subtler);
+  font-family: fox.font-family(body);
+  font-size: fox.font-size(label-sm);
+  line-height: 1.5;
+  letter-spacing: -0.025em;
+  text-align: center;
+}
e04e73e
8a5fa96
app/(protected)/(basic)/_components/admin-shell.tsx
--- app/(protected)/(basic)/_components/admin-shell.tsx
+++ app/(protected)/(basic)/_components/admin-shell.tsx
@@ -2,6 +2,7 @@
 
 
 import type { SidebarMenu } from '@/lib/domain/sidebar-menu';
 
 import { AdminFooter } from './admin-footer';
 
+import styles from './admin-shell.module.scss';
 
 import { AdminHeader } from './admin-header';
 
 import { AdminSidebar } from './admin-sidebar';
@@ -24,13 +25,13 @@
 
  */
 
 export function AdminShell({ children, adminName, menu }: AdminShellProps) {
 
   return (
 
-    <div className="flex min-h-screen flex-col">
 
+    <div className={styles.shell}>
 
       <AdminHeader adminName={adminName} />
 
-      <div className="flex flex-1">
 
+      <div className={styles.body}>
 
         <AdminSidebar menu={menu} />
 
-        <div className="flex flex-1 flex-col">
 
-          <main className="flex flex-1 flex-col">{children}</main>
 
-          <AdminFooter />
 
+        <div className={styles.content}>
 
+          <main className={styles.main}>{children}</main>
 
+          <AdminFooter className={styles.footer} />
 
         </div>
 
       </div>
 
     </div>
Add a comment
List