[react] 쇼핑몰 프로젝트 - 1 : main_page_ layout 디자인하기

navbar 생성하기

부트스트랩 활용하기

1. navbar 컴포넌트 디자인 코드 복사해서 사용할 App컴포넌트 내에 복사 붙여넣기
2. import : 사용하는 navbar 코드 내 컴포넌트 명 { } 중괄호 내애 작성하여 사용하겠다 선언하기

• 필요없는 부분과 디자인 수정은 알아서하면 된다! => 뒤에서 할 예정
• 화면을 줄이면 변하게 자동 설정 : 부트스트랩 장점, 기본 flex 설정이 되어있어서 화면을 줄일때 어떤 기능, 디자인으로 편할지 설정되어있다.
  

import { Navbar, Nav, Container, NavDropdown} from "react-bootstrap";

function App() {
  return (
    <>
      <div className="App">
        <Navbar bg="light" expand="lg">
          <Container>
            <Navbar.Brand href="#home">Shoes shop</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
              <Nav className="me-auto">
                <Nav.Link href="#home">Home</Nav.Link>
                <NavDropdown title="상품상세페이지" id="basic-nav-dropdown">
                  <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                  <NavDropdown.Item href="#action/3.2">
                    Another action
                  </NavDropdown.Item>
                  <NavDropdown.Item href="#action/3.3">
                    Something
                  </NavDropdown.Item>
                  <NavDropdown.Divider />
                  <NavDropdown.Item href="#action/3.4">
                    Separated link
                  </NavDropdown.Item>
                </NavDropdown>
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>
       
      </div>
    </>
  );
}
export default App;

https://classic.yarnpkg.com/en/docs/install/#windows-stable

메인 페이지 - 커버 생성

import : 버튼 디자인 갖고와서 사용하기, 중괄호에 {Button}추가

import { Navbar, Nav, Container, NavDropdown, Button} from "react-bootstrap";
.... <Navbar/>..
        <div className="jumbotron">
          <div className="font-background">
            <h1> 50% Season SALE !</h1>
            <p>
              운동화, 구두, 부츠, 워커 모두 최대 ~50% 세일 판매합니다!
              <br />
              인기 상품은 빠른 시일 내에 품절될 수 있는 점 안내드립니다.
            </p>
            <p>SALE 기간 : 4월 1일 ~ 4월 15일 (2주 간)</p>
          </div>
          <div>
            <Button variant="primary">Learn more</Button>
          </div>
        </div>

상품 가로 나열 레이아웃 만들기 - 가로 3등분

가로로 상품을 나열하는 레이아웃 만들려면, 박스를 세로열 잘라야한다.
부트스트랩 grid 문법 사용 : className = "row" 가로 정렬 박스안에,classNmae="col" 세로 열로 나눠지게 설정하기

• col-md-4 옵션이해하기
  - md (테블릿 사이지 px 부터) 세로열로 나눠지도록 설정
  • 4 : 어느 배율로 나눌지 설정하는 것, 3등분하고 싶으면 4로 설정

<div className="row">
  <div className="col-md-4">상품사진 전시 1</div>
  <div className="col-md-4">상품사진 전시 1</div>
  <div className="col-md-4">상품사진 전시 1</div>
</div>

기본 사진 및 구성 내용 정하기

위에서 md 로 옵션을 정했기에, 화면을 특정 사이즈보다 작아지면 div의 원래 성질되로 세로정렬이된다.

         <div className="product-container">
          <div className="row">
            <div className="col-md-4">
              <img src="https://codingapple1.github.io/shop/shoes1.jpg"></img>
              <h3>상품명</h3>
              <p>상품설명, 가격</p>
            </div>
            <div className="col-md-4">
              <img src="https://codingapple1.github.io/shop/shoes2.jpg"></img>
              <h3>상품명</h3>
              <p>상품설명, 가격</p>
            </div>
            <div className="col-md-4">
              <img src="https://codingapple1.github.io/shop/shoes3.jpg"></img>
              <h3>상품명</h3>
              <p>상품설명, 가격</p>
            </div>
          </div>
        </div>
      </div>