[💻 코드스테이츠 FE 44기]디자인 시스템 구축하기 과제 - 2

✔️ 시작

일단 계속 진행은 했지만... 모르겠다.. 이게 맞나..?

📍 진행현황

결론만 말하자면 솔직히 많이 진행하지 못했다.

또한 이게 맞나? 싶기도 하다. 그래서 간략하게만 작성하려고 한다.

Logo.js

import logoimg from '../../img/logo.svg'
import { Logo } from "../../styled/headerStyle"

export function LogoComponent() {
  return (
      <Logo><img src={logoimg} alt="logo" />Coz Shopping</Logo>
  )
}

export default LogoComponent;

Logo.stories.js

import logoimg from '../../img/logo.svg'
import { Logo } from "../../styled/headerStyle"

export function LogoComponent() {
  return (
      <Logo><img src={logoimg} alt="logo" />Coz Shopping</Logo>
  )
}

export default LogoComponent;

사실 로고의 "Coz Shopping" 부분을 label로 바꿔
스토리북에 옵션을 추가해 주려고 했으나... 생각 보다 잘 되지 않았고
어떠한 구조로 진행해야하는지 감이 잡힐지 않아서... 일단 패스

ImgCard.js

import * as pruductData from "../../api/pruductData"

export function ImgCard({}) {
  return (
    <Section>
      <div className="img-box">
        <img src='https://images.unsplash.com/photo-1617363020293-62faac14783d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80' />
      </div>
    </Section>
  )
}

export default ImgCard;

ImgCard.stories.js

import ImgCrad from './ImgCrad'

export default {
  title: 'Atoms/ImgCrad', // 스토리 분류 및 컴포넌트 이름
  component: ImgCrad, // 테스트할 컴포넌트(Button)
}

export const Primary = () => <ImgCrad />;
Primary.arg = {
  
}

icon 처럼 selectbox를 만들어 사진을 다르게 표현하려고 했다..
허나 그 또한 제대로 이루어지지 않았고 시간이 별로 남지도 않았다..

그렇게 이번 과제를 하긴 했지만 이게 한 건가..? 정도로 했다.ㅎ

✏️ 마치며

story book은 원리만 제대로 안다면 할 수 있을 거 같지만
그 알아내는데에 시간이 좀 걸릴 것 같았다.

여담이지만 다른 분 얘기 들어보니 그렇게 중요하지 않다고 한다.
하지만 사용하는 기업에 취업을 하거나 등 필요로 할 때는 분명 생길 수 있다.

그 때 제대로 배워도 늦지 않았다 생각하고
sroty book을 이런식으로 진행되는 구나 정도만 파악해도 괜찮지 않을까 싶다.