모바일 현장 조사 애플리케이션 (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

프로젝트 구조

컴포넌트 간 관계 Diagram

페이지 컴포넌트 간 관례 Diagram

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

로그인

로그인 Sequence Diagram

로그인 컴포넌트 Diagram

참고

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 환경에서 충분한 테스트를 진행하시기 바랍니다.