# 모바일 현장 조사 애플리케이션 (onsitesurvey)

## 개요

Next.js와 TypeScript로 구축된 현장 조사용 모바일 애플리케이션입니다.

## 기술 스택

- **프레임워크**: Next.js (App Router)
- **언어**: TypeScript
- **UI 컴포넌트**: Shadcn UI, Radix UI
- **스타일링**: Tailwind CSS
- **상태 관리**: React Query
- **데이터베이스**: Prisma ORM
- **인증**: 세션 기반 인증

## 시작하기

### 필수 요구사항

- Node.js (LTS 버전)
- npm 또는 yarn 또는 pnpm 또는 burn
- Prisma CLI

### 설치 방법

```bash
# 의존성 설치
npm install

# 환경 변수 설정
cp .env.example .env.local

```

### 개발 서버 실행

```bash
# 개발 서버 실행
npm run dev
```

### 프로덕션 빌드

```bash
# 애플리케이션 빌드
npm run build

# 프로덕션 서버 실행
npm start
```

## 프로젝트 구조

[프로젝트 구조 Diagram](./diagram/mermaid.md)

```
├── app/              # Next.js 앱 디렉토리
├── components/       # React 컴포넌트
├── hooks/           # 커스텀 React 훅
├── lib/             # 유틸리티 함수 및 설정
├── prisma/          # 데이터베이스 스키마 및 마이그레이션
└── public/          # 정적 자산
```

## 참고

### prisma 연결

```
npx prisma migrate dev

npx prisma generate

npx prisma db pull
npx prisma db push
```

generate 를 진행해야 로컬에 연결 파일들이 생성이되고 pull push 를 사용할 수 있게 됨.

### react query cache data 가져오기

```
const cache = useQueryClient()
const data = cache.getQueryData(['user', 'info']) as UserState
```

### 팝업 컨트롤러 제어

[open]

```javascript
const popupController = usePopupController()

onClick={() => popupController.setMemberInformationPopup(true)}
onClick={() => popupController.setZipCodePopup(true)}
```

[close]

```javascript
const popupController = usePopupController()

onClick={() => popupController.setMemberInformationPopup(false)}
onClick={() => popupController.setZipCodePopup(false)}
```

### useEffect 정리

- client url pathname 변경시 -> @/components/ui/Header.tsx

### User Role 구분

session에 있는 role 키로 구분한다

- T01 / T01 -> Super user\
  session.role === 'T01'
- A03 / 1234 -> T01을 제외한 1차점\
  session.role === 'Admin'
- 2A03 / 1234 -> 2차점\
  session.role === 'Admin_Sub'
- constA03_01 / 1234 -> 시공사\
  session.role === 'Builder'
- teshg44 / 1234 -> 시공사\
  session.role === 'Builder'
- isogai@yanegiken.co.jp / password -> Q.Partners 계정\
  session.role === 'Partner'
- 이외의 경우 -> 굳이 체크할 필요 없어보임\
  session.role === 'User'

### 지붕재 적합성 TODO

```
const suitableCheckIcon = (value: string): string => {
  const iconMap: Record<string, string> = {
    '×': '/assets/images/sub/compliance_x_icon.svg',
    'ー': '/assets/images/sub/compliance_quest_icon.svg',
    default: '/assets/images/sub/compliance_check_icon.svg',
  }
  return iconMap[value] || iconMap.default
}
const suitableCheckMemo = (value: string): string => {
  if (value === '○') return '設置可'
  if (value === '×') return '設置不可'
  if (value === 'ー') return 'お問い合わせください'
  return `${value}で設置可`
}
```

- src/hooks/useSuitable.ts > suitableCheckIcon(), suitableCheckMemo()
  - 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요

# 주의

## <span style="color: red">Prisma ORM 사용 시 주의사항</span>

현재 프로젝트는 Prisma ORM을 통해 데이터베이스의 일부 테이블만 관리하고 있습니다. 이로 인해 `prisma db pull` 또는 `prisma db push` 명령어 사용 시 주의가 필요합니다.

### <span style="color: red">잠재적 위험성</span>

- `schema.prisma` 파일에 정의된 모델이 의도치 않게 수정될 수 있습니다.
- 기존에 정의된 모델의 속성이나 관계가 손상될 수 있습니다.
- 데이터베이스 스키마와 Prisma 스키마 간의 불일치가 발생할 수 있습니다.

### <span style="color: red">권장 사항</span>

- 데이터베이스 스키마 변경이 필요한 경우, 반드시 팀 내 논의 후 진행하시기 바랍니다.
- `prisma db pull` 실행 전 현재 `schema.prisma` 파일의 백업을 권장합니다.
- 변경 사항 적용 전 staging 환경에서 충분한 테스트를 진행하시기 바랍니다.