+
) : (
''
),
diff --git a/src/pages/CreateProblem/reducer.ts b/src/pages/CreateProblem/reducer.ts
index 87d0f05..49648fb 100644
--- a/src/pages/CreateProblem/reducer.ts
+++ b/src/pages/CreateProblem/reducer.ts
@@ -1,6 +1,6 @@
-import { CreateProblemFmt001VO } from '@/models/entity/fmt/CreateProblemFmt0001'
-import { StatusVO } from '@/models/entity/Status'
-import { TagsVO } from '@/models/entity/Tags'
+import { CreateProblemFmt001VO } from '@/models/entity/client/fmt/CreateProblemFmt0001'
+import { StatusVO } from '@/models/entity/client/Status'
+import { TagsVO } from '@/models/entity/client/Tags'
export type ActionType =
// ==============================================
diff --git a/src/utils/baseURL.ts b/src/utils/baseURL.ts
index 949da7b..0a5efa7 100644
--- a/src/utils/baseURL.ts
+++ b/src/utils/baseURL.ts
@@ -1,2 +1 @@
-export const localURL = 'http://localhost:8787'
-export const deployURL = ''
+export const baseURL = 'http://localhost:8787'
diff --git a/src/utils/boolean_utils.ts b/src/utils/boolean_utils.ts
new file mode 100644
index 0000000..413ee14
--- /dev/null
+++ b/src/utils/boolean_utils.ts
@@ -0,0 +1,14 @@
+export namespace BooleanUtils {
+ export function ensureBool(
+ src: boolean | null,
+ other: boolean = true,
+ ): boolean {
+ // srcがbooleanの場合はそのまま返す（true/falseをそのまま保持）
+ if (typeof src === 'boolean') {
+ return src
+ }
+
+ // srcがnullまたはundefinedの場合はデフォルト値（other）を返す
+ return other
+ }
+}
diff --git a/src/utils/core_utils.ts b/src/utils/core_utils.ts
index 98e19d1..5af555b 100644
--- a/src/utils/core_utils.ts
+++ b/src/utils/core_utils.ts
@@ -1,71 +1,72 @@
import { v4 as uuidv4 } from 'uuid'
export namespace CoreUtils {
- /**
- * あなたIE？
- * @returns
- */
- export const isIE = () => {
- const ua = window.navigator.userAgent.toLowerCase()
- return ua.match(/(msie|trident)/) ? true : false
- }
-
- /**
- * クライアントのオリジンを取得
- * 当然サーバーサイドでは動作しません。
- * @returns
- */
- export const getHost = () => {
- if (location !== undefined) {
- return location.protocol + '//' + location.host
+ /**
+ * あなたIE？
+ * @returns
+ */
+ export const isIE = () => {
+ const ua = window.navigator.userAgent.toLowerCase()
+ return ua.match(/(msie|trident)/) ? true : false
}
- return undefined
- }
-
- /**
- * UUID生成
- * uuidを直接生成させずにラッパーを提供するのは、途中で実装を変更する可能性があるため。
- * （例：uuidv4?uuidv5?何桁？）
- * @returns
- */
- export function genUUID(): string {
- return uuidv4()
- }
+ /**
+ * クライアントのオリジンを取得
+ * 当然サーバーサイドでは動作しません。
+ * @returns
+ */
+ export const getHost = () => {
+ if (location !== undefined) {
+ return location.protocol + '//' + location.host
+ }
- /**
- * オブジェクトからnullまたはundefinedの項目を除去
- * @param obj
- * @returns
- */
- export function filterNulls
@@ -54,45 +52,42 @@ export default function Problems() {
diff --git a/src/pages/Problems/reducer.ts b/src/pages/Problems/reducer.ts
index e69de29..0e4a272 100644
--- a/src/pages/Problems/reducer.ts
+++ b/src/pages/Problems/reducer.ts
@@ -0,0 +1,180 @@
+import { ProblemFmt0001VO } from '@/models/entity/client/fmt/ProblemFmt0001VO'
+import { TagsVO } from '@/models/entity/client/Tags'
+
+export type ActionType =
+ //===============================================
+ | {
+ type: 'OPEN_FORM'
+ payload: {
+ tagName: string
+ }
+ }
+ //===============================================
+ | {
+ type: 'FIND_GENRE_PROBLEM_REQUEST'
+ payload: {
+ offset: number
+ limit: number
+ }
+ }
+ | {
+ type: 'FIND_GENRE_PROBLEM_SUCCESS'
+ payload: {
+ problemList: ProblemFmt0001VO.Type[]
+ tags: TagsVO.Type[]
+ }
+ }
+ | {
+ type: 'FIND_GENRE_PROBLEM_FAILURE'
+ }
+//===============================================
+
+export type State = {
+ isWaiting: boolean
+ offset: number
+ limit: number
+ problemList: ProblemFmt0001VO.Type[]
+ tags: TagsVO.Type[]
+ genreFlag: {
+ front: boolean
+ HTML: boolean
+ CSS: boolean
+ JS: boolean
+ design: boolean
+ Figma: boolean
+ Illustrator: boolean
+ Photoshop: boolean
+ ColorTheoryTest: boolean
+ }
+}
+
+export function defaultState(): State {
+ return {
+ isWaiting: false,
+ offset: 0,
+ limit: 10,
+ problemList: [],
+ tags: [],
+ genreFlag: {
+ front: false,
+ HTML: false,
+ CSS: false,
+ JS: false,
+ design: false,
+ Figma: false,
+ Illustrator: false,
+ Photoshop: false,
+ ColorTheoryTest: false,
+ },
+ }
+}
+
+export function reducer(state: State, action: ActionType): State {
+ switch (action.type) {
+ // ==============================================
+ case 'OPEN_FORM': {
+ switch (action.payload.tagName) {
+ case 'genre.front':
+ return {
+ ...state,
+ genreFlag: {
+ ...state.genreFlag,
+ front: state.genreFlag.front ? false : true,
+ },
+ }
+ case 'genre.HTML':
+ return {
+ ...state,
+ genreFlag: {
+ ...state.genreFlag,
+ HTML: state.genreFlag.HTML ? false : true,
+ },
+ }
+ case 'genre.CSS':
+ return {
+ ...state,
+ genreFlag: {
+ ...state.genreFlag,
+ CSS: state.genreFlag.CSS ? false : true,
+ },
+ }
+ case 'genre.JS':
+ return {
+ ...state,
+ genreFlag: {
+ ...state.genreFlag,
+ JS: state.genreFlag.JS ? false : true,
+ },
+ }
+ case 'genre.design':
+ return {
+ ...state,
+ genreFlag: {
+ ...state.genreFlag,
+ design: state.genreFlag.design ? false : true,
+ },
+ }
+ case 'genre.Figma':
+ return {
+ ...state,
+ genreFlag: {
+ ...state.genreFlag,
+ Figma: state.genreFlag.Figma ? false : true,
+ },
+ }
+ case 'genre.Illustrator':
+ return {
+ ...state,
+ genreFlag: {
+ ...state.genreFlag,
+ Illustrator: state.genreFlag.Illustrator
+ ? false
+ : true,
+ },
+ }
+ case 'genre.Photoshop':
+ return {
+ ...state,
+ genreFlag: {
+ ...state.genreFlag,
+ Photoshop: state.genreFlag.Photoshop ? false : true,
+ },
+ }
+ case 'genre.ColorTheoryTest':
+ return {
+ ...state,
+ genreFlag: {
+ ...state.genreFlag,
+ ColorTheoryTest: state.genreFlag.ColorTheoryTest
+ ? false
+ : true,
+ },
+ }
+ }
+ throw new (class SystemException {})()
+ }
+ // ==============================================
+ case 'FIND_GENRE_PROBLEM_REQUEST':
+ return {
+ ...state,
+ isWaiting: true,
+ offset: action.payload.offset,
+ limit: action.payload.limit,
+ }
+ case 'FIND_GENRE_PROBLEM_SUCCESS':
+ return {
+ ...state,
+ isWaiting: false,
+ problemList: action.payload.problemList,
+ tags: action.payload.tags,
+ }
+ case 'FIND_GENRE_PROBLEM_FAILURE':
+ return {
+ ...state,
+ isWaiting: false,
+ }
+ // ==============================================
+ }
+
+ return state
+}
From 7f800efa9e485e2b728cd399fa8268b2d7103c03 Mon Sep 17 00:00:00 2001
From: koudaihirata <2230051@ecc.ac.jp>
Date: Wed, 24 Sep 2025 18:43:37 +0900
Subject: [PATCH 05/12] =?UTF-8?q?add:save=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Header/Header.tsx | 8 +--
src/models/ApiType/CreateProblem/type.ts | 12 +++++
src/pages/CreateProblem/detail/action.ts | 32 +++++++++++-
src/pages/CreateProblem/detail/reducer.ts | 32 ++++++++++++
src/utils/core_utils.ts | 61 -----------------------
5 files changed, 79 insertions(+), 66 deletions(-)
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index b907f0a..45d0558 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -10,10 +10,10 @@ type Type = {
}
export default function Header(props: Type) {
- const [isOpen, setIsOpen] = useState(false)
- const toggleHamburger = () => {
- setIsOpen(!isOpen)
- }
+ // const [isOpen, setIsOpen] = useState(false)
+ // const toggleHamburger = () => {
+ // setIsOpen(!isOpen)
+ // }
const location = useLocation()
return (
diff --git a/src/models/ApiType/CreateProblem/type.ts b/src/models/ApiType/CreateProblem/type.ts
index 67b310e..53fd5b2 100644
--- a/src/models/ApiType/CreateProblem/type.ts
+++ b/src/models/ApiType/CreateProblem/type.ts
@@ -1,4 +1,6 @@
import { CreateProblemFmt001VO } from '@/models/entity/client/fmt/CreateProblemFmt0001'
+import { OptionsVO } from '@/models/entity/client/Options'
+import { ProblemVO } from '@/models/entity/client/Problem'
import { StatusVO } from '@/models/entity/client/Status'
import { TagsVO } from '@/models/entity/client/Tags'
import { CreateProblemFmt001 } from '@/models/entity/server/fmt/CreateProblemFmt0001'
@@ -24,4 +26,14 @@ export namespace CreateProblemApi {
status: StatusVO.Type[]
}
}
+
+ export namespace POST {
+ export type Request = {
+ createProblemDetail: ProblemVO.Type
+ // option: OptionsVO.Type
+ }
+ export type Response = {
+ id: number
+ }
+ }
}
diff --git a/src/pages/CreateProblem/detail/action.ts b/src/pages/CreateProblem/detail/action.ts
index debec39..421e637 100644
--- a/src/pages/CreateProblem/detail/action.ts
+++ b/src/pages/CreateProblem/detail/action.ts
@@ -6,6 +6,7 @@ import { TagsVO } from '@/models/entity/client/Tags'
import { ProblemConverter } from '@/models/entity/converter/Problem'
import { ProblemVO } from '@/models/entity/client/Problem'
import { OptionsVO } from '@/models/entity/client/Options'
+import { CreateProblemApi } from '@/models/ApiType/CreateProblem/type'
export namespace Action {
export async function editForm(
@@ -25,6 +26,7 @@ export namespace Action {
},
})
}
+
export async function findCreateProblemDetail(
dispatch: React.Dispatch,
cond: {
@@ -46,7 +48,7 @@ export namespace Action {
} else {
// 既存問題の取得
const CreateProblemRes = await fetch(
- `http://localhost:8787/problems/${params}`,
+ `${baseURL}/problems/${params}`,
{
method: 'GET',
cache: 'no-cache',
@@ -99,6 +101,34 @@ export namespace Action {
}
}
+ export async function saveCreateProblemDetail(
+ dispatch: React.Dispatch,
+ createProblemDetail: ProblemVO.Type,
+ // option: OptionsVO.Type
+ ) {
+ dispatch({ type: 'SAVE_CREATE_PROBLEM_DETAIL_REQUEST' })
+
+ try {
+ const json: CreateProblemApi.POST.Request = {
+ createProblemDetail,
+ // option
+ }
+
+ const res = await fetch(`${baseURL}/createProblem`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(json),
+ })
+
+ const result: CreateProblemApi.POST.Response = await res.json()
+ } catch (e) {
+ dispatch({ type: 'SAVE_CREATE_PROBLEM_DETAIL_FAILURE' })
+ throw e
+ }
+ }
+
export function convertStringsToArray(
dispatch: React.Dispatch,
cond: {
diff --git a/src/pages/CreateProblem/detail/reducer.ts b/src/pages/CreateProblem/detail/reducer.ts
index 55e2758..bc3978e 100644
--- a/src/pages/CreateProblem/detail/reducer.ts
+++ b/src/pages/CreateProblem/detail/reducer.ts
@@ -29,6 +29,20 @@ export type ActionType =
type: 'FIND_CREATE_PROBLEM_DETAIL_FAILURE'
}
// ==============================================
+ | {
+ type: 'SAVE_CREATE_PROBLEM_DETAIL_REQUEST'
+ }
+ | {
+ type: 'SAVE_CREATE_PROBLEM_DETAIL_SUCCESS'
+ payload: {
+ createProblemDetail: ProblemVO.Type
+ option: OptionsVO.Type
+ }
+ }
+ | {
+ type: 'SAVE_CREATE_PROBLEM_DETAIL_FAILURE'
+ }
+ // ==============================================
| {
type: 'CONVERT_STRINGS_TO_ARRAY'
payload: {
@@ -201,6 +215,24 @@ export function reducer(state: State, action: ActionType): State {
isWaiting: false,
}
// ==============================================
+ case 'SAVE_CREATE_PROBLEM_DETAIL_REQUEST':
+ return {
+ ...state,
+ isWaiting: true,
+ }
+ case 'SAVE_CREATE_PROBLEM_DETAIL_SUCCESS':
+ return {
+ ...state,
+ isWaiting: false,
+ createProblemDetail: action.payload.createProblemDetail,
+ option: action.payload.option,
+ }
+ case 'SAVE_CREATE_PROBLEM_DETAIL_FAILURE':
+ return {
+ ...state,
+ isWaiting: false,
+ }
+ // ==============================================
case 'CONVERT_STRINGS_TO_ARRAY':
return {
...state,
diff --git a/src/utils/core_utils.ts b/src/utils/core_utils.ts
index 5af555b..ec98195 100644
--- a/src/utils/core_utils.ts
+++ b/src/utils/core_utils.ts
@@ -1,65 +1,4 @@
-import { v4 as uuidv4 } from 'uuid'
-
export namespace CoreUtils {
- /**
- * あなたIE？
- * @returns
- */
- export const isIE = () => {
- const ua = window.navigator.userAgent.toLowerCase()
- return ua.match(/(msie|trident)/) ? true : false
- }
-
- /**
- * クライアントのオリジンを取得
- * 当然サーバーサイドでは動作しません。
- * @returns
- */
- export const getHost = () => {
- if (location !== undefined) {
- return location.protocol + '//' + location.host
- }
-
- return undefined
- }
-
- /**
- * UUID生成
- * uuidを直接生成させずにラッパーを提供するのは、途中で実装を変更する可能性があるため。
- * （例：uuidv4?uuidv5?何桁？）
- * @returns
- */
- export function genUUID(): string {
- return uuidv4()
- }
-
- /**
- * オブジェクトからnullまたはundefinedの項目を除去
- * @param obj
- * @returns
- */
- export function filterNulls(obj: T): T | undefined {
- if (obj === undefined || obj === null) {
- return undefined
- }
-
- const keyList = Object.keys(obj)
- for (const key of keyList) {
- /* eslint-disable */
- if ((obj as any)[key] === null || (obj as any)[key] === undefined) {
- delete (obj as any)[key]
- }
- /* eslint-enable */
- }
-
- return obj
- }
-
- /**
- * undefined/null/NaN/空文字(trim後)か否か判定する
- * @param src
- * @returns
- */
export const isEmpty = (src: T | undefined): src is undefined => {
return (
src === undefined ||
From 93b057099cc092e70442fc7dc78b288acc9d3905 Mon Sep 17 00:00:00 2001
From: koudaihirata <2230051@ecc.ac.jp>
Date: Mon, 29 Sep 2025 14:18:11 +0900
Subject: [PATCH 06/12] =?UTF-8?q?update:=E5=95=8F=E9=A1=8C=E3=83=9A?=
=?UTF-8?q?=E3=83=BC=E3=82=B8=E3=81=AE=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3?=
=?UTF-8?q?=E3=81=A8=E5=8B=95=E3=81=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/models/ApiType/CreateProblem/type.ts | 2 +-
src/pages/CreateProblem/detail/action.ts | 44 +++-
src/pages/CreateProblem/detail/index.tsx | 24 +-
src/pages/CreateProblem/detail/reducer.ts | 6 -
src/pages/Problems/index.tsx | 269 +++++++++++++++++++++-
src/pages/Problems/style.module.css | 2 +
6 files changed, 317 insertions(+), 30 deletions(-)
diff --git a/src/models/ApiType/CreateProblem/type.ts b/src/models/ApiType/CreateProblem/type.ts
index 53fd5b2..9516c05 100644
--- a/src/models/ApiType/CreateProblem/type.ts
+++ b/src/models/ApiType/CreateProblem/type.ts
@@ -30,7 +30,7 @@ export namespace CreateProblemApi {
export namespace POST {
export type Request = {
createProblemDetail: ProblemVO.Type
- // option: OptionsVO.Type
+ option: OptionsVO.Type
}
export type Response = {
id: number
diff --git a/src/pages/CreateProblem/detail/action.ts b/src/pages/CreateProblem/detail/action.ts
index 421e637..bb538f6 100644
--- a/src/pages/CreateProblem/detail/action.ts
+++ b/src/pages/CreateProblem/detail/action.ts
@@ -104,14 +104,32 @@ export namespace Action {
export async function saveCreateProblemDetail(
dispatch: React.Dispatch,
createProblemDetail: ProblemVO.Type,
- // option: OptionsVO.Type
+ option: OptionsVO.Type,
+ optionContent: string[][],
+ optionName: string[],
+ modelAnswer: number[],
+ applyFlag: boolean,
) {
dispatch({ type: 'SAVE_CREATE_PROBLEM_DETAIL_REQUEST' })
+ let saveDataP: ProblemVO.Type = createProblemDetail
+ let saveDataO: OptionsVO.Type = option
+
+ if (!applyFlag) {
+ saveDataP.fk_status = 1
+ } else {
+ saveDataP.fk_status = 2
+ }
+
+ convertArrayToStrings(saveDataP, saveDataO, {
+ optionContent,
+ optionName,
+ modelAnswer,
+ })
try {
const json: CreateProblemApi.POST.Request = {
- createProblemDetail,
- // option
+ createProblemDetail: saveDataP,
+ option,
}
const res = await fetch(`${baseURL}/createProblem`, {
@@ -123,6 +141,9 @@ export namespace Action {
})
const result: CreateProblemApi.POST.Response = await res.json()
+
+ dispatch({ type: 'SAVE_CREATE_PROBLEM_DETAIL_SUCCESS' })
+ findCreateProblemDetail(dispatch, { id: result.id })
} catch (e) {
dispatch({ type: 'SAVE_CREATE_PROBLEM_DETAIL_FAILURE' })
throw e
@@ -163,6 +184,23 @@ export namespace Action {
},
})
}
+ export function convertArrayToStrings(
+ problemData: ProblemVO.Type,
+ optionDate: OptionsVO.Type,
+ cond: {
+ optionContent: string[][]
+ optionName: string[]
+ modelAnswer: number[]
+ },
+ ) {
+ try {
+ problemData.model_answer = `${cond.modelAnswer}`
+ optionDate.option_name = `${cond.optionName}`
+ optionDate.content = `${cond.optionContent}`
+ } catch (error) {
+ console.error('Array parse error:', error)
+ }
+ }
export function addChoices(
dispatch: React.Dispatch,
diff --git a/src/pages/CreateProblem/detail/index.tsx b/src/pages/CreateProblem/detail/index.tsx
index 3aae292..b6a4e0e 100644
--- a/src/pages/CreateProblem/detail/index.tsx
+++ b/src/pages/CreateProblem/detail/index.tsx
@@ -22,15 +22,6 @@ export default function CreateProblemDetail() {
}, [location.search])
useEffect(() => {
- console.log('useEffect実行 - 条件チェック:')
- console.log(' state.option.content:', state.option.content)
- console.log(' state.isWaiting:', state.isWaiting)
- console.log(' state.option.input_type:', state.option.input_type)
- console.log(
- ' state.createProblemDetail.is_multiple_choice:',
- state.createProblemDetail.is_multiple_choice,
- )
-
// データが取得済みかどうかをチェック
if (
!state.option.content ||
@@ -451,7 +442,20 @@ export default function CreateProblemDetail() {
)}
diff --git a/src/pages/CreateProblem/detail/reducer.ts b/src/pages/CreateProblem/detail/reducer.ts
index bc3978e..9b1849f 100644
--- a/src/pages/CreateProblem/detail/reducer.ts
+++ b/src/pages/CreateProblem/detail/reducer.ts
@@ -34,10 +34,6 @@ export type ActionType =
}
| {
type: 'SAVE_CREATE_PROBLEM_DETAIL_SUCCESS'
- payload: {
- createProblemDetail: ProblemVO.Type
- option: OptionsVO.Type
- }
}
| {
type: 'SAVE_CREATE_PROBLEM_DETAIL_FAILURE'
@@ -224,8 +220,6 @@ export function reducer(state: State, action: ActionType): State {
return {
...state,
isWaiting: false,
- createProblemDetail: action.payload.createProblemDetail,
- option: action.payload.option,
}
case 'SAVE_CREATE_PROBLEM_DETAIL_FAILURE':
return {
diff --git a/src/pages/Problems/index.tsx b/src/pages/Problems/index.tsx
index d2b6074..ad7c312 100644
--- a/src/pages/Problems/index.tsx
+++ b/src/pages/Problems/index.tsx
@@ -6,6 +6,7 @@ import { useEffect, useReducer } from 'react'
import { defaultState, reducer } from './reducer'
import { useLocation } from 'react-router-dom'
import { Action } from './action'
+import { stat } from 'fs'
export default function Problems() {
const [state, dispatch] = useReducer(reducer, undefined, defaultState)
@@ -133,14 +134,94 @@ export default function Problems() {
)}
-
{state.genreFlag.design && (
- setState((prev) => ({
- ...prev,
- front: !prev.front,
- }))
+ Action.openForm(dispatch, 'genre.front')
}
>
- {state.front && (
+ {state.genreFlag.front && (
フロントエンド
- setState((prev) => ({
- ...prev,
- HTML: !prev.HTML,
- }))
+ Action.openForm(
+ dispatch,
+ 'genre.HTML',
+ )
}
>
- {state.HTML && (
+ {state.genreFlag.HTML && (
<>
HTML
- setState((prev) => ({
- ...prev,
- design: !prev.design,
- }))
+ Action.openForm(dispatch, 'genre.design')
}
>
- {state.design && (
+ {state.genreFlag.design && (
デザイン
-
+
-
+
@@ -164,18 +245,186 @@ export default function Problems() {
+ Action.openForm(
+ dispatch,
+ 'genre.CSS',
+ )
+ }
+ >
+
- CSS
-
+ {state.genreFlag.CSS && (
+ <>
+
)}
+
+
+ )}
+
+
+ 正誤
+
+
+ タイトル
+
+
+ ジャンル
+
+
+ レベル
+
+
+ 作成者
+
+ Action.openForm(
+ dispatch,
+ 'genre.JS',
+ )
+ }
+ >
+
+ {state.genreFlag.JS && (
+ <>
+ JavaScript
+
+
+ )}
+
+ 正誤
+
+
+ タイトル
+
+
+ ジャンル
+
+
+ レベル
+
+
+ 作成者
+
-
-
+ console.log('テスト')} state={true} />, {
+ wrapper: Wrapper,
+ })
+ // ヘッダーが表示されていることを確認
+ const header = screen.getByRole('banner')
+ expect(header).toBeInTheDocument()
+ // ハンバーガーメニューボタンが存在することを確認
+ // const hamburgerButton = screen.getByAltText('ハンバーガー')
+ // expect(hamburgerButton).toBeInTheDocument()
+ // // アイコン画像が存在することを確認
+ // const iconImage = screen.getByAltText('アイコン画像')
+ // expect(iconImage).toBeInTheDocument()
+ })
// it('should render navigation links', () => {
// render(
+ Action.openForm(
+ dispatch,
+ 'genre.Figma',
+ )
+ }
+ >
+
- Figma
-
+ {state.genreFlag.Figma && (
+ <>
+
diff --git a/src/pages/Problems/style.module.css b/src/pages/Problems/style.module.css
index f57c594..6581e58 100644
--- a/src/pages/Problems/style.module.css
+++ b/src/pages/Problems/style.module.css
@@ -19,6 +19,8 @@
}
}
.problemsTableWrap {
+ margin-bottom: 32px;
+
.problemHeader {
width: 90%;
margin: 0 auto;
From 72989221006a5f3ce3b9ef5c502e1e8eb1ba7d81 Mon Sep 17 00:00:00 2001
From: koudaihirata <2230051@ecc.ac.jp>
Date: Mon, 29 Sep 2025 16:45:57 +0900
Subject: [PATCH 07/12] =?UTF-8?q?add:=E3=83=AD=E3=82=B0=E3=82=A4=E3=83=B3?=
=?UTF-8?q?=E3=83=9A=E3=83=BC=E3=82=B8=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/w2cLogo.svg | 9 +++
src/components/Button/LoginBtn/LoginBtn.tsx | 5 ++
.../Button/LoginBtn/styles.module.css | 0
src/pages/Login/page.tsx | 45 ++++++++++--
src/pages/Login/style.module.css | 73 +++++++++++++++++++
5 files changed, 127 insertions(+), 5 deletions(-)
create mode 100644 src/assets/w2cLogo.svg
create mode 100644 src/components/Button/LoginBtn/LoginBtn.tsx
create mode 100644 src/components/Button/LoginBtn/styles.module.css
create mode 100644 src/pages/Login/style.module.css
diff --git a/src/assets/w2cLogo.svg b/src/assets/w2cLogo.svg
new file mode 100644
index 0000000..4c4ffeb
--- /dev/null
+++ b/src/assets/w2cLogo.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/components/Button/LoginBtn/LoginBtn.tsx b/src/components/Button/LoginBtn/LoginBtn.tsx
new file mode 100644
index 0000000..dedf75e
--- /dev/null
+++ b/src/components/Button/LoginBtn/LoginBtn.tsx
@@ -0,0 +1,5 @@
+import styles from './styles.module.css'
+
+export default function LoginBtn(label: string) {
+ return <>
+}
diff --git a/src/components/Button/LoginBtn/styles.module.css b/src/components/Button/LoginBtn/styles.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Login/page.tsx b/src/pages/Login/page.tsx
index e94eeb4..dc0f617 100644
--- a/src/pages/Login/page.tsx
+++ b/src/pages/Login/page.tsx
@@ -1,7 +1,42 @@
+import styles from './style.module.css'
+import logo from '../../assets/w2clogo.svg'
+import { Button } from '@/stories/Button'
+
export default function Login() {
- return (
- <>
-
+
+
+ )}
+
+
+ 正誤
+
+
+ タイトル
+
+
+ ジャンル
+
+
+ レベル
+
+
+ 作成者
+
+ Action.openForm(
+ dispatch,
+ 'genre.Illustrator',
+ )
+ }
+ >
+
- Illustrator
-
+ {state.genreFlag.Illustrator && (
+ <>
+
)}
+
+
+ )}
+
+
+ 正誤
+
+
+ タイトル
+
+
+ ジャンル
+
+
+ レベル
+
+
+ 作成者
+
+ Action.openForm(
+ dispatch,
+ 'genre.Photoshop',
+ )
+ }
+ >
+
+ {state.genreFlag.Photoshop && (
+ <>
+ Photoshop
+
+
+ )}
+
+
+ 正誤
+
+
+ タイトル
+
+
+ ジャンル
+
+
+ レベル
+
+
+ 作成者
+
+ Action.openForm(
+ dispatch,
+ 'genre.ColorTheoryTest',
+ )
+ }
+ >
+
+
+ {state.genreFlag.ColorTheoryTest && (
+ <>
+ 色彩
+
+
+
+ )}
+
+ 正誤
+
+
+ タイトル
+
+
+ ジャンル
+
+
+ レベル
+
+
+ 作成者
+Loginページ
- - ) + return ( + <> +
+
+
+
+
+ )
}
diff --git a/src/pages/Login/style.module.css b/src/pages/Login/style.module.css
new file mode 100644
index 0000000..25888cf
--- /dev/null
+++ b/src/pages/Login/style.module.css
@@ -0,0 +1,73 @@
+.loginBg {
+ width: 100%;
+ height: 100vh;
+ background: linear-gradient( to top, #E3F9FB, #87DBF9);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+
+ .errorMes {
+ color: #D53B1C;
+ font-weight: bold;
+ margin-top: 16px;
+ }
+
+ .loginForm {
+ margin-top: 16px;
+ width: 50%;
+ height: 60%;
+ background-color: #86A0A6;
+ border-radius: 16px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ form {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center;
+
+ .inputWrap {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ >p {
+ color: white;
+ font-size: 32px;
+ font-weight: bold;
+ }
+ .input {
+ width: 85%;
+ display: flex;
+ flex-direction: column;
+
+ label {
+ color: white;
+ margin: 4px 0;
+ }
+ input {
+ width: 100%;
+ height: 40px;
+ border-radius: 8px;
+ border: none;
+ padding-left: 1rem;
+ }
+ }
+ }
+ .BtnWrap {
+ p {
+ margin-top: 8px;
+ color: white;
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
From 0b8c83fb38f81f146f0d6ddd689e7d7df83c26f0 Mon Sep 17 00:00:00 2001
From: koudaihirata <2230051@ecc.ac.jp>
Date: Mon, 6 Oct 2025 16:10:11 +0900
Subject: [PATCH 08/12] =?UTF-8?q?add:playwright=E3=81=A7E2E=E3=83=86?=
=?UTF-8?q?=E3=82=B9=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.github/workflows/playwright.yml | 6 +-
e2e/tests/home.spec.ts | 15 +++++
e2e/tests/problems.spec.ts | 10 +++
package.json | 6 +-
playwright.config.ts | 101 +++++++++----------------------
5 files changed, 61 insertions(+), 77 deletions(-)
create mode 100644 e2e/tests/home.spec.ts
create mode 100644 e2e/tests/problems.spec.ts
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index 2812391..bb1f1f1 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -12,15 +12,15 @@ jobs:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
- node-version: lts/*
+ node-version: '20'
- name: Install dependencies
run: npm ci
- name: Install Playwright Browsers
run: npx playwright install --with-deps
- name: Run Playwright tests
- run: npx playwright test
+ run: npx run test:e2e
- uses: actions/upload-artifact@v4
- if: ${{ !cancelled() }}
+ if: always()
with:
name: playwright-report
path: playwright-report/
diff --git a/e2e/tests/home.spec.ts b/e2e/tests/home.spec.ts
new file mode 100644
index 0000000..cfb1817
--- /dev/null
+++ b/e2e/tests/home.spec.ts
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('ホームページ', () => {
+ test('ページが正常に表示される', async ({ page }) => {
+ await page.goto('/')
+ await expect(page).toHaveTitle(/W2C Problem/)
+ await expect(page.locator('h1')).toBeVisible()
+ })
+
+ test('ナビゲーションメニューが機能する', async ({ page }) => {
+ await page.goto('/')
+ await page.click('text=問題集')
+ await expect(page).toHaveURL(/.*problems/)
+ })
+})
diff --git a/e2e/tests/problems.spec.ts b/e2e/tests/problems.spec.ts
new file mode 100644
index 0000000..ab907dc
--- /dev/null
+++ b/e2e/tests/problems.spec.ts
@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('問題一覧', () => {
+ test('問題一覧が表示される', async ({ page }) => {
+ await page.goto('/problems')
+
+ await expect(page.locator('h2')).toContainText('問題集')
+ await expect(page.locator('.problemsTable')).toBeVisible()
+ })
+})
diff --git a/package.json b/package.json
index 26f3682..6600c82 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,11 @@
"docker:test": "docker-compose -f docker/docker-compose.yml run test",
"docker:ci": "docker-compose -f docker/docker-compose.yml run ci",
"docker:build": "docker build -f docker/Dockerfile -t w2c-problem .",
- "docker:build:prod": "docker build -f docker/Dockerfile.prod -t w2c-problem:prod ."
+ "docker:build:prod": "docker build -f docker/Dockerfile.prod -t w2c-problem:prod .",
+ "test:e2e": "playwright test",
+ "test:e2e:ui": "playwright test --ui",
+ "test:e2e:debug": "playwright test --debug",
+ "test:e2e:report": "playwright show-report"
},
"dependencies": {
"big.js": "^7.0.1",
diff --git a/playwright.config.ts b/playwright.config.ts
index ac893e4..bd4984e 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,79 +1,34 @@
+// playwright.config.ts
import { defineConfig, devices } from '@playwright/test'
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// import dotenv from 'dotenv';
-// import path from 'path';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
export default defineConfig({
- testDir: './tests',
- /* Run tests in files in parallel */
- fullyParallel: true,
- /* Fail the build on CI if you accidentally left test.only in the source code. */
- forbidOnly: !!process.env.CI,
- /* Retry on CI only */
- retries: process.env.CI ? 2 : 0,
- /* Opt out of parallel tests on CI. */
- workers: process.env.CI ? 1 : undefined,
- /* Reporter to use. See https://playwright.dev/docs/test-reporters */
- reporter: 'html',
- /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
- use: {
- /* Base URL to use in actions like `await page.goto('/')`. */
- // baseURL: 'http://localhost:3000',
-
- /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
- trace: 'on-first-retry',
- },
-
- /* Configure projects for major browsers */
- projects: [
- {
- name: 'chromium',
- use: { ...devices['Desktop Chrome'] },
+ testDir: './e2e',
+ fullyParallel: true,
+ forbidOnly: !!process.env.CI,
+ retries: process.env.CI ? 2 : 0,
+ workers: process.env.CI ? 1 : undefined,
+ reporter: 'html',
+ use: {
+ baseURL: 'http://localhost:5173',
+ trace: 'on-first-retry',
},
-
- {
- name: 'firefox',
- use: { ...devices['Desktop Firefox'] },
+ projects: [
+ {
+ name: 'chromium',
+ use: { ...devices['Desktop Chrome'] },
+ },
+ {
+ name: 'firefox',
+ use: { ...devices['Desktop Firefox'] },
+ },
+ {
+ name: 'webkit',
+ use: { ...devices['Desktop Safari'] },
+ },
+ ],
+ webServer: {
+ command: 'npm run dev',
+ url: 'http://localhost:5173',
+ reuseExistingServer: !process.env.CI,
},
-
- {
- name: 'webkit',
- use: { ...devices['Desktop Safari'] },
- },
-
- /* Test against mobile viewports. */
- // {
- // name: 'Mobile Chrome',
- // use: { ...devices['Pixel 5'] },
- // },
- // {
- // name: 'Mobile Safari',
- // use: { ...devices['iPhone 12'] },
- // },
-
- /* Test against branded browsers. */
- // {
- // name: 'Microsoft Edge',
- // use: { ...devices['Desktop Edge'], channel: 'msedge' },
- // },
- // {
- // name: 'Google Chrome',
- // use: { ...devices['Desktop Chrome'], channel: 'chrome' },
- // },
- ],
-
- /* Run your local dev server before starting the tests */
- // webServer: {
- // command: 'npm run start',
- // url: 'http://localhost:3000',
- // reuseExistingServer: !process.env.CI,
- // },
})
From ef05c2a3cb97da262d420bef3d584f8fd8d28137 Mon Sep 17 00:00:00 2001
From: koudaihirata <2230051@ecc.ac.jp>
Date: Mon, 6 Oct 2025 16:26:39 +0900
Subject: [PATCH 09/12] =?UTF-8?q?update:githubActions=E3=81=AE=E5=90=8D?=
=?UTF-8?q?=E5=89=8D=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.github/workflows/playwright.yml | 27 -------
.github/workflows/tests.yml | 46 +++++++++++
.../workflows/{vitest.yml => vitest.yml.bak} | 0
src/components/Header/Header.test.tsx | 76 ++++++++-----------
4 files changed, 79 insertions(+), 70 deletions(-)
delete mode 100644 .github/workflows/playwright.yml
create mode 100644 .github/workflows/tests.yml
rename .github/workflows/{vitest.yml => vitest.yml.bak} (100%)
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
deleted file mode 100644
index bb1f1f1..0000000
--- a/.github/workflows/playwright.yml
+++ /dev/null
@@ -1,27 +0,0 @@
-name: Playwright Tests
-on:
- push:
- branches: [main, master]
- pull_request:
- branches: [main, master]
-jobs:
- test:
- timeout-minutes: 60
- runs-on: ubuntu-latest
- steps:
- - uses: actions/checkout@v4
- - uses: actions/setup-node@v4
- with:
- node-version: '20'
- - name: Install dependencies
- run: npm ci
- - name: Install Playwright Browsers
- run: npx playwright install --with-deps
- - name: Run Playwright tests
- run: npx run test:e2e
- - uses: actions/upload-artifact@v4
- if: always()
- with:
- name: playwright-report
- path: playwright-report/
- retention-days: 30
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
new file mode 100644
index 0000000..0c44972
--- /dev/null
+++ b/.github/workflows/tests.yml
@@ -0,0 +1,46 @@
+name: Tests
+on:
+ push:
+ branches: [main, master]
+ pull_request:
+ branches: [main, master]
+jobs:
+ unit-tests:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+ with:
+ node-version: '20'
+ - name: Install dependencies
+ run: npm ci
+ - name: Run unit tests
+ run: npm run test:run
+ - name: Upload coverage reports
+ uses: actions/upload-artifact@v4
+ if: always()
+ with:
+ name: coverage-report
+ path: coverage/
+ retention-days: 30
+
+ e2e-tests:
+ runs-on: ubuntu-latest
+ needs: unit-tests # ユニットテストが成功した場合のみ実行
+ steps:
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+ with:
+ node-version: '20'
+ - name: Install dependencies
+ run: npm ci
+ - name: Install Playwright Browsers
+ run: npx playwright install --with-deps
+ - name: Run Playwright tests
+ run: npm run test:e2e
+ - uses: actions/upload-artifact@v4
+ if: always()
+ with:
+ name: playwright-report
+ path: playwright-report/
+ retention-days: 30
diff --git a/.github/workflows/vitest.yml b/.github/workflows/vitest.yml.bak
similarity index 100%
rename from .github/workflows/vitest.yml
rename to .github/workflows/vitest.yml.bak
diff --git a/src/components/Header/Header.test.tsx b/src/components/Header/Header.test.tsx
index 842fc20..97e7360 100644
--- a/src/components/Header/Header.test.tsx
+++ b/src/components/Header/Header.test.tsx
@@ -10,47 +10,37 @@ const Wrapper = ({ children }: { children: React.ReactNode }) => (
)
describe('Header', () => {
- it('should render header elements correctly', () => {
- render(
+ 
+
+ + 学校のメールアドレスを入力してください +
+
+
+
+