feat: 로그인 성공 시 토큰 저장 및 홈 스크린 이동

src/api/auth.ts

@@ -0,0 +1,28 @@
+import { apiFetch } from "./client";
+
+export type LoginRequest = {
+  loginId: string;
+  password: string;
+};
+
+export async function loginApi(body: LoginRequest): Promise<string> {
+  try {
+    const res = await apiFetch("/api/v1/auth/login", {
+      method: "POST",
+      body: JSON.stringify(body),
+    });
+
+    console.log("res status:", res.status);
+    const json = (await res.json()) as any;
+
+    const token: string | undefined =
+      json?.data?.accessToken ?? json?.accessToken ?? json?.data?.token;
+
+    if (!token) throw new Error("No accessToken in response");
+
+    return token;
+  } catch (e) {
+    console.error("로그인 api 실패:", e);
+    throw e;
+  }
+}

src/api/client.ts

@@ -0,0 +1,25 @@
+function getApiBaseUrl() {
+  const url = process.env.EXPO_PUBLIC_API_BASE_URL?.trim();
+  if (!url) throw new Error("Missing EXPO_PUBLIC_API_BASE_URL");
+  return url.replace(/\/$/, "");
+}
+
+export async function apiFetch(path: string, init?: RequestInit) {
+  const API_BASE_URL = getApiBaseUrl();
+  const safePath = path.startsWith("/") ? path : `/${path}`;
+
+  const res = await fetch(`${API_BASE_URL}${safePath}`, {
+    ...init,
+    headers: {
+      "Content-Type": "application/json",
+      ...(init?.headers ?? {}),
+    },
+  });
+
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    throw new Error(`HTTP ${res.status} ${res.statusText} ${text}`);
+  }
+
+  return res;
+}

src/navigation/AuthGate.tsx

@@ -1,10 +1,10 @@
 import React from "react";
+import { useAuth } from "../store/auth";
 import AppStack from "./AppStack";
 import AuthStack from "./AuthStack";
 
 export default function AuthGate() {
-  // const { isAuthed } = useAuth();
-  const isAuthed = true;
-  // return <AuthStack />;
+  const { isAuthed } = useAuth();
+
   return isAuthed ? <AppStack /> : <AuthStack />;
 }

src/screens/HomeScreen.tsx

@@ -1,9 +1,17 @@
-import { StyleSheet, Text, View } from "react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { Button, StyleSheet, View } from "react-native";
 
 export default function HomeScreen() {
   return (
     <View style={styles.container}>
-      <Text>feawfewa</Text>
+      <Button
+        title="Debug Storage"
+        onPress={async () => {
+          const keys = await AsyncStorage.getAllKeys();
+          const entries = await AsyncStorage.multiGet(keys);
+          console.log(entries);
+        }}
+      />
     </View>
   );
 }

src/screens/LoginScreen.tsx

@@ -1,12 +1,18 @@
-import React from "react";
+import React, { useState } from "react";
 import { Pressable, StyleSheet, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import AppText from "../components/ui/AppText";
 import Button from "../components/ui/Button";
 import Input from "../components/ui/Input";
+import { useAuth } from "../store/auth";
 import { Theme } from "../theme/theme";
 
 export default function LoginScreen() {
+  const { signIn } = useAuth();
+  const [loginId, setLoginId] = useState("");
+  const [password, setPassword] = useState("");
+  const canSubmit = loginId.trim().length > 0 && password.length > 0;
+
   return (
     <SafeAreaView style={styles.safe}>
       <View style={styles.container}>
@@ -20,6 +26,9 @@ export default function LoginScreen() {
           autoCapitalize="none"
           autoCorrect={false}
           textContentType="username"
+          value={loginId}
+          onChangeText={setLoginId}
+          returnKeyType="next"
         />
 
         <View style={{ height: Theme.Spacing.sm }} />
@@ -30,11 +39,22 @@ export default function LoginScreen() {
           autoCapitalize="none"
           autoCorrect={false}
           textContentType="password"
+          value={password}
+          onChangeText={setPassword}
+          returnKeyType="done"
+          onSubmitEditing={() => {
+            if (canSubmit) signIn(loginId.trim(), password);
+          }}
         />
 
         <View style={{ height: Theme.Spacing.lg }} />
 
-        <Button title="Continue" onPress={() => {}} />
+        <Button
+          title="Continue"
+          onPress={() => {
+            signIn(loginId, password);
+          }}
+        />
 
         <View style={{ height: Theme.Spacing.md }} />
 

src/store/auth.tsx

@@ -1,24 +1,58 @@
-import React, { createContext, useContext, useMemo, useState } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { loginApi } from "../api/auth";
+
+const ACCESS_TOKEN_KEY = "accessToken";
 
 export type AuthContextValue = {
+  accessToken: string | null;
   isAuthed: boolean;
-  login: () => void;
-  logout: () => void;
+  isHydrating: boolean; // 앱 시작 시 저장소에서 토큰 읽는 중인지
+  signIn: (loginId: string, password: string) => Promise<void>;
+  signOut: () => Promise<void>;
 };
 
 const AuthContext = createContext<AuthContextValue | null>(null);
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
-  const [isAuthed, setIsAuthed] = useState<boolean>(false);
-  console.log("isAuthed: " + isAuthed);
+  const [accessToken, setAccessToken] = useState<string | null>(null);
+  const [isHydrating, setIsHydrating] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      const stored = await AsyncStorage.getItem(ACCESS_TOKEN_KEY);
+      setAccessToken(stored);
+      setIsHydrating(false);
+    })();
+  }, []);
+
+  const signIn = useCallback(async (loginId: string, password: string) => {
+    const token = await loginApi({ loginId, password });
+    setAccessToken(token);
+    await AsyncStorage.setItem(ACCESS_TOKEN_KEY, token);
+  }, []);
+
+  const signOut = useCallback(async () => {
+    setAccessToken(null);
+    await AsyncStorage.removeItem(ACCESS_TOKEN_KEY);
+  }, []);
 
   const value = useMemo<AuthContextValue>(
     () => ({
-      isAuthed,
-      login: () => setIsAuthed(true),
-      logout: () => setIsAuthed(false),
+      accessToken,
+      isAuthed: accessToken != null,
+      isHydrating,
+      signIn,
+      signOut,
     }),
-    [isAuthed]
+    [accessToken, isHydrating, signIn, signOut]
   );
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;