@madeinbruno/atelier 0.6.1 → 0.7.1

package/README.md

@@ -59,7 +59,20 @@ export default function Footer() {
 />
 ```
 
-설정 화면에서 미리 보기용으로 `CareLabel`만 따로 쓸 수도 있어요 (`.mib-tag__care` 스타일 포함). 관심사가 아직 보이는 중인지는 `activeInterest(interest)`, 끊은 지 며칠째인지는 `quitDay(quit)`로 알 수 있어요. 고를 수 있는 아이콘은 `CARE_ICONS`에 있어요 (음악, 영화, 책, 사진, 게임, 코드, 커피, 식물, 운동, 글, 마음).
+**상태는 한 곳에서 바꿔요.** 택 상태는 `apps/atelier`(atelier.madeinbruno.com)에서 주인이 바꾸고, 모든 서비스는 `fetchCareState()`로 같은 상태를 받아 그려요.
+
+```tsx
+import { Tag, fetchCareState } from '@madeinbruno/atelier';
+
+export default async function Footer() {
+  const care = await fetchCareState(); // 서버에서. Next.js에서는 1분 캐시
+  return <Tag service="hangoutwithme" care={care} />;
+}
+```
+
+- 받아 오지 못하면(3초 안에 응답이 없거나 에러) 기본 상태로 그려서 페이지가 깨지지 않아요.
+- 주소는 `CARE_STATE_URL`(기본 `https://atelier.madeinbruno.com/api/care`). 다른 곳에서 받으려면 `fetchCareState(url)`.
+- 설정 화면에서 미리 보기용으로 `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

@@ -122,4 +122,17 @@ type TagProps = {
 };
 declare function Tag({ service, email, href, since, eyebrow, message, background, stitch, care, className, }: TagProps): react.JSX.Element;
 
-export { CARE_ICONS, type CareIcon, CareLabel, type CareState, DEFAULT_CARE_STATE, INTEREST_DAYS, Tag, type TagProps, activeInterest, isCareIcon, quitDay, todayInKorea };
+/** 택 상태를 바꾸는 곳(apps/atelier)의 공개 주소 */
+declare const CARE_STATE_URL = "https://atelier.madeinbruno.com/api/care";
+/** 받아 온 값에서 지금 쓰는 항목만, 모양이 맞는 것만 꺼낸다 */
+declare function normalizeCareState(raw: unknown): Required<CareState>;
+/**
+ * 택 세탁 표시의 지금 상태를 atelier에서 받아 온다. 서버(예: Next.js 서버 컴포넌트)에서 부른다.
+ * Next.js에서는 1분 동안 캐시한다. 못 받으면(3초 안에 응답이 없거나 에러) 기본 상태로 그려서 페이지가 깨지지 않는다.
+ *
+ *   const care = await fetchCareState();
+ *   <Tag service="..." care={care} />
+ */
+declare function fetchCareState(url?: string): Promise<Required<CareState>>;
+
+export { CARE_ICONS, CARE_STATE_URL, type CareIcon, CareLabel, type CareState, DEFAULT_CARE_STATE, INTEREST_DAYS, Tag, type TagProps, activeInterest, fetchCareState, isCareIcon, normalizeCareState, quitDay, todayInKorea };

package/dist/index.js

@@ -199,14 +199,41 @@ function Tag({
     ] }) }) })
   ] }) });
 }
+
+// src/fetchCareState.ts
+var CARE_STATE_URL = "https://atelier.madeinbruno.com/api/care";
+function normalizeCareState(raw) {
+  const v = raw ?? {};
+  const i = v.interest;
+  const q = v.quit;
+  return {
+    heat: v.heat === 1 || v.heat === 3 ? v.heat : 2,
+    interest: i && typeof i.text === "string" && i.text && typeof i.since === "string" ? { text: i.text, since: i.since, icon: isCareIcon(i.icon) ? i.icon : null } : null,
+    quit: q && typeof q.text === "string" && q.text && typeof q.since === "string" ? { text: q.text, since: q.since } : null,
+    wet: v.wet === true
+  };
+}
+async function fetchCareState(url = CARE_STATE_URL) {
+  try {
+    const init = { next: { revalidate: 60 }, signal: AbortSignal.timeout(3e3) };
+    const res = await fetch(url, init);
+    if (!res.ok) return DEFAULT_CARE_STATE;
+    return normalizeCareState(await res.json());
+  } catch {
+    return DEFAULT_CARE_STATE;
+  }
+}
 export {
   CARE_ICONS,
+  CARE_STATE_URL,
   CareLabel,
   DEFAULT_CARE_STATE,
   INTEREST_DAYS,
   Tag,
   activeInterest,
+  fetchCareState,
   isCareIcon,
+  normalizeCareState,
   quitDay,
   todayInKorea
 };

package/package.json

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

package/styles.css

@@ -193,27 +193,34 @@
 }
 
 /* 툴팁: 기호 위에 작은 글씨가 뜬다 (CSS만, 스크립트 없음).
-   세탁 표시 줄이 택 왼쪽에 붙어 있으므로 기호 왼쪽 끝에서 오른쪽으로 펼쳐 택·화면 밖으로 나가지 않게 한다. */
-.mib-tag__care-item {
+   기호가 아니라 세탁 표시 줄(.mib-tag__care, 택 안쪽 폭) 기준으로 띄운다: 줄 왼쪽 끝에서 시작하고
+   폭은 줄을 넘지 않으며, 길면 잘라내지 않고 줄을 바꿔 끝까지 보여 준다. 그래서 택 밖으로 나가지 않는다. */
+.mib-tag__care {
   position: relative;
+}
+
+.mib-tag__care-item {
   display: flex;
 }
 
 .mib-tag__care-item[data-tip]::after {
   content: attr(data-tip);
   position: absolute;
-  bottom: calc(100% + 8px);
+  bottom: calc(100% + 6px);
   left: 0;
+  width: max-content;
+  max-width: 100%;
+  box-sizing: border-box;
   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;
+  line-height: 1.4;
+  white-space: normal;
+  /* 한국어는 단어 중간이 아니라 띄어쓰기에서 줄을 바꾼다. 아주 긴 한 단어만 어쩔 수 없이 자른다 */
+  word-break: keep-all;
+  overflow-wrap: anywhere;
   pointer-events: none;
   opacity: 0;
   transform: translateY(2px);