Fixed some error

ch00z00 · ch00z00 · commit 4c248d2de7c6 · 2025-06-17T00:34:23.000+09:00
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,16 +1,16 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import ComplexesPage from './pages/ComplexesPage';
-// import ComplexDetailPage from './pages/ComplexDetailPage'; // 将来的に
 import ComplexFormPage from './pages/ComplexFormPage';
+// import ComplexDetailPage from './pages/ComplexDetailPage'; // 将来的に
 // import ComplexFormPage from './pages/ComplexFormPage'; // 将来的に
 
 function App() {
   return (
     <Router>
       <Routes>
         <Route path="/" element={<ComplexesPage />} />
-        {/* 他のルートもここに追加 */}
         <Route path="/complexes/new" element={<ComplexFormPage />} />
+        {/* 他のルートもここに追加 */}
         {/* <Route path="/complexes/:id/edit" element={<ComplexFormPage mode="edit" />} /> */}
         {/* <Route path="/complexes/:id" element={<ComplexDetailPage />} /> */}
       </Routes>
diff --git a/frontend/src/components/common/atoms/Input.tsx b/frontend/src/components/common/atoms/Input.tsx
@@ -1,4 +1,4 @@
-import React, { InputHTMLAttributes, forwardRef } from 'react';
+import { type InputHTMLAttributes, forwardRef } from 'react';
 import styled from 'styled-components';
 
 const StyledInput = styled.input`
@@ -20,7 +20,10 @@ const StyledInput = styled.input`
 `;
 
 const Input = forwardRef<
+  // TODO: Remove eslint-disable-next-line after refactoring
+  // eslint-disable-next-line no-undef
   HTMLInputElement,
+  // eslint-disable-next-line no-undef
   InputHTMLAttributes<HTMLInputElement>
 >((props, ref) => <StyledInput {...props} ref={ref} />);
 
diff --git a/frontend/src/components/common/atoms/Textarea.tsx b/frontend/src/components/common/atoms/Textarea.tsx
@@ -1,4 +1,4 @@
-import React, { TextareaHTMLAttributes, forwardRef } from 'react';
+import { type TextareaHTMLAttributes, forwardRef } from 'react';
 import styled from 'styled-components';
 
 const StyledTextarea = styled.textarea`
@@ -21,7 +21,10 @@ const StyledTextarea = styled.textarea`
 `;
 
 const Textarea = forwardRef<
+  // TODO: Remove eslint-disable-next-line after refactoring
+  // eslint-disable-next-line no-undef
   HTMLTextAreaElement,
+  // eslint-disable-next-line no-undef
   TextareaHTMLAttributes<HTMLTextAreaElement>
 >((props, ref) => <StyledTextarea {...props} ref={ref} />);
 
diff --git a/frontend/src/components/common/molecules/FormGroup.tsx b/frontend/src/components/common/molecules/FormGroup.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import styled from 'styled-components';
 
 const FormGroupWrapper = styled.div`
diff --git a/frontend/src/components/common/molecules/Header.tsx b/frontend/src/components/common/molecules/Header.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
 import Button from '../atoms/Button';
-import { useNavigate } from 'react-router-dom';
+// import { useNavigate } from 'react-router-dom';
 
 const HeaderWrapper = styled.header`
   background-color: rgba(255, 255, 255, 0.8);
@@ -41,7 +41,7 @@ interface HeaderProps {
 }
 
 const Header: React.FC<HeaderProps> = ({ onAddNewComplex }) => {
-  const navigate = useNavigate();
+  // const navigate = useNavigate();
   const { t, i18n } = useTranslation();
 
   const changeLanguage = (lng: string) => {
@@ -78,11 +78,10 @@ const Header: React.FC<HeaderProps> = ({ onAddNewComplex }) => {
             </Button>
           </LanguageSwitcher>
         </div>
-        {/* 新規登録ボタンはComplexesPageでのみ表示するため、Headerからは削除 */}
-          <Button variant="primary" size="small" onClick={onAddNewComplex}>
-            + {t('addNewComplexButton')}
-          </Button>
-        </div>
+        {/* TODO: 新規登録ボタンはComplexesPageでのみ表示するため、Headerからは削除 */}
+        <Button variant="primary" size="small" onClick={onAddNewComplex}>
+          + {t('addNewComplexButton')}
+        </Button>
       </NavContainer>
     </HeaderWrapper>
   );
diff --git a/frontend/src/components/complexes/organisms/NoComplexesMessage.tsx b/frontend/src/components/complexes/organisms/NoComplexesMessage.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
 import Button from '../../common/atoms/Button';
-import { useNavigate } from 'react-router-dom';
+// import { useNavigate } from 'react-router-dom';
 
 const MessageWrapper = styled.div`
   margin-top: 3rem; /* 48px */
@@ -43,7 +43,7 @@ interface NoComplexesMessageProps {
 const NoComplexesMessage: React.FC<NoComplexesMessageProps> = ({
   onAddNewComplex,
 }) => {
-  const navigate = useNavigate();
+  // const navigate = useNavigate();
   const { t } = useTranslation();
   return (
     <MessageWrapper>
@@ -66,7 +66,7 @@ const NoComplexesMessage: React.FC<NoComplexesMessageProps> = ({
       <Title>{t('noComplexesTitle')}</Title>
       <Subtitle>{t('noComplexesSubtitle')}</Subtitle>
       <ButtonWrapper>
-        <Button variant="primary" onClick={() => navigate('/complexes/new')}>
+        <Button variant="primary" onClick={onAddNewComplex}>
           {t('registerComplexButton')}
         </Button>
       </ButtonWrapper>
diff --git a/frontend/src/pages/ComplexFormPage.tsx b/frontend/src/pages/ComplexFormPage.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { useForm, SubmitHandler } from 'react-hook-form';
+import { useForm, type SubmitHandler } from 'react-hook-form';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -11,7 +11,7 @@ import Input from '../components/common/atoms/Input';
 import Textarea from '../components/common/atoms/Textarea';
 import FormGroup from '../components/common/molecules/FormGroup';
 
-import type { ComplexInput } from '../types/complex';
+import type { Complex, ComplexInput } from '../types/complex';
 import { createComplex } from '../services/api';
 
 const PageWrapper = styled.div`
@@ -65,10 +65,12 @@ const ComplexFormPage: React.FC = () => {
     mutationFn: createComplex,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['complexes'] }); // コンプレックス一覧キャッシュを無効化
+      // eslint-disable-next-line no-undef
       alert(t('complexForm.successMessage')); // 成功メッセージ
       navigate('/'); // 一覧ページへ遷移
     },
     onError: (error) => {
+      // eslint-disable-next-line no-undef
       alert(`${t('complexForm.errorMessage')}: ${error.message}`); // エラーメッセージ
     },
   });
@@ -117,16 +119,16 @@ const ComplexFormPage: React.FC = () => {
             <Button
               variant="secondary"
               onClick={handleCancel}
-              disabled={createComplexMutation.isLoading}
+              disabled={createComplexMutation.isPending}
             >
               {t('complexForm.cancelButton')}
             </Button>
             <Button
               variant="primary"
               type="submit"
-              disabled={createComplexMutation.isLoading}
+              disabled={createComplexMutation.isPending}
             >
-              {createComplexMutation.isLoading
+              {createComplexMutation.isPending
                 ? t('complexForm.savingButton')
                 : t('complexForm.submitButton')}
             </Button>
diff --git a/frontend/src/pages/ComplexesPage.tsx b/frontend/src/pages/ComplexesPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
@@ -42,7 +42,7 @@ const PageSubtitle = styled.p`
 `;
 
 import Button from '../components/common/atoms/Button'; // ボタンコンポーネントをインポート
-import { fetchComplexes, deleteComplex } from '../services/api'; // 実際のAPI関数をインポート
+import { fetchComplexes, deleteComplex } from '../services/api';
 
 const AddButtonWrapper = styled.div`
   text-align: center;
@@ -67,10 +67,12 @@ const ComplexesPage: React.FC = () => {
 
   // 削除ミューテーション
   const deleteMutation = useMutation<void, Error, number>({
-    mutationFn: deleteComplexAPI,
+    mutationFn: deleteComplex,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['complexes'] }); // キャッシュを無効化して再フェッチ      
+      queryClient.invalidateQueries({ queryKey: ['complexes'] }); // キャッシュを無効化して再フェッチ
+      // eslint-disable-next-line no-undef
       alert(t('deleteConfirmation', { id: '' }).replace('{{id}} ', '')); // 実際には削除されたIDを渡す
+    },
     onError: (err) => {
       // eslint-disable-next-line no-undef
       alert(`削除に失敗しました: ${err.message}`);
@@ -85,12 +87,14 @@ const ComplexesPage: React.FC = () => {
   const handleViewGoals = (id: number) => {
     console.log(`目標を見る/設定: Complex ID ${id}`);
     // TODO: React Routerを使用して目標設定ページへ遷移
+    // eslint-disable-next-line no-undef
     alert(t('viewSetGoalsButton') + ` (ID: ${id}) 画面へ（未実装）`);
   };
 
   const handleEditComplex = (id: number) => {
     console.log(`編集: Complex ID ${id}`);
     // TODO: React Routerを使用して編集ページへ遷移
+    // eslint-disable-next-line no-undef
     alert(t('editButton') + ` (ID: ${id}) 画面へ（未実装）`);
   };
 
@@ -106,7 +110,10 @@ const ComplexesPage: React.FC = () => {
   // const [showDummyData, setShowDummyData] = useState(false);
   // useEffect(() => { ... }, [isLoading, error, complexes]);
 
-  if (isLoading && !showDummyData)
+  if (
+    isLoading
+    // && !showDummyData
+  )
     return (
       <PageWrapper>
         <MainContent>
@@ -127,7 +134,7 @@ const ComplexesPage: React.FC = () => {
     );
 
   return (
-    <PageWrapper>      
+    <PageWrapper>
       <Header onAddNewComplex={handleAddNewComplex} />
       <MainContent>
         <PageTitleWrapper>
@@ -136,9 +143,9 @@ const ComplexesPage: React.FC = () => {
         </PageTitleWrapper>
         {/* 新規登録ボタンをページコンテンツ内に追加 */}
         <AddButtonWrapper>
-           <Button variant="primary" onClick={handleAddNewComplex}>
-             + {t('addNewComplexButton')}
-           </Button>
+          <Button variant="primary" onClick={handleAddNewComplex}>
+            + {t('addNewComplexButton')}
+          </Button>
         </AddButtonWrapper>
         <ComplexList
           complexes={complexes} // TanStack Queryがデータを管理
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
@@ -10,17 +10,19 @@ const getAuthHeaders = () => ({
   'X-User-ID': DUMMY_USER_ID,
 });
 
-// コンプレックス一覧取得
+/* コンプレックス一覧取得 */
 export const fetchComplexes = async (): Promise<Complex[]> => {
+  // eslint-disable-next-line no-undef
   const response = await fetch(`${API_BASE_URL}/complexes`, {
     headers: getAuthHeaders(),
   });
   if (!response.ok) throw new Error('Failed to fetch complexes');
   return response.json();
 };
 
-// 新しいコンプレックスを登録
+/* 新しいコンプレックスを登録 */
 export const createComplex = async (data: ComplexInput): Promise<Complex> => {
+  // eslint-disable-next-line no-undef
   const response = await fetch(`${API_BASE_URL}/complexes`, {
     method: 'POST',
     headers: getAuthHeaders(),
@@ -32,6 +34,7 @@ export const createComplex = async (data: ComplexInput): Promise<Complex> => {
 
 // コンプレックス削除 (ComplexesPage.tsxで使用していたダミー関数を置き換え)
 export const deleteComplex = async (id: number): Promise<void> => {
+  // eslint-disable-next-line no-undef
   const response = await fetch(`${API_BASE_URL}/complexes/${id}`, {
     method: 'DELETE',
     headers: getAuthHeaders(),
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -1,4 +1,7 @@
 {
+  "compilerOptions": {
+    "lib": ["DOM", "ES2020"]
+  },
   "files": [],
   "references": [
     { "path": "./tsconfig.app.json" },

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import React, { ReactNode } from 'react';`
	`1`	`+import React, { type ReactNode } from 'react';`
`2`	`2`	`import styled from 'styled-components';`
`3`	`3`
`4`	`4`	const FormGroupWrapper = styled.div`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,7 @@`
`1`	`1`	`{`
	`2`	`+ "compilerOptions": {`
	`3`	`+ "lib": ["DOM", "ES2020"]`
	`4`	`+ },`
`2`	`5`	`"files": [],`
`3`	`6`	`"references": [`
`4`	`7`	`{ "path": "./tsconfig.app.json" },`