TIL 02.09 - 최종 프로젝트 1주차

Home 화면 UI

import styled from '@emotion/styled';
import { useState } from 'react';
import HomeBanner from '../../components/home/HomeBanner';
import HomeCategoryList from '../../components/home/HomeCategoryList';
import HomePlace from '../../components/home/HomePlace';
import ScrollTopBtn from '../../components/home/ScrollTopBtn';

const Home = () => {
  const [testList, setTestList] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ,11, 12, 13,14]);
  const [testcategoryList, setTestcategoryList] = useState([
    { name: '카테고리1' },
    { name: '카테고리2' },
    { name: '카테고리3' },
    { name: '카테고리4' },
    { name: '카테고리5' },
    { name: '카테고리6' },
  ]);
  
  return (
    <div>
      <HomeBanner />
      <Box>
        <InnerBox></InnerBox>
        <HomeCategoryList category={testcategoryList} />
      </Box>
      <HomePlace testList={testList} />
      <ScrollTopBtn />
    </div>
  );
};

export default Home;

const Box = styled.div`
  height: 202px;
  width: 1200px;
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
`;
const InnerBox = styled.div`
  background-color: #D9D9D9;
  width: 447px;
  height: 32px;
`;

 

 

 

 

홈 화면 UI를 만들어놓고 기능구현에 들어가려 했지만 기획을 수정해야 되는 일이 생겨서 회의 후에 구현할 기능을 다시 정하기로 했다.