-
Notifications
You must be signed in to change notification settings - Fork 0
/
RegisterRoomBuilding.tsx
225 lines (209 loc) · 7.12 KB
/
RegisterRoomBuilding.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
import React, { useMemo, useState } from "react";
import { useDispatch } from "react-redux";
import styled from "styled-components";
import {
apartmentBuildingTypeList,
largeBuildingTypeList,
} from "../../lib/staticData";
import { useSelector } from "../../store";
import { registerRooomAction } from "../../store/registerRoom";
import palette from "../../styles/palette";
import RadioGroup from "../common/RadioGroup";
import Selector from "../common/Selector";
import RegisterRoomFooter from "./RegisterRoomFooter";
const Container = styled.div`
padding: 62px 30px 100px;
h2 {
font-size: 19px;
font-weight: 800;
margin-bottom: 56px;
}
h3 {
font-weight: bold;
color: ${palette.gray_76};
margin-bottom: 6px;
}
.register-room-building-selector-wrapper {
width: 320px;
margin-bottom: 32px;
}
.register-room-room-type-radio {
max-width: 485px;
margin-bottom: 50px;
}
.register-room-is-setup-for-guest-radio{
margin-bottom: 50px;
}
`;
const roomTypeRadioOptions = [
{
label: "집 전체",
value: "entire",
description:
"게스트가 숙소 전체를 다른 사람과 공유하지 않고 단독으로 이용합니다. 일반적으로 침실, 욕실, 부엌이 포함됩니다.",
},
{
label: "개인실",
value: "private",
description:
"게스트에게 개인 침실이 제공됩니다. 침실 이외의 공간은 공용일 수 있습니다.",
},
{
label: "다인실",
value: "public",
description:
"게스트는 개인 공간 없이, 다른 사람과 함께 쓰는 침실이나 공용공간에서 숙박합니다.",
},
];
//* 게스트만 사용하도록 만들어진 숙소인지 라디오 options
const isSetUpForGuestOptions = [
{
label: "예. 게스트용으로 따로 마련된 숙소입니다.",
value: true,
},
{
label: "아니요. 제 개인 물건이 숙소에 있습니다.",
value: false,
},
];
// 선택 불가능한 큰 범위 건물 유형
const disabledlargeBuildingTypeOptions = ["하나를 선택해주세요"];
const RegisterRoomBuilding: React.FC = () => {
const largeBuildingType = useSelector((state) => state.registerRoom.largeBuildingType);
const buildingType = useSelector((state) => state.registerRoom.buildingType);
const roomType = useSelector((state) => state.registerRoom.roomType);
const isSetUpForGuest = useSelector((state) => state.registerRoom.isSetupForGuest);
const dispatch = useDispatch();
// 큰 범위 건물 유형 변경 시
const onChangeLargeBuildingType = (
event: React.ChangeEvent<HTMLSelectElement>
) => {
dispatch(registerRooomAction.setLargeBuildingType(event.target.value));
};
// 상세 건물 유형 변경 시
const onChangeBuildingType = (
event: React.ChangeEvent<HTMLSelectElement>
) => {
dispatch(registerRooomAction.setBuildingType(event.target.value));
};
// 숙소 유형 변경시
const onChangeRoomType = (value: "entire"|"private"|"public") => {
dispatch(registerRooomAction.setRoomType(value));
};
// 게스트용 숙소인지 변경시
const onChangeIsSetupForGuest = (value: boolean) =>{
dispatch(registerRooomAction.setIsSetupForGuest(value));
}
// 모든 값이 있는지 확인하기
const isValid = useMemo(()=>{
if(!largeBuildingType || !buildingType || !roomType || isSetUpForGuest === null){
console.log(isSetUpForGuest);
return false;
}
return true;
},[largeBuildingType, buildingType, roomType, isSetUpForGuest]);
// 선택된 건물 유형 options
const detailBuildingOptions = useMemo(() => {
switch (largeBuildingType) {
case "아파트": {
const { apartmentBuildingTypeList } = require("../../lib/staticData");
dispatch(
registerRooomAction.setBuildingType(apartmentBuildingTypeList[0])
);
return apartmentBuildingTypeList;
}
case "주택": {
const { houseBuildingTypeList } = require("../../lib/staticData");
dispatch(registerRooomAction.setBuildingType(houseBuildingTypeList[0]));
return houseBuildingTypeList;
}
case "별채": {
const {
secondaryUnitBuildingTypeList,
} = require("../../lib/staticData");
dispatch(
registerRooomAction.setBuildingType(secondaryUnitBuildingTypeList[0])
);
return secondaryUnitBuildingTypeList;
}
case "독특한 숙소": {
const { uniqueSpaceBuildingTypeList } = require("../../lib/staticData");
dispatch(
registerRooomAction.setBuildingType(uniqueSpaceBuildingTypeList[0])
);
return uniqueSpaceBuildingTypeList;
}
case "B&B": {
const { bnbBuildingTypeList } = require("../../lib/staticData");
dispatch(registerRooomAction.setBuildingType(bnbBuildingTypeList[0]));
return bnbBuildingTypeList;
}
case "부티크호텔": {
const { uniqueSpaceBuildingTypeList } = require("../../lib/staticData");
dispatch(
registerRooomAction.setBuildingType(uniqueSpaceBuildingTypeList[0])
);
return uniqueSpaceBuildingTypeList;
}
default:
return [];
}
}, [largeBuildingType]);
return (
<Container>
<h2>등록할 숙소 종류는 무엇인가요?</h2>
<h3>1단계</h3>
<div className="register-room-building-selector-wrapper">
<Selector
type="register"
value={largeBuildingType}
defaultValue="하나를 선택해주세요"
disabledOptions={disabledlargeBuildingTypeOptions}
label="우선 범위를 좁혀볼까요?"
options={largeBuildingTypeList}
isValid={!!largeBuildingType}
onChange={onChangeLargeBuildingType}
/>
</div>
<div className="register-room-building-selector-wrapper">
<Selector
type="register"
disabled={!largeBuildingType}
value={buildingType || undefined}
defaultValue="하나를 선택해주세요"
disabledOptions={disabledlargeBuildingTypeOptions}
label="건물 유형을 선택하세요."
options={detailBuildingOptions}
isValid={!!buildingType}
onChange={onChangeBuildingType}
/>
</div>
{buildingType && (
<div className="register-room-room-type-radio">
<RadioGroup
label="게스트가 묵게 될 숙소 유형을 골라주세요."
value={roomType}
options={roomTypeRadioOptions}
onChange={onChangeRoomType}
isValid={!!roomType}
/>
</div>
)}
<div className="registr-room-is-setup-for-guest-radio">
<RadioGroup
label="게스트만 사용하도록 만들어진 숙소인가요?"
value={isSetUpForGuest}
onChange={onChangeIsSetupForGuest}
options={isSetUpForGuestOptions}
isValid={isSetUpForGuest !== null}
/>
</div>
<RegisterRoomFooter
isValid={isValid}
prevHref="/"
nextHref="/room/register/bedrooms"
/>
</Container>
);
};
export default RegisterRoomBuilding;