Feature/mvp1

src/api/client.ts

@@ -1,4 +1,6 @@
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+import { getOrCreateDeviceId } from '../utils/deviceId';
+import { getOrCreateUserId, setUserId } from '../utils/userId';
 
 interface ApiResponse<TData> {
   success: boolean;
@@ -58,6 +60,16 @@ const getRequestHeaders = (headers?: HeadersInit) => {
   return requestHeaders;
 };
 
+// data에 userId가 실려오면 로컬 저장소 값을 서버 확정 값으로 갱신
+const syncUserIdFromResponseData = (data: unknown): void => {
+  if (data && typeof data === 'object' && 'userId' in data) {
+    const responseUserId = (data as { userId?: unknown }).userId;
+    if (typeof responseUserId === 'string' && responseUserId.length > 0) {
+      setUserId(responseUserId);
+    }
+  }
+};
+
 export const apiRequest = async <TResponse>(
   path: string,
   options: RequestInit = {},
@@ -79,6 +91,8 @@ export const apiRequest = async <TResponse>(
 
   const result = (await response.json()) as ApiResponse<TResponse>;
 
+  syncUserIdFromResponseData(result.data);
+
   return result.data;
 };
 
@@ -99,3 +113,25 @@ export const authorizedApiRequest = async <TResponse>(
     headers,
   });
 };
+
+export const apiRequestWithGuestFallback = async <TResponse>(
+  path: string,
+  options: RequestInit = {},
+): Promise<TResponse> => {
+  const headers = getRequestHeaders(options.headers);
+  const accessToken = getAccessToken();
+
+  // userId는 로그인 여부와 무관하게 항상 전송 (없으면 새로 생성해서 전송)
+  headers.set('X-User-Id', getOrCreateUserId());
+
+  if (accessToken) {
+    headers.set('Authorization', `Bearer ${accessToken}`);
+  } else {
+    headers.set('X-Device-Id', getOrCreateDeviceId());
+  }
+
+  return apiRequest<TResponse>(path, {
+    ...options,
+    headers,
+  });
+};

src/api/jetlagApi.ts

@@ -0,0 +1,17 @@
+// src/services/jetlagApi.ts
+import { apiRequestWithGuestFallback } from '@/api/client';
+import type { JetlagResult } from '../stores/useSleepStore';
+
+export interface JetlagRequest {
+  currentBedtime: string;
+  currentWaketime: string;
+  targetBedtime: string;
+  targetWaketime: string;
+}
+
+export const fetchJetlagResult = async (body: JetlagRequest): Promise<JetlagResult> => {
+  return apiRequestWithGuestFallback<JetlagResult>('/api/sleep/jetlag', {
+    method: 'POST',
+    body: JSON.stringify(body),
+  });
+};

src/pages/JetLagCalculator/OnboardingScreen.tsx

@@ -1,11 +1,23 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import GlobeBackground from './components/GlobeBackground';
-import { PrimaryButton } from './components/PrimaryButton';
 
 const GLOBE_ALTITUDE = 1.2;
 const GLOBE_FOCUS_LAT = 10;
 const GLOBE_FOCUS_LNG = 20;
+const AUTO_NAVIGATE_DELAY_MS = 3000;
 
 const OnboardingScreen = () => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      navigate('/jetlag/current-sleep-time');
+    }, AUTO_NAVIGATE_DELAY_MS);
+
+    return () => clearTimeout(timer);
+  }, [navigate]);
+
   return (
     <div className="relative z-0 flex h-full w-full flex-col justify-end">
       {/* 배경 지구본 */}
@@ -15,7 +27,7 @@ const OnboardingScreen = () => {
         focusLng={GLOBE_FOCUS_LNG}
       />
 
-      <div className="relative z-10 flex flex-1 items-center justify-center px-[1.5rem]">
+      <div className="relative z-10 flex flex-1 items-center justify-center px-[1.5rem] pb-[calc(env(safe-area-inset-bottom)+3.75rem)]">
         <div className="inline-flex flex-col items-start font-['Pretendard']">
           <h1 className="text-center text-[1.5rem] leading-[2.1rem] font-bold text-[color:var(--White,#FFF)]">
             내 수면시간
@@ -29,14 +41,6 @@ const OnboardingScreen = () => {
           </p>
         </div>
       </div>
-
-      <PrimaryButton
-        navigateTo="/jetlag/current-sleep-time"
-        wrapperClassName="fixed bottom-0 left-0 right-0 z-20 flex justify-center px-[1.25rem] pb-[calc(env(safe-area-inset-bottom)+3.75rem)]"
-        icon="→"
-      >
-        내 수면시차 확인하기
-      </PrimaryButton>
     </div>
   );
 };