[React] Sqlite DB사용, 간단한 웹페이지 만들기_1

https://vercel.com/sh98222-navercom/lamp-shooping-clint

Dashboard – Vercel

완성 상태

 

처음 시작할때 설치했던 라이브러리

 

yarn add node-sass
antd
npm install antd
axios
npm install axios
react-router-dom
npm install react-router-dom

 

완성본

import './App.css';
import Footer from './include/Footer';
import Header from './include/Header';
import MainPage from './main';
import ProductPage from './product';
import UploadPage from './upload';
import { Routes, Route} from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Header/>
      <Routes>
        <Route path="/" element={<MainPage/>}/>
        <Route path="/product/:id" element={<ProductPage/>}/>
        <Route path="/upload" element={<UploadPage/>}/>
      </Routes>
      <Footer/>
    </div>
  );
}

export default App;

App.js 기본

페이지는 Header, Footer 두개와 Routes로 메인페이지만 수정되도록 생성

Header과 Footer의 내용은 많이 없기에 CSS와 내용만 올림.

App.css
* { margin: 0; padding: 0; box-sizing: border-box; }
li { list-style: none; }
a { text-decoration: none; color:inherit; }
body {
    font-family: "나눔고딕", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #222;
}
input, section, textarea {
    outline: none;
}
table { border-collapse: collapse; }
#header {
  height: 64px;
}
.inner {
  width: 1200px;
  margin: 0 auto;
}
#header .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#header ul {
  display: flex;
}
#header ul li {
  padding: 0 24px;
}
#footer {
  padding-top: 50px;
}
#footer-info {
  border-top: 3px solid #333;
  border-bottom: 1px solid #333;
  padding-bottom: 30px;
}
#footer-info > div {
  display: flex;
  justify-content: space-between;
}
#footer-info > div div {
  width: 32%;
  line-height: 2;
}
#footer-info > div div h3{
  border-bottom: 1px solid #ccc;
  padding-top: 20px;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
#footer-info > div div li {
  border-bottom: 1px dotted #ccc;
}
#copyright {
  background-color: #eee;
  padding: 30px;
  border-top: 1px solid #ccc;
}
#footer-copy ul {
  display: flex;
  padding: 16px 0;
}
#footer-copy ul li {
  padding: 0 30px;
  line-height: 1;
}
#footer-copy ul li:not(:last-child){
  border-right: 1px solid #ccc;
}

Footer.js

import React from 'react';

const Footer = (props) => {
    return (
        <div id="footer">
                <div id="footer-info">
                    <div className='inner'>
                        <div>
                            <h3>무통장 입금계좌</h3>
                            <p>BANK ACCOUNT</p>
                            <p>301-1234-5678-01</p>
                            <p>예금주 - 김그린(그린조명)</p>
                        </div>
                        <div>
                            <h3>고객센터</h3>
                            <p>영업시간 이외에는 문의 게시판을 이용해주시면
                                당담자 확인 후 빠른 답변 도와드리겠습니다.
                            </p>
                            <p id="tel">02-1263-1245</p>
                        </div>
                        <div>
                            <h3>공지사항</h3>
                            <ul>
                                <li>조명가이드 <span>2022-06-20</span></li>
                                <li>신상품 입고 안내 <span>2022-06-10</span></li>
                                <li>몰 오픈을 축하드립니다. <span>2022-02-20</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="footer-copy">
                    <div className='inner'>
                        <ul>
                            <li>홈</li>
                            <li>그린매장안내</li>
                            <li>이용약관</li>
                            <li>개인정보처리방침</li>
                        </ul>
                    </div>
                    <div id="copyright">
                        <div className='inner'>
                        상호 : 그린조명 주소 : 울산광역시 남구 삼산중로 100번길
                        대표전화 : 국번없이 052-1234-4223 대표이사 : 김그린
                        개인정보관리자 : 이블루 사업자 등록번호 : 102-12-12345
                        copyright(c) Green Lamp,.LTD all rights reserved.
                        </div>
                    </div>
                </div>
            </div>
    );
};

export default Footer;

Header.js

import React from 'react';
import { NavLink } from 'react-router-dom';

const Header = () => {
    return (
        <div id="header">
                <div className='inner'>
                    <h1><NavLink to="/">램프쇼핑</NavLink></h1>
                    <ul>
                        <li><NavLink to="/upload">상품등록하기</NavLink></li>
                        <li><NavLink to="/products">상품보기</NavLink></li>
                    </ul>
                </div>
        </div>
    );
};

export default Header;