feat: 가게 세부 페이지 찜버튼 추가

[l-lyun]

#️⃣연관된 이슈

resolves: #37

📝작업 내용

MarketType.ts

export type MarketType = {
  id: number;
  name: string;
  pickupStartAt: number;
  pickupEndAt: number;
  address: string;
  products: ProductType[];
  images: string[];
  hasLike: boolean;
  // TODO: 논의 필요
  marketId?: number;
};

찜 하트 아이콘 컴포넌트 제작 및 가게 상세페이지에 넣었습니다.

스크린샷 (선택)

💬리뷰 요구사항(선택)

디자인 적용 좀 해보려고 타입도 바꾸고 이것저것 넣다
백엔드 더미에 태그가 없어 반찬 컴포넌트가 뜨지 않아 다시 다 원복하고 올립니다.

승민이형 다른 코드 부분 최대한 안건드리고 찜 아이콘만 추가했습니다.

[99mini]

코드 확인했어요~ api 관련해서 코멘트 확인 부탁드립니다

[99mini]

✅

[99mini]

각 서버에 요청을 보내는 코드들은 apis/ 폴더 아래에 파일을 선언해서 추가해주세요. apis/Market.ts에 함수들을 추가해주면 되겠네요. updateMarketLike 와 같은 함수이름으로 하면 좋겟습니다.

+ javascript에서 빈 객체({}) 또한 truly 이기 때문에 해당 코드는 res의 값이 타당하지 않을 수 있을 것 같습니다. 지금의 api문서에서 del은 200코드, post는 201 코드를 반환하니 코드가 타당한지로 판단하는 게 좋을 것 같네요.

+ 카톡으로 상민이형이랑 나눈 api endpoint관련해서는 확정되면 그렇게 수정하시죠.

[99mini]

id는 아마도 string 일것같아요

[99mini]

response 타입까지 알 필요는 없을 것 같아요. 그래도 강력한 타입을 지원하려면 apiClient에서 선언하는 rest method의 구현에서 사용할 수는 있을 것 같습니다.

// CommonResponseType.ts
export type CommonResponseType<T> = {
  code: number;
  message: string;
  data?: T;
};

// ApiClient.ts
const get = async <T>(url: string): Promise<T | null> => {
  try {
    const res: AxiosResponse<CommonResponseType<T>> = await this.axiosInstance.get(url);

    if (res.data.code === 200 && res.data.data) {
      return res.data.data;
    }

    return null;
  } catch (error) {
    console.error(error);
    return null;
  }
};