@liner-fe/illust 0.1.6 → 0.1.7

package/.ultra.cache.json

@@ -0,0 +1 @@
+{"files":{"lib":"1760605459889.4683",".gitignore":"dc555529d53e3f2c4f0e55a863459c4b37d735aa","CHANGELOG.md":"677998a160c0e099f34e7b6277ce9e0a905f6ebe.1760605418770.452","README.md":"63221bc63a67877867f2e5687df18a8fd094aaeb","config/tsup/tsup.config.ts":"a859643cfe271fbb36f8dcdbddf48e2a50cd3467","package.json":"4cafd85c35c17ec1315da5b50d16cd2781427f95.1760605418762.452","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.d.ts

@@ -2,15 +2,8 @@ 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;
+    name: string;
     inverse?: T;
 }
 interface IllustProps extends Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'> {
@@ -24,7 +17,7 @@ interface IllustProps extends Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImage
 declare const Illust: (props: IllustProps) => react_jsx_runtime.JSX.Element;
 
 declare const prefetchIllust: ({ name, isDark, }: {
-    name: IllustType;
+    name: string;
     isDark?: boolean;
 }) => Promise<Response>;
 

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,9 +1,10 @@
 {
   "name": "@liner-fe/illust",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "scripts": {
-    "build": "yarn tsup --config ./config/tsup/tsup.config.ts"
+    "build": "yarn tsup --config ./config/tsup/tsup.config.ts",
+    "build:package": "yarn build"
   },
   "publishConfig": {
     "access": "public",

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/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;