diff --git a/src/App.tsx b/src/App.tsx index 41714a3..8798562 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -44,7 +44,7 @@ const MainLayout: React.FC = () => { return (
-
setState(state)} state={state} /> +
setState(state)} state={state} user={user} />
+ + + + + diff --git a/src/assets/ManagementIconAc.svg b/src/assets/ManagementIconAc.svg new file mode 100644 index 0000000..52e5c76 --- /dev/null +++ b/src/assets/ManagementIconAc.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/Header/Header.test.tsx b/src/components/Header/Header.test.tsx index 9b86358..7696460 100644 --- a/src/components/Header/Header.test.tsx +++ b/src/components/Header/Header.test.tsx @@ -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 }) => ( {children} ) +const user: UserCookieFmt0001VO.Type = testUserData describe('Header', () => { it('should render header elements correctly', () => { - render(
console.log('テスト')} state={true} />, { - wrapper: Wrapper, - }) + render( +
console.log('テスト')} + state={true} + user={user} + />, + { + wrapper: Wrapper, + }, + ) // ヘッダーが表示されていることを確認 const header = screen.getByRole('banner') expect(header).toBeInTheDocument() diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 90c4882..366aac0 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -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 (
@@ -68,16 +67,18 @@ export default function Header(props: Type) { >
  • 問題作成
    • - -
  • 運営管理
    • - + {props.user?.role === 'reviewer' && ( + +
  • 運営管理
    • + + )}
    diff --git a/src/components/Header/Heder.stories.tsx b/src/components/Header/Heder.stories.tsx index 062981b..34ab5ce 100644 --- a/src/components/Header/Heder.stories.tsx +++ b/src/components/Header/Heder.stories.tsx @@ -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 = { @@ -21,6 +25,8 @@ const meta = { export default meta type Story = StoryObj +const user: UserCookieFmt0001VO.Type = testUserData + export const Default: Story = { args: { void: () => { @@ -28,5 +34,6 @@ export const Default: Story = { console.log('clicked') }, state: false, // 初期状態 + user, }, } diff --git a/src/components/Header/style.module.css b/src/components/Header/style.module.css index efd1cce..4c208f1 100644 --- a/src/components/Header/style.module.css +++ b/src/components/Header/style.module.css @@ -39,7 +39,6 @@ background: var(--lightMouseColor); height: 100vh; width: 240px; - /* transform: translateX(-100%); */ transition: left .4s; z-index: 1; ul{ @@ -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); @@ -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; } } } @@ -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; } } diff --git a/src/models/entity/client/fmt/UserCookieFmt0001VO.ts b/src/models/entity/client/fmt/UserCookieFmt0001VO.ts index 6ffc729..bb9acb4 100644 --- a/src/models/entity/client/fmt/UserCookieFmt0001VO.ts +++ b/src/models/entity/client/fmt/UserCookieFmt0001VO.ts @@ -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', +}