문제가 발생한다면 @doyle, @eliot에게 문의주세요.

📋 목차

• 개요
• Asset 추가 방법
• Asset 사용 방법
• 주의사항
• 개발 가이드

개요

이 저장소는 Liner의 정적 리소스(이미지, 아이콘, 기타 미디어 파일)를 관리하고 CDN을 통해 제공하는 저장소입니다.

• CDN URL: https://assets.getliner.com
• 배포: GitHub Actions를 통한 자동 배포
• 저장소: Cloudflare R2

Asset 추가 방법

1. 파일 명명 규칙

• 폴더명과 파일명 모두 kebab-case를 따릅니다
• 예시: my-file-name.png, lottie.json

2. 배포 방법

1. assets/ 디렉토리 내 적절한 폴더에 파일 추가
2. main에 즉시 push해도 되고, PR을 만들어도 됩니다.
3. main 브랜치에 변경사항이 생기면 자동으로 CDN에 배포됩니다

3. 폴더 구조 규칙

assets/
├── web/              # 웹 플랫폼
│   ├── welcome/
│   └── [feature]/
├── mobile/           # 모바일 플랫폼
│   ├── onboarding/
│   └── profile/
└── shared/           # 공통 리소스
    └── logos/

• depth1은 platform, depth2부터 feature로 구성합니다.
• depth1을 추가하기 전에 frontend 채널에서 논의해주세요.

Asset 사용 방법

1. Typescript로 사용

Liner Frontend 패키지를 사용하여 타입 안전성을 보장할 수 있습니다:

yarn add @liner-fe/cdn

import { CDN } from "@liner-fe/cdn";

<img src={CDN["web/welcome/desktop.webp"]} />;

2. 직접 URL 사용

https://assets.getliner.com/[폴더명]/[파일명]

예시:

• https://assets.getliner.com/web/welcome/desktop.webp

주의사항

1. SVG 파일 관리

• 문제: SVG를 URL로 가져오는 경우 깜빡이는 이슈 발생
• 해결책: HTML에 inline으로 관리하는 것을 권장

2. 파일 크기 최적화

• WebP, AVIF 등 최신 포맷 사용 권장

3. 커밋 작성 방식

• [feat] xxx, [chore] xxx 대신 feat: xxx, chore: xxx로 작성