FAQのデザイン

src/app/faq/page.module.scss

@@ -1,3 +1,43 @@
+@use 'src/app/variables';
+@mixin box-shadow($x, $y, $blur, $color) {
+  box-shadow: $x $y $blur $color;
+}
+
+@media (max-width: variables.$tablet-width) {
+  .head {
+    font-size: 1.5rem; // 24px
+  }
+
+  .contents {
+    padding: 20px;
+  }
+}
+
+@media (min-width: variables.$tablet-width) {
+  .head {
+    font-size: 2.5rem; // 40px
+  }
+
+  .contents {
+    padding: 40px;
+    max-width: variables.$pages-max-width;
+  }
+}
+
+.head {
+  font-weight: normal;
+  border-bottom: 1px solid black;
+}
+
 .container {
+  display: flex;
+  flex-direction: column;
+  background-color: variables.$background-color;
   padding-top: 72px;
+}
+
+.contents {
+  margin: 40px auto;
+  background-color: #ffffff;
+  box-shadow: 2px 2px 4px gray;
 }

src/app/faq/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import styles from './page.module.scss';
 import { Breadcrumb } from '@/components/Breadcrumb';
 import { HeroImage } from '@/components/HeroImage';
+import { QAComponent } from '@/components/QAComponent';
 
 export const metadata: Metadata = {
   title: 'FAQ',
@@ -12,71 +13,56 @@ export const metadata: Metadata = {
 export default function Faq() {
   return (
     <div className={styles.container}>
-      <HeroImage type='default' title='よくある質問' />
+      <HeroImage type='default' title='よくある質問' blur={true} />
       <Breadcrumb
         items={[
           { title: 'Top', href: '/' },
-          { title: 'FAQ', href: '/faq' },
+          { title: 'よくある質問', href: '/faq' },
         ]}
       />
-      <h1>よくある質問</h1>
-      <p>
-        もしほかにご質問があれば
-        <a href='https://twitter.com/Maximum03400346' target='_blank'>
-          X(旧Twitter)
-        </a>
-        のDMなどで気軽に聞いてください！
-      </p>
-      <p>Q. プログラミング初心者なんですが、大丈夫ですか？ </p>
-      <p>
-        A.
-        Maximumではプログラミングの初歩を学ぶ初心者向け講習会を定期的に行っていますので、そちらに参加していただければ問題ありません！
-      </p>
-      <p>Q. 時間が取れないのですが、大丈夫ですか？</p>
-      <p>
-        A.
-        会員が一同に会する機会は多くなく、連絡は基本的にDiscordで行っています。そのため、講習会に毎回参加することはできなくても、コミュニケーションを取って遅れを取り戻すことができます。
-      </p>
-      <p>Q. 活動の成果は？</p>
-      {/* 
-        TODO: Achievementの名前、後で決める。+ ref:https://github.com/saitamau-maximum/public-website/pull/25 
-      */}
-      <p>A. 上のAchievementsページから過去の成績をご覧ください！</p>
-      <p>Q. 活動内容を教えてください！ </p>
-      <p>
-        A.
-        競技プログラミングやWeb制作・Webパフォーマンスチューニングなどを行っています！詳細は上のAboutページをご覧ください！
-      </p>
-      <p>Q. 会費はいくらかかるのでしょうか？ </p>
-      <p>
-        A. 月額 250 円で、入会時点での残りの今年度の活動月数分を一括徴収します。
-        例えば、 4 月に入会した場合は 12 ヶ月分の 3,000 円、 5
-        月に入会した場合は 11 ヶ月分の 2,750 円、というようになります。
-      </p>
-      <p>Q. 情報工学科じゃないけれど入れる？ </p>
-      <p>
-        A.
-        独習がメインな部分もあり、他のメンバーと大きな差はないようです。（実は情報工学科が半数以下の年もあります）
-        基本、入部者は歓迎するので興味があればぜひお声かけください！
-      </p>
-      <p>Q. どうやって練習をしているの？ </p>
-      <p>
-        A.
-        AtCoderという毎週末に競技プログラミングコンテストを開催している企業があるので、主にそこの問題を解きます。
-        まず&quot;AtCoder Beginner
-        Contest&quot;に参加して競技プログラミングに慣れましょう。
-        Web研では基礎を一通り講習した後で対価の過去問を使った実践演習を主に行っています！
-      </p>
-      <p>Q. 使う言語は？ </p>
-      <p>
-        A. 基本的には独習となるため、特に言語の強制などはしていません。
-        ですが、講習で主に用いるのは、C++やHTML/CSS/JavaScriptという言語で、これを推奨しています。
-      </p>
-      <p>Q. 人数はどのくらい？ </p>
-      <p>
-        A.
-        2023年度の人数は30人弱でした。女子のメンバーもいます。学部学科・男女関係なく歓迎しています！
-      </p>
+      <main className={styles.contents}>
+        <span className={styles.head}>よくある質問</span>
+        <QAComponent
+          question='FAQに載ってないことはどこで聞けますか?'
+          answer='もしほかにご質問があればX(旧Twitter)のDMなどで気軽に聞いてください！'
+        />
+        <QAComponent
+          question='プログラミング初心者なんですが、大丈夫ですか？'
+          answer='Maximumではプログラミングの初歩を学ぶ初心者向け講習会を定期的に行っていますので、そちらに参加していただければ問題ありません！'
+        />
+        <QAComponent
+          question='時間が取れないのですが、大丈夫ですか？'
+          answer='会員が一同に会する機会は多くなく、連絡は基本的にDiscordで行っています。そのため、講習会に毎回参加することはできなくても、コミュニケーションを取って遅れを取り戻すことができます。'
+        />
+        <QAComponent
+          question='活動の成果は？'
+          answer='上のAchievementsページから過去の成績をご覧ください！'
+        />
+        <QAComponent
+          question='活動内容を教えてください！'
+          answer='競技プログラミングやWeb制作・Webパフォーマンスチューニングなどを行っています！詳細は上のAboutページをご覧ください！'
+        />
+        <QAComponent
+          question='会費はいくらかかるのでしょうか？'
+          answer='月額250円で、入会時点での残りの年度の活動月数分を一括徴収します。例えば、4月に入会した場合は12ヶ月分の3,000円、5月に入会した場合は11ヶ月分の2,750円、というようになります。'
+        />
+        <QAComponent
+          question='情報工学科じゃないけれど入れる？'
+          answer='独習がメインな部分もあり、他のメンバーと大きな差はないようです。（実は情報工学科が半数以下の年もあります）基本、入部者は歓迎するので興味があればぜひお声かけください！'
+        />
+        <QAComponent
+          question='どうやって練習をしているの？'
+          answer='AtCoderという毎週末に競技プログラミングコンテストを開催している企業があるので、主にそこの問題を解きます。まず"AtCoder Beginner Contest"に参加して競技プログラミングに慣れましょう。Web研では基礎を一通り講習した後で対価の過去問を使った実践演習を主に行っています！'
+        />
+        <QAComponent
+          question='使う言語は？'
+          answer='基本的には独習となるため、特に言語の強制などはしていません。ですが、講習で主に用いるのは、C++やHTML/CSS/JavaScriptという言語で、これを推奨しています。'
+        />
+        <QAComponent
+          question='人数はどのくらい？'
+          answer='2023年度の人数は30人弱でした。女子のメンバーもいます。学部学科・男女関係なく歓迎しています！'
+        />
+      </main>
     </div>
   );
 }

src/components/QAComponent/QAComponent.module.scss

@@ -0,0 +1,47 @@
+@use 'src/app/variables';
+@mixin box-shadow($x, $y, $blur, $color) {
+  box-shadow: $x $y $blur $color;
+}
+
+.QAcontainer {
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.chatMessageQuestion {
+  @include box-shadow(0px, 4px, 10px, rgba(0, 0, 0, 0.1));
+  display: flex;
+  width: fit-content;
+  padding: 1em; 
+  background-color: #f1f1f1;
+  border-radius: 12px;
+  .chara {
+    float: left;
+    font-size: 32px;
+    color: #439154;
+    margin: 0 40px 0 0;
+  }
+  p {
+    margin: auto 0;
+  }
+}
+
+.chatMessageAnswer {
+  @include box-shadow(0px, 4px, 10px, rgba(0, 0, 0, 0.1));
+  display: flex;
+  width: fit-content;
+  padding: 1em; 
+  background-color: #f1f1f1;
+  border-radius: 12px;
+  margin: 16px 0px;
+  .chara {
+    float: left;
+    font-size: 32px;
+    color: #E6007E;
+    margin: 0 40px 0 0;
+  }
+  p {
+    margin: auto 0;
+  }
+}
+

src/components/QAComponent/QAComponent.stories.tsx

@@ -0,0 +1,18 @@
+import { StoryFn, Meta } from '@storybook/react';
+import React from 'react';
+import { QAComponent } from './QAComponent';
+
+export default {
+  title: 'Components/QAComponent',
+  component: QAComponent,
+} as Meta;
+
+const Template: StoryFn<typeof QAComponent> = (args) => (
+  <QAComponent {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  question: 'QQQQQQQQQQQQQQQQQQQQQQQQQ',
+  answer: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+};

src/components/QAComponent/QAComponent.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import styles from './QAComponent.module.scss';
+
+interface QAItem {
+  question: string;
+  answer: string;
+}
+
+export const QAComponent: React.FC<QAItem> = ({ question, answer }) => {
+  return (
+    <div className={styles.QAcontainer}>
+      <div className={styles.chatMessageQuestion}>
+        <div className={styles.chara}>Q</div>
+        <p>{question}</p>
+      </div>
+      <div className={styles.chatMessageAnswer}>
+        <div className={styles.chara}>A</div>
+        <p>{answer}</p>
+      </div>
+    </div>
+  );
+};

src/components/QAComponent/index.ts

@@ -0,0 +1 @@
+export * from './QAComponent';