[FE] BookList page(1) - 구조잡기

일단 프론트엔드 부분만 만들기로 했다! (데베가 준비가 안되었음) 

또한, MUI 를 이용해서 하기로 했기 때문에 최대한 이용해보기로 한다! 

https://mui.com

MUI: The React component library you always wanted

 

 

BookList Page를 만들어보자

• 구조 잡기 
• 검색창 만들기 
• nav bar만들기 
• 이미지 리스트 만들기
• 페이지네이션 구현하기
• 정렬 넣기 

 

 

구상

figma로 만든 BookList는 다음과 같다.

아주 초기 단계 구상이라 달라진게 좀 많은데, 일단 좌측의 nav bar는 출판사 별로 분리할 예정이다.

상단 : 검색창

• 문제집/출판사 등을 검색 가능하도록 만든다.

좌측 : nav bar 

• 문제집을 분류하여 보여준다.
• toggle기능을 넣는다.

중앙 : 문제집 리스트

• 검색결과 또는 nav bar를 이용해 찾아낸 문제집들을 보여준다. 
• 인기순/최신순 정렬이 가능하도록 
• pagination으로 한페이지에 일정 갯수만 보이도록 한다.

 

 

 

구조잡기

 

대충 이런식으로 구조를 잡아줄 예정,

검색챙은 따로 빼고 나머지는 grid cell을 이용해서 잡아주기로 한다.

 

App.css

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 0.1fr 5fr 0.1fr;
}

이런식으로 6칸으로 나누어주었다.

 

Books.js

import * as React from "react";
import Container from "@mui/material/Container";

export default function BookPage() {

  return (
    <div>
      <Container>
        <div class="container">
          <div class="item">A</div>
          <div class="item">B</div>
          <div class="item">C</div>
          <div class="item">D</div>
          <div class="item">E</div>
          <div class="item">F</div>
        </div>
      </Container>   
    </div>
 );
}

일단 전체는 mui의 Container를 사용했고, grid cell로 위와 같이 구조를 잡아주었다. 

B에 정렬기능을

C에 nav bar를

D에 이미지 리스트를

F에 pagination을 넣으면 된다

이들의 기본은 전부 mui에서 가져와서 수정하기로 한다. 

 

정렬기능

정렬기능은 버튼보다는 selector로 선택할 수 있게 만들기로 함

 

import * as React from 'react';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';

export default function SelectVariants() {
  const [age, setAge] = React.useState('');

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <div>
      <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
        <InputLabel id="demo-simple-select-standard-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-standard-label"
          id="demo-simple-select-standard"
          value={age}
          onChange={handleChange}
          label="Age"
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

 

https://mui.com/components/selects/#main-content

React Select component - MUI

 

 

nav bar

navbar는 딱히 적당한게 없어서 일단 토글 기능이 있는걸 아무거나 가져와서 변형을 많이 넣기로했다.

Inbox 저친구를 잘 활용하면 될듯!

 

import * as React from 'react';
import ListSubheader from '@mui/material/ListSubheader';
import List from '@mui/material/List';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Collapse from '@mui/material/Collapse';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import DraftsIcon from '@mui/icons-material/Drafts';
import SendIcon from '@mui/icons-material/Send';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import StarBorder from '@mui/icons-material/StarBorder';

export default function NestedList() {
  const [open, setOpen] = React.useState(true);

  const handleClick = () => {
    setOpen(!open);
  };

  return (
    <List
      sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
      component="nav"
      aria-labelledby="nested-list-subheader"
      subheader={
        <ListSubheader component="div" id="nested-list-subheader">
          Nested List Items
        </ListSubheader>
      }
    >
      <ListItemButton>
        <ListItemIcon>
          <SendIcon />
        </ListItemIcon>
        <ListItemText primary="Sent mail" />
      </ListItemButton>
      <ListItemButton>
        <ListItemIcon>
          <DraftsIcon />
        </ListItemIcon>
        <ListItemText primary="Drafts" />
      </ListItemButton>
      <ListItemButton onClick={handleClick}>
        <ListItemIcon>
          <InboxIcon />
        </ListItemIcon>
        <ListItemText primary="Inbox" />
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItemButton>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
          <ListItemButton sx={{ pl: 4 }}>
            <ListItemIcon>
              <StarBorder />
            </ListItemIcon>
            <ListItemText primary="Starred" />
          </ListItemButton>
        </List>
      </Collapse>
    </List>
  );
}

 

https://mui.com/components/lists/

React List component - MUI

 

 

이미지 리스트

이거를 가져와서 선택 

 

import * as React from 'react';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
import ImageListItemBar from '@mui/material/ImageListItemBar';

export default function TitlebarBelowImageList() {
  return (
    <ImageList sx={{ width: 500, height: 450 }}>
      {itemData.map((item) => (
        <ImageListItem key={item.img}>
          <img
            src={`${item.img}?w=248&fit=crop&auto=format`}
            srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
            alt={item.title}
            loading="lazy"
          />
          <ImageListItemBar
            title={item.title}
            subtitle={<span>by: {item.author}</span>}
            position="below"
          />
        </ImageListItem>
      ))}
    </ImageList>
  );
}

const itemData = [
  {
    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
    title: 'Breakfast',
    author: '@bkristastucchio',
  },
  {
    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
    title: 'Burger',
    author: '@rollelflex_graphy726',
  },
  {
    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
    title: 'Camera',
    author: '@helloimnik',
  },
  {
    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
    title: 'Coffee',
    author: '@nolanissac',
  },
  {
    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
    title: 'Hats',
    author: '@hjrc33',
  },
  {
    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
    title: 'Honey',
    author: '@arwinneil',
  },
  {
    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
    title: 'Basketball',
    author: '@tjdragotta',
  },
  {
    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
    title: 'Fern',
    author: '@katie_wasserman',
  },
  {
    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
    title: 'Mushrooms',
    author: '@silverdalex',
  },
  {
    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
    title: 'Tomato basil',
    author: '@shelleypauls',
  },
  {
    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
    title: 'Sea star',
    author: '@peterlaster',
  },
  {
    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
    title: 'Bike',
    author: '@southside_customs',
  },
];

데이터가 백엔드에서 오는게 아니므로 이런식으로 설정해서 일단은 하기로함

 

 

https://mui.com/components/image-list/

Image list React component - MUI

 

pagination

이 중앙의 것을 선택함 

이 코드를 가져와서 F자리에 넣어주었다. 

import * as React from 'react';
import Pagination from '@mui/material/Pagination';
import Stack from '@mui/material/Stack';

export default function PaginationSize() {
  return (
    <Stack spacing={2}>
      <Pagination count={10} />
    </Stack>
  );
}

 

https://mui.com/components/pagination/#main-content

React Pagination component - MUI

 

 

이렇게 아무기능은 없지만 일단 구조가 잡혔다.