Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions .env.example
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
# 환경 변수 예시
# 실제 값을 환경별 파일에서 설정하세요

# API
# API 서버 URL
VITE_API_URL=

# App
# 앱 이름
VITE_APP_TITLE=또랑
8 changes: 8 additions & 0 deletions .env.local.example
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# 로컬 개발용 환경 변수 예시
# 이 파일을 복제하여 .env.local 생성 후 실제 값을 설정하세요

# API 서버 URL
VITE_API_URL=

# 앱 이름
VITE_APP_TITLE=또랑
7 changes: 6 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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/*
Expand Down
5 changes: 3 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@

</div>

## 컨벤션
## 문서

[컨벤션 문서 바로가기](./CONVENTION.md)
- [컨벤션](./CONVENTION.md)
- [환경 변수 설정](./docs/environment.md)
67 changes: 67 additions & 0 deletions docs/environment.md
Original file line number Diff line number Diff line change
@@ -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 플랫폼에서 환경 변수를 설정해야 합니다
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
45 changes: 45 additions & 0 deletions src/stores/authStore.ts
Original file line number Diff line number Diff line change
@@ -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<User>) => void;
}

export const useAuthStore = create<AuthState>()(
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',
},
),
);
9 changes: 9 additions & 0 deletions src/types/auth.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export type AuthProvider = 'google' | 'kakao' | 'naver';

export interface User {
id: string;
name: string;
email: string;
provider: AuthProvider;
profileImage?: string;
}
11 changes: 11 additions & 0 deletions src/vite-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/// <reference types="vite/client" />
/// <reference types="vite-plugin-svgr/client" />

interface ImportMetaEnv {
readonly VITE_API_URL: string;
readonly VITE_APP_TITLE: string;
}

interface ImportMeta {
readonly env: ImportMetaEnv;
}