[Feat] 소셜 로그인 api 연결

[dalzzy]

🔍 관련된 이슈

• closed [Feat] #35 소셜 로그인 API 연결 #35

📝 작업 내용

• 영화관 목록 조회 api 연결
• 영화관 목록을 TheaterList 컴포넌트로 분리
• 네이버 로그인 연결
• 카카오 로그인 연결
• 추가 회원가입 폼 입력 후 api 요청
• react query 사용을 위해 hooks/queries , mutations 폴더 생성 + app.tsx 에 queryClient추가 + libs/queryClient파일 추가 등..
• 가입 축하 페이지 추가

📸 스크린샷

카카오 로그인 -> 추가 회원가입 폼 입력 -> 회원가입 api 요청 시 응답

영화관 목록 조회

가입 축하 페이지

2025-08-03.9.47.51.mov

🚨 이슈

• 카카오 로그인 및 회원가입 완료 후 api 연결이 성공적으로 된 것을 확인하고 나서 다시 로그인 했을 때 이렇게 뜨고 있는데 백엔드 수현님한테 여쭤보니 백엔드 로직에 잘못된 부분이 있는 것 같다고 하셔서 수정해주신 것 같은데 아직 머지가 안된 것 같습니다!
  해당 백엔드 pr 머지되면 다시 확인하고 추가적으로 영상이나 사진 첨부하도록 하겠습니다!

• 추가로 영상 보시면 회원가입 폼을 다시 작성하고 api 요청을 했을 때 500에러가 뜨고 있는데 여쭤보니 위에서 말한 부분 해결되면 같이 해결된다고합니다 !

---

해결됐습니당

이미 가입된 유저일 경우 바로 /home으로 이동

2025-08-03.11.22.28.mov

신규 가입

2025-08-03.11.22.51.mov

📣 리뷰 요구사항

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성

• UI 수정은 다음 브랜치에서 하도록 하겠습니다! api 연결 부분만 봐주시면 감사하겟습니당

• 영화관 목록 api는 무한스크롤 구현해서 스크롤 시 다음 영화관 목록 불러오도록 해야되는데 이 부분도 다음 이슈에서 구현하겠습니다!
  지금은 page=1 size=10 으로 고정되어 있어서 영화관 갯수가 10개만 있을 겁니다,,

• react query(tanstack query) 제대로 써본게 저도 처음이라서,, 절대 제 코드가 정답은 아니니 한 번 보시고 더 나은 코드가 있다면 코멘트 남겨주세요!!!

• ❗️그리고 !!! 스웨거 보니까 백엔드 서버 Base_url 외에 /api/v1 이부분도 모두 동일한 것 같아서 api 인스턴스에 /api/v1까지 기본 url로 설정해뒀습니다! 그래서 앞으로는 api 요청 시 v1 까지는 빼고 그 뒤부터 작성해서 요청해주시면 됩니다!

<지피티의 React Query 깔쌈 간단요약 첨부>
참고하시면 좋을 것 같아서 첨부해밧어요,,, ㅎㅎ

✅ 체크리스트

• 코드가 정상적으로 컴파일되나요?
• merge할 브랜치의 위치를 확인했나요?
• Label을 지정했나요?
• 리뷰어를 지정했나요?

[sispo3314]

구현해주신 부분 모두 확인했습니다! 리액트 쿼리 관련해서 첨부해주신 요약도 잘 읽었습니다ㅎㅎ 수고하셨어요!!

[sispo3314]

이 부분 컴포넌트로 분리해주셨군요! 여러 군데에서 사용되고 있어서 컴포넌트로 분리해주신 거 좋은 것 같아요... 지금 홈이랑 리뷰 작성 플로우에서도 영화관을 선택하는 페이지가 구현되어있는데 추후 이 컴포넌트 사용하면 될까요?

[dalzzy]

네 맞습니다 !! 생각해보니까 홈페이지에서는 클릭 시 해당 상영관 페이지로 넘어가는게 필요할 것 같아서 다음 이슈에서 이부분까지 리팩토링해서 올르겠습니당

[soyun-git121]

리액트 쿼리 정리한거 잘 참고하겠습니당 감사해용 api코드부분도 확인했습니다!! 수고하셨어용