fix: Hot Reload 시 스타일 초기화 문제 해결 (#101)

- 동적 import와 HMR 시, 스타일 초기화 문제 - Location 전체 페이지에서 Map 컴포넌트로만 동적 import 영역 수정
Kernel360 · Jan 27, 2025 · 022ae55 · 022ae55
1 parent da74099
commit 022ae55
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 217 deletions.
diff --git a/app/(main)/location/LocationPage.tsx b/app/(main)/location/LocationPage.tsx
diff --git a/app/(main)/location/components/VehicleStatus/index.tsx b/app/(main)/location/components/VehicleStatus/index.tsx
@@ -8,9 +8,7 @@ const VehicleStatus = () => {
             <div className={styles.itemContainer}>
                 <div className={styles.titleWrapper}>
                     <div className={styles.circle} />
-                    <div className={styles.title} style={{ color: 'blue' }}>
-                        전체차량
-                    </div>
+                    <div className={styles.title}>전체차량</div>
                 </div>
 
                 <div className={styles.count}>30</div>

diff --git a/app/(main)/location/components/VehicleStatus/styles.css.ts b/app/(main)/location/components/VehicleStatus/styles.css.ts
@@ -36,7 +36,6 @@ export const titleWrapper = style({
 export const circle = style({
     width: '16px',
     height: '16px',
-    // backgroundColor: vars.colors.green[500],
     backgroundColor: vars.colors.pink[600],
     borderRadius: '50%',
 })

diff --git a/app/(main)/location/page.tsx b/app/(main)/location/page.tsx
@@ -1,32 +1,15 @@
-// '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 MapSection from '@/app/(main)/location/components/MapSection'
 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, VehicleInfoModel } from '@/types/vehicle'
 
 import * as styles from './styles.css'
@@ -65,63 +48,12 @@ const LocationPage = () => {
 
     return (
         <div className={styles.container}>
-            <div>
-                {/* <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> */}
-                <MapSection
-                    mapState={mapState}
-                    vehicleInfo={vehicleInfo as VehicleInfoModel}
-                    isVehicleMarkerVisible={isVehicleMarkerVisible}
-                    onVehicleClick={handleVehicleClick}
-                />
-            </div>
+            <MapSection
+                mapState={mapState}
+                vehicleInfo={vehicleInfo as VehicleInfoModel}
+                isVehicleMarkerVisible={isVehicleMarkerVisible}
+                onVehicleClick={handleVehicleClick}
+            />
             <div className={styles.searchInputWrapper}>
                 <SearchInput
                     icon='/icons/search-icon.svg'