#3 기본 레이아웃 구성 및 팝업 생성

 

#2 기본 버튼 컴포넌트 만들기

---

 

 

오늘은 깃허브 일일커밋 3일차다 

공허...

오늘은 기본 레이아웃 구성과 팝업창 컴포넌트를 만들고 열기, 닫기 기능까지 구현해보았다.  

현재까지의 진행상황을 공유하자면,  

 

 

3일차 구현 

 - 50% 유연한 레이아웃

    - Sticky한 Footer, Header 구현 

 - 팝업창 컴포넌트 구현 및 사용

 - 파일 업로드 버튼 컴포넌트 커스텀 

 

이번 1인 프로젝트를 진행하면서 제일 뿌듯한 점은 맨날 display : inline-block만 쓰는 나에게 display : flex에 대해 많이 학습하고 사용하면서 익히는 계기가 되었다. 그리고 단위에 대해 개념이 없어 px, em, rem, % 아무거나 보이는대로 지정해줬지만, Nerator 만큼은 유동성있게 사용중이다. 

 

또 styled-components를 프로젝트에 처음으로 도입하게 되면서 알게 된 사실은 onClick, onChange 등 핸들러도 Button Components안에서 props로 넘어오도록 따로 지정을 해줘야 한다는 것이다.

const Button = (props) => {
  return (
    <Container
      backgroundColor={props.backgroundColor}
      outlined={props.outlined}
      borderColor={props.borderColor}
      fontColor={props.fontColor}
      width={props.width}
      onClick={props.onClick} // onClick props로 받아오도록 수정
    >
      <Text>{props.text}</Text>
    </Container>
  );
};

 

 

먼저, 나는 부모 컴포넌트인 Layout 안에  Header, Footer, Contents로 컴포넌트를 나눠서 구성했다.

 

import React from "react";
import styled from "styled-components";
import Header from "./Header";
import Footer from "./Footer";
import Contents from "./Contents";

const Layout = (props) => {
  return (
    <Container>
      <Header />
      <Contents />
      <Footer />
    </Container>
  );
};

const Container = styled.div`
  width: 100%;
  height: 100%; 
`;

export default Layout;

  

 

팝업 컴포넌트 

import React, { useEffect, useState } from "react";
import styled from "styled-components";
import Button from "../component/Button";

const PopUp = (props) => {
  const [open, setOpen] = useState(false);

  const handleCloseModal = () => {
    setOpen(false);
    props.close(false);
  };
  const handleOpenModal = () => {
    props.ok();
  };

  useEffect(() => {
    setOpen(props.open);
  }, [props.open ]);

  return (
    <Container open={open}>
      <Modal width={props.width} height={props.height}>
        <Header display={props.title}>
          {props.title} <HR />
        </Header>
        <Contents>{props.contents}</Contents>
        <Footer>
          <Button
            width={"5rem"}
            text={"OK"}
            onClick={(e) => handleOpenModal(e)}
          />
          <Button
            width={"5rem"}
            text={"닫기"}
            backgroundColor={"rgba(215,39,100,1)"}
            onClick={(e) => handleCloseModal(e)}
          />
        </Footer>
      </Modal>
    </Container>
  );
};

PopUp.defaultProps = {
  open: false,
  width: "80%",
  height: "18rem",
  contents: "test",
  title: "",
};

const Container = styled.div`
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(21, 20, 20, 0.38);
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
  display: ${(props) => (props.open ? `inherit` : `none`)};
  transition: 3s all;
`;

const Modal = styled.div`
  padding: 18px;
  width: ${(props) => props.width};
  height: ${(props) => props.height};
  z-index: 1;
  background-color: white;
  margin: auto;
  box-shadow: 6px 0px 9px 3px rgb(173 169 169 / 38%);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
`;
const Contents = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
`;

const HR = styled.hr`
  width: 60%;
  border: 1px solid #f4f4f4;
`;

const Header = styled.div`
  text-align: center;
  width: 100%;
  font-weight: bolder;
  font-size: 1.2em;
  padding-top: 3px;
  padding-bottom: 3px;
  display: ${(props) => (props["display"].length > 0 ? "block" : "none")};
`;

const Footer = styled.div`
  display: flex;
  justify-content: flex-end;
  padding-right: 8px;
  padding-bottom: 8px;
`;

export default PopUp;

팝업 컴포넌트를 유동성있게 사용하기 위해 사용자가 바꿀 수 있는 props는 

 - 모달의 크기, 높이

 - 제목의 여부 {title에 내용이 있을 경우에만 보이도록}

 - 모달의 버튼 <ok, close>를 통해 모달 핸들링 할 수 있는 기능

이 필요하다고 1차적으로 생각했다.