TIL - 21

- Keyword

react-router-dom / query string / animation / CSS

 

react-router-dom에 있는 hooks를 사용하였다.

특정 url로 이동해주는 useNavigate와 query string을 parsing하여 get해주는 useSearchParams를 사용하여 필요한 data를 쉽게 얻었다.

import { useNavigate } from "react-router-dom";
// useNavigate 변수 선언
const moveSearchUser = useNavigate();
// 이동할 url 등록
moveSearchUser(`/user?nick=${searchUserNickname.current.value}&matchType=indi`);

import { useSearchParams } from "react-router-dom";
// useSearchParams 변수 선언
const [params, setParams] = useSearchParams();
// url에서 ?, & 이후 변수를 get하면 = 값을 추출 
const searchNickname = params.get("nick");
const matchType = params.get("matchType");

 

animation으로 spinner와 배경색이 바뀌는 UI를 만들었다.

styled-components로 만든 것은 처음이었지만 생각보다 쉬웠다.

 

// animation 사용을 위해 keyframes를 import
import styled, { keyframes } from "styled-components";

// #### Spinner ####
// keyframes로 animation 변수를 만듦
const rotationAnimation = keyframes`
  0% {
    tansform: rotate(0deg);
    border-radius: 100px;
  }
  100% {
    transform: rotate(360deg);
    border-radius: 100px;
  }
`;

// 만들어준 animation 변수를 받아서 사용
export const Spinner = styled.div`
  width: 40px;
  height: 40px;
  border: 3px solid transparent;
  border-top: 3px solid #0079ff;
  border-left: 3px solid #0079ff;
  animation: ${rotationAnimation} 0.8s linear infinite;
`;


// #### 배경 색 바뀌는 막대 ####
// background-position을 바꿔주는 것이 point
const colorChangeAnimation = keyframes`
  0% {
    background-position: 0%;
  }
  50% {
    background-position: 100%;
  }
  100% {
    background-position: 0%;
  }
`;

// background-size를 색상 수 * 100%
// 높이도 있다면 background-size : 400% 400%; 이런식으로 작성
export const ReuqestMatchDiv = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 45px;
  line-height: 45px;
  // Gradation 효과
  background: linear-gradient(-45deg, #ee7752, #f62459, #07f, #23d5ab);
  background-size: 400%;
  animation: ${colorChangeAnimation} 20s ease infinite;
  color: #fff;
  margin-top: 20px;
  padding-left: 20px;
  font-size: 15px;
  font-weight: 500;
  padding: 0;
  font-family: Noto Sans KR;
  font-weight: bold;

`;

 

 

- 오늘 하루 느낀 점

과제 마감일이 다가오는데 생각보다 진행 속도가 느리다.

너무 많은 것을 하려고 해서 그런지 불필요한 시간을 많이 소모한 것 같다.

일단 CSS를 완벽하게 다 하기보단 기능부터 만드는 것에 집중해야겠다.

CSS가 진짜 힘든 작업인 것을 새삼 깨달았다.