Merge pull request #13 from JECT-Study/feat/kakao-login

splash, app icon, login

Author: scorchedrice

app.config.js

@@ -6,7 +6,7 @@ export default {
   owner: "scorchedrice",
   version: "1.0.0",
   orientation: "portrait",
-  icon: "./assets/images/icon.png",
+  icon: "./assets/mycode_icon.png",
   scheme: "mycode",
   userInterfaceStyle: "automatic",
   newArchEnabled: true,
@@ -15,6 +15,7 @@ export default {
     supportsTablet: true,
     usesAppleSignIn: true,
     bundleIdentifier: process.env.MYCODE_BUNDLE_IDENTIFIER,
+    // bundleIdentifier: process.env.MYCODE_SERVICE_IDENTIFIER,
     infoPlist: {
       LSApplicationQueriesSchemes: [
         "kakaokompassauth",
@@ -52,10 +53,10 @@ export default {
     [
       "expo-splash-screen",
       {
-        image: "./assets/images/splash-icon.png",
+        image: "./assets/images/mycode_splash.png",
         imageWidth: 200,
         resizeMode: "contain",
-        backgroundColor: "#ffffff",
+        backgroundColor: "#111111",
       },
     ],
     [
@@ -104,6 +105,7 @@ export default {
 
   extra: {
     kakaoNativeAppKey: process.env.MYCODE_KAKAO_NATIVE_APP_KEY,
+    kakaoWebAppKey: process.env.MYCODE_KAKAO_REST_API_KEY,
     BACKEND_URL: process.env.MYCODE_BACKEND_URL,
     NAVER_MAP_CLIENT_ID: process.env.NAVER_MAP_CLIENT_ID,
     eas: {

app/(tabs)/my/like.tsx

@@ -17,7 +17,7 @@ export default function Like() {
   const [infodummy, setInfodummy] = useState(DUMMY_EVENT_POSTS);
   const selected = useCategorySelected();
 
-  // TODO : api test
+  // TODO : api test, 에러로 확인 필요.
   useEffect(() => {
     const fetchResult = async () => {
       try {

app/(tabs)/my/plan.tsx

@@ -1,9 +1,31 @@
+import { useEffect } from "react";
+
+import axios, { AxiosError } from "axios";
 import { router } from "expo-router";
 import { SafeAreaView, View, Text } from "react-native";
 
 import CustomHeader from "@/components/ui/CustomHeader";
+import { UsersScheduleUrl } from "@/constants/ApiUrls";
 
 export default function Plan() {
+  useEffect(() => {
+    const getSchedule = async () => {
+      try {
+        const response = await axios(`${UsersScheduleUrl}/check`, {
+          params: {
+            month: "2025-06", // TODO: 실제 날짜로 변경
+          },
+        });
+        console.log(response);
+      } catch (e) {
+        const axiosError = e as AxiosError;
+        console.error(axiosError);
+      }
+    };
+    getSchedule();
+    // test
+  }, []);
+
   return (
     <>
       <SafeAreaView className="w-full flex-1 bg-white">

app/_layout.tsx

@@ -8,19 +8,35 @@ import {
 import Constants from "expo-constants";
 import { useFonts } from "expo-font";
 import { Stack } from "expo-router";
+import * as SplashScreen from "expo-splash-screen";
 import { StatusBar } from "expo-status-bar";
 import { View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "react-native-reanimated";
 
 import { useColorScheme } from "@/hooks/useColorScheme";
 
+import { useEffect } from "react";
+
+SplashScreen.setOptions({
+  duration: 1000,
+  fade: true,
+});
+
+SplashScreen.preventAutoHideAsync();
+
 export default function RootLayout() {
   const colorScheme = useColorScheme();
   const [loaded] = useFonts({
     SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
   });
 
+  useEffect(() => {
+    if (loaded) {
+      SplashScreen.hideAsync();
+    }
+  }, [loaded]);
+
   if (!loaded) {
     // Async font loading only occurs in development.
     return null;

app/index.tsx

@@ -1,9 +1,32 @@
+import { useEffect } from "react";
+
+import { useRouter } from "expo-router";
+import * as SecureStore from "expo-secure-store";
 import { View, Text } from "react-native";
 
 import LoginCardSlider from "@/components/login/LoginCardSlider";
 import SocialLoginButtons from "@/components/login/SocialLoginButtons";
 
 export default function Login() {
+  const router = useRouter();
+
+  useEffect(() => {
+    const checkTokens = async () => {
+      console.log("토큰 확인 - useEffect 실행됨");
+      const storeAccessToken = await SecureStore.getItemAsync("accessToken");
+      const storeRefreshToken = await SecureStore.getItemAsync("refreshToken");
+      console.log("토큰 상태:", { storeAccessToken, storeRefreshToken });
+      if (storeAccessToken && storeRefreshToken) {
+        console.log("토큰 존재 - 탭으로 이동");
+        router.replace("/(tabs)");
+      } else {
+        console.log("토큰 없음 - 로그인 화면 유지");
+      }
+    };
+
+    checkTokens();
+  }); // 의존성 배열 없음 - 매 렌더링마다 실행
+
   return (
     <View className="flex-1 items-center bg-black">
       <LoginCardSlider />

assets/images/mycode_splash.png

@@ -1,26 +1,42 @@
 import { useEffect } from "react";
 
 import { initializeKakaoSDK } from "@react-native-kakao/core";
-import { login } from "@react-native-kakao/user";
+import { login, me } from "@react-native-kakao/user";
 import Constants from "expo-constants";
+import { router } from "expo-router";
+import * as SecureStore from "expo-secure-store";
 import { Pressable, Text } from "react-native";
 
 import KakaoIcon from "@/components/icons/KakaoIcon";
+import { LoginUrl } from "@/constants/ApiUrls";
+import { publicApi } from "@/features/axios/axiosInstance";
 
 export default function KakaoLogin() {
   const kakaoNativeAppKey =
     Constants.expoConfig?.extra?.kakaoNativeAppKey ?? "";
+
   useEffect(() => {
     initializeKakaoSDK(kakaoNativeAppKey);
   }, [kakaoNativeAppKey]);
 
-  // TODO : 추후 로그인 기능 관련 논의 필요
   async function kakaoLogin() {
     try {
-      const res = await login();
-      console.log(res);
+      await login();
+      const profile = await me();
+      const id = profile.id;
+
+      const response = await publicApi.post(LoginUrl, {
+        socialId: id,
+        socialType: "KAKAO",
+      });
+      const accessToken = response.data.result.accessToken;
+      const refreshToken = response.data.result.refreshToken;
+      await SecureStore.setItemAsync("accessToken", accessToken);
+      await SecureStore.setItemAsync("refreshToken", refreshToken);
+      router.push("/(tabs)");
     } catch (error) {
-      console.log(error);
+      // 카카오 로그인 취소 시에는 에러 메시지를 표시하지 않음
+      console.log("카카오 로그인 취소 또는 에러:", error);
     }
   }
 

assets/mycode_icon.png

@@ -1,13 +1,14 @@
 import { LinearGradient } from "expo-linear-gradient";
 import { router } from "expo-router";
-import { Pressable, Text, View } from "react-native";
+import { Platform, Pressable, Text, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import AppleLogin from "@/components/login/AppleLogin";
 import KakaoLogin from "@/components/login/KakaoLogin";
 
 export default function SocialLoginButtons() {
   const insets = useSafeAreaInsets();
+  const isIOS = Platform.OS === "ios";
   return (
     <View className="w-full">
       <LinearGradient
@@ -21,7 +22,7 @@ export default function SocialLoginButtons() {
         <View className="w-full items-center">
           <KakaoLogin />
           <View className="my-2" />
-          <AppleLogin />
+          {isIOS ? <AppleLogin /> : null}
         </View>
         <Pressable
           onPress={() => router.push("/(tabs)")}

components/login/KakaoLogin.tsx

@@ -1,9 +1,14 @@
+import { AxiosError } from "axios";
+import { router } from "expo-router";
+import * as SecureStore from "expo-secure-store";
 import { Alert, View } from "react-native";
 
 import MyPageMenu from "@/components/mypage/MyPageMenu";
+import { LogoutUrl } from "@/constants/ApiUrls";
+import { authApi } from "@/features/axios/axiosInstance";
 import usePageNavigation from "@/hooks/usePageNavigation";
 
-const handleLogout = () => {
+const handleLogout = async () => {
   Alert.alert(
     "로그아웃", // 타이틀
     "정말 로그아웃 하시겠어요?", // 메시지
@@ -14,9 +19,19 @@ const handleLogout = () => {
       },
       {
         text: "로그아웃",
-        onPress: () => {
-          // TODO 실제 로그아웃 로직
-          console.log("로그아웃!");
+        onPress: async () => {
+          try {
+            // await authApi.post(LogoutUrl);
+            await SecureStore.deleteItemAsync("accessToken");
+            await SecureStore.deleteItemAsync("refreshToken");
+            alert("로그아웃이 완료되었습니다.");
+
+            router.dismissAll();
+            router.push("/");
+          } catch (error) {
+            const axiosError = error as AxiosError;
+            alert(`로그아웃 도중 에러가 발생했습니다. ${axiosError.message}`);
+          }
         },
         style: "default",
       },