@madeinbruno/atelier 0.6.1 → 0.7.0

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.0",
   "description": "madeinbruno.com 서비스들이 같이 쓰는 공용 컴포넌트 (옷 만드는 작업실 컨셉: 택, 라벨, 도장…)",
   "license": "MIT",
   "author": "codingbotPark <pbk575@gmail.com>",