Recoil を Zustand に置き換えるリファクタリング

Makefile

@@ -52,8 +52,14 @@ setup: ## 開発環境をセットアップ (build > run-db > run)
 	@echo "$(GREEN)--- Setup completed! ---$(RESET)"
 
 ##@ 基本操作
+fix-perms: ## ボリュームの所有権を一般ユーザー(1000)に変更
+	@echo "$(GREEN)--- Fixing volume permissions... ---$(RESET)"
+	docker compose run --rm --user root view chown -R 1000:1000 /app/.pnpm-store
+	docker compose run --rm --user root api chown -R 1000:1000 /go/cache /go/pkg/mod
+
 build: ## アプリコンテナのイメージをビルド
 	docker compose build
+	make fix-perms
 	docker compose run --rm view pnpm install
 
 build-stg: ## ステージング環境ビルド
@@ -71,7 +77,9 @@ build-run: ## ビルドと起動を同時実行
 
 run-rebuild: ## ボリューム削除→ビルド→起動
 	docker compose down -v
-	docker compose up --build
+	docker compose build
+	make fix-perms
+	docker compose up -d
 
 restart: ## アプリコンテナの再起動 (DBは維持)
 	@echo "$(GREEN)--- Restarting App Containers ---$(RESET)"

view/next-project/README.md

@@ -5,9 +5,7 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 First, run the development server:
 
 ```bash
-npm run dev
-# or
-yarn dev
+pnpm dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

view/next-project/package.json

@@ -44,10 +44,9 @@
     "react-pdf": "^9.2.1",
     "react-router-dom": "^6.0.2",
     "react-select": "^5.7.3",
-    "recoil": "^0.7.6",
-    "recoil-persist": "^4.2.0",
     "swr": "^2.3.0",
-    "tailwindcss": "^3.1.6"
+    "tailwindcss": "^3.1.6",
+    "zustand": "^5.0.10"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.4.0",

view/next-project/src/components/auth/SignInView.tsx

@@ -1,9 +1,8 @@
 import Router from 'next/router';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { useRecoilState } from 'recoil';
 
-import { authAtom, userAtom } from '@/store/atoms';
+import { useAuthStore, useUserStore } from '@/store';
 import { get_with_token } from '@api/api_methods';
 import { signIn } from '@api/signIn';
 import LoadingButton from '@components/common/LoadingButton';
@@ -14,8 +13,8 @@ import { PrimaryButton } from '../common';
 export default function SignInView() {
   // ログイン中フラグ
   const [isSignInNow, setIsSignInNow] = useState<boolean>(false);
-  const [, setAuth] = useRecoilState(authAtom);
-  const [, setUser] = useRecoilState(userAtom);
+  const setAuth = useAuthStore((state) => state.setAuth);
+  const setUser = useUserStore((state) => state.setUser);
 
   const {
     register,

view/next-project/src/components/auth/SignUpView.tsx

@@ -1,10 +1,9 @@
 import Router from 'next/router';
 import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { useRecoilState } from 'recoil';
 
 import { BUREAUS } from '@/constants/bureaus';
-import { authAtom, userAtom } from '@/store/atoms';
+import { useAuthStore, useUserStore } from '@/store';
 import { get } from '@api/api_methods';
 import { signUp } from '@api/signUp';
 import { post } from '@api/user';
@@ -14,8 +13,8 @@ import { SignUp, User } from '@type/common';
 import { PrimaryButton } from '../common';
 
 export default function SignUpView() {
-  const [, setAuth] = useRecoilState(authAtom);
-  const [, setUser] = useRecoilState(userAtom);
+  const setAuth = useAuthStore((state) => state.setAuth);
+  const setUser = useUserStore((state) => state.setUser);
 
   // 新規登録中フラグ
   const [isSignUpNow, setIsSignUpNow] = useState<boolean>(false);

view/next-project/src/components/common/ChakraUIDropdown.tsx

@@ -1,9 +1,8 @@
 import { Button, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
 import React from 'react';
 import { RiArrowDropDownLine } from 'react-icons/ri';
-import { useRecoilValue } from 'recoil';
 
-import { userAtom } from '@/store/atoms';
+import { useUserStore } from '@/store';
 
 interface Props {
   title: string;
@@ -12,7 +11,7 @@ interface Props {
 }
 
 const Dropdown = (props: Props) => {
-  const user = useRecoilValue(userAtom);
+  const user = useUserStore((state) => state.user);
 
   return (
     <Menu>

view/next-project/src/components/common/Header/Header.tsx

@@ -2,30 +2,28 @@ import Image from 'next/image';
 import Router from 'next/router';
 import { AiOutlineMenu } from 'react-icons/ai';
 import { RiAccountCircleFill } from 'react-icons/ri';
-import { useRecoilState } from 'recoil';
 
-import { authAtom, userAtom } from '@/store/atoms';
+import { useAuthStore, useUserStore } from '@/store';
 import { del } from '@api/signOut';
 import { ChakraUIDropdown } from '@components/common';
-import { User } from '@type/common';
 
 import { HeaderProps } from './Header.type';
 
 const Header = (props: HeaderProps) => {
   const { onSideNavOpen } = props;
-  const [auth, setAuth] = useRecoilState(authAtom);
-  const [user, setUser] = useRecoilState(userAtom);
+  const { accessToken, setAuth } = useAuthStore();
+  const { user, resetUser } = useUserStore();
 
   const signOut = async () => {
     const signOutUrl: string = process.env.CSR_API_URI + '/mail_auth/signout';
-    const req = await del(signOutUrl, auth.accessToken);
+    const req = await del(signOutUrl, accessToken);
     const authData = {
       isSignIn: false,
       accessToken: '',
     };
     if (req.status === 200) {
       setAuth(authData);
-      setUser({} as User);
+      resetUser();
       Router.push('/');
     }
   };

view/next-project/src/components/create_purchase_report/usePurchaseReportForm.ts

@@ -1,16 +1,15 @@
 import { NextRouter } from 'next/router';
-import { useState, useEffect } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useEffect, useState } from 'react';
 
 import {
+  useGetBuyReportsId,
   useGetDivisionsUsers,
   useGetFestivalItemsUsers,
-  useGetBuyReportsId,
   usePostBuyReports,
   usePutBuyReportsId,
 } from '@/generated/hooks';
 import { DivisionOption, FestivalItemOption } from '@/generated/model';
-import { userAtom } from '@/store/atoms';
+import { useCurrentUser } from '@/store';
 
 import type { BuyReport, PostBuyReportsBody, PutBuyReportsIdBody } from '@/generated/model';
 
@@ -49,7 +48,7 @@ export const usePurchaseReportForm = (router: NextRouter) => {
   const reportId = reportIdParam ? Number(reportIdParam) : undefined;
   const isEditMode = from === 'purchase_report_list';
 
-  const user = useRecoilValue(userAtom);
+  const user = useCurrentUser();
   const [departments, setDepartments] = useState<DivisionOption[]>([]);
   const [uploadedFile, setUploadedFile] = useState<File | null>(null);
   const [festivalItems, setFestivalItems] = useState<FestivalItemOption[]>([]);