From dc5c5a104f4306f58b1b3ffe2fc9f17e674ec85a Mon Sep 17 00:00:00 2001 From: okonakona <2240057@ecc.ac.jp> Date: Thu, 2 Oct 2025 15:09:45 +0900 Subject: [PATCH 1/2] =?UTF-8?q?add:=20Home=E3=83=9A=E3=83=BC=E3=82=B8?= =?UTF-8?q?=E3=81=AE=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6=E3=83=88=E4=BD=9C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/arrow.svg | 3 + src/assets/success.svg | 3 + src/pages/Home/page.tsx | 119 ++++++++++++++++++++++++++++--- src/pages/Home/style.module.css | 121 ++++++++++++++++++++++++++++++++ 4 files changed, 238 insertions(+), 8 deletions(-) create mode 100644 src/assets/arrow.svg create mode 100644 src/assets/success.svg create mode 100644 src/pages/Home/style.module.css diff --git a/src/assets/arrow.svg b/src/assets/arrow.svg new file mode 100644 index 0000000..76998c4 --- /dev/null +++ b/src/assets/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/success.svg b/src/assets/success.svg new file mode 100644 index 0000000..386a478 --- /dev/null +++ b/src/assets/success.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/Home/page.tsx b/src/pages/Home/page.tsx index f1bc086..eee45da 100644 --- a/src/pages/Home/page.tsx +++ b/src/pages/Home/page.tsx @@ -1,11 +1,114 @@ -import { GenreColor } from '@/utils/Color/_genre' -import { Link } from 'react-router-dom' +import styles from './style.module.css' +import { useState } from 'react' export default function Home() { - return ( - <> -

ホームのページ

- 問題作成 - - ) + const [filter, setFilter] = useState('stillAns') + + const tasks = [ + { + id: 1, + title: '見出し表示', + category: 'HTML', + level: '1-1', + author: '上森拓翔', + status: 'stillAns', + }, + { + id: 2, + title: 'レイヤー弄り', + category: 'Illustrator', + level: '1-1', + author: '平田晃大', + status: 'alreadyAns', + }, + { + id: 3, + title: 'モーダルウィンドウ', + category: 'JavaScript', + level: '1-1', + author: '高木湊二郎', + status: 'recommendTask', + }, + ] + + // 選択中フィルターで絞り込み + const filteredTasks = tasks.filter((task) => + filter === 'all' ? true : task.status === filter, + ) + + return ( + <> +
+

平田晃大

+
+
+ +

+ 0問正解 +

+
+
+
+
+ setFilter(e.target.value)} + /> + + setFilter(e.target.value)} + /> + + setFilter(e.target.value)} + /> + +
+ + + + + + + + + + + {filteredTasks.map((task) => ( + + + + + + + ))} + +
タイトルカテゴリーレベル作成者
{task.title}{task.category}{task.level}{task.author}
+
+
+ + ) } diff --git a/src/pages/Home/style.module.css b/src/pages/Home/style.module.css new file mode 100644 index 0000000..a93a24a --- /dev/null +++ b/src/pages/Home/style.module.css @@ -0,0 +1,121 @@ +@import '../../utils/Color/_variables.css'; + +.content{ + margin: 50px 0; + h1{ + text-align: center; + margin: 20px 0; + } +} + +.filterNav{ + display: flex; + justify-content: center; + margin: 20px 0; + .filterWrap{ + display: flex; + align-items: center; + width: 450px; + border-radius: 50px; + background: var(--bgHover); + select{ + background: var(--bgHover); + border: none; + font-size: 1.5rem; + margin: 0 30px; + height: 40px; + width: 100px; + } + h2{ + border-left: solid 1px var(--grayText); + span{ + font-weight: normal; + font-size: 1rem; + margin: 0.5rem; + } + &::before{ + content: url("../../assets/success.svg"); + margin: 0 30px; + width: 20px; + } + } + } +} + +.taskFilter{ + background-color: var(--mouseColor); + border-radius: 10px 10px 0 0; + margin: 2px; + padding: 10px; + input{ + display: none; + } + label{ + color: var(--whiteText); + margin: 0 5px; + padding: 15px 30px; + &:hover{ + background: var(--whiteAlpha70); + color: var(--grayText); + border-radius: 10px 10px 0 0; + padding: 15px 30px; + + } + } + input[type=radio]:checked + label{ + background: var(--whiteText); + color: var(--textColor); + border-radius: 10px 10px 0 0; + padding: 15px 30px; + border-bottom: solid 1px var(--grayText); + + } +} + +.taskTable{ + border: solid 3px var(--mouseColor); + border-radius: 16px; + width: 1123px; + height: 480px; + margin: auto; + table{ + margin: auto; + width: 1000px; + margin-top: 25px; + tr{ + display: flex; + justify-content: space-between; + border-bottom: solid 1px var(--grayText); + padding: 5px 0; + td{ + width: 250px; + margin-left: 15px; + &:nth-last-child(1){ + width: 100px; + } + } + } + thead{ + tr{ + border-bottom: solid 3px var(--textColor); + &::after{ + content: ""; + width: 15px; + } + + } + } + tbody{ + tr{ + &::after{ + content: url("../../assets/arrow.svg"); + width: 15px; + } + &:hover{ + background-color: var(--bgHover); + } + } + } + } +} + From 143fb8b308fb13f075652d3662316394b6186089 Mon Sep 17 00:00:00 2001 From: okonakona <2240057@ecc.ac.jp> Date: Tue, 7 Oct 2025 16:45:21 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=E7=94=BB=E5=83=8F=E5=90=8D=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/{arrow.svg => arrow2.svg} | 0 src/pages/Home/style.module.css | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/assets/{arrow.svg => arrow2.svg} (100%) diff --git a/src/assets/arrow.svg b/src/assets/arrow2.svg similarity index 100% rename from src/assets/arrow.svg rename to src/assets/arrow2.svg diff --git a/src/pages/Home/style.module.css b/src/pages/Home/style.module.css index a93a24a..f1e9a90 100644 --- a/src/pages/Home/style.module.css +++ b/src/pages/Home/style.module.css @@ -108,7 +108,7 @@ tbody{ tr{ &::after{ - content: url("../../assets/arrow.svg"); + content: url("../../assets/arrow2.svg"); width: 15px; } &:hover{