모바일 현장 조사 애플리케이션 (onsitesurvey)
개요
Next.js와 TypeScript로 구축된 현장 조사용 모바일 애플리케이션입니다.
기술 스택
- 프레임워크: Next.js (App Router)
- 언어: TypeScript
- UI 컴포넌트: Shadcn UI, Radix UI
- 스타일링: Tailwind CSS
- 상태 관리: React Query
- 데이터베이스: Prisma ORM
- 인증: 세션 기반 인증
시작하기
필수 요구사항
- Node.js (LTS 버전) 22.16.0 권장
- npm 또는 yarn 또는 pnpm 또는 burn
- Prisma CLI
설치 방법
# 의존성 설치
npm install
# 환경 변수 설정
cp .env.example .env.local
개발 서버 실행
# 개발 서버 실행
npm run dev
프로덕션 빌드
# 애플리케이션 빌드
npm run build
# 프로덕션 서버 실행
npm start
프로젝트 구조
├── 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]
const popupController = usePopupController()
onClick={() => popupController.setMemberInformationPopup(true)}
onClick={() => popupController.setZipCodePopup(true)}
[close]
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 구현 시 ×, ー 데이터 관리 필요
주의
Prisma ORM 사용 시 주의사항
현재 프로젝트는 Prisma ORM을 통해 데이터베이스의 일부 테이블만 관리하고 있습니다. 이로 인해 prisma db pull 또는 prisma db push 명령어 사용 시 주의가 필요합니다.
잠재적 위험성
schema.prisma파일에 정의된 모델이 의도치 않게 수정될 수 있습니다.- 기존에 정의된 모델의 속성이나 관계가 손상될 수 있습니다.
- 데이터베이스 스키마와 Prisma 스키마 간의 불일치가 발생할 수 있습니다.
권장 사항
- 데이터베이스 스키마 변경이 필요한 경우, 반드시 팀 내 논의 후 진행하시기 바랍니다.
prisma db pull실행 전 현재schema.prisma파일의 백업을 권장합니다.- 변경 사항 적용 전 staging 환경에서 충분한 테스트를 진행하시기 바랍니다.