[styled-component] 별점 라이브러리

스타일 컴포넌트를 쓰기로 했다!

신난다~~~

 

# with npm
npm install --save styled-components

# with yarn
yarn add styled-components

npm i --save-dev @types/styled-components

이걸 깔고 실행하니까

 

TS2769: No overload matches this call.

 

오류가 뜬다. 

 

 

기존에 js 파일에 styled-component가 작업되어 있어서 그렇다... 전부 ts로 바꾸고 props에 타입 지정해주었다.

 

 

 

나머지는 이모션이랑 거의 똑같은 것 같다~ 

 

코캠 별점 라이브러리 만들기를 참고했다.

[1, 2, 3, 4, 5] 배열을 만들고 그걸 map 돌리는 식!

 

마우스 hover시에 거기까지 별이 채워지는 이벤트를 만들고 싶었는데, 그건 못했다. 

 

// RatingBtn.tsx

// styles
import * as S from "./RatingBtn.Styles";

// img
import star_filled from "../../../";
import star_lined from "../../../"

import StarRating from "../../starrating/StarRating";

import { useState } from "react";
import Tooltip from "../../commons/tooltip/Tooltip";

export default function RatingBtn() {
  const [isOn, setIsOn] = useState(false);
  const [isHover, setIsHover] = useState(false);

  const onClickRating = () => {
    setIsOn(!isOn);
  };

  const onClickConfirm = () => {
    setIsOn(false);
  };

  return (
    <div>
      <S.RatingButton
        isOn={isOn}
        onMouseOver={() => setIsHover(true)}
        onMouseOut={() => setIsHover(false)}
      >
        {!isOn && (
          <>
            <S.ButtonOff onClick={onClickRating}>
              <img
                src={star_filled}
                alt="star"
                style={{ width: "20px", height: "20px" }}
              />
              <div>4.5</div>
            </S.ButtonOff>
          </>
        )}
        {isOn && (
          <>
            <StarRating />
            <div onClick={onClickConfirm}>등록</div>
          </>
        )}

        <Tooltip text="별점" hover={isHover} />
      </S.RatingButton>
    </div>
  );
}

// RatingBtn.Styles.ts

import styled from "styled-components";

interface IRatingBtnProps {
  isOn?: boolean;
}

export const RatingButton = styled.div`
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;

  width: ${(props: IRatingBtnProps) => (props.isOn ? "160px" : "74px")};
  height: 34px;
  border: 1px solid pink;
  border-radius: 4px;
  gap: 8px;

  color: pink;
  font-size: 14px;
  letter-spacing: -0.3px;

  transition: 0.2s;
`;

export const ButtonOff = styled.div`
  width: 74px;
  height: 34px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  gap: 8px;
`;

// StarRating.tsx

import { useEffect, useState } from "react";
import styled from "styled-components";

// img
import star_filled from "../../g";
import star_lined from "../../";

const Score = [1, 2, 3, 4, 5];

const StarRatingWrapper = styled.div`
  display: flex;
  flex-direction: row;
`;

const Star = styled.div`
  width: 20px;
  height: 20px;

  transition: 0.2s;

  background: url(${(props: { isActive: boolean }) =>
    props.isActive ? star_filled : star_lined});

  background-size: contain;

  &:hover {
    transform: scale(1.1);
    cursor: pointer;
  }
`;

export default function StarRating() {
  const [rating, setRating] = useState(0);
  const [isActive, setIsActive] = useState(false);

  const onClickStar = (num: number) => {
    setRating(num);
  };

  useEffect(() => { // 이 부분은 하려다가 실패했다.
    const starValue = Number(document.getElementById("star"));

    const star = document.querySelectorAll(".star");

    star.forEach((Tag, index) => {
      Tag.addEventListener("mouseover", () => {
        setIsActive(true);
      });
      Tag.addEventListener("mouseout", function () {
        setIsActive(false);
      });
    });
  }, []);

  return (
    <StarRatingWrapper>
      {Score.map((num) => {
        return (
          <Star
            className="star"
            isActive={num <= rating}
            onClick={() => onClickStar(num)}
          />
        );
      })}
    </StarRatingWrapper>
  );
}

 

 

https://styled-components.com/

styled-components

 

 

 

+++ 

이때까지 못 풀었던 카드 효과 풀 수 있을지도????

 

https://noname2.tistory.com/172

hover 유지시키기

https://tympanus.net/codrops/2010/01/17/css-and-jquery-tutorial-fancy-apple-style-icon-slide-out-navigation/

CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation | Codrops