Portfolio


<CardImage alt="abc" src={thumbnailImage || '/svg/basket.svg'} />
// alit는 의미없는 'abc'보다  title을 넣어주는 것이 좋겠죠 
// CardImage 자체가 '/svg/basket.svg' defulatImage를 가지고 있어도 좋을 것 같습니다 
// + 여기 상수 처리


const Card = ({ productInfo: {
id, 
title, 
thumbnailImage, 
minimumPrice, 
expireAt
}
}:CardProps) => {
바로 destructing해주셔도 될 것 같네요 


삼항연산자 대신에 줄여서 써도 될 것 같습니다 
{index !== OPTIONS.length - 1 && (
                    <Divider margin="5px 0" />
                  ) 

borderColor="#B6B6B6"
color="#718096"

color들도 공통으로 쓰이는 부분 color scale 맞춰서 변수 처리해보시면 좋을 것 같습니다.


import type { QueryClient } from './queryClient'
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html


<Image src="/svg/noneProductOther.svg" alt="None Product" />
고정된 asset은 Next/Image 를 활용해보세요 
+ 그냥 image 컴포넌트랑 어떤 차이가 있는지도 살펴보셔도 좋을 것 같네요


// 요건 스타일이지만 
// 1.api response type도 api 함수에 같이 있는게 유지보수하기 용이해보이네요 
// 2.객체에 메소드 정의들을 여기서 하지 말고, 

const productAPI = {
  getProducts: ({ offset, limit }: productsAPITypes) =>
    baseInstance.get<ProductsResponseType>(
      `/products?offset=${offset}&limit=${limit}`
    ),
  getProduct: (productId: number) =>
    baseInstance.get<ProductResponse>(`/products/${productId}`),
};


// 각각의 함수들을 관리하기 용이하게 따로 분리해서 넣어주는 것이 어떨까 싶습니다. 

const getProducts = async () => {
   const {data} = await baseInstance.get<ProductsResponseType>(
      `/products?offset=${offset}&limit=${limit}`
    )
    /products?offset=${offset}&limit=${limit} <- query 
    // 여러개면 axios paramter 옵션을 활용해보세요 

    return data;
}

const productAPI = {
  getProducts,
}

// 비동기 처리 hook을 하나 만드셔셔 처리해보셔도 좋을 것 같네요 
// 공통적인 loading, isError
// - https://usehooks.com/useAsync/
// - 나중에 react-query를 적용하시면 필요없어지겠지만 한 번 만들어보셔도 좋을 것 같습니다 

// 비동기로 data 받아오고 상태값을 보내주는 비즈니스 로직 hook으로 빼보시는 연습해보시면 
// 컴포넌트에 상태랑 동작에만 더 관심을 가지기 용이할 것 같아요.
// 참고문서
// https://www.robinwieruch.de/react-hooks-fetch-data/

팀8 프론트엔드 중간 피드백 면담

1️⃣ 면담 일지

2️⃣면담 인증 샷

3️⃣면담 내용

👍좋았던 점

🧐아쉬웠던 점

🤩시도해보셨으면 하는 것들 + 참고