Merge pull request #16 from Ravende/feat/card

[FE] feat: 상세페이지 추가

frontend/package.json

@@ -17,11 +17,15 @@
     "babel-loader": "^9.1.3",
     "eslint-plugin-react": "^7.33.2",
     "gh-pages": "^6.1.1",
+    "localforage": "^1.10.0",
+    "match-sorter": "^6.3.4",
     "node-emoji": "^2.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.1",
     "react-kakao-maps-sdk": "^1.1.26",
     "react-scripts": "^5.0.1",
+    "sort-by": "^1.2.0",
     "webpack": "^5.90.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"

frontend/src/App.css

@@ -16,8 +16,11 @@ main {
   height: 100vh;
 }
 
-/* 헤더 영역 */
 
+Resources fieldset {
+  width: 98%;
+  height: 300px;
+}
 header {
   width: 100%;
   height: 109px;
@@ -202,10 +205,18 @@ li {
   border-radius: 30px;
   border: 2px solid #333;
 }
-Resources fieldset {
+
+/* -------------- */
+/* 지도 영역 */
+
+section {
+  flex: 1;
+}
+
+/* Resources fieldset {
   width: 98%;
   height: 300px;
-}
+} */
 
 /* 추가된 스타일 */
 #loginPopup {

frontend/src/card/Card.jsx

@@ -3,22 +3,24 @@ import './card.css';
 
 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="cafe-image">
-        <img className="cafeimg" alt="cafeimg1" src="./assets/cafeimage.jpg" />
-      </div>
+
       <div className="hash-warp">
         <div className="hash">#포토존</div>
         <div className="hash">#포토존</div>
         <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>
+
   );
 }

frontend/src/card/card.css

@@ -4,3 +4,62 @@
   flex-wrap: wrap;
   justify-content: center;
 }
+
+.cafe-box {
+  background-color: #fff;
+  margin: 5px;
+  height: 300px;
+  padding: 20px;
+  border: 2px solid #333;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.hash {
+  border: 2px solid #276830;
+  background-color: #419764;
+  position: relative;
+  font-size: 15px;
+  color: #fff;
+  padding: 8px;
+  top: 80px;
+  margin: 5px;
+  width: 90px;
+  height: 18px;
+  border-radius: 10px;
+  font-weight: lighter;
+}
+
+.cafe-name {
+  font-size: 24px;
+  position: relative;
+  top: 90px;
+  left: -70px;
+  font-weight: bold;
+  color: #333;
+}
+
+.operating-hours,
+.operating-state,
+.menu {
+  position: relative;
+  top: 90px;
+  margin: 20px;
+  left: -70px;
+  font-size: 17px;
+  color: #666;
+}
+
+#cafeimg {
+  position: relative;
+  left: 90px;
+  top: -200px;
+  width: 120px;
+  height: 170px;
+  border-radius: 30px;
+  border: 2px solid #333;
+}

frontend/src/cardInfo/CardInfo.jsx

@@ -1,15 +1,53 @@
 import '../App.css';
+import './cardInfo.css';
 
 export function CardInfo() {
   return (
     <div className="cafeinfo-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="cafe-image">
-        <img className="cafeimg" alt="cafeimg1" src="cafeimage.jpg" />
+      <img id= "back_icon" alt = "back" src = "./assets/back_icon.png" />
+      <div id="cafe-name">카페명</div>
+      <div className="cafe-image-info">
+        <img id="cafeinfoimg" alt="cafeimg2" src="./assets/cafeinfoimage.jpg" />
       </div>
+    <div className="hash-warp">
+        <div className="hash">#포토존</div>
+        <div className="hash">#포토존</div>
+        <div className="hash">#포토존</div>
+        <div className="hash">#포토존</div> 
+      </div>
+      <div id="operating-hours">평일 12:0~22:00 / 주말 11:00~22:00</div>
+      <div className="review-box">
+       {/* <img id= "cof_icon" alt = "cof" src = "./assets/cofimg.png" />
+       */}
+       <div id = "review-name" >평점</div> 
+
+       <div className="review-wrap">
+        <div className="review">
+          <h3>리뷰</h3>
+          <h4>멀티탭이 많아요</h4>
+        </div>
+
+        {/* <div className="review">
+          <h3>리뷰</h3>
+          <h4>멀티탭이 많아요</h4>
+        </div> */}
+
+       </div>
+
+
+
+      </div>
+
+      <div id="menu">대표메뉴 </div>
+
+      <div className="menulist-wrap">
+        <img id="menulist" alt="menu" src="./assets/americano.png" />
+        <img id="menulist" alt="menu" src="./assets/americano.png" />
+        <img id="menulist" alt="menu" src="./assets/americano.png" />
+        <img id="menulist" alt="menu" src="./assets/americano.png" />
+
+      </div>
+
     </div>
   );
 }