diff --git a/.gitignore b/.gitignore
index f60f5a54..ac0ffe4a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -50,3 +50,7 @@ node_modules/
/blob-report/
/playwright/.cache/
/playwright/.auth/
+
+# Local certificates
+.cert/
+mkcert.exe
\ No newline at end of file
diff --git a/README.md b/README.md
index 676e6d7c..7dfea418 100644
--- a/README.md
+++ b/README.md
@@ -66,7 +66,7 @@ pnpm install
```bash
// .env.local
# API 요청 주소
-NEXT_PUBLIC_API_BASE_URL=https://example.com/api/v1
+NEXT_PUBLIC_API_BASE_URL=https://api.wego.monster/api/v1
# MSW 설정
NEXT_PUBLIC_MSW_ENABLED=true // Or false
```
@@ -111,6 +111,139 @@ pnpm build-storybook
+
+🗝️ HTTPS 로컬 개발 환경 설정 가이드
+
+### 1. mkcert 다운로드 및 설치
+
+**Windows:**
+
+(1) https://github.com/FiloSottile/mkcert/releases 접속
+
+(2) mkcert-v1.4.4-windows-amd64.exe 다운로드
+
+(3) 프로젝트 루트에 mkcert.exe로 저장
+
+```
+📁 WEGO_FRONTEND
+└─ 💿 mkcert.exe
+```
+
+**macOS:**
+
+```bash
+# homeBrew로 설치
+brew install mkcert
+
+# Firefox 사용 시
+brew install nss
+```
+
+### 2. 로컬 CA 설치
+
+**Windows:**
+
+```bash
+.\mkcert.exe -install
+```
+
+**macOS:**
+
+```bash
+mkcert -install
+```
+
+**출력:**
+
+```bash
+The local CA is now installed in the system trust store! ⚡️
+```
+
+### 3. .cert 폴더 생성(프로젝트 루트)
+
+```bash
+# .cert 폴더 생성
+mkdir .cert
+```
+
+### 3-1. 인증서 발급
+
+**Windows:**
+
+```bash
+# 인증서 발급
+.\mkcert.exe -key-file .cert\localhost-key.pem -cert-file .cert\localhost.pem localhost local.wego.monster 127.0.0.1 ::1
+```
+
+**macOS:**
+
+```bash
+mkcert -key-file .cert/localhost-key.pem -cert-file .cert/localhost.pem localhost local.wego.monster 127.0.0.1 ::1
+```
+
+**출력:**
+
+```bash
+Created a new certificate valid for the following names 📜
+ - "localhost"
+ - "local.wego.monster"
+ - "127.0.0.1"
+ - "::1"
+
+The certificate is at ".cert\localhost.pem" and the key at ".cert\localhost-key.pem" ✅
+
+It will expire on 12 March 2028 🗓
+```
+
+```
+📁 WEGO_FRONTEND
+└─ 💿 mkcert.exe
+└─ 📁 .cert
+ ├─ 🔑 localhost-key.pem
+ └─ 🔑 localhost.pem
+```
+
+### 4. hosts 파일 수정
+
+**Windows:** `C:\Windows\System32\drivers\etc\hosts`
+
+(1) 메모장을 **관리자 권한**으로 실행
+
+(2) hosts 파일 열기
+
+(3) 다음 줄 추가:
+
+```
+127.0.0.1 local.wego.monster
+```
+
+### 5. 실행
+
+```bash
+# https 환경으로 실행
+pnpm dev
+
+# 출력 메시지
+> my-app@0.1.0 dev C:\git\wego\WeGo_FrontEnd
+> node scripts/local/dev-server.js
+
+> Ready on https://local.wego.monster:3000
+ ○ Compiling / ...
+ GET / 200 in 5.7s (compile: 5.3s, render: 321ms)
+```
+
+기타
+
+```bash
+# http 환경으로 실행
+pnpm dev:http
+
+# 기존 localhost:3000 으로 실행
+pnpm dev:ci
+```
+
+
+
📁 폴더 구조
diff --git a/package.json b/package.json
index d1776ff3..1fae7706 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,8 @@
"version": "0.1.0",
"private": true,
"scripts": {
- "dev": "next dev -H local.wego.monster",
+ "dev": "node scripts/local/dev-server.js",
+ "dev:http": "next dev -H local.wego.monster",
"dev:ci": "next dev",
"build": "next build",
"start": "next start",
diff --git a/scripts/local/dev-server.js b/scripts/local/dev-server.js
new file mode 100644
index 00000000..7b50fa84
--- /dev/null
+++ b/scripts/local/dev-server.js
@@ -0,0 +1,33 @@
+const { createServer } = require('https');
+const { parse } = require('url');
+const next = require('next');
+const fs = require('fs');
+const path = require('path');
+
+const dev = process.env.NODE_ENV !== 'production';
+const hostname = 'local.wego.monster';
+const port = 3000;
+
+const app = next({ dev, hostname, port });
+const handle = app.getRequestHandler();
+
+const httpsOptions = {
+ key: fs.readFileSync(path.join(__dirname, '../../.cert/localhost-key.pem')),
+ cert: fs.readFileSync(path.join(__dirname, '../../.cert/localhost.pem')),
+};
+
+app.prepare().then(() => {
+ createServer(httpsOptions, async (req, res) => {
+ try {
+ const parsedUrl = parse(req.url, true);
+ await handle(req, res, parsedUrl);
+ } catch (err) {
+ console.error('Error occurred handling', req.url, err);
+ res.statusCode = 500;
+ res.end('internal server error');
+ }
+ }).listen(port, (err) => {
+ if (err) throw err;
+ console.log(`> Ready on https://${hostname}:${port}`);
+ });
+});