Added footer

Author: ch00z00

frontend/src/components/common/molecules/Footer.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const FooterWrapper = styled.footer`
+  position: fixed;
+  bottom: 1rem;
+  left: 1rem;
+  z-index: 1000;
+  width: calc(100% - 2rem);
+`;
+
+const FooterContentContainer = styled.div`
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0 2vw;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 3rem;
+`;
+
+const AuthorName = styled.p`
+  font-size: 0.875rem; /* 14px */
+  font-weight: 500;
+`;
+
+const ComplexCount = styled.p`
+  font-size: 0.875rem; /* 14px */
+  font-weight: 500;
+`;
+
+interface FooterProps {
+  totalComplexes: number;
+}
+
+const Footer: React.FC<FooterProps> = ({ totalComplexes }) => {
+  return (
+    <FooterWrapper>
+      <FooterContentContainer>
+        <AuthorName>Yusuke Seki</AuthorName>
+        {totalComplexes > 0 && <ComplexCount>{totalComplexes}</ComplexCount>}
+      </FooterContentContainer>
+    </FooterWrapper>
+  );
+};
+
+export default Footer;

frontend/src/components/common/molecules/Header.tsx

@@ -5,21 +5,19 @@ import Button from '../atoms/Button';
 // import { useNavigate } from 'react-router-dom';
 
 const HeaderWrapper = styled.header`
-  background-color: rgba(210, 213, 204, 0.6);
-  backdrop-filter: blur(10px);
+  background-color: transparent;
   position: fixed;
   top: 1rem;
   left: 1rem;
   border-radius: 2rem;
   z-index: 1000;
   width: calc(100% - 2rem);
-  box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
 `;
 
 const NavContainer = styled.div`
   max-width: 100%;
   margin: 0 auto;
-  padding: 0 2rem;
+  padding: 0 2vw;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -80,7 +78,7 @@ const Header: React.FC<HeaderProps> = ({ onAddNewComplex }) => {
             </Button>
           </LanguageSwitcher>
         </div>
-        <Button variant="primary" size="small" onClick={onAddNewComplex}>
+        <Button variant="primary" size="medium" onClick={onAddNewComplex}>
           + {t('addNewComplexButton')}
         </Button>
       </NavContainer>

frontend/src/pages/ComplexesPage.tsx

@@ -3,14 +3,14 @@ import styled from 'styled-components';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import Header from '../components/common/molecules/Header'; // Headerは残す
-// import Footer from '../components/footer/Footer';
+import Header from '../components/common/molecules/Header';
+import Footer from '../components/common/molecules/Footer';
 import ComplexList from '../components/complexes/organisms/ComplexList';
 import type { Complex } from '../types/complex';
 
 const PageWrapper = styled.div`
   display: flex;
-  padding-top: 8rem;
+  padding-top: 8rem 0 5rem;
   flex-direction: column;
   min-height: 100vh;
 `;
@@ -19,37 +19,31 @@ const MainContent = styled.main`
   flex-grow: 1;
   max-width: 1200px;
   margin: 0 auto;
-  padding: 2rem 1rem; /* 32px 16px */
+  padding: 2rem 1rem;
   width: 100%;
 `;
 
 const PageTitleWrapper = styled.div`
-  margin-bottom: 2.5rem; /* 40px */
+  margin-bottom: 2.5rem;
   text-align: center;
 `;
 
 const PageTitle = styled.h2`
-  font-size: 2.25rem; /* 36px */
+  font-size: 2.25rem;
   font-weight: 700;
   color: #1d1d1f;
-  margin-bottom: 0.5rem; /* 8px */
+  margin-bottom: 0.5rem;
 `;
 
 const PageSubtitle = styled.p`
-  font-size: 1.125rem; /* 18px */
-  color: #58585b; /* Apple風のサブテキストカラー */
+  font-size: 1.125rem;
+  color: #58585b;
   max-width: 600px;
   margin: 0 auto;
 `;
 
-import Button from '../components/common/atoms/Button'; // ボタンコンポーネントをインポート
 import { fetchComplexes, deleteComplex } from '../services/api';
 
-const AddButtonWrapper = styled.div`
-  text-align: center;
-  margin-top: 2rem; /* 32px */
-`;
-
 const ComplexesPage: React.FC = () => {
   const queryClient = useQueryClient();
   const { t } = useTranslation();
@@ -138,21 +132,17 @@ const ComplexesPage: React.FC = () => {
           <PageTitle>{t('complexesPageTitle')}</PageTitle>
           <PageSubtitle>{t('complexesPageSubtitle')}</PageSubtitle>
         </PageTitleWrapper>
-        {/* 新規登録ボタンをページコンテンツ内に追加 */}
-        <AddButtonWrapper>
-          <Button variant="primary" onClick={handleAddNewComplex}>
-            + {t('addNewComplexButton')}
-          </Button>
-        </AddButtonWrapper>
-        <ComplexList
-          complexes={complexes} // TanStack Queryがデータを管理
-          onViewGoals={handleViewGoals}
-          onEdit={handleEditComplex}
-          onDelete={handleDeleteComplex}
-          onAddNewComplex={handleAddNewComplex}
-        />
+        {!isLoading && !error && (
+          <ComplexList
+            complexes={complexes}
+            onViewGoals={handleViewGoals}
+            onEdit={handleEditComplex}
+            onDelete={handleDeleteComplex}
+            onAddNewComplex={handleAddNewComplex}
+          />
+        )}
       </MainContent>
-      {/* <Footer /> */} {/* フッターは必要に応じて追加 */}
+      <Footer totalComplexes={complexes.length} />
     </PageWrapper>
   );
 };