Project structure

Supaplate의 기능을 살펴보기 전에, 프로젝트 구조에 익숙해져야 합니다.

이 섹션에서는 주요 디렉토리(Directory)와 그 목적에 대한 간략한 개요를 제공합니다. 각 파일에 대한 자세한 설명은 소스 코드 내 주석을 참고하세요.

프로젝트는 다음과 같은 주요 디렉토리로 구성되어 있습니다:

├── 📁app/
├── 📁e2e/
├── 📁public/
├── 📁sql/
└── 📁transactional-emails/

app

app 디렉토리는 프로젝트의 주요 디렉토리입니다.

├── 📁core/
├── 📁debug/
├── 📁locales/
├── 📁features/
│   📁├── auth/
│   📁├── blog/
│   📁├── contact/
│   📁├── cron/
│   📁├── home/
│   📁├── legal/
│   📁├── payments/
│   📁├── settings/
│   📁└── users/
├── 📄i18n.ts# Internationalization Configuration
├── 📄root.tsx# Root component (React Router Specific)
├── 📄routes.ts# Routes (React Router Specific)
├── 📄app.css# CSS file (Tailwind CSS + Shadcn UI variables)
├── 📄entry.client.tsx# Client entry point (React Router Specific)
└── 📄entry.server.tsx# Server entry point (React Router Specific)

core

core 디렉토리에는 프로젝트의 핵심 기능이 들어 있습니다. 이곳에는 프로젝트 전체에서 공유되고 여러 기능에 사용되는 모든 컴포넌트, hooks, utils 등이 들어 있습니다.

debug

debug 디렉토리에는 Sentry 와 Google Analytics 연동을 디버깅하는 데 도움이 되는 몇 가지 파일이 포함되어 있으며, 프로덕션에 배포하기 전에 삭제해야 합니다.

locales

locales 디렉토리에는 프로젝트의 번역 예제가 포함되어 있습니다.

├── 📄en.ts# Language code for English.
├── 📄es.ts# Language code for Spanish.
└── 📄ko.ts# Language code for Korean.

features

features 디렉토리에는 프로젝트의 기능이 포함되어 있으며, 각 기능은 다음과 같은 폴더를 포함할 수 있습니다:

├── 📁lib/# Utility functions.
├── 📁api/# API routes.
├── 📁components/# Components.
├── 📁screens/# Screens.
├── 📁layouts/# Layouts.
├── 📁docs/# Only used by the blog and legal features.
├── 📄mutations.ts# Code that modifies data in the database.
├── 📄queries.ts# Code that reads data from the database.
└── 📄schema.ts# Drizzle ORM schema.

e2e

e2e 디렉토리에는 프로젝트의 End-to-End(E2E) 테스트가 포함되어 있습니다.

├── 📁assets/# Assets used by the tests.
│   📄└── avatar-test.jpg
├── 📁auth/# End-to-end tests for the auth feature.
│   📄├── forgot-password.spec.ts
│   📄├── join.spec.ts
│   📄├── login.spec.ts
│   📄└── magic-link.spec.ts
├── 📁settings/# End-to-end tests for the settings feature.
│   📄└── settings.spec.ts
├── 📁users/# End-to-end tests for the users feature.
│   📄├── change-email.spec.ts
│   📄├── change-password.spec.ts
│   📄├── delete-profile.spec.ts
│   📄└── edit-profile.spec.ts
└── 📁utils/# Utility functions for the tests.
└── 📄test-helpers.ts

sql

sql 디렉토리는 Drizzle Kit에 의해 생성된 마이그레이션(migration) 파일과 몇 가지 유용한 함수가 포함된 functions 디렉토리를 포함하고 있습니다.

├── 📁functions/
│   📄└── handle_sign_up.sql
│   📄└── set_updated_at.sql
└── 📁migrations/

transactional-emails

transactional-emails 디렉토리는 완전한 React Email 프로젝트입니다.

├── 📁emails/# React Email Templates
│   📄├── change-email.tsx
│   📄├── confirm-email.tsx
│   📄├── magic-link.tsx
│   📄├── reset-password.tsx
│   📄└── welcome.tsx
├── 📁out/# Rendered HTML Output
│   📄├── change-email.html
│   📄├── confirm-email.html
│   📄├── magic-link.html
│   📄└── reset-password.html
├── 📄package-lock.json
└── 📄package.json