[M1_TR-212] Refactored structure

web/src/app/job/context.ts

@@ -0,0 +1,4 @@
+import { JobTable } from '@/utils/types/job';
+import { createContext } from 'react';
+
+export const JobListContext = createContext<JobTable | undefined>(undefined);

web/src/app/job/hooks.ts

@@ -0,0 +1,22 @@
+import { JobTable } from '@/utils/types/job';
+import { useContext, useState } from 'react';
+import { JobListContext } from './context';
+
+export const useJobListContext = (): JobTable => {
+    const jobs = useContext(JobListContext);
+
+    if (jobs === undefined) {
+        throw new Error('Missing JobListContext');
+    }
+
+    return jobs;
+};
+
+export const useHooks = () => {
+    const [page, setPage] = useState(1);
+
+	return {        
+        page,
+        setPage
+    };
+};

web/src/app/job/page.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import Pagination from '@/components/atoms/Pagination';
+import JobListTable from '@/components/organisms/JobListTable';
+import SearchFilterHeader from '@/components/organisms/SearchFilterHeader';
+import { JobColumns, JobData } from '@/utils/constants/jobTableData';
+import { Grid } from '@mui/material';
+import { JobListContext } from './context';
+import { useHooks } from './hooks';
+
+const JobList = (): JSX.Element => {
+	const { page, setPage } = useHooks();
+
+	return (
+		<main>
+			<JobListContext.Provider
+				value={{ columns: JobColumns, data: JobData }}>
+				<Grid
+					container
+					sx={{
+						padding: 3,
+						gap: 3,
+						flexDirection: 'column'
+					}}>
+					<Grid item>
+						<SearchFilterHeader />
+					</Grid>
+					<Grid item>
+						<JobListTable />
+					</Grid>
+					<Grid item sx={{ alignSelf: 'center' }}>
+						<Pagination count={12} page={page} onChange={setPage} />
+					</Grid>
+				</Grid>
+			</JobListContext.Provider>
+		</main>
+	);
+};
+
+export default JobList;

web/src/components/atoms/Pagination.tsx → web/src/components/atoms/Pagination/index.tsx

@@ -7,20 +7,15 @@ interface Props {
 	onChange: (page: number) => void;
 }
 
-const Pagination: FC<Props> = ({ count = 12, page = 1, onChange }: Props) => {
-	const handlePageChange = (
-		event: React.ChangeEvent<unknown>,
-		newPage: number
-	) => {
-		onChange(newPage);
-	};
-
+const Pagination: FC<Props> = ({ count, page, onChange }: Props) => {
 	return (
 		<MUIPagination
 			size='medium'
 			count={count}
 			page={page}
-			onChange={handlePageChange}
+			onChange={(e: React.ChangeEvent<unknown>, newPage: number) =>
+				onChange(newPage)
+			}
 			color='primary'
 			shape='rounded'
 			showFirstButton

web/src/components/atoms/StatusChip/index.tsx

@@ -0,0 +1,17 @@
+import { ChipColors } from '@/utils/constants/statusChipColor';
+import { Chip, ChipProps } from '@mui/material';
+import { FC } from 'react';
+
+const StatusChip: FC<ChipProps> = ({ label }: ChipProps) => {
+	return (
+		<Chip
+			label={label}
+			sx={{
+				backgroundColor: ChipColors[label as string] ?? '#65707b33',
+				typography: 'label1r'
+			}}
+		/>
+	);
+};
+
+export default StatusChip;

web/src/components/molecules/CreatedDateRangeFilter/hooks.ts

@@ -0,0 +1,22 @@
+import { Moment } from 'moment';
+import { useState } from 'react';
+
+export const useHooks = () => {
+    const [startDate, setStartDate] = useState<Moment | null>();
+	const [endDate, setEndDate] = useState<Moment | null>();
+
+    const handleStartDateChange = (date: Moment | null): void => {
+		setStartDate(date);
+	};
+
+	const handleEndDateChange = (date: Moment | null): void => {
+		setEndDate(date);
+	};
+
+    return {
+        startDate,
+        handleStartDateChange,
+        endDate,
+        handleEndDateChange
+    };
+};

web/src/components/molecules/CreatedDateRangeFilter.tsx → web/src/components/molecules/CreatedDateRangeFilter/index.tsx

@@ -1,24 +1,15 @@
 'use-client';
 
+import styles from '@/styles/Filter.module.css';
 import { Box } from '@mui/material';
 import { DatePicker } from '@mui/x-date-pickers';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { Moment } from 'moment';
-import { useState } from 'react';
-import styles from 'styles/Filter.module.css';
+import { useHooks } from './hooks';
 
 const CreateDateRangeFilter = () => {
-	const [startDate, setStartDate] = useState<Moment | null>();
-	const [endDate, setEndDate] = useState<Moment | null>();
-
-	const handleStartDateChange = (date: Moment | null): void => {
-		setStartDate(date);
-	};
-
-	const handleEndDateChange = (date: Moment | null): void => {
-		setEndDate(date);
-	};
+	const { startDate, handleStartDateChange, endDate, handleEndDateChange } =
+		useHooks();
 
 	return (
 		<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>

web/src/components/molecules/EstimationStatusFilter/hooks.ts

@@ -0,0 +1,15 @@
+import { SelectChangeEvent } from '@mui/material';
+import { useState } from 'react';
+
+export const useHooks = () => {
+	const [status, setStatus] = useState('');
+
+	const handleChange = (e: SelectChangeEvent) => {
+		setStatus(e.target.value);
+	};
+
+	return {
+		status,
+		handleChange
+	};
+};

web/src/components/molecules/EstimationStatusFilter/index.tsx

@@ -0,0 +1,33 @@
+import styles from '@/styles/Filter.module.css';
+import { EstimationStatus } from '@/utils/constants/estimationStatus';
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import { useHooks } from './hooks';
+
+const EstimationStatusFilter = () => {
+	const { status, handleChange } = useHooks();
+
+	return (
+		<FormControl sx={{ width: 180 }}>
+			<InputLabel size='small' id='estimation-status-label'>
+				Estimation Status
+			</InputLabel>
+			<Select
+				size='small'
+				labelId='estimation-status-label'
+				name='estimation-status'
+				value={status}
+				label='Estimation Status'
+				color='secondary'
+				onChange={handleChange}
+				className={styles.input}>
+				{EstimationStatus.map((status) => (
+					<MenuItem key={status.id} value={status.status}>
+						{status.status}
+					</MenuItem>
+				))}
+			</Select>
+		</FormControl>
+	);
+};
+
+export default EstimationStatusFilter;

web/src/components/molecules/SearchBar/hooks.ts

@@ -0,0 +1,15 @@
+import { ChangeEvent, useState } from 'react';
+
+export const useHooks = () => {
+    const [searchKeyword, setSearchKeyword] = useState('');
+
+	const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
+		setSearchKeyword(e.target.value);
+	};
+
+    return {
+        searchKeyword,
+        handleSearch
+    };
+
+};

web/src/components/molecules/SearchBar.tsx → web/src/components/molecules/SearchBar/index.tsx

@@ -1,19 +1,15 @@
+import styles from '@/styles/Filter.module.css';
 import SearchIcon from '@mui/icons-material/Search';
 import {
 	FormControl,
 	InputAdornment,
 	InputLabel,
 	OutlinedInput
 } from '@mui/material';
-import { useState } from 'react';
-import styles from 'styles/Filter.module.css';
+import { useHooks } from './hooks';
 
 const SearchBar = () => {
-	const [searchKeyword, setSearchKeyword] = useState('');
-
-	const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-		setSearchKeyword(e.target.value);
-	};
+	const { searchKeyword, handleSearch } = useHooks();
 
 	return (
 		<FormControl fullWidth>

web/src/components/molecules/TagFilter/hooks.ts

@@ -0,0 +1,15 @@
+import { SelectChangeEvent } from '@mui/material';
+import { useState } from 'react';
+
+export const useHooks = () => {
+    const [tag, setTag] = useState('');
+
+	const handleChange = (e: SelectChangeEvent) => {
+		setTag(e.target.value);
+	};
+
+    return {
+        tag,
+        handleChange
+    };
+};