페이지 링크

Homepage / ReviewAll 링크되어있습니다.
euWna · zoo0YOON · Nov 8, 2022 · Nov 8, 2022 · Nov 8, 2022 · Nov 8, 2022
commit 9211f0fd12f50f5bf4a9e6850ad1ccbf8f415d3c
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/src/App.js b/src/App.js
@@ -1,23 +1,30 @@
 import logo from './logo.svg';
 import './App.css';
 
+import React, { Component } from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
+import Header from './component/header';
+// import Info from './component/info';
+// import Menu from './component/menu';
+// import Review from './component/review';
+// import NavBar from './component/NavBar';
+// import reportWebVitals from './reportWebVitals';
+import Section from './pages/Homepage';
+import Homepage from './pages/Homepage';
+import ReviewAll from './pages/ReviewAll';
+
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <BrowserRouter>
+        <Header></Header>
+          <Routes>
+              <Route path="/" element={<Homepage />}></Route>
+              <Route path="/ReviewAll" element={<ReviewAll />}></Route>
+          </Routes>
+
+      </BrowserRouter>
     </div>
   );
 }

diff --git a/src/css/Header.css b/src/css/Header.css
@@ -13,7 +13,8 @@ a{
 
 header{
     padding: 20px;
-    margin-bottom: 30px;
+    /* margin-bottom: 30px; */
+    min-width: 1400px; 
 }
 
 .signInUp a{

diff --git a/src/css/HomePage.css b/src/css/HomePage.css
@@ -206,7 +206,7 @@ p {
 .box {
     /* width: 100%; */
     display: flex;
-    margin-top: 50px;
+    margin-top:30px;
     justify-content: center;
     min-width: 1400px; 
 }

diff --git a/src/index.js b/src/index.js
@@ -8,6 +8,7 @@ import Review from './component/review';
 import NavBar from './component/NavBar';
 import reportWebVitals from './reportWebVitals';
 import Section from './pages/Homepage';
+import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 const styles = {
@@ -16,11 +17,12 @@ const styles = {
 
 root.render(
   <React.StrictMode>
-    <Header />
+    {/* <Header />
     <body style={styles}>
     <Section></Section>
-    </body>
+    </body> */}
 
+    <App></App>
   </React.StrictMode>
 );
 

diff --git a/src/pages/Homepage.js b/src/pages/Homepage.js
@@ -1,6 +1,12 @@
+import React from 'react';
+import { Link } from 'react-router-dom'; //라우팅을 위한 임포트문
+
 import '../css/HomePage.css';
+
 import {useState} from 'react';
+
 import Header from '../component/header';
+
 import sample from "../img/sample.PNG";
 import samplelocation from "../img/location.png";
 // import deco1 from "./img/deco1.png";
@@ -86,7 +92,8 @@ function Homepage() {
           <div class = "box">
             <a href="#" class="homeButton">맛집 모아보기</a>
             <a href="#" class="homeButton">맛집 정보 추가하기</a>
-            <a href="reviewAll.html" class="homeButton">리뷰 모아보기</a>
+            <Link to="/reviewAll" class="homeButton"><a href="#" class="homeButton">리뷰 모아보기</a></Link>
+            {/* 페이지 링크는 이렇게 걸어주세요 */}
           </div>
       </body>
     </div>

diff --git a/src/pages/ReviewAll.js b/src/pages/ReviewAll.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import '../css/ReviewAll.css';
+
+function ReviewSection() {
+  return <reviewsection>
+            <div class = "presentreview">
+                <div class="title1">실시간 리뷰</div>
+                <div class = "pr_description">
+                    <div class="user_name">사용자</div>
+                    <div class="store_name">음식점 이름</div>
+                    <div class="store_location">신촌동 xxx xxx</div>
+                    <div class="review_title">리뷰 제목입니다.</div>
+                    <div class="review_desc">본문샘플<br/>본문샘플</div>
+                    <div class="review_img"><img src="sample.PNG" width="250" height="230" /></div>
+                </div>
+                <div class = "pr_description">
+                    <div class="user_name">사용자</div>
+                    <div class="store_name">음식점 이름</div>
+                    <div class="store_location">신촌동 xxx xxx</div>
+                    <div class="review_title">리뷰 제목입니다.</div>
+                    <div class="review_desc">본문샘플<br/>본문샘플</div>
+                    <div class="review_img"><img src="sample.PNG" width="250" height="230" /></div>
+                </div>
+                <div class = "pr_description">
+                    <div class="user_name">사용자</div>
+                    <div class="store_name">음식점 이름</div>
+                    <div class="store_location">신촌동 xxx xxx</div>
+                    <div class="review_title">리뷰 제목입니다.</div>
+                    <div class="review_desc">본문샘플<br/>본문샘플</div>
+                    <div class="review_img"><img src="sample.PNG" width="250" height="230" /></div>
+                </div>
+            </div>
+            <div class = "hotreview">
+                <div class="title2">최근 인기 리뷰</div>
+                <div class = "hot_description">
+                    리스트로 나열
+                </div>
+            </div>
+  </reviewsection>
+}
+
+function ReviewAll() {
+    return (
+        <div className="">
+          <head>
+          </head>
+          <body>
+            <ReviewSection></ReviewSection>
+          </body>
+        </div>
+      );
+}
+
+export default ReviewAll;
diff --git a/src/pages/reviewAll.html b/src/pages/reviewAll.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-<link rel="stylesheet" type="text/css" href="reviewAll.css">
+<link rel="stylesheet" type="text/css" href="../css/reviewAll.css">
 <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css"></link>
 </head>
 <body>