카카오 로그인,로그아웃 기능 구현 및 홈 스택페이지 구현#15
Conversation
|
Caution Review failedThe pull request is closed. Possibly related PRs
Poem
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🔭 Outside diff range comments (1)
.env (1)
1-3: Sensitive credentials committed to VCS – remove immediatelyThe Kakao REST API key is publicly exposed in the repo history. Anyone can now abuse your quota or impersonate your app.
- Rotate / revoke the leaked key in the Kakao Developers console ASAP.
- Add
.envto.gitignore.- Commit a safe placeholder file (
.env.example) without real secrets.Proposed quick fix:
-.env +.env +.env.*…then move these values to a secure secrets store (GitHub Actions, Expo server variables, etc.).
🧹 Nitpick comments (27)
.prettierignore (1)
5-6: Possible redundancy betweenbuildanddistentriesIf your CI/CD pipeline generates either
build/ordist/(but not both), including both entries is harmless but redundant noise. Consider keeping only the folder that actually appears in this repository to avoid future confusion.app/(tabs)/home.tsx (2)
1-2: Remove redundant React importWith the automatic JSX transform shipped in React 17+ (supported by Expo SDK 49+), explicit
import React from "react"is no longer required.
Eliminating it reduces noise without affecting functionality.-import React from "react"; +// No import needed – JSX runtime auto-injects React types
4-6: Consider deduplicating one-liner tab wrappersAll five tab files repeat the same “wrapper that just returns PageComponent” pattern. You could DRY this up by exporting the page module directly in
app/(tabs)or generating the wrappers dynamically:// e.g. app/(tabs)/home.tsx export { default } from "../../pages/home/HomePage";This keeps routing intact while removing ~30 LOC across the repo.
app/(tabs)/upload.tsx (2)
1-2: Unnecessary React importSame rationale as the HomeTab file—React import may be safely dropped.
-import React from "react"; +// JSX runtime provides React automatically
4-6: Duplicate wrapper – opportunity to re-exportSee previous comment in
home.tsxfor a concise re-export pattern that removes boilerplate.app/login.tsx (2)
1-2: Drop superfluous React import-import React from "react"; +// React import not required with new JSX transform
4-6: Minor naming consistencyOther tab entry files are suffixed with
Tab(e.g.,HomeTab). While this file isn’t inside(tabs), aligning naming (LoginScreenorLoginPageEntry) might avoid confusion between wrapper vs. page components.app/(tabs)/profile.tsx (2)
1-2: React import can be removedSame as other wrappers.
-import React from "react";
4-6: Boilerplate duplicationRe-export pattern recommended earlier applies here too.
app/(tabs)/awards.tsx (2)
1-2: Remove redundant React import-import React from "react";
4-6: Duplicate wrapperSame DRY recommendation as other tabs.
app/(tabs)/archive.tsx (1)
4-6: Tiny nit – add an explicitdisplayNameor use an arrow for consistencyMost other tab wrappers are anonymous arrow functions (
const FooTab = () => …). Aligning styles avoids diff-noise later.-export default function ArchiveTab() { - return <ArchivePage />; -} +export const ArchiveTab: React.FC = () => <ArchivePage />;pages/archive/ArchivePage.tsx (2)
8-10: Remove the emptyclassNameattributeThe empty attribute is a no-op and clutters the JSX.
- <Text className="">아카이브</Text> + <Text>아카이브</Text>
1-13: Consider extracting the repeated skeleton into a shared component
ArchivePage,UploadPage, andAwardsPageare identical except for the label. A small helper avoids duplication:// ui/CenteredLabelPage.tsx export const CenteredLabelPage: React.FC<{ label: string }> = ({ label }) => ( <SafeAreaView className="flex-1 bg-white"> <View className="items-center mb-10"> <Text>{label}</Text> </View> </SafeAreaView> );Each page then becomes:
export default function ArchivePage() { return <CenteredLabelPage label="아카이브" />; }pages/upload/UploadPage.tsx (1)
8-10: Drop the emptyclassNameon<Text>Same clean-up as in
ArchivePage.- <Text className="">업로드</Text> + <Text>업로드</Text>pages/awards/AwardsPage.tsx (1)
8-10: Drop the emptyclassNameon<Text>- <Text className="">어워드</Text> + <Text>어워드</Text>app/_layout.tsx (1)
16-16: Consider removing the styled export from the root layout.The
nativewindstyled export is typically not needed in the root layout file. If it's required elsewhere, consider exporting it from a dedicated utility file instead.-export { default as styled } from "nativewind";features/auth/ui/GoogleLoginButton.tsx (1)
5-5: Props are properly typed but unused.The component accepts
onLoginSuccessandonLoginErrorcallbacks but doesn't use them yet. This is acceptable for scaffolding but should be implemented before production use.Would you like me to help implement the Google OAuth login flow similar to the Kakao implementation?
features/auth/ui/NaverLoginButton.tsx (1)
5-11: Implement the missing login functionality.The component accepts
onLoginSuccessandonLoginErrorcallbacks but doesn't implement any actual login logic or event handling. TheTouchableOpacitylacks anonPresshandler.This appears to be a placeholder implementation. Would you like me to help implement the Naver login flow similar to the Kakao implementation, or should this be tracked as a TODO for future development?
export const NaverLoginButton: React.FC<SocialLoginProps> = ({ onLoginSuccess, onLoginError }) => { + const handleNaverLogin = () => { + // TODO: Implement Naver login logic + onLoginError("Naver login not yet implemented"); + }; + return ( - <TouchableOpacity> + <TouchableOpacity onPress={handleNaverLogin}> <Text>네이버로 시작하기</Text> </TouchableOpacity> ); };pages/home/HomePage.tsx (1)
19-19: Fix spacing in className.There's a double space in the Tailwind className which should be cleaned up.
- <TouchableOpacity className="bg-red-400 p-4 items-center" onPress={handleLogout}> + <TouchableOpacity className="bg-red-400 p-4 items-center" onPress={handleLogout}>pages/auth/LoginPage.tsx (1)
4-6: Standardize import path style for consistency.The imports mix path aliases (
@/) with relative paths (../../). Consider using consistent path aliases throughout for better maintainability.import { SocialLoginButtons } from "@/features/auth/ui/SocialLoginButtons"; -import { useAuth } from "../../features/auth/model/AuthContext"; -import type { UserInfo } from "../../features/auth/model/types"; +import { useAuth } from "@/features/auth/model/AuthContext"; +import type { UserInfo } from "@/features/auth/model/types";app/index.tsx (3)
1-1: Specify which ESLint rules to disable rather than using a blanket disable.The global
/*eslint-disable */comment disables all ESLint rules for the entire file. This can hide potential issues and makes the code harder to maintain.-/*eslint-disable */ +/* eslint-disable react-hooks/exhaustive-deps */
11-23: Consider removing the arbitrary 100ms delay and improve error handling.The 100ms timeout appears unnecessary and could create a poor user experience with an extra loading state. Additionally, there's no error handling if the
useAuthhook fails.useEffect(() => { - const timer = setTimeout(() => { - if (userInfo) { - // 로그인된 사용자면, 홈 네비게이션으로 이동 - router.replace("/(tabs)/home"); - } else { - // 로그인되지 않았으면 로그인 페이지로 이동 - router.replace("/login"); - } - }, 100); - - return () => clearTimeout(timer); + if (userInfo) { + // 로그인된 사용자면, 홈 네비게이션으로 이동 + router.replace("/(tabs)/home"); + } else { + // 로그인되지 않았으면 로그인 페이지로 이동 + router.replace("/login"); + } }, [userInfo, router]);
28-28: Consider using theme colors instead of hardcoded color values.The hardcoded color
#195B35should be defined in a theme or constants file for better maintainability.- <ActivityIndicator size="large" color="#195B35" /> + <ActivityIndicator size="large" color="#195B35" />Consider defining this color in a theme constants file and importing it here.
pages/profile/ProfilePage.tsx (1)
6-17: Enhance the profile page styling and layout for better user experience.The current implementation is very minimal and may not provide a good user experience. Consider adding more comprehensive profile information display and better styling.
export default function ProfilePage() { const { userInfo } = useAuth(); return ( <SafeAreaView className="flex-1 bg-white"> - <View className="items-center mb-10"> - <Text>{userInfo?.nickname || "사용자 닉네임"}</Text> - <Text>{userInfo?.email || "이메일 없음"}</Text> + <View className="flex-1 px-4 py-6"> + <View className="items-center mb-8"> + <View className="w-24 h-24 bg-gray-200 rounded-full mb-4" /> + <Text className="text-xl font-semibold text-gray-900"> + {userInfo?.nickname || "사용자 닉네임"} + </Text> + <Text className="text-sm text-gray-600"> + {userInfo?.email || "이메일 없음"} + </Text> + </View> + {/* Add more profile sections here */} </View> </SafeAreaView> ); }features/auth/ui/KakaoLoginButton.tsx (1)
19-23: Improve error parameter typing.Consider using a more specific type for the error parameter to enhance type safety.
-const handleLoginError = (error: any) => { +const handleLoginError = (error: unknown) => {The current type checking logic for the error is already good, but
unknownis safer thanany.features/auth/ui/KakaoLoginWebView.tsx (1)
114-114: Remove unused injectedJavaScript.The
injectedJavaScriptprop appears to be unused and can be removed for cleaner code.-injectedJavaScript="window.ReactNativeWebView.postMessage('')"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (6)
package-lock.jsonis excluded by!**/package-lock.jsonshared/assets/fonts/SpaceMono-Regular.ttfis excluded by!**/*.ttfshared/assets/icons/search.svgis excluded by!**/*.svgshared/assets/images/auth/authBackground.pngis excluded by!**/*.pngshared/assets/images/auth/kakaoLogo.pngis excluded by!**/*.pngyarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (36)
.env(1 hunks).eslintignore(1 hunks).prettierignore(1 hunks)app.config.js(1 hunks)app.json(1 hunks)app/(tabs)/_layout.tsx(1 hunks)app/(tabs)/archive.tsx(1 hunks)app/(tabs)/awards.tsx(1 hunks)app/(tabs)/home.tsx(1 hunks)app/(tabs)/profile.tsx(1 hunks)app/(tabs)/upload.tsx(1 hunks)app/_layout.tsx(1 hunks)app/index.tsx(1 hunks)app/login.tsx(1 hunks)app/login/index.tsx(0 hunks)babel.config.js(1 hunks)features/auth/hooks/useLogin.ts(0 hunks)features/auth/model/AuthContext.tsx(1 hunks)features/auth/model/types.ts(1 hunks)features/auth/ui/GoogleLoginButton.tsx(1 hunks)features/auth/ui/KakaoLoginButton.tsx(1 hunks)features/auth/ui/KakaoLoginWebView.tsx(1 hunks)features/auth/ui/NaverLoginButton.tsx(1 hunks)features/auth/ui/SocialLoginButtons.tsx(1 hunks)global.css(1 hunks)metro.config.js(1 hunks)package.json(1 hunks)pages/archive/ArchivePage.tsx(1 hunks)pages/auth/LoginPage.tsx(1 hunks)pages/awards/AwardsPage.tsx(1 hunks)pages/home/HomePage.tsx(1 hunks)pages/profile/ProfilePage.tsx(1 hunks)pages/upload/UploadPage.tsx(1 hunks)shared/ui/icon/index.tsx(1 hunks)tailwind.config.js(1 hunks)tsconfig.json(1 hunks)
💤 Files with no reviewable changes (2)
- app/login/index.tsx
- features/auth/hooks/useLogin.ts
🧰 Additional context used
🧬 Code Graph Analysis (16)
app/(tabs)/upload.tsx (1)
pages/upload/UploadPage.tsx (1)
UploadPage(5-13)
app/(tabs)/archive.tsx (1)
pages/archive/ArchivePage.tsx (1)
ArchivePage(5-13)
app/(tabs)/awards.tsx (1)
pages/awards/AwardsPage.tsx (1)
AwardsPage(5-13)
app/login.tsx (1)
pages/auth/LoginPage.tsx (1)
LoginPage(8-36)
app/(tabs)/home.tsx (1)
pages/home/HomePage.tsx (1)
HomePage(7-24)
app/(tabs)/profile.tsx (1)
pages/profile/ProfilePage.tsx (1)
ProfilePage(6-17)
features/auth/ui/NaverLoginButton.tsx (1)
features/auth/model/types.ts (1)
SocialLoginProps(9-12)
features/auth/model/AuthContext.tsx (1)
features/auth/model/types.ts (1)
UserInfo(1-7)
pages/home/HomePage.tsx (1)
features/auth/model/AuthContext.tsx (1)
useAuth(24-31)
pages/auth/LoginPage.tsx (3)
features/auth/model/AuthContext.tsx (1)
useAuth(24-31)features/auth/model/types.ts (1)
UserInfo(1-7)features/auth/ui/SocialLoginButtons.tsx (1)
SocialLoginButtons(8-24)
app/index.tsx (1)
features/auth/model/AuthContext.tsx (1)
useAuth(24-31)
pages/profile/ProfilePage.tsx (1)
features/auth/model/AuthContext.tsx (1)
useAuth(24-31)
app/_layout.tsx (2)
shared/api/query-client.ts (1)
queryClient(3-3)features/auth/model/AuthContext.tsx (1)
AuthProvider(38-58)
features/auth/ui/SocialLoginButtons.tsx (4)
features/auth/model/types.ts (1)
SocialLoginProps(9-12)features/auth/ui/KakaoLoginButton.tsx (1)
KakaoLoginButton(6-47)features/auth/ui/NaverLoginButton.tsx (1)
NaverLoginButton(5-11)features/auth/ui/GoogleLoginButton.tsx (1)
GoogleLoginButton(5-11)
features/auth/ui/KakaoLoginButton.tsx (2)
features/auth/model/types.ts (1)
SocialLoginProps(9-12)features/auth/ui/KakaoLoginWebView.tsx (1)
KakaoLoginWebView(19-137)
features/auth/ui/GoogleLoginButton.tsx (1)
features/auth/model/types.ts (1)
SocialLoginProps(9-12)
🔇 Additional comments (23)
.eslintignore (1)
5-6: 👍 Excludingdistandtailwind.config.jsmakes senseIgnoring compiled artifacts and Tailwind’s configuration file will speed up linting and avoid false positives.
shared/ui/icon/index.tsx (1)
1-1: Verify TS path alias & Metro config after import-path changeThe alias
@/shared/assets/iconsmust now be reflected in:
tsconfig.json→pathsbabel.config.js/metro.config.js(if you rely on module-resolver)Failure to update all places will break iOS/Android builds but not be caught by type-checking alone.
global.css (1)
1-3: Tailwind base/components/utilities imported correctlyNothing to flag—this is the standard minimal Tailwind boilerplate.
app/(tabs)/archive.tsx (1)
2-2: Double-check the relative import path
"../../pages/archive/ArchivePage"assumes thatpages/sits at the repo root (two levels up fromapp/(tabs)/) which matches the current layout.
If you later move either folder, this will silently break. Consider using an alias (@pages/...) viatsconfig.json/ babel paths to make moves painless.app.json (1)
29-29: Verify Kakao plugin configurationAdding
@react-native-kakao/coreis necessary for Kakao login, but:
- The plugin expects matching Android/iOS native settings (redirect scheme, manifest queries, App Key in
strings.xml, etc.).- Ensure the
scheme("myapp") lines up with Kakao redirect URI; otherwise login will fail.Please cross-check the official plugin docs or run the following to confirm the plugin has been autolinked:
#!/bin/bash # List kakao packages in the autolinked config grep -R "@react-native-kakao" -n android/ ios/ | headmetro.config.js (1)
1-9: LGTM - Well-configured Metro setup for Expo with Tailwind CSS.The Metro configuration correctly extends the default Expo config and appropriately adds CSS support for Tailwind integration. The asset extensions cover all common image formats needed for a React Native app.
app/_layout.tsx (1)
20-34: LGTM - Proper provider hierarchy and navigation structure.The provider nesting order is correct:
SafeAreaProvider(outermost for safe area handling)QueryClientProvider(for data fetching)AuthProvider(for authentication state)The Stack navigation setup appropriately handles the authentication flow with dedicated screens for login and the main tab navigation.
app/(tabs)/_layout.tsx (1)
1-46: LGTM - Clean and well-structured tab navigation.The tab layout is properly configured with:
- Appropriate screen names and Korean titles
- Consistent structure across all tabs
- Header disabled for custom styling flexibility
The five-tab structure (홈, 아카이브, 업로드, 우수작, 마이) provides good coverage for the app's core features.
tailwind.config.js (1)
3-15: LGTM - Comprehensive Tailwind configuration for React Native.The configuration properly:
- Covers all source directories with appropriate glob patterns
- Includes both JavaScript and TypeScript file extensions
- Uses standard Tailwind structure with empty theme extensions (ready for customization)
- Appropriate for React Native with NativeWind setup
pages/home/HomePage.tsx (1)
8-14: LGTM - Clean logout implementation.The logout flow is well-implemented: calls the auth context's logout method and properly replaces the route to prevent back navigation to the authenticated area.
package.json (1)
15-32: LGTM - Dependencies align with implemented features.The new dependencies properly support the features being implemented:
axiosfor HTTP requests (likely for auth API calls)nativewind/tailwindcssfor the Tailwind styling used throughout the componentsreact-native-safe-area-contextused in HomePagereact-native-webviewsupports the Kakao login WebView implementationbabel-plugin-module-resolverenables the path aliases configured in tsconfig.jsontsconfig.json (1)
6-10: LGTM - Configuration supports the project structure.The TypeScript configuration changes properly support the new project structure:
- Simplified path alias makes imports cleaner
baseUrlestablishes proper module resolutionjsx: "react-native"is correct for this React Native project- Updated
typeRootssuggests proper type organizationpages/auth/LoginPage.tsx (2)
12-16: LGTM - Solid login success flow.The login success handler properly:
- Logs the success for debugging
- Updates the auth context with user info
- Navigates to home tab using replace to prevent back navigation
18-21: LGTM - Good error handling with user feedback.The error handler provides both developer logging and user-friendly alert messaging, which is essential for debugging and user experience.
babel.config.js (1)
1-19: LGTM! Babel configuration is well-structured.The Babel configuration correctly includes the necessary presets and plugins for the project:
babel-preset-expofor Expo supportnativewind/babelfor Tailwind CSS integrationmodule-resolverwith proper alias and platform-specific file extensionsapp.config.js (1)
1-37: LGTM! Comprehensive Expo configuration with proper platform settings.The configuration properly defines:
- App metadata and branding
- Platform-specific settings for iOS and Android
- Custom URI scheme for deep linking
- Necessary plugins for routing and fonts
- Experimental typed routes feature
features/auth/ui/SocialLoginButtons.tsx (1)
8-24: LGTM! Clean container component with proper TypeScript integration.The component effectively serves as a container for social login buttons with:
- Proper TypeScript typing using
SocialLoginProps- Clean callback propagation to individual button components
- Good styling with Tailwind CSS classes
- Clear separation of concerns
The integration with the individual button components looks well-structured based on the related code snippets.
features/auth/model/types.ts (1)
1-14: Well-structured type definitions.The TypeScript interfaces and types are well-designed with appropriate field types and proper use of optional properties. The callback function signatures in
SocialLoginPropsprovide clear contracts for social login components.features/auth/ui/KakaoLoginButton.tsx (1)
38-44: Modal implementation looks good.The modal configuration with slide animation and pageSheet presentation style provides a good user experience for the OAuth flow.
features/auth/model/AuthContext.tsx (2)
24-31: Excellent error handling for context usage.The custom hook properly validates that it's being used within the AuthProvider and throws a descriptive error message. This is a best practice for React context hooks.
38-58: Clean AuthProvider implementation.The provider component follows React patterns well with proper state management and context value provision. The derived
isLoggedInboolean is a nice touch for convenience.features/auth/ui/KakaoLoginWebView.tsx (2)
28-80: OAuth implementation follows best practices.The two-step OAuth flow (authorization code → access token → user info) is implemented correctly according to Kakao's OAuth specification. The error handling and token exchange logic are well-structured.
83-101: Proper URL parsing and navigation handling.The navigation state change handler correctly identifies the OAuth callback URL and extracts the authorization code. The URL parsing logic is solid and handles the OAuth redirect properly.
| import { SafeAreaProvider } from "react-native-safe-area-context"; | ||
| import { queryClient } from "../shared/api/query-client"; | ||
| import { AuthProvider } from "../features/auth/model/AuthContext"; | ||
| import "../global.css"; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Move global CSS import to the top of the file.
Global CSS imports should be placed before other imports to ensure styles are loaded first and avoid potential timing issues.
+import "../global.css";
import NetInfo from "@react-native-community/netinfo";
import { onlineManager, QueryClientProvider } from "@tanstack/react-query";
import { Stack } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { queryClient } from "../shared/api/query-client";
import { AuthProvider } from "../features/auth/model/AuthContext";
-import "../global.css";🤖 Prompt for AI Agents
In app/_layout.tsx at line 8, move the import statement for "../global.css" to
the very top of the file before any other imports to ensure global styles are
loaded first and prevent timing issues.
| <TouchableOpacity> | ||
| <Text className="">구글로 시작하기</Text> | ||
| </TouchableOpacity> | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Implement touch event handling and login logic.
The button currently lacks:
onPresshandler to trigger login flow- Login implementation (similar to KakaoLoginButton)
- Styling (empty
classNameattribute)
<TouchableOpacity
+ onPress={() => {
+ // TODO: Implement Google login logic
+ onLoginError("Google login not implemented yet");
+ }}
>
- <Text className="">구글로 시작하기</Text>
+ <Text className="text-center py-3 px-6 bg-blue-500 text-white rounded-lg">
+ 구글로 시작하기
+ </Text>
</TouchableOpacity>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <TouchableOpacity> | |
| <Text className="">구글로 시작하기</Text> | |
| </TouchableOpacity> | |
| ); | |
| <TouchableOpacity | |
| onPress={() => { | |
| // TODO: Implement Google login logic | |
| onLoginError("Google login not implemented yet"); | |
| }} | |
| > | |
| <Text className="text-center py-3 px-6 bg-blue-500 text-white rounded-lg"> | |
| 구글로 시작하기 | |
| </Text> | |
| </TouchableOpacity> | |
| ); |
🤖 Prompt for AI Agents
In features/auth/ui/GoogleLoginButton.tsx around lines 7 to 10, the
TouchableOpacity component is missing an onPress handler to initiate the Google
login flow, the actual login logic similar to KakaoLoginButton, and proper
styling instead of an empty className. Add an onPress prop that triggers the
Google login function, implement the login logic inside that handler, and
replace the empty className with appropriate styles for the button text.
| setShowWebView(true); | ||
| }; | ||
|
|
||
| const handleLoginSuccess = (userInfo: any) => { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use proper TypeScript types instead of any.
The parameter should use the UserInfo type from the imported types file for better type safety.
-const handleLoginSuccess = (userInfo: any) => {
+const handleLoginSuccess = (userInfo: UserInfo) => {Don't forget to import the UserInfo type:
-import type { SocialLoginProps } from "../model/types";
+import type { SocialLoginProps, UserInfo } from "../model/types";🤖 Prompt for AI Agents
In features/auth/ui/KakaoLoginButton.tsx at line 13, replace the parameter type
'any' in the handleLoginSuccess function with the proper 'UserInfo' type
imported from the types file. First, import the 'UserInfo' type at the top of
the file, then update the function signature to use 'userInfo: UserInfo' for
better type safety.
| interface UserInfo { | ||
| id: number; | ||
| email: string; | ||
| nickname: string; | ||
| profileImage?: string; | ||
| accessToken: string; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove duplicate interface definition.
The UserInfo interface is already defined in features/auth/model/types.ts. Import it instead of duplicating the definition to follow DRY principles and ensure consistency.
+import type { UserInfo } from "./types";
+
-// 사용자 정보 타입 정의
-interface UserInfo {
- id: number;
- email: string;
- nickname: string;
- profileImage?: string;
- accessToken: string;
-}
-📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| interface UserInfo { | |
| id: number; | |
| email: string; | |
| nickname: string; | |
| profileImage?: string; | |
| accessToken: string; | |
| } | |
| import type { UserInfo } from "./types"; |
🤖 Prompt for AI Agents
In features/auth/model/AuthContext.tsx around lines 5 to 11, remove the
duplicate UserInfo interface definition and instead import the UserInfo
interface from features/auth/model/types.ts. This will avoid redundancy and keep
the type definition consistent across the codebase.
| }), | ||
| }); | ||
|
|
||
| console.log("토큰 응답:", tokenResponse.data); |
There was a problem hiding this comment.
Remove sensitive data from console logs.
These console.log statements are logging sensitive information including access tokens and user data, which could be a security risk in production builds.
-console.log("토큰 응답:", tokenResponse.data);
-console.log("user 응답:", userResponse.data);Consider using a proper logging solution that can be configured per environment, or remove these logs entirely.
Also applies to: 59-59
🤖 Prompt for AI Agents
In features/auth/ui/KakaoLoginWebView.tsx at lines 47 and 59, the console.log
statements output sensitive information such as access tokens and user data,
posing a security risk. Remove these console.log calls or replace them with a
secure logging mechanism that can be disabled or filtered in production
environments to prevent sensitive data exposure.
| }, | ||
| data: new URLSearchParams({ | ||
| grant_type: "authorization_code", | ||
| client_id: KAKAO_REST_API_KEY!, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add runtime validation for environment variables.
Using non-null assertion (!) on environment variables can cause runtime errors if they're not set.
+if (!KAKAO_REST_API_KEY) {
+ throw new Error("EXPO_PUBLIC_KAKAO_REST_API_KEY is required");
+}
+
const tokenResponse = await axios({
method: "POST",
url: "https://kauth.kakao.com/oauth/token",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
data: new URLSearchParams({
grant_type: "authorization_code",
- client_id: KAKAO_REST_API_KEY!,
+ client_id: KAKAO_REST_API_KEY,
redirect_uri: REDIRECT_URI,
code,
}),
});Add similar validation for the WebView source URI.
Also applies to: 112-112
🤖 Prompt for AI Agents
In features/auth/ui/KakaoLoginWebView.tsx at lines 41 and 112, the code uses
non-null assertions on environment variables which can cause runtime errors if
these variables are undefined. Add runtime checks to verify that
KAKAO_REST_API_KEY and the WebView source URI environment variables are defined
before using them. If they are missing, throw a clear error or handle the case
gracefully to prevent runtime crashes.
| onLoginSuccess: (userInfo: any) => void; | ||
| onLoginError: (error: any) => void; | ||
| onClose: () => void; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use proper TypeScript types instead of any.
The props interface should use specific types for better type safety and consistency with the rest of the codebase.
+import type { UserInfo } from "../model/types";
+
interface KakaoLoginWebViewProps {
- onLoginSuccess: (userInfo: any) => void;
- onLoginError: (error: any) => void;
+ onLoginSuccess: (userInfo: UserInfo) => void;
+ onLoginError: (error: unknown) => void;
onClose: () => void;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| onLoginSuccess: (userInfo: any) => void; | |
| onLoginError: (error: any) => void; | |
| onClose: () => void; | |
| import type { UserInfo } from "../model/types"; | |
| interface KakaoLoginWebViewProps { | |
| onLoginSuccess: (userInfo: UserInfo) => void; | |
| onLoginError: (error: unknown) => void; | |
| onClose: () => void; | |
| } |
🤖 Prompt for AI Agents
In features/auth/ui/KakaoLoginWebView.tsx around lines 14 to 16, the props
interface uses 'any' types for onLoginSuccess and onLoginError, which reduces
type safety. Replace 'any' with more specific TypeScript types that accurately
represent the expected userInfo and error objects, aligning with the rest of the
codebase's type definitions for these handlers.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
.github/workflows/DAILYSNAP-FE-PR-CI.yml (1)
24-26: yarn.lock만 삭제하면 npm 캐시 불일치가 계속 남을 수 있습니다
.yarnrc*,.pnp.*등 Yarn 관련 잔여 파일이 남아 있으면 의도치 않은 의존성 해석이 일어날 수 있습니다.- CI에서는
npm install대신npm ci를 사용해야package-lock.json기반의 재현 가능한 빌드가 보장됩니다.예시 수정안:
- - name: 🧹 Remove yarn.lock - run: rm -f yarn.lock + - name: 🧹 Remove yarn artefacts & clean install + run: | + rm -f yarn.lock .yarnrc* .pnp.* + npm ci --prefer-offline --no-audit --no-fund
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
.github/workflows/DAILYSNAP-FE-PR-CI.yml(1 hunks)
🔇 Additional comments (1)
.github/workflows/DAILYSNAP-FE-PR-CI.yml (1)
18-22: Node 22.14.0 버전이 GitHub Actions 런너에 아직 배포되지 않았을 가능성
- 현재 LTS 버전(예: 20.x) 사용을 권장합니다.
- 지정 버전이 없으면 워크플로가 즉시 실패할 수 있으니, 다음 두 가지 중 하나를 검토해 주세요.
node-version: 20과 같이 LTS 메이저로 다운그레이드node-version-file: .nvmrc로 프로젝트 설정을 따르도록 변경확인 후 문제가 없으면 그대로 진행해도 됩니다.
1 participant
#9
Summary by CodeRabbit
New Features
Chores
Style
Refactor
Bug Fixes