Skip to content

Commit bd64a29

Browse files
yyezzzyyyezzzy
authored
Merge pull request #138 from FE9-2/feat/albatalk-list
design: 사장님 정보 관리 모달 CSS 수정
2 parents 4fbf265 + 5b3d205 commit bd64a29

File tree

1 file changed

+88
-79
lines changed

1 file changed

+88
-79
lines changed

‎src/app/components/modal/modals/form/EditOwnerProfileModal.tsx‎

Lines changed: 88 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -130,97 +130,106 @@ const EditOwnerProfileModal = ({ isOpen, onClose, className }: EditOwnerProfileM
130130
return (
131131
<div
132132
className={cn(
133-
"relative left-1/2 h-[842px] w-[375px] -translate-x-1/2 overflow-hidden rounded-2xl bg-white p-6 shadow-lg sm:p-8 md:h-[1138px] md:w-[720px]",
133+
"relative left-1/2 w-[375px] -translate-x-1/2 overflow-hidden rounded-2xl bg-white shadow-lg md:w-[480px] lg:w-[540px]",
134134
className
135135
)}
136136
>
137-
<div className="h-[26px] text-center md:h-[46px]">
138-
<h2 className="text-[18px] font-semibold md:text-[32px]">사장님 정보 관리</h2>
137+
<div className="p-6 pb-0 text-center lg:p-8 lg:pb-0">
138+
<h2 className="text-[18px] font-semibold lg:text-[24px]">사장님 정보 관리</h2>
139139
</div>
140140

141-
<form
142-
onSubmit={handleSubmit(onSubmitHandler)}
143-
className="flex h-[calc(100%-26px)] flex-col md:h-[calc(100%-46px)]"
144-
>
145-
<div className="flex-1 space-y-4 md:space-y-10">
146-
<div className="my-6 flex justify-center md:my-8">
147-
<div className="relative">
148-
<div className="relative h-[110px] w-[110px] md:h-[120px] md:w-[120px]">
149-
<button
150-
type="button"
151-
onClick={handleImageClick}
152-
className="h-full w-full overflow-hidden rounded-full bg-grayscale-100"
153-
>
154-
{previewUrl ? (
155-
<Image
156-
src={previewUrl}
157-
alt="Profile"
158-
width={120}
159-
height={120}
160-
className="h-full w-full object-cover"
161-
/>
162-
) : (
163-
<FiUser className="h-full w-full p-6 text-grayscale-200" />
164-
)}
165-
</button>
166-
<button
167-
type="button"
168-
onClick={handleImageClick}
169-
className="absolute bottom-1 right-1 flex h-8 w-8 items-center justify-center rounded-full border-[2px] border-white bg-grayscale-100 shadow-lg"
170-
>
171-
<FiEdit2 className="text-grayscale-600 h-4 w-4" />
172-
</button>
141+
<form onSubmit={handleSubmit(onSubmitHandler)} className="flex flex-col">
142+
<div className="max-h-[calc(100vh-300px)] overflow-y-auto p-6 lg:p-8">
143+
<div className="space-y-4 lg:space-y-10">
144+
<div className="flex justify-center">
145+
<div className="relative">
146+
<div className="relative h-[80px] w-[80px] lg:h-[100px] lg:w-[100px]">
147+
<button
148+
type="button"
149+
onClick={handleImageClick}
150+
className="h-full w-full overflow-hidden rounded-full bg-grayscale-100"
151+
>
152+
{previewUrl ? (
153+
<Image
154+
src={previewUrl}
155+
alt="Profile"
156+
width={120}
157+
height={120}
158+
className="h-full w-full object-cover"
159+
/>
160+
) : (
161+
<FiUser className="h-full w-full p-6 text-grayscale-200" />
162+
)}
163+
</button>
164+
<button
165+
type="button"
166+
onClick={handleImageClick}
167+
className="absolute bottom-1 right-1 flex h-8 w-8 items-center justify-center rounded-full border-[2px] border-white bg-grayscale-100 shadow-lg"
168+
>
169+
<FiEdit2 className="text-grayscale-600 h-4 w-4" />
170+
</button>
171+
</div>
172+
<input
173+
ref={fileInputRef}
174+
type="file"
175+
accept="image/*"
176+
onChange={handleImageChange}
177+
className="hidden"
178+
/>
173179
</div>
174-
<input ref={fileInputRef} type="file" accept="image/*" onChange={handleImageChange} className="hidden" />
175180
</div>
176-
</div>
177181

178-
{fields.map((field) => (
179-
<div key={field.name} className="h-[88px] space-y-1.5 md:h-[114px] md:space-y-2">
180-
<label className="text-grayscale-700 block px-2 text-sm font-medium md:text-base md:font-semibold">
181-
{field.label}
182-
{field.required && <span className="text-orange-500">*</span>}
183-
</label>
184-
<div className="flex w-full flex-col items-center">
185-
<div className="relative w-full">
186-
<BaseInput
187-
{...register(field.name)}
188-
type="text"
189-
placeholder={field.hint || `${field.label}${field.postPosition} 입력해주세요.`}
190-
variant="white"
191-
size="h-[54px] w-[327px] md:h-[64px] md:w-[640px]"
192-
wrapperClassName={`px-[14px] md:px-[20px] ${field.icon ? "pl-[40px] md:pl-[48px]" : ""}`}
193-
disabled={isUpdating}
194-
errormessage={errors[field.name]?.message}
195-
/>
196-
{field.icon && <div className="absolute left-4 top-1/2 -translate-y-1/2 md:left-5">{field.icon}</div>}
197-
</div>
198-
{field.hint && (
199-
<div className="mt-1 w-full px-2 text-left">
200-
<p className="text-sm text-orange-500 md:text-base">{field.hint}</p>
182+
{fields.map((field) => (
183+
<div key={field.name} className="h-[64px] space-y-1">
184+
<label className="text-grayscale-700 block px-2 pb-1 text-sm font-medium lg:text-base lg:font-semibold">
185+
{field.label}
186+
{field.required && <span className="text-orange-500">*</span>}
187+
</label>
188+
<div className="flex w-full flex-col items-center">
189+
<div className="relative w-full">
190+
<BaseInput
191+
{...register(field.name)}
192+
type="text"
193+
placeholder={field.hint || `${field.label}${field.postPosition} 입력해주세요.`}
194+
variant="white"
195+
size="w-full"
196+
wrapperClassName={`px-[14px] lg:px-[20px] ${field.icon ? "pl-[40px] lg:pl-[48px]" : ""}`}
197+
disabled={isUpdating}
198+
errormessage={errors[field.name]?.message}
199+
/>
200+
{field.icon && (
201+
<div className="absolute left-4 top-1/2 -translate-y-1/2 lg:left-5">{field.icon}</div>
202+
)}
201203
</div>
202-
)}
204+
{field.hint && (
205+
<div className="mt-1 w-full px-2 text-left">
206+
<p className="text-sm text-orange-500 lg:text-base">{field.hint}</p>
207+
</div>
208+
)}
209+
</div>
203210
</div>
204-
</div>
205-
))}
211+
))}
212+
</div>
206213
</div>
207214

208-
<div className="flex h-[58px] justify-between gap-3 md:h-[72px]">
209-
<button
210-
type="button"
211-
onClick={onClose}
212-
disabled={isUpdating}
213-
className="text-grayscale-700 w-[158px] rounded-md border border-grayscale-300 bg-white px-4 py-2 text-sm font-semibold transition-colors hover:bg-grayscale-50 md:w-[314px] md:text-base"
214-
>
215-
취소
216-
</button>
217-
<button
218-
type="submit"
219-
disabled={isUpdating}
220-
className="w-[158px] rounded-md bg-orange-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-orange-600 md:w-[314px] md:text-base"
221-
>
222-
{isUpdating ? <DotLoadingSpinner /> : "수정하기"}
223-
</button>
215+
<div className="sticky bottom-0 border-grayscale-100 bg-white p-6 lg:p-8">
216+
<div className="flex h-[36px] justify-between gap-3 lg:h-[48px]">
217+
<button
218+
type="button"
219+
onClick={onClose}
220+
disabled={isUpdating}
221+
className="text-grayscale-700 w-[158px] rounded-md border border-grayscale-300 bg-white px-4 py-2 text-sm font-semibold transition-colors hover:bg-grayscale-50 md:w-[314px] md:text-base"
222+
>
223+
취소
224+
</button>
225+
<button
226+
type="submit"
227+
disabled={isUpdating}
228+
className="w-[158px] rounded-md bg-orange-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-orange-600 md:w-[314px] md:text-base"
229+
>
230+
{isUpdating ? <DotLoadingSpinner /> : "수정하기"}
231+
</button>
232+
</div>
224233
</div>
225234
</form>
226235
</div>

0 commit comments

Comments
 (0)