@liner-fe/illust 0.1.6 → 0.2.7

package/.ultra.cache.json

@@ -0,0 +1,19 @@
+{
+  "files": {
+    "lib": "1760876275317.5342",
+    "node_modules": "1761203842576.7976",
+    ".gitignore": "dc555529d53e3f2c4f0e55a863459c4b37d735aa",
+    "CHANGELOG.md": "f0c3c24b8d2fd6dd50505c9f52e0e4ac3b2fd22d",
+    "README.md": "63221bc63a67877867f2e5687df18a8fd094aaeb",
+    "config/tsup/tsup.config.ts": "a859643cfe271fbb36f8dcdbddf48e2a50cd3467",
+    "package.json": "5f0348bb8010110cae2f099804ee3cb99a5fa7e5.1761203975703.053",
+    "src/components/index.tsx": "a76f6fffbe12d6ba35c1514c75cbf25bfa921dca",
+    "src/constants/path.ts": "3d830e3cec1911a55b97d4c019ffa64544691f55",
+    "src/constants/size.ts": "7b67ec10bd33f292bd8ceeef1b6caa5c7aae8db8",
+    "src/index.ts": "c622c42f0af65297761fd53dc4bcdce07f282859",
+    "src/utils/illust.ts": "d38b03c111b7f8441af200053469c4b590ce1251",
+    "tsconfig.build.json": "c72ec6a3beec74122bb0b83d3881081d33af3ced",
+    "tsconfig.json": "81023397af8ff9abb35dce28ed574a745240aec4"
+  },
+  "deps": {}
+}

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @liner-fe/illust
 
+## 0.1.7
+
+### Patch Changes
+
+- 11ff74f: chore: 코치마크 close 아이콘 컬러 변경
+
 ## 0.1.6
 
 ### Patch Changes

package/README.md

@@ -0,0 +1,13 @@
+# @liner-fe/illust
+
+## 일러스트 추가하기
+
+새로운 일러스트를 추가하려면 다음 단계를 따르세요:
+
+### 1. 이미지 파일 추가
+
+- **형식**: [WebP exporter](https://www.figma.com/community/plugin/1181873200384736932/webp-exporter)를 활용해서 같은 이름으로 추가해주세요.
+- **위치**:
+  - 라이트 모드: `https://assets.getliner.com/common/illust/light/`
+  - 다크 모드: `https://assets.getliner.com/common/illust/dark/`
+  - CDN 링크: https://fe-admin.liner.space/cloud/buckets/liner-v1--assets/common/illust

package/lib/index.js

@@ -1,44 +1,22 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
+// src/constants/path.ts
+var ILLUST = "https://assets.getliner.com/common/illust";
+var DARK_MODE_ILLUST_PREFIX = `${ILLUST}/dark/`;
+var LIGHT_MODE_ILLUST_PREFIX = `${ILLUST}/light/`;
+
 // src/constants/size.ts
 var ratio = {
   "4:3": { width: 180, height: 135 },
   "1:1": { width: 250, height: 250 }
 };
-var illustSize = {
-  "hero-gift": ratio["1:1"],
-  "hero-search": ratio["1:1"],
-  "mini-documents-2": ratio["1:1"],
-  "mini-documents-3": ratio["1:1"],
-  "mini-documents-4": ratio["1:1"],
-  "mini-documents-5": ratio["1:1"],
-  "mini-documents": ratio["1:1"],
-  "mini-egg": ratio["1:1"],
-  "mini-gift": ratio["1:1"],
-  "mini-graduation_hat": ratio["1:1"],
-  "mini-search": ratio["1:1"],
-  "mini-ticket": ratio["1:1"],
-  "mini-window": ratio["1:1"],
-  "spot-catch_star": ratio["4:3"],
-  "spot-clap": ratio["4:3"],
-  "spot-empty": ratio["4:3"],
-  "spot-no_search": ratio["4:3"],
-  "spot-search-2": ratio["4:3"],
-  "spot-search-3": ratio["4:3"],
-  "spot-search-4": ratio["4:3"],
-  "spot-search-5": ratio["4:3"],
-  "spot-search": ratio["4:3"],
-  "spot-write": ratio["4:3"],
-  "spot-gift": ratio["4:3"],
-  "mini-empty": ratio["1:1"],
-  "spot-team": ratio["4:3"]
-};
-
-// src/constants/path.ts
-var ILLUST = "https://assets.getliner.com/common/illust";
-var DARK_MODE_ILLUST_PREFIX = `${ILLUST}/dark/`;
-var LIGHT_MODE_ILLUST_PREFIX = `${ILLUST}/light/`;
+var getIllustAspectRatio = /* @__PURE__ */ __name((name) => {
+  if (name.startsWith("spot-")) {
+    return ratio["4:3"];
+  }
+  return ratio["1:1"];
+}, "getIllustAspectRatio");
 
 // src/components/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -46,8 +24,10 @@ var Illust = /* @__PURE__ */ __name((props) => {
   const { src, width, margin } = props;
   const darkSource = src.dark?.name || src.light.name;
   const lightSource = src.light.name;
-  const aspectRatioDark = illustSize[darkSource] ? illustSize[darkSource].width / illustSize[darkSource].height : void 0;
-  const aspectRatio = illustSize[lightSource] ? illustSize[lightSource].width / illustSize[lightSource].height : void 0;
+  const darkAspectRatio = getIllustAspectRatio(darkSource);
+  const lightAspectRatio = getIllustAspectRatio(lightSource);
+  const aspectRatioDark = darkAspectRatio ? darkAspectRatio.width / darkAspectRatio.height : void 0;
+  const aspectRatio = lightAspectRatio ? lightAspectRatio.width / lightAspectRatio.height : void 0;
   const css = {
     width,
     margin

package/package.json

@@ -1,13 +1,9 @@
 {
   "name": "@liner-fe/illust",
-  "version": "0.1.6",
+  "version": "0.2.7",
   "type": "module",
-  "scripts": {
-    "build": "yarn tsup --config ./config/tsup/tsup.config.ts"
-  },
   "publishConfig": {
-    "access": "public",
-    "main": "./lib/index.js"
+    "access": "public"
   },
   "files": [
     "*"
@@ -23,5 +19,9 @@
     "@types/react-dom": "^18.2.5",
     "esbuild-node-externals": "1.18.0",
     "tsup": "^8.5.0"
+  },
+  "scripts": {
+    "build": "pnpm tsup --config ./config/tsup/tsup.config.ts",
+    "build:package": "pnpm build"
   }
-}
+}

package/src/components/index.tsx

@@ -1,11 +1,10 @@
-import { illustSize } from '../constants/size';
 import { CSSProperties, DetailedHTMLProps, ImgHTMLAttributes } from 'react';
-import { IllustType } from '../types/illust';
 import { Property } from 'csstype';
 import { DARK_MODE_ILLUST_PREFIX, LIGHT_MODE_ILLUST_PREFIX } from '@/constants/path';
+import { getIllustAspectRatio } from '@/constants/size';
 
 export interface Source<T extends false | true = true> {
-  name: IllustType;
+  name: string;
   inverse?: T;
 }
 
@@ -22,12 +21,15 @@ export const Illust = (props: IllustProps) => {
   const darkSource = src.dark?.name || src.light.name;
   const lightSource = src.light.name;
 
-  const aspectRatioDark = illustSize[darkSource]
-    ? illustSize[darkSource].width / illustSize[darkSource].height
+  const darkAspectRatio = getIllustAspectRatio(darkSource);
+  const lightAspectRatio = getIllustAspectRatio(lightSource);
+
+  const aspectRatioDark = darkAspectRatio
+    ? darkAspectRatio.width / darkAspectRatio.height
     : undefined;
 
-  const aspectRatio = illustSize[lightSource]
-    ? illustSize[lightSource].width / illustSize[lightSource].height
+  const aspectRatio = lightAspectRatio
+    ? lightAspectRatio.width / lightAspectRatio.height
     : undefined;
 
   const css: CSSProperties = {

package/src/constants/size.ts

@@ -1,35 +1,12 @@
-import { IllustType } from '../types/illust';
-
 const ratio = {
   '4:3': { width: 180, height: 135 },
   '1:1': { width: 250, height: 250 },
 };
 
-export const illustSize: Partial<Record<IllustType, { width: number; height: number }>> = {
-  'hero-gift': ratio['1:1'],
-  'hero-search': ratio['1:1'],
-  'mini-documents-2': ratio['1:1'],
-  'mini-documents-3': ratio['1:1'],
-  'mini-documents-4': ratio['1:1'],
-  'mini-documents-5': ratio['1:1'],
-  'mini-documents': ratio['1:1'],
-  'mini-egg': ratio['1:1'],
-  'mini-gift': ratio['1:1'],
-  'mini-graduation_hat': ratio['1:1'],
-  'mini-search': ratio['1:1'],
-  'mini-ticket': ratio['1:1'],
-  'mini-window': ratio['1:1'],
-  'spot-catch_star': ratio['4:3'],
-  'spot-clap': ratio['4:3'],
-  'spot-empty': ratio['4:3'],
-  'spot-no_search': ratio['4:3'],
-  'spot-search-2': ratio['4:3'],
-  'spot-search-3': ratio['4:3'],
-  'spot-search-4': ratio['4:3'],
-  'spot-search-5': ratio['4:3'],
-  'spot-search': ratio['4:3'],
-  'spot-write': ratio['4:3'],
-  'spot-gift': ratio['4:3'],
-  'mini-empty': ratio['1:1'],
-  'spot-team': ratio['4:3'],
+export const getIllustAspectRatio = (name: string) => {
+  if (name.startsWith('spot-')) {
+    return ratio['4:3'];
+  }
+
+  return ratio['1:1'];
 };

package/src/utils/illust.ts

@@ -1,10 +1,9 @@
 import { ILLUST } from '../constants/path';
-import { IllustType } from '../types/illust';
 
 export const prefetchIllust = async ({
   name,
   isDark = false,
 }: {
-  name: IllustType;
+  name: string;
   isDark?: boolean;
 }) => await fetch(`${ILLUST}${isDark ? '/dark/' : '/light/'}${name}.webp`);

package/lib/index.d.ts

@@ -1,31 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { DetailedHTMLProps, ImgHTMLAttributes } from 'react';
-import { Property } from 'csstype';
-
-declare const illustNames: readonly ["hero-gift", "hero-search", "mini-approve", "mini-documents-2", "mini-documents-3", "mini-documents-4", "mini-documents-5", "mini-documents", "mini-egg", "mini-empty-message", "mini-empty", "mini-gift", "mini-graduation_hat", "mini-not-search", "mini-not-ticket-2", "mini-private", "mini-search", "mini-ticket", "mini-ticket-3", "mini-window", "spot-catch_star", "spot-clap", "spot-empty", "spot-gift", "spot-no_search", "spot-search-2", "spot-search-3", "spot-search-4", "spot-search-5", "spot-search", "spot-sign_up", "spot-team", "spot-write", "mini-sign", "mini-pots", "mini-erase", "mini-rocket", "mini-empty-history", "mini-upload", "mini-empty-search"];
-declare const darkIllustNames: readonly ["hero-gift", "hero-search", "mini-approve", "mini-documents-2", "mini-documents-3", "mini-documents-4", "mini-documents-5", "mini-documents", "mini-egg", "mini-empty-message", "mini-empty", "mini-gift", "mini-graduation_hat", "mini-not-search", "mini-not-ticket-2", "mini-private", "mini-search", "mini-ticket", "mini-ticket-3", "mini-window", "spot-catch_star", "spot-clap", "spot-empty", "spot-gift", "spot-no_search", "spot-search-2", "spot-search-3", "spot-search-4", "spot-search-5", "spot-search", "spot-sign_up", "spot-team", "spot-write", "mini-sign", "mini-pots", "mini-erase", "mini-rocket", "mini-empty-history", "mini-upload", "mini-empty-search"];
-
-type LightIllustType = (typeof illustNames)[number];
-type DarkIllustType = (typeof darkIllustNames)[number];
-type IllustType = DarkIllustType | LightIllustType;
-
-interface Source<T extends false | true = true> {
-    name: IllustType;
-    inverse?: T;
-}
-interface IllustProps extends Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'> {
-    width: number;
-    src: {
-        light: Source<false>;
-        dark?: Source;
-    };
-    margin?: Property.Margin<string>;
-}
-declare const Illust: (props: IllustProps) => react_jsx_runtime.JSX.Element;
-
-declare const prefetchIllust: ({ name, isDark, }: {
-    name: IllustType;
-    isDark?: boolean;
-}) => Promise<Response>;
-
-export { Illust, type IllustProps, type Source, prefetchIllust };

package/src/constants/name.ts

@@ -1,84 +0,0 @@
-export const illustNames = [
-  'hero-gift',
-  'hero-search',
-  'mini-approve',
-  'mini-documents-2',
-  'mini-documents-3',
-  'mini-documents-4',
-  'mini-documents-5',
-  'mini-documents',
-  'mini-egg',
-  'mini-empty-message',
-  'mini-empty',
-  'mini-gift',
-  'mini-graduation_hat',
-  'mini-not-search',
-  'mini-not-ticket-2',
-  'mini-private',
-  'mini-search',
-  'mini-ticket',
-  'mini-ticket-3',
-  'mini-window',
-  'spot-catch_star',
-  'spot-clap',
-  'spot-empty',
-  'spot-gift',
-  'spot-no_search',
-  'spot-search-2',
-  'spot-search-3',
-  'spot-search-4',
-  'spot-search-5',
-  'spot-search',
-  'spot-sign_up',
-  'spot-team',
-  'spot-write',
-  'mini-sign',
-  'mini-pots',
-  'mini-erase',
-  'mini-rocket',
-  'mini-empty-history',
-  'mini-upload',
-  'mini-empty-search',
-] as const;
-export const darkIllustNames = [
-  'hero-gift',
-  'hero-search',
-  'mini-approve',
-  'mini-documents-2',
-  'mini-documents-3',
-  'mini-documents-4',
-  'mini-documents-5',
-  'mini-documents',
-  'mini-egg',
-  'mini-empty-message',
-  'mini-empty',
-  'mini-gift',
-  'mini-graduation_hat',
-  'mini-not-search',
-  'mini-not-ticket-2',
-  'mini-private',
-  'mini-search',
-  'mini-ticket',
-  'mini-ticket-3',
-  'mini-window',
-  'spot-catch_star',
-  'spot-clap',
-  'spot-empty',
-  'spot-gift',
-  'spot-no_search',
-  'spot-search-2',
-  'spot-search-3',
-  'spot-search-4',
-  'spot-search-5',
-  'spot-search',
-  'spot-sign_up',
-  'spot-team',
-  'spot-write',
-  'mini-sign',
-  'mini-pots',
-  'mini-erase',
-  'mini-rocket',
-  'mini-empty-history',
-  'mini-upload',
-  'mini-empty-search',
-] as const;

package/src/types/illust.ts

@@ -1,5 +0,0 @@
-import { darkIllustNames, illustNames } from '../constants/name';
-
-type LightIllustType = (typeof illustNames)[number];
-type DarkIllustType = (typeof darkIllustNames)[number];
-export type IllustType = DarkIllustType | LightIllustType;