@madeinbruno/atelier 0.4.3 → 0.6.0

package/README.md

@@ -14,7 +14,7 @@ React 18 이상이 필요해요.
 
 ### `Tag` — 공용 푸터
 
-흰 옷 택(행택) 모양의 푸터예요. 택 위쪽에 한 줄 박음질이 있고, 픽셀 글씨 `madeinbruno`, `SERVICE / CONTACT`와 madeinbruno.com 링크가 들어가요.
+흰 옷 택(행택) 모양의 푸터예요. 택 위쪽에 한 줄 박음질이 있고, 픽셀 글씨 `madeinbruno`, `SERVICE / CONTACT`가 들어가요 (`href`를 주면 밑줄 친 링크도).
 
 ```tsx
 import { Tag } from '@madeinbruno/atelier';
@@ -29,11 +29,37 @@ export default function Footer() {
 |---|---|---|
 | `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` (회색) | 박음질 색 |
+| `care` | 없음 | 택 아래 세탁 표시 줄. `true`면 기본 상태, `CareState`를 주면 그 상태로. 아래 참고 |
+
+#### 세탁 표시 (`care`)
+
+옷 택의 세탁 기호를 원래 모양 그대로 그리고, 몇몇 기호에 만든 사람의 지금 상태를 숨겨 둬요. 마우스를 올리면 짧은 영어 문장이 떠요.
+
+| 기호 | 숨은 뜻 | 툴팁 |
+|---|---|---|
+| 물세탁 빨래통 | 온도 자리 = 나이 (올해 − 2005) | he is 21 |
+| 표백 금지 | `quit`: 끊고 있는 것. 시작한 날(`since`, YYYY-MM-DD 한국 날짜)부터 며칠째인지 숫자가 ✕ 자리에. 없으면 ✕ | he is on day 12 without ○○ |
+| 건조 네모 | `wet`: 마음. 기호는 늘 텀블 건조 그대로, 켜 두면 툴팁만 | still not dry (켰을 때만) |
+| 다리미 | `heat` 1~3 점: 뜨거울수록 열심히 하는 중 | he is taking it easy / busy / on fire |
+| 드라이클리닝 | `interest`: 요즘 관심 있는 것. `since`부터 1주일 동안 동그라미 안에 `icon`(고른 아이콘), 지나거나 없으면 ✕ | he is into ○○ (1주일 동안만) |
+
+```tsx
+<Tag
+  service="blog"
+  care={{
+    heat: 3,
+    interest: { text: '필름 카메라', icon: 'camera', since: '2026-11-03T00:00:00Z' },
+    quit: { text: '커피', since: '2026-10-23' },
+  }}
+/>
+```
+
+설정 화면에서 미리 보기용으로 `CareLabel`만 따로 쓸 수도 있어요 (`.mib-tag__care` 스타일 포함). 관심사가 아직 보이는 중인지는 `activeInterest(interest)`, 끊은 지 며칠째인지는 `quitDay(quit)`로 알 수 있어요. 고를 수 있는 아이콘은 `CARE_ICONS`에 있어요 (음악, 영화, 책, 사진, 게임, 코드, 커피, 식물, 운동, 글, 마음).
 
 `madeinbruno` 글씨는 [Banquise](https://gitlab.com/bonjour-monde/fonderie/banquise-typeface)(Bonjour Monde, SIL Open Font License 1.1)로 쓴 글자를 SVG 그림으로 옮긴 거예요. 이 한 단어에만 쓰는 폰트라 폰트 파일을 싣지 않아요 (15KB → 1KB 미만, 글씨가 늦게 바뀌는 깜빡임도 없음).
 

package/dist/index.d.ts

@@ -1,12 +1,110 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 
+/**
+ * 드라이클리닝 동그라미 안에 넣는 관심사 아이콘. 24×24 선 그림.
+ * 동그라미 안에서는 작게 줄여 그린다 (CareLabel).
+ */
+declare const CARE_ICONS: {
+    music: {
+        label: string;
+        path: react.JSX.Element;
+    };
+    film: {
+        label: string;
+        path: react.JSX.Element;
+    };
+    book: {
+        label: string;
+        path: react.JSX.Element;
+    };
+    camera: {
+        label: string;
+        path: react.JSX.Element;
+    };
+    game: {
+        label: string;
+        path: react.JSX.Element;
+    };
+    code: {
+        label: string;
+        path: react.JSX.Element;
+    };
+    coffee: {
+        label: string;
+        path: react.JSX.Element;
+    };
+    plant: {
+        label: string;
+        path: react.JSX.Element;
+    };
+    ball: {
+        label: string;
+        path: react.JSX.Element;
+    };
+    pencil: {
+        label: string;
+        path: react.JSX.Element;
+    };
+    heart: {
+        label: string;
+        path: react.JSX.Element;
+    };
+};
+type CareIcon = keyof typeof CARE_ICONS;
+declare function isCareIcon(v: unknown): v is CareIcon;
+
+/**
+ * 옷 택의 세탁 표시 줄 (ISO 3758 기호를 원래 모양 그대로).
+ * 몇몇 기호에 만든 사람의 지금 상태가 숨어 있고, 마우스를 올리면 짧은 영어 문장이 뜬다.
+ *
+ *  물세탁 빨래통   온도 자리 = 나이 (올해 − 2005)
+ *  표백 금지       끊고 있는 것. 깨끗하게(표백) 끊은 지 며칠째인지 숫자가 ✕ 자리에. 없으면 ✕
+ *  건조 네모       마음. 기호는 늘 텀블 건조 그대로, 켜 두면 툴팁만 뜬다
+ *  다리미          점 1~3 = 다리미가 뜨거울수록 무언가를 열심히 하는 중
+ *  드라이클리닝    요즘 관심 있는 것. 정한 뒤 1주일 동안 동그라미 안에 고른 아이콘, 지나면 ✕
+ */
+type CareState = {
+    /** 얼마나 열심히 하는 중인지 (다리미 점 개수) */
+    heat?: 1 | 2 | 3;
+    /** 요즘 관심 있는 것과 정한 때. since부터 1주일 동안만 보인다. icon은 동그라미 안에 그린다 */
+    interest?: {
+        text: string;
+        since: string;
+        icon?: CareIcon | null;
+    } | null;
+    /** 끊고 있는 것과 시작한 날(YYYY-MM-DD, 한국 날짜). 시작한 날이 1일째 */
+    quit?: {
+        text: string;
+        since: string;
+    } | null;
+    /** 아직 마르지 않은 마음. 켜 두면 건조 네모에 툴팁만 뜬다 (기호는 그대로) */
+    wet?: boolean;
+};
+declare const DEFAULT_CARE_STATE: Required<CareState>;
+/** 관심사가 보이는 기간 */
+declare const INTEREST_DAYS = 7;
+/** 관심사가 아직 1주일 안인지. 지났거나 없으면 null */
+declare function activeInterest(interest: CareState['interest'], now?: number): {
+    text: string;
+    icon: "music" | "film" | "book" | "camera" | "game" | "code" | "coffee" | "plant" | "ball" | "pencil" | "heart" | null;
+    until: Date;
+} | null;
+/** 한국 날짜로 오늘 (YYYY-MM-DD) */
+declare function todayInKorea(now?: number): string;
+/** 끊은 지 며칠째인지 (시작한 날 = 1일째). 없거나 날짜가 이상하거나 아직 시작 전이면 null */
+declare function quitDay(quit: CareState['quit'], now?: number): number | null;
+declare function CareLabel({ state }: {
+    state?: CareState;
+}): react.JSX.Element;
+
 type TagProps = {
     /** 이 서비스의 이름. 택의 SERVICE 줄에 들어간다 (예: "hangoutwithme"). */
     service: string;
     /** 연락받을 이메일. 택의 CONTACT 줄에 mailto 링크로 들어간다. */
     email?: string;
-    /** 택 아래 링크(밑줄 친 주소)가 가는 곳. */
+    /** 택 아래 링크(밑줄 친 주소)가 가는 곳. 주지 않으면 링크를 그리지 않는다.
+     *  madeinbruno.com이 아직 없어서 기본은 링크 없음. 사이트가 생기면 기본값을 'https://madeinbruno.com'으로 바꾼다. */
     href?: string;
     /** 택 오른쪽 위의 작은 글씨. */
     since?: string;
@@ -17,8 +115,11 @@ type TagProps = {
     background?: string;
     /** 택 위쪽 박음질 색 (기본: 회색). */
     stitch?: string;
+    /** 택 아래 세탁 표시 줄. true면 기본 상태로, 객체를 주면 그 상태(끊고 있는 것·마음·열정·요즘 관심사)로 그린다.
+     *  기호에 마우스를 올리면 짧은 영어 문장이 뜬다. */
+    care?: boolean | CareState;
     className?: string;
 };
-declare function Tag({ service, email, href, since, eyebrow, message, background, stitch, className, }: TagProps): react.JSX.Element;
+declare function Tag({ service, email, href, since, eyebrow, message, background, stitch, care, className, }: TagProps): react.JSX.Element;
 
-export { Tag, type TagProps };
+export { CARE_ICONS, type CareIcon, CareLabel, type CareState, DEFAULT_CARE_STATE, INTEREST_DAYS, Tag, type TagProps, activeInterest, isCareIcon, quitDay, todayInKorea };

package/dist/index.js

@@ -1,15 +1,171 @@
+// src/careIcons.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CARE_ICONS = {
+  music: {
+    label: "\uC74C\uC545",
+    path: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "17", r: "3" }),
+      /* @__PURE__ */ jsx("path", { d: "M11 17 V5 L19 7.5 V10 L11 7.5" })
+    ] })
+  },
+  film: {
+    label: "\uC601\uD654",
+    path: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("rect", { x: "4", y: "5", width: "16", height: "14", rx: "1" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 5 V19 M16 5 V19 M4 12 H8 M16 12 H20" })
+    ] })
+  },
+  book: {
+    label: "\uCC45",
+    path: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: "M3 6 Q7.5 4 12 6 Q16.5 4 21 6 V19 Q16.5 17 12 19 Q7.5 17 3 19 Z" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 6 V19" })
+    ] })
+  },
+  camera: {
+    label: "\uC0AC\uC9C4",
+    path: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("rect", { x: "3", y: "8", width: "18", height: "11", rx: "1.5" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13.5", r: "3.5" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 8 L9.5 5.5 H14.5 L16 8" })
+    ] })
+  },
+  game: {
+    label: "\uAC8C\uC784",
+    path: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("rect", { x: "2.5", y: "7.5", width: "19", height: "10", rx: "5" }),
+      /* @__PURE__ */ jsx("path", { d: "M7.5 10.5 V14.5 M5.5 12.5 H9.5" }),
+      /* @__PURE__ */ jsx("circle", { cx: "15.5", cy: "11.5", r: "0.9" }),
+      /* @__PURE__ */ jsx("circle", { cx: "18", cy: "13.5", r: "0.9" })
+    ] })
+  },
+  code: {
+    label: "\uCF54\uB4DC",
+    path: /* @__PURE__ */ jsx("path", { d: "M8 7 L3 12 L8 17 M16 7 L21 12 L16 17 M13.5 5 L10.5 19" })
+  },
+  coffee: {
+    label: "\uCEE4\uD53C",
+    path: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: "M4.5 9 H16.5 V14.5 A4.5 4.5 0 0 1 12 19 H9 A4.5 4.5 0 0 1 4.5 14.5 Z" }),
+      /* @__PURE__ */ jsx("path", { d: "M16.5 10.5 H18 A2.2 2.2 0 0 1 18 15 H16.5" }),
+      /* @__PURE__ */ jsx("path", { d: "M8.5 3.5 V6 M12.5 3.5 V6" })
+    ] })
+  },
+  plant: {
+    label: "\uC2DD\uBB3C",
+    path: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: "M12 21 V11" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 14 C7 14 4.5 10 4.5 6 C9 6 12 9 12 14 Z" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 11 C12 7 14.5 4 19.5 4 C19.5 8 17 11 12 11 Z" })
+    ] })
+  },
+  ball: {
+    label: "\uC6B4\uB3D9",
+    path: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "8.5" }),
+      /* @__PURE__ */ jsx("path", { d: "M3.5 12 H20.5 M12 3.5 C8.5 7 8.5 17 12 20.5 M12 3.5 C15.5 7 15.5 17 12 20.5" })
+    ] })
+  },
+  pencil: {
+    label: "\uAE00",
+    path: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: "M4 20 L5 15 L15.5 4.5 L19.5 8.5 L9 19 Z" }),
+      /* @__PURE__ */ jsx("path", { d: "M13.5 6.5 L17.5 10.5" })
+    ] })
+  },
+  heart: {
+    label: "\uB9C8\uC74C",
+    path: /* @__PURE__ */ jsx("path", { d: "M12 20 C5 14.5 3 11.5 3 8.5 A4.5 4.5 0 0 1 12 7 A4.5 4.5 0 0 1 21 8.5 C21 11.5 19 14.5 12 20 Z" })
+  }
+};
+function isCareIcon(v) {
+  return typeof v === "string" && Object.prototype.hasOwnProperty.call(CARE_ICONS, v);
+}
+
+// src/CareLabel.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_CARE_STATE = {
+  heat: 2,
+  interest: null,
+  quit: null,
+  wet: false
+};
+var INTEREST_DAYS = 7;
+var BORN = 2005;
+var DAY = 24 * 60 * 60 * 1e3;
+var HEAT_TIP = { 1: "he is taking it easy", 2: "he is busy", 3: "he is on fire" };
+function activeInterest(interest, now = Date.now()) {
+  if (!interest?.text) return null;
+  const since = Date.parse(interest.since);
+  if (Number.isNaN(since) || now - since > INTEREST_DAYS * DAY) return null;
+  return {
+    text: interest.text,
+    icon: isCareIcon(interest.icon) ? interest.icon : null,
+    until: new Date(since + INTEREST_DAYS * DAY)
+  };
+}
+function todayInKorea(now = Date.now()) {
+  return new Intl.DateTimeFormat("en-CA", { timeZone: "Asia/Seoul" }).format(now);
+}
+function quitDay(quit, now = Date.now()) {
+  if (!quit?.text || !/^\d{4}-\d{2}-\d{2}$/.test(quit.since)) return null;
+  const start = Date.parse(`${quit.since}T00:00:00Z`);
+  const today = Date.parse(`${todayInKorea(now)}T00:00:00Z`);
+  const day = Math.round((today - start) / DAY) + 1;
+  return day >= 1 ? day : null;
+}
+function Dot({ cx, cy }) {
+  return /* @__PURE__ */ jsx2("circle", { cx, cy, r: "1", className: "mib-tag__care-dot" });
+}
+function Symbol({ tip, children }) {
+  return /* @__PURE__ */ jsx2("li", { className: "mib-tag__care-item", "data-tip": tip, "aria-label": tip, "aria-hidden": tip ? void 0 : true, children: /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children }) });
+}
+function CareLabel({ state }) {
+  const s = { ...DEFAULT_CARE_STATE, ...state };
+  const age = (/* @__PURE__ */ new Date()).getFullYear() - BORN;
+  const dots = s.heat === 1 ? [12.5] : s.heat === 2 ? [10.5, 14.5] : [9, 12.5, 16];
+  const interest = activeInterest(s.interest);
+  const quit = quitDay(s.quit);
+  return /* @__PURE__ */ jsxs2("ul", { className: "mib-tag__care", "aria-label": "care label", children: [
+    /* @__PURE__ */ jsxs2(Symbol, { tip: `he is ${age}`, children: [
+      /* @__PURE__ */ jsx2("path", { d: "M2.5 7.5 q2.4 -2 4.75 0 t4.75 0 t4.75 0 t4.75 0" }),
+      /* @__PURE__ */ jsx2("path", { d: "M3.2 8.1 L5.4 19.5 H18.6 L20.8 8.1" }),
+      /* @__PURE__ */ jsx2("text", { x: "12", y: "16.6", textAnchor: "middle", children: age })
+    ] }),
+    /* @__PURE__ */ jsxs2(Symbol, { tip: quit && s.quit ? `he is on day ${quit} without ${s.quit.text}` : void 0, children: [
+      /* @__PURE__ */ jsx2("path", { d: "M12 3.5 L21 19.5 H3 Z" }),
+      quit ? /* @__PURE__ */ jsx2("text", { x: "12", y: "17.6", textAnchor: "middle", className: "mib-tag__care-small", children: quit }) : /* @__PURE__ */ jsx2("path", { d: "M7 8.5 L17 19.5 M17 8.5 L7 19.5" })
+    ] }),
+    /* @__PURE__ */ jsxs2(Symbol, { tip: s.wet ? "still not dry" : void 0, children: [
+      /* @__PURE__ */ jsx2("rect", { x: "3.5", y: "3.5", width: "17", height: "17" }),
+      /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "6" }),
+      /* @__PURE__ */ jsx2(Dot, { cx: 12, cy: 12 })
+    ] }),
+    /* @__PURE__ */ jsxs2(Symbol, { tip: HEAT_TIP[s.heat], children: [
+      /* @__PURE__ */ jsx2("path", { d: "M3 18 H21 C21 12.5 18.5 9.5 13.5 9.5 H7.5 C5.2 9.5 3.6 12.8 3 18 Z" }),
+      dots.map((x) => /* @__PURE__ */ jsx2(Dot, { cx: x, cy: 14.2 }, x))
+    ] }),
+    /* @__PURE__ */ jsxs2(Symbol, { tip: interest ? `he is into ${interest.text}` : void 0, children: [
+      /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "8" }),
+      !interest && /* @__PURE__ */ jsx2("path", { d: "M5.5 5.5 L18.5 18.5 M18.5 5.5 L5.5 18.5" }),
+      interest?.icon && /* @__PURE__ */ jsx2("g", { className: "mib-tag__care-icon", transform: "translate(12 12) scale(0.42) translate(-12 -12)", children: CARE_ICONS[interest.icon].path })
+    ] })
+  ] });
+}
+
 // src/Tag.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } 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.`,
   background,
   stitch,
+  care = false,
   className
 }) {
   const style = {
@@ -17,25 +173,26 @@ function Tag({
     ...stitch ? { "--mib-stitch": stitch } : {}
   };
   const hasMessage = Boolean(eyebrow || message);
-  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 }),
-      message && /* @__PURE__ */ jsx("p", { className: "mib-footer__text", children: message })
+  const linkLabel = href?.replace(/^https?:\/\//, "").replace(/\/$/, "");
+  return /* @__PURE__ */ jsx3("footer", { className: ["mib-footer", className].filter(Boolean).join(" "), style, children: /* @__PURE__ */ jsxs3("div", { className: hasMessage ? "mib-footer__inner" : "mib-footer__inner mib-footer__inner--solo", children: [
+    hasMessage && /* @__PURE__ */ jsxs3("div", { className: "mib-footer__message", children: [
+      eyebrow && /* @__PURE__ */ jsx3("p", { className: "mib-footer__eyebrow", children: eyebrow }),
+      message && /* @__PURE__ */ jsx3("p", { className: "mib-footer__text", children: message })
     ] }),
-    /* @__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("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__ */ jsx3("div", { className: "mib-tag-hang", children: /* @__PURE__ */ jsx3("div", { className: "mib-tag", children: /* @__PURE__ */ jsxs3("div", { className: "mib-tag__card", children: [
+      /* @__PURE__ */ jsx3("span", { className: "mib-tag__stitch", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs3("div", { className: "mib-tag__head", children: [
+        /* @__PURE__ */ jsx3("svg", { className: "mib-tag__brand", viewBox: "0 0 64 8", role: "img", "aria-label": "madeinbruno", children: /* @__PURE__ */ jsx3("path", { d: WORDMARK }) }),
+        /* @__PURE__ */ jsx3("span", { className: "mib-tag__since", children: since })
       ] }),
-      /* @__PURE__ */ jsxs("dl", { className: "mib-tag__specs", children: [
-        /* @__PURE__ */ jsx("dt", { children: "SERVICE" }),
-        /* @__PURE__ */ jsx("dd", { children: service }),
-        /* @__PURE__ */ jsx("dt", { children: "CONTACT" }),
-        /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("a", { href: `mailto:${email}`, children: email }) })
+      /* @__PURE__ */ jsxs3("dl", { className: "mib-tag__specs", children: [
+        /* @__PURE__ */ jsx3("dt", { children: "SERVICE" }),
+        /* @__PURE__ */ jsx3("dd", { children: service }),
+        /* @__PURE__ */ jsx3("dt", { children: "CONTACT" }),
+        /* @__PURE__ */ jsx3("dd", { children: /* @__PURE__ */ jsx3("a", { href: `mailto:${email}`, children: email }) })
       ] }),
-      /* @__PURE__ */ jsxs("a", { className: "mib-tag__link", href, children: [
+      care && /* @__PURE__ */ jsx3(CareLabel, { state: care === true ? void 0 : care }),
+      href && /* @__PURE__ */ jsxs3("a", { className: "mib-tag__link", href, children: [
         linkLabel,
         " \u2192"
       ] })
@@ -43,5 +200,13 @@ function Tag({
   ] }) });
 }
 export {
-  Tag
+  CARE_ICONS,
+  CareLabel,
+  DEFAULT_CARE_STATE,
+  INTEREST_DAYS,
+  Tag,
+  activeInterest,
+  isCareIcon,
+  quitDay,
+  todayInKorea
 };

package/package.json

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

package/styles.css

@@ -12,7 +12,7 @@
   --mib-muted: #6b655c;
   box-sizing: border-box;
   width: 100%;
-  overflow: hidden;
+  /* 넘치는 걸 자르지 않는다: 자르면 택 위로 퍼지는 그림자가 푸터 윗변에서 끊겨, 푸터 자리만 바탕색이 달라 보인다 */
   padding: 0 24px;
   background: var(--mib-ground);
   font-family: 'IBM Plex Mono', ui-monospace, monospace;
@@ -92,7 +92,6 @@
   display: flex;
   flex-direction: column;
   gap: 14px;
-  min-height: 236px;
   padding: 46px 34px 26px;
   background: #ffffff;
   /* 옷 택처럼 위쪽 두 모서리를 비스듬히 깎는다 */
@@ -149,6 +148,83 @@
   overflow-wrap: anywhere;
 }
 
+.mib-tag__care {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  margin: 0;
+  padding: 14px 0 0;
+  border-top: 1px solid #e7e1d6;
+  list-style: none;
+  color: var(--mib-ink);
+}
+
+.mib-tag__care svg {
+  display: block;
+  width: 24px;
+  height: 24px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.mib-tag__care text {
+  fill: currentColor;
+  stroke: none;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-size: 7px;
+  font-weight: 500;
+}
+
+.mib-tag__care .mib-tag__care-small {
+  font-size: 5.5px;
+}
+
+.mib-tag__care .mib-tag__care-icon {
+  /* 0.42배로 줄여 그리므로 선을 굵게 둬서 다른 기호와 비슷한 굵기로 */
+  stroke-width: 3;
+}
+
+.mib-tag__care .mib-tag__care-dot {
+  fill: currentColor;
+  stroke: none;
+}
+
+/* 툴팁: 기호 위에 작은 글씨가 뜬다 (CSS만, 스크립트 없음).
+   세탁 표시 줄이 택 왼쪽에 붙어 있으므로 기호 왼쪽 끝에서 오른쪽으로 펼쳐 택·화면 밖으로 나가지 않게 한다. */
+.mib-tag__care-item {
+  position: relative;
+  display: flex;
+}
+
+.mib-tag__care-item[data-tip]::after {
+  content: attr(data-tip);
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  padding: 4px 8px;
+  border-radius: 4px;
+  background: var(--mib-ink);
+  color: #fff;
+  font-size: 11px;
+  line-height: 1.3;
+  white-space: nowrap;
+  max-width: 240px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(2px);
+  transition: opacity 120ms ease, transform 120ms ease;
+}
+
+.mib-tag__care-item[data-tip]:hover::after {
+  opacity: 1;
+  transform: translateY(0);
+}
+
 .mib-tag__link {
   align-self: flex-start;
   margin-top: auto;
@@ -183,7 +259,6 @@
   }
 
   .mib-tag__card {
-    min-height: 0;
     padding: 44px 24px 24px;
   }
 }