Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughOAuth 임시 토큰 교환 콜백 페이지와 관련 API/훅/컴포넌트 및 아이콘 레지스트리 변경을 추가·리팩터링했습니다. 클라이언트 콜백은 temp_token을 교환해 토큰을 저장하고 성공 시 /main으로 리다이렉트합니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant AuthPage as /auth
participant BackendOAuth as Backend OAuth
participant Callback as /auth/callback
participant API as /api/auth
participant Main as /main
User->>AuthPage: 플랫폼 선택 (Kakao/Google)
AuthPage->>AuthPage: saveRecentPlatform(platform)
AuthPage->>BackendOAuth: 리다이렉트 (NEXT_PUBLIC_BACKEND_URL/...)
BackendOAuth-->>Callback: 리다이렉트 (temp_token 쿼리)
Callback->>Callback: temp_token 파싱
Callback->>API: POST /api/auth/temp-token/exchange (exchangeTempToken)
API-->>Callback: { success, accessToken, refreshToken, message }
alt 성공
Callback->>Callback: setTokens(accessToken, refreshToken)
Callback->>Main: 리다이렉트 (/main)
else 실패/오류
Callback->>Callback: alert(message) / 에러 처리
Callback->>AuthPage: 리다이렉트 (/auth)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
|
🏷️ Labeler has automatically applied labels based on your PR title, branch name, or commit message. |
1 similar comment
|
🏷️ Labeler has automatically applied labels based on your PR title, branch name, or commit message. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/auth/components/LoginButton.tsx (1)
1-1: 'use client' 디렉티브 제거 필요이 프로젝트는 Next.js Pages Router를 사용하고 있어 'use client' 디렉티브가 불필요합니다. App Router에서만 필요한 디렉티브입니다.
Based on learnings
이 diff를 적용하세요:
-'use client'; import Image from 'next/image';
🧹 Nitpick comments (5)
src/pages/auth/callback.tsx (3)
13-14: router.query 사용 권장Next.js Pages Router에서는
router.query를 통해 쿼리 파라미터에 직접 접근할 수 있습니다. 수동 파싱보다 안전하고 간결합니다.이 diff를 적용하세요:
- const searchParams = new URLSearchParams(router.asPath.split('?')[1]); - const tempToken = searchParams.get('temp_token'); + const tempToken = router.query.temp_token as string | undefined;
15-15: 프로덕션 코드에서 console.log 제거 필요디버깅용 console.log 문을 제거해주세요.
이 diff를 적용하세요:
const tempToken = searchParams.get('temp_token'); - console.log('tempToken:', tempToken); if (!tempToken) return; const handleLogin = async () => { try { const res = await exchangeTempToken(tempToken); - console.log('API 응답:', res); if (res.success) { - console.log('redirect to main 페이지'); router.replace('/main');Also applies to: 22-22, 25-25
38-38: useEffect 의존성 배열 검토 권장
router.query사용 시 의존성 배열에router.query.temp_token를 포함하는 것이 좋습니다. 또는router객체 자체를 포함하여 더 안전하게 만들 수 있습니다.- }, [router.isReady, router.asPath]); + }, [router]);src/pages/auth/components/LoginButton.tsx (1)
59-68: 환경 변수 검증 추가 권장
process.env.NEXT_PUBLIC_BACKEND_URL이 undefined일 경우를 대비한 검증을 추가하는 것이 좋습니다.const handleClick = () => { if (onClick) return onClick(); const base = process.env.NEXT_PUBLIC_BACKEND_URL; + if (!base) { + console.error('NEXT_PUBLIC_BACKEND_URL is not defined'); + return; + } const url = platform === 'kakao'src/pages/auth/index.tsx (1)
14-22: OAuth URL 생성 로직 중복
handleLoginClick의 OAuth URL 생성 로직이LoginButton.tsx의handleClick과 중복됩니다. 공통 유틸 함수로 추출하는 것을 고려해보세요.예를 들어, 다음과 같이 공통 함수를 만들 수 있습니다:
// src/shared/utils/oauth.ts export const getOAuthUrl = (platform: '카카오' | '구글' | 'kakao' | 'google') => { const base = process.env.NEXT_PUBLIC_BACKEND_URL; if (!base) throw new Error('NEXT_PUBLIC_BACKEND_URL is not defined'); const normalizedPlatform = platform === '카카오' || platform === 'kakao' ? 'kakao' : 'google'; return `${base}/oauth2/authorization/${normalizedPlatform}`; };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
public/assets/GoogleIcon.svgis excluded by!**/*.svgpublic/assets/KakaoIcon.svgis excluded by!**/*.svgpublic/assets/Logo.svgis excluded by!**/*.svg
📒 Files selected for processing (6)
src/pages/auth/callback.tsx(1 hunks)src/pages/auth/components/LoginButton.tsx(1 hunks)src/pages/auth/hooks/useRecentLogin.ts(1 hunks)src/pages/auth/index.tsx(5 hunks)src/shared/api/auth.ts(1 hunks)src/shared/api/instance.ts(2 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-10-31T17:34:04.352Z
Learnt from: jjangminii
Repo: geulDa/FE PR: 64
File: src/pages/map/result/components/ResultMap.tsx:3-3
Timestamp: 2025-10-31T17:34:04.352Z
Learning: The geulDa/FE project uses Next.js Pages Router (not App Router), so components should import useRouter from 'next/router' and should not use the 'use client' directive.
Applied to files:
src/pages/auth/index.tsxsrc/pages/auth/callback.tsx
🧬 Code graph analysis (3)
src/pages/auth/index.tsx (1)
src/pages/auth/hooks/useRecentLogin.ts (1)
useRecentLogin(6-20)
src/pages/auth/callback.tsx (2)
src/shared/api/auth.ts (1)
exchangeTempToken(5-17)src/pages/loading/index.tsx (1)
Loading(5-37)
src/shared/api/auth.ts (3)
src/shared/api/instance.ts (1)
apiAuth(20-23)src/shared/types/authtypes.ts (2)
ApiResponse(1-6)TokenData(8-13)src/shared/utils/token.ts (1)
setTokens(11-15)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-and-deploy
🔇 Additional comments (9)
src/shared/api/instance.ts (1)
9-9: 타입 import 경로 정리 확인 완료타입 정의를
@/shared/types/authtypes로 통합한 것은 좋은 구조입니다. 다른 파일들과의 일관성도 확보되어 있습니다.src/shared/api/auth.ts (1)
5-17: 임시 토큰 교환 로직 구현 확인 완료토큰 교환 및 저장 로직이 명확합니다. 에러 핸들링은 호출자(callback.tsx)에서 처리되고 있어 적절합니다.
src/pages/auth/hooks/useRecentLogin.ts (1)
6-20: 최근 로그인 플랫폼 추적 로직 확인 완료localStorage를 활용한 최근 로그인 플랫폼 추적 구현이 깔끔합니다. useEffect로 클라이언트 사이드에서만 localStorage에 접근하도록 보장되어 있습니다.
src/pages/auth/callback.tsx (1)
24-30: PR 설명과 구현 불일치 확인 필요PR 설명에는 "로그인 후 이전 페이지 있으면 그곳으로, 없으면 메인 페이지로"라고 명시되어 있으나, 현재 코드는 항상
/main으로 리다이렉트합니다. 의도적으로 나중에 구현 예정인지, 아니면 누락된 것인지 확인이 필요합니다.이전 페이지로 돌아가는 로직이 필요하다면 다음과 같이 구현할 수 있습니다:
if (res.success) { const returnUrl = router.query.returnUrl as string | undefined; if (returnUrl) { router.replace(returnUrl); } else if (document.referrer && document.referrer !== window.location.href) { router.back(); } else { router.replace('/main'); } }src/pages/auth/components/LoginButton.tsx (2)
54-57: 플랫폼 유효성 검증 추가 확인 완료런타임에 잘못된 플랫폼 값을 조기에 감지하는 방어적 코딩이 잘 되어 있습니다.
39-39: 아이콘 파일 경로 검증 완료지정된 경로에서 아이콘 파일들이 확인되었습니다:
public/assets/GoogleIcon.svg✓public/assets/KakaoIcon.svg✓변경된 경로의 파일들이 모두 정상적으로 존재하므로, 아이콘 경로 업데이트가 올바르게 적용되었습니다.
src/pages/auth/index.tsx (3)
25-31: 비회원 로그인 네비게이션 로직 확인 완료
document.referrer를 활용한 이전 페이지 확인 로직이 잘 구현되어 있습니다.
99-99: 최근 로그인 버블 위치 조정 확인 완료버블 위치가
-3.8rem에서-2.5rem으로 조정되어 시각적으로 더 적절해 보입니다.Also applies to: 115-115
72-79: 로고 이미지 최적화 설정 확인 완료Next.js Image 컴포넌트 사용과
priority속성 추가로 LCP(Largest Contentful Paint) 최적화가 잘 되어 있습니다. 로고 파일이 올바른 경로(public/assets/Logo.svg)에 존재함을 확인했습니다.
| @@ -0,0 +1,41 @@ | |||
| 'use client'; | |||
There was a problem hiding this comment.
'use client' 디렉티브 제거 필요
이 프로젝트는 Next.js Pages Router를 사용하고 있어 'use client' 디렉티브가 불필요합니다. App Router에서만 필요한 디렉티브입니다.
Based on learnings
이 diff를 적용하세요:
-'use client';
import { useEffect } from 'react';🤖 Prompt for AI Agents
In src/pages/auth/callback.tsx around line 1, remove the top-level "'use
client';" directive because this file lives in the Pages Router and does not
require the App Router client directive; delete that line and verify no other
client-only hooks or browser-only APIs remain that would require converting the
file to a client component.
| @@ -0,0 +1,20 @@ | |||
| 'use client'; | |||
There was a problem hiding this comment.
'use client' 디렉티브 제거 필요
이 프로젝트는 Next.js Pages Router를 사용하고 있어 'use client' 디렉티브가 불필요합니다. App Router에서만 필요한 디렉티브입니다.
Based on learnings
이 diff를 적용하세요:
-'use client';
import { useEffect, useState } from 'react';📝 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.
| 'use client'; | |
| import { useEffect, useState } from 'react'; |
🤖 Prompt for AI Agents
In src/pages/auth/hooks/useRecentLogin.ts around line 1, the file contains a
'use client' directive which is unnecessary for a Pages Router project; remove
the "'use client';" directive from the top of the file (delete that line) so the
hook runs without App Router–specific client directive.
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (2)
src/shared/hooks/useRecentLogin.ts (1)
1-1: 'use client' 디렉티브 제거 필요이 프로젝트는 Next.js Pages Router를 사용하고 있어 'use client' 디렉티브가 불필요합니다.
Based on learnings
-'use client'; import { useEffect, useState } from 'react';src/pages/auth/index.tsx (1)
1-1: 'use client' 디렉티브 제거 필요이 프로젝트는 Next.js Pages Router를 사용하고 있어 'use client' 디렉티브가 불필요합니다.
Based on learnings
-'use client'; import Image from 'next/image';
🧹 Nitpick comments (1)
src/shared/hooks/useRecentLogin.ts (1)
14-17: localStorage 오류 처리 추가 권장
localStorage.setItem은 저장 공간 초과 또는 비활성화된 경우 예외를 발생시킬 수 있습니다. 에러 처리를 추가하면 더욱 견고한 코드가 됩니다.다음 diff를 적용하세요:
const saveRecentPlatform = (platform: string) => { - localStorage.setItem(RECENT_LOGIN_KEY, platform); - setRecentPlatform(platform); + try { + localStorage.setItem(RECENT_LOGIN_KEY, platform); + setRecentPlatform(platform); + } catch (error) { + console.error('Failed to save recent login platform:', error); + } };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/pages/auth/index.tsx(5 hunks)src/shared/hooks/useRecentLogin.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-10-31T17:34:04.352Z
Learnt from: jjangminii
Repo: geulDa/FE PR: 64
File: src/pages/map/result/components/ResultMap.tsx:3-3
Timestamp: 2025-10-31T17:34:04.352Z
Learning: The geulDa/FE project uses Next.js Pages Router (not App Router), so components should import useRouter from 'next/router' and should not use the 'use client' directive.
Applied to files:
src/shared/hooks/useRecentLogin.tssrc/pages/auth/index.tsx
🧬 Code graph analysis (1)
src/pages/auth/index.tsx (1)
src/shared/hooks/useRecentLogin.ts (1)
useRecentLogin(6-20)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-and-deploy
🔇 Additional comments (1)
src/pages/auth/index.tsx (1)
72-79: 로고 파일 경로 확인 완료파일이
public/assets/Logo.svg에 정상적으로 존재하므로 문제가 없습니다. 현재 코드는 올바릅니다.
| const handleGuestClick = () => { | ||
| if (document.referrer && document.referrer !== window.location.href) { | ||
| router.back(); | ||
| } else { | ||
| router.push('/main'); | ||
| } | ||
| }; |
There was a problem hiding this comment.
document.referrer 사용의 신뢰성 문제
document.referrer는 개인정보 보호 설정, 직접 URL 접근, HTTPS→HTTP 전환 등의 경우 비어있을 수 있어 신뢰할 수 없습니다. 라우터 쿼리 파라미터를 사용하는 것이 더 안정적입니다.
이전 페이지 정보를 라우터 쿼리로 전달하는 방식을 권장합니다:
// 로그인 페이지로 이동할 때
router.push({ pathname: '/auth', query: { returnUrl: router.asPath } });
// handleGuestClick에서
const handleGuestClick = () => {
const returnUrl = router.query.returnUrl as string;
if (returnUrl) {
router.push(returnUrl);
} else {
router.push('/main');
}
};🤖 Prompt for AI Agents
src/pages/auth/index.tsx around lines 25-31: document.referrer is unreliable;
change handleGuestClick to read a returnUrl from router.query (e.g., const
returnUrl = router.query.returnUrl as string) and if present
router.push(returnUrl) else router.push('/main'); also ensure callers that
navigate to the auth page include the returnUrl in the query (router.push({
pathname: '/auth', query: { returnUrl: router.asPath } })) so the previous page
is reliably preserved; keep a safe fallback to '/main'.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (4)
src/pages/auth/index.tsx (4)
1-1: Pages Router에서는 'use client'가 불필요합니다Pages Router에서는 기본적으로 클라이언트 컴포넌트이므로 이 디렉티브는 의미가 없고 번들만 늘립니다. 제거해 주세요. Based on learnings
14-20: 표시 문자열로 분기하면 유지보수와 번역 변경 시 바로 깨집니다OAuth 분기와 최근 로그인 표시가
'카카오','구글'같은 한글 레이블에 의존하고 있어 레이블만 바꿔도 로직이 무너집니다. 플랫폼 키와 표시 문자열을 분리해 주세요.+const PLATFORM = { + KAKAO: 'kakao', + GOOGLE: 'google', +} as const; + +const PLATFORM_LABEL: Record<(typeof PLATFORM)[keyof typeof PLATFORM], string> = { + [PLATFORM.KAKAO]: '카카오', + [PLATFORM.GOOGLE]: '구글', +}; + -const handleLoginClick = (platform: string) => { - saveRecentPlatform(platform); +const handleLoginClick = (platform: (typeof PLATFORM)[keyof typeof PLATFORM]) => { + saveRecentPlatform(PLATFORM_LABEL[platform]); const base = process.env.NEXT_PUBLIC_BACKEND_URL; - const url = - platform === '카카오' - ? `${base}/oauth2/authorization/kakao` - : `${base}/oauth2/authorization/google`; + const url = `${base}/oauth2/authorization/${platform}`; window.location.href = url; }; ... - <LoginButton - platform='kakao' - onClick={() => handleLoginClick('카카오')} - /> - {recentPlatform === '카카오' && ( + <LoginButton + platform='kakao' + onClick={() => handleLoginClick(PLATFORM.KAKAO)} + /> + {recentPlatform === PLATFORM_LABEL[PLATFORM.KAKAO] && ( ... - <LoginButton - platform='google' - onClick={() => handleLoginClick('구글')} - /> - {recentPlatform === '구글' && ( + <LoginButton + platform='google' + onClick={() => handleLoginClick(PLATFORM.GOOGLE)} + /> + {recentPlatform === PLATFORM_LABEL[PLATFORM.GOOGLE] && (Also applies to: 94-120
25-30: document.referrer에 의존하면 이전 페이지 복귀가 자주 실패합니다프라이버시 설정, 직접 접속 등으로
document.referrer가 비어 있으면 원하는 페이지로 돌아가지 못합니다. 쿼리 파라미터로returnUrl을 넘겨 처리하는 방식으로 신뢰성을 확보해 주세요.const handleGuestClick = () => { - if (document.referrer && document.referrer !== window.location.href) { - router.back(); - } else { - router.push('/main'); - } + const returnUrl = router.query.returnUrl as string | undefined; + if (returnUrl) { + router.push(returnUrl); + return; + } + router.push('/main'); };
16-21: 환경 변수 검증 누락으로 로그인 리다이렉트가 깨질 수 있습니다
NEXT_PUBLIC_BACKEND_URL이 비거나 공백이면undefined/oauth2/...로 이동해 로그인 자체가 막힙니다. 버튼에서도 같은 문제가 있었으니 여기서도 반드시 막아야 합니다.다음과 같이 방어 로직을 추가해 주세요.
const handleLoginClick = (platform: string) => { saveRecentPlatform(platform); const base = process.env.NEXT_PUBLIC_BACKEND_URL; + if (!base) { + console.error('NEXT_PUBLIC_BACKEND_URL is not defined'); + return; + } const url = platform === '카카오' ? `${base}/oauth2/authorization/kakao` : `${base}/oauth2/authorization/google`;
🧹 Nitpick comments (1)
src/shared/components/auth/LoginButton.tsx (1)
29-38: 필수 onClick 때문에 새 폴백 분기가 영원히 실행되지 않습니다
onClick을 필수로 선언하면서if (onClick) return onClick();으로 즉시 빠져나가고 있어, 기본 리다이렉트 분기는 호출될 수 없습니다. 버튼에서 공통 리다이렉트를 처리하려면onClick을 옵션으로 낮추거나 폴백 코드를 제거해 중복을 줄여 주세요.예시는 아래와 같습니다.
-interface LoginButtonProps extends VariantProps<typeof loginButtonVariants> { - onClick: () => void; +interface LoginButtonProps extends VariantProps<typeof loginButtonVariants> { + onClick?: () => void; className?: string; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/pages/auth/index.tsx(5 hunks)src/shared/components/auth/LoginButton.tsx(1 hunks)src/shared/components/auth/RecentLoginBubble.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-10-31T17:34:04.352Z
Learnt from: jjangminii
Repo: geulDa/FE PR: 64
File: src/pages/map/result/components/ResultMap.tsx:3-3
Timestamp: 2025-10-31T17:34:04.352Z
Learning: The geulDa/FE project uses Next.js Pages Router (not App Router), so components should import useRouter from 'next/router' and should not use the 'use client' directive.
Applied to files:
src/pages/auth/index.tsx
🧬 Code graph analysis (3)
src/pages/auth/index.tsx (1)
src/shared/hooks/useRecentLogin.ts (1)
useRecentLogin(6-20)
src/shared/components/auth/RecentLoginBubble.tsx (1)
src/shared/lib/utils.ts (1)
cn(71-73)
src/shared/components/auth/LoginButton.tsx (1)
src/shared/lib/utils.ts (1)
cn(71-73)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-and-deploy
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/shared/icons/index.ts (1)
1-1: 자동 생성 파일을 수동으로 수정함iconNames.ts와 마찬가지로 이 파일도 "자동 생성 파일입니다. (직접 수정 금지)" 주석이 있지만 수동으로 수정되었습니다. 로고 SVG import 추가 및 backto.svg import 위치 변경이 수동으로 이루어졌습니다.
아이콘 생성 프로세스를 통해 이러한 변경사항을 반영하거나, 파일이 더 이상 자동 생성되지 않는다면 주석을 업데이트하세요.
Also applies to: 2-2, 15-17
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (24)
src/shared/icons/source/CalendarBlank.svgis excluded by!**/*.svgsrc/shared/icons/source/Caret.svgis excluded by!**/*.svgsrc/shared/icons/source/ChatCircle.svgis excluded by!**/*.svgsrc/shared/icons/source/Check.svgis excluded by!**/*.svgsrc/shared/icons/source/CopySimple.svgis excluded by!**/*.svgsrc/shared/icons/source/Export.svgis excluded by!**/*.svgsrc/shared/icons/source/FadersHorizontal.svgis excluded by!**/*.svgsrc/shared/icons/source/GoogleIcon.svgis excluded by!**/*.svgsrc/shared/icons/source/HeartStraight.svgis excluded by!**/*.svgsrc/shared/icons/source/HouseSimple.svgis excluded by!**/*.svgsrc/shared/icons/source/KakaoIcon.svgis excluded by!**/*.svgsrc/shared/icons/source/ListButton.svgis excluded by!**/*.svgsrc/shared/icons/source/Logo.svgis excluded by!**/*.svgsrc/shared/icons/source/LogoMint.svgis excluded by!**/*.svgsrc/shared/icons/source/LogoPink.svgis excluded by!**/*.svgsrc/shared/icons/source/MapPin.svgis excluded by!**/*.svgsrc/shared/icons/source/MapPin_.svgis excluded by!**/*.svgsrc/shared/icons/source/NextButton.svgis excluded by!**/*.svgsrc/shared/icons/source/PressStamp.svgis excluded by!**/*.svgsrc/shared/icons/source/Save.svgis excluded by!**/*.svgsrc/shared/icons/source/Stamp.svgis excluded by!**/*.svgsrc/shared/icons/source/User.svgis excluded by!**/*.svgsrc/shared/icons/source/backto.svgis excluded by!**/*.svgsrc/shared/icons/source/x.svgis excluded by!**/*.svg
📒 Files selected for processing (3)
src/pages/auth/index.tsx(5 hunks)src/shared/icons/iconNames.ts(1 hunks)src/shared/icons/index.ts(2 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-10-31T17:34:04.352Z
Learnt from: jjangminii
Repo: geulDa/FE PR: 64
File: src/pages/map/result/components/ResultMap.tsx:3-3
Timestamp: 2025-10-31T17:34:04.352Z
Learning: The geulDa/FE project uses Next.js Pages Router (not App Router), so components should import useRouter from 'next/router' and should not use the 'use client' directive.
Applied to files:
src/pages/auth/index.tsx
🧬 Code graph analysis (1)
src/pages/auth/index.tsx (1)
src/shared/hooks/useRecentLogin.ts (1)
useRecentLogin(6-20)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-and-deploy
🔇 Additional comments (3)
src/pages/auth/index.tsx (2)
72-79: 로고 영역 구현 확인새로 추가된 Logo 아이콘 컴포넌트를 사용하여 깔끔하게 구현되었습니다. 같은 PR에서 아이콘 정의와 사용이 함께 이루어져 일관성이 있습니다.
118-123: 비회원 로그인 버튼 구현 양호텍스트를 클릭 가능한 요소로 만들고 적절한 시각적 피드백(underline, cursor-pointer)을 제공하여 사용자 경험이 개선되었습니다.
src/shared/icons/iconNames.ts (1)
1-1: 원본 리뷰 코멘트는 부정확합니다검증 결과, "Logo", "LogoMint", "LogoPink" 세 아이콘은 수동으로 추가된 것이 아닙니다.
src/shared/icons/source/디렉토리에 실제로 존재하는 SVG 파일들이며,generate-icon-list.ts스크립트가 이 디렉토리의 모든 SVG 파일을 자동으로 감지하여iconNames.ts를 생성합니다. 따라서 파일이 재생성되어도 이 아이콘들이 손실되지 않습니다. 현재 상태는 정상이며 조치가 필요 없습니다.Likely an incorrect or invalid review comment.
| <div className='mt-[5rem] text-label-md text-gray-400 whitespace-nowrap text-ellipsis overflow-hidden text-center'> | ||
| <p>비회원은 스탬프 저장과 공유 기능을 사용할 수 없습니다.</p> | ||
| </div> |
There was a problem hiding this comment.
중요 안내문이 잘릴 수 있음
whitespace-nowrap와 text-ellipsis로 인해 좁은 화면에서 비회원 제한사항 안내문이 잘려서 표시될 수 있습니다. 사용자가 게스트 로그인을 선택하기 전에 이 정보를 완전히 읽을 수 있어야 합니다.
다음 diff를 적용하여 텍스트를 여러 줄로 표시하도록 수정하세요:
- <div className='mt-[5rem] text-label-md text-gray-400 whitespace-nowrap text-ellipsis overflow-hidden text-center'>
+ <div className='mt-[5rem] text-label-md text-gray-400 text-center'>
<p>비회원은 스탬프 저장과 공유 기능을 사용할 수 없습니다.</p>
</div>📝 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.
| <div className='mt-[5rem] text-label-md text-gray-400 whitespace-nowrap text-ellipsis overflow-hidden text-center'> | |
| <p>비회원은 스탬프 저장과 공유 기능을 사용할 수 없습니다.</p> | |
| </div> | |
| <div className='mt-[5rem] text-label-md text-gray-400 text-center'> | |
| <p>비회원은 스탬프 저장과 공유 기능을 사용할 수 없습니다.</p> | |
| </div> |
🤖 Prompt for AI Agents
In src/pages/auth/index.tsx around lines 127 to 129, the guest-notice div uses
whitespace-nowrap and text-ellipsis causing the important message to be
truncated on narrow screens; remove whitespace-nowrap and text-ellipsis and
allow wrapping by replacing them with whitespace-normal and break-words (you can
keep overflow-hidden and text-center if desired) so the paragraph flows to
multiple lines and remains fully readable on small viewports.
…ogin-design-api
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
src/shared/components/auth/LoginButton.tsx (1)
38-53: 성능 최적화: iconData를 컴포넌트 외부로 이동하세요.
iconData객체가 매 렌더링마다 재생성됩니다. 이 객체는 정적 데이터이므로 컴포넌트 외부에 선언하여 불필요한 메모리 할당을 방지하세요.컴포넌트 정의 위쪽으로
iconData를 이동하세요:); +const iconData = { + google: { + src: '/assets/GoogleIcon.svg', + alt: 'Google Logo', + width: 36, + height: 36, + label: '구글 로그인', + }, + kakao: { + src: '/assets/KakaoIcon.svg', + alt: 'Kakao Logo', + width: 28, + height: 28, + label: '카카오 로그인', + }, +} as const; + interface LoginButtonProps extends VariantProps<typeof loginButtonVariants> { onClick?: () => void; className?: string; } export default function LoginButton({ onClick, platform, className, }: LoginButtonProps) { - const iconData = { - google: { - src: '/assets/GoogleIcon.svg', - alt: 'Google Logo', - width: 36, - height: 36, - label: '구글 로그인', - }, - kakao: { - src: '/assets/KakaoIcon.svg', - alt: 'Kakao Logo', - width: 28, - height: 28, - label: '카카오 로그인', - }, - };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/pages/auth/index.tsx(5 hunks)src/shared/components/auth/LoginButton.tsx(1 hunks)src/shared/hooks/useRecentLogin.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/shared/hooks/useRecentLogin.ts
- src/pages/auth/index.tsx
🧰 Additional context used
🧬 Code graph analysis (1)
src/shared/components/auth/LoginButton.tsx (2)
src/shared/lib/utils.ts (1)
cn(71-73)src/pages/auth/components/LoginButton.tsx (2)
LoginButton(33-67)LoginButtonProps(28-31)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-and-deploy
🔇 Additional comments (2)
src/shared/components/auth/LoginButton.tsx (2)
8-26: LGTM!
loginButtonVariants정의가 올바르며, CVA를 활용한 플랫폼별 스타일링이 적절합니다.
76-85: LGTM!버튼 JSX가 올바르게 구성되어 있으며,
aria-label을 통한 접근성 처리가 적절합니다.priority속성을 통해 아이콘이 우선적으로 로드되는 점도 좋습니다.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (3)
src/pages/auth/index.tsx (2)
1-1: 'use client' 디렉티브 제거 필요
이 페이지는 Pages Router에서 렌더되므로'use client'가 아무 효과 없이 빌드 아웃풋만 어지럽힙니다. 최상단 한 줄을 제거해 주세요. Based on learnings
41-46:document.referrer의존을 제거하고 쿼리 파라미터를 사용하세요
document.referrer는 브라우저/보안 설정에 따라 비어 있을 수 있어 복귀 경로가 자주 유실됩니다. 로그인 진입 시returnUrl을 쿼리로 넘기고 여기서는 그 값을 읽어 분기하도록 바꿔 주세요. Based on learningssrc/shared/components/auth/LoginButton.tsx (1)
62-71: NEXT_PUBLIC_BACKEND_URL 누락 시 사용자 안내가 없습니다
환경 변수가 빠지면 버튼이 조용히 return되어 로그인 기능이 전혀 동작하지 않습니다. 프로덕션에서도 즉시 알림(토스트/모달 등)을 띄우고, 개발 환경에서는 콘솔 로그나 예외로 원인을 드러내 주세요. 기존 리뷰와 동일한 지적이므로 이번에 처리 부탁드립니다.- if (!base) { - const message = 'NEXT_PUBLIC_BACKEND_URL is not defined'; - if (process.env.NODE_ENV === 'development') { - throw new Error(message); - } - console.error(message); - return; - } + if (!base) { + const message = 'NEXT_PUBLIC_BACKEND_URL가 설정되지 않아 로그인을 진행할 수 없습니다.'; + if (process.env.NODE_ENV === 'development') { + throw new Error(message); + } + console.error(message); + alert(message); // 전역 알림 유틸이 있다면 그쪽을 호출해 주세요. + return; + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/pages/auth/index.tsx(5 hunks)src/shared/components/auth/LoginButton.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-10-31T17:34:04.352Z
Learnt from: jjangminii
Repo: geulDa/FE PR: 64
File: src/pages/map/result/components/ResultMap.tsx:3-3
Timestamp: 2025-10-31T17:34:04.352Z
Learning: The geulDa/FE project uses Next.js Pages Router (not App Router), so components should import useRouter from 'next/router' and should not use the 'use client' directive.
Applied to files:
src/pages/auth/index.tsxsrc/shared/components/auth/LoginButton.tsx
🧬 Code graph analysis (2)
src/pages/auth/index.tsx (2)
src/shared/hooks/useRecentLogin.ts (1)
useRecentLogin(6-21)src/shared/icons/components/icon.tsx (1)
Icon(57-129)
src/shared/components/auth/LoginButton.tsx (1)
src/shared/lib/utils.ts (1)
cn(71-73)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-and-deploy
| )?.[0]; | ||
| if (!platform) return; | ||
|
|
||
| saveRecentPlatform(platform); |
There was a problem hiding this comment.
최근 로그인 말풍선이 항상 숨겨집니다
saveRecentPlatform에 저장되는 값이 'kakao'/'google'인데 아래 렌더 조건은 '카카오'/'구글'과 비교하고 있어 항상 false가 됩니다. 결과적으로 최근 로그인 말풍선이 표시되지 않는 회귀가 발생합니다. 저장 값을 표시 문자열로 유지하거나 조건식을 PLATFORM 상수와 일치하도록 수정해 주세요.
- saveRecentPlatform(platform);
+ saveRecentPlatform(platformDisplay);🤖 Prompt for AI Agents
In src/pages/auth/index.tsx around line 30, the recent-login bubble never shows
because saveRecentPlatform stores 'kakao'/'google' but the render condition
compares against Korean display strings ('카카오'/'구글'), causing a permanent false;
fix by making the condition match the stored value—either change the render
check to use the PLATFORM constant or the lowercase keys ('kakao'/'google') (or
map stored keys to display labels before checking), or alternatively change
saveRecentPlatform to persist the display string consistently; update whichever
side is simplest to keep key/display usage consistent across save and render.
| if (!base) { | ||
| console.error('NEXT_PUBLIC_BACKEND_URL is not defined'); | ||
| return; | ||
| } | ||
| const url = `${base}/oauth2/authorization/${platform}`; | ||
| window.location.href = url; |
There was a problem hiding this comment.
환경 변수 누락 시 사용자 피드백 추가 필요
NEXT_PUBLIC_BACKEND_URL이 비어 있으면 콘솔 로그만 남기고 return되어 사용자는 클릭해도 아무 반응이 없는 것처럼 보입니다. 구성 실수 시 로그인 기능이 완전히 막히므로 토스트·알림 등을 통해 즉시 안내하고 개발 환경에서만 상세 로그를 출력해 주세요.
- if (!base) {
- console.error('NEXT_PUBLIC_BACKEND_URL is not defined');
- return;
- }
+ if (!base) {
+ const message = '로그인 서버 설정이 누락되어 로그인을 진행할 수 없습니다.';
+ if (process.env.NODE_ENV === 'development') {
+ console.error(message);
+ }
+ alert(message); // 앱의 알림/토스트 유틸이 있다면 그쪽을 사용해 주세요.
+ return;
+ }🤖 Prompt for AI Agents
In src/pages/auth/index.tsx around lines 32 to 37 the code silently returns when
NEXT_PUBLIC_BACKEND_URL is missing; change this so users get immediate feedback
and developers still see details: detect missing base, call the app's
user-facing notification (toast/alert) to show a clear message like "Login
unavailable — backend URL not configured", then return; keep the detailed
console.error or console.debug but only when process.env.NODE_ENV !==
'production' (or use isDev flag) so devs see the error details; ensure you
import/ use the existing notification utility and keep the early return after
notifying the user.
…ogin-design-api
엄청 큰 차이는 없습니다! OAuth 연결 흐름은 동일하나 SSR 환경을 고려해서 API Route에서 토큰 처리를 한다는 차이..? 정도 있습니다! |
3 participants
🔥 작업 내용
🤔 추후 작업 사항
🔗 이슈
PR Point (To Reviewer)
로그인 디자인 수정
피그마 기준 로고를 추가한 로그인 디자인 수정 완료했습니다 :)
로고는 svgo 하려 했으나.. 그냥.. pink mint 일반 넣어놨습니다(수정 필요하면합니다)
소셜 로그인 연동
소셜 로그인 연동 해놨습니다. 따로 auth 페이지 내 api로 작업하려했으나,
유저 정보는 범용적이라 생각해 shared 내 api/auth 로 분리했습니다.
로그인 후 이전 페이지가 있다면 이전 페이지로
없다면 메인페이지로 리다이랙트 하도록 했습니다.
🚀 트러블 슈팅
Api 연결 컴포넌트 pages 내부 컴포넌트 구조 변경
저도 하이브리드형 아키텍처 처음 사용해보면서.. 처음 보는 오류 였고, 꼭 정민님 민균님 두 분 다 보셔야 할 거 같아요..
API 연동 이후 Next.js 15가 pages/** 하위의 모든 .tsx를 라우트 후보로 스캔되면서
pages/auth/components/* 도 전부 페이지로 인식되었고 그 가운데서 build error가 발생했습니다..
그래서 pages/ 아래에서는 단순 라우트 컴포넌트되는 컴포넌트 외
API연결 및 라우팅용이 아닌 UI/로직은 src/features/<domain 이름>/**
브라우저 전용 기능은 클라이언트 훅 + useEffect로만 접근 해야할 거 같습니다.
📸 피그마 스크린샷 or 기능 GIF
구글
-.Clipchamp.mp4
카카오
-.Clipchamp.1.mp4
Summary by CodeRabbit
New Features
Improvements