RoomTuner

Draw your room, let AI arrange it
📌: 방을 직접 그리고 창문·문을 배치하면, AI가 어울리는 가구 배치를 제안해주는 Expo 앱

---

🚀 Introduction

RoomTuner는 방 구조를 직접 그리고, 창문·문을 배치한 뒤, Claude API가 그 방에 어울리는 가구 배치를 제안해주는 모바일 앱입니다. 제안받은 배치는 드래그·회전으로 자유롭게 수정할 수 있고, 마음에 드는 배치는 이름을 붙여 계정에 저장해서 나중에 다시 불러올 수 있습니다.

---

✨ Features

• 🖊️ 방 그리기 사각형·원을 더하고 빼는 CSG 방식으로 원하는 형태의 방을 그림 (room-draw.tsx, polygon-clipping)

• 🚪 창문·문 배치 벽을 탭해서 창문·문을 놓고, 슬라이더로 벽 위 위치를 세밀하게 조정 (room-shape.tsx)

• 🤖 AI 가구 배치 방 구조와 창문·문 위치를 고려해 Claude API가 가구 배치와 배치 이유를 제안 (lib/claude.ts)

• 🪑 배치 편집 제안된 배치를 드래그로 옮기고, 90도씩 회전하고, 가구를 자유롭게 추가·삭제

• 💾 계정 & 저장 회원가입/로그인 후 방 배치에 이름을 붙여 서버에 저장, 목록 화면에서 다시 불러오기 (Cloudflare D1 + R2)

---

📂 Folder Structure

RoomTuner/
├── app/              # 화면 (Expo Router 파일 기반 라우팅)
│   ├── welcome.tsx / login.tsx / register.tsx
│   ├── forgot-password.tsx / reset-password.tsx
│   ├── setup.tsx / room-draw.tsx / room-shape.tsx
│   ├── result.tsx / rooms.tsx
│   └── _layout.tsx   # Stack.Protected 기반 로그인 게이트
├── components/
│   ├── ui/           # Button, Card, Toast 등 공용 컴포넌트
│   ├── room/         # FurnitureInfoPanel
│   └── canvas/       # RoomCanvas (SVG 렌더링)
├── stores/           # roomStore.ts · authStore.ts (Zustand)
├── lib/              # claude.ts · api.ts · tokenStorage.ts
├── constants/        # furniture.ts · theme.ts
├── types/            # room.ts
└── roomtuner-api/    # Cloudflare Workers 백엔드 (별도 프로젝트)
    └── src/index.ts  # 인증 + 방/레이아웃 저장 API

---

🏁 Getting Started

프론트엔드

npm install

루트에 .env.local 생성:

EXPO_PUBLIC_API_URL=https://roomtuner-api.eunseoyu0825.workers.dev
EXPO_PUBLIC_ANTHROPIC_API_KEY=<Claude API 키>

npx expo start

터미널 안내에 따라 웹, iOS 시뮬레이터, Android 에뮬레이터, Expo Go 실기기로 실행할 수 있습니다.

백엔드 (로컬에서 직접 수정·테스트할 때만 필요)

배포된 API를 그대로 쓴다면 아래 과정은 필요 없습니다. 백엔드 코드를 고치고 배포 전에 로컬 검증하고 싶을 때만:

cd roomtuner-api
npm install
npx wrangler dev --ip 0.0.0.0   # 같은 Wi-Fi의 실기기에서 접근 가능하게

실기기로 로컬 서버에 접속하려면 .env.local의 EXPO_PUBLIC_API_URL을 PC의 LAN IP(예: http://192.168.0.10:8787)로 잠깐 바꾸고 Expo를 재시작해야 합니다. 검증이 끝나면:

npm run deploy

---

🔌 API

POST /auth/register          { email, password } → { token, userId }
POST /auth/login             { email, password } → { token, userId }
GET  /auth/me                Bearer token → { userId, email }
POST /auth/forgot-password   { email } → { ok: true }
POST /auth/reset-password    { email, code, newPassword } → { token, userId }

POST /rooms                  Bearer token + { roomId, roomConfig, roomName? } → 저장
GET  /rooms                  Bearer token → [{ roomId, name, updatedAt }]
GET  /rooms/:id              Bearer token → RoomConfig
POST /rooms/:id/layout       Bearer token + LayoutResult → 저장
GET  /rooms/:id/layout       Bearer token → LayoutResult

---

🛠️ Built With

• Frontend: Expo SDK 54, TypeScript, Expo Router v6, Zustand v5, NativeWind v4, react-native-svg, Reanimated v4
• AI: Claude API (@anthropic-ai/sdk)
• Backend: Cloudflare Workers, D1, R2
• Auth: PBKDF2 비밀번호 해싱 + HS256 JWT (Web Crypto API, 외부 라이브러리 없이 직접 구현)

---

⚠️ Known Limitations

• 비밀번호 재설정 코드는 발급되지만, 실제 이메일 발송은 아직 연동되지 않음 (현재는 서버 로그로만 출력)

---

📧 Contact

• Name: Eunseo Yu
• E-mail: eunseoyu0825@gmail.com
• GitHub: 221B0825