Skip to content

main <- Develop #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
koudaihirata merged 3 commits into from
Dec 18, 2025
Merged

main <- Develop #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cdd5c7a
update:運営管理のアイコン＆表示条件変更
koudaihirata Dec 18, 2025
2d81e23
Merge pull request #18 from 144compW2C/header-sideMenu
koudaihirata Dec 18, 2025
4185e4a
fix:ビルドエラー修正
koudaihirata Dec 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const MainLayout: React.FC = () => {

return (
<main>
<Header void={() => setState(state)} state={state} />
<Header void={() => setState(state)} state={state} user={user} />
<div
style={{
marginLeft: state ? '240px' : '0px',
Expand Down
6 changes: 6 additions & 0 deletions src/assets/ManagementIcon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions src/assets/ManagementIconAc.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 15 additions & 3 deletions src/components/Header/Header.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,29 @@ import { render, screen } from '@testing-library/react'
import { BrowserRouter } from 'react-router-dom'
import { describe, it, expect } from 'vitest'
import Header from './Header'
import {
testUserData,
UserCookieFmt0001VO,
} from '@/models/entity/client/fmt/UserCookieFmt0001VO'

// テスト用のWrapper
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<BrowserRouter>{children}</BrowserRouter>
)
const user: UserCookieFmt0001VO.Type = testUserData

describe('Header', () => {
it('should render header elements correctly', () => {
render(<Header void={() => console.log('テスト')} state={true} />, {
wrapper: Wrapper,
})
render(
<Header
void={() => console.log('テスト')}
state={true}
user={user}
/>,
{
wrapper: Wrapper,
},
)
// ヘッダーが表示されていることを確認
const header = screen.getByRole('banner')
expect(header).toBeInTheDocument()
Expand Down
29 changes: 15 additions & 14 deletions src/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,17 @@ import styles from './style.module.css'
import hamburgerIcon from '../../assets/hamburger.svg'
import iconImg from '../../assets/icon.jpg'
import { Link, useLocation } from 'react-router-dom'
import { UserCookieFmt0001VO } from '@/models/entity/client/fmt/UserCookieFmt0001VO'

type Type = {
void: () => void
state: boolean
user: UserCookieFmt0001VO.Type | undefined
}

export default function Header(props: Type) {
// const [isOpen, setIsOpen] = useState(false)
// const toggleHamburger = () => {
// setIsOpen(!isOpen)
// }
const location = useLocation()

return (
<header className={styles.headerWrap}>
<div className={styles.header}>
Expand Down Expand Up @@ -68,16 +67,18 @@ export default function Header(props: Type) {
>
<li>問題作成</li>
</Link>
<Link
to={'/admin'}
className={
location.pathname.startsWith('/admin')
? styles.active
: ''
}
>
<li>運営管理</li>
</Link>
{props.user?.role === 'reviewer' && (
<Link
to={'/admin'}
className={
location.pathname.startsWith('/admin')
? styles.active
: ''
}
>
<li>運営管理</li>
</Link>
)}
</ul>
</nav>
</div>
Expand Down
7 changes: 7 additions & 0 deletions src/components/Header/Heder.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
import { BrowserRouter } from 'react-router-dom'

import Header from './Header'
import {
testUserData,
UserCookieFmt0001VO,
} from '@/models/entity/client/fmt/UserCookieFmt0001VO'

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
Expand All @@ -21,12 +25,15 @@ const meta = {
export default meta
type Story = StoryObj<typeof meta>

const user: UserCookieFmt0001VO.Type = testUserData

export const Default: Story = {
args: {
void: () => {
// ダミーの関数。クリック時などに呼ばれる想定
console.log('clicked')
},
state: false, // 初期状態
user,
},
}
13 changes: 6 additions & 7 deletions src/components/Header/style.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@
background: var(--lightMouseColor);
height: 100vh;
width: 240px;
/* transform: translateX(-100%); */
transition: left .4s;
z-index: 1;
ul{
Expand Down Expand Up @@ -80,10 +79,10 @@
margin: 0 10px;
}
&:nth-child(4)::before{
content: url("../../assets/createTaskIcon.svg");
content: url("../../assets/ManagementIcon.svg");
height: 40px;
width: 40px;
margin: 0 10px;
margin: 6px 10px 0;
}
&:hover{
background: var(--mouseColor);
Expand All @@ -108,10 +107,10 @@
margin: 0 10px;
}
&:nth-child(4)::before{
content: url("../../assets/createTaskIconAc.svg");
content: url("../../assets/ManagementIconAc.svg");
height: 40px;
width: 40px;
margin: 0 10px;
margin: 6px 10px 0;
}
}
}
Expand All @@ -137,10 +136,10 @@
margin: 0 10px;
}
&:nth-child(4)::before{
content: url("../../assets/createTaskIconAc.svg");
content: url("../../assets/ManagementIconAc.svg");
height: 40px;
width: 40px;
margin: 0 10px;
margin: 6px 10px 0;
}

}
Expand Down
8 changes: 8 additions & 0 deletions src/models/entity/client/fmt/UserCookieFmt0001VO.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,11 @@ export namespace UserCookieFmt0001VO {
class_name: string
}
}

export const testUserData = {
id: 100,
name: 'テスト太郎',
email: 'ecccomp123@ecc.ac.jp',
role: 'reviewer',
class_name: 'WD2A',
}
Loading