+
+
+
+
+
+
+
+
+
-
ご意見
-
+
使い方
履修上の注意
免責事項
About us
-
ut.code();
-
+
);
diff --git a/packages/web/src/app/components/Header/index.tsx b/packages/web/src/app/components/Header/index.tsx
index 66a0bbf..e7f326c 100644
--- a/packages/web/src/app/components/Header/index.tsx
+++ b/packages/web/src/app/components/Header/index.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import Image from "next/image";
import { useContext } from "react";
import { FaCog } from "react-icons/fa";
import { MdDarkMode, MdOutlineWbSunny } from "react-icons/md";
@@ -33,7 +30,7 @@ export default function Header() {
rel="noopener"
>
by
-
-
+ ![backgroundImage]({"/backgroundImage.png"})
@@ -28,14 +27,11 @@ export default function Home(): JSX.Element {
{/* タイトル */}
{/* ロゴ(解像度に応じてサイズを変える) */}
-
+ {title}
+
+ {children} +
+ );
+};
+
+/**
+ * フィルターの挙動を説明するカード
+ * @param param0 プロパティ
+ * @param param0.title カードのタイトル
+ * @param param0.detail カードの詳細
+ * @param param0.onReset リセット時の挙動
+ * @returns フィルターのカード
+ */
+export const FilterCard: React.FC<{
+ title: string;
+ detail: string;
+ onReset: string;
+}> = ({ title, detail, onReset }) => {
+ return (
+
+ {/* クリックで回答を表示するボタン */}
+
+ {/* 質問を表示。ホーバーで色が変わる。 */}
+
+ {question}
+
+
+ {/* 開閉アイコン */}
+
+
+ {/* 回答 */}
+
+ {children}
+
+
+ );
+};
+
+/**
+ * 適切にインデントするli要素
+ * li 要素が長くなりwrapされる際、インデントが崩れるのを防ぐ
+ * @param param0 プロパティ
+ * @param param0.children 子要素
+ * @returns li要素
+ */
+export const IndentLi: React.FC<
+ {
+ children: React.ReactNode;
+ } & ComponentProps<"li">
+> = ({ children, ...prop }) => {
+ return {children} ;
+};
diff --git a/packages/web/src/app/not-found.tsx b/packages/web/src/pages/NotFound.tsx
similarity index 86%
rename from packages/web/src/app/not-found.tsx
rename to packages/web/src/pages/NotFound.tsx
index 266f712..40ec462 100644
--- a/packages/web/src/app/not-found.tsx
+++ b/packages/web/src/pages/NotFound.tsx
@@ -1,20 +1,19 @@
-import Image from "next/image";
+import type React from "react";
import Logo from "@/../public/syllabus_icon.svg";
/**
* NotFound コンポーネントは、存在しないリンクへのアクセス時に表示されます。
* @returns HTMLを生成するReactコンポーネント。
*/
-export default function NotFound(): JSX.Element {
+export default function NotFound(): React.ReactElement {
return (
<>
{/* バックグラウンド画像 */}
-
+ 
diff --git a/packages/web/src/app/how-to-use/page.tsx b/packages/web/src/pages/HowToUse.tsx
similarity index 100%
rename from packages/web/src/app/how-to-use/page.tsx
rename to packages/web/src/pages/HowToUse.tsx
diff --git a/packages/web/src/pages/HowToUseItem.tsx b/packages/web/src/pages/HowToUseItem.tsx
new file mode 100644
index 0000000..08b8c03
--- /dev/null
+++ b/packages/web/src/pages/HowToUseItem.tsx
@@ -0,0 +1,146 @@
+import {
+ Disclosure,
+ DisclosureButton,
+ DisclosurePanel,
+} from "@headlessui/react";
+import type React from "react";
+import type { ComponentProps } from "react";
+import { MdKeyboardArrowDown } from "react-icons/md";
+
+/**
+ * 使い方ページの各項目をまとめるレイアウト
+ * @param param0 プロパティ
+ * @param param0.title タイトル
+ * @param param0.children 内容
+ * @returns レイアウト
+ */
+export const HowToUseItem: React.FC<{
+ title: string;
+ children: React.ReactNode;
+}> = ({ title, children }) => {
+ return (
+
+
+ );
+};
+
+/**
+ * Quick Start の手順に利用するリストアイテム
+ * @param param0 プロパティ
+ * @param param0.title タイトル
+ * @param param0.children 内容
+ * @returns リストアイテム
+ */
+export const QuickStartItem: React.FC<{
+ title: string;
+ children: React.ReactNode;
+}> = ({ title, children }) => {
+ return (
+ {title}
+{children}
+ + {children} +
+
+ );
+};
+
+/**
+ * 必修、推奨を表すマークを説明するコンポーネント
+ * @param param0 プロパティ
+ * @param param0.title タイトル
+ * @param param0.detail 詳細
+ * @param param0.mark マーク
+ * @returns コンポーネント
+ */
+export const ClassMark: React.FC<{
+ title: string;
+ detail: string;
+ mark: React.ReactNode;
+}> = ({ title, detail, mark }) => {
+ return (
+ {title}
+ +
+
+ 詳細
+{detail}
+
+
+ リセット時の挙動
+{onReset}
+
+
+ );
+};
+
+/**
+ * Faq の質問と回答を表示するコンポーネント
+ * Disclosure を利用して、質問をクリックすると回答が表示されるようにする
+ * @param param0 プロパティ
+ * @param param0.question 質問
+ * @param param0.children 回答
+ * @returns コンポーネント
+ */
+export const FaqItem: React.FC<{
+ question: string;
+ children: React.ReactNode;
+}> = ({ question, children }) => {
+ return (
+ {title}
+{detail}
+マーク: {mark}
+
-
@@ -27,11 +26,10 @@ export default function NotFound(): JSX.Element {
-
diff --git a/packages/web/src/app/notion/page.tsx b/packages/web/src/pages/Notion.tsx
similarity index 99%
rename from packages/web/src/app/notion/page.tsx
rename to packages/web/src/pages/Notion.tsx
index 49c1e63..34ee5e2 100644
--- a/packages/web/src/app/notion/page.tsx
+++ b/packages/web/src/pages/Notion.tsx
@@ -1,5 +1,5 @@
import type React from "react";
-import { HowToUseItem } from "../how-to-use/HowToUseItem";
+import { HowToUseItem } from "../app/how-to-use/HowToUseItem";
const Notion: React.FC = () => {
return (
diff --git a/packages/web/src/app/globals.css b/packages/web/src/styles/globals.css
similarity index 100%
rename from packages/web/src/app/globals.css
rename to packages/web/src/styles/globals.css
diff --git a/packages/web/src/vite-env.d.ts b/packages/web/src/vite-env.d.ts
new file mode 100644
index 0000000..e61d533
--- /dev/null
+++ b/packages/web/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+///