merge: Develop

.env.example

@@ -0,0 +1 @@
+VITE_API_BASE_URL=https://api.heddy.site

.gitignore

@@ -42,6 +42,9 @@ lerna-debug.log*
 !.env.example
 !.env.*.example
 
+# Local HTTPS certificates
+certs/
+
 # Capacitor native platforms
 ios/
 android/

README.md

@@ -12,6 +12,7 @@
 ```
 
 ## 모바일 개발 환경 설정
+
 ```bash
 # iOS 플랫폼 최초 추가
 pnpm ios
@@ -37,6 +38,30 @@ pnpm dev:ios
 pnpm dev:android
 ```
 
+## HTTPS 개발 서버
+
+데스크탑 개발 서버는 HTTPS로 실행됩니다.
+
+```bash
+pnpm dev:desktop
+# https://localhost:5173
+```
+
+모바일 개발 서버와 Capacitor live reload는 WebView의 self-signed 인증서 차단을 피하기 위해 기본적으로 HTTP를 사용합니다. 모바일에서 HTTPS가 꼭 필요하면 환경 변수를 켜서 실행합니다.
+
+```bash
+ENABLE_HTTPS=true pnpm dev:mobile
+# https://localhost:5174
+```
+
+첫 HTTPS 실행 시 로컬 self-signed 인증서가 `certs/`에 자동 생성됩니다. `openssl`이 없는 환경에서는 경고를 출력하고 HTTP로 폴백합니다.
+
+Capacitor live reload URL을 직접 지정해야 하면 다음처럼 실행합니다.
+
+```bash
+CAPACITOR_SERVER_URL=http://<IP>:5174 pnpm dev:ios
+```
+
 ## 빌드
 
 ```bash
@@ -58,4 +83,4 @@ pnpm build:android
 ```bash
 pnpm preview:desktop
 pnpm preview:mobile
-```
+```

capacitor.config.ts

@@ -1,16 +1,17 @@
 /// <reference types="node" />
-import type { CapacitorConfig } from '@capacitor/cli';
+import type { CapacitorConfig } from "@capacitor/cli";
 
-const isLive = process.env.CAPACITOR_LIVE === 'true';
+const isLive = process.env.CAPACITOR_LIVE === "true";
+const liveServerUrl = process.env.CAPACITOR_SERVER_URL ?? "http://localhost:5174";
 
 const config: CapacitorConfig = {
-  appId: 'com.heddy.app',
-  appName: 'heddy',
-  webDir: 'dist/mobile',
+  appId: "com.heddy.app",
+  appName: "heddy",
+  webDir: "dist/mobile",
   ...(isLive && {
     server: {
-      url: 'http://localhost:5174',
-      cleartext: true,
+      url: liveServerUrl,
+      cleartext: liveServerUrl.startsWith("http://"),
     },
   }),
 };

package.json

@@ -39,6 +39,7 @@
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "react-router-dom": "^7.15.0",
+    "react-toastify": "^11.1.0",
     "zustand": "^5.0.14"
   },
   "devDependencies": {

pakages/api/axios.ts

@@ -1,13 +1,14 @@
-import axios from 'axios'
+import axios from "axios";
 
-const baseURL = import.meta.env.VITE_API_BASE_URL ?? ''
+const DEFAULT_API_BASE_URL = "https://api.heddy.site";
+const baseURL = import.meta.env.VITE_API_BASE_URL?.trim() || DEFAULT_API_BASE_URL;
 
 export const api = axios.create({
   baseURL,
   timeout: 10000,
   withCredentials: true,
   headers: {
-    Accept: 'application/json',
-    'Content-Type': 'application/json',
+    Accept: "application/json",
+    "Content-Type": "application/json",
   },
-})
+});

pakages/api/type.ts

@@ -1,15 +1,17 @@
+export type ApiError = {
+  code?: string;
+  message?: string;
+} | null;
+
 export interface ApiResponse<TData = unknown> {
-  data: TData
-  message?: string
-  success?: boolean
-  statusCode?: number
+  success: boolean;
+  message?: string;
+  data: TData;
+  error?: ApiError;
 }
 
 export interface ApiErrorResponse<TError = unknown> {
-  message: string
-  errors?: TError
-  statusCode?: number
+  message: string;
+  errors?: TError;
+  statusCode?: number;
 }
-
-export const ApiResponse = undefined
-export const ApiErrorResponse = undefined

src/main/global.css

@@ -11,6 +11,11 @@
 }
 
 @layer base {
+  html {
+    /* 390px 기준 16px, 좁을수록 줄어들고 최소 14px */
+    font-size: clamp(14px, 4.1vw, 16px);
+  }
+
   html,
   body,
   #root {
@@ -38,6 +43,16 @@
   }
 }
 
+/*
+  iOS input focus zoom 방지
+  - @layer base 안에 두면 Tailwind utilities(text-[0.75rem] 등)에 덮어써짐
+  - @layer 밖에 두면 모든 레이어보다 우선순위가 높아 확실히 적용됨
+  - 16px 미만 font-size 입력창에 포커스 시 iOS Safari/WebKit이 자동 확대하는 동작 차단
+*/
+input, select, textarea {
+  font-size: 16px;
+}
+
 @layer utilities {
   .scrollbar-thin {
     scrollbar-color: #c1c2c3 transparent;

src/renderer/desktop/src/app/App.tsx

@@ -1,12 +1,29 @@
 import { BrowserRouter } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 import { AppRoutes } from "./routes";
+import { setupAuthInterceptor } from "@/entities/auth/model/setupAuthInterceptor";
+
+setupAuthInterceptor();
 
 const App = () => {
   return (
-    <BrowserRouter>
-      <AppRoutes />
-    </BrowserRouter>
+    <>
+      <BrowserRouter>
+        <AppRoutes />
+      </BrowserRouter>
+
+      <ToastContainer
+        position="top-right"
+        limit={1}
+        newestOnTop={false}
+        theme="light"
+        className="font-['Pretendard']"
+        toastClassName="rounded-[10px] text-sm font-medium leading-[140%] shadow-[0_8px_24px_rgba(0,0,0,0.16)]"
+        progressClassName="opacity-80"
+      />
+    </>
   );
 };
 

src/renderer/desktop/src/app/layouts/DesktopLayout.tsx

@@ -10,11 +10,11 @@ const DesktopLayout = () => {
 
   return (
     <div
-      className="h-screen overflow-hidden"
+      className="flex h-screen flex-col overflow-hidden"
       style={{ backgroundColor: lightTheme.background.alternative }}
     >
       <TopBar />
-      <div className="flex h-[calc(100vh-4.25rem)] overflow-hidden">
+      <div className="flex min-h-0 flex-1 overflow-hidden">
         {!isAuthPage && <Sidebar />}
         <main className="min-w-0 flex-1 overflow-hidden">
           <Outlet />

src/renderer/desktop/src/app/routeGuards.tsx

@@ -0,0 +1,54 @@
+import { useEffect } from "react";
+import { Navigate, Outlet, useLocation } from "react-router-dom";
+
+import { getAccessToken } from "@/entities/auth/model/token";
+import { showErrorToast } from "@/lib/toast";
+
+const LOGIN_REQUIRED_TOAST_ID = "desktop-login-required-toast";
+
+const getSafeRedirectPath = (value: string | null) => {
+  if (!value || !value.startsWith("/") || value.startsWith("//")) {
+    return "/";
+  }
+
+  if (value.startsWith("/login") || value.startsWith("/signup")) {
+    return "/";
+  }
+
+  return value;
+};
+
+const useIsAuthenticated = () => Boolean(getAccessToken());
+
+export const ProtectedRoute = () => {
+  const location = useLocation();
+  const isAuthenticated = useIsAuthenticated();
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      return;
+    }
+    showErrorToast("로그인이 필요한 페이지입니다.", {
+      toastId: LOGIN_REQUIRED_TOAST_ID,
+    });
+  }, [isAuthenticated]);
+
+  if (!isAuthenticated) {
+    const redirectPath = `${location.pathname}${location.search}${location.hash}`;
+    return <Navigate to={`/login?redirect=${encodeURIComponent(redirectPath)}`} replace />;
+  }
+
+  return <Outlet />;
+};
+
+export const PublicOnlyRoute = () => {
+  const location = useLocation();
+  const isAuthenticated = useIsAuthenticated();
+  const redirectPath = getSafeRedirectPath(new URLSearchParams(location.search).get("redirect"));
+
+  if (isAuthenticated) {
+    return <Navigate to={redirectPath} replace />;
+  }
+
+  return <Outlet />;
+};

src/renderer/desktop/src/app/routes.tsx

@@ -1,6 +1,7 @@
 import { Route, Routes } from "react-router-dom";
 
 import { DesktopLayout } from "./layouts";
+import { ProtectedRoute, PublicOnlyRoute } from "./routeGuards";
 import { LoginPage } from "@/pages/auth/login";
 import { SignupTermsPage } from "@/pages/auth/signup";
 import { CustomerPage } from "@/pages/customer";
@@ -14,15 +15,20 @@ const AppRoutes = () => {
   return (
     <Routes>
       <Route element={<DesktopLayout />}>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/reservation" element={<ReservationPage />} />
-        <Route path="/customer" element={<CustomerPage />} />
-        <Route path="/customers" element={<CustomerPage />} />
-        <Route path="/procedure" element={<ProcedurePage />} />
-        <Route path="/employee" element={<EmployeePage />} />
-        <Route path="/schedule" element={<SchedulePage />} />
-        <Route path="/login" element={<LoginPage />} />
-        <Route path="/signup" element={<SignupTermsPage />} />
+        <Route element={<ProtectedRoute />}>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/reservation" element={<ReservationPage />} />
+          <Route path="/customer" element={<CustomerPage />} />
+          <Route path="/customers" element={<CustomerPage />} />
+          <Route path="/procedure" element={<ProcedurePage />} />
+          <Route path="/employee" element={<EmployeePage />} />
+          <Route path="/schedule" element={<SchedulePage />} />
+        </Route>
+
+        <Route element={<PublicOnlyRoute />}>
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/signup" element={<SignupTermsPage />} />
+        </Route>
       </Route>
     </Routes>
   );