Merge branch 'main' of https://github.com/Ravende/ECHub

README.md

@@ -2,9 +2,12 @@
 
 
 ## 프로젝트 소개
-ECHub (카페 지도 & 해시태그 추천 사이트) 이대역 주변의 카페를 대상으로 한 지도 페이지에서 해시태그, 카페명으로 카페를 검색할 수 있고, 카페 리스트에서 간단한 카페의 운영시간, 위치, 특이사항, 대표 메뉴등을 알 수 있다. 자세한 내용을 클릭하면 카페의 기본 정보와 이용자 리뷰도 확인 할 수 있다.
+ECHub (Ewha Cafe Hub)  
+이화여대 주변 카페 지도 사이트. 카페 정보와 추천 기능이 제공된다.  
+웹페이지에서 해시태그, 카페명으로 카페를 검색할 수 있고, 해시태그 검색을 통해 원하는 조건에 맞는 카페 리스트를 추천받을 수 있다. 카페 리스트에서 카페의 운영시간, 위치, 특이사항, 대표 메뉴 등 간단한 정보를 알 수 있다. 또한 지도 마커에 마우스를 올리면 카페 이름 및 영업 정보가 표시되며, 클릭 시 상세페이지로 들어간다. 상세페이지에서는 카페의 기본 정보와 이용자 리뷰를 확인할 수 있다. 
+
+[ECC 1팀 카페지도 (https://ewhacafeuhub.netlify.app)
 
-[ECC 1팀 카페지도 (eccproject1.netlify.app)](https://eccproject1.netlify.app/)
 
 ## 팀 소개
 ### 팀명: EP.1 (ECC Project team 1)
@@ -33,6 +36,8 @@ ECHub (카페 지도 & 해시태그 추천 사이트) 이대역 주변의 카페
 [Figma](https://www.figma.com/file/QWNPoMThFe3JL2yZ4vckKn/ECHUB?type=design&node-id=0-1&mode=design&t=zUJ4ESH3nYinGoko-0)
 
 
+
+
 ## 커밋 메시지 작성 규칙
 메시지 구조 : `<type> : <subject>`
 - 타입은 소문자로

frontend/package.json

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

frontend/src/App.css

@@ -16,99 +16,6 @@ main {
   height: 100vh;
 }
 
-
-Resources fieldset {
-  width: 98%;
-  height: 300px;
-}
-header {
-  width: 100%;
-  height: 109px;
-  background-color: #224932;
-  border-bottom: 5px solid black;
-}
-
-/* 로고 */
-#logo {
-  float: left;
-  width: 50px;
-  height: 65px;
-  padding: 20px;
-  color: white;
-}
-
-/* 배너 이름 */
-#siteName {
-  color: white;
-  font-family: 'EHWA';
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 30px;
-  letter-spacing: 0em;
-  text-align: center;
-  padding-top: 40px;
-}
-
-/* button {
-    padding: 10px;
-    cursor: pointer;
-    background: #D9D9D9;
-  
-  }
-  
-  #loginPopup {
-    display: none;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    padding: 20px;
-    z-index: 1000;
-    background: white;
-    border: 1px solid black;
-  } */
-
-/* 사이드 영역 */
-
-aside {
-  width: 30%;
-  max-width: 350px;
-  border-right: 5px solid black;
-  padding: 20px;
-  overflow-y: auto;
-  flex-shrink: 0;
-  max-height: 800px;
-}
-
-#side {
-  width: 98%;
-  padding: 0;
-  margin: 0 auto;
-}
-
-/* 카페 검색 */
-form {
-  height: auto;
-}
-
-#cafe-search {
-  width: 98%;
-  height: 50px;
-  padding: 8px;
-  border-radius: 10px;
-  background: #fafafaed;
-}
-
-/* 해시태그 */
-#hashtags {
-  background: #d9d9d9;
-  width: 98%;
-  height: 50px;
-  border-radius: 10px;
-  margin-top: 10px;
-  font-size: 15px;
-}
-
 /* 카페 리스트 */
 .cafeList {
   margin-left: 0;
@@ -206,18 +113,6 @@ li {
   border: 2px solid #333;
 }
 
-/* -------------- */
-/* 지도 영역 */
-
-section {
-  flex: 1;
-}
-
-/* Resources fieldset {
-  width: 98%;
-  height: 300px;
-} */
-
 /* 추가된 스타일 */
 #loginPopup {
   display: none;
@@ -259,58 +154,3 @@ section {
   color: #fff;
   border: none;
 }
-
-/* -------------- */
-/* 지도 영역 */
-
-section {
-  width: 70%;
-  flex: 1;
-}
-
-.map_wrap {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  height: 100vh;
-}
-
-.radius_border {
-  border: 1px solid #919191;
-  border-radius: 5px;
-}
-.custom_zoomcontrol {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  width: 36px;
-  height: 80px;
-  overflow: hidden;
-  z-index: 1;
-  background-color: #f5f5f5;
-}
-.custom_zoomcontrol span {
-  display: block;
-  width: 36px;
-  height: 40px;
-  text-align: center;
-  cursor: pointer;
-}
-.custom_zoomcontrol span img {
-  width: 15px;
-  height: 15px;
-  padding: 12px 0;
-  border: none;
-}
-.custom_zoomcontrol span:first-child {
-  border-bottom: 1px solid #bfbfbf;
-}
-
-.InfoWindow {
-  padding: 2px;
-  margin: 2px;
-  color: #000;
-  text-align: center;
-  line-height: 1.5;
-  white-space: nowrap; /* 텍스트가 가로로 길 경우 줄 바꿈 방지 */
-}

frontend/src/App.jsx

@@ -1,6 +1,22 @@
+import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 import './App.css';
+import { CardInfoContainer } from './cardInfo';
 import { Main } from './main';
 
 export default function App() {
-  return <Main />;
+  // <Router>
+  //   <Switch>
+  //     <Route path="/" component={SideBar} />
+  //     <Route path="/cardInfo" component={CardInfo} />
+  //   </Switch>
+  // </Router>;
+
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Main />} />
+        <Route path="/cardInfo" element={<CardInfoContainer />} />
+      </Routes>
+    </Router>
+  );
 }