@madeinbruno/atelier 0.2.0 → 0.5.0

package/README.md

@@ -14,7 +14,7 @@ React 18 이상이 필요해요.
 
 ### `Tag` — 공용 푸터
 
-흰 옷 택(행택) 모양의 푸터예요. 택 위쪽에 한 줄 박음질이 있고, 옷 택처럼 `MADE IN BRUNO / STYLE / SIZE / CONTACT`와 madeinbruno.com 링크가 들어가요.
+흰 옷 택(행택) 모양의 푸터예요. 택 위쪽에 한 줄 박음질이 있고, 픽셀 글씨 `madeinbruno`, `SERVICE / CONTACT`가 들어가요 (`href`를 주면 밑줄 친 링크도).
 
 ```tsx
 import { Tag } from '@madeinbruno/atelier';
@@ -27,15 +27,17 @@ export default function Footer() {
 
 | prop | 기본값 | 설명 |
 |---|---|---|
-| `service` (필수) | | 택의 STYLE 줄. 서비스 이름 |
+| `service` (필수) | | 택의 SERVICE 줄. 서비스 이름 |
 | `email` | `pbk575@gmail.com` | CONTACT 줄 (mailto 링크) |
-| `href` | `https://madeinbruno.com` | 택 아래 링크 (밑줄 친 주소) |
+| `href` | 없음 | 택 아래 링크 (밑줄 친 주소). 주지 않으면 링크를 그리지 않아요. madeinbruno.com이 생기면 기본값으로 넣을 예정 |
 | `since` | `EST. 2026` | 택 오른쪽 위 작은 글씨 |
 | `eyebrow`, `message` | "Thanks for stopping by", "이 사이트도 madeinbruno에서 만들었어요." | 택 왼쪽 글. 둘 다 비우면 택만 가운데에 |
 | `background` | `#f4f1ea` | 푸터 바탕. 서비스 바탕색에 맞추기 |
 | `stitch` | `#9a948b` (회색) | 박음질 색 |
 
-색은 CSS 변수(`--mib-ground`, `--mib-stitch`, `--mib-ink`)로도 바꿀 수 있어요. 클래스는 모두 `mib-`로 시작해 서비스 스타일과 겹치지 않아요. 글꼴(Archivo, IBM Plex Mono)은 `styles.css`가 Google Fonts에서 불러와요.
+`madeinbruno` 글씨는 [Banquise](https://gitlab.com/bonjour-monde/fonderie/banquise-typeface)(Bonjour Monde, SIL Open Font License 1.1)로 쓴 글자를 SVG 그림으로 옮긴 거예요. 이 한 단어에만 쓰는 폰트라 폰트 파일을 싣지 않아요 (15KB → 1KB 미만, 글씨가 늦게 바뀌는 깜빡임도 없음).
+
+색은 CSS 변수(`--mib-ground`, `--mib-stitch`, `--mib-ink`)로도 바꿀 수 있어요. 클래스는 모두 `mib-`로 시작해 서비스 스타일과 겹치지 않아요. 글꼴(IBM Plex Mono, 택 옆 글의 Archivo)은 `styles.css`가 Google Fonts에서 불러와요.
 
 ## 개발
 
@@ -49,6 +51,10 @@ pnpm --filter @madeinbruno/atelier dev     # 고칠 때마다 다시 빌드
 GitHub Actions(`.github/workflows/publish-atelier.yml`)가 배포해요.
 
 1. 고친 뒤 `package.json`의 `version`을 올려서 `main`에 푸시해요 (버전을 안 올리면 건너뛰어요).
+
+   버전은 이렇게 올려요:
+   - **패치** (0.4.0 → 0.4.1): 모양·문구·여백 수정, 버그 수정. 쓰는 쪽 코드는 그대로.
+   - **마이너** (0.4.x → 0.5.0): 새 prop·새 컴포넌트처럼 기능이 늘어날 때. 1.0 전에는 쓰는 쪽 코드를 고쳐야 하는 변경(prop 이름 변경·삭제)도 마이너로 올리고, 1.0 이후에는 메이저로 올려요.
 2. Actions가 빌드해서 npm 승인 대기열(staged)에 올려요.
 3. npmjs.com에서 그 버전을 승인(2단계 인증)하면 공개돼요.
 

package/dist/index.d.ts

@@ -2,11 +2,12 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 type TagProps = {
-    /** 이 서비스의 이름. 택의 STYLE 줄에 들어간다 (예: "hangoutwithme"). */
+    /** 이 서비스의 이름. 택의 SERVICE 줄에 들어간다 (예: "hangoutwithme"). */
     service: string;
     /** 연락받을 이메일. 택의 CONTACT 줄에 mailto 링크로 들어간다. */
     email?: string;
-    /** 택 아래 링크(밑줄 친 주소)가 가는 곳. */
+    /** 택 아래 링크(밑줄 친 주소)가 가는 곳. 주지 않으면 링크를 그리지 않는다.
+     *  madeinbruno.com이 아직 없어서 기본은 링크 없음. 사이트가 생기면 기본값을 'https://madeinbruno.com'으로 바꾼다. */
     href?: string;
     /** 택 오른쪽 위의 작은 글씨. */
     since?: string;
@@ -19,12 +20,6 @@ type TagProps = {
     stitch?: string;
     className?: string;
 };
-/**
- * madeinbruno 공용 푸터: 흰 옷 택(행택).
- * 택 위쪽에 한 줄 박음질, 모서리를 깎은 모양이고, 옷 택 형식으로
- * MADE IN BRUNO / STYLE(서비스 이름) / SIZE / CONTACT(이메일)와 madeinbruno.com 링크를 담는다.
- * 스타일은 '@madeinbruno/atelier/styles.css'를 한 번 불러와야 적용된다.
- */
 declare function Tag({ service, email, href, since, eyebrow, message, background, stitch, className, }: TagProps): react.JSX.Element;
 
 export { Tag, type TagProps };

package/dist/index.js

@@ -1,9 +1,10 @@
 // src/Tag.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+var WORDMARK = "M18 0h2v2h-2zM27 0h2v1h-2zM36 0h2v2h-2zM0 2h1v1h-1zM2 2h2v1h-2zM5 2h2v1h-2zM9 2h4v1h-4zM17 2h3v1h-3zM22 2h3v1h-3zM27 2h2v6h-2zM30 2h1v1h-1zM32 2h2v1h-2zM36 2h4v1h-4zM42 2h1v1h-1zM44 2h2v1h-2zM50 2h2v5h-2zM53 2h1v1h-1zM55 2h2v1h-2zM60 2h3v1h-3zM0 3h2v5h-2zM3 3h2v5h-2zM6 3h2v5h-2zM9 3h2v1h-2zM12 3h2v2h-2zM15 3h2v4h-2zM18 3h2v4h-2zM21 3h2v1h-2zM24 3h2v1h-2zM30 3h2v5h-2zM33 3h2v5h-2zM36 3h2v4h-2zM39 3h2v4h-2zM42 3h4v1h-4zM47 3h2v4h-2zM53 3h2v5h-2zM56 3h2v5h-2zM62 3h2v4h-2zM21 4h5v1h-5zM42 4h2v4h-2zM59 4h2v3h-2zM9 5h5v1h-5zM21 5h2v2h-2zM9 6h2v1h-2zM12 6h2v1h-2zM25 6h1v1h-1zM10 7h2v1h-2zM13 7h1v1h-1zM16 7h2v1h-2zM19 7h1v1h-1zM23 7h2v1h-2zM36 7h1v1h-1zM38 7h1v1h-1zM48 7h2v1h-2zM51 7h1v1h-1zM61 7h2v1h-2z";
 function Tag({
   service,
   email = "pbk575@gmail.com",
-  href = "https://madeinbruno.com",
+  href,
   since = "EST. 2026",
   eyebrow = "Thanks for stopping by",
   message = `\uC774 \uC0AC\uC774\uD2B8\uB3C4 madeinbruno\uC5D0\uC11C \uB9CC\uB4E4\uC5C8\uC5B4\uC694.`,
@@ -16,7 +17,7 @@ function Tag({
     ...stitch ? { "--mib-stitch": stitch } : {}
   };
   const hasMessage = Boolean(eyebrow || message);
-  const linkLabel = href.replace(/^https?:\/\//, "").replace(/\/$/, "");
+  const linkLabel = href?.replace(/^https?:\/\//, "").replace(/\/$/, "");
   return /* @__PURE__ */ jsx("footer", { className: ["mib-footer", className].filter(Boolean).join(" "), style, children: /* @__PURE__ */ jsxs("div", { className: hasMessage ? "mib-footer__inner" : "mib-footer__inner mib-footer__inner--solo", children: [
     hasMessage && /* @__PURE__ */ jsxs("div", { className: "mib-footer__message", children: [
       eyebrow && /* @__PURE__ */ jsx("p", { className: "mib-footer__eyebrow", children: eyebrow }),
@@ -25,18 +26,16 @@ function Tag({
     /* @__PURE__ */ jsx("div", { className: "mib-tag-hang", children: /* @__PURE__ */ jsx("div", { className: "mib-tag", children: /* @__PURE__ */ jsxs("div", { className: "mib-tag__card", children: [
       /* @__PURE__ */ jsx("span", { className: "mib-tag__stitch", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxs("div", { className: "mib-tag__head", children: [
-        /* @__PURE__ */ jsx("span", { className: "mib-tag__brand", children: "MADE IN BRUNO" }),
+        /* @__PURE__ */ jsx("svg", { className: "mib-tag__brand", viewBox: "0 0 64 8", role: "img", "aria-label": "madeinbruno", children: /* @__PURE__ */ jsx("path", { d: WORDMARK }) }),
         /* @__PURE__ */ jsx("span", { className: "mib-tag__since", children: since })
       ] }),
       /* @__PURE__ */ jsxs("dl", { className: "mib-tag__specs", children: [
-        /* @__PURE__ */ jsx("dt", { children: "STYLE" }),
+        /* @__PURE__ */ jsx("dt", { children: "SERVICE" }),
         /* @__PURE__ */ jsx("dd", { children: service }),
-        /* @__PURE__ */ jsx("dt", { children: "SIZE" }),
-        /* @__PURE__ */ jsx("dd", { children: "ONE OF ONE" }),
         /* @__PURE__ */ jsx("dt", { children: "CONTACT" }),
         /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("a", { href: `mailto:${email}`, children: email }) })
       ] }),
-      /* @__PURE__ */ jsxs("a", { className: "mib-tag__link", href, children: [
+      href && /* @__PURE__ */ jsxs("a", { className: "mib-tag__link", href, children: [
         linkLabel,
         " \u2192"
       ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madeinbruno/atelier",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "description": "madeinbruno.com 서비스들이 같이 쓰는 공용 컴포넌트 (옷 만드는 작업실 컨셉: 택, 라벨, 도장…)",
   "license": "MIT",
   "author": "codingbotPark <pbk575@gmail.com>",

package/styles.css

@@ -1,7 +1,7 @@
 /* @madeinbruno/atelier 공용 스타일. 쓰는 쪽에서 한 번만 불러온다: import '@madeinbruno/atelier/styles.css'
    클래스 이름은 모두 mib- 로 시작해 서비스 자체 스타일과 겹치지 않는다.
    색은 CSS 변수로 바꿀 수 있다: --mib-ground(푸터 바탕), --mib-stitch(박음질), --mib-ink(글씨). */
-@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;800&family=IBM+Plex+Mono:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500&family=IBM+Plex+Mono:wght@400;500&display=swap');
 
 /* ───────── Tag: 흰 옷 택 푸터 ───────── */
 
@@ -12,9 +12,8 @@
   --mib-muted: #6b655c;
   box-sizing: border-box;
   width: 100%;
-  overflow: hidden;
+  /* 넘치는 걸 자르지 않는다: 자르면 택 위로 퍼지는 그림자가 푸터 윗변에서 끊겨, 푸터 자리만 바탕색이 달라 보인다 */
   padding: 0 24px;
-  border-top: 1px solid rgba(31, 29, 26, 0.12);
   background: var(--mib-ground);
   font-family: 'IBM Plex Mono', ui-monospace, monospace;
   color: var(--mib-ink);
@@ -38,12 +37,12 @@
 .mib-footer__inner {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
+  /* 택은 페이지 맨 아래 끝에 붙는다 (아래 여백 없이) */
+  align-items: flex-end;
   justify-content: space-between;
   gap: 32px 64px;
   max-width: 1120px;
   margin: 0 auto;
-  padding-bottom: 56px;
 }
 
 .mib-footer__inner--solo {
@@ -80,11 +79,12 @@
 .mib-tag-hang {
   position: relative;
   flex: 0 1 470px;
-  padding-top: 56px;
+  padding-top: 32px;
 }
 
+/* 아래가 화면 끝에 닿아 있으니 그림자는 위쪽으로만 옅게 */
 .mib-tag {
-  filter: drop-shadow(0 10px 18px rgba(31, 29, 26, 0.14));
+  filter: drop-shadow(0 -4px 16px rgba(31, 29, 26, 0.1));
 }
 
 .mib-tag__card {
@@ -92,7 +92,6 @@
   display: flex;
   flex-direction: column;
   gap: 14px;
-  min-height: 236px;
   padding: 46px 34px 26px;
   background: #ffffff;
   /* 옷 택처럼 위쪽 두 모서리를 비스듬히 깎는다 */
@@ -113,15 +112,16 @@
   flex-wrap: wrap;
   align-items: baseline;
   justify-content: space-between;
-  gap: 4px 12px;
+  gap: 10px 12px;
 }
 
 .mib-tag__brand {
-  font-family: 'Archivo', system-ui, sans-serif;
-  font-size: clamp(24px, 7vw, 31px);
-  font-weight: 800;
-  letter-spacing: 0.02em;
-  white-space: nowrap;
+  /* 64×8 칸 그림. 칸이 흐려지지 않게 경계를 픽셀에 맞춘다 */
+  display: block;
+  width: auto;
+  height: clamp(24px, 7.2vw, 32px);
+  fill: currentColor;
+  shape-rendering: crispEdges;
 }
 
 .mib-tag__since {
@@ -159,11 +159,15 @@
 
 /* 좁은 화면: 글 아래에 택이 오고, 택은 화면 폭에 맞춘다. */
 @media (max-width: 640px) {
+  /* 좁은 화면: 택이 양옆은 띄우고 아래 끝에만 붙는다 */
+  .mib-footer {
+    padding: 0 16px;
+  }
+
   .mib-footer__inner {
     flex-direction: column;
     align-items: stretch;
     gap: 8px;
-    padding-bottom: 40px;
   }
 
   .mib-footer__message {
@@ -174,13 +178,10 @@
   .mib-tag-hang {
     flex: none;
     width: 100%;
-    max-width: 470px;
-    align-self: center;
-    padding-top: 24px;
+    padding-top: 16px;
   }
 
   .mib-tag__card {
-    min-height: 0;
     padding: 44px 24px 24px;
   }
 }