fix: 로그인 안되는 문제 해결 1차 by junjeeong · Pull Request #210 · MBTips/FE-MBTips

junjeeong · 2025-04-21T05:34:52Z

Pull requests

✅ 작업한 내용

KakaoLoginButton에서 kakaoUrl 변수에서 vite 로컬 환경변수 값들을 모두 고정값으로 변경해주었습니다.
login 함수가 제대로 동작하고 res.ok를 받아야지만 홈페이지로 리다이렉트 시키도록 했습니다.

🔢 #209

❗️PR Point

없음

📸 스크린샷

Soohyuniii · 2025-04-21T05:45:55Z

src/components/button/KakaoLoginButton.tsx

@@ -1,5 +1,5 @@
 const KakaoLoginButton = () => {
-  const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${import.meta.env.VITE_KAKAO_REST_API_KEY}&redirect_uri=${import.meta.env.VITE_KAKAO_REDIRECT_URI}&response_type=code`;
+  const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=3e5cfa29037d1bd11eb5448f9b298bfe&redirect_uri=https://localhost:5173/kakao-login&response_type=code`;


임시로 로컬에서만 동작하도록 처리하신걸까요?

이제 보니 잘못하고 loclahost로 넣었네요...배포 주소로 변경하겠습니다 ㅎㅎ

Soohyuniii · 2025-04-21T08:24:39Z

src/components/button/KakaoLoginButton.tsx

@@ -1,5 +1,5 @@
 const KakaoLoginButton = () => {
-  const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${import.meta.env.VITE_KAKAO_REST_API_KEY}&redirect_uri=${import.meta.env.VITE_KAKAO_REDIRECT_URI}&response_type=code`;
+  const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=3e5cfa29037d1bd11eb5448f9b298bfe&redirect_uri=https://mbtips.kr/kakao-login&response_type=code`;


id는 왜 노출하는것으로 변경된걸까요,,?

노출하지 않고 하는 방법으로는 아래 2가지 방법이 있었는데 client id 노출 유무를 백엔드 팀에게 물어보니 괜찮다는 답변을 받아서 그냥 고정값으로 넣어 주었습니다! 또한 kakao app key는 api 요청이 있으면 어떤 방법으로든 외부에 노출이 된다고 합니다! https://devtalk.kakao.com/t/api-key/138195

FE 환경변수를 백엔드팀에서 설정

authorize-url api에 HTTP 요청을 보내서 받아오는 방법

https://devtalk.kakao.com/t/api-key/138195 연결이 되지 않습니다ㅜ

위에 링크가 안들어가진다는 말씀이신가요?

Soohyuniii · 2025-04-21T09:04:17Z

src/pages/KaKaoLogin.tsx

+          const res = await login(code);
+          if (res.ok) navigate("/");
        } catch (err) {
          console.error("카카오 로그인에 실패했습니다.");


추가하신 엣지케이스 연결하면 좋을 것 같습니다!

c632e2d 반영했습니다!

soohyun-myung · 2025-04-22T01:54:15Z

여전히 에러 발생합니당,,

junjeeong · 2025-04-22T04:04:31Z

여전히 에러 발생합니당,,

해당 화면에서는 안되는게 정상입니다!

범수님께서 배포환경에서는 될 거라고 하셔서 localhost 환경이 아닌 main으로 merge 이후에 mbtips.kr에서 테스트해야 정확할 것 같아요!

localhost 환경에서는 redriectUrl params가 추가되어야지만 가능합니다!

Soohyuniii · 2025-04-22T08:27:48Z

여전히 에러 발생합니당,,

해당 화면에서는 안되는게 정상입니다!

범수님께서 배포환경에서는 될 거라고 하셔서 localhost 환경이 아닌 main으로 merge 이후에 mbtips.kr에서 테스트해야 정확할 것 같아요!

localhost 환경에서는 redriectUrl params가 추가되어야지만 가능합니다!

잘 이해가 안되는데, 그럼 로컬/배포 환경 코드가 달라야한다는 뜻일까요?

junjeeong · 2025-04-22T11:11:25Z

여전히 에러 발생합니당,,

해당 화면에서는 안되는게 정상입니다!
범수님께서 배포환경에서는 될 거라고 하셔서 localhost 환경이 아닌 main으로 merge 이후에 mbtips.kr에서 테스트해야 정확할 것 같아요!
localhost 환경에서는 redriectUrl params가 추가되어야지만 가능합니다!

잘 이해가 안되는데, 그럼 로컬/배포 환경 코드가 달라야한다는 뜻일까요?

결론적으로는 맞습니다.

보여주신 것처럼 계속 500에러가 나서 저번 팀회의 때 끝나고 백엔드팀과 회의가 있었습니다!
실시간으로 백엔드팀과 같이 확인했는데 배포 환경에서는 되는데 로컬에서만 500에러가 나는 상황이었습니다.

백엔드에서 해결방안을 찾다가 완전한 솔루션은 아니지만 급선책으로 로컬에서 useAuthStore -> login 함수 post 요청 url에 &redirectUrl=https://localhost:5173/kakao-login params를 추가하는 방법이었습니다.
이렇게 하니까 FE/BE 모두 되는 것 확인이 되었고요!

결론으로, 배포할 때에는 redirectUrl params만 뺴면 정상 작동할 것이라고 말씀해주신 상황이고
때문에 저는 main으로 merge 해야지만 테스트가 가능하다고 코멘트를 남긴 것입니다!

백엔드에서는 현재 로컬/배포 환경 둘다 동일한 코드에서 정상 작동하도록 하는 방법을 찾고 있습니다!(그저께 기준)

(제가 이에 대한 내용을 진작 자세하게 공유를 드렸어야 했네요ㅠ... 공유가 제대로 되지 않은 점 죄송합니다)

Soohyuniii · 2025-04-22T23:35:43Z

여전히 에러 발생합니당,,

해당 화면에서는 안되는게 정상입니다!
범수님께서 배포환경에서는 될 거라고 하셔서 localhost 환경이 아닌 main으로 merge 이후에 mbtips.kr에서 테스트해야 정확할 것 같아요!
localhost 환경에서는 redriectUrl params가 추가되어야지만 가능합니다!

잘 이해가 안되는데, 그럼 로컬/배포 환경 코드가 달라야한다는 뜻일까요?

결론적으로는 맞습니다.

보여주신 것처럼 계속 500에러가 나서 저번 팀회의 때 끝나고 백엔드팀과 회의가 있었습니다! 실시간으로 백엔드팀과 같이 확인했는데 배포 환경에서는 되는데 로컬에서만 500에러가 나는 상황이었습니다.

백엔드에서 해결방안을 찾다가 완전한 솔루션은 아니지만 급선책으로 로컬에서 useAuthStore -> login 함수 post 요청 url에 &redirectUrl=https://localhost:5173/kakao-login params를 추가하는 방법이었습니다. 이렇게 하니까 FE/BE 모두 되는 것 확인이 되었고요!

결론으로, 배포할 때에는 redirectUrl params만 뺴면 정상 작동할 것이라고 말씀해주신 상황이고 때문에 저는 main으로 merge 해야지만 테스트가 가능하다고 코멘트를 남긴 것입니다!

백엔드에서는 현재 로컬/배포 환경 둘다 동일한 코드에서 정상 작동하도록 하는 방법을 찾고 있습니다!(그저께 기준)

(제가 이에 대한 내용을 진작 자세하게 공유를 드렸어야 했네요ㅠ... 공유가 제대로 되지 않은 점 죄송합니다)

자세한 상황 공유 감사합니다. 제가 슬랙으로 언제 완전 정상적으로 적용되는 지에 대해 여쭤봤던건 "백엔드에서 로컬/배포 환경에서 동일한 코드로 정상 작동하는 것이 언제쯤 완료될 지"에 대해 여쭤보았던거라 백엔드에 일정 재문의 필요할 것 같습니다!

Soohyuniii · 2025-04-22T23:37:22Z

여전히 에러 발생합니당,,

해당 화면에서는 안되는게 정상입니다!
범수님께서 배포환경에서는 될 거라고 하셔서 localhost 환경이 아닌 main으로 merge 이후에 mbtips.kr에서 테스트해야 정확할 것 같아요!
localhost 환경에서는 redriectUrl params가 추가되어야지만 가능합니다!

잘 이해가 안되는데, 그럼 로컬/배포 환경 코드가 달라야한다는 뜻일까요?

결론적으로는 맞습니다.
보여주신 것처럼 계속 500에러가 나서 저번 팀회의 때 끝나고 백엔드팀과 회의가 있었습니다! 실시간으로 백엔드팀과 같이 확인했는데 배포 환경에서는 되는데 로컬에서만 500에러가 나는 상황이었습니다.
백엔드에서 해결방안을 찾다가 완전한 솔루션은 아니지만 급선책으로 로컬에서 useAuthStore -> login 함수 post 요청 url에 &redirectUrl=https://localhost:5173/kakao-login params를 추가하는 방법이었습니다. 이렇게 하니까 FE/BE 모두 되는 것 확인이 되었고요!
결론으로, 배포할 때에는 redirectUrl params만 뺴면 정상 작동할 것이라고 말씀해주신 상황이고 때문에 저는 main으로 merge 해야지만 테스트가 가능하다고 코멘트를 남긴 것입니다!
백엔드에서는 현재 로컬/배포 환경 둘다 동일한 코드에서 정상 작동하도록 하는 방법을 찾고 있습니다!(그저께 기준)
(제가 이에 대한 내용을 진작 자세하게 공유를 드렸어야 했네요ㅠ... 공유가 제대로 되지 않은 점 죄송합니다)

자세한 상황 공유 감사합니다. 제가 슬랙으로 언제 완전 정상적으로 적용되는 지에 대해 여쭤봤던건 "백엔드에서 로컬/배포 환경에서 동일한 코드로 정상 작동하는 것이 언제쯤 완료될 지"에 대해 여쭤보았던거라 백엔드에 일정 재문의 필요할 것 같습니다!

그리고 설명해주신 내용( useAuthStore -> login 함수 post 요청 url에 &redirectUrl=https://localhost:5173/kakao-login params)을 코드 내 주석으로 추가해주시면 좋을 것 같습니다. 로컬에서 테스트할 경우 주석만 해제하면 동작하도록이요!

junjeeong · 2025-04-23T05:44:56Z

여전히 에러 발생합니당,,

해당 화면에서는 안되는게 정상입니다!
범수님께서 배포환경에서는 될 거라고 하셔서 localhost 환경이 아닌 main으로 merge 이후에 mbtips.kr에서 테스트해야 정확할 것 같아요!
localhost 환경에서는 redriectUrl params가 추가되어야지만 가능합니다!

잘 이해가 안되는데, 그럼 로컬/배포 환경 코드가 달라야한다는 뜻일까요?

결론적으로는 맞습니다.
보여주신 것처럼 계속 500에러가 나서 저번 팀회의 때 끝나고 백엔드팀과 회의가 있었습니다! 실시간으로 백엔드팀과 같이 확인했는데 배포 환경에서는 되는데 로컬에서만 500에러가 나는 상황이었습니다.
백엔드에서 해결방안을 찾다가 완전한 솔루션은 아니지만 급선책으로 로컬에서 useAuthStore -> login 함수 post 요청 url에 &redirectUrl=https://localhost:5173/kakao-login params를 추가하는 방법이었습니다. 이렇게 하니까 FE/BE 모두 되는 것 확인이 되었고요!
결론으로, 배포할 때에는 redirectUrl params만 뺴면 정상 작동할 것이라고 말씀해주신 상황이고 때문에 저는 main으로 merge 해야지만 테스트가 가능하다고 코멘트를 남긴 것입니다!
백엔드에서는 현재 로컬/배포 환경 둘다 동일한 코드에서 정상 작동하도록 하는 방법을 찾고 있습니다!(그저께 기준)
(제가 이에 대한 내용을 진작 자세하게 공유를 드렸어야 했네요ㅠ... 공유가 제대로 되지 않은 점 죄송합니다)

자세한 상황 공유 감사합니다. 제가 슬랙으로 언제 완전 정상적으로 적용되는 지에 대해 여쭤봤던건 "백엔드에서 로컬/배포 환경에서 동일한 코드로 정상 작동하는 것이 언제쯤 완료될 지"에 대해 여쭤보았던거라 백엔드에 일정 재문의 필요할 것 같습니다!

넵 이해했습니다! 그러면 merge 는 백엔드팀에서 작업 완료된 이후에 가능한 것이죠?

Soohyuniii · 2025-04-23T06:34:25Z

여전히 에러 발생합니당,,

해당 화면에서는 안되는게 정상입니다!
범수님께서 배포환경에서는 될 거라고 하셔서 localhost 환경이 아닌 main으로 merge 이후에 mbtips.kr에서 테스트해야 정확할 것 같아요!
localhost 환경에서는 redriectUrl params가 추가되어야지만 가능합니다!

잘 이해가 안되는데, 그럼 로컬/배포 환경 코드가 달라야한다는 뜻일까요?

결론적으로는 맞습니다.
보여주신 것처럼 계속 500에러가 나서 저번 팀회의 때 끝나고 백엔드팀과 회의가 있었습니다! 실시간으로 백엔드팀과 같이 확인했는데 배포 환경에서는 되는데 로컬에서만 500에러가 나는 상황이었습니다.
백엔드에서 해결방안을 찾다가 완전한 솔루션은 아니지만 급선책으로 로컬에서 useAuthStore -> login 함수 post 요청 url에 &redirectUrl=https://localhost:5173/kakao-login params를 추가하는 방법이었습니다. 이렇게 하니까 FE/BE 모두 되는 것 확인이 되었고요!
결론으로, 배포할 때에는 redirectUrl params만 뺴면 정상 작동할 것이라고 말씀해주신 상황이고 때문에 저는 main으로 merge 해야지만 테스트가 가능하다고 코멘트를 남긴 것입니다!
백엔드에서는 현재 로컬/배포 환경 둘다 동일한 코드에서 정상 작동하도록 하는 방법을 찾고 있습니다!(그저께 기준)
(제가 이에 대한 내용을 진작 자세하게 공유를 드렸어야 했네요ㅠ... 공유가 제대로 되지 않은 점 죄송합니다)

자세한 상황 공유 감사합니다. 제가 슬랙으로 언제 완전 정상적으로 적용되는 지에 대해 여쭤봤던건 "백엔드에서 로컬/배포 환경에서 동일한 코드로 정상 작동하는 것이 언제쯤 완료될 지"에 대해 여쭤보았던거라 백엔드에 일정 재문의 필요할 것 같습니다!

넵 이해했습니다! 그러면 merge 는 백엔드팀에서 작업 완료된 이후에 가능한 것이죠?

"그리고 설명해주신 내용( useAuthStore -> login 함수 post 요청 url에 &redirectUrl=https://localhost:5173/kakao-login params)을 코드 내 주석으로 추가해주시면 좋을 것 같습니다. 로컬에서 테스트할 경우 주석만 해제하면 동작하도록이요!"

이거 추가해주시면 로컬에서 주석 해제해서 한번 확인하고 바로 approve하겠습니다!

Soohyuniii · 2025-04-23T07:49:12Z

src/store/useAuthStore.ts

-            });
-          }
+          const res = await instance.get(
+            `/api/kakao/login?code=${code}` + // "&redirectUrl=https://localhost:5173/kakao-login"


주석이 잘못 들어간 것 같습니다 . +부터 주석처리 되어야할 것 같아요

ㅎㅎ 넹 고쳤습니다 마지막으로 한번 확인 부탁드립니다!

8820e2c

흠,,,,,주석처리가 아예 제거된 것으로 확인됩니다.

수정했습니다!

fix: 로그인 안되는 문제 해결 1차

edede06

junjeeong requested a review from Soohyuniii April 21, 2025 05:34

junjeeong self-assigned this Apr 21, 2025

junjeeong linked an issue Apr 21, 2025 that may be closed by this pull request

Bug: 로그인 안되는 문제 해결 1차 #209

Closed

Soohyuniii reviewed Apr 21, 2025

View reviewed changes

chore: redirect-url 배포 주소로 변경

19ecd58

Soohyuniii reviewed Apr 21, 2025

View reviewed changes

junjeeong added 2 commits April 21, 2025 18:38

Merge branch 'dev' into fix/로그인-안되는-문제-해결-1차

bd52a7d

feat: login 함수에서 에러 발생시 error 페이지로 이동시킴

c632e2d

chore: PR comment 반영

7363c80

Soohyuniii reviewed Apr 23, 2025

View reviewed changes

junjeeong added 2 commits April 23, 2025 16:49

chore: pr comment 반영

8820e2c

chore: useAuthStore 주석 추가

57049e5

Soohyuniii approved these changes Apr 23, 2025

View reviewed changes

junjeeong merged commit 5d5d33a into dev Apr 24, 2025
1 check passed

Conversation

junjeeong commented Apr 21, 2025

Pull requests

✅ 작업한 내용

🔢 #209

❗️PR Point

📸 스크린샷

Uh oh!

Choose a reason for hiding this comment

Uh oh!

junjeeong Apr 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

junjeeong Apr 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

soohyun-myung commented Apr 22, 2025

Uh oh!

junjeeong commented Apr 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Soohyuniii commented Apr 22, 2025

Uh oh!

junjeeong commented Apr 22, 2025

Uh oh!

Soohyuniii commented Apr 22, 2025

Uh oh!

Soohyuniii commented Apr 22, 2025

Uh oh!

junjeeong commented Apr 23, 2025

Uh oh!

Soohyuniii commented Apr 23, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

junjeeong Apr 21, 2025 •

edited

Loading

junjeeong Apr 21, 2025 •

edited

Loading

junjeeong commented Apr 22, 2025 •

edited

Loading