diff --git a/.env.example b/.env.example index 22c43d51..372b252b 100644 --- a/.env.example +++ b/.env.example @@ -1,6 +1,8 @@ +# 환경 변수 예시 +# 실제 값을 환경별 파일에서 설정하세요 -# API +# API 서버 URL VITE_API_URL= -# App +# 앱 이름 VITE_APP_TITLE=또랑 diff --git a/.env.local.example b/.env.local.example new file mode 100644 index 00000000..5c69c115 --- /dev/null +++ b/.env.local.example @@ -0,0 +1,8 @@ +# 로컬 개발용 환경 변수 예시 +# 이 파일을 복제하여 .env.local 생성 후 실제 값을 설정하세요 + +# API 서버 URL +VITE_API_URL= + +# 앱 이름 +VITE_APP_TITLE=또랑 diff --git a/.gitignore b/.gitignore index 3c4fdf74..fb3847aa 100644 --- a/.gitignore +++ b/.gitignore @@ -9,12 +9,17 @@ lerna-debug.log* node_modules dist +dist-ssr bun.lock + +# 환경 변수 .env .env.local +.env.development +.env.production .env.*.local -dist-ssr *.local +!.env.local.example # Editor directories and files .vscode/* diff --git a/README.md b/README.md index cb1d26b1..15ffc53b 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ -## 컨벤션 +## 문서 -[컨벤션 문서 바로가기](./CONVENTION.md) +- [컨벤션](./CONVENTION.md) +- [환경 변수 설정](./docs/environment.md) diff --git a/docs/environment.md b/docs/environment.md new file mode 100644 index 00000000..2b0b876f --- /dev/null +++ b/docs/environment.md @@ -0,0 +1,67 @@ +# 환경 변수 설정 + +## 파일 구조 + +``` +.env.example # 변수 목록 예시 (Git에 포함됨) +.env.local.example # 로컬 개발용 예시 (Git에 포함됨) +.env.development # 개발 서버 설정 (Git에서 제외됨) +.env.production # 프로덕션 설정 (Git에서 제외됨) +.env.local # 로컬 개발용 (Git에서 제외됨) +``` + +## 환경 변수 목록 + +| 변수명 | 설명 | 예시 | +| ---------------- | ------------ | --------------------- | +| `VITE_API_URL` | API 서버 URL | `https://example.com` | +| `VITE_APP_TITLE` | 앱 타이틀 | `또랑` | + +## 스크립트 + +| 명령어 | 환경 | 설명 | +| ------------------- | ----------- | -------------------- | +| `npm run dev` | development | 개발 서버에 연결 | +| `npm run dev:local` | local | 로컬 API 서버에 연결 | +| `npm run build` | production | 프로덕션 빌드 | +| `npm run build:dev` | development | 개발 환경 빌드 | + +## 로컬 개발 설정 + +로컬 API 서버에 연결하려면: + +```bash +# 1. 예시 파일 복사 +cp .env.local.example .env.local + +# 2. .env.local 파일 수정 +VITE_API_URL=http://localhost:8000 + +# 3. 로컬 모드로 실행 +npm run dev:local +``` + +## 환경별 우선순위 + +Vite는 다음 순서로 환경 변수를 로드합니다 (나중에 로드된 값이 우선시됩니다): + +1. `.env` - 모든 환경 +2. `.env.local` - 모든 환경, Git에서 제외됨 +3. `.env.[mode]` - 특정 모드 (development, production, local) +4. `.env.[mode].local` - 특정 모드, Git에서 제외됨 + +## 코드에서 사용 + +```typescript +// 환경 변수 접근 +const apiUrl = import.meta.env.VITE_API_URL; +const appTitle = import.meta.env.VITE_APP_TITLE; + +// 타입 정의는 src/vite-env.d.ts에 있음 +``` + +## 주의사항 + +- `VITE_` 접두사가 있는 변수만 클라이언트에 노출됩니다 +- 환경 변수 파일은 Git에 커밋하지 않습니다 +- 배포 환경에서는 CI/CD 플랫폼에서 환경 변수를 설정해야 합니다 diff --git a/package.json b/package.json index 647ab6ce..84a4a56b 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,9 @@ "type": "module", "scripts": { "dev": "vite", + "dev:local": "vite --mode local", "build": "tsc -b && vite build", + "build:dev": "tsc -b && vite build --mode development", "type-check": "tsc --noEmit", "lint": "eslint .", "preview": "vite preview", diff --git a/src/stores/authStore.ts b/src/stores/authStore.ts new file mode 100644 index 00000000..e9079167 --- /dev/null +++ b/src/stores/authStore.ts @@ -0,0 +1,45 @@ +import { create } from 'zustand'; +import { persist } from 'zustand/middleware'; + +import type { User } from '@/types/auth'; + +interface AuthState { + user: User | null; + accessToken: string | null; + + login: (user: User, accessToken: string) => void; + logout: () => void; + updateUser: (user: Partial) => void; +} + +export const useAuthStore = create()( + persist( + (set) => ({ + user: null, + accessToken: null, + + login: (user, accessToken) => { + set({ + user, + accessToken, + }); + }, + + logout: () => { + set({ + user: null, + accessToken: null, + }); + }, + + updateUser: (userUpdates) => { + set((state) => ({ + user: state.user ? { ...state.user, ...userUpdates } : null, + })); + }, + }), + { + name: 'auth-storage', + }, + ), +); diff --git a/src/types/auth.ts b/src/types/auth.ts new file mode 100644 index 00000000..08f93620 --- /dev/null +++ b/src/types/auth.ts @@ -0,0 +1,9 @@ +export type AuthProvider = 'google' | 'kakao' | 'naver'; + +export interface User { + id: string; + name: string; + email: string; + provider: AuthProvider; + profileImage?: string; +} diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 00000000..dea24b26 --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1,11 @@ +/// +/// + +interface ImportMetaEnv { + readonly VITE_API_URL: string; + readonly VITE_APP_TITLE: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +}