From ad5bad1915e22877f77a4bb52ca2e66658d898cb Mon Sep 17 00:00:00 2001 From: Andy Hong Date: Sat, 3 Jan 2026 04:41:53 +0900 Subject: [PATCH 1/4] =?UTF-8?q?chore:=20=EA=B0=9C=EB=B0=9C=20=ED=99=98?= =?UTF-8?q?=EA=B2=BD=EC=9D=84=20=EC=9C=84=ED=95=9C=20=ED=8C=8C=EB=9D=BC?= =?UTF-8?q?=EB=AF=B8=ED=84=B0=20=EC=B6=94=EA=B0=80=20(#20)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.example | 6 ++++-- .env.local.example | 8 ++++++++ .gitignore | 7 ++++++- README.md | 5 +++-- package.json | 2 ++ src/vite-env.d.ts | 11 +++++++++++ 6 files changed, 34 insertions(+), 5 deletions(-) create mode 100644 .env.local.example create mode 100644 src/vite-env.d.ts 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/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/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; +} From 580ff5e7850cd8665760aa54ba0992f08576286a Mon Sep 17 00:00:00 2001 From: Andy Hong Date: Sat, 3 Jan 2026 04:42:11 +0900 Subject: [PATCH 2/4] =?UTF-8?q?docs:=20=ED=8C=8C=EB=9D=BC=EB=AF=B8?= =?UTF-8?q?=ED=84=B0=20=EB=AC=B8=EC=84=9C=ED=99=94=20(#20)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/environment.md | 67 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 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 플랫폼에서 환경 변수를 설정해야 합니다 From b9729e02846d5a9ea0e1f3fcf24076f57e9c13a6 Mon Sep 17 00:00:00 2001 From: Andy Hong Date: Sat, 3 Jan 2026 05:18:20 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=EC=9D=B8=EC=A6=9D=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=20=EA=B4=80=EB=A6=AC=20=EA=B5=AC=ED=98=84=20(#20)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - authStore 추가 - persist 미들웨어로 localStorage 연동 - User, AuthProvider 타입 분리 --- src/stores/authStore.ts | 49 +++++++++++++++++++++++++++++++++++++++++ src/types/auth.ts | 9 ++++++++ 2 files changed, 58 insertions(+) create mode 100644 src/stores/authStore.ts create mode 100644 src/types/auth.ts diff --git a/src/stores/authStore.ts b/src/stores/authStore.ts new file mode 100644 index 00000000..8817eb89 --- /dev/null +++ b/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) => void; +} + +export const useAuthStore = create()( + 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', + }, + ), +); 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; +} From b1601ec9ead55e797882009dc57ed8bdf53fabbe Mon Sep 17 00:00:00 2001 From: Andy Hong Date: Sat, 3 Jan 2026 05:42:09 +0900 Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20isAuthenticated=20=EC=86=8D?= =?UTF-8?q?=EC=84=B1=20=EC=A0=9C=EA=B1=B0=20(#20)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - TO BE: 컴포넌트에서 필요할 때 `const isAuthenticated = useAuthStore(state => !!state.accessToken);` 와 같이 파생해서 사용합니다. --- src/stores/authStore.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/stores/authStore.ts b/src/stores/authStore.ts index 8817eb89..e9079167 100644 --- a/src/stores/authStore.ts +++ b/src/stores/authStore.ts @@ -6,7 +6,6 @@ import type { User } from '@/types/auth'; interface AuthState { user: User | null; accessToken: string | null; - isAuthenticated: boolean; login: (user: User, accessToken: string) => void; logout: () => void; @@ -18,13 +17,11 @@ export const useAuthStore = create()( (set) => ({ user: null, accessToken: null, - isAuthenticated: false, login: (user, accessToken) => { set({ user, accessToken, - isAuthenticated: true, }); }, @@ -32,7 +29,6 @@ export const useAuthStore = create()( set({ user: null, accessToken: null, - isAuthenticated: false, }); },