feat/인증 상태 관리

.env.example

@@ -1,6 +1,8 @@
+# 환경 변수 예시
+# 실제 값을 환경별 파일에서 설정하세요
 
-# API
+# API 서버 URL
 VITE_API_URL=
 
-# App
+# 앱 이름
 VITE_APP_TITLE=또랑

.env.local.example

@@ -0,0 +1,8 @@
+# 로컬 개발용 환경 변수 예시
+# 이 파일을 복제하여 .env.local 생성 후 실제 값을 설정하세요
+
+# API 서버 URL
+VITE_API_URL=
+
+# 앱 이름
+VITE_APP_TITLE=또랑

.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/*

README.md

@@ -19,6 +19,7 @@
 
 </div>
 
-## 컨벤션
+## 문서
 
-[컨벤션 문서 바로가기](./CONVENTION.md)
+- [컨벤션](./CONVENTION.md)
+- [환경 변수 설정](./docs/environment.md)

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 플랫폼에서 환경 변수를 설정해야 합니다

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",

src/stores/authStore.ts

@@ -0,0 +1,49 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+import type { User } from '@/types/auth';
+
+interface AuthState {
+  user: User | null;
+  accessToken: string | null;
+  isAuthenticated: boolean;
+
+  login: (user: User, accessToken: string) => void;
+  logout: () => void;
+  updateUser: (user: Partial<User>) => void;
+}
+
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      user: null,
+      accessToken: null,
+      isAuthenticated: false,
+
+      login: (user, accessToken) => {
+        set({
+          user,
+          accessToken,
+          isAuthenticated: true,
+        });
+      },
+
+      logout: () => {
+        set({
+          user: null,
+          accessToken: null,
+          isAuthenticated: false,
+        });
+      },
+
+      updateUser: (userUpdates) => {
+        set((state) => ({
+          user: state.user ? { ...state.user, ...userUpdates } : null,
+        }));
+      },
+    }),
+    {
+      name: 'auth-storage',
+    },
+  ),
+);

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;
+}

src/vite-env.d.ts

@@ -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;
+}