<step69>'react_shoppingmall홈페이지 구현_step1'

1) 

sass

yarn add nod-sass

antd

npm install antd

axios

npm install axios / yarn add axios

react-router-dom

npm install react-router-dom

 

2) 

App.js

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

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

export default App;

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 10px;
}
#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;
}

include

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;

Footer.js

import React from 'react';

const Footer = () => {
    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-126301245</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;

main

index.js

import React from 'react';
import './index.scss';

const MainPage = () => {
    return (
        <div>
            <div id="main">
                <div id="banner">
                    <img src="images/banners/banner1.png" alt=""/>
                </div>
                <div id="product-list" className="inner">
                    <h2>그린조명 최신상품</h2>
                    <div id="product-items">
                        <div className='product-card'>
                            <div className='product-img'>
                                <img src="images/products/product1.jpg" alt="" />
                            </div>
                            <div className='product-contents'>
                                <span className='product-name'>제품명</span>
                                <span className='product-price'>가격</span>
                                <div className='product-seller'>
                                    <img src="images/icons/avatar.png" alt="" />아무나
                                </div>
                            </div>
                        </div>
                        <div className='product-card'>
                            <div className='product-img'>
                                <img src="images/products/product1.jpg" alt="" />
                            </div>
                            <div className='product-contents'>
                                <span className='product-name'>제품명</span>
                                <span className='product-price'>가격</span>
                                <div className='product-seller'>
                                    <img src="images/icons/avatar.png" alt="" />아무나
                                </div>
                            </div>
                        </div>
                        <div className='product-card'>
                            <div className='product-img'>
                                <img src="images/products/product1.jpg" alt="" />
                            </div>
                            <div className='product-contents'>
                                <span className='product-name'>제품명</span>
                                <span className='product-price'>가격</span>
                                <div className='product-seller'>
                                    <img src="images/icons/avatar.png" alt="" />아무나
                                </div>
                            </div>
                        </div>
                        <div className='product-card'>
                            <div className='product-img'>
                                <img src="images/products/product1.jpg" alt="" />
                            </div>
                            <div className='product-contents'>
                                <span className='product-name'>제품명</span>
                                <span className='product-price'>가격</span>
                                <div className='product-seller'>
                                    <img src="images/icons/avatar.png" alt="" />아무나
                                </div>
                            </div>
                        </div>
                        <div className='product-card'>
                            <div className='product-img'>
                                <img src="images/products/product1.jpg" alt="" />
                            </div>
                            <div className='product-contents'>
                                <span className='product-name'>제품명</span>
                                <span className='product-price'>가격</span>
                                <div className='product-seller'>
                                    <img src="images/icons/avatar.png" alt="" />아무나
                                </div>
                            </div>
                        </div>
                        <div className='product-card'>
                            <div className='product-img'>
                                <img src="images/products/product1.jpg" alt="" />
                            </div>
                            <div className='product-contents'>
                                <span className='product-name'>제품명</span>
                                <span className='product-price'>가격</span>
                                <div className='product-seller'>
                                    <img src="images/icons/avatar.png" alt="" />아무나
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default MainPage;

index.scss

#banner {
    img {
        width: 100%;
    }
}
#product-list {
    h2 {
        padding: 30px 0;
    }
    #product-items {
        display: flex;
        flex-wrap: wrap;
        .product-card {
            width: 24%;
            border: 1px solid #ccc;
            border-radius: 16px;
            margin-bottom: 16px;
            overflow: hidden;
            &:not(:nth-child(4n+0)) {
                margin-right: 1.3333%;
            }
            .product-img {
                img {
                    width: 100%;
                }
            }
            .product-contents {
                padding: 24px;
                span {
                    display: block;
                }
                .product-seller {
                    padding-top: 16px;
                    display: flex;
                    align-items: center;
                    img {
                        width: 50px;
                    }
                }
            }
        }
    }
}

product

index.js

import React from 'react';
import "./product.scss";

const ProductPage = () => {
    return (
        <div className='inner'>
            <div id="image-box">
                <img src="images/products/product1.jpg" alt="" />
            </div>
            <div id="profile-box">
                <ul>
                    <li>
                        <div>
                            <img src="images/icons/avatar.png" alt="" />
                            <span>그린</span>
                        </div>
                    </li>
                    <li>
                        제품명 새로운 조명
                    </li>
                    <li>
                        가격 50000원
                    </li>
                    <li>등록일 2022년 6월 2일</li>
                    <li>상세설명 </li>
                </ul>
            </div>
        </div>
    );
};

export default ProductPage;

product.scss

#image-box {
    padding-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
        width: 50%;
        border-radius: 50%;
    }
}
#profile-box {
    padding: 16px;
    margin-top: 10px;
    li {
        border-bottom: 1px solid #ccc;
        line-height: 40px;
        div {
            display: flex;
            align-items: center;
            img {
                width: 70px;
            }
        }
    }
}

upload

index.js

import React from 'react';
import './upload.scss';
import 'antd/dist/antd.css';
import { Form, Divider, Input, InputNumber, Button } from 'antd';

const UploadPage = () => {
    return (
        <div id="upload-container" className='inner'>
            <Form name='productUpload'>
                <Form.Item name="imgUpload"
                    label={<div className='upload-label'>상품사진</div>}
                >
                    <div id="upload-img-placeholder">
                        <img src="images/icons/camera.png" alt="" />
                        <span>이미지를 업로드해주세요.</span>
                    </div>
                </Form.Item>
                <Divider/>
                <Form.Item name="seller"
                label={<div className='upload-label'>판매자명</div>}>
                    <Input className='nameUpload' size='large'
                    placeholder='판매자 이름을 입력하세요'/>
                </Form.Item>
                <Divider/>
                <Form.Item name="name"
                label={<div className='upload-label'>상품이름</div>}>
                    <Input
                        className='upload-name'
                        size='large'
                        placeholder='상품이름을 입력해주세요'
                    />
                </Form.Item>
                <Divider/>
                <Form.Item name="price"
                label={<div className='upload-label'>상품가격</div>}>
                    <InputNumber defaultValue={0} size="large"/>
                </Form.Item>
                <Divider/>
                <Form.Item name="description"
                    label={<div className='upload-label'>상품소개</div>}
                >
                    <Input.TextArea
                        size='large'
                        id="product-description"
                        maxLength={300}
                        placeholder="상품 소개를 적어주세요"
                    />
                </Form.Item>
                <Form.Item>
                    <Button id='submit-button' size='large' htmlType='submit'>
                        상품등록하기
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
};

export default UploadPage;

upload.scss

#upload-img-placeholder {
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(230,230,230);
    background: rgb(250,250,253);
    margin-left: 16px;
}
#upload-img-placeholder > img {
    width: 50px;
    height: 50px;
}
#upload-img-placeholder > span {
    font-size: 14px;
    color: rgb(195,194,204);
}
.upload-label {
    width: 200px;
    font-size: 18px;
    text-align: left;
}