nbnloper / edupay-admin star
Forked from ldu0009 / edupay-admin
임동욱 임동욱 08-18
feat: 헤더 로고를 시안의 심볼 + "FOX PAY ADMIN"으로 교체 
시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) logo 5199:9639.

헤더 구현 때는 28px 정사각 심볼 자산이 없어 170×62 워드마크로 대신했는데, 이번 시안이 그
심볼을 제공한다. export SVG를 public/images/logo-foxpay-symbol.svg로 반입했다 — Figma 자산
URL은 7일 뒤 만료되므로 원본 바이트를 저장소에 둔다.

- 글자를 "에듀페이 관리자" 한 덩어리에서 시안의 2색 구성으로 나눴다. 제품명 "FOX PAY"는
  ExtraBold + font-neutral-strong, 역할 "ADMIN"은 SemiBold + font-neutral-subtler다. 시안이
  리터럴로 적은 #1E2124·#8A949E가 각각 그 토큰의 라이트 값과 같다.
- 심볼은 가로세로를 둘 다 적었다. ``의 width/height 속성이 만드는 1:1 기본 비율 때문에
  한쪽만 적으면 28.12가 28로 눌린다.
- 심볼 alt는 비웠다 — 바로 옆 글자가 같은 내용을 이미 말하므로 채우면 두 번 읽힌다.

검증 — 실측이 시안과 일치한다. 심볼 28.12×28, gap 8, "FOX PAY" #1E2124/800/24px,
"ADMIN" #8A949E/600/24px, 헤더 높이 64 유지.

기존 logo-foxpay.svg는 그대로 둔다 — auth-card와 components/ui/header가 아직 쓴다.

Co-Authored-By: Claude Opus 5
@8087a74e9766109c95201761af291233f1d61630
5dd7273
8087a74
app/(protected)/(basic)/_components/admin-header.module.scss
--- app/(protected)/(basic)/_components/admin-header.module.scss
+++ app/(protected)/(basic)/_components/admin-header.module.scss
@@ -22,8 +22,7 @@
 
 }
 
 
 // ── 로고 ────────────────────────────────────────────────────────────────────
 
-// 시안은 28px 정사각 심볼 + 텍스트지만, 에듀페이 로고는 170×62 워드마크다. 높이만 28px로
 
-// 맞추고 폭은 비율대로 둔다(사용자 확정).
 
+// 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) logo 5199:9639 — 정사각 심볼 + 2색 글자.
 
 .logo {
 
   display: flex;
 
   align-items: center;
@@ -32,12 +31,13 @@
 
 
 .logoMark {
 
   display: block;
 
+  // 시안 28.12×28. 가로세로를 둘 다 적어야 `<img>`의 width/height 속성에서 나오는 1:1
 
+  // 기본 비율에 눌리지 않는다. Figma가 변수로 export하지 않는 값이다.
 
+  inline-size: 2.812rem;
 
   block-size: 2.8rem;
 
-  inline-size: auto;
 
 }
 
 
 .title {
 
-  color: fox.color(font-neutral-default);
 
   font-family: fox.font-family(title);
 
   // 시안 24px / letter-spacing -0.6px(= -0.025em). Figma가 변수로 export하지 않는다.
 
   font-size: 2.4rem;
@@ -47,6 +47,17 @@
 
   white-space: nowrap;
 
 }
 
 
+// 제품명은 진하게, 역할(ADMIN)은 흐리게 — 시안이 두 색을 나눠 쓴다.
 
+.titleStrong {
 
+  color: fox.color(font-neutral-strong);
 
+  font-weight: fox.font-weight(bold);
 
+}
 
+
 
+.titleSub {
 
+  color: fox.color(font-neutral-subtler);
 
+  font-weight: fox.font-weight(medium);
 
+}
 
+
 
 // ── 우측 기능 영역 ──────────────────────────────────────────────────────────
 
 .fnc {
 
   display: flex;
5dd7273
8087a74
app/(protected)/(basic)/_components/admin-header.tsx
--- app/(protected)/(basic)/_components/admin-header.tsx
+++ app/(protected)/(basic)/_components/admin-header.tsx
@@ -22,7 +22,8 @@
 
  * 버튼 3개와 프로필 pill이 온다.
 
  *
 
  * 시안과 다른 점 셋(전부 사용자 확정):
 
- *  - 로고: 시안은 28px 정사각 심볼이지만 에듀페이 로고가 170×62 워드마크라 높이만 맞췄다.
 
+ *  - 로고: 시안(관리자페이지 QsFVFFUKGH68xAPVkF3SJ9 logo 5199:9639)의 정사각 심볼과
 
+ *    "FOX PAY ADMIN" 2색 글자를 그대로 쓴다.
 
  *  - 사이드바 토글 버튼을 뺐다 — 시안에 없다.
 
  *  - 프로필 pill을 눌러 로그아웃한다. 시안에 로그아웃 자리가 없는데 다른 경로도 없어서,
 
  *    CaretDown이 이미 "열린다"고 알리고 있는 이 자리에 메뉴를 붙였다.
@@ -63,15 +64,19 @@
 
   return (
 
     <header className={styles.header}>
 
       <div className={styles.logo}>
 
+        {/* 옆 글자가 같은 내용을 이미 말하므로 장식으로 둔다 — alt를 채우면 두 번 읽힌다. */}
 
         <Image
 
-          src="/images/logo-foxpay.svg"
 
-          alt="에듀페이"
 
-          width={170}
 
-          height={62}
 
+          src="/images/logo-foxpay-symbol.svg"
 
+          alt=""
 
+          width={28}
 
+          height={28}
 
           className={styles.logoMark}
 
           priority
 
         />
 
-        <span className={styles.title}>에듀페이 관리자</span>
 
+        <span className={styles.title}>
 
+          <span className={styles.titleStrong}>FOX PAY</span>{' '}
 
+          <span className={styles.titleSub}>ADMIN</span>
 
+        </span>
 
       </div>
 
 
       <div className={styles.fnc}>
 
8087a74
public/images/logo-foxpay-symbol.svg (added)
+++ public/images/logo-foxpay-symbol.svg
@@ -0,0 +1,13 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="28.12" height="28" viewBox="0 0 28.12 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="symbol" clip-path="url(#clip0_0_4)">
+<g id="Vector">
+<path d="M14.0625 0C6.29182 0 -0.0064814 6.27675 5.0056e-06 14.0129C0.00649141 21.7491 6.29182 28 14.0625 28C16.7285 28 19.2192 27.2638 21.3403 25.9788C21.5738 25.8367 21.8333 25.7657 22.0992 25.7657C22.1965 25.7657 22.3003 25.7786 22.3976 25.7979L25.991 26.547C26.03 26.5535 26.0689 26.5599 26.1078 26.5599C26.4581 26.5599 26.737 26.2371 26.6591 25.8819L25.9067 22.3044C25.8289 21.9428 25.8937 21.5682 26.0883 21.2518C27.3791 19.1402 28.1186 16.654 28.1186 14.0064C28.1251 6.26383 21.8462 0.00645756 14.0755 0C14.0755 0 14.069 0 14.0625 0Z" fill="#655DC6"/>
+<path d="M18.3372 7.69741L14.1859 11.559C14.1145 11.6236 14.0043 11.6236 13.9329 11.559L9.7816 7.69741C9.6843 7.607 9.54809 7.55534 9.40539 7.55534H8.91891C8.82161 7.55534 8.74377 7.62638 8.74377 7.72324V16.6024C8.74377 16.7315 8.80215 16.8607 8.89945 16.9511L13.9394 21.6393C14.0107 21.7039 14.121 21.7039 14.1924 21.6393L19.2323 16.9511C19.3296 16.8607 19.388 16.7315 19.388 16.6024V7.72324C19.388 7.63283 19.3101 7.55534 19.2128 7.55534H18.7264C18.5837 7.55534 18.4474 7.607 18.3501 7.69741H18.3372Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_0_4">
+<rect width="28.12" height="28" fill="white"/>
+</clipPath>
+</defs>
+</svg>
Add a comment
List