[FE] feat: Feat/connect에 백엔드 연동 위한 axios 코드 추가

frontend/.eslintrc.json

@@ -64,7 +64,7 @@
         "tsx": "never"
       }
     ],
-    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": [true, "**/*.jsx"] }],
     "max-len": [
       "error",
       {

frontend/package.json

@@ -22,8 +22,8 @@
     "node-emoji": "^2.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.3",
     "react-kakao-maps-sdk": "^1.1.26",
+    "react-router-dom": "^6.21.3",
     "react-scripts": "^5.0.1",
     "sort-by": "^1.2.0",
     "webpack": "^5.90.1",

frontend/src/card/Card.jsx

@@ -1,26 +1,41 @@
 import '../App.css';
 import './card.css';
+import axios from 'axios';
+
+const API_URL = 'https://echubserver.shop:8080';
+const data = axios
+  .get('${API_URL}/api/cafe')
+  .then(function (response) {
+    // 성공 핸들링
+    console.log(response);
+  })
+  .catch(function (error) {
+    // 에러 핸들링
+    console.log(error);
+  })
+  .finally(function () {
+    // 항상 실행되는 영역
+  });
+
+console.log(data);
 
 export function Card() {
   return (
-
     <div className="cafe-box">
       <div className="cafe-name">카페명</div>
       <div className="operating-hours">영업시간 : 09:00-20:00</div>
       <div className="operating-state">영업상태 : 영업중</div>
       <div className="menu">대표메뉴 : 생과일주스 </div>
-      
+
       <div className="hash-warp">
         <div className="hash">#포토존</div>
         <div className="hash">#포토존</div>
         <div className="hash">#포토존</div>
         <div className="hash">#포토존</div>
-
       </div>
       <div className="cafe-image">
         <img id="cafeimg" alt="cafeimg1" src="./assets/cafeimage.jpg" />
       </div>
     </div>
-
   );
 }

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "axios": "^1.6.7",
     "react-router-dom": "^6.22.1"
   }
 }