쇼핑몰 및 채팅 서비스에서 별점 주기 컴포넌트 구현

 

가만있어 보자..  

쇼핑몰이나 채팅 서비스에서 상담사에게 별점을 주는 시스템이 있는데,

별점 줄때 쓰는 거 머시기 있는데.. 자주 쓰이는건 아니지만 아주 간혹 이런 형태의 작업이 들어옴..

어쩌것어... 그럼 만들어야지.... 

별점주기

뭐 방식이야 여러가지 형태로 있겠지만 .. 

그런 방식 따위는 그냥 개무시하고 내가 생각한대로 만들어서 기능 구현이 되면 되는거다.

 

import React, { useState } from 'react';
import Style from './EvaluateStyle';
import { IconStart } from '../../assets/images/common/IconSet';

const Evaluate = Style(APP_SKIN);

function EvaluateWrap(props) {
  const [selectedRating, setSelectedRating] = useState(0); // 현재 선택된 별점 (0부터 5까지)

  function handleEvaluate(index) {
    // 선택된 별점을 설정 (1부터 시작)
    setSelectedRating(index + 1);
  }

  return (
    <Evaluate>
      <div className={'start-set'}>
        <ul>
          {[0, 1, 2, 3, 4].map((index) => (
            <li key={index} className={index < selectedRating ? 'isActive' : ''}>
              <button onClick={() => handleEvaluate(index)}>
                <IconStart
                  fill={
                    index < selectedRating
                      ? 'var(--Tertiary-Afternoon-Yellow)'
                      : 'var(--Primary-Polar-White)'
                  }
                  stroke={
                    index < selectedRating
                      ? 'var(--Tertiary-Afternoon-Yellow)'
                      : 'var(--Grey-Spectrum-Coll-Grey-40)'
                  }
                />
              </button>
            </li>
          ))}
        </ul>
        <span className="blind">{selectedRating}점</span>
      </div>
    </Evaluate>
  );
}

export default EvaluateWrap;

 

대충 설명하면 .. 버튼안에 아이콘을 넣고 map으로 원하는 개수만큼 만들고..

클릭하면 index를 어쩌구 저쩌구 해서 그랬ㅉ ... 모르겠다.. 어차피 설명해도 안볼거 대충 코드로 가저가서 쓰는걸로.

 

import styled, { css } from 'styled-components';

// 공통으로 사용되는 스타일
const Evaluate = css`
  .start-set {
    ul {
      display: inline-flex;
      li {
        width: 40rem;
        height: 40rem;
        button {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
`;

 

 

 

혹시라도 그럴 일은 없겠지만 질문 안받음.

혹시라도 그럴 일은 없겠지만 이것이 유용해서 가지고 가서 사용 한다면 .. 좋겠네?  

혹시라도 그럴 일은 없겠지만 가저간다면 내것이 아닌 니것이니 니것으로 만들어서 쓰는건 어때?