Merge pull request #26 from Ravende/feat/FEBE

[FE] feat: review->write 컴포넌트 전환 추가
Ravende · Feb 22, 2024 · d9edaa5 · d9edaa5
2 parents 801bc8b + 0ac2bfc
commit d9edaa5
Show file tree

Hide file tree

Showing 11 changed files with 144 additions and 84 deletions.
diff --git a/frontend/src/back_button/Back_Button.jsx b/frontend/src/back_button/Back_Button.jsx
diff --git a/frontend/src/back_button/back_button.css b/frontend/src/back_button/back_button.css
diff --git a/frontend/src/back_button/index.js b/frontend/src/back_button/index.js
diff --git a/frontend/src/cardInfo/CardInfo.jsx b/frontend/src/cardInfo/CardInfo.jsx
@@ -24,7 +24,9 @@ export function CardInfo() {
 
   return (
     <div className="cafeinfo-box">
-      <button onClick={goPage}>
+
+      <button className = "backbtn"  onClick={goPage}>
+
         <img id="back_icon" alt="back" src="./assets/back_icon.png" />
       </button>
 
@@ -44,7 +46,9 @@ export function CardInfo() {
       {activeComponent === 'write' && <Write />}
 
       <div>
-        <button className="write_button" onClick={goReview}>
+
+        <button className="review_button" onClick={goReview}>
+
           리뷰 보기
         </button>
         <button className="write_button" onClick={goWrite}>
@@ -56,3 +60,4 @@ export function CardInfo() {
     </div>
   );
 }
+
diff --git a/frontend/src/cardInfo/cardInfo.css b/frontend/src/cardInfo/cardInfo.css
@@ -40,10 +40,11 @@
   border-radius: 20px;
   margin-bottom: 30px;
 }
+
 #back_icon {
   position: absolute;
-  left: -5px;
-  top: -10px;
+  left: -1px;
+  top: 0px;
   width: 30px;
   height: 30px;
 }
@@ -77,7 +78,7 @@
   position: relative;
   border: 2px solid #276830;
   background-color: #d8e2dc;
-  height: 200px;
+  height: 25px;
   margin-top: 30px;
   margin-left: 20px;
   margin-bottom: 60px;
@@ -87,9 +88,34 @@
   width: 370px;
 }
 
-button {
+.write_button {
+  position: relative;
+  background-color: #276830;
+  color:#fff;
+  border-radius: 15px;
+  width: 70px;
+  height: 30px;
+  left: 0px;
+  top: -240px;
+}
+.review_button {
+  position: relative;
+  background-color: #276830;
+  color:#fff;
+  border-radius: 15px;
+  width: 70px;
+  height: 30px;
+  left: 150px;
+  top: -240px;
+}
+
+.backbtn{
+background-color: #fff;
   position: relative;
-  width: 20px;
-  height: 20px;
-  left: -10px;
+  left: 10px;
+  top: 0px;
+  width: 30px;
+  height: 30px;
+  border-radius: 100%;
+
 }
diff --git a/frontend/src/header/Header.jsx b/frontend/src/header/Header.jsx
@@ -3,16 +3,6 @@ import coffeeImage from './coffee.png';
 import logo from './LogoWhite.png';
 
 export function Header() {
-  // const [isPopupOpen, setPopupOpen] = useState(false);
-
-  // const openPopup = () => {
-  //   setPopupOpen(true);
-  // };
-
-  // const closePopup = () => {
-  //   setPopupOpen(false);
-  // };
-
   return (
     <header>
       <div id="logo">
@@ -29,33 +19,10 @@ export function Header() {
       </div>
       <div id="container">
         <button className="loginBtn">로그인</button>
+
         <button className="joinBtn">회원가입</button>
       </div>
 
-      {/* {isPopupOpen && (
-        <div className="loginPopup">
-          <div className="modal-content">
-            <span className="close" onClick={closePopup}>
-              &times;
-            </span>
-            <h2>로그인</h2>
-            <div id="loginForm">
-              <form>
-                <ul>
-                  <li>
-                    <label for="name">이 름</label>
-                    <input type="text" id="name" />
-                  </li>
-                  <li>
-                    <label for="phone">비밀번호</label>
-                    <input type="password" id="phone" />
-                  </li>
-                </ul>
-              </form>
-            </div>
-          </div>
-        </div>
-      )} */}
-    </header>
+     </header>
   );
 }
diff --git a/frontend/src/header/header.css b/frontend/src/header/header.css
@@ -62,6 +62,7 @@ header {
   cursor: pointer;
   color: #fff;
   font-size: 22px;
+  margin: 5px;
   border: none;
   font-family: 'Nanum Gothic', sans-serif;
   font-weight: 500;
@@ -76,15 +77,15 @@ header {
   left: -15px;
 }
 
-/* #loginPopup {
-  display: none;
-  position: fixed;
+ #loginPopup {
+
+  position: relative;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 300px;
   padding: 20px;
-  background: #fff;
+  background: #296d3a;
   border: 1px solid #ccc;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   z-index: 1000;
@@ -107,8 +108,7 @@ header {
 #loginForm input {
   padding: 8px;
   margin-bottom: 10px;
-} */
-
+} 
 @import url('https://fonts.googleapis.com/css2?family=Gothic+A1&family=Nanum+Gothic&family=Nanum+Pen+Script&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Gothic+A1&family=Nanum+Gothic&family=Nanum+Pen+Script&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Gothic+A1&family=Nanum+Gothic&family=Nanum+Pen+Script&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
diff --git a/frontend/src/review/Review.jsx b/frontend/src/review/Review.jsx
@@ -1,6 +1,24 @@
+import React,{ useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import './review.css';
+import { Write } from '../write';
+
 
 export function Review() {
+  const movePage = useNavigate();
+  const [activeComponent, setActiveComponent] = useState('review');
+
+  const goPage = () => {
+    movePage('/');
+  };
+
+  const goReview = () => {
+    setActiveComponent('review');
+  };
+
+  const goWrite = () => {
+    setActiveComponent('write');
+  };
   return (
     <div className="review-box">
       <div id="review-name">평점</div>
@@ -11,6 +29,12 @@ export function Review() {
           <div id="text">멀티탭이 많아요</div>
         </div>
       </div>
+
+      {/* {activeComponent === 'write' && <Write />}
+      <button className="write_button" onClick={goWrite}>
+          글쓰기
+        </button> */}
     </div>
   );
-}
+
+ }
diff --git a/frontend/src/review/review.css b/frontend/src/review/review.css
@@ -25,10 +25,11 @@
   padding: 8px;
   top: 0px;
   margin: 5px;
-  width: 200px;
+  width: 270px;
   height: 20px;
   border-radius: 10px;
   font-weight: lighter;
+  border: 1px solid #7c987f;
 }
 #review-text {
   position: relative;

diff --git a/frontend/src/write/Write.jsx b/frontend/src/write/Write.jsx
@@ -1,16 +1,44 @@
-import "./write.css"
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import './write.css';
+import { Review } from '../review';
 
 export function Write() {
-    return (
+  const navigate = useNavigate();
+  const [activeComponent, setActiveComponent] = useState('review');
 
-        <div className= "write-box">
-        <div id = "review-name">평점</div>
-        <div className = "write">
+  const [reviewText, setReviewText] = useState('');
 
-          <div id = "write-text">자리가 편해서 오래 공부하기 좋아요.</div>
-        </div>
+  const handleSave = () => {
+    // Save the entered text (reviewText) as needed (e.g., to a database or state)
+    // For now, let's log it to the console
+    console.log('Saved review text:', reviewText);
 
-      </div>
+    // Transition to the Review component
+    navigate('/review?text=' + encodeURIComponent(reviewText));
+
+    const goReview = () => {
+      setActiveComponent('review');
+    };
+  };
 
-    );
-}
+  return (
+    <div className="write-box">
+      <div id="review-name">평점</div>
+      <div className="write">
+        <textarea
+          id="write-text"
+          placeholder="여기에 리뷰를 작성하세요."
+          value={reviewText}
+          onChange={(e) => setReviewText(e.target.value)}
+        ></textarea>
+      </div>
+      {/* {activeComponent === 'review' && <Review />}
+      */}
+      <button className="save-button" onClick={handleSave}>
+      {/* <button className = "save-button" onClick={goReview}>*/}
+        저장하기
+      </button>
+    </div>
+  );
+}
diff --git a/frontend/src/write/write.css b/frontend/src/write/write.css
@@ -1,25 +1,33 @@
 .write-box {
-  background-color: #1d5712;
-  width: 300px;
+  width: 350px;
   height: 200px;
   padding: 20px;
-  border-radius: 10px;
-  margin-left: 50px;
-  padding-left: 60px;
-  margin-left: 20px;
+  margin-top: 10px;
+  position: relative;
+  padding: 10px;
+  top: -30px;
+  left: 20px;
+  background-color: #38702e81;
+  box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
 }
 .write {
+  position: relative;
   background-color: #ffffffeb;
-  width: 220px;
-  height: 170px;
+  width: 300px;
+  height: 140px;
+  left: 5%;
   margin: 5px;
-  border: 2px solid #333;
+  border: 1px solid #7c987f;
   border-radius: 10px;
 }
 #write-text {
   position: relative;
+  width: 300px;
+  height: 140px;
   text-align: center;
-  top: 40%;
+  font-size: 18px;
+  top: 0px;
+  border-radius: 10px;
 }
 
 #review-name {
@@ -28,7 +36,19 @@
   text-shadow: #000000;
   font-size: 23px;
   top: 0px;
-  left: -70px;
+  left: -100px;
   height: 30px;
   font-weight: bold;
 }
+.save-button{
+
+  position: relative;
+  background-color: #276830;
+  color:#fff;
+  border-radius: 15px;
+  width: 70px;
+  height: 30px;
+  top: -2px;
+  left:0px;
+}
+