@madeinbruno/atelier 0.0.0-stage → 0.2.0

package/README.md

@@ -1,3 +1,57 @@
-# Temporary Holding Version
+# @madeinbruno/atelier
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+madeinbruno.com의 서비스들이 같이 쓰는 공용 컴포넌트예요. 옷 만드는 작업실(아틀리에) 컨셉이라 컴포넌트도 택, 라벨, 도장처럼 옷에 붙는 것들로 지어요.
+
+## 설치
+
+```bash
+pnpm add @madeinbruno/atelier
+```
+
+React 18 이상이 필요해요.
+
+## 컴포넌트
+
+### `Tag` — 공용 푸터
+
+흰 옷 택(행택) 모양의 푸터예요. 택 위쪽에 한 줄 박음질이 있고, 옷 택처럼 `MADE IN BRUNO / STYLE / SIZE / CONTACT`와 madeinbruno.com 링크가 들어가요.
+
+```tsx
+import { Tag } from '@madeinbruno/atelier';
+import '@madeinbruno/atelier/styles.css'; // 앱에서 한 번만
+
+export default function Footer() {
+  return <Tag service="hangoutwithme" background="#d6efdf" />;
+}
+```
+
+| prop | 기본값 | 설명 |
+|---|---|---|
+| `service` (필수) | | 택의 STYLE 줄. 서비스 이름 |
+| `email` | `pbk575@gmail.com` | CONTACT 줄 (mailto 링크) |
+| `href` | `https://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에서 불러와요.
+
+## 개발
+
+```bash
+pnpm --filter @madeinbruno/atelier build   # dist/ 생성
+pnpm --filter @madeinbruno/atelier dev     # 고칠 때마다 다시 빌드
+```
+
+## 배포 (npm)
+
+GitHub Actions(`.github/workflows/publish-atelier.yml`)가 배포해요.
+
+1. 고친 뒤 `package.json`의 `version`을 올려서 `main`에 푸시해요 (버전을 안 올리면 건너뛰어요).
+2. Actions가 빌드해서 npm 승인 대기열(staged)에 올려요.
+3. npmjs.com에서 그 버전을 승인(2단계 인증)하면 공개돼요.
+
+npm 로그인은 trusted publishing(OIDC)이라 저장소에 토큰이 없어요. 처음 한 번, npmjs.com의 패키지 설정 → Trusted publishing에 GitHub 저장소 `codingbotPark/madeinbruno`, 워크플로 파일 `publish-atelier.yml`을 등록해 둬야 해요.
+
+손으로 올릴 때는 `npm login` 후 `packages/atelier`에서 `npm stage publish --access public`.

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type TagProps = {
+    /** 이 서비스의 이름. 택의 STYLE 줄에 들어간다 (예: "hangoutwithme"). */
+    service: string;
+    /** 연락받을 이메일. 택의 CONTACT 줄에 mailto 링크로 들어간다. */
+    email?: string;
+    /** 택 아래 링크(밑줄 친 주소)가 가는 곳. */
+    href?: string;
+    /** 택 오른쪽 위의 작은 글씨. */
+    since?: string;
+    /** 택 왼쪽에 놓이는 글. 작은 머리글(eyebrow)과 한두 줄 본문. 비우면 택만 가운데에 놓인다. */
+    eyebrow?: ReactNode;
+    message?: ReactNode;
+    /** 푸터 바탕색. 서비스 바탕에 맞춘다 (기본: 옅은 크림). */
+    background?: string;
+    /** 택 위쪽 박음질 색 (기본: 회색). */
+    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

@@ -0,0 +1,48 @@
+// src/Tag.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Tag({
+  service,
+  email = "pbk575@gmail.com",
+  href = "https://madeinbruno.com",
+  since = "EST. 2026",
+  eyebrow = "Thanks for stopping by",
+  message = `\uC774 \uC0AC\uC774\uD2B8\uB3C4 madeinbruno\uC5D0\uC11C \uB9CC\uB4E4\uC5C8\uC5B4\uC694.`,
+  background,
+  stitch,
+  className
+}) {
+  const style = {
+    ...background ? { "--mib-ground": background } : {},
+    ...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 })
+    ] }),
+    /* @__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("span", { className: "mib-tag__since", children: since })
+      ] }),
+      /* @__PURE__ */ jsxs("dl", { className: "mib-tag__specs", children: [
+        /* @__PURE__ */ jsx("dt", { children: "STYLE" }),
+        /* @__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: [
+        linkLabel,
+        " \u2192"
+      ] })
+    ] }) }) })
+  ] }) });
+}
+export {
+  Tag
+};

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "@madeinbruno/atelier",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "madeinbruno.com 서비스들이 같이 쓰는 공용 컴포넌트 (옷 만드는 작업실 컨셉: 택, 라벨, 도장…)",
+  "license": "MIT",
+  "author": "codingbotPark <pbk575@gmail.com>",
+  "homepage": "https://madeinbruno.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/codingbotPark/madeinbruno.git",
+    "directory": "packages/atelier"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "dist",
+    "styles.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "check": "tsc --noEmit",
+    "prepublishOnly": "pnpm build"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "react": "19.2.3",
+    "tsup": "^8.5.0",
+    "typescript": "^5"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/styles.css

@@ -0,0 +1,186 @@
+/* @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');
+
+/* ───────── Tag: 흰 옷 택 푸터 ───────── */
+
+.mib-footer {
+  --mib-ground: #f4f1ea;
+  --mib-stitch: #9a948b;
+  --mib-ink: #1f1d1a;
+  --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);
+}
+
+.mib-footer *,
+.mib-footer *::before,
+.mib-footer *::after {
+  box-sizing: border-box;
+}
+
+.mib-footer a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.mib-footer a:hover {
+  color: #b4442f;
+}
+
+.mib-footer__inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 32px 64px;
+  max-width: 1120px;
+  margin: 0 auto;
+  padding-bottom: 56px;
+}
+
+.mib-footer__inner--solo {
+  justify-content: center;
+}
+
+.mib-footer__message {
+  display: flex;
+  flex: 1 1 300px;
+  flex-direction: column;
+  gap: 14px;
+  max-width: 440px;
+  padding-top: 64px;
+}
+
+.mib-footer__eyebrow {
+  margin: 0;
+  font-size: 13px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--mib-muted);
+}
+
+.mib-footer__text {
+  margin: 0;
+  font-family: 'Archivo', system-ui, sans-serif;
+  font-size: clamp(20px, 3vw, 28px);
+  font-weight: 500;
+  line-height: 1.35;
+  letter-spacing: -0.01em;
+  word-break: keep-all;
+}
+
+.mib-tag-hang {
+  position: relative;
+  flex: 0 1 470px;
+  padding-top: 56px;
+}
+
+.mib-tag {
+  filter: drop-shadow(0 10px 18px rgba(31, 29, 26, 0.14));
+}
+
+.mib-tag__card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 236px;
+  padding: 46px 34px 26px;
+  background: #ffffff;
+  /* 옷 택처럼 위쪽 두 모서리를 비스듬히 깎는다 */
+  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%, 0 18px);
+}
+
+.mib-tag__stitch {
+  position: absolute;
+  top: 22px;
+  left: 22px;
+  right: 22px;
+  height: 2px;
+  background: repeating-linear-gradient(90deg, var(--mib-stitch) 0 9px, transparent 9px 15px);
+}
+
+.mib-tag__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 4px 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;
+}
+
+.mib-tag__since {
+  font-size: 12px;
+  color: var(--mib-muted);
+}
+
+.mib-tag__specs {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 6px 24px;
+  margin: 0;
+  padding-top: 14px;
+  border-top: 1px solid #e7e1d6;
+  font-size: 13px;
+}
+
+.mib-tag__specs dt {
+  color: var(--mib-muted);
+}
+
+.mib-tag__specs dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.mib-tag__link {
+  align-self: flex-start;
+  margin-top: auto;
+  padding-bottom: 2px;
+  border-bottom: 1px solid currentColor;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* 좁은 화면: 글 아래에 택이 오고, 택은 화면 폭에 맞춘다. */
+@media (max-width: 640px) {
+  .mib-footer__inner {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+    padding-bottom: 40px;
+  }
+
+  .mib-footer__message {
+    flex: none;
+    padding-top: 48px;
+  }
+
+  .mib-tag-hang {
+    flex: none;
+    width: 100%;
+    max-width: 470px;
+    align-self: center;
+    padding-top: 24px;
+  }
+
+  .mib-tag__card {
+    min-height: 0;
+    padding: 44px 24px 24px;
+  }
+}