전남대 FE_서민지 4주차 STEP2 #30
Conversation
path에 디테일 페이지 추가(getDynamicPath를 이용하여 동적으로) router 연결
/products/productKey로 라우팅 되므로 goodsItem출력시 id값도 props로 전달
디테일 페이지 데이터 로드를 위해 생성 디테일 페이지 데이터 type 설정 및 지정
Chakra-ui/react , Chakra-ui/icons 설치 사용을 위해 Provider로 감싸기
-, + 버튼 동작하게 수정 필요
가격, 수량 전역상태로 관리하기 위해 context로 관리
수량에 및 상품의 가격에 따른 총 결제 금액 노출로 수정 필요
buyinfo context와 연동하여 동작하게 구현
미로그인 경우 로그인 권유 알림창 띄우고 로그인 페이지로 이동 로그인 경우 order페이지로 이동
path 추가 router 추가 page 추가
선물내역을 보여주는 구역(선물사진, 이름, 수량, 브랜드이름)
현금영수증 여부 및 최종 금액 확인 후 구매할 수 있는 컴포넌트
form으로 구현하여 메시지, 현금영수증여부, 개인/사업자 여부, 핸드폰번호에 대한 정보를 받는다
productDescript -> ProductDescript
*메시지 미입력 체크 *메시지 길이 체크 *현금영수증 여부 체크 후 번호 입력 여부 체크 *번호가 숫자인지 체크
context api 사용해서 관리하시면 좋을거 같습니다. 아래 예제 참고해보시죠 ~! |
확인해보니까 component depth 가 깊지 않은거 같은데 props 으로 넘기지 않고 context api 를 생각하신 이유가 있을까요 ? |
src/api/hooks/useGetProductDetail.ts
Outdated
| }; | ||
| export const getDetail = async (productId: string) => { | ||
| const response = await fetchInstance.get<ProductDetail>(getProductDeatilPath(productId)); | ||
| return response.data.detail; |
There was a problem hiding this comment.
getDetail 는 api function 만 작성해주고 response.data.detail 을 가져오는 부분은 useQuery 의 select 에서 구현하는게 재사용성 측면에서 더 나은거 같습니다.
ref. https://tanstack.com/query/v4/docs/framework/react/reference/useQuery
// e.g.
export const useGetDetail = (productId: string) => {
return useQuery({
queryKey: ['products', productId],
queryFn: () => getDetail(productId),
select: response => response.data.detail
});
};
There was a problem hiding this comment.
getDetail함수를 다음과 같이 작성하는 말씀이실까요?
export const getDetail = async (productId: string) => { return await fetchInstance.get<ProductDetail>(getProductDeatilPath(productId)); };
추가로 context api를 사용하지 않고 props로 전달한다면
naviagate sate로 전달하면 되는 걸까요?
혹시 1~4주차 모두 PR merge가 되지 않았는데 이 사항은 상관 없나요?
| }; | ||
| export const getOption = async (productId: string) => { | ||
| const response = await fetchInstance.get(getProductOptionPath(productId)); | ||
| return response.data.options; |
| export const DetailPage = () => { | ||
| const { setQuantity } = useBuyInfo(); | ||
| useEffect(() => { | ||
| setQuantity(1); |
There was a problem hiding this comment.
context 에서 quantity 의 기본값을 이미 1로 지정하셨는데 set 하는 이유가 있을까요 ?
There was a problem hiding this comment.
타 상품 디테일 페이지로 이동하면 전에 설정했던 수량의 숫자로 출력되어, 페이지 변경이되면 수량을 다시 1로 세팅해줘야한다고 생각했습니다 !
usequery select를 이용하여 코드 작성
안녕하세요 멘토님! 4주차도 잘 부탁드립니다 :)
step1 질문사항
상품의 가격과 수량을 어떻게 관리해서 order페이지로 넘겨야할지 감이 잡히지 않아 context API를 이용해서 관리하였는데, 혹시 다른 방법이 있을까요?