[WIP] メイン画面制作

.githooks/commit-msg.go

@@ -17,7 +17,7 @@ func main() {
 	}
 
 	commitMessage := string(input)
-	pattern := fmt.Sprintf("^(%s):\\s", strings.Join(allowedPrefixes, "|"))
+	pattern := fmt.Sprintf("^((%s):\\s|Merge)", strings.Join(allowedPrefixes, "|"))
 	re := regexp.MustCompile(pattern)
 
 	if !re.MatchString(commitMessage) {

.storybook/font.css

@@ -0,0 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
+
+html, body {
+  font-family: "Noto Sans JP";
+}

.storybook/preview.tsx

@@ -5,6 +5,7 @@ import { I18nextProvider } from 'react-i18next';
 import '../app/app.css';
 import "../app/i18n/config";
 import i18n from '../app/i18n/config';
+import './font.css';
 
 const preview: Preview = {
   parameters: {

app/app.css

@@ -1,11 +1,3 @@
-@import "tailwindcss";
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
-
-@theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
 :root {
   --main-text-color: #242525;
   --grey-text-color: #9D9F9F;
@@ -14,13 +6,17 @@
   --primery-color: #57B3E1;
 }
 
-html,
-body {
-  @apply bg-white dark:bg-gray-950;
+* {
+  margin: 0;
+  padding: 0;
+}
 
-  @media (prefers-color-scheme: dark) {
-    color-scheme: dark;
-  }
+html {
+  width: 100vw;
+  overflow-x: hidden;
+}
 
+html,
+body {
   font-family: "Noto Sans JP";
 }

app/components/ActivityCard/ActivityCard.tsx

@@ -1,6 +1,5 @@
-import './activity-card.css';
-import { useTranslation } from "react-i18next"
 import { LinkedButton } from '../LinkedButton/LinkedButton';
+import './activity-card.css';
 
 export interface ActivityCardProps {
   headerImage: string;
@@ -28,7 +27,6 @@ export const ActivityCard = ({
   url,
   ...props
 }: ActivityCardProps) => {
-  const { t } = useTranslation();
   const strFromData = formatDate(from);
   const strToData = to ? formatDate(to) : null;
 
@@ -59,7 +57,7 @@ export const ActivityCard = ({
           </div>
         </div>
         <div className="activity-button-container">
-          <LinkedButton url={url} label={t("common.detail")} style="outlined" />
+          <LinkedButton url={url} label={'detail'} style="outlined" />
         </div>
       </div>
     </div >

app/components/Footer/Footer.module.css

@@ -0,0 +1,59 @@
+footer {
+  width: 100vw;
+  background-color: #2972AD;
+}
+
+.container {
+  padding: 64px 10% 0 10%;
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  align-items: start;
+}
+
+.container.title {
+  flex-direction: column;
+  align-items: start;
+  justify-content: center;
+}
+
+.container .block {
+  display: flex;
+  align-items: start;
+  justify-content: center;
+  flex-direction: column;
+  width: 30%;
+}
+
+.container p, .copy {
+  color: var(--accent-color);
+  display: inline-block;
+  font-weight: lighter;
+  font-size: 24px;
+}
+
+.container a {
+  text-decoration: none;
+}
+
+.container ul {
+  width: 100%;
+  list-style: none;
+  padding-left: 0;
+}
+
+.container li::before {
+  content: "•";
+  display: inline-block;
+  width: 1em;
+  padding-top: 16px;
+  color: var(--accent-color);
+}
+
+.copy {
+  display: block;
+  padding-top: 40px;
+  text-align: center;
+  padding-bottom: 12px;
+  letter-spacing: 1px;
+}

app/components/Footer/Footer.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Footer } from './Footer';
+
+
+const meta = {
+  title: 'Common/Footer',
+  component: Footer,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Footer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

app/components/Footer/Footer.tsx

@@ -0,0 +1,63 @@
+import styles from './Footer.module.css';
+
+const sitemap: Record<string, string> = {
+  "ホームページ": "/",
+  "お知らせ": "/",
+  "活動報告": "/",
+  "技術ブログ": "/",
+  "": "",
+  "お問い合わせ": "/",
+}
+
+const aboutSite: Record<string, string> = {
+  "Webデザイン(Figma)": "https://www.figma.com/design/YWBtX9qhd0QKOTY4a2SEWx/Object%3CT%3E",
+  "ソースコード(Github)": "https://github.com/object-t/object-t-website",
+}
+
+const school: Record<string, string> = {
+  "学校ホームページ": "https://www.fca.ac.jp/",
+}
+
+const getList = (list: Record<string, string>) => {
+  return (
+    <ul>
+      {
+        Object.entries(list).map(([label, url]) => label ? (
+          <li key={label}>
+            <a href={url}>
+              <p>
+                {label}
+              </p>
+            </a>
+          </li>
+        ): <br key={''}/>)
+      }
+    </ul>
+  )
+}
+
+export const Footer = ({...props}) => {
+  return (
+    <footer {...props}>
+      <div className={`${styles.container} ${styles.title}`}>
+        <p>学生団体:Object&lt;T&gt;</p>
+        <p>所属: 福岡デザイン＆テクノロジー専門学校</p>
+      </div>
+      <div className={styles.container}>
+        <div className={styles.block}>
+          <p>サイトマップ</p>
+          {getList(sitemap)}
+        </div>
+        <div className={styles.block}>
+          <p>本サイトについて</p>
+          {getList(aboutSite)}
+        </div>
+        <div className={styles.block}>
+          <p>学校関連</p>
+          {getList(school)}
+        </div>
+      </div>
+      <p className={styles.copy}>&copy; 学生団体 Object&lt;T&gt;. All rights reserved.</p>
+    </footer>
+  );
+};

app/components/Header/Header.stories.ts

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
 
 import { Header } from './Header';
 
@@ -12,22 +11,30 @@ const meta = {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
-  args: {
-    onLogin: fn(),
-    onLogout: fn(),
-    onCreateAccount: fn(),
-  },
 } satisfies Meta<typeof Header>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const LoggedIn: Story = {
+export const Default: Story = {
   args: {
-    user: {
-      name: 'Jane Doe',
-    },
+    headers: [
+      {
+        'label': "HOME",
+        'to': "#home"
+      },
+      {
+        'label': "MEMBER",
+        'to': "#member"
+      },
+      {
+        'label': "PRODUCT",
+        'to': "#product"
+      },
+      {
+        'label': "BLOG",
+        'to': "#blog"
+      }
+    ]
   },
 };
-
-export const LoggedOut: Story = {};