D-61

🔍 StoryBook

StoryBook을 이용해 기존에 있던 Fontawesome faStar 북마크 버튼을 대체할 컴포넌트를 따로 관리할 수 있게 만들어봤다.

🔍 파일 구조

// storybook 설치
npx storybook@latest init

📌 Star.js

import React from "react";
import PropTypes from "prop-types";
import "./star.css";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faStar} from "@fortawesome/free-solid-svg-icons";

export const Star = ({primary, fontSize, size, label, ...props}) => {
  const mode = primary ? "storybook-Star--primary" : "storybook-Star--secondary";
  return <FontAwesomeIcon icon={faStar} className={["storybook-Star", `storybook-Star--${size}`, mode].join(" ")} style={{fontSize: "2rem"}} {...props} />;
};

Star.propTypes = {
  primary: PropTypes.bool,
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
};

Star.defaultProps = {
  primary: false,
  onClick: undefined,
};

📌 Star.stories.js

import {Star} from "./Star";

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
export default {
  title: "Example/Star",
  component: Star,
  argTypes: {
    backgroundColor: {control: "color"},
  },
};

// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const Primary = {
  args: {
    primary: true,
    label: "Star",
  },
};

export const Secondary = {
  args: {
    label: "Star",
  },
};

📌 star.css

.storybook-Star {
  border: 0px;
  cursor: pointer;
  background-color: transparent;
}

.icon {
  font-size: 100px;
}

.storybook-Star--primary {
  color: gold;
  background-color: transparent;
}

.storybook-Star--secondary {
  color: #fff;
  background-color: transparent;
}

---

📌 localhost:6006

📌localhost:3000

📚

이미 완성된 코드는 Item 컴포넌트 안에 이미지와 북마크를 같이 관리하고 있었다. StoryBook으로 리펙토링을 하는 과정에서 솔로 프로젝트 시작 시 작은 단위로 세세하게 나누지 않아 분리하는 시간을 꽤 오래 보냈다. 이번 과제를 통해 컴포넌트를 세분화해 폴더를 나눠 코드를 관리하는 방법을 알게 되었다.