update: 코드 순서변경 및 contents API 구축

README.md

@@ -1,30 +1,5 @@
-# React + TypeScript + Vite
+# 개성시대
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+애견카페 & 식당정보를 한눈에 확인할 수 있는 플랫폼입니다.
 
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+뿐만아니라 반려견과의 일상 & 팁들을 올리고 공유할 수 있습니다.

src/api/contents.ts

@@ -1,5 +1,10 @@
+import { requests } from '.';
+import * as contents from '@/types/contents';
+
 const Contents = {
-  Get: {},
+  Get: {
+    list: () => requests.get<contents.IContentsListResponse>('/contents'),
+  },
   Post: {},
   Put: {},
   Patch: {},

src/components/market/index.tsx

@@ -13,7 +13,7 @@ export default function Market({ data }: IProps) {
       <MarketSearchInput />
       <div className="market-card-wrapper">
         {data.value.map((element) => (
-          <MarketCard element={element} />
+          <MarketCard element={element} key={element.id} />
         ))}
       </div>
     </S.Market>

src/hooks/useLoading.ts

@@ -4,11 +4,15 @@ import { useRecoilState, useResetRecoilState } from 'recoil';
 
 export default function useLoading() {
   const [loadingValue, setLoadingValue] = useRecoilState(loadingState);
+  const resetLoading = useResetRecoilState(loadingState);
+
   const isLoading = loadingValue.isLoading;
   const setIsLoading = (value: boolean) => setLoadingValue((prev) => ({ ...prev, isLoading: value }));
-  const resetLoading = useResetRecoilState(loadingState);
+
   React.useEffect(() => {
-    resetLoading();
+    return () => {
+      resetLoading();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return { isLoading, setIsLoading };

src/main.tsx

@@ -7,7 +7,7 @@ async function enableMocking() {
 
   // `worker.start()` returns a Promise that resolves
   // once the Service Worker is up and ready to intercept requests.
-  return worker.start({ onUnhandledRequest: 'bypass' });
+  return worker.start({ onUnhandledRequest: 'bypass', waitUntilReady: true }).catch(console.warn);
 }
 
 enableMocking().then(() =>

src/mocks/contents/contentsGetHandler.ts

@@ -1,13 +1,15 @@
 import { http } from 'msw';
 import { commonUrl } from '@/mocks';
 import CustomResponse from '@/mocks/utils/customResponse';
-import { contentsList } from '@/mocks/fakeDatabase/resources/contents';
+import { contentsDatabase } from '../fakeDatabase/resources/contents';
 
 const contentsUrl = (path?: string) => `${commonUrl(`/contents${path ?? ''}`)}`;
 
 const contentsGetHandler = [
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  http.get(`${contentsUrl()}`, ({ request }) => {
+  // { request }
+  http.get(`${contentsUrl()}`, () => {
+    const contentsList = contentsDatabase.Get.list().value;
     // try {
     //   const urlObj = new URL(request.url);
     //   const params = urlObj.searchParams;

src/mocks/coordinate.ts

@@ -14,17 +14,25 @@ const coordinateHandler = [
   http.get(`${coordinateUrl()}`, async () => {
     const coordinateList = coordinateDatabase.Get.list().value;
     await delay(2000);
-    const coordinateListResponse: ICoordinateListResponse = {
-      value: coordinateList,
-      code: 200,
-      detail: 'success',
-      message: '성공',
-    };
-    return new Response(JSON.stringify(coordinateListResponse), {
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
+    try {
+      const coordinateListResponse: ICoordinateListResponse = {
+        value: coordinateList,
+        code: 200,
+        detail: 'success',
+        message: '성공',
+      };
+      return new Response(JSON.stringify(coordinateListResponse), {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+    } catch (error: any) {
+      console.log(error);
+      return CustomResponse({
+        code: 500,
+        message: error,
+      });
+    }
   }),
   http.get(`${coordinateUrl('/*')}`, async ({ request }) => {
     const marketList = marketDatabase.Get.list().value;

src/mocks/fakeDatabase/resources/contents/index.ts

@@ -15,6 +15,12 @@ const contentsDatabase = {
   },
 };
 
+const initializeContentsDatabase = () => {
+  const contentsLocalStorageList = localStorage.getItem(databaseKey.contentsList);
+  if (contentsLocalStorageList && contentsLocalStorageList?.length !== 0) return;
+  localStorage.setItem(databaseKey.contentsList, JSON.stringify(contentsList));
+};
+
 const contentsList: IContentsListElement[] = [
   {
     id: 1,
@@ -178,10 +184,4 @@ const contentsList: IContentsListElement[] = [
   },
 ];
 
-const initializeContentsDatabase = () => {
-  const contentsLocalStorageList = localStorage.getItem(databaseKey.contentsList);
-  if (contentsLocalStorageList && contentsLocalStorageList?.length !== 0) return;
-  localStorage.setItem(databaseKey.contentsList, JSON.stringify(contentsList));
-};
-
 export { contentsDatabase, contentsList, initializeContentsDatabase };

src/mocks/fakeDatabase/resources/coordinate/index.ts

@@ -15,6 +15,12 @@ const coordinateDatabase = {
   },
 };
 
+const initializeCoordinateDatabase = () => {
+  const coordinateLocalStorageList = localStorage.getItem(databaseKey.coordinateList);
+  if (coordinateLocalStorageList && coordinateLocalStorageList?.length !== 0) return;
+  localStorage.setItem(databaseKey.coordinateList, JSON.stringify(coordinateList));
+};
+
 const coordinateList: ICoordinateItem[] = [
   { id: 1, title: 'Puppy Cafe Seoul', coordinate: { lat: 36.2665, lng: 126.93 }, type: 'CAFE' },
   { id: 2, title: 'Dog-Friendly Diner', coordinate: { lat: 35.1796, lng: 129.0756 }, type: 'RESTAURANT' },
@@ -69,10 +75,4 @@ const coordinateList: ICoordinateItem[] = [
   { id: 51, title: '케뷔와', coordinate: { lat: 37.28214, lng: 127.0644 }, type: 'CAFE' },
 ];
 
-const initializeCoordinateDatabase = () => {
-  const coordinateLocalStorageList = localStorage.getItem(databaseKey.coordinateList);
-  if (coordinateLocalStorageList && coordinateLocalStorageList?.length !== 0) return;
-  localStorage.setItem(databaseKey.coordinateList, JSON.stringify(coordinateList));
-};
-
 export { coordinateDatabase, coordinateList, initializeCoordinateDatabase };

src/mocks/fakeDatabase/resources/market/index.ts

@@ -15,6 +15,12 @@ const marketDatabase = {
   },
 };
 
+const initializeMarketDatabase = () => {
+  const marketLocalStorageList = localStorage.getItem(databaseKey.marketList);
+  if (marketLocalStorageList && marketLocalStorageList?.length !== 0) return;
+  localStorage.setItem(databaseKey.marketList, JSON.stringify(marketList));
+};
+
 const marketList: IMarketListElement[] = [
   {
     id: 1,
@@ -525,10 +531,4 @@ const marketList: IMarketListElement[] = [
   },
 ];
 
-const initializeMarketDatabase = () => {
-  const marketLocalStorageList = localStorage.getItem(databaseKey.marketList);
-  if (marketLocalStorageList && marketLocalStorageList?.length !== 0) return;
-  localStorage.setItem(databaseKey.marketList, JSON.stringify(marketList));
-};
-
 export { marketDatabase, marketList, initializeMarketDatabase };

src/types/contents.ts

@@ -1,3 +1,5 @@
+import { DefaultResponse } from '.';
+
 /*************************** Domain & DTO ***************************/
 export interface IContentsListElement {
   id: number;
@@ -13,3 +15,6 @@ export interface IContentsListElement {
 /***************************** Request *****************************/
 
 /***************************** Response *****************************/
+export interface IContentsListResponse extends DefaultResponse {
+  value: IContentsListElement[];
+}