Skip to content

Commit ee8f91f

Browse files
ehgus0526ehgus0526
authored
Merge pull request #261 from Room-In-Us/develop
[DEPLOY] 운영 서버 배포
2 parents eb354e5 + a63c825 commit ee8f91f

12 files changed

Lines changed: 641 additions & 488 deletions

File tree

‎src/features/genre/ui/GenreContentSection.jsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import CustomPagination from '../../../shared/components/CustomPagination';
1515
import BottomSheet from '../../../shared/components/BottomSheet';
1616
import { sortOptions } from '../../../shared/components/filter/OptionList';
1717
import NoDataImgLarge from '../../../shared/assets/images/common/noData/noDataImageLarge.png'
18-
import NoDataImgSmall from '../../../shared/assets/images/common/noData/noDataImageSmall.png'
1918

2019
export default function GenreContentSection() {
2120
// 반응형 함수
@@ -375,7 +374,7 @@ export default function GenreContentSection() {
375374
{/* 콘텐츠 카드 영역 */}
376375
{themeList.length === 0 ? (
377376
<NoDataWrapper>
378-
<img src={isMobile ? NoDataImgSmall : NoDataImgLarge} alt="데이터 없음" />
377+
<img src={NoDataImgLarge} alt="데이터 없음" />
379378
<NonDataTextWrapper>
380379
<NonDataText>해당하는 테마가 없습니다</NonDataText>
381380
</NonDataTextWrapper>
@@ -557,10 +556,10 @@ const NoDataWrapper = styled.div`
557556
gap: 1.25em;
558557
559558
img {
560-
width: 16rem;
559+
width: 25rem;
561560
562561
@media (max-width: 768px) {
563-
width: 10rem;
562+
width: 13.75rem;
564563
}
565564
}
566565
`;

‎src/features/level/ui/LevelContentSection.jsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import CustomPagination from '../../../shared/components/CustomPagination';
1515
import BottomSheet from '../../../shared/components/BottomSheet';
1616
import { sortOptions } from '../../../shared/components/filter/OptionList.js';
1717
import NoDataImgLarge from '../../../shared/assets/images/common/noData/noDataImageLarge.png'
18-
import NoDataImgSmall from '../../../shared/assets/images/common/noData/noDataImageSmall.png'
1918

2019
export default function LevelContentSection() {
2120

@@ -376,7 +375,7 @@ export default function LevelContentSection() {
376375
{/* 콘텐츠 카드 영역 */}
377376
{themeList.length === 0 ? (
378377
<NoDataWrapper>
379-
<img src={isMobile ? NoDataImgSmall : NoDataImgLarge} alt="데이터 없음" />
378+
<img src={NoDataImgLarge} alt="데이터 없음" />
380379
<NonDataTextWrapper>
381380
<NonDataText>해당하는 테마가 없습니다.</NonDataText>
382381
</NonDataTextWrapper>
@@ -558,7 +557,11 @@ const NoDataWrapper = styled.div`
558557
gap: 1.25em;
559558
560559
img {
561-
width: 16rem;
560+
width: 25rem;
561+
562+
@media (max-width: 768px) {
563+
width: 13.75rem;
564+
}
562565
}
563566
`;
564567

‎src/features/location/model/locationAtom.jsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@ export const mapsLoadedState = atom({
66
default: false,
77
});
88

9+
// 선택된 지역 ID (서울: 1, 경기: 2)
10+
export const selectedLocationRegionId = atom({
11+
key: 'selectedLocationRegionId',
12+
default: null,
13+
});
14+
915
// 역 상태
1016
export const stationCardVisible = atom({
1117
key: 'stationCardVisible',
@@ -18,7 +24,7 @@ export const storeCardVisible = atom({
1824
default: false,
1925
});
2026

21-
// 역 아이디
27+
// 역 ID
2228
export const zoneId = atom({
2329
key: 'zoneId',
2430
default: null,
@@ -30,13 +36,13 @@ export const storePageNumber = atom({
3036
default: 1,
3137
});
3238

33-
// 매장 아이디
39+
// 매장 ID
3440
export const locationStoreId = atom({
3541
key: 'locationStoreId',
3642
default: null,
3743
});
3844

39-
// 지역 아이디
45+
// 지역 ID
4046
export const locationRegionId = atom({
4147
key: 'locationRegionId',
4248
default: 1,

‎src/features/location/ui/GoogleMapComponent.jsx‎

Lines changed: 53 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
import styled from 'styled-components';
22
import { useRecoilValue, useRecoilState } from 'recoil';
3-
import { storeInfoList, centerLatAndLng, zoomLevel, storeCardVisible, stationCardVisible, locationStoreId } from '../model/locationAtom.jsx';
3+
import {
4+
storeInfoList,
5+
centerLatAndLng,
6+
zoomLevel,
7+
storeCardVisible,
8+
stationCardVisible,
9+
locationStoreId,
10+
} from '../model/locationAtom.jsx';
411
import { GoogleMap, MarkerF, OverlayView } from '@react-google-maps/api';
512
import { googleMapStyles } from '../../../shared/styles/googleMapStyles.js';
613
import MarkerIcon from '../../../shared/assets/images/location/marker.png';
714
import AwardMarkerIcon from '../../../shared/assets/images/location/awardMarker.png';
8-
// import useDevice from '../../../shared/hooks/useDevice.js';
15+
import useDevice from '../../../shared/hooks/useDevice.js';
916

1017
function GoogleMapComponent() {
1118
// 중앙 좌표
@@ -47,65 +54,63 @@ function GoogleMapComponent() {
4754
disableDefaultUI: true, // 기본 설정 초기화
4855
};
4956

57+
// 반응형 함수
58+
const { isMobile } = useDevice();
59+
5060
return (
51-
<MapWrapper>
52-
<GoogleMap
53-
mapContainerStyle={containerStyle}
54-
center={adjustedCenter}
55-
zoom={zoomLevelState}
56-
options={options}
57-
>
58-
{
59-
storeList.map((store) => (
60-
<div key={store.storeId}>
61-
<MarkerF
62-
position={{ lat: store.latitude, lng: store.longitude }}
63-
icon={{
64-
url: store.isAwarded ? AwardMarkerIcon : MarkerIcon,
65-
scaledSize: new window.google.maps.Size(22.8, 32.4),
66-
// scaledSize: new window.google.maps.Size(38, 54), // 원래 사이즈
67-
}}
68-
onClick={() => {
69-
handleStoreSelect(store.storeId);
70-
setCenterLatAndLng({ lat: store.latitude, lng: store.longitude });
71-
setZoomLevel(18);
72-
}}
73-
/>
74-
<OverlayView
75-
position={{ lat: store.latitude, lng: store.longitude }}
76-
mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
77-
>
78-
<CafeNameBox
79-
onClick={() => {
80-
handleStoreSelect(store.storeId);
81-
setCenterLatAndLng({ lat: store.latitude, lng: store.longitude });
82-
setZoomLevel(18);
83-
}}
84-
>
85-
<CafeNameText>{store.storeName}</CafeNameText>
86-
</CafeNameBox>
87-
</OverlayView>
88-
</div>
89-
))
90-
}
91-
</GoogleMap>
92-
</MapWrapper>
93-
)
61+
<MapWrapper isMobile={isMobile}>
62+
<GoogleMap mapContainerStyle={containerStyle} center={adjustedCenter} zoom={zoomLevelState} options={options}>
63+
{storeList.map((store) => (
64+
<div key={store.storeId}>
65+
<MarkerF
66+
position={{ lat: store.latitude, lng: store.longitude }}
67+
icon={{
68+
url: store.isAwarded ? AwardMarkerIcon : MarkerIcon,
69+
scaledSize: new window.google.maps.Size(22.8, 32.4),
70+
// scaledSize: new window.google.maps.Size(38, 54), // 원래 사이즈
71+
}}
72+
onClick={() => {
73+
handleStoreSelect(store.storeId);
74+
setCenterLatAndLng({ lat: store.latitude, lng: store.longitude });
75+
setZoomLevel(18);
76+
}}
77+
/>
78+
<OverlayView
79+
position={{ lat: store.latitude, lng: store.longitude }}
80+
mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
81+
>
82+
<CafeNameBox
83+
onClick={() => {
84+
handleStoreSelect(store.storeId);
85+
setCenterLatAndLng({ lat: store.latitude, lng: store.longitude });
86+
setZoomLevel(18);
87+
}}
88+
>
89+
<CafeNameText>{store.storeName}</CafeNameText>
90+
</CafeNameBox>
91+
</OverlayView>
92+
</div>
93+
))}
94+
</GoogleMap>
95+
</MapWrapper>
96+
);
9497
}
9598

9699
export default GoogleMapComponent;
97100

98101
// CSS
99102
const MapWrapper = styled.div`
100103
width: 100vw;
101-
height: calc(100vh - 5.625rem - 2.375rem); // 100vh-헤더-풋터
104+
height: calc(
105+
100vh - ${({ isMobile }) => (isMobile ? '4.375rem - 1.625rem' : '5.625rem - 2.375rem')}
106+
); // 100vh-헤더-풋터
102107
position: absolute;
103108
`;
104109

105110
const CafeNameBox = styled.div`
106111
padding: 0.25em 0.375em;
107112
width: 5.5em;
108-
background: rgba(81, 93, 186, 0.70);
113+
background: rgba(81, 93, 186, 0.7);
109114
position: absolute;
110115
transform: translate(-50%, 10%);
111116
display: flex;
@@ -116,7 +121,7 @@ const CafeNameBox = styled.div`
116121
`;
117122

118123
const CafeNameText = styled.div`
119-
color: #FFF;
124+
color: #fff;
120125
font-family: 'Pretendard-Bold';
121126
font-size: 0.75em;
122127
line-height: normal;

0 commit comments

Comments
 (0)