common-library

정의

1. 주문/전시/기타 서비스에서 사용 될 매체별 공통 컴포넌트를 정의 합니다.
2. 이 프로젝트는 Nextjs를 빌드하지 않습니다. 별도의 웹 서비스가 없습니다.
3. 각 공통 컴포넌트 개발 시 개별 브랜치에서 작업한 뒤 부모 저장소로 Merge 하세요.

src
 └ components
   └ common                 // 공통
     └ desktop              // PC 공통 컴포넌트
       └ etc                // 기타
       └ order              // 주문
       └ product            // 전시
     └ global               // PC / 모바일에서 공통으로 사용하는 컴포넌트 
     └ mobile               // Mobile 공통 컴포넌트
       └ etc                // 기타
       └ order              // 주문
       └ product            // 전시
     layout                 // 레이아웃
     └ desktop              // PC 레이아웃 <변경 예정>
     └ mobile               // Mobile 레이아웃 <변경 예정>
 └ interfaces     
 └ modules
 └ index.tsx              // export Component Root

Storybook

• 이 프로젝트는 웹 서비스를 포함하지 않습니다.
• 컴포넌트 개발 후 테스트를 위해 Storybook을 사용 합니다. (https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/)

yarn sb

Build 주의 사항

• 이 프로젝트는 Nextjs 프로젝트가 아닙니다. (Not CNA)
• JSX식이 포함되는 컴포넌트는 React를 import 하세요.
• Fragment 사용 하지 마세요. 대신 "div" 태그를 사용하세요.

import React from 'react'   // <-- Require

// Build Success
const MyComponent = () => {
  return <h1>hi</h1>
}

export default MyComponent

---

// Build Fail
const MyComponent = () => {
  return <h1>hi</h1>
}

export default MyComponent

import React from 'react'

// Build Success
const MyComponent = () => {
  return <h1>hi</h1> 
}

// Build Success
const MyComponent = () => {
  return (
    <div>
      <h1>hi</h1>
    </div>
  )
}

---

import React from 'react'

// Build Fail
const MyComponent = () => {
  return <><h1>hi</h1></>
}

// Build Fail
const MyComponent = () => {
  return (
    <>        // <-- Fragment
      <h1>hi</h1>
    <>
  )
}

npm run build 
or 
yarn build

npm login
...

npm publish