0.1.3 • Published 2 years ago
@kstory8715/next-common-alpha v0.1.3
common-library
정의
- 주문/전시/기타 서비스에서 사용 될 매체별 공통 컴포넌트를 정의 합니다.
- 이 프로젝트는 Nextjs를 빌드하지 않습니다. 별도의 웹 서비스가 없습니다.
- 각 공통 컴포넌트 개발 시 개별 브랜치에서 작업한 뒤 부모 저장소로 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