Merge branch 'main' into notion

Author: RRRyoma

.env.sample

@@ -0,0 +1 @@
+NEXT_PUBLIC_MODE=default

package-lock.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "dev:mock": "export NEXT_PUBLIC_MODE=mock && next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

package.json

@@ -26,3 +26,13 @@ if there are any prettier errors, please run the following command to fix them.
 ```bash
 npx prettier . --write
 ```
+
+## mock mode
+
+To run the mock mode, run the following command.
+
+```bash
+npm run dev:mock
+```
+
+It will run the application with the mock data.

readme/developer_readme.md

@@ -96,4 +96,90 @@ export const SampleClasses: ClassDataType[] = [
     shortenedEvaluation: "レポ出席",
     shortenedClassroom: "他(学内等)",
   },
+  {
+    code: "50033",
+    type: "基礎",
+    category: "既修外国語",
+    semester: "A",
+    dayPeriod: [
+      {
+        day: "mon",
+        period: 2,
+      },
+    ],
+    classroom: "駒場5号館 516教室",
+    titleJp: "英語二列W(ALESA)",
+    lecturer: "Simon Perry",
+    titleEn: "English Language",
+    lecturerEn: "Simon Perry",
+    ccCode: "CAS-FC1114S3",
+    credits: 2,
+    detail:
+      "This course introduces students to the skill of building an effective written argument in English supported by sources and evidence, and to the conventions of formal writing. By the end of the course, students will:\n- be able to present a clear position which is supported by evidence and addresses alternative points of view;\n- understand the organisation and rhetorical features of an argumentative essay;\n- be familiar with basic stylistic conventions of academic writing.",
+    schedule: "",
+    methods:
+      "Class activities will include reading and analyzing argumentative writing in English; developing a position on an issue on the basis of individual research; engaging in a variety of pre-writing exercises; writing and revising; and using peer feedback to improve students’ own and others’ work in discussion and written comments.\n\nThe class is taught in English, and students are encouraged to speak English in class. Graduate-student teaching assistants are available in the Komaba Writers’ Studio to help students with their research, writing, and discussion.",
+    evaluation:
+      "Grades are based on writing assignments, discussion, and participation in class activities.",
+    notes: "",
+    class: "1年 文一二(8,22)文三(5,7,9)",
+    guidance: "なし",
+    guidanceDate: "",
+    guidancePeriod: "",
+    time: 90,
+    timeCompensation:
+      "Students will be encouraged to contact the instructor by email when they have further questions.",
+    targetClass: [
+      ["l1_8", "l2_8", "l1_22", "l2_22", "l3_5", "l3_7", "l3_9"],
+      [],
+    ],
+    importance: [["l1", "l2", "l3", "s1", "s2", "s3"], []],
+    shortenedCategory: "基礎",
+    shortenedEvaluation: "レポ出席平常",
+    shortenedClassroom: "516",
+  },
+  {
+    code: "51320",
+    type: "総合",
+    category: "A(思想・芸術)",
+    semester: "A",
+    dayPeriod: [
+      {
+        day: "mon",
+        period: 2,
+      },
+    ],
+    classroom: "駒場12号館 1232教室",
+    titleJp: "外国文学",
+    lecturer: "Barnaby Ralph",
+    titleEn: "Foreign Literature",
+    lecturerEn: "Barnaby Ralph",
+    ccCode: "CAS-GC1A17L1",
+    credits: 2,
+    detail:
+      "Students who take this course will reinforce their knowledge of Western literature, history, and culture, whilst learning about how works can be connected thematically. They will be introduced to key critical terms and will also have opportunities for discussion and a chance to develop their academic writing skills. It is intended to offer information that can continue to be valuable for their future studies.",
+    schedule:
+      'Week One: The beginnings of Western Literature, including Homer and Greek tragedy\nWeek Two: Greece to Rome, including Horace\'s "Ars Poetica"\nWeek Three: The rise of English, including Anglo-Saxon poetry\nWeek Four: Middle English, Chaucer, and the battle over language\nWeek Five: The Elizabethan period and the plays of Shakespeare\nWeek Six: The short seventeenth century - war, plague, fire, and Milton\nWeek Seven: The long eighteenth century and the satires of Swift and Pope\nWeek Eight: The rise of Romanticism and Sensibility\nWeek Nine: British Imperialism and the nineteenth century\nWeek Ten: Literature in the New World, Manifest Destiny, and the American Dream\nWeek Eleven: Modernism and the search for meaning\nWeek Twelve: In-class test\nWeek Thirteen: Literature from the late twentieth century to today',
+    methods:
+      "This class shall be conducted using a lecture/discussion format. Handouts will be given each week and these shall form a kind of textbook on which the final examination will be based.",
+    evaluation:
+      "In-class work (including homework): 20%\nTest: 30%\nEssay: 50%",
+    notes:
+      "Each week, homework will be given. It is expected that this will be completed by the next class and this will be checked.",
+    class: "1年 文科 理科 2年 文科 理科",
+    guidance: "なし",
+    guidanceDate: "",
+    guidancePeriod: "",
+    time: 90,
+    timeCompensation:
+      "The shortened class time wil be compensated for through homework assignments and set readings.",
+    targetClass: [
+      ["l1_all", "l2_all", "l3_all", "s1_all", "s2_all", "s3_all"],
+      ["l1_all", "l2_all", "l3_all", "s1_all", "s2_all", "s3_all"],
+    ],
+    importance: [[], []],
+    shortenedCategory: "総合A",
+    shortenedEvaluation: "レポ",
+    shortenedClassroom: "1232",
+  },
 ];

src/app/components/Footer/page.tsx src/app/components/Footer/index.tsxsrc/app/components/Footer/page.tsx renamed to src/app/components/Footer/index.tsx

@@ -0,0 +1,69 @@
+"use client";
+import { ClassDataType } from "@/app/type";
+import TimetableFrame from "../../Timetable/timetableFrame";
+import { useState } from "react";
+import ClassModalComponent from "../../ClassModal";
+
+/**
+ * 時間割のサンプル
+ * @returns 時間割のサンプルコンポーネント
+ */
+const TimetableComponentSample: React.FC = () => {
+  return (
+    <div className="m-5 w-5/6 h-[800px] bg-surface">
+      <TimetableFrame
+        hasSaturday={true} // 土曜日を表示
+        classSlotElement={ClassSlotElement} // 講義スロット内のデザイン
+        periodSlotElement={(p) => <div>{p}</div>}
+        daySlotElement={(d) => <div>{d}</div>}
+      />
+    </div>
+  );
+};
+
+/**
+ * 講義スロット内のデザイン
+ * Timetableコンポーネントが利用する関数で、classesはTimetableにより決定される
+ * @param classes このスロットに表示する関数
+ * @returns スロット内の要素
+ */
+function ClassSlotElement(classes: ClassDataType[]) {
+  const [classForModal, setClassForModal] = useState<ClassDataType>();
+
+  return (
+    <>
+      {/* スロット内の要素 */}
+      <div className="w-full h-full flex items-center justify-center">
+        {classes.map((c, i) => {
+          return (
+            <div
+              className="flex w-full h-full items-center justify-center min-w-0 m-1"
+              key={i}
+              onClick={() => setClassForModal(c)}
+            >
+              <div className="cursor-pointer bg-secondary/10 w-full h-5/6 max-w-40">
+                <div className="m-2 text-sm font-bold truncate">
+                  {c.titleJp}
+                </div>
+                <div className="m-2 text-xs text-text-default/50 text-wrap">
+                  {c.classroom}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* 講義がクリックされたとき、詳細を表示 */}
+      {classForModal && (
+        <ClassModalComponent
+          isOpen={true}
+          onCloseButtonClicked={() => setClassForModal(undefined)}
+          classData={classForModal}
+        />
+      )}
+    </>
+  );
+}
+
+export default TimetableComponentSample;

src/app/components/Sample/ClassModal/SampleClassData.ts

@@ -0,0 +1,33 @@
+import { ClassDataType, DayPeriod } from "@/app/type";
+import React from "react";
+import { SlotDiv, slotProps } from "./slot";
+
+/**
+ * 講義が表示されるスロット要素のプロパティ
+ */
+interface classProps extends slotProps {
+  day_period: DayPeriod | "集中"; // 曜限
+  hasSaturday: boolean; // 土曜日表示か否か
+  classes: ClassDataType[]; // このスロットに表示したいクラス
+  isIntensiveClass: boolean; // このスロットが集中講義か否か
+  classSlotElement: React.FC<ClassDataType[]>; //講義スロット内に配置する要素
+}
+
+/**
+ * 講義を表示するスロット
+ * @param props 講義スロットのプロパティ
+ * @returns 講義を表示するスロット
+ */
+export const ClassSlot: React.FC<classProps> = (props: classProps) => {
+  let col_span = "col-span-2"; // 通常講義ならグリッドの幅は2
+  if (props.isIntensiveClass) {
+    // 集中講義なら、土曜日表示の場合のグリッドの幅は12、土曜日非表示の場合のグリッドの幅は10
+    col_span = props.hasSaturday ? "col-span-12" : "col-span-10";
+  }
+
+  return (
+    <SlotDiv className={`${col_span} row-span-2 ${props.className}`}>
+      {props.classSlotElement(props.classes)}
+    </SlotDiv>
+  );
+};

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

@@ -0,0 +1,24 @@
+import { Day } from "@/app/type";
+import { SlotDiv, slotProps } from "./slot";
+import React from "react";
+
+/**
+ * 曜日が表示されるスロット要素のプロパティ
+ */
+interface dayProps extends slotProps {
+  day: Day;
+  daySlotElement: React.FC<Day>;
+}
+
+/**
+ * 曜日スロット要素
+ * @param props 曜日スロット要素のプロパティ
+ * @returns 曜日スロット要素
+ */
+export const DaySlot: React.FC<dayProps> = (props: dayProps) => {
+  return (
+    <SlotDiv className="col-span-2 row-span-1">
+      {props.daySlotElement(props.day)}
+    </SlotDiv>
+  );
+};

src/app/components/Timetable/slots/classSlot.tsx

@@ -0,0 +1,22 @@
+import { Period, SlotDiv, slotProps } from "./slot";
+
+/**
+ * 時限が表示されるスロット要素のプロパティ
+ */
+interface periodProps extends slotProps {
+  period: Period | "集中";
+  periodSlotElement: React.FC<Period | "集中">;
+}
+
+/**
+ * 時限スロット要素
+ * @param props 時限スロット要素のプロパティ
+ * @returns 時限スロット要素
+ */
+export const PeriodSlot: React.FC<periodProps> = (props: periodProps) => {
+  return (
+    <SlotDiv className="col-span-1 row-span-2">
+      {props.periodSlotElement(props.period)}
+    </SlotDiv>
+  );
+};