Inertia.js

Rails + Inertia.js + Svelte 5 기반으로 여러 프로젝트를 운영하다 보면 하나의 고질적 문제가 생긴다. 각 프로젝트마다 색상, 타이포그래피, 간격 등의 디자인 기준이 제각각이라는 점이다. 어떤 프로젝트는 tailwind.config.js에 체계적으로 정리되어 있고, 어떤 프로젝트는 bg-[#3182F6] 같은 하드코딩이 넘쳐난다. 이번에 전체 프로젝트를 대상으로 디자인 토큰 감사(audit)를 하고, 미적용 프로젝트에 체계를 잡은 과정을 기록한다. 1. 현황 감사: 8개 프로젝트 디자인 시스템 점검 먼저 모든 Svelte + Inertia.js 프로젝트를 대상으로 4가지 기준을 확인했다. 기준 확인 항목 UI 컴포넌트 components/ui/ 디렉토리 존재 여부와 컴포넌트 수 디자인 토큰 tokens.css 또는 CSS 변수 정의 파일 존재 테마 시스템 theme.ts, tailwind.config.js의 색상/타이포 확장 Storybook .storybook/ 디렉토리와 stories 파일 감사 결과 프로젝트 A ✅ 토큰 + Storybook + 카테고리별 컴포넌트 → 완전 적용 프로젝트 B ⚠️ 18개 UI + design-system 문서 있으나 토큰 파일 없음 프로젝트 C ⚠️ 22개 UI + theme.ts 있으나 토큰 체계 없음 프로젝트 D ❌ 15개 UI 있으나 토큰/테마 없음 (보일러플레이트) 프로젝트 E ❌ 5개 UI만, 토큰/테마 없음 프로젝트 F ❌ 도메인별 컴포넌트만, 공통 UI 없음 프로젝트 G ❌ 1개 UI만, 사실상 디자인 시스템 없음 프로젝트 H ❌ 프론트엔드 구조 자체 미완성 8개 중 완전 적용 1개, 부분 적용 2개, 미적용 5개. 예상보다 심각했다. ...

Rails 8 + Inertia.js + Svelte 5 스택에서 역할별 다단계 회원가입과 Resend 이메일 서비스를 연동하면서 겪은 문제들을 정리한다. 1. 역할별 조건부 다단계 회원가입 폼 요구사항 사용자 역할이 두 종류인 서비스에서 회원가입 플로우를 다르게 가져가야 했다. 역할 A: 기본 정보 → 업무 선택 → 소속 정보 (3단계) 역할 B: 기본 정보 → 업무 선택 (2단계, 소속 정보 불필요) Svelte 5 Runes로 조건부 스텝 구현 $derived로 역할에 따라 전체 스텝 수와 버튼 동작을 동적으로 처리했다. ...

Rails + Inertia.js + Svelte 앱을 배포한 뒤 접속하면 완전히 빈 화면만 보였다. 서버는 정상이고 에셋도 다 로드되는데 화면이 안 그려지는 상황. 원인 추적부터 해결까지 정리한다. 증상 배포된 URL 접속 시 빈 화면 (흰색 배경만 표시) 로컬 개발 서버에서는 정상 동작 아무런 에러 페이지 없이 그냥 빈 화면 진단 과정 Step 1: HTTP 응답 확인 curl -s -o /dev/null -w "%{http_code}" https://example.com/ # 200 HTTP 200 OK. 서버 자체는 정상 응답 중이다. ...

Rails 8 + Inertia.js + Svelte 5 스택으로 펫(반려동물) 프로필 아바타를 이미지 또는 색상으로 선택하는 기능을 구현하면서 겪은 문제들을 정리한다. 문제 1: 색상이 DB에 저장되지 않았다 증상 처음 코드를 보니 펫 카드에 색상을 표시할 때 이런 식으로 되어 있었다. const PET_COLORS = ['#f3caa1', '#b7ddf9', '#d3c8ff', '#c5d5f4', '#ffd9aa'] function petColor(index: number): string { return PET_COLORS[index % PET_COLORS.length] } 펫을 생성한 순서(인덱스) 로 색상을 결정하는 구조였다. 색상을 DB에 아예 저장하지 않았으니, 사용자가 색상을 바꿔도 새로고침하면 원래 색상으로 돌아왔다. 해결 마이그레이션으로 avatar_color 컬럼을 추가하고 기본값을 지정했다. ...