pknu-wap · dhlee777 · May 2, 2024
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -7,8 +7,13 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
+    "react-bootstrap-validation": "^0.1.11",
     "react-dom": "^18.2.0",
+    "react-grid-layout": "^1.4.4",
+    "react-hook-form": "^7.51.3",
+    "react-router-dom": "^6.23.0",
     "react-scripts": "^5.0.1",
+    "react-select": "^5.8.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/frontend/public/dingdong로고.png b/frontend/public/dingdong로고.png
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -14,6 +14,12 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
+    <link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+  integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+  crossorigin="anonymous"
+/>
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.

diff --git a/frontend/public/지도로고.png b/frontend/public/지도로고.png
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -1,38 +1,51 @@
-.App {
-  text-align: center;
+.app {
+  text-align: center; /* 요소들을 가운데 정렬 */
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+header {
+  display: flex; /* Flexbox 레이아웃 적용 */
+  justify-content: space-between; /* 요소들을 가로로 균등하게 배치 */
+  align-items: center; /* 요소들을 수직 가운데 정렬 */
 }
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+header .Logo {
+  display: flex; /* Logo 내의 요소들을 가로로 나열하기 위해 Flexbox 적용 */
+  align-items: center; /* 요소들을 수직 가운데 정렬 */
+  font-size : 30px;
+  font-weight : bold;
+  font-style : normal;
 }
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.header-size{
+margin-top:30px;
+margin-bottom:30px;
+margin-left:100px;
+}
+header .search-bar {
+  flex-grow: 1; /* 검색 바를 나머지 공간을 모두 차지하도록 설정 */
+  margin: 0 20px; /* 좌우 여백 추가 */
 }
 
-.App-link {
-  color: #61dafb;
+header .location-selector,
+header .user-options {
+  margin-left: 20px; /* 아이콘과 버튼 사이 여백 추가 */
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
+/* 미디어 쿼리를 사용하여 화면 크기에 따라 스타일 조절 */
+@media (max-width: 768px) {
+  /* 화면 너비가 768px 이하일 때 적용되는 스타일 */
+  header {
+    text-align: center; /* 텍스트 가운데 정렬 */
+  }
+
+  header .Logo {
+    margin-bottom: 20px; /* 로고 아래 여백 추가 */
   }
-  to {
-    transform: rotate(360deg);
+
+  header .search-bar {
+    margin: 20px 0; /* 검색 바 위아래 여백 추가 */
   }
-}
+
+  header .location-selector,
+  header .user-options {
+    margin-left: 0; /* 아이콘과 버튼 여백 제거 */
+  }
+}
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -1,23 +1,21 @@
-import logo from './logo.svg';
+import React from 'react';
+import {useState} from "react"
 import './App.css';
-
+import Header from './Header';
+import ProductList from'./ProductList';
+import Mypage from'./Mypage';
+import Productreg from'./Productreg';
+import { Route, Routes,useNavigate } from "react-router-dom"; 
 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>
+     <Header/>
+     <Routes>
+     <Route path="/" element={<ProductList/> } />
+     <Route path="/productlist" element={<ProductList/> } />
+     <Route path="/productreg" element={<Productreg/>}/>
+     <Route path="/mypage" element={<Mypage/> } />
+     </Routes>
     </div>
   );
 }

diff --git a/frontend/src/Header.js b/frontend/src/Header.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import { Route, Routes,useNavigate } from "react-router-dom"; 
+
+const Header = () => {
+  let navigate=useNavigate();
+    return (
+        <div>
+            <Container fluid className='header-size'>
+             <Row>
+        <Col className='col-3'>
+        <img src = "dingdong로고.png" style={{width : '40px', height: 'auto',marginBottom:'10px'}}/>
+        <span style={{ fontSize: '30px' ,fontWeight:'bold',textAlign:'center'}}>딩동</span>
+        </Col>
+
+        <Col className='col-3'>
+        <input class="form-control mr-sm-2" type="search" placeholder="검색어를 입력하세요" aria-label="Search"/>
+        </Col>
+
+        <Col className='col-1'>
+        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+        </Col>
+
+        <Col className='col-2'>
+        <img src="지도로고.png" alt="지도 아이콘" style={{width:'40px',height:'auto',marginBottom:'20px',marginLeft:'10px'}}/>
+        </Col>
+
+        <Col className='col-3'>
+        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">로그인/회원가입</button>
+        </Col>
+      </Row>
+      </Container>
+
+
+      <Navbar className="bg-body-tertiary">
+      <Container>
+
+        <Navbar.Brand onClick={()=>{navigate('/productlist')}}>전체상품목록</Navbar.Brand>
+        <Navbar.Brand onClick={()=>{navigate('/productreg')}}>상품판매</Navbar.Brand>
+        <Navbar.Brand  onClick={()=>{navigate('/mypage')}}>마이페이지</Navbar.Brand>
+
+      </Container>
+    </Navbar>
+
+            </div>
+    );
+};
+
+export default Header;
diff --git a/frontend/src/Mypage.js b/frontend/src/Mypage.js
@@ -0,0 +1,7 @@
+function Mypage(){
+    return(
+        <div>마이페이지임둥</div>
+    )
+}
+
+export default Mypage;
diff --git a/frontend/src/ProductList.js b/frontend/src/ProductList.js
@@ -0,0 +1,146 @@
+import React from 'react';
+import ReactGridLayout from 'react-grid-layout';
+import "./App.css";
+
+import dummyMouse from './dummy/dummy_mouse.png';
+import dummyShoes from './dummy/dummy_shoes.png';
+import dummyPrinter from './dummy/dummy_printer.png';
+import dummyPhone from './dummy/dummy_phone.png';
+import dummypan from './dummy/dummy_pan.png';
+import dummyCamera from './dummy/dummy_camera.png';
+import dummyVaccum from './dummy/dummy_vaccum.png';
+import dummyBottle from './dummy/dummy_bottle.png';
+import dummyKeyboard from './dummy/dummy_keyboard.png';
+import dummyHeadphone from './dummy/dummy_headphone.png';
+// 더미 제품 데이터
+
+const product =[
+    {
+        id : 1,
+        image : dummyMouse,
+        name : '마우스',
+        price : 5000,
+        location : '해운대구',
+        seller : '이동현',
+        time : '방금 전',
+    },
+    {
+        id : 2,
+        image : dummyShoes,
+        name : '스니커즈',
+        price : 15000,
+        location : '수영구',
+        seller : '이동훈',
+        time : '10분 전',
+    },
+    {
+        id : 3,
+        image : dummyPrinter,
+        name : '프린터',
+        price : 20000,
+        location : '금정구',
+        seller : '송성현',
+        time : '1시간 전',
+    },
+    {
+        id : 4,
+        image : dummyPhone,
+        name : '사과폰',
+        price : 80000,
+        location : '남구',
+        seller : '안시현',
+        time : '2시간 전',
+    },
+    {
+        id : 5,
+        image : dummypan,
+        name : '후라이팬',
+        price : 8000,
+        location : '사하구',
+        seller : '홍길동',
+        time : '4시간 전',
+    },
+    {
+        id : 6,
+        image : dummyCamera,
+        name : '카메라',
+        price : 30000,
+        location : '영도구',
+        seller : '김철수',
+        time : '8시간 전',
+    },
+    {
+        id : 7,
+        image : dummyVaccum,
+        name : '다0ㅣ슨 청소기',
+        price : 100000,
+        location : '사상구',
+        seller : '김영희',
+        time : '13시간 전',
+    },
+    {
+        id : 8,
+        image : dummyBottle,
+        name : '텀블러',
+        price : 20000,
+        location : '남구',
+        seller : '김민수',
+        time : '1일 전',
+    },
+    {
+        id : 9,
+        image : dummyKeyboard,
+        name : '키보드',
+        price : 8000,
+        location : '중구',
+        seller : '홍길순',
+        time : '3일 전',
+    },
+    {
+        id : 10,
+        image : dummyHeadphone,
+        name : '헤드셋',
+        price : 13000,
+        location : '연재구',
+        seller : '정철민',
+        time : '4일 전',
+    },
+];
+// 제품 컴포넌트
+const Product = ({ product }) => {
+    return (
+      <div className="product">
+        <img src= {product.image} alt={product.name} />
+        <div className="info">
+          <h3>{product.name}</h3>
+          <p>{product.price}원</p>
+          <p>{product.location}</p>
+          <p>{product.seller} - {product.time}</p>
+        </div>
+      </div>
+    );
+  };
+
+  // 그리드 레이아웃 컴포넌트
+  const ProductList = () => {
+    // 그리드 레이아웃 설정
+    const layout = product.map((product, index) => ({
+      i: `${product.id}`, // 고유한 ID로 사용
+      x: index % 4, // 열 위치 계산 (한 줄에 4개씩)
+      y: Math.floor(index / 4), // 행 위치 계산
+      w: 1, // 너비 (1 열)
+      h: 1, // 높이 (1 행)
+    }));
+
+    return (
+      <ReactGridLayout className="grid-layout" layout={layout} cols={4} rowHeight={500} width={1400} >
+        {product.map((product) => (
+          <div key={product.id} style={{ display: 'flex', justifyContent: 'center', marginLeft:'30px', alignItems:'center', padding:'10px'}}>
+            <Product product={product} />
+          </div>
+        ))}
+      </ReactGridLayout>
+    );
+  };
+
+  export default ProductList;