[date] monorepo storybook img 경로 지정하기

드디어 레포지토리 세팅을 하고 컴포넌트 개발을 시작해보려고 한다.

첫번째는 image file을 선택하는 input 컴포넌트

 

package/ui/src 경로에서 UI 컴포넌트들을 개발할 것이다.

main.ts에 stories 경로를 아래와 같이 지정해두면 스토리 파일의 경로가 src/xxx.stories.tsx 또는 src/ImageInput/xxx.stories.tsx 이던 간에 스토리북이 감지한다.

// apps/storybook/.storybook/main.ts
const config: StorybookConfig = {
  stories: ["../../../packages/ui/src/**/*.stories.@(js|jsx|ts|tsx)"],
 ...
};

---

input.stories.tsx 파일을 아래와 같이 작성하고 테스트 해보았다.

import { Meta, StoryObj } from "@storybook/react";
import ImageInput from "./ImageInput";

const meta: Meta<typeof ImageInput> = {
  component: ImageInput,
  title: "UI/ImageInput",
  decorators: [],
};

export default meta;
type Story = StoryObj<typeof meta>;

export const ImgaeFileInput: Story = {};

const ImageInput = () => {
  return (
    <div>
      <label>
        <img src="../../public/Add_Image.png" width={34} height={34} alt="Add Image" />
        <p>이미지 첨부하기</p>
      </label>
      <input type="file" multiple></input>
    </div>
  );
};

export default ImageInput;

이미지가 제대로 안뜨는 문제가 있다.

파일을 옮기고 src="./Add_Image.png" 로 수정해보니 이런 에러 메시지가 뜬다.

콘솔에 뜨는 에러메시지

 

---

문제점

src를 상대 경로로 사용할 수 없다.

package/ui는 라이브러리 패키지이므로 최종적으로 어디서 이 파일이 실행될지 예측할 수 없다

즉 컴포넌트를 어디서 호출할지 알 수 없음

apps/* 에서 실행된다면 상대 경로는 apps/* 를 기준으로 하게 된다. => 위에서 본 에러 메시지의 경로와 같이 됨

GET http://localhost:6006/Add_Image.png 404 (Not Found)

 

=> import 하여 변수로 사용

import addImage from "./Add_image.png";
const ImageInput = () => {
  return (
    <div>
        <img src={addImage} width={34} height={34} alt="Add Image" />
    </div>
  );
};

export default ImageInput;

 

이 경우 타입스크립트가 이미지를 모듈로 인식하도록 아래 d.ts파일이 필요하다

// ui/src/declarations.d.ts

declare module "*.png" {
  const value: string;
  export default value;
}

 

마지막으로 tsconfig.json에서 typeRoots 옵션 추가

타입 정의 파일 (d.ts)를 찾는 경로를 지정해준다.

기본적인 npm 패키지의 타입 정의 파일 + 직접 만든 타입 정의파일 추가

  // ui/tsconfig.json
  
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./src/types"]
  },

---

사실 img 태그를 쓰기 전 next/image로부터 import한 Image 를 썼더니 아예 에러가 발생했다.

=> 이건 package/ui가 리액트 프로젝트이기 때문이다.! 하하 

apps/* => next프로젝트 : ui 컴포넌트 가져다가 페이지 작성
packages/ui => react 프로젝트 : UI 컴포넌트를 작성

 

리액트 프로젝트에서 next/image를 썼으니 에러가 발생하지