Corrections from PR Review (50%)

src/components/Header/DesktopHeader.tsx

@@ -35,6 +35,9 @@ const DesktopHeader: FC = () => {
             <StyledNavLink to="/team" style={{ textDecoration: 'none', color: 'white' }}>
                 <Typography variant="overline">{t('header.team')}</Typography>
             </StyledNavLink>
+            <StyledNavLink to="/job" style={{ textDecoration: 'none', color: 'white' }}>
+                <Typography variant="overline">{t('header.job')}</Typography>
+            </StyledNavLink>
             <StyledNavLink to="/codeofconduct" style={{ textDecoration: 'none', color: 'white' }}>
                 <Typography variant="overline">{t('header.codeOfConduct')}</Typography>
             </StyledNavLink>

src/components/JobCard/JobCard.tsx

@@ -4,26 +4,16 @@ import BusinessIcon from '@mui/icons-material/Business'
 import LocationOnIcon from '@mui/icons-material/LocationOn'
 import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'
 import AccessTimeIcon from '@mui/icons-material/AccessTime'
+import JobData from '@/types/JobListing'
 
 
 interface JobCardProps {
-    title: string;
-    company: string;
-    logoUrl: string;
-    jobPostingUrl: string;
-    location:string,
-    salary: string;
-    publicationDate:string;
-    tags: string[];
+    job: JobData
 }
 
-const JobCard: FC<JobCardProps> = ({ title, company, logoUrl, jobPostingUrl, location, salary, publicationDate, tags }) => {
+const JobCard: FC<JobCardProps> = ({ job }) => {
     const handleReadMoreClick = () => {
-        if (jobPostingUrl) {
-            window.open(jobPostingUrl, '_blank', 'noopener,noreferrer')
-        } else {
-            console.error('No URL provided')
-        }
+        window.open(job.jobPostingUrl, '_blank', 'noopener,noreferrer')
     }
 
     return (
@@ -34,30 +24,30 @@ const JobCard: FC<JobCardProps> = ({ title, company, logoUrl, jobPostingUrl, loc
                         <Grid item xs={12} sm={12} md={2} display="flex" justifyContent="center">
                             <Avatar
                                 sx={{ bgcolor: 'grey', width: 80, height: 80, borderRadius: 2 }}
-                                alt={`${company} logo`}
-                                src={logoUrl}
+                                alt={`${job.company} logo`}
+                                src={job.logoUrl}
                             />
                         </Grid>
                         <Grid item xs={12} sm={12} md={8}>
                             <Typography variant="h6" component="div" sx={{ textAlign: 'left' }}>
-                                {title}
+                                {job.title}
                             </Typography>
                             <Grid container spacing={2}>
                                 <Grid item xs={12} sm={4} sx={{ display: 'flex', justifyContent: { xs: 'flex-start', sm: 'center' }, alignItems: 'center' }}>
                                     <BusinessIcon fontSize="small" />
-                                    <Typography fontSize="medium" sx={{ ml: 1 }}>{company}</Typography>
+                                    <Typography fontSize="medium" sx={{ ml: 1 }}>{job.company}</Typography>
                                 </Grid>
                                 <Grid item xs={12} sm={4} sx={{ display: 'flex', justifyContent: { xs: 'flex-start', sm: 'center' }, alignItems: 'center' }}>
                                     <LocationOnIcon fontSize="small" />
-                                    <Typography fontSize="medium" sx={{ ml: 1 }}>{location}</Typography>
+                                    <Typography fontSize="medium" sx={{ ml: 1 }}>{job.location}</Typography>
                                 </Grid>
                                 <Grid item xs={12} sm={4} sx={{ display: 'flex', justifyContent: { xs: 'flex-start', sm: 'center' }, alignItems: 'center' }}>
                                     <AccountBalanceWalletIcon fontSize="small" />
-                                    <Typography fontSize="medium" sx={{ ml: 1 }}>{salary}</Typography>
+                                    <Typography fontSize="medium" sx={{ ml: 1 }}>{job.salary}</Typography>
                                 </Grid>
                             </Grid>
                             <Grid container spacing={1} mt={0.5} justifyContent="flex-start">
-                                {tags.map((tag, index) => (
+                                {job.tags.map((tag, index) => (
                                     <Grid item key={index}>
                                         <Chip label={tag} sx={{ bgcolor: '#6A1B9A', color: 'white', height: 32, borderRadius: '8px' }} />
                                     </Grid>
@@ -71,7 +61,7 @@ const JobCard: FC<JobCardProps> = ({ title, company, logoUrl, jobPostingUrl, loc
                                 </Grid>
                                 <Grid item>
                                     <Typography fontSize="medium">
-                                        { publicationDate }
+                                        { job.publicationDate }
                                     </Typography>
                                 </Grid>
                             </Grid>

src/i18n/en/translation.json

@@ -2,7 +2,8 @@
     "header": {
         "codeOfConduct": "Code of Conduct",
         "subtitle": "Women in Software Engineering Japan",
-        "team": "Team"
+        "team": "Team",
+        "job": "Jobs"
     },
     "home": {
         "helloWorld": "✨ Hello World ✨",
@@ -18,4 +19,8 @@
     "team": {
         "title": "✨ Leadership Team ✨"
     }
+    ,
+    "job": {
+        "title": "✨ Job Board ✨"
+    }
 }

src/i18n/ja/translation.json

@@ -2,7 +2,8 @@
     "header": {
         "codeOfConduct": "行動規範",
         "subtitle": "ウーマン・イン・ソフトウェアエンジニアリング",
-        "team": "チーム"
+        "team": "チーム",
+        "job": "求人掲示板"
     },
     "home": {
         "helloWorld": "✨ Hello 世界 ✨",
@@ -17,5 +18,8 @@
     },
     "team": {
         "title": "✨ リーダーシップ・チーム ✨"
+    },
+    "job": {
+        "title": "✨ 求人掲示板 ✨"
     }
 }

src/routes/JobBoard/JobBoard.tsx

@@ -1,26 +1,24 @@
-import { FC } from 'react'
+import { FC, ReactNode } from 'react'
 import JobCard from '@/components/JobCard/JobCard'
-import { Container } from '@mui/material'
-import { jobData } from '@/utils/jobData'
+import { Container, Stack, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import  job from '@/routes/JobBoard/jobs.json'
+import JobData from '@/types/JobListing'
 
 const JobBoard:FC = () => {
-    return (
-        <Container style={{ padding: 25 }}>
-            {jobData.map((job, index) => (
-                <JobCard
-                    key={index}
-                    title={job.title}
-                    company={job.company}
-                    logoUrl={job.logoUrl}
-                    location={job.location}
-                    jobPostingUrl={job.jobPostingUrl}
-                    salary={job.salary}
-                    publicationDate={job.publicationDate}
-                    tags={job.tags}
-                />
-            ))}
-        </Container>
-    )
+    const { t } = useTranslation()
+
+    const jobGrid: ReactNode[] = []
+    job.forEach((jobDescription: JobData) => {
+        jobGrid.push(<JobCard job={jobDescription}/>)
+    })
+
+    return <Container style={{ padding: 32 }} aria-label="job-board-container">
+        <Stack spacing={4}>
+            <Typography variant="h1">{t('job.title')}</Typography>
+            {jobGrid}
+        </Stack>
+    </Container>
 }
 
 export default JobBoard

src/routes/JobBoard/jobs.json

@@ -0,0 +1,12 @@
+[
+    {
+        "title": "Software Engineer",
+        "company": "Amazon Web Services (AWS)",
+        "logoUrl": "/",
+        "location": "Tokyo, Japan",
+        "jobPostingUrl": "http://example.com",
+        "salary": "¥9M ~ ¥11M annually",
+        "publicationDate": "2024/07/27",
+        "tags": ["Full Time", "Senior Level", "Remote", "English"]
+    }
+]

src/routes/Router.tsx

@@ -8,11 +8,8 @@ import Home from './Home/Home'
 import BaseLayout from './BaseLayout'
 import NotFound from './NotFound/NotFound'
 import CodeOfConduct from './CodeOfConduct/CodeOfConduct'
-<<<<<<< HEAD
-import JobBoard from './JobBoard/JobBoard'
-=======
 import Team from './Team/Team'
->>>>>>> main
+import JobBoard from './JobBoard/JobBoard'
 
 const browserRouter = createHashRouter([{
     element: <BaseLayout />,
@@ -26,13 +23,12 @@ const browserRouter = createHashRouter([{
             element: <CodeOfConduct />
         },
         {
-<<<<<<< HEAD
-            path: 'jobboard',
-            element: <JobBoard />
-=======
             path: 'team',
             element: <Team />
->>>>>>> main
+        },
+        {
+            path: 'jobs',
+            element: <JobBoard />
         },
         {
             path: 'theme',

src/types/JobListing.ts

@@ -0,0 +1,12 @@
+type JobListing = {
+    title:string,
+    company: string,
+    logoUrl: string,
+    location: string,
+    jobPostingUrl: string,
+    salary: string,
+    publicationDate: string,
+    tags: string []
+}
+
+export default JobListing