chore: 빌드 시, document 객체에 접근하지 못하는 원인 파악 테스트 (#101)

app/(main)/location/components/VehicleStatus/index.tsx

@@ -8,7 +8,9 @@ const VehicleStatus = () => {
             <div className={styles.itemContainer}>
                 <div className={styles.titleWrapper}>
                     <div className={styles.circle} />
-                    <div className={styles.title}>전체차량</div>
+                    <div className={styles.title} style={{ color: 'blue' }}>
+                        전체차량
+                    </div>
                 </div>
 
                 <div className={styles.count}>30</div>

app/(main)/location/components/VehicleStatus/styles.css.ts

@@ -36,6 +36,7 @@ export const titleWrapper = style({
 export const circle = style({
     width: '16px',
     height: '16px',
+    // backgroundColor: vars.colors.green[500],
     backgroundColor: vars.colors.pink[600],
     borderRadius: '50%',
 })

app/(main)/location/page.tsx

@@ -1,9 +1,133 @@
+// 'use client'
+
+// import dynamic from 'next/dynamic'
+
+// const LocationPage = dynamic(() => import('./LocationPage'), {
+//     ssr: false,
+// })
+
+// export default LocationPage
+
 'use client'
 
-import dynamic from 'next/dynamic'
+// import { useState } from 'react'
+// import { MapMarker, MarkerClusterer } from 'react-kakao-maps-sdk'
+
+// import VehicleDetailsCard from '@/app/(main)/location/components/VehicleDetailsCard'
+// import VehicleMarker from '@/app/(main)/location/components/VehicleMarker'
+import VehicleStatus from '@/app/(main)/location/components/VehicleStatus'
+import SearchInput from '@/components/common/Input/SearchInput'
+import Modal from '@/components/common/Modal'
+import { ModalMessageType } from '@/components/common/Modal/types'
+import Map from '@/components/domain/map/Map'
+// import { MARKER_IMAGE } from '@/constants/map'
+import { useSearchSingleVehicle } from '@/hooks/useSearchSingleVehicle'
+// import { vehicleAPI } from '@/lib/apis'
+// import koreaLocation from '@/mock/metropolitan_coordinates.json'
+// import { vars } from '@/styles/theme.css'
+// import { VehicleDetailsModel } from '@/types/vehicle'
+
+import * as styles from './styles.css'
+
+const LocationPage = () => {
+    // const [isDetailsCardVisible, setIsDetailsCardVisible] = useState(false)
+    // const [vehicleDetails, setVehicleDetails] = useState<VehicleDetailsModel>()
+
+    const {
+        // vehicleInfo,
+        mapState,
+        // isVehicleVisible,
+        searchTerm,
+        modalMessage,
+        isOpen,
+        handleVehicleSearch,
+        handleSearchChange,
+        closeModal,
+    } = useSearchSingleVehicle()
+
+    // const handleVehicleClick = async () => {
+    //     const vehicleDetailsData = await vehicleAPI.fetchVehicleDetails()
+
+    //     if (!vehicleDetailsData) return
+
+    //     setVehicleDetails(vehicleDetailsData)
+    //     setIsDetailsCardVisible(true)
+    // }
+
+    // const isVehicleMarkerVisible = isVehicleVisible && vehicleInfo
+    // const isVehicleDetailsVisible = isDetailsCardVisible
 
-const LocationPage = dynamic(() => import('./LocationPage'), {
-    ssr: false,
-})
+    return (
+        <div className={styles.container}>
+            <Map center={mapState.center} zoom={mapState.level}>
+                {/* {isVehicleMarkerVisible && (
+                    <VehicleMarker vehicleInfo={vehicleInfo} onVehicleClick={handleVehicleClick} />
+                )}
+                <MarkerClusterer
+                    averageCenter={true}
+                    styles={[
+                        {
+                            width: '40px',
+                            height: '40px',
+                            background: '#ed968490',
+                            borderRadius: '50%',
+                            color: vars.colors.black,
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            fontWeight: 'bold',
+                        },
+                        {
+                            width: '60px',
+                            height: '60px',
+                            background: '#008a8590',
+                            borderRadius: '50%',
+                            color: vars.colors.black,
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            fontWeight: 'bold',
+                        },
+                        {
+                            width: '80px',
+                            height: '80px',
+                            background: '#ff385c80',
+                            borderRadius: '50%',
+                            color: vars.colors.black,
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            fontWeight: 'bold',
+                        },
+                    ]}
+                    calculator={[10, 30, 50]}
+                    gridSize={100}
+                >
+                    {koreaLocation.map((marker, index) => (
+                        <MapMarker key={index} position={marker} image={MARKER_IMAGE} />
+                    ))}
+                </MarkerClusterer> */}
+            </Map>
+            <div className={styles.searchInputWrapper}>
+                <SearchInput
+                    icon='/icons/search-icon.svg'
+                    value={searchTerm}
+                    onChange={handleSearchChange}
+                    onSubmit={handleVehicleSearch}
+                />
+            </div>
+            <VehicleStatus />
+            {/* {isVehicleDetailsVisible && (
+                <VehicleDetailsCard vehicleDetails={vehicleDetails} onCloseButtonClick={setIsDetailsCardVisible} />
+            )} */}
+            <Modal
+                isOpen={isOpen}
+                message={modalMessage as ModalMessageType}
+                variant={{ variant: 'alert', confirmButton: '확인' }}
+                onClose={closeModal}
+            />
+        </div>
+    )
+}
 
 export default LocationPage

next.config.mjs

@@ -1,11 +1,16 @@
 import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin'
 
-const withVanillaExtract = createVanillaExtractPlugin()
+const withVanillaExtract = createVanillaExtractPlugin({
+    outputCss: {
+        filePrefix: 'module', // .module.css로 출력
+    },
+})
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     webpack(config) {
         const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'))
+
         if (fileLoaderRule) {
             fileLoaderRule.exclude = /\.svg$/
         }