Chapter3 - 버킷리스트를 좀 더 예쁘게 꾸미기

1) 버킷리스트 아이템을 추가하면, 리스트 항목이 있는 div에만 스크롤 생기게 하기

- 키워드: overflow, max-height 혹은, div 넘치지 않게 하기

const ListStyle = styled.div`

  display: flex;

  flex-direction: column;

  height: 50vh; // 50vh로 맞춰줌으로써 처음 추가할 때에도 박스가 늘어나지 않도록 할 수 있다. 또, max-height을 줄여서 하는 방법도 있다.

  overflow-x: hidden;

  overflow-y: auto; // auto말고 scroll을 주면 리스트의 높이가 박스 높이보다 많지 않아도 스크롤 바가 생성된다. hidden으로 하면 높이보다 더 많아지는 리스트를 잘라버린다.

  max-height: 50vh; // 계속 추가하기를 해도 박스가 늘어나지 않고 스크롤바로 밑에 생성되도록 함

`;

목록의 박스를 담당하는 ListStyle div 박스의 max-height을 지정해준다.

 

 

2) 프로그래스 바에 동그라미 달아보기

- 키워드: flex, align-items, div 겹치려면?

 

const Dot = styled.div`

  width: 40px;

  height: 40px;

  background: #fff; // 흰색

  border: 5px solid #673ab7; //보라색

  border-radius: 40px;

  margin: 0px 0px 0px -20px;

`;

동그라미 Dot을 만들어주고 보면 HighLight의 밑에 있게 되는데,

const ProgressBar = styled.div`

  background: #eee;

  width: 100%;

  height: 40px;

  display: flex;

`;

이 둘의 부모인 ProgressBar 스타일에 display: flex;를 주게되면 HighLight 옆에 Dot이 오게 된다.

아직도 겹쳐지진 않았는데,

이건 Dot에 margin에서 왼쪽에 -20px을 주면서 겹쳐지도록 했다.

더 이쁘게 만들어주기 위해 ProgressBar와 HighLight의 높이를 20px로 줄여준다.

그럼 위와 같이 되는데 아직 원이 바의 가운데 있는게 아니라 이쁘지가 않다.

margin으로 옮겨줄 수도 있지만,

align-items: center;

 ProgressBar에 align-items: center를 추가 하고 바에 border-radius를 추가해서

이쁘게 만들 수 있다.

 

3) input focus일 때 border 색상 바꿔보기

- 키워드: inpu text focus border 색상 바꾸기

input박스의 styled를 통해 바꿔줘도 되지만 이번엔 자식요소를 이용해 바꿔보도록 하자.

input박스가 들어있는 Input의 styled에서 scss를 활용해보자

const Input = styled.div`

  max-width: 350px;

  min-height: 10vh;

  background-color: #fff;

  padding: 16px;

  margin: 20px auto;

  border-radius: 5px;

  border: 1px solid #ddd;

  & input {

    border: 1px solid #888;

  }

  & input:focus {

    outline: none;

    border: 1px solid #a673ff; //연보라 

  }

`;

 여기서 &은 '나 자신'을 뜻한다.

그리고 다 만들어 줘도 자동적으로 input은 웹상에서 outline이 생기기 때문에 계속 focus를 했을때 내가 적용한 스타일이 나오지 않는데 outline: none; 으로 해줌으로써 적용이 잘 되는것을 볼 수 있다.

 

요소가 다 작은것 같아서

& > * {

    padding: 5px;

  }

이렇게 padding을 줘 보자 여기서 & > * 는 각각 '나 자신(&)', '자식요소(>)', '전체(*)' 를 뜻한다.

 

const ItemStyle = styled.div`

  padding: 16px;

  margin: 8px;

  color: ${(props) => (props.completed ? "#fff" : "#333")};

  background-color: ${(props) => (props.completed ? "#673ab7" : "aliceblue")};

`;

BucketList.js에서 리스트의 배경, 텍스트 색도 바꿔주자

 

최종 Progress.js

import React from "react"; import styled from "styled-components"; import { useSelector } from "react-redux"; const Progress = (props) => {   const bucket_list = useSelector((state) => state.bucket.list);   let count = 0;   bucket_list.map((b, idx) => {     if (b.completed) {       count++;     }   });   console.log(count);   return (     <ProgressBar>       <HighLight width={(count / bucket_list.length) * 100 + "%"} />       <Dot />     </ProgressBar>   ); }; const ProgressBar = styled.div`   background: #eee;   width: 100%;   height: 20px;   display: flex;   align-items: center;   border-radius: 10px; `; const HighLight = styled.div`   background: #673ab7;   transition: 1s; //1s width 이런식으로 넓이로 지정해주면 넓이에만 적용이 되고 시간만 써주면 전체적으로 적용이 되어 변화가 있을때 발동된다.   width: ${(props) => props.width};   height: 20px;   border-radius: 10px; `; const Dot = styled.div`   width: 40px;   height: 40px;   background: #fff; // 흰색   border: 5px solid #673ab7; //보라색   border-radius: 40px;   margin: 0px 0px 0px -20px; `; export default Progress;