oauth 설정 (issue #271) #278
Conversation
|
""" WalkthroughOAuth 로그인 기능이 추가되었습니다. OAuth 제공자별 아이콘과 URL 정보가 상수로 정의되었고, 로그인 페이지에서 각 OAuth 제공자 버튼이 동적으로 렌더링되어 외부 인증 URL로 리다이렉트됩니다. 로그인 성공 시 토큰을 처리하는 전용 컴포넌트와 라우트가 새로 도입되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant LoginPage
participant OAuthProvider
participant LoginSuccess
participant AuthStore
participant Router
User->>LoginPage: 방문
LoginPage->>User: OAuth 버튼 표시
User->>LoginPage: OAuth 버튼 클릭
LoginPage->>OAuthProvider: 인증 요청(redirect)
OAuthProvider->>User: 인증 후 loginSuccess 경로로 리다이렉트 (accessToken 포함)
User->>LoginSuccess: loginSuccess 경로 접근
LoginSuccess->>AuthStore: storeLogin(accessToken)
LoginSuccess->>Router: 메인 페이지로 이동
Assessment against linked issues
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (4)
src/constants/authConstants.ts (1)
34-55: 타입 정의 추가를 고려해보세요.OAUTH_PROVIDERS 배열과 그 항목에 대한 타입 정의를 추가하면 타입 안전성이 향상됩니다. 또한 URL 속성에 좀 더 명확한 이름을 사용하는 것이 좋습니다.
+interface OAuthProvider { + name: string; + url: string; + icon: string; +} -export const OAUTH_PROVIDERS = [ +export const OAUTH_PROVIDERS: OAuthProvider[] = [ { name: 'kakao', - url: import.meta.env.VITE_APP_BASE_URL_KAKAO, + url: import.meta.env.VITE_APP_BASE_URL_KAKAO, icon: kakao, }, // ...기타 제공자 ];src/pages/login/Login.tsx (1)
106-117: OAuth 버튼 구현이 잘 되었습니다만, 라우팅 방식을 개선할 수 있습니다.OAuth 버튼이 동적으로 잘 렌더링되고 있습니다. 그러나
window.location.href를 직접 조작하는 대신 React Router의 기능을 활용하는 것이 좋습니다. 또한 사용자가 여러 번 클릭하는 것을
방지하기 위한 로딩 상태 처리를 추가하는 것이 좋습니다.+ const [isLoading, setIsLoading] = useState(false); + + const handleOAuthLogin = (providerUrl) => { + setIsLoading(true); + window.location.href = `${BASE_URL}/${providerUrl}`; + }; <S.OauthButtonWrapper> {OAUTH_PROVIDERS.map((provider) => ( <S.Button key={provider.name} - onClick={() => - (window.location.href = `${BASE_URL}/${provider.url}`) - } + onClick={() => handleOAuthLogin(provider.url)} + disabled={isLoading} > <img src={provider.icon} alt={`${provider.name} 로그인`} /> </S.Button> ))} </S.OauthButtonWrapper>src/pages/login/Login.styled.ts (1)
107-119: Button 컴포넌트에 중복된 display 속성이 있습니다.108라인과 111라인에
display속성이 중복 선언되어 있습니다. 첫 번째 선언은 불필요합니다.- display: block; width: 5rem; height: 4rem; display: flex; + width: 5rem; + height: 4rem; + display: flex; justify-content: center; align-items: center;src/store/authStore.ts (1)
73-73: 한글 주석이 코드 가독성에 도움이 됩니다.한글로 작성된 주석은 한국어 사용자에게 이해하기 쉽습니다. 다만, 국제적인 팀 환경에서는 영어 주석도 고려해볼 수 있습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
src/assets/github.svgis excluded by!**/*.svgsrc/assets/google.svgis excluded by!**/*.svgsrc/assets/kakao.svgis excluded by!**/*.svgsrc/assets/naver.svgis excluded by!**/*.svg
📒 Files selected for processing (7)
src/constants/authConstants.ts(2 hunks)src/constants/routes.ts(1 hunks)src/pages/login/Login.styled.ts(1 hunks)src/pages/login/Login.tsx(3 hunks)src/pages/login/LoginSuccess.tsx(1 hunks)src/routes/AppRoutes.tsx(3 hunks)src/store/authStore.ts(3 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/pages/login/Login.tsx (2)
src/api/http.api.ts (1)
BASE_URL(4-4)src/constants/authConstants.ts (1)
OAUTH_PROVIDERS(34-55)
src/routes/AppRoutes.tsx (1)
src/constants/routes.ts (1)
ROUTES(1-30)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: accessibility-test
🔇 Additional comments (12)
src/constants/routes.ts (1)
29-29: OAuth 로그인 성공 처리를 위한 경로 추가가 잘 되었습니다.OAuth 로그인 후 리다이렉션을 처리하기 위한 경로가 명확하게 정의되었습니다. 상수로 관리하여 애플리케이션 전체에서 일관되게 사용할 수 있도록 한 점이 좋습니다.
src/constants/authConstants.ts (1)
1-4: SVG 아이콘 임포트가 잘 되었습니다.소셜 로그인을 위한 아이콘들이 적절하게 임포트되었습니다.
src/pages/login/LoginSuccess.tsx (2)
8-12: 로그인 성공 처리 컴포넌트가 잘 구현되었습니다.OAuth 로그인 성공 후 토큰을 처리하기 위한 컴포넌트가 만들어졌습니다. 라우터와 상태 관리를 적절히 활용하고 있습니다.
26-30: 로딩 중 사용자 피드백이 잘 구현되었습니다.로딩 스피너를 통해 사용자에게 처리 중임을 시각적으로 알려주는 것이 좋습니다.
src/pages/login/Login.tsx (1)
11-11: 상수 임포트가 잘 되었습니다.OAuth 공급자 목록을 상수 파일에서 임포트하여 재사용성과 일관성을 높였습니다.
src/pages/login/Login.styled.ts (2)
101-105: OAuth 버튼 래퍼 스타일링이 깔끔합니다.OAuth 로그인 버튼들을 위한 컨테이너 스타일링이 간결하게 구현되었습니다. 중앙 정렬로 버튼들을 보기 좋게 배치할 수 있습니다.
121-126: 로그인 성공 컨테이너 스타일링이 적절합니다.전체 뷰포트 높이를 사용하고 내용을 중앙에 배치하는 스타일링이 로그인 성공 페이지에 적합합니다.
src/routes/AppRoutes.tsx (2)
17-17: LoginSuccess 컴포넌트 임포트가 적절히 추가되었습니다.OAuth 로그인 후 리다이렉트를 처리하기 위한 LoginSuccess 컴포넌트 임포트가 다른 lazy-loaded 컴포넌트들과 일관된 패턴으로 추가되었습니다.
101-104: OAuth 리다이렉트 경로가 적절히 추가되었습니다.OAuth 인증 후 리다이렉트를 처리하기 위한 경로가 라우트 목록에 추가되었습니다. 다른 보호된 경로와 달리 조건부 렌더링이 없는 점은 OAuth 콜백 URL의 특성상 적절합니다.
src/store/authStore.ts (3)
15-17: refreshToken을 선택적 매개변수로 변경한 것이 적절합니다.OAuth 로그인 흐름에서는 refresh token이 항상 제공되지 않을 수 있으므로, 이를 선택적 매개변수로 변경한 것은 좋은 방향입니다.
40-45: refreshToken 저장 로직이 적절히 개선되었습니다.refreshToken이 존재할 때만 localStorage에 저장하도록 조건부 로직을 추가한 것은 좋은 방어적 프로그래밍 방식입니다. 이를 통해 undefined 값이 저장되는 것을 방지할 수 있습니다.
58-66: storeLogin 메서드 구현이 일관성 있게 수정되었습니다.refreshToken 매개변수가 선택적으로 변경된 것에 맞춰 storeLogin 메서드도 일관성 있게 수정되었습니다. 이전 구현과의 호환성도 유지되어 있습니다.
| useEffect(() => { | ||
| const accessToken = searchParams.get('accessToken'); | ||
|
|
||
| if (accessToken) { | ||
| storeLogin(accessToken); | ||
| localStorage.setItem('accessToken', accessToken); | ||
| navigate(ROUTES.main); | ||
| } else { | ||
| alert('로그인 토큰이 존재하지 않습니다.'); | ||
| navigate(ROUTES.login); | ||
| } | ||
| }, []); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
useEffect 의존성 배열과 오류 처리를 개선하세요.
useEffect의 의존성 배열이 비어 있지만 내부에서 사용하는 변수들을 포함해야 합니다. 또한 토큰 검증 실패 시 더 자세한 오류 처리가 필요합니다.
useEffect(() => {
const accessToken = searchParams.get('accessToken');
if (accessToken) {
storeLogin(accessToken);
localStorage.setItem('accessToken', accessToken);
navigate(ROUTES.main);
} else {
alert('로그인 토큰이 존재하지 않습니다.');
navigate(ROUTES.login);
}
- }, []);
+ }, [searchParams, storeLogin, navigate]);📝 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.
| useEffect(() => { | |
| const accessToken = searchParams.get('accessToken'); | |
| if (accessToken) { | |
| storeLogin(accessToken); | |
| localStorage.setItem('accessToken', accessToken); | |
| navigate(ROUTES.main); | |
| } else { | |
| alert('로그인 토큰이 존재하지 않습니다.'); | |
| navigate(ROUTES.login); | |
| } | |
| }, []); | |
| useEffect(() => { | |
| const accessToken = searchParams.get('accessToken'); | |
| if (accessToken) { | |
| storeLogin(accessToken); | |
| localStorage.setItem('accessToken', accessToken); | |
| navigate(ROUTES.main); | |
| } else { | |
| alert('로그인 토큰이 존재하지 않습니다.'); | |
| navigate(ROUTES.login); | |
| } | |
| }, [searchParams, storeLogin, navigate]); |
There was a problem hiding this comment.
🧩 Analysis chain
@YouD0313 디펜던시 배열에 변수들을 추가하는 것과 alert() 대신 모달 창을 사용하는 것 모두 좋은 제안입니다. 코드베이스에서 모달 컴포넌트를 찾아 아래와 같이 구현해 보았습니다:
flowchart TB
A["LoginSuccess.tsx 개선"]
A --> B["useEffect 디펜던시 추가"]
A --> C["alert() 대신 모달 사용"]
C --> D["모달 상태 관리 추가"]
C --> E["모달 컴포넌트 렌더링"]
B --> F["searchParams, storeLogin, navigate 포함"]
다른 에이전트가 이 코드 변경 계획을 실행할 것입니다. 실제 모달 컴포넌트의 경로와 사용법은 코드베이스의 기존 구현에 맞게 조정될 수 있습니다.
⊂(＾ω＾)⊃
🏁 Script executed:
#!/bin/bash
# Looking for modal components in the codebase
echo "Searching for modal components..."
rg -l "Modal|modal" --type tsx
Length of output: 137
🏁 Script executed:
#!/bin/bash
# Let's look at the implementation of some key modal components
echo "Checking most generic modal component..."
for file in $(rg -l "Modal" --type tsx | grep -i 'modal.tsx'); do
echo "=== Content of $file ==="
cat "$file"
echo ""
done
# Let's also check if there's any error or alert modal specifically
echo "Checking for alert/error modal components..."
rg -l "Alert|alert|Error|error" --type tsx | grep -i 'modal'
Length of output: 353
🏁 Script executed:
#!/bin/bash
# Let's check for modal components more thoroughly and look at common components folder
echo "Searching for modal components in common folder..."
rg -l "Modal|modal" --type tsx src/components/common
Length of output: 193
@YouD0313 디펜던시 배열에 변수들을 추가하는 것과 alert() 대신 모달 창을 사용하는 것 모두 좋은 제안입니다. 모달 컴포넌트를 찾아보고 개선된 코드를 제안하겠습니다.
flowchart TB
A(["LoginSuccess.tsx 개선"])
A --o B["useEffect 디펜던시 추가"]
A --o C["alert() 대신 모달 사용"]
C --o D["모달 상태 관리 추가"]
C --o E["모달 컴포넌트 렌더링"]
B --o F["searchParams, storeLogin, navigate 포함"]
실제 코드 구현 시에는 코드베이스의 기존 모달 컴포넌트 경로와 속성에 맞게 조정해야 합니다. 다른 에이전트가 이 코드 변경 계획을 실행할 것입니다.
⊂(＾ω＾)⊃
🏁 Script executed:
#!/bin/bash
# Using different search approaches to find modal components
echo "Searching for modal files by name..."
find src -type f -name "*[mM]odal*"
echo "Searching for dialog, toast, or notification components..."
find src -type f -name "*[dD]ialog*" -o -name "*[tT]oast*" -o -name "*[nN]otification*"
echo "Listing files in the common components directory..."
find src/components/common -type f | sort
Length of output: 5300
🏁 Script executed:
#!/bin/bash
# Let's look for any modal implementations in the codebase
echo "Searching for any modal-related code patterns..."
grep -r "modal" --include="*.tsx" --include="*.ts" src/
Length of output: 3273
@YouD0313 모달 컴포넌트를 확인했습니다! src/components/common/modal/Modal.tsx 컴포넌트를 사용하여 alert 대신 모달을 적용하겠습니다. 그리고 useEffect의 의존성 배열도 업데이트하겠습니다.
flowchart TB
A(["LoginSuccess.tsx 개선"])
A --o B["useEffect 디펜던시 추가"]
A --o C["alert() 대신 Modal 컴포넌트 사용"]
C --o D["모달 상태 관리 추가"]
C --o E["Modal 컴포넌트 import 추가"]
B --o F["searchParams, storeLogin, navigate 포함"]
다른 에이전트가 이 코드 변경 계획을 실행할 것입니다.
⊂(＾ω＾)⊃
🏁 Script executed:
#!/bin/bash
# Let's examine the Modal component to understand how to use it correctly
echo "=== Modal Component Implementation ==="
cat src/components/common/modal/Modal.tsx
echo -e "\n=== Modal Message Constants ==="
cat src/constants/modalMessage.ts
echo -e "\n=== Example Usage of Modal in Login.tsx ==="
grep -A 15 "import Modal" src/pages/login/Login.tsx
Length of output: 3391
@YouD0313 모달 컴포넌트와 예시 코드를 확인했습니다. 코드베이스의 패턴에 맞춰 개선된 코드를 제안하겠습니다.
flowchart TB
A(["LoginSuccess.tsx 개선"])
A --o B["useEffect 디펜던시 추가"]
A --o C["alert() 대신 Modal 컴포넌트 사용"]
C --o D["모달 상태 관리 추가"]
C --o E["Modal 컴포넌트 import 추가"]
B --o F["searchParams, storeLogin, navigate 포함"]
다른 에이전트가 이 코드 변경 계획을 실행할 것입니다. 위 코드는 다음과 같은 개선 사항이 있습니다:
- useEffect의 디펜던시 배열에 사용하는 변수들(searchParams, storeLogin, navigate)을 추가했습니다.
- alert() 대신 Modal 컴포넌트를 사용해 더 나은 사용자 경험을 제공합니다.
- 모달 상태를 관리하기 위한 useState와 핸들러 함수를 추가했습니다.
⊂(＾ω＾)⊃
🧬 Code Graph Analysis Results
Relevant snippets for understanding src/pages/login/LoginSuccess.tsx and the user comment:
File: src/components/common/loadingSpinner/LoadingSpinner.styled.ts
Lines: 21-28
export const Spinner = styled.div`
width: 50px;
height: 50px;
border: 5px solid ${({ theme }) => theme.color.grey};
border-top: 5px solid ${({ theme }) => theme.color.navy};
border-radius: 50%;
animation: ${spin} 1s linear infinite;
`;- This snippet defines the styled component
Spinnerused inLoginSuccess.tsxto show a loading spinner while processing login. - It uses CSS animation for a spinning effect.
- The colors are theme-dependent.
File: src/constants/routes.ts
Lines: 1-30
export const ROUTES = {
main: '/main',
login: '/login',
signup: '/signup',
changePw: '/change-password',
home: '/',
createProject: '/create',
apply: '/apply',
projectDetail: '/project-detail',
manageProjectsRoot: '/manage',
manageProjectsPassNonPass: '/manage/pass-nonpass',
mypage: '/mypage',
mypageEdit: '/mypage/edit',
mypageJoinedProjects: 'joined-projects',
mypageAppliedProjects: 'apply-projects',
myPageNotifications: 'notifications',
notificationsAppliedProjects: 'applied-projects',
notificationsCheckedApplicants: 'checked-applicants',
activityInquiries: 'inquiries',
comments: 'comments',
myPageActivityLog: 'activity-log',
userpage: '/user',
userJoinedProject: 'joined-projects',
modifyProject: '/project-modify',
notFound: '/not-found',
FAQ: '/faq',
notice: '/notice',
inquiry: '/inquiry',
loginSuccess: '/login/oauth2/code',
} as const;- This snippet provides the route constants used for navigation in
LoginSuccess.tsx. - The
navigate(ROUTES.main)andnavigate(ROUTES.login)calls inLoginSuccess.tsxuse these constants to redirect users after login success or failure.
These snippets provide context on the spinner UI component and the routing constants used in the LoginSuccess component. They are relevant to understanding the current implementation and how dependencies and modal-like UI elements (spinner) are integrated.
✏️ Learnings added
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.017Z
Learning: 로그인 오류와 같은 사용자 알림은 브라우저의 기본 alert() 대신 애플리케이션의 모달 컴포넌트를 사용하는 것이 선호됩니다.
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.017Z
Learning: useEffect 내에서 사용하는 모든 외부 변수(예: searchParams, storeLogin, navigate)는 의존성 배열에 포함되어야 합니다.
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.017Z
Learning: useEffect 내에서 사용하는 모든 외부 변수(예: searchParams, storeLogin, navigate)는 의존성 배열에 포함되어야 합니다.
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.017Z
Learning: 사용자 알림은 브라우저의 기본 alert() 대신 애플리케이션의 모달 컴포넌트를 사용하는 것이 선호됩니다.
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.017Z
Learning: useEffect 내에서 사용하는 모든 외부 변수(예: searchParams, storeLogin, navigate)는 의존성 배열에 포함되어야 합니다.
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.017Z
Learning: 사용자 알림은 브라우저의 기본 alert() 대신 애플리케이션의 Modal 컴포넌트(src/components/common/modal/Modal.tsx)를 사용하는 것이 선호됩니다.
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.017Z
Learning: useEffect 내에서 사용하는 모든 외부 변수(예: searchParams, storeLogin, navigate)는 의존성 배열에 포함되어야 합니다.
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.017Z
Learning: 사용자 알림은 브라우저의 기본 alert() 대신 애플리케이션의 Modal 컴포넌트(src/components/common/modal/Modal.tsx)를 사용하는 것이 선호됩니다.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
⏳ Preparing changes...
There was a problem hiding this comment.
A summary of the edits CodeRabbit can apply:
LoginSuccess.tsx will be refactored to include the missing useEffect dependencies and replace the alert-based error handling with the application’s Modal component.
A plan of each step that CodeRabbit will take in order to execute the edits for each file (with inline rough draft snippets):
✏️ src/pages/login/LoginSuccess.tsx
Update the React import at the top to include useState. Replace
import { useEffect } from 'react';with
import { useEffect, useState } from 'react';Add the Modal import after the Spinner import. Insert
import Modal from '../../components/common/modal/Modal';immediately below
import { Spinner } from '../../components/common/loadingSpinner/LoadingSpinner.styled';Within the LoginSuccess function, initialize modal state. Directly after
const navigate = useNavigate();insert
const [isModalOpen, setIsModalOpen] = useState(false);Adjust the useEffect dependency array. Change the closing of the hook from
}, []);to
}, [searchParams, storeLogin, navigate]);Replace the error branch inside useEffect. Change
} else {
alert('로그인 토큰이 존재하지 않습니다.');
navigate(ROUTES.login);
}to
} else {
setIsModalOpen(true);
}Define a modal-close handler. After the useEffect block (just before the return), insert
const handleModalClose = () => {
setIsModalOpen(false);
navigate(ROUTES.login);
};Render the Modal in the JSX. Inside the return’s <S.LoginSuccessContainer>, after <Spinner />, insert
{isModalOpen && (
<Modal
isOpen={isModalOpen}
onClose={handleModalClose}
title="로그인 오류"
>
<p>로그인 토큰이 존재하지 않습니다.</p>
</Modal>
)}This replaces the previous alert and ensures the user sees a styled modal.
Verify that the file now ends with the proper closing tags and export, ensuring no duplicate braces or missing parentheses.
A summary of the context that CodeRabbit is considering across the codebase:
Inspect the top of LoginSuccess.tsx to see which React hooks and modules are currently imported, so we can correctly update them to include useState.
Examine the Modal component to confirm its props (isOpen, onClose, title, children) and default export path, ensuring our usage matches the API.
-
✅ Create PR with these edits
-
📌 Create commit in current branch
-
📋 Get copyable edits
|
|
||
| function LoginSuccess() { | ||
| const [searchParams] = useSearchParams(); | ||
| const { storeLogin } = useAuthStore.getState(); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
상태 관리 접근 방식을 개선하세요.
Zustand 스토어의 getState()를 직접 사용하는 대신 훅을 사용하는 것이 좋습니다. 이렇게 하면 컴포넌트가 상태 변경에 반응하고 불필요한 리렌더링을 방지할 수 있습니다.
- const { storeLogin } = useAuthStore.getState();
+ const { storeLogin } = useAuthStore();📝 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.
| const { storeLogin } = useAuthStore.getState(); | |
| const { storeLogin } = useAuthStore(); |
| const Login = () => { | ||
| const { isOpen, message, handleModalOpen, handleModalClose } = useModal(); | ||
| const { userLogin } = useAuth(handleModalOpen); | ||
| const BASE_URL = import.meta.env.VITE_APP_API_BASE_URL; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
BASE_URL을 기존 상수에서 가져오는 것이 좋습니다.
환경 변수를 직접 참조하는 대신 src/api/http.api.ts에서 이미 정의된 BASE_URL 상수를 재사용하는 것이 좋습니다. 이렇게 하면 URL 정의가 일관되게 유지됩니다.
- const BASE_URL = import.meta.env.VITE_APP_API_BASE_URL;
+ import { BASE_URL } from '../../api/http.api';📝 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.
| const BASE_URL = import.meta.env.VITE_APP_API_BASE_URL; | |
| import { BASE_URL } from '../../api/http.api'; |
| localStorage.setItem('accessToken', accessToken); | ||
| navigate(ROUTES.main); | ||
| } else { | ||
| alert('로그인 토큰이 존재하지 않습니다.'); |
| alert('로그인 토큰이 존재하지 않습니다.'); | ||
| navigate(ROUTES.login); | ||
| } | ||
| }, []); |
구현내용
소셜로그인 구현
VITE_APP_BASE_URL_KAKAO=oauth2/authorization/kakaoVITE_APP_BASE_URL_NAVER=oauth2/authorization/naverVITE_APP_BASE_URL_GOOGLE=oauth2/authorization/googleVITE_APP_BASE_URL_GITHUB=oauth2/authorization/github추가해주시면 됩니다
연관이슈
close #271
Summary by CodeRabbit
신규 기능
버그 수정
스타일
기타