## 폴더 구조

> "주의" 표시가 있는 파일 및 폴더는 수정 시 협의가 필요한 폴더 및 파일입니다.

```
 ┣ 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 데이터 전달 처리