204 lines
4.7 KiB
Markdown
204 lines
4.7 KiB
Markdown
## 폴더 구조
|
||
|
||
> "주의" 표시가 있는 파일 및 폴더는 수정 시 협의가 필요한 폴더 및 파일입니다.
|
||
|
||
```
|
||
┣ apps # 개발은 apps 폴더에서 진행
|
||
┃ ┣ ⛔️common # 원앤올에서 제공하는 기능 관련 모듈은 common 폴더로 제공
|
||
┃ ┃ ┣ board
|
||
┃ ┃ ┣ survey
|
||
┃ ┃ ┣ ...
|
||
┃ ┃ ┗ package.json
|
||
┃ ┃
|
||
┃ ┗ (타개발사 작업 폴더)
|
||
┃ ┣ ...
|
||
┃ ┗ package.json
|
||
┃
|
||
┣ packages # 공통 모듈이 위치할 폴더
|
||
┃ ┣ ⛔️common # 원앤올에서 제공하는 공통 모듈은 common 폴더로 제공
|
||
┃ ┃ ┣ assets
|
||
┃ ┃ ┣ components
|
||
┃ ┃ ┗ ...
|
||
┃ ┃
|
||
┃ ┗ (타개발사 작업 폴더)
|
||
┃ ┣ ...
|
||
┃ ┗ package.json
|
||
┃
|
||
┣ ⛔️package.json
|
||
┣ ⛔️pnpm-workspace.yaml
|
||
┣ ⛔️tailwind.config.preset.ts
|
||
┣ ⛔️tsconfig.base.json
|
||
┗ ⛔️turbo.json
|
||
```
|
||
|
||
## 새로운 프로젝트 설치 및 실행
|
||
|
||
### 1. 프로젝트 생성(Next.js 기준)
|
||
|
||
```bash
|
||
npx create-next-app@latest ./apps/as --typescript --eslint --tailwind --app
|
||
```
|
||
|
||
### 2. package.json 수정
|
||
|
||
```json
|
||
{
|
||
// 기타 설정 ...
|
||
"scripts": {
|
||
"dev": "next dev",
|
||
"build": "next build",
|
||
"start": "next start",
|
||
"lint": "next lint"
|
||
},
|
||
"dependencies": {
|
||
"@common/components": "workspace:*", // 추가
|
||
"react": "^19.0.0", // 제거
|
||
"react-dom": "^19.0.0", // 제거
|
||
},
|
||
"devDependencies": {
|
||
"@types/react": "^19", // 제거
|
||
"@types/react-dom": "^19" // 제거
|
||
}
|
||
}
|
||
```
|
||
|
||
### 3. tsconfig.json 수정
|
||
|
||
```json
|
||
{
|
||
// 기타 설정 ...
|
||
"baseUrl": "./src",
|
||
"paths": {
|
||
"@common/components": ["../../../packages/common/components/dist/"],
|
||
"@common/config": ["../../../packages/common/config/dist/"],
|
||
"@common/network": ["../../../packages/common/network/"]
|
||
}
|
||
}
|
||
```
|
||
|
||
### 4. tailwind.config.ts 수정
|
||
|
||
```ts
|
||
import type { Config } from "tailwindcss";
|
||
import presetConfig from "../../tailwind.config.preset";
|
||
|
||
export default {
|
||
presets: [presetConfig],
|
||
darkMode: ["class", "[data-mode='dark']"],
|
||
content: [
|
||
"../../packages/common/components/src/ui/**/*.{js,ts,jsx,tsx,mdx}",
|
||
// 기타 컨텐츠 ...
|
||
],
|
||
} satisfies Config;
|
||
```
|
||
|
||
### 5. next.config.ts 수정
|
||
```json
|
||
import type { NextConfig } from "next";
|
||
|
||
const subDomain =
|
||
process.env.NEXT_PUBLIC_SUB_DOMAIN || "http://localhost:13000";
|
||
|
||
const nextConfig: NextConfig = {
|
||
async rewrites() {
|
||
return {
|
||
beforeFiles: [
|
||
{
|
||
source: "/_next/static/:path*",
|
||
destination: `${subDomain}/_next/static/:path*`,
|
||
has: [
|
||
{
|
||
type: "header",
|
||
key: "referer",
|
||
value: "(.*)/cms(.*)",
|
||
},
|
||
],
|
||
},
|
||
],
|
||
afterFiles: [
|
||
{
|
||
source: "/cms/:path*",
|
||
destination: `${subDomain}/cms/:path*`,
|
||
},
|
||
],
|
||
fallback: [],
|
||
};
|
||
},
|
||
};
|
||
|
||
export default nextConfig;
|
||
|
||
```
|
||
|
||
### 6. globals.css(또는 전역 css) 수정
|
||
|
||
```css
|
||
@import "@common/assets/styles/base.css";
|
||
@import "@common/assets/styles/diveicon.css";
|
||
@import "@common/components/index.css";
|
||
|
||
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
/* 기타 스타일 */
|
||
```
|
||
|
||
### 7. 패키지 의존성 재설치
|
||
|
||
```bash
|
||
rm -rf node_modules pnpm-lock.yaml
|
||
pnpm install
|
||
```
|
||
|
||
### 8. 로그아웃 처리 가이드
|
||
|
||
* 참고 파일
|
||
- apps/cs/app/api/auth/logout/route.ts
|
||
- packages/common/components/src/ui/header/index.tsx (55-65 line)
|
||
|
||
각 서비스 폴더에 ‘/app/api/auth/logout/route.ts’ 생성해야 합니다(코드는 cs에서 확인).
|
||
|
||
** 로그아웃 처리되면 ‘/auth/login’ 페이지로 이동됩니다.
|
||
|
||
### 9. 'SITE_ID’ 환경변수를 쿠키로 대체하는 가이드(공통 모듈 사용하기위한 필수 사항)
|
||
|
||
* 참고 파일: apps/cs/src/shared/api/client.ts (쿠키 저장 처리)
|
||
apps/cs/src/shared/lib/cookie.ts (쿠키 공통 모듈)
|
||
|
||
`SITE_ID` 환경변수를 처음 사용하는 파일 또는 최상단 클라이언트 컴포넌트에서 “site-id-key” 쿠키에 `SITE_ID` 저장
|
||
|
||
|
||
|
||
|
||
## 기술 스택
|
||
|
||
- React(^18)
|
||
- TypeScript(^5)
|
||
- Next.js(^15)
|
||
- Tailwind CSS(^3)
|
||
- react-dnd-treeview(^3)
|
||
- TanStack Table (v8)
|
||
- Chart.js(^4)
|
||
- Storybook(^8)
|
||
- tus-js-client(^4)
|
||
- Zustand(^5)
|
||
- TanStack Query(^5)
|
||
- Axios(^1)
|
||
|
||
## 링크
|
||
|
||
- 컴포넌트 가이드(스토리북): http://www.onasys.co.kr/design/template
|
||
|
||
|
||
## API 서버
|
||
http://dev.onasys.co.kr:8000
|
||
|
||
## Swagger
|
||
http://dev.onasys.co.kr:8000/webjars/swagger-ui/index.html?urls.primaryName=attach-service
|
||
|
||
## 개발 가이드
|
||
- 사이드바 메뉴 클릭 시 "menuCd" 데이터 쿠키 저장 처리
|
||
- 쿠키명 : menu-code-key
|
||
- 해당 메뉴 쿠키 데이터 가져와 페이지 권한 및 상당 Breadcrumb 데이터 전달 처리
|