feat: msw 환경 보강 (#475)

* feat: 데이터 추가 mock api 연결

* refactor: 인증 필요 없는 기능 client 변경

* feat: mse 동영상, 리뷰 기능 구현 (#472)

* refactor: api 훅 함수로 분리, 적용 (#472)

* refactor: 쓰지 않는 파일 삭제 (#472)

* fix: console log 삭제 (#472)

* Squashed commit of the following:

commit 6e00687
Author: Jeremy <[email protected]>
Date:   Fri Sep 15 17:18:33 2023 +0900

    bug: 옵션관련 ux 개선 (#474)

    * fix: 검색창 옵션 수정 (#473)

    * fix: 지도 줌 limit 설정 (#473)

    * fix: 모바일 환경에서 거리순으로 설정 (#473)

    * design: 오버레이 마커 디자인 개선 (#473)

* fix: 오류 수정 (#476)

frontend/.vscode/settings.json

@@ -12,5 +12,5 @@
 
   "stylelint.config": null,
   "stylelint.validate": ["css", "scss", "typescript", "typescriptreact"],
-  "cSpell.words": ["tanstack", "zustand"]
+  "cSpell.words": ["JSESSION", "tanstack", "zustand"]
 }

frontend/src/@types/api.types.ts

@@ -11,21 +11,23 @@ export interface RestaurantListData {
 }
 
 export interface RestaurantData {
+  lat: number;
+  lng: number;
   id: number;
   name: string;
   category: string;
   roadAddress: string;
-  isLiked?: boolean;
-  lat: number;
-  distance: number;
-  lng: number;
   phoneNumber: string;
   naverMapUrl: string;
+  viewCount: number;
+  distance: number;
+  isLiked: boolean;
+  likeCount: number;
   celebs: { id: number; name: string; youtubeChannelName: string; profileImageUrl: string }[];
   images: { id: number; name: string; author: string; sns: string }[];
 }
 
-export type RestaurantWishData = Omit<RestaurantData, 'isLiked'>;
+export type RestaurantWishData = Omit<RestaurantData, 'isLiked' | 'viewCount' | 'likeCount' | 'distance'>;
 
 export interface ProfileData {
   memberId: number;
@@ -34,11 +36,6 @@ export interface ProfileData {
   oauthServer: Oauth;
 }
 
-export interface RestaurantDetailData extends RestaurantData {
-  likeCount: number;
-  viewCount: number;
-}
-
 export interface Video {
   videoId: number;
   youtubeVideoKey: string;

frontend/src/@types/restaurant.types.ts

@@ -1,7 +1,15 @@
 import type { RestaurantData } from './api.types';
+import type { CoordinateBoundary } from './map.types';
 
 export type Restaurant = Omit<RestaurantData, 'celebs'>;
 export type RestaurantModalInfo = Omit<Restaurant, 'lat' | 'lng'>;
+export interface RestaurantsQueryParams {
+  boundary: CoordinateBoundary;
+  celebId: number;
+  category: RestaurantCategory;
+  page: number;
+  sort: 'distance' | 'like';
+}
 
 export type RestaurantCategory =
   | '전체'

frontend/src/api/apiClient.ts

@@ -0,0 +1,16 @@
+import axios from 'axios';
+
+export const apiUserClient = axios.create({
+  baseURL: `${process.env.BASE_URL}`,
+  headers: {
+    'Content-type': 'application/json',
+  },
+  withCredentials: true,
+});
+
+export const apiClient = axios.create({
+  baseURL: `${process.env.BASE_URL}`,
+  headers: {
+    'Content-type': 'application/json',
+  },
+});

frontend/src/api/celeb.ts

@@ -0,0 +1,12 @@
+import { apiClient } from './apiClient';
+import type { Celeb } from '~/@types/celeb.types';
+
+export const getCelebs = async () => {
+  const response = await apiClient.get<Celeb[]>('/celebs');
+  return response.data;
+};
+
+export const getCelebVideo = async (celebId: string) => {
+  const response = await apiClient.get(`/videos?celebId=${celebId}`);
+  return response.data;
+};

frontend/src/api/restaurant.ts

@@ -0,0 +1,37 @@
+import getQueryString from '~/utils/getQueryString';
+import { apiClient } from './apiClient';
+import type { RestaurantListData } from '~/@types/api.types';
+import type { RestaurantsQueryParams } from '~/@types/restaurant.types';
+
+export const getRestaurants = async (queryParams: RestaurantsQueryParams) => {
+  const queryString = getQueryString(queryParams);
+  const response = await apiClient.get<RestaurantListData>(`/restaurants?${queryString}`);
+
+  return response.data;
+};
+
+export const getRestaurantDetail = async (restaurantId: string, celebId: string) => {
+  const response = await apiClient.get(`/restaurants/${restaurantId}?celebId=${celebId}`);
+  return response.data;
+};
+
+export const getNearByRestaurant = async (restaurantId: string) => {
+  const response = await apiClient.get(`/restaurants/${restaurantId}/nearby`);
+  return response.data;
+};
+
+export const getRestaurantVideo = async (restaurantId: string) => {
+  const response = await apiClient.get(`/videos?restaurantId=${restaurantId}`);
+  return response.data;
+};
+
+export const postRevisedInfo = async ({
+  restaurantId,
+  data,
+}: {
+  restaurantId: number;
+  data: { contents: string[] };
+}) => {
+  const response = await apiClient.post(`/restaurants/${restaurantId}/correction`, data);
+  return response.data;
+};

frontend/src/api/restaurantReview.ts

@@ -0,0 +1,28 @@
+import type { RestaurantReviewPatchBody, RestaurantReviewPostBody } from '~/@types/api.types';
+import { apiClient, apiUserClient } from './apiClient';
+
+export const getRestaurantReview = async (id: string) => {
+  const response = await apiClient.get(`/reviews?restaurantId=${id}`);
+  return response.data;
+};
+
+export const postRestaurantReview = async (body: RestaurantReviewPostBody) => {
+  const response = await apiUserClient.post(`/reviews`, body);
+  return response;
+};
+
+export const deleteRestaurantReview = async (reviewId: number) => {
+  const response = await apiUserClient.delete(`/reviews/${reviewId}`);
+  return response;
+};
+
+export const patchRestaurantReview = async ({
+  reviewId,
+  body,
+}: {
+  reviewId: number;
+  body: RestaurantReviewPatchBody;
+}) => {
+  const response = await apiUserClient.patch(`/reviews/${reviewId}`, body);
+  return response;
+};

frontend/src/api/user.ts

@@ -0,0 +1,31 @@
+import { apiUserClient } from './apiClient';
+import type { Oauth } from '~/@types/oauth.types';
+
+export const getAccessToken = async (type: Oauth, code: string) => {
+  const response = await apiUserClient.get(`/oauth/login/${type}?code=${code}`);
+  return response.data;
+};
+
+export const getLogout = async (type: Oauth) => {
+  const response = await apiUserClient.get(`/oauth/logout/${type}`);
+  return response.data;
+};
+
+export const getProfile = async () => {
+  const response = await apiUserClient.get('/members/my');
+  return response.data;
+};
+
+export const getRestaurantWishList = async () => {
+  const response = await apiUserClient.get('/restaurants/like');
+  return response.data;
+};
+
+export const postRestaurantLike = async (restaurantId: number) => {
+  await apiUserClient.post(`/restaurants/${restaurantId}/like`);
+};
+
+export const deleteUserData = async (type: Oauth) => {
+  const response = await apiUserClient.delete(`/oauth/withdraw/${type}`);
+  return response.data;
+};

frontend/src/components/@common/Header/Header.tsx

@@ -9,18 +9,17 @@ import LoginModalContent from '~/components/LoginModalContent';
 import SearchBar from '~/components/SearchBar';
 
 import useBooleanState from '~/hooks/useBooleanState';
-import useUser from '~/hooks/server/useUser';
 
 import Logo from '~/assets/icons/logo.svg';
 
-import { ProfileData } from '~/@types/api.types';
+import type { ProfileData } from '~/@types/api.types';
+import { getLogout } from '~/api/user';
 
 function Header() {
   const qc = useQueryClient();
   const navigator = useNavigate();
   const { pathname } = useLocation();
   const { value: isModalOpen, setTrue: openModal, setFalse: closeModal } = useBooleanState(false);
-  const { getLogout } = useUser();
 
   const handleInfoDropDown = (event: React.MouseEvent<HTMLElement>) => {
     const currentOption = event.currentTarget.dataset.name;