Skip to content

Commit 3f52ef7

Browse files
pepperdadpepperdad
committed
2 parents 6f206d5 + a63cea8 commit 3f52ef7

2 files changed

Lines changed: 89 additions & 42 deletions

File tree

‎apps/ticket-admin/src/app/events/create/_components/EventFormLayout/index.module.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,7 @@
1212
.row {
1313
width: 100%;
1414
}
15+
16+
.required {
17+
color: #ff283e;
18+
}

‎apps/ticket-admin/src/app/events/create/_components/EventFormLayout/index.tsx‎

Lines changed: 85 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -114,9 +114,13 @@ export function EventFormLayout({
114114
<>
115115
<Flex gap={24}>
116116
<Flex className={cx("row")} direction="column" gap={12}>
117-
<Typography type="body16" weight="bold">
118-
Event Exposure Start Date
119-
</Typography>
117+
<Flex align="flex-start" gap={8}>
118+
<Typography type="body16" weight="bold">
119+
Event Exposure Start Date
120+
</Typography>
121+
<div className={cx("required")}>*</div>
122+
</Flex>
123+
120124
<Select
121125
disabled={isReadOnlyMode}
122126
type="calendar"
@@ -125,9 +129,12 @@ export function EventFormLayout({
125129
/>
126130
</Flex>
127131
<Flex className={cx("row")} direction="column" gap={12}>
128-
<Typography type="body16" weight="bold">
129-
Event Exposure End Date
130-
</Typography>
132+
<Flex align="flex-start" gap={8}>
133+
<Typography type="body16" weight="bold">
134+
Event Exposure End Date
135+
</Typography>
136+
<div className={cx("required")}>*</div>
137+
</Flex>
131138
<Select
132139
disabled={isReadOnlyMode}
133140
type="calendar"
@@ -139,9 +146,12 @@ export function EventFormLayout({
139146

140147
<Flex gap={24}>
141148
<Flex className={cx("row")} direction="column" gap={12}>
142-
<Typography type="body16" weight="bold">
143-
Event Exposure Start Time
144-
</Typography>
149+
<Flex align="flex-start" gap={8}>
150+
<Typography type="body16" weight="bold">
151+
Event Exposure Start Time
152+
</Typography>
153+
<div className={cx("required")}>*</div>
154+
</Flex>
145155
<TextField
146156
readOnly={isReadOnlyMode}
147157
showBorderinReadOnly={isReadOnlyMode}
@@ -152,9 +162,12 @@ export function EventFormLayout({
152162
/>
153163
</Flex>
154164
<Flex className={cx("row")} direction="column" gap={12}>
155-
<Typography type="body16" weight="bold">
156-
Event Exposure End Time
157-
</Typography>
165+
<Flex align="flex-start" gap={8}>
166+
<Typography type="body16" weight="bold">
167+
Event Exposure End Time
168+
</Typography>
169+
<div className={cx("required")}>*</div>
170+
</Flex>
158171
<TextField
159172
readOnly={isReadOnlyMode}
160173
showBorderinReadOnly={isReadOnlyMode}
@@ -168,9 +181,12 @@ export function EventFormLayout({
168181

169182
<Flex gap={24}>
170183
<Flex className={cx("row")} direction="column" gap={12}>
171-
<Typography type="body16" weight="bold">
172-
Event Type
173-
</Typography>
184+
<Flex align="flex-start" gap={8}>
185+
<Typography type="body16" weight="bold">
186+
Event Type
187+
</Typography>
188+
<div className={cx("required")}>*</div>
189+
</Flex>
174190
<Select
175191
disabled={isReadOnlyMode}
176192
placeholder="이벤트 타입을 선택해주세요"
@@ -179,9 +195,12 @@ export function EventFormLayout({
179195
/>
180196
</Flex>
181197
<Flex className={cx("row")} direction="column" gap={12}>
182-
<Typography type="body16" weight="bold">
183-
Event Verification Code
184-
</Typography>
198+
<Flex align="flex-start" gap={8}>
199+
<Typography type="body16" weight="bold">
200+
Event Verification Code
201+
</Typography>
202+
<div className={cx("required")}>*</div>
203+
</Flex>
185204
<TextField
186205
readOnly={isReadOnlyMode}
187206
showBorderinReadOnly={isReadOnlyMode}
@@ -195,9 +214,12 @@ export function EventFormLayout({
195214

196215
<Flex gap={24}>
197216
<Flex className={cx("row")} direction="column" gap={12}>
198-
<Typography type="body16" weight="bold">
199-
Event Name
200-
</Typography>
217+
<Flex align="flex-start" gap={8}>
218+
<Typography type="body16" weight="bold">
219+
Event Name
220+
</Typography>
221+
<div className={cx("required")}>*</div>
222+
</Flex>
201223
<TextField
202224
readOnly={isReadOnlyMode}
203225
showBorderinReadOnly={isReadOnlyMode}
@@ -211,9 +233,12 @@ export function EventFormLayout({
211233

212234
<Flex gap={24}>
213235
<Flex className={cx("row")} direction="column" gap={12}>
214-
<Typography type="body16" weight="bold">
215-
Start Date
216-
</Typography>
236+
<Flex align="flex-start" gap={8}>
237+
<Typography type="body16" weight="bold">
238+
Start Date
239+
</Typography>
240+
<div className={cx("required")}>*</div>
241+
</Flex>
217242
<Select
218243
disabled={isReadOnlyMode}
219244
type="calendar"
@@ -222,9 +247,12 @@ export function EventFormLayout({
222247
/>
223248
</Flex>
224249
<Flex className={cx("row")} direction="column" gap={12}>
225-
<Typography type="body16" weight="bold">
226-
End Date
227-
</Typography>
250+
<Flex align="flex-start" gap={8}>
251+
<Typography type="body16" weight="bold">
252+
End Date
253+
</Typography>
254+
<div className={cx("required")}>*</div>
255+
</Flex>
228256
<Select
229257
disabled={isReadOnlyMode}
230258
type="calendar"
@@ -236,9 +264,12 @@ export function EventFormLayout({
236264

237265
<Flex gap={24}>
238266
<Flex className={cx("row")} direction="column" gap={12}>
239-
<Typography type="body16" weight="bold">
240-
Start Time
241-
</Typography>
267+
<Flex align="flex-start" gap={8}>
268+
<Typography type="body16" weight="bold">
269+
Start Time
270+
</Typography>
271+
<div className={cx("required")}>*</div>
272+
</Flex>
242273
<TextField
243274
readOnly={isReadOnlyMode}
244275
showBorderinReadOnly={isReadOnlyMode}
@@ -249,9 +280,12 @@ export function EventFormLayout({
249280
/>
250281
</Flex>
251282
<Flex className={cx("row")} direction="column" gap={12}>
252-
<Typography type="body16" weight="bold">
253-
End Time
254-
</Typography>
283+
<Flex align="flex-start" gap={8}>
284+
<Typography type="body16" weight="bold">
285+
End Time
286+
</Typography>
287+
<div className={cx("required")}>*</div>
288+
</Flex>
255289
<TextField
256290
readOnly={isReadOnlyMode}
257291
showBorderinReadOnly={isReadOnlyMode}
@@ -265,9 +299,12 @@ export function EventFormLayout({
265299

266300
<Flex gap={24}>
267301
<Flex className={cx("row")} direction="column" gap={12}>
268-
<Typography type="body16" weight="bold">
269-
Venue
270-
</Typography>
302+
<Flex align="flex-start" gap={8}>
303+
<Typography type="body16" weight="bold">
304+
Venue
305+
</Typography>
306+
<div className={cx("required")}>*</div>
307+
</Flex>
271308
<TextField
272309
readOnly={isReadOnlyMode}
273310
showBorderinReadOnly={isReadOnlyMode}
@@ -318,9 +355,12 @@ export function EventFormLayout({
318355
{onFileChange && (
319356
<Flex gap={24}>
320357
<Flex className={cx("row")} direction="column" gap={12}>
321-
<Typography type="body16" weight="bold">
322-
Image
323-
</Typography>
358+
<Flex align="flex-start" gap={8}>
359+
<Typography type="body16" weight="bold">
360+
Image
361+
</Typography>
362+
<div className={cx("required")}>*</div>
363+
</Flex>
324364
<ImageUploader
325365
disabled={isReadOnlyMode}
326366
value={(formData.images as unknown as PreviewMedia[] | null) || null}
@@ -359,9 +399,12 @@ export function EventFormLayout({
359399

360400
<Flex gap={24}>
361401
<Flex className={cx("row")} direction="column" gap={12}>
362-
<Typography type="body16" weight="bold">
363-
Min Age
364-
</Typography>
402+
<Flex align="flex-start" gap={8}>
403+
<Typography type="body16" weight="bold">
404+
Min Age
405+
</Typography>
406+
<div className={cx("required")}>*</div>
407+
</Flex>
365408
<TextField
366409
readOnly={isReadOnlyMode}
367410
showBorderinReadOnly={isReadOnlyMode}

0 commit comments

Comments
 (0)