[Feat] LogPage, HistoryPage 퍼블리싱 및 리스트 컴포넌트 작업

app/(dashboard)/history/components/ListItem/index.tsx

@@ -0,0 +1,39 @@
+import { RightIcon } from '@/public/icons'
+import { ListItemModel } from '@/types/history'
+
+import * as styles from './styles.css'
+
+interface ListItemProps {
+    data: ListItemModel
+}
+
+const ListItem = ({ data }: ListItemProps) => {
+    const {
+        vehicleNumber,
+        department,
+        name,
+        drivingDays,
+        averageDrivingDistance,
+        averageDrivingTime,
+        totalDrivingDistance,
+        drivingRate,
+    } = data
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.itemWrapper}>{vehicleNumber}</div>
+            <span className={styles.itemWrapper}>{department}</span>
+            <span className={styles.itemWrapper}>{name}</span>
+            <span className={styles.itemWrapper}>{drivingDays}일</span>
+            <span className={styles.itemWrapper}>{averageDrivingDistance}km</span>
+            <span className={styles.itemWrapper}>{averageDrivingTime}분</span>
+            <span className={styles.itemWrapper}>{totalDrivingDistance}km</span>
+            <span className={styles.itemWrapper}>{drivingRate}%</span>
+            <div className={styles.icon}>
+                <RightIcon />
+            </div>
+        </div>
+    )
+}
+
+export default ListItem

app/(dashboard)/history/components/ListItem/styles.css.ts

@@ -0,0 +1,23 @@
+import { style } from '@vanilla-extract/css'
+
+import { styles } from '@/styles/theme.css'
+
+export const container = style({
+    display: 'flex',
+    alignItems: 'center',
+    textAlign: 'center',
+    padding: '24px 0px',
+    borderBottom: `1px solid ${styles.colors.gray[200]}`,
+    color: styles.colors.black,
+    fontWeight: styles.fontWeights.bold,
+    fontSize: styles.fontSizes.mediumPlus,
+})
+
+export const itemWrapper = style({
+    flex: 1,
+})
+
+export const icon = style({
+    width: '24px',
+    height: '24px',
+})

app/(dashboard)/history/page.tsx

@@ -1,5 +1,149 @@
+'use client'
+
+import ListHeader from '@/components/domain/vehicle/ListHeader'
+import SearchField from '@/components/domain/vehicle/SearchField'
+import { ListItemModel } from '@/types/history'
+
+import ListItem from './components/ListItem/index'
+import * as styles from './styles.css'
+
 const HistoryPage = () => {
-    return <div>HistoryPage</div>
+    // TODO 실제 데이터로 변경하기
+    const mockHistoryData: ListItemModel[] = [
+        {
+            id: 1,
+            vehicleNumber: '123가 4567',
+            department: '해외영업1팀',
+            name: '김알린',
+            drivingDays: 15,
+            averageDrivingDistance: 150,
+            averageDrivingTime: 480,
+            totalDrivingDistance: 2250,
+            drivingRate: '85',
+        },
+        {
+            id: 2,
+            vehicleNumber: '456나 7890',
+            department: '국내영업2팀',
+            name: '이택배',
+            drivingDays: 12,
+            averageDrivingDistance: 180,
+            averageDrivingTime: 420,
+            totalDrivingDistance: 2160,
+            drivingRate: '78',
+        },
+        {
+            id: 3,
+            vehicleNumber: '789다 1234',
+            department: '해외영업2팀',
+            name: '박배송',
+            drivingDays: 18,
+            averageDrivingDistance: 165,
+            averageDrivingTime: 510,
+            totalDrivingDistance: 2970,
+            drivingRate: '92',
+        },
+        {
+            id: 4,
+            vehicleNumber: '321라 5678',
+            department: '국내영업1팀',
+            name: '최드라',
+            drivingDays: 14,
+            averageDrivingDistance: 145,
+            averageDrivingTime: 450,
+            totalDrivingDistance: 2030,
+            drivingRate: '75',
+        },
+        {
+            id: 5,
+            vehicleNumber: '654마 9012',
+            department: '해외영업3팀',
+            name: '정기사',
+            drivingDays: 16,
+            averageDrivingDistance: 175,
+            averageDrivingTime: 495,
+            totalDrivingDistance: 2800,
+            drivingRate: '88',
+        },
+        {
+            id: 6,
+            vehicleNumber: '987바 3456',
+            department: '국내영업3팀',
+            name: '강운전',
+            drivingDays: 13,
+            averageDrivingDistance: 155,
+            averageDrivingTime: 435,
+            totalDrivingDistance: 2015,
+            drivingRate: '82',
+        },
+        {
+            id: 7,
+            vehicleNumber: '147사 7890',
+            department: '해외영업1팀',
+            name: '조안전',
+            drivingDays: 17,
+            averageDrivingDistance: 185,
+            averageDrivingTime: 525,
+            totalDrivingDistance: 3145,
+            drivingRate: '95',
+        },
+        {
+            id: 8,
+            vehicleNumber: '258아 1234',
+            department: '국내영업2팀',
+            name: '윤차량',
+            drivingDays: 11,
+            averageDrivingDistance: 135,
+            averageDrivingTime: 390,
+            totalDrivingDistance: 1485,
+            drivingRate: '70',
+        },
+        {
+            id: 9,
+            vehicleNumber: '369자 5678',
+            department: '해외영업2팀',
+            name: '한주행',
+            drivingDays: 19,
+            averageDrivingDistance: 195,
+            averageDrivingTime: 540,
+            totalDrivingDistance: 3705,
+            drivingRate: '98',
+        },
+        {
+            id: 10,
+            vehicleNumber: '159차 9012',
+            department: '국내영업3팀',
+            name: '황배달',
+            drivingDays: 15,
+            averageDrivingDistance: 160,
+            averageDrivingTime: 465,
+            totalDrivingDistance: 2400,
+            drivingRate: '86',
+        },
+    ]
+
+    const headerTitles = [
+        '차량번호',
+        '부서명',
+        '이름',
+        '운행일수',
+        '평균운행거리',
+        '평균운행시간',
+        '총운행거리',
+        '운행률',
+    ]
+    return (
+        <div>
+            <SearchField hasButton={false} />
+            <div className={styles.listWrapper}>
+                <ListHeader headerTitles={headerTitles} />
+                {mockHistoryData.map((history) => (
+                    <ListItem key={history.id} data={history} />
+                ))}
+            </div>
+            {/* TODO 페이지네이션 추가 */}
+        </div>
+    )
 }
 
 export default HistoryPage

app/(dashboard)/history/styles.css.ts

@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css'
+
+export const listWrapper = style({
+    padding: '120px 100px',
+    display: 'flex',
+    flexDirection: 'column',
+})

app/(dashboard)/log/components/ListItem/index.tsx

@@ -0,0 +1,28 @@
+import Badge from '@/components/common/Badge'
+import { RightIcon } from '@/public/icons'
+import { ListItemModel } from '@/types/log'
+
+import * as styles from './styles.css'
+
+interface ListItemProps {
+    data: ListItemModel
+}
+
+const ListItem = ({ data }: ListItemProps) => {
+    const { vehicleNumber, vehicleModel, status } = data
+
+    return (
+        <div className={styles.container}>
+            <span className={styles.itemWrapper}>{vehicleNumber}</span>
+            <span className={styles.itemWrapper}>{vehicleModel}</span>
+            <span className={styles.itemWrapper}>
+                <Badge shape={'rectangle'} variant={status} />
+            </span>
+            <div className={styles.icon}>
+                <RightIcon />
+            </div>
+        </div>
+    )
+}
+
+export default ListItem

app/(dashboard)/log/components/ListItem/styles.css.ts

@@ -0,0 +1,23 @@
+import { style } from '@vanilla-extract/css'
+
+import { styles } from '@/styles/theme.css'
+
+export const container = style({
+    display: 'flex',
+    alignItems: 'center',
+    textAlign: 'center',
+    padding: '24px 0px',
+    borderBottom: `1px solid ${styles.colors.gray[200]}`,
+    color: styles.colors.black,
+    fontWeight: styles.fontWeights.bold,
+    fontSize: styles.fontSizes.mediumPlus,
+})
+
+export const itemWrapper = style({
+    flex: 1,
+})
+
+export const icon = style({
+    width: '24px',
+    height: '24px',
+})

app/(dashboard)/log/page.tsx

@@ -1,5 +1,42 @@
+'use client'
+
+import ListHeader from '@/components/domain/vehicle/ListHeader'
+import SearchField from '@/components/domain/vehicle/SearchField'
+import { ListItemModel } from '@/types/log'
+
+import ListItem from './components/ListItem/index'
+import * as styles from './styles.css'
+
 const LogPage = () => {
-    return <div></div>
+    // TODO 실제 데이터로 변경하기
+    const mockLogData: ListItemModel[] = [
+        { id: 1, vehicleNumber: '123가 4567', vehicleModel: '미니쿠퍼', status: '운행중' },
+        { id: 2, vehicleNumber: '456나 7890', vehicleModel: '현대', status: '미운행' },
+        { id: 3, vehicleNumber: '789다 1234', vehicleModel: '기아', status: '미관제' },
+        { id: 4, vehicleNumber: '321라 5678', vehicleModel: '토요타', status: '운행중' },
+        { id: 5, vehicleNumber: '654마 9012', vehicleModel: '벤츠', status: '미운행' },
+        { id: 6, vehicleNumber: '987바 3456', vehicleModel: '테슬라', status: '미운행' },
+        { id: 7, vehicleNumber: '147사 7890', vehicleModel: '아우디', status: '운행중' },
+        { id: 8, vehicleNumber: '258아 1234', vehicleModel: '포르쉐', status: '운행중' },
+        { id: 9, vehicleNumber: '369자 5678', vehicleModel: '볼보', status: '운행중' },
+        { id: 10, vehicleNumber: '159차 9012', vehicleModel: '폭스바겐', status: '운행중' },
+    ]
+
+    const headerTitles = ['차량번호', '차종', '차량현황']
+
+    return (
+        <div>
+            <SearchField hasButton={true} />
+            <div className={styles.listWrapper}>
+                <ListHeader headerTitles={headerTitles} />
+                {mockLogData.map((log) => (
+                    <ListItem key={log.id} data={log} />
+                ))}
+            </div>
+
+            {/* TODO 페이지네이션 추가 */}
+        </div>
+    )
 }
 
 export default LogPage

app/(dashboard)/log/styles.css.ts

@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css'
+
+export const listWrapper = style({
+    padding: '120px 100px',
+    display: 'flex',
+    flexDirection: 'column',
+})

components/common/Badge/styles.css.ts

@@ -13,7 +13,6 @@ export const shape = styleVariants({
     [BADGE_SHAPE.RECTANGLE]: {
         paddingLeft: '12px',
         paddingRight: '12px',
-        fontSize: styles.fontSizes.small,
         borderRadius: '4px',
     },
     [BADGE_SHAPE.CIRCLE]: {

components/common/Button/BaseButton/style.css.ts

@@ -12,10 +12,9 @@ export const base = style({
     fontWeight: styles.fontWeights.bold,
     border: `1px solid ${styles.colors.gray[200]}`,
     borderRadius: '8px',
-    padding: '16px 24px',
     ':disabled': {
         cursor: 'not-allowed',
-        opacity: 0.5,
+        opacity: styles.opacity[50],
         color: styles.colors.black,
     },
 })

components/common/Button/RoundButton/index.tsx

@@ -11,13 +11,17 @@ type ColorType = 'primary' | 'secondary'
 
 interface RoundButtonProps extends ComponentPropsWithoutRef<'button'> {
     children: ReactNode
-    size?: SizeType
-    color?: ColorType
+    size: SizeType
+    color: ColorType
+    className?: string
 }
 
-export const RoundButton = ({ size = 'large', color = 'primary', children, ...props }: RoundButtonProps) => {
+export const RoundButton = ({ size = 'large', color = 'primary', children, className, ...props }: RoundButtonProps) => {
     return (
-        <BaseButton className={styles.button({ size, color })} {...props}>
+        <BaseButton
+            className={`${styles.button.base} ${styles.sizeVariants[size]} ${styles.colorVariants[color]} ${className ?? ''}`}
+            {...props}
+        >
             {children}
         </BaseButton>
     )