Skip to content

fix: 소셜 로그인 기능 임시 수정 #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DongEun02 merged 1 commit into from
Nov 17, 2025
Merged

fix: 소셜 로그인 기능 임시 수정 #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 31 additions & 1 deletion frontend/src/components/login/LoginForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,17 @@ import FindEmailResultModal from './FindEmailResultModal';

import { login } from '../../utils/auth';

import { api } from './../../utils/axios.js';
const getUserDetails = async () => {
try {
const res = await api.get('/api/user/details');
return res.data;
} catch (err) {
console.error('[getUserDetails] error:', err);
throw err;
}
};

const LoginForm = () => {
const nav = useNavigate();

Expand Down Expand Up @@ -62,9 +73,28 @@ const LoginForm = () => {
}
};

const handleSocialLogin = (provider) => {
// console.log(
// `${import.meta.env.VITE_API_URL}/oauth2/authorization/${provider}`
// );
window.location.href = `${import.meta.env.VITE_API_URL}/oauth2/authorization/${provider}`;
};
Comment on lines +76 to +81

@coderabbitai coderabbitai Bot Nov 17, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

주석 처리된 console.log를 제거하세요.

주석 처리된 디버그 코드는 프로덕션 코드에 남기지 않는 것이 좋습니다.

다음 diff를 적용하여 주석을 제거하세요:

 const handleSocialLogin = (provider) => {
-  // console.log(
-  //   `${import.meta.env.VITE_API_URL}/oauth2/authorization/${provider}`
-  // );
   window.location.href = `${import.meta.env.VITE_API_URL}/oauth2/authorization/${provider}`;
 };
📝 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.

Suggested change
const handleSocialLogin = (provider) => {
// console.log(
// `${import.meta.env.VITE_API_URL}/oauth2/authorization/${provider}`
// );
window.location.href = `${import.meta.env.VITE_API_URL}/oauth2/authorization/${provider}`;
};
const handleSocialLogin = (provider) => {
window.location.href = `${import.meta.env.VITE_API_URL}/oauth2/authorization/${provider}`;
};
🤖 Prompt for AI Agents 
In frontend/src/components/login/LoginForm.jsx around lines 76 to 81, remove the
commented-out console.log debug lines inside handleSocialLogin; delete the two
commented lines so only the working redirect (window.location.href =
`${import.meta.env.VITE_API_URL}/oauth2/authorization/${provider}`;) remains,
then run lint/format to ensure no stray whitespace or commented fragments
remain.


return (
<>
<div className={styles.formContainer}>
<button
onClick={async () => {
try {
const user = await getUserDetails();
console.log('USER:', user);
} catch (e) {
console.error(e);
}
}}
>
유저 정보 확인
</button>
Comment on lines +86 to +97

@coderabbitai coderabbitai Bot Nov 17, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

임시 디버그 버튼을 제거하거나 개발 환경으로 제한하세요.

프로덕션 코드에 스타일링되지 않은 디버그 버튼이 노출되어 있습니다. PR 제목이 "임시 수정"인 점을 고려하면 의도적일 수 있으나, 다음 중 하나를 권장합니다:

  1. 디버그 완료 후 버튼과 getUserDetails 함수를 제거
  2. 개발 환경에서만 표시되도록 조건부 렌더링 적용

옵션 2: 개발 환경에서만 표시

-    <button
-      onClick={async () => {
-        try {
-          const user = await getUserDetails();
-          console.log('USER:', user);
-        } catch (e) {
-          console.error(e);
-        }
-      }}
-    >
-      유저 정보 확인
-    </button>
+    {import.meta.env.DEV && (
+      <button
+        onClick={async () => {
+          try {
+            const user = await getUserDetails();
+            console.log('USER:', user);
+          } catch (e) {
+            console.error(e);
+          }
+        }}
+        style={{
+          padding: '8px 16px',
+          marginBottom: '16px',
+          backgroundColor: '#f0f0f0',
+          border: '1px solid #ccc',
+          borderRadius: '4px',
+          cursor: 'pointer'
+        }}
+      >
+        유저 정보 확인 (개발 전용)
+      </button>
+    )}

디버그 버튼 제거를 원하시면 제가 정리 작업을 도와드릴 수 있습니다. 새 이슈를 생성할까요?

🤖 Prompt for AI Agents 
In frontend/src/components/login/LoginForm.jsx around lines 86 to 97, there is
an unstyled debug button calling getUserDetails that should not appear in
production; either remove the button and any related debug-only getUserDetails
usage entirely, or wrap its render in a development-only condition (e.g.,
process.env.NODE_ENV === 'development') so it only mounts in non-production
builds, and ensure any console.log/console.error calls are removed or gated as
well.

<form className={styles.loginForm} onSubmit={handleLogin}>
<div className={styles.header}>
<div className={styles.logoBox}>
Expand Down Expand Up @@ -131,7 +161,7 @@ const LoginForm = () => {
</NavLink>
</div>

<SocialLoginButtons />
<SocialLoginButtons onSocialLogin={handleSocialLogin} />
</div>

{(modalStep === 'verifyPhoneForEmail' ||
Expand Down
14 changes: 10 additions & 4 deletions frontend/src/components/login/SocialLoginButtons.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,16 @@ import googleIcon from './../../assets/google.png';
import kakaoIcon from './../../assets/kakao.png';
import githubIcon from './../../assets/github.png';

const SocialLoginButtons = ({ onGoogle, onGithub, onKakao }) => {
const SocialLoginButtons = ({ onSocialLogin }) => {
return (
<div className={styles.socialContainer} aria-label="소셜 로그인">
<div className={styles.buttonGroup}>
<button
type="button"
className={`${styles.btn} ${styles.google}`}
onClick={onGoogle}
onClick={() => {
onSocialLogin('google');
}}
alt="구글로 로그인"
>
<img src={googleIcon} />
Expand All @@ -21,7 +23,9 @@ const SocialLoginButtons = ({ onGoogle, onGithub, onKakao }) => {
<button
type="button"
className={`${styles.btn} ${styles.github}`}
onClick={onGithub}
onClick={() => {
onSocialLogin('github');
}}
alt="깃허브로 로그인"
>
<img src={githubIcon} />
Expand All @@ -33,7 +37,9 @@ const SocialLoginButtons = ({ onGoogle, onGithub, onKakao }) => {
<button
type="button"
className={`${styles.btn} ${styles.kakao}`}
onClick={onKakao}
onClick={() => {
onSocialLogin('kakao');
}}
alt="카카오로 로그인"
>
<img src={kakaoIcon} />
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/OAuthSuccess.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { useEffect, useMemo, useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';

const getParams = (search) => {
const p = new URLSearchParams(search);

Expand Down Expand Up @@ -45,6 +44,7 @@ const getSafeRedirectPath = (encodedPath) => {
const OAuthSuccess = () => {
const nav = useNavigate();
const { search } = useLocation();

const params = useMemo(() => getParams(search), [search]);
const safePath = useMemo(
() => getSafeRedirectPath(params.next),
Expand Down
24 changes: 12 additions & 12 deletions frontend/vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
plugins: [
Expand All @@ -17,21 +17,21 @@ export default defineConfig({
{
src: 'pwa-192x192.png',
sizes: '192x192',
type: 'image/png'
type: 'image/png',
},
{
src: 'pwa-512x512.png',
sizes: '512x512',
type: 'image/png'
type: 'image/png',
},
{
src: 'pwa-512x512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'any maskable'
}
]
}
})
]
})
purpose: 'any maskable',
},
],
},
}),
],
});