yoosangwook
53966a16e1
- Introduced builderNm field to SessionData interface for improved session tracking. - Updated API routes to set builderNm based on user data. - Modified useAxios hook to manage spinner visibility more effectively. - Adjusted ReactQueryProvider to disable retry on queries for better performance.
170 lines
4.4 KiB
Markdown
170 lines
4.4 KiB
Markdown
# 모바일 현장 조사 애플리케이션 (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 환경에서 충분한 테스트를 진행하시기 바랍니다.
|