Next.jsの開発プロジェクトの進捗を報告します！
Posted date at 2024-08-31
以前の記事📒で宣言をしたNext.jsのプロジェクトの進捗を共有します。
ログインユーザと社員番号による打刻機能の実装が終わりましたが、当初の目的であった8月中のリリースは間に合いませんでした。8/18以降の自宅での開発をGoogle認定試験とUdemy学習に100%割り当あてたのが一番大きかったです。ついで、入力画面の作り込み（制限・操作性・見やすさ）に時間を要した点です。
🚀報告事項
🐡実装機能
以下の機能を実装しました。
- 1.打刻機能の実装
-ログインユーザによる打刻
-社員番号指定による打刻（個別-複数）
- 2.管理機能の実装
-社員別の月別一覧表示・編集
（以下、資料抜粋）
🐡未実装の機能
プロトタイプとして必要と考える機能です。
- 1.管理機能の実装
・ログインユーザのみの一覧表示・編集
・日付別一覧・編集
・月別一覧・編集
・表示社員の選択機能（ログインユーザの部単位で制限）
- 2.権限による制御
・日付別・月別一覧の閲覧・編集権限
- 3.他の打刻機能
・ICカードによる打刻
・顔認証による打刻
🐡詳細（以下の画像をクリック）
🐡アプリのURL
ログインしてもらって大丈夫です。自動でkintoneのアプリにユーザが登録されます。
🚀補足資料（作業ボリューム）
開発規模をお伝えするために、ディレクトリ構成とコード量を記載します。
〇コード量
約2万ステップです。
〇ディレクトリ構成
. ├── app │ ├── admin │ │ └── dashboard │ ├── api │ │ ├── auth │ │ │ └── [...nextauth] │ │ │ └── route.ts │ │ ├── calender │ │ │ └── route.ts │ │ ├── stamping │ │ │ ├── by-multi-worker │ │ │ │ ├── post │ │ │ │ │ └── route.ts │ │ │ │ └── route.ts │ │ │ ├── by-single-worker │ │ │ │ ├── from-management-by-workers │ │ │ │ │ └── route.ts │ │ │ │ └── route.ts │ │ │ ├── by-time │ │ │ │ └── route.ts │ │ │ ├── delete-one │ │ │ │ └── route.ts │ │ │ ├── update-one │ │ │ │ └── route.ts │ │ │ ├── worker-and-days │ │ │ │ └── route.ts │ │ │ ├── get.ts │ │ │ └── route.ts │ │ ├── user │ │ │ ├── [address] │ │ │ │ └── route.ts │ │ │ └── update │ │ │ ├── presets │ │ │ │ ├── management-by-worker │ │ │ │ │ └── preset-worker-id │ │ │ │ │ └── route.ts │ │ │ │ ├── worker-field │ │ │ │ │ └── route.ts │ │ │ │ └── worker-table │ │ │ │ └── route.ts │ │ │ └── route.ts │ │ └── worker │ │ └── [workerId] │ │ └── route.ts │ ├── components │ │ ├── mainMenu │ │ │ ├── ItemContainer.module.scss │ │ │ └── ItemContainer.tsx │ │ └── LoadingAnimation.tsx │ ├── css │ │ ├── globals.scss │ │ ├── reset.scss │ │ └── variables.scss │ ├── lib │ │ └── next-auth │ │ ├── options.ts │ │ └── provider.tsx │ ├── login │ │ ├── components │ │ │ ├── BackgroundAnimation.module.scss │ │ │ ├── BackgroundAnimation.tsx │ │ │ └── LoginButton.tsx │ │ ├── layout.module.scss │ │ ├── layout.tsx │ │ ├── Login.module.scss │ │ └── page.tsx │ ├── management │ │ ├── component │ │ │ ├── history │ │ │ │ ├── contents │ │ │ │ │ ├── items │ │ │ │ │ │ ├── HistoryItem.tsx │ │ │ │ │ │ ├── HistoryItemForIphone.module.scss │ │ │ │ │ │ └── HistroyItem.module.scss │ │ │ │ │ ├── HistoryItemsArea.module.scss │ │ │ │ │ └── HistoryItemsArea.tsx │ │ │ │ ├── header │ │ │ │ │ ├── HeaderController.module.scss │ │ │ │ │ └── HeaderController.tsx │ │ │ │ ├── StampHistory.module.scss │ │ │ │ └── StampHistory.tsx │ │ │ ├── EditStampingModal.module.scss │ │ │ └── EditStampingModal.tsx │ │ ├── daily │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── monthly │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ └── workers │ │ ├── components │ │ │ ├── elements │ │ │ │ ├── DraggableHeader.module.scss │ │ │ │ ├── DraggableHeader.tsx │ │ │ │ ├── WorkerManagementTable.module.scss │ │ │ │ └── WorkerManagementTable.tsx │ │ │ ├── DisplaySummary.module.scss │ │ │ ├── DisplaySummary.tsx │ │ │ ├── HeaderController.module.scss │ │ │ ├── HeaderController.tsx │ │ │ ├── TableArea.module.scss │ │ │ └── TableArea.tsx │ │ ├── functions │ │ │ └── generateDisplayList.ts │ │ ├── layout.tsx │ │ ├── ManagemantByWorkers.module.scss │ │ └── page.tsx │ ├── profile │ │ └── [address] │ │ ├── components │ │ │ ├── ProfileDetail.module.scss │ │ │ ├── ProfileDetail.tsx │ │ │ ├── ProfileTitle.module.scss │ │ │ ├── ProfileTitle.tsx │ │ │ ├── ProfileWorkerEdit.module.scss │ │ │ ├── ProfileWorkerEdit.tsx │ │ │ ├── ProfileWorkerInfo.module.scss │ │ │ └── ProfileWorkerInfo.tsx │ │ ├── layout.tsx │ │ ├── page.tsx │ │ └── ProfilePage.module.scss │ ├── stamping │ │ ├── components │ │ │ ├── DisplayWorkerList │ │ │ │ ├── header │ │ │ │ │ ├── HeaderController.module.scss │ │ │ │ │ └── HeaderController.tsx │ │ │ │ ├── item │ │ │ │ │ ├── WorkerItem.module.scss │ │ │ │ │ └── WorkerItem.tsx │ │ │ │ ├── DisplayWorkerList.module.scss │ │ │ │ └── DisplayWorkerList.tsx │ │ │ ├── ButtonArea.module.scss │ │ │ ├── ButtonArea.tsx │ │ │ ├── DisplayTime.module copy.scss │ │ │ ├── DisplayTime.module.scss │ │ │ ├── DisplayTime.tsx │ │ │ ├── DisplayWorker.module.scss │ │ │ └── DisplayWorker.tsx │ │ ├── login-user │ │ │ ├── [address] │ │ │ │ ├── layout.tsx │ │ │ │ ├── page.tsx │ │ │ │ └── StampAsLoginUser.module.scss │ │ │ └── components │ │ │ ├── contents │ │ │ │ ├── MainContents.module.scss │ │ │ │ └── MainContents.tsx │ │ │ ├── header │ │ │ │ ├── DisplayHeader.module.scss │ │ │ │ └── DisplayHeader.tsx │ │ │ └── history │ │ │ ├── contents │ │ │ │ ├── items │ │ │ │ │ ├── HistoryItem.tsx │ │ │ │ │ ├── HistoryItemForIphone.module.scss │ │ │ │ │ └── HistroyItem.module.scss │ │ │ │ ├── HistoryItemsArea.module.scss │ │ │ │ └── HistoryItemsArea.tsx │ │ │ ├── header │ │ │ │ ├── HeaderController.module.scss │ │ │ │ └── HeaderController.tsx │ │ │ ├── StampHistory.module.scss │ │ │ └── StampHistory.tsx │ │ └── workers │ │ ├── components │ │ │ ├── contents │ │ │ │ ├── MainContents.module.scss │ │ │ │ └── MainContents.tsx │ │ │ ├── header │ │ │ │ ├── DisplayHeader.module.scss │ │ │ │ └── DisplayHeader.tsx │ │ │ └── history │ │ │ ├── contents │ │ │ │ ├── items │ │ │ │ │ ├── HistoryItem.tsx │ │ │ │ │ ├── HistoryItemForIphone.module.scss │ │ │ │ │ └── HistroyItem.module.scss │ │ │ │ ├── HistoryItemsArea.module.scss │ │ │ │ └── HistoryItemsArea.tsx │ │ │ ├── header │ │ │ │ ├── HeaderController.module.scss │ │ │ │ └── HeaderController.tsx │ │ │ ├── StampHistory.module.scss │ │ │ └── StampHistory.tsx │ │ ├── layout.tsx │ │ ├── page.tsx │ │ └── StampAsWorkers.module.scss │ ├── error.tsx │ ├── icon.png │ ├── layout.tsx │ ├── loading.module.scss │ ├── loading.tsx │ ├── mainMenu.module.scss │ ├── not-found.module.scss │ ├── not-found.tsx │ └── page.tsx ├── components │ ├── elements │ │ ├── atoms │ │ │ ├── buttons │ │ │ │ ├── CommonButton.tsx │ │ │ │ ├── ScrollButton.tsx │ │ │ │ ├── StampingButton.module.scss │ │ │ │ ├── StampingButton.tsx │ │ │ │ └── WithIconButton.tsx │ │ │ ├── datepickers │ │ │ │ ├── InvisibleDatePicker.jsx │ │ │ │ └── InvisibleMonthPicker.jsx │ │ │ ├── googleMap │ │ │ │ ├── DisplayPoint.module.scss │ │ │ │ ├── DisplayPoint.tsx │ │ │ │ └── EdittingMapPoint.tsx │ │ │ ├── selectBoxes │ │ │ │ ├── CommonSelectbox.tsx │ │ │ │ └── StampCategorySelectbox.tsx │ │ │ ├── spinners │ │ │ │ ├── Loading.module.scss │ │ │ │ └── Loading.tsx │ │ │ ├── textFields │ │ │ │ ├── CommonTextField.tsx │ │ │ │ └── InputTextField.tsx │ │ │ ├── timePickers │ │ │ │ └── StampingTImePicker.tsx │ │ │ ├── AnalogClock.module.scss │ │ │ ├── AnalogClock.tsx │ │ │ └── index.ts │ │ ├── icons │ │ │ └── Icon.tsx │ │ ├── molecules │ │ │ ├── drawerMenu │ │ │ │ ├── index.ts │ │ │ │ ├── InputMenu.tsx │ │ │ │ ├── ManageMenu.tsx │ │ │ │ └── PersonalMenu.tsx │ │ │ ├── modal │ │ │ │ ├── _template copy.tsx │ │ │ │ ├── CameraCheckModal.module.scss │ │ │ │ ├── CameraCheckModal.tsx │ │ │ │ ├── DeleteModal.module.scss │ │ │ │ └── DeleteModal.tsx │ │ │ ├── DetailDrawer.tsx │ │ │ └── HeaderMenu.tsx │ │ ├── organizms │ │ │ ├── Header.tsx │ │ │ └── MainDrawer.tsx │ │ └── index.ts │ ├── features │ │ └── modal │ │ ├── AddStampFixedWorker.module.scss │ │ ├── AddStampFixedWorker.tsx │ │ ├── AddStampFixedWorkerFromManagement.tsx │ │ ├── AddStampFixedWorkerList.tsx │ │ └── UpdateStampFixedWorker.tsx │ └── providers │ ├── RecoilProvider.tsx │ └── UserProvider.tsx ├── constants │ ├── theme │ │ ├── colorCheck.css │ │ └── theme.ts │ ├── colorCode.ts │ ├── inputMode.ts │ ├── menuList.ts │ ├── pageList.ts │ ├── permissins.ts │ ├── postMode.ts │ ├── sampingCategory.ts │ ├── stampedBy.ts │ ├── stampedFrom.ts │ ├── toastTheme.ts │ └── variables.ts ├── hooks │ ├── carenderList │ │ └── useGetCalenderList.tsx │ └── stampingHistory │ ├── useGetHistory.tsx │ └── useGetHistoryByWorkerAndDays.tsx ├── schema │ └── validationSchema.ts ├── states │ ├── googleMapApiState.ts │ ├── loadingState.ts │ ├── locationState.ts │ ├── userInfoLoaded.ts │ └── userState.ts ├── types │ ├── index.ts │ └── next-auth.d.ts ├── utils │ ├── functions │ │ ├── apiCall │ │ │ └── getWorkerInfo.ts │ │ ├── googleMaps │ │ │ ├── checkGeolocationPermission.ts │ │ │ ├── getAddress.ts │ │ │ ├── getGeoLocation.ts │ │ │ ├── getLatLng.ts │ │ │ └── index.ts │ │ ├── kintone │ │ │ ├── calendar │ │ │ │ ├── getCalenderList.ts │ │ │ │ └── index.ts │ │ │ ├── stamping │ │ │ │ ├── getStamping.ts │ │ │ │ ├── getStampingByMultiWorkers.ts │ │ │ │ ├── getStampingByWorkerAndDays.ts │ │ │ │ ├── index.ts │ │ │ │ ├── postStamping.ts │ │ │ │ ├── postStampingByMultiWorkers.ts │ │ │ │ ├── postStampingBySingleWorker.ts │ │ │ │ ├── postStampingBySingleWorkerFromManagementByWorkers.ts │ │ │ │ ├── setDeletedAtToStamping.ts │ │ │ │ └── updateSingleStamping.ts │ │ │ ├── user │ │ │ │ ├── createTimeMasterUsers.ts │ │ │ │ ├── getTimeMasterUsers.ts │ │ │ │ ├── index.ts │ │ │ │ ├── loginTransaction.ts │ │ │ │ ├── updatePresetWorkerField.ts │ │ │ │ ├── updatePresetWorkerFieldInManagementByWorkers.ts │ │ │ │ ├── updatePresetWorkerTable.ts │ │ │ │ ├── updateTimeMasterUsers.ts │ │ │ │ └── updateTMUsersWithProfParams.ts │ │ │ └── worker │ │ │ ├── getWorkers.ts │ │ │ ├── getWorkersById.ts │ │ │ └── index.ts │ │ ├── stamping │ │ │ ├── addStampingByUser.tsx │ │ │ ├── addStampingByWorker.tsx │ │ │ ├── categorySelectFilter.ts │ │ │ └── getStampingCategoryName.ts │ │ ├── styles │ │ │ └── colorsForEyeCacth.ts │ │ ├── buttonStatus.ts │ │ ├── formatting.ts │ │ ├── initialDate.ts │ │ ├── navigator.ts │ │ └── sleep.ts │ └── lib └── middleware.ts
🚀まとめ
Next.js固有のエラーに悩まされることは減りましたが、入力の制限（出勤・退勤・休憩・休憩戻）やGoogleMapを使用した実装、レスポンシブ対応、社員の一括登録などに時間がかかり、当初の目標であった８月中のリリースはできませんでした。9月中旬のリリースを目標に作業を進めます。
←ホームに戻る