[React] Custom Sidebar 구현하기

아래와 같은 Custom Sidebar를 구현해보자.

 

1. 아래와 같이 CustomSiderbar.jsx 파일을 만든다.

(styled component에서 props.theme...은 themeProvider에서 내려준 스타일이다)

import React from 'react';
import styled from 'styled-components';

const CustomSidebar = ({ items, setItem, selectedItem }) => {
  return (
    <StyledSidebar style={{ flex: 1 }}>
      <StyledSidebarUl>
        {items.map((item, index) => (
          <StyledSidebarLi
            key={index}
            onClick={() => {
              setItem(item);
            }}
            $isSelected={item === selectedItem}
          >
            {item}
          </StyledSidebarLi>
        ))}
      </StyledSidebarUl>
    </StyledSidebar>
  );
};

export default CustomSidebar;

const StyledSidebar = styled.div`
  position: sticky;
  top: 100px;
  height: 700px;
  background-color: #fff;
  color: ${(props) => props.theme.colors.mainBlack};
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: ${(props) => props.theme.fontSize.base};
  padding: 30px;
  text-align: center;
  cursor: pointer;
  > ul {
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
`;

const StyledSidebarUl = styled.ul`
  display: flex;
  gap: 20px;
  flex-direction: column;
`;

const StyledSidebarLi = styled.li`
  padding: 10px;
  border-radius: 20px;
  background-color: ${(props) => (props.$isSelected ? (props) => props.theme.colors.main : '')};
`;

 

2.다음과 같이 필요한 부분에서 프롭스를 주입시켜 사용한다.

<CustomSidebar items={newGenreLists} setItem={setSelectedGenre} selectedItem={selectedGenre} />