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

[FEAT] Task 리스트 조회 api 연결 #169

Merged
merged 15 commits into from
Jul 17, 2024
Merged

Conversation

wrryu09
Copy link
Member

@wrryu09 wrryu09 commented Jul 17, 2024

작업 내용 🧑‍💻

  • 로그인 토큰 네이밍을 서버에서 내려주는 값으로 변경했습니다
  • private route 를 설정했습니다. localStorage에 토큰이 있는 경우에만 login 이외의 페이지로 이동이 가능합니다. 현재는 값이 있는지만을 보고 있기 때문에 추후 인증 관련 작업 더 해야합니다.
  • 로그인 페이지에서 구글 로그인버튼 컴포넌트를 분리했습니다
  • Task get 해오는 api를 연결했습니다. 이후 서버에서 더미데이터 넣어주면 잘 맞는지 확인하고 이상 있다면 수정 예정입니다.
  • 필요한 타입들을 설정했습니다
  • 리액트 쿼리 staleTime, gcTime을 기본 1분으로 설정했습니다

알게된 점 🚀

기록하며 개발하기!

  • localStorage에 토큰이 들어가지 않는 이슈에서 출발해 토큰 형식을 고쳤는데도 작동하지 않아 navigate 가 원인임을 발견했습니다

리뷰 요구사항 💬

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

  • 스테일타임, gc타임 늘리고 싶으시다면 말씀해주십시오
  • staging 에리아 쪽만 연결해서 일단 date 쪽 옵션은 구현하지 않았습니다. Taskarea 쪽 연결할 때 하겠습니다

관련 이슈

close #165

스크린샷 (선택)

@wrryu09 wrryu09 requested review from seong-hui, Kjiw0n and jeeminyi July 17, 2024 09:19
@wrryu09 wrryu09 self-assigned this Jul 17, 2024
@wrryu09 wrryu09 linked an issue Jul 17, 2024 that may be closed by this pull request
Copy link
Member

@jeeminyi jeeminyi left a comment

Choose a reason for hiding this comment

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

수고하셨습니다! 깔끔하게 잘 짜주신 것 같아서 뜯어보고 이해하고 배우는 데 계속 좋은 참고가 될 것 같습니다.. ㅎ 수고 많으셨습니다!

Comment on lines +6 to +11
/** Task 리스트 조회 */
const useGetTasks = ({ isTotal, sortOrder, targetDate }: GetTasksType) =>
useQuery({
queryKey: ['today', isTotal, sortOrder, targetDate],
queryFn: () => getTasks({ isTotal, sortOrder, targetDate }),
});
Copy link
Member

Choose a reason for hiding this comment

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

요런 식으로 리액트 쿼리를 사용하는 거군요,, 처음 써보기에 좀 막막한데요오 먼저 잘 정리해주셔서 잘 참고할 수 있을 것 같습니다!
쿼리키에 today를 추가해주신 이유는 무엇인가요? 오늘 날짜를 기준으로 순서를 sort 하기 위함인가용?-?

Copy link
Member Author

Choose a reason for hiding this comment

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

today 페이지에서 사용해서 페이지별로 구분하면 이해하기 빠를 것 같아서 앞에 써주었습니다! 소팅하는 건 getTasks로 전달하는 요소들 중 두번째에서 담당하고 있어요!

const { data } = await privateInstance.get('/api/tasks', {
params: {
isTotal,
order: sortOrder,
Copy link
Member

Choose a reason for hiding this comment

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

요건 걍 궁금한건데 order는 왜 sortOrder로 한번 더 명명해준건가용??

Copy link
Member Author

Choose a reason for hiding this comment

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

state 이름을 order로 지으면 구분하기가 다소 모호한데 서버에서 요구하는 path variable 에서는 order로 명명되어 있어서 한번 바꿔서 전달해줬습니다!

Copy link
Contributor

@Kjiw0n Kjiw0n left a comment

Choose a reason for hiding this comment

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

구글로그인 되는 것 + task 리스트 받아오는 것 확인했습니다!! 👍 👍 stale tiem이랑 gc time 1분 적당한 것 같습니다!

localStorage에 토큰이 들어가지 않는 이슈에서 출발해 토큰 형식을 고쳤는데도 작동하지 않아 navigate 가 원인임을 발견했습니다

근데 요건 어떤 문제였나요??

CLOSEST: '지연된 할 일',
CLOSEST: '가까운 마감기한순',
Copy link
Contributor

Choose a reason for hiding this comment

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

😂

Comment on lines 35 to 46
// const dummyTaskList: TaskType[] = [
// {
// id: 3,
// name: '김지원',
// deadLine: {
// date: '2024-06-30',
// time: '12:30',
// },
// hasDescription: true,
// status: '미완료',
// },
// ];
Copy link
Contributor

Choose a reason for hiding this comment

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

엇...???!!! 지워주세요~~

Copy link
Member Author

Choose a reason for hiding this comment

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

지웠어용

@wrryu09 wrryu09 force-pushed the feat/#165/get-task-api branch from e623d73 to 050593f Compare July 17, 2024 13:01
@wrryu09 wrryu09 merged commit 068b669 into develop Jul 17, 2024
2 checks passed
@wrryu09 wrryu09 deleted the feat/#165/get-task-api branch July 17, 2024 13:02
Copy link
Member

@seong-hui seong-hui left a comment

Choose a reason for hiding this comment

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

덕분에 api 작업을 편하게 할 것 같습니다 감사합니다!!

Copy link
Member

Choose a reason for hiding this comment

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

구글 버튼을 따로 분리해주셨군요! 해당 파일을 분리하는 게 더 보기 좋아보이네요 감사합니다!

import { Navigate, Outlet } from 'react-router-dom';

function PrivateRoute() {
const isAuthenticated = localStorage.getItem('accessToken');
Copy link
Member

Choose a reason for hiding this comment

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

해당 부분은 나중에 맞는 accesstoken인지 교차검증을 하는 과정을 추가하도록 하겠씁니다!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

[FEAT] Task 리스트 조회 api 연결
4 participants