Merge pull request #25 from delicious-algorithme/dev

feat: creat api 후 main 으로 머지

.eslintrc

@@ -5,7 +5,7 @@
     "rules": {
         //"no-var": "warn",
         "no-multiple-empty-lines": "warn",
-        "no-console": ["warn", { "allow": ["warn", "error"] }],
+        //"no-console": ["warn", { "allow": ["warn", "error"] }],
         "eqeqeq": "warn",
         "dot-notation": "warn",
         "no-unused-vars": "warn",

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

package.json

@@ -7,14 +7,16 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.7.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-naver-maps": "^0.1.3",
         "react-router-dom": "^6.26.0",
         "react-scripts": "5.0.1",
         "styled-components": "^6.1.12",
         "styled-reset": "^4.5.2",
-        "web-vitals": "^2.1.4"
+        "web-vitals": "^2.1.4",
+        "zustand": "^4.5.5"
     },
     "scripts": {
         "start": "react-scripts start",

src/App.jsx

@@ -12,7 +12,7 @@ function App() {
                 <Routes>
                     <Route path="/" element={<Main />} />
                     <Route path="/webmap" element={<WebMap />} />
-                    <Route path="/webmap/storeList/:id" element={<WebMap />} />
+                    <Route path="/webmap/storeList/:keyword" element={<WebMap />} />
                     <Route path="/webmap/storeDetail/:id" element={<MapWithDetail />} />
                 </Routes>
             </BrowserRouter>

src/apis/api/storeList.jsx

@@ -0,0 +1,68 @@
+import { defaultInstance } from '../utils/instance';
+
+//category 검색 가게 리스트
+export const getStoreList = async (params) => {
+    console.log(params);
+    try {
+        const { data, status } = await defaultInstance.get(`api/stores/search`, { params: params });
+        return {
+            data,
+            status,
+        };
+    } catch (e) {
+        console.log(e);
+        return {
+            error: e.response.data.detail,
+            status: e.response.status,
+        };
+    }
+};
+//nearby_station 검색 가게 리스트
+export const getStationStoreList = async (params) => {
+    try {
+        const { data, status } = await defaultInstance.get(`api/stores/search/nearby_station`, { params: params });
+        return {
+            data,
+            status,
+        };
+    } catch (e) {
+        console.log(e);
+        return {
+            error: e.response.data.detail,
+            status: e.response.status,
+        };
+    }
+};
+//name 검색 가게리스트
+export const getNameStoreList = async (params) => {
+    try {
+        const { data, status } = await defaultInstance.get(`api/stores/search/name`, { params: params });
+        return {
+            data,
+            status,
+        };
+    } catch (e) {
+        console.log(e);
+        return {
+            error: e.response.data.detail,
+            status: e.response.status,
+        };
+    }
+};
+// 가게 상세 정보
+export const getStoreDetail = async (id) => {
+    console.log('Store ID:', id);
+    try {
+        const { data, status } = await defaultInstance.get(`api/stores/${id.storeId}`);
+        return {
+            data,
+            status,
+        };
+    } catch (e) {
+        console.log(e);
+        return {
+            error: e.response.data.detail,
+            status: e.response.status,
+        };
+    }
+};

src/apis/utils/index.js

@@ -0,0 +1,3 @@
+import defaultInstance from './instance';
+
+export { defaultInstance };

src/apis/utils/instance.jsx

@@ -0,0 +1,12 @@
+import axios from 'axios';
+const REACT_APP_BackEndUrl = process.env.REACT_APP_BackEndUrl; // 나중에 환경변수로 바꾸기
+
+const Api = axios.create({
+    baseURL: REACT_APP_BackEndUrl,
+    headers: {
+        'Content-Type': `application/json`,
+    },
+});
+
+export const defaultInstance = Api;
+//일단 어떤 데이터들 받아야하는지 정리

src/components/common/Category.jsx

@@ -3,35 +3,63 @@ import { Orange } from '../../color';
 import { White } from '../../color';
 import { useNavigate } from 'react-router-dom';
 const items = [
+    '한정식',
+    '일식당',
+    '양식',
+    '중식당',
+    '카페,디저트',
+    '베이커리',
+    '칼국수,만두',
     '냉면',
-    '파스타',
-    '삼겹살',
-    '스테이크',
-    '초밥',
+    '기사식당',
+    '한식',
+    '백반,가정식',
+    '생선구이',
+    '육류,고기요리',
+    '두부요리',
+    '국밥',
+    '주꾸미요리',
+    '정육식당',
+    '보리밥',
+    '요리주점',
+    '찌개,전골',
+    '닭갈비',
+    '맥주,호프',
+    '인도음식',
+    '카레',
+    '초밥,롤',
+    '돈가스',
     '떡볶이',
-    '빵',
-    '부대찌개',
-    '돈까스',
-    '수제햄버거',
-    '짜장면',
-    '마라탕',
-    '김치찌개',
+    '종합분식',
+    '조개요리',
+    '일본식라면',
     '덮밥',
+    '베트남음식',
+    '양꼬치',
+    '생선회',
+    '순대,순댓국',
+    '샤브샤브',
+    '이탈리아음식',
+    '스파게티,파스타전문',
+    '이자카야',
+    '돼지고기구이',
+    '태국음식',
+    '아시아음식',
 ];
 
 const Category = (position) => {
     const navigate = useNavigate();
-    const onClickHandler = (idx) => {
-        navigate(`/webmap/storeList/${idx}`, { state: { listVisible: true } }); //임시 경로
+    const onClickHandler = (item) => {
+        navigate(`/webmap/storeList/${item}`, { state: { listVisible: true } }); //임시 경로
     };
     return (
         <CategoryLayout position={position}>
             {items.map((item, idx) => {
                 return (
                     <div
                         key={idx}
-                        onClick={(idx) => {
-                            onClickHandler(idx);
+                        onClick={() => {
+                            onClickHandler(item);
                         }}
                     >
                         {item}
@@ -51,6 +79,8 @@ const CategoryLayout = styled.div`
     gap: 20px;
     align-items: center;
     justify-content: center;
+    overflow-y: scroll;
+    padding-bottom: 100px;
     //margin-left: 30px;*/
     & > div {
         display: flex;