240821 : lej - api, calendar UX ... etc

src/App.js

@@ -14,6 +14,7 @@ import Intro from "./pages/Intro";
 import Redirection from "./pages/Login/Redirection";
 import LoginSuccess from "./pages/Login/LoginSuccess";
 import { PlaceProvider } from "./contexts/clickedPlaceContexts";
+import Review from "./pages/Review";
 
 
 function App() {
@@ -38,6 +39,7 @@ function App() {
         <Route path = "/main/:id" element = {<PlaceDetail updateClickedPlace={updateClickedPlace} />} />
         <Route path = "/travel/:id" element = {<PlaceDetail updateClickedPlace={updateClickedPlace} />}/>
         <Route path ="/mypage" element = {<Mypage/>}/>
+        <Route path ="/review" element = {<Review/>}/>
       </Routes>
       <Footer/>
       </BrowserRouter>

src/components/SuggestedPlaces.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { useLocation, useNavigate } from 'react-router-dom';
 import styled from 'styled-components'
 import sugAlt from '../assets/img/sugAlt.svg'
+// import travelAlt from '../assets/img/travelAlt.svg'
 
 
 const Box = styled.div `

src/components/FontAwesome.jsx

@@ -21,7 +21,10 @@ import { faLocationDot } from "@fortawesome/free-solid-svg-icons";
 import { faCopy } from "@fortawesome/free-solid-svg-icons";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
 
+import { faThumbsUp } from "@fortawesome/free-solid-svg-icons";
+import { faThumbsDown } from "@fortawesome/free-solid-svg-icons";
+
 
 
 library.add(faHouse,faLaptop,faSuitcase,faComments,faCalendar,faUser,faMagnifyingGlass,faFile,faMessage,faShareNodes,faBookmarkSolid,faBookmarkRegular);
-library.add(faSuitcaseRolling,faAngleRight,faAngleLeft,faPhone,faLocationDot,faCopy,faArrowLeft);
+library.add(faSuitcaseRolling,faAngleRight,faAngleLeft,faPhone,faLocationDot,faCopy,faArrowLeft,faThumbsUp,faThumbsDown);

src/components/Footer.jsx

@@ -24,6 +24,16 @@ export default function Footer() {
 
     if (window.location.pathname === '/' || window.location.pathname === '/login') 
         return null; 
+    else if (window.location.pathname === '/review')
+        return (
+            <>
+            <div className = "review-upload-footer">
+                <div className ="review-upload-button">
+                    리뷰 작성 완료
+                </div >
+            </div>
+            </>
+        )
     return (
     <div className ='footer-wrap'>
         <Link to="/main" className="nav-link" onClick={() => setActiveNav(1)}> 

src/components/Header.jsx

@@ -25,9 +25,11 @@ export default function Header({ clickedPlaceId }) {
     const isCalendarPath = /^\/calendar(\/.*)?$/.test(location.pathname);
     const isMypagePath = /^\/mypage(\/.*)?$/.test(location.pathname);
     const isLoginPath = /^\/login(\/.*)?$/.test(location.pathname);
+    const isReviewPath = /^\/review(\/.*)?$/.test(location.pathname);
     const isIntroPath = /^\/(\/.*)?$/.test(location.pathname);
 
 
+
 
 
     if (location.pathname === '/main'){ //메인 페이지 
@@ -119,6 +121,22 @@ export default function Header({ clickedPlaceId }) {
       return (
         <></>
       )
+    }else if(isReviewPath){
+      return (
+        <>
+        <Link to="/main" className="main-link">
+        <FontAwesomeIcon
+          icon="arrow-left"
+          size="lg"
+          className=""
+          style={{marginRight : "10px"}}
+        />리뷰작성
+        </Link>
+
+        <PlaceName>{ placeName && <div>{placeName}</div>}</PlaceName>
+        </>
+
+      )
     }
     else{
       return(

src/components/PlaceReview.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function PlaceReview() {
+  return (
+    <div>PlaceReview</div>
+  )
+}