임동욱
08-18
merge: 헤더 로고 교체
@25f47ea8b2ced8502596f92ee211ecd568607d70
--- app/(protected)/(basic)/_components/admin-header.module.scss
+++ app/(protected)/(basic)/_components/admin-header.module.scss
... | ... | @@ -22,8 +22,7 @@ |
| 22 | 22 |
} |
| 23 | 23 |
|
| 24 | 24 |
// ── 로고 ──────────────────────────────────────────────────────────────────── |
| 25 |
-// 시안은 28px 정사각 심볼 + 텍스트지만, 에듀페이 로고는 170×62 워드마크다. 높이만 28px로 |
|
| 26 |
-// 맞추고 폭은 비율대로 둔다(사용자 확정). |
|
| 25 |
+// 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) logo 5199:9639 — 정사각 심볼 + 2색 글자. |
|
| 27 | 26 |
.logo {
|
| 28 | 27 |
display: flex; |
| 29 | 28 |
align-items: center; |
... | ... | @@ -32,12 +31,13 @@ |
| 32 | 31 |
|
| 33 | 32 |
.logoMark {
|
| 34 | 33 |
display: block; |
| 34 |
+ // 시안 28.12×28. 가로세로를 둘 다 적어야 `<img>`의 width/height 속성에서 나오는 1:1 |
|
| 35 |
+ // 기본 비율에 눌리지 않는다. Figma가 변수로 export하지 않는 값이다. |
|
| 36 |
+ inline-size: 2.812rem; |
|
| 35 | 37 |
block-size: 2.8rem; |
| 36 |
- inline-size: auto; |
|
| 37 | 38 |
} |
| 38 | 39 |
|
| 39 | 40 |
.title {
|
| 40 |
- color: fox.color(font-neutral-default); |
|
| 41 | 41 |
font-family: fox.font-family(title); |
| 42 | 42 |
// 시안 24px / letter-spacing -0.6px(= -0.025em). Figma가 변수로 export하지 않는다. |
| 43 | 43 |
font-size: 2.4rem; |
... | ... | @@ -47,6 +47,17 @@ |
| 47 | 47 |
white-space: nowrap; |
| 48 | 48 |
} |
| 49 | 49 |
|
| 50 |
+// 제품명은 진하게, 역할(ADMIN)은 흐리게 — 시안이 두 색을 나눠 쓴다. |
|
| 51 |
+.titleStrong {
|
|
| 52 |
+ color: fox.color(font-neutral-strong); |
|
| 53 |
+ font-weight: fox.font-weight(bold); |
|
| 54 |
+} |
|
| 55 |
+ |
|
| 56 |
+.titleSub {
|
|
| 57 |
+ color: fox.color(font-neutral-subtler); |
|
| 58 |
+ font-weight: fox.font-weight(medium); |
|
| 59 |
+} |
|
| 60 |
+ |
|
| 50 | 61 |
// ── 우측 기능 영역 ────────────────────────────────────────────────────────── |
| 51 | 62 |
.fnc {
|
| 52 | 63 |
display: flex; |
--- app/(protected)/(basic)/_components/admin-header.tsx
+++ app/(protected)/(basic)/_components/admin-header.tsx
... | ... | @@ -22,7 +22,8 @@ |
| 22 | 22 |
* 버튼 3개와 프로필 pill이 온다. |
| 23 | 23 |
* |
| 24 | 24 |
* 시안과 다른 점 셋(전부 사용자 확정): |
| 25 |
- * - 로고: 시안은 28px 정사각 심볼이지만 에듀페이 로고가 170×62 워드마크라 높이만 맞췄다. |
|
| 25 |
+ * - 로고: 시안(관리자페이지 QsFVFFUKGH68xAPVkF3SJ9 logo 5199:9639)의 정사각 심볼과 |
|
| 26 |
+ * "FOX PAY ADMIN" 2색 글자를 그대로 쓴다. |
|
| 26 | 27 |
* - 사이드바 토글 버튼을 뺐다 — 시안에 없다. |
| 27 | 28 |
* - 프로필 pill을 눌러 로그아웃한다. 시안에 로그아웃 자리가 없는데 다른 경로도 없어서, |
| 28 | 29 |
* CaretDown이 이미 "열린다"고 알리고 있는 이 자리에 메뉴를 붙였다. |
... | ... | @@ -63,15 +64,19 @@ |
| 63 | 64 |
return ( |
| 64 | 65 |
<header className={styles.header}>
|
| 65 | 66 |
<div className={styles.logo}>
|
| 67 |
+ {/* 옆 글자가 같은 내용을 이미 말하므로 장식으로 둔다 — alt를 채우면 두 번 읽힌다. */}
|
|
| 66 | 68 |
<Image |
| 67 |
- src="/images/logo-foxpay.svg" |
|
| 68 |
- alt="에듀페이" |
|
| 69 |
- width={170}
|
|
| 70 |
- height={62}
|
|
| 69 |
+ src="/images/logo-foxpay-symbol.svg" |
|
| 70 |
+ alt="" |
|
| 71 |
+ width={28}
|
|
| 72 |
+ height={28}
|
|
| 71 | 73 |
className={styles.logoMark}
|
| 72 | 74 |
priority |
| 73 | 75 |
/> |
| 74 |
- <span className={styles.title}>에듀페이 관리자</span>
|
|
| 76 |
+ <span className={styles.title}>
|
|
| 77 |
+ <span className={styles.titleStrong}>FOX PAY</span>{' '}
|
|
| 78 |
+ <span className={styles.titleSub}>ADMIN</span>
|
|
| 79 |
+ </span> |
|
| 75 | 80 |
</div> |
| 76 | 81 |
|
| 77 | 82 |
<div className={styles.fnc}>
|
+++ public/images/logo-foxpay-symbol.svg
... | ... | @@ -0,0 +1,13 @@ |
| 1 | +<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"> | |
| 2 | +<g id="symbol" clip-path="url(#clip0_0_4)"> | |
| 3 | +<g id="Vector"> | |
| 4 | +<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"/> | |
| 5 | +<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"/> | |
| 6 | +</g> | |
| 7 | +</g> | |
| 8 | +<defs> | |
| 9 | +<clipPath id="clip0_0_4"> | |
| 10 | +<rect width="28.12" height="28" fill="white"/> | |
| 11 | +</clipPath> | |
| 12 | +</defs> | |
| 13 | +</svg> |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?