Skip to content
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.

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

팔로우, 팔로우 취소 기능 구현 #31

Merged
merged 11 commits into from
Jan 10, 2024
Merged

팔로우, 팔로우 취소 기능 구현 #31

merged 11 commits into from
Jan 10, 2024

Conversation

coggiee
Copy link
Collaborator

@coggiee coggiee commented Jan 8, 2024

관련 이슈


작업 내용

  • 팔로우, 팔로우 취소 기능을 구현했습니다.
    • 팔로우 버튼을 눌러서 동작을 수행할 수 있습니다.

특이 사항

  • 팔로우 요청 또는 취소 시, 낙관적 업데이트는 적용하지 않았습니다.
    • 추후 react-query를 사용하게 된다면, 그때 적용해도 될 것 같아 보류했습니다. 이에 대해서 많은 의견 부탁드립니다!
  • 사용자 정보 편집 기능에서 유효성 검사를 수행하는 코드를 따로 세분화해서 PR한다면, 머지 시 번거로울 것 같아서 현 PR에 작업했습니다. 저희가 정한 룰에 위배된다면 말씀 부탁드립니다!

리뷰 요구사항 (선택)

  • 리뷰 중점 사항: 코드 컨벤션에 어긋나는 부분이 있나요?
  • 추가 검토 사항: 코드, 디자인, 구현 방식 등에 대한 추가적인 검토가 필요한 사항이 있나요?
  • 논의가 필요한 부분
    • 팔로잉, 팔로워를 눌렀을 때 사용자 목록이 나타나는 디자인을 추가하는 건 어떨까요?
    • API 요청 시 토큰을 사용하는 함수가 꽤 있는 것 같습니다. 이를 하나의 상수로 불러와서 사용하는 건 어떨까요? 너무 과할까요?
      스크린샷 2024-01-08 11 42 27

@coggiee coggiee added the feature 기능 개발 label Jan 8, 2024
@coggiee coggiee self-assigned this Jan 8, 2024
Copy link
Contributor

@Yoonkyoungme Yoonkyoungme left a comment

Choose a reason for hiding this comment

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

팔로잉, 팔로워를 눌렀을 때 사용자 목록이 나타나는 디자인을 추가하는 건 어떨까요?

좋은 아이디어네요!!

API 요청 시 토큰을 사용하는 함수가 꽤 있는 것 같습니다. 이를 하나의 상수로 불러와서 사용하는 건 어떨까요? 너무 과할까요?

저도 휘식님 의견처럼 토큰을 사용하는 로직을 분리해서 사용하는 것에 동의합니다!
api.ts 파일에 토큰이 필요한 API 요청들을 위한 인스턴스와 토큰이 필요하지 않은 API 요청들을 위한 인스턴스로 나누어 생성하고, axios interceptors를 이용해서 헤더에 토큰을 설정하는 방법도 있을 것 같습니다😊
https://axios-http.com/kr/docs/interceptors
https://growing-jiwoo.tistory.com/85

import axios from 'axios'

// 토큰이 필요한 요청을 위한 인스턴스
const axiosInstanceWithToken = axios.create({
  baseURL: `${import.meta.env.VITE_BASE_URL}:${import.meta.env.VITE_APP_PORT}`,
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' }
})

axiosInstanceWithToken.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  const parsedToken = JSON.parse(token as string)
  config.headers['Authorization'] = `Bearer ${parsedToken}`
  return config
}, error => {
  return Promise.reject(error)
})

// 토큰이 필요하지 않은 요청을 위한 인스턴스
const axiosInstance = axios.create({
  baseURL: `${import.meta.env.VITE_BASE_URL}:${import.meta.env.VITE_APP_PORT}`,
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' }
})

export { axiosInstanceWithToken, axiosInstance }

이 부분은 현재 구현하고 있는 기능들 merge 하고, 전체적인 리팩터링 할 때 시도해 보면 좋을 것 같아요!

src/pages/profile/index.tsx Outdated Show resolved Hide resolved
src/apis/follow/unfollow.ts Show resolved Hide resolved
src/apis/follow/unfollow.ts Outdated Show resolved Hide resolved
@JuJangGwon
Copy link
Collaborator

JuJangGwon commented Jan 9, 2024

팔로잉, 팔로워를 눌렀을 때 사용자 목록이 나타나는 디자인을 추가하는 건 어떨까요?

좋습니다! 인스타/페이스북 등을 참고하면 좋을듯 하네요

API 요청 시 토큰을 사용하는 함수가 꽤 있는 것 같습니다. 이를 하나의 상수로 불러와서 사용하는 건 어떨까요? 너무 과할까요?

저도 고민했던 문제 중 하나였는데요. 이건 윤경님이 얘기해주신 axios interceptor를 사용해서 따른 분리하는 방법이 좋을거 같습니다

@coggiee coggiee linked an issue Jan 9, 2024 that may be closed by this pull request
3 tasks
@coggiee coggiee merged commit 6b9bb86 into develop Jan 10, 2024
@coggiee coggiee deleted the feature/follow branch January 10, 2024 04:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature 기능 개발
Projects
None yet
Development

Successfully merging this pull request may close these issues.

팔로우, 팔로우 취소 기능
4 participants