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

[염정훈] sprint12 #327

Conversation

youmdang
Copy link
Collaborator

@youmdang youmdang commented Sep 27, 2024

요구사항

  • Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
  • 피그마 디자인에 맞게 페이지를 만들어 주세요.
  • React, Typescript를 사용합니다.
  • api 요청에 TanStack React Query를 활용해 주세요.
  • 모든 POST, PUT 요청에는 엑세스 토큰이 필요합니다.

기본

중고마켓

  • ‘상품 등록하기’ 버튼을 누르면 “/additem” 로 이동합니다.
  • 각 상품 클릭 시 상품 상세 페이지로 이동합니다.
  • 상품 상세 페이지 주소는 “/items/{productId}” 입니다.

상품 상세

  • 내가 등록한 상품일 경우 상품 수정, 삭제가 가능합니다.
  • 문의하기 input창에 값을 입력 후 ‘등록’ 버튼을 누르면 댓글이 등록됩니다.
  • 내가 등록한 댓글은 수정, 삭제가 가능합니다.

상품 등록

  • 이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
  • 활성화된 ‘등록' 버튼을 누르면 상품 등록이 완료됩니다.
  • 등록이 완료되면 해당 상품 상세 페이지로 이동합니다.

주요 변경사항

  • TanStack React Query 적용

스크린샷

멘토에게

  • 상품 등록 페이지는 작업이 안되어 있어서 게시글 페이지에 TanStack React Query를 적용해 봤습니다.
  • 아직 작성하는법이 익숙하지 않아서 강의도 보고 검색도 해보면서 적용해 봤습니다. 잘 적용했는지 리뷰 부탁드립니다.
  • 상품 등록 기능도 계속 작업해서 TanStack React Query까지 적용해 보겠습니다.

@youmdang youmdang changed the base branch from main to Next-염정훈 September 27, 2024 13:04
@youmdang youmdang self-assigned this Sep 27, 2024
@youmdang youmdang added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다.. labels Sep 27, 2024
Comment on lines +14 to +15
const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
const [isLogout, setIsLogout] = useState<boolean>(false);
Copy link
Collaborator

Choose a reason for hiding this comment

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

isLoggedInisLoggedOut은 서로 상반되는 상태라 하나의 상태로 관리해도 될 것 같습니다.
따로 상태를 선언하신 이유가 있을까요? isLoggedIn이 false이면 로그아웃인걸로 해도 될 것 같아요.

@@ -6,6 +6,9 @@ import "@/styles/global.css";

import type { AppProps } from "next/app";
import Head from "next/head";
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();
Copy link
Collaborator

Choose a reason for hiding this comment

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

query client를 useState의 state에 선언해두면 유저 마다 캐싱을 확실히 할 수 있다고 합니다.
아래의 내용을 읽어보시길 바랍니다 !

https://jong6598.tistory.com/40

console.log(sortOrder, searchKeyword);

// 전체 게시글
const {data: articlesData, isLoading: isAllLoading, isError: isAllError} = useQuery({
Copy link
Collaborator

Choose a reason for hiding this comment

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

data, isLoading, isError` 상태를 각각 다 다루고 계시네요. 잘하셨어요 ~

Comment on lines +69 to +85
const handleSignUp = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();

try {
const isSignUp = await postSignUp({
email: signUpEmail,
nickname: signUpNickname,
password: signUpPassword,
passwordConfirmation: signUpPasswordCheck,
})
if(isSignUp) {
router.push('/login');
}
} catch (error) {
console.error('회원가입 에러', error)
}
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

이런 부분도 react-query를 활용해서 mutation hook을 이용하면 서비스 전반적으로 react-query를 써서 일관성이 있을 것 같고, 코드도 패턴이 일관성이 있을 것 같아요.

@wlgns2223 wlgns2223 merged commit 5995f74 into codeit-bootcamp-frontend:Next-염정훈 Sep 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다..
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants