[Add] semester filter

Author: Axafy5479

src/app/components/FilterUI/FilterComponents/Semester.tsx

@@ -0,0 +1,79 @@
+/*
+ * セメスターフィルターのコンポーネント
+ */
+
+"use client";
+import React from "react";
+import { Semester } from "@/app/type";
+import { FlagButton } from "../UI/FlagButton";
+
+/**
+ * セメスターフィルターのプロパティ
+ */
+interface SemesterProp {
+  selectedSemesters?: Semester[]; // 選択されているセメスター
+  setSelectedSemesters: (semesters: Semester[]) => void;
+}
+
+/**
+ * セメスターフィルターのコンポーネント
+ * @param prop セメスターフィルターのプロパティ
+ * @returns コンポーネント
+ */
+export const SemestersCheckbox: React.FC<SemesterProp> = (
+  prop: SemesterProp,
+) => {
+  const selectedSemesters = prop.selectedSemesters ?? [];
+
+  // ボタンがクリックされたときの関数
+  const onClick = (semester: Semester) => {
+    if (selectedSemesters.includes(semester)) {
+      prop.setSelectedSemesters(
+        selectedSemesters.filter((s) => s !== semester),
+      );
+    } else {
+      prop.setSelectedSemesters([...selectedSemesters, semester]);
+    }
+  };
+
+  return (
+    <div className="grid grid-cols-4 gap-2">
+      <FlagButton
+        label={"S1"}
+        isSelected={selectedSemesters.includes("S1")}
+        onClick={() => onClick("S1")}
+        className="aspect-square"
+      />
+      <FlagButton
+        label={"S2"}
+        isSelected={selectedSemesters.includes("S2")}
+        onClick={() => onClick("S2")}
+        className="aspect-square"
+      />
+      <FlagButton
+        label={"A1"}
+        isSelected={selectedSemesters.includes("A1")}
+        onClick={() => onClick("A1")}
+        className="aspect-square"
+      />
+      <FlagButton
+        label={"A2"}
+        isSelected={selectedSemesters.includes("A2")}
+        onClick={() => onClick("A2")}
+        className="aspect-square"
+      />
+      <FlagButton
+        label={"S"}
+        isSelected={selectedSemesters.includes("S")}
+        onClick={() => onClick("S")}
+        className="col-span-2"
+      />
+      <FlagButton
+        label={"A"}
+        isSelected={selectedSemesters.includes("A")}
+        onClick={() => onClick("A")}
+        className="col-span-2"
+      />
+    </div>
+  );
+};

src/app/components/FilterUI/FilterUI.tsx

@@ -0,0 +1,44 @@
+/*
+ * 全てのフィルターを表示するコンポーネント
+ */
+
+"use client";
+import { useState } from "react";
+import { ClassType, Evaluation, Semester } from "@/app/type";
+import { SemestersCheckbox } from "./FilterComponents/Semester";
+import { FilterCard } from "./UI/FilterCard";
+
+/**
+ *  フィルタの型定義
+ */
+type Filter = {
+  isFreewordForSyllabusDetail?: boolean; // フリーワード検索
+  semesters?: Semester[]; // セメスター
+  evaluation_included?: Evaluation[]; // 含めたい評価方法
+  evaluation_excluded?: Evaluation[]; // 除外したい評価方法
+  classTypes?: ClassType[]; // 種別
+  showRegistered?: boolean; // 履修登録済みの授業を表示する
+  showNotRegistered?: boolean; // 未履修の授業を表示する
+};
+
+/**
+ *  フィルタUI
+ * @returns フィルタUI
+ */
+export const FilterUI: React.FC = () => {
+  // 現在のフィルター
+  const [filter, setFilter] = useState<Filter>({});
+
+  return (
+    <div className="flex gap-8 flex-wrap">
+      <FilterCard title={"セメスター"}>
+        <SemestersCheckbox
+          selectedSemesters={filter.semesters}
+          setSelectedSemesters={(semesters: Semester[]) =>
+            setFilter({ ...filter, semesters })
+          }
+        />
+      </FilterCard>
+    </div>
+  );
+};

src/app/components/FilterUI/Sample/page.tsx

@@ -0,0 +1,11 @@
+/*
+ * FilterUIのサンプルページ
+ */
+
+import { FilterUI } from "../FilterUI";
+
+const FilterUISample: React.FC = () => {
+  return <FilterUI />;
+};
+
+export default FilterUISample;

src/app/components/FilterUI/UI/FilterCard.tsx

@@ -0,0 +1,32 @@
+/*
+ * フィルターの内容とタイトルをセットにするコンポーネント
+ */
+
+import React, { ReactNode } from "react";
+
+/**
+ * フィルターカードのプロパティ
+ */
+export interface FilterCardProps {
+  /** タイトル */
+  title: string;
+
+  /** フィルター */
+  children: ReactNode;
+}
+
+/**
+ * フィルターの内容とタイトルをセットにするコンポーネント
+ * @param param0 プロパティ
+ * @param param0.title フィルターのタイトル
+ * @param param0.children フィルターコンポーネント
+ * @returns コンポーネント
+ */
+export const FilterCard: React.FC<FilterCardProps> = ({ title, children }) => {
+  return (
+    <div className="gap-8 flex-wrap">
+      <div className="text-2xl m-4">{title}</div>
+      {children}
+    </div>
+  );
+};

src/app/components/FilterUI/UI/FlagButton.tsx

@@ -0,0 +1,53 @@
+/*
+ * 選択状態を示すボタン。
+ * (ボタンの背景色を変更することで選択状態を示す。)
+ * セメスター選択ボタンや、種別選択ボタンで使用。
+ */
+
+import React from "react";
+
+/**
+ * 選択状態を示すボタンのプロパティ
+ */
+interface FlagButtonProp {
+  /**
+   * ボタンのラベル
+   */
+  label: string;
+  /**
+   * 選択状態かどうか
+   */
+  isSelected: boolean;
+  /**
+   * ボタンがクリックされたときの処理
+   */
+  onClick: () => void;
+
+  /**
+   * ボタンのスタイル
+   */
+  className?: string;
+}
+
+/**
+ * 選択状態を示すボタンのコンポーネント
+ * @param prop 選択状態を示すボタンのプロパティ
+ * @returns 選択状態を示すボタンのコンポーネント
+ */
+export const FlagButton: React.FC<FlagButtonProp> = (prop: FlagButtonProp) => {
+  const className = prop.className ?? "";
+  return (
+    <button
+      className={
+        `${
+          prop.isSelected ? "bg-primary/30" : "bg-surface"
+        } text-text-default px-4 py-2 rounded-full outline-2 outline-primary/30 outline` +
+        " " +
+        className
+      }
+      onClick={prop.onClick}
+    >
+      {prop.label}
+    </button>
+  );
+};

src/app/type.ts

@@ -59,3 +59,29 @@ export const dayMapping: { [key in Day]: string } = {
   fri: "金",
   sat: "土",
 };
+
+/**
+ * セメスターを表現する型
+ */
+export type Semester = "S" | "S1" | "S2" | "A" | "A1" | "A2";
+
+/**
+ * 評価方法を表現する型
+ */
+export type Evaluation = "試験" | "レポート" | "出席" | "平常";
+
+/**
+ * セメスターを表現する型
+ */
+export type ClassType =
+  | "基礎"
+  | "要求"
+  | "主題"
+  | "展開"
+  | "L"
+  | "A"
+  | "B"
+  | "C"
+  | "D"
+  | "E"
+  | "F";