[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 31회차 미션

패스트캠프 프론트앤드 인강 31일차 scss에서 styled-components를 활용해 dialog와 transition을 구현해보았다.

 

Dialog 만들기

이전 강의에 이어서 dialog를 구현해보았다.

버튼컬러를 적용한 styledBtn을 import해서 색상을 입힌다.

import React from "react";
import styled from "styled-components";
import Button from "./StyledBtn";

const DarkBg = styled.div`
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
`;

const DialigBlock = styled.div`
  width: 320px;
  height: 1.5rem;
  background: white;
  border-radius: 2px;

  h3 {
    margin: 0;
    font-size: 1.5rem;
  }

  p {
    font-size: 1.125rem;
  }
`;

const ButtonGroup = styled.div`
  margin-top: 3rem;
  display: flex;
  justify-content: flex-end;
`;

export default function Dialog({ title, children, confirmText, cancelText }) {
  return (
    <DarkBg>
      <DialigBlock>
        <h3>{title}</h3>
        <p>{children}</p>
        <ButtonGroup>
          <Button color="gray">{cancelText}</Button>
          <Button color="pink">{confirmText}</Button>
        </ButtonGroup>
      </DialigBlock>
    </DarkBg>
  );
}

Dialog.defaultProps = {
  cancelText: "취소",
  confirmText: "확인"
};

import React from "react";
import "./styles.css";
import StyledBtn from "./StyledBtn";
import styled, { ThemeProvider } from "styled-components";
import Dialog from "./Dialog";

const palette = { blue: "#228be6", gray: "#496057", pink: "#f06595" };

export default function App() {
  return (
    <ThemeProvider theme={{ palette }}>
      <StyledBtn color="blue">dd</StyledBtn>
      <StyledBtn color="gray">dd</StyledBtn>
      <StyledBtn color="pink">삭제하기</StyledBtn>
      <Dialog title="정말로 삭제?" confirmText="삭제" cancelText="취소">
        데이터를 정말로 삭제하시겟습니가?
      </Dialog>
    </ThemeProvider>
  );
}

transition입히기

keyframes의 활용법

styled에서 keyframes를 불러오고 keyframes, animation등을 지정한다.

import React from "react";
import styled, { keyframes } from "styled-components";
import Button from "./StyledBtn";

const fadeIn = keyframes`
  from{opacity:0;}
  to{opacity:1;}
`;

const slideUp = keyframes`
  from {
    transform: translateY(200px);
  }
  to{
    transform: translateY(0px);
  }
`;

const DarkBg = styled.div`
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);

  animation-duration: 0.25s;
  animation-timing-function: ease-out;
  animation-name: ${fadeIn};
  animation-fill-mode: forwards;
`;

const DialigBlock = styled.div`
  width: 320px;
  /* height: 1.5rem; */
  background: white;
  border-radius: 2px;

  h3 {
    margin: 0;
    font-size: 1.5rem;
  }

  p {
    font-size: 1.125rem;
  }

  animation-duration: 0.25s;
  animation-timing-function: ease-out;
  animation-name: ${slideUp};
  animation-fill-mode: forwards;
`;

const ButtonGroup = styled.div`
  margin-top: 3rem;
  display: flex;
  justify-content: flex-end;
`;

export default function Dialog({ title, children, confirmText, cancelText }) {
  return (
    <DarkBg>
      <DialigBlock>
        <h3>{title}</h3>
        <p>{children}</p>
        <ButtonGroup>
          <Button color="gray">{cancelText}</Button>
          <Button color="pink">{confirmText}</Button>
        </ButtonGroup>
      </DialigBlock>
    </DarkBg>
  );
}

Dialog.defaultProps = {
  cancelText: "취소",
  confirmText: "확인"
};

스타일링도구는 많고 그중에서 내가 편안한것을 쓰도록하자.

 

https://bit.ly/31Cf1hp

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스