Skip to content

Commit 699c354

Browse files
YeBeenChoiYeBeenChoi
authored
Update SellPage.tsx
1 parent cc4ea6e commit 699c354

1 file changed

Lines changed: 0 additions & 139 deletions

File tree

‎src/pages/sell/ui/SellPage.tsx‎

Lines changed: 0 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
<<<<<<< HEAD
21
import { zodResolver } from '@hookform/resolvers/zod';
32
import { PictureIcon } from '@shared/assets/icons';
43
import { useEscapeKey, useOutsideClick, useToast } from '@shared/hooks';
@@ -45,25 +44,13 @@ export default function SellPage() {
4544
const scratchCondition = watch('scratchCondition');
4645
const screenCondition = watch('screenCondition');
4746
const batteryCondition = watch('batteryCondition');
48-
=======
49-
import { PictureIcon } from '@shared/assets/icons';
50-
import { Header } from '@shared/ui/Header';
51-
import { TextField } from '@shared/ui/TextField';
52-
import { useEffect, useRef, useState } from 'react';
53-
export default function SellPage() {
54-
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
55-
const [manufacturer, setManufacturer] = useState<string | null>(null);
56-
const [isOpen, setIsOpen] = useState(false);
57-
const dropdownRef = useRef<HTMLDivElement | null>(null);
58-
>>>>>>> f7b7659 (feat: 제목 및 제조사 필드)
5947

6048
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
6149
const file = e.target.files?.[0];
6250
if (!file) {
6351
return;
6452
}
6553

66-
<<<<<<< HEAD
6754
const validation = validateImageFile(file, MAX_IMAGE_BYTES);
6855
if (!validation.ok) {
6956
showToast(validation.message, 'warning');
@@ -116,75 +103,15 @@ export default function SellPage() {
116103
<section className="flex h-[266px] items-center justify-center bg-[linear-gradient(180deg,var(--color-brand-primary)_0%,var(--color-white)_100%)] py-[67px]">
117104
<div className="flex w-full max-w-[1200px] flex-col items-center gap-[var(--spacing-xxs)] text-center">
118105
<h1 className="typo-title-1 text-[color:var(--color-gray-900)]">나의 전자 기기 판매하기</h1>
119-
=======
120-
setPreviewUrl(URL.createObjectURL(file));
121-
};
122-
123-
// 메모리 누수 방지
124-
useEffect(() => {
125-
if (!isOpen) {
126-
return;
127-
}
128-
129-
const handleClickOutside = (event: MouseEvent) => {
130-
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
131-
setIsOpen(false);
132-
}
133-
};
134-
135-
const handleKeyDown = (event: KeyboardEvent) => {
136-
if (event.key === 'Escape') {
137-
setIsOpen(false);
138-
}
139-
};
140-
141-
document.addEventListener('mousedown', handleClickOutside);
142-
document.addEventListener('keydown', handleKeyDown);
143-
return () => {
144-
document.removeEventListener('mousedown', handleClickOutside);
145-
document.removeEventListener('keydown', handleKeyDown);
146-
};
147-
}, [isOpen]);
148-
149-
useEffect(() => {
150-
return () => {
151-
if (previewUrl) {
152-
URL.revokeObjectURL(previewUrl);
153-
}
154-
};
155-
}, [previewUrl]);
156-
157-
return (
158-
<div className="w-full bg-white">
159-
<div className="mx-auto w-[1440px] bg-white">
160-
<Header isLoggedIn className="mb-[55px] px-[120px] py-6" />
161-
162-
<main className="flex flex-col">
163-
{/* 상단 배너 */}
164-
<section className="mx-[120px] flex h-[266px] items-center justify-center bg-[linear-gradient(180deg,var(--color-brand-primary)_0%,var(--color-white)_100%)] py-[67px]">
165-
<div className="flex max-w-[1200px] flex-col items-center gap-[var(--spacing-xxs)] text-center">
166-
<h1 className="typo-title-1 text-[color:var(--color-gray-900)]">
167-
나의 전자 기기 판매하기
168-
</h1>
169-
>>>>>>> f7b7659 (feat: 제목 및 제조사 필드)
170106
<p className="typo-body-1 text-[color:var(--color-gray-900)]">subtitle</p>
171107
</div>
172108
</section>
173109

174-
<<<<<<< HEAD
175110
<div className="mt-[74px] flex w-full max-w-[1200px] flex-col items-center gap-[74px]">
176111
<section className="w-full">
177112
<div className="flex w-full flex-col items-start gap-[70px]">
178113
<div className="flex w-full flex-col items-start gap-[24px] md:flex-row md:gap-[113px]">
179114
<div className="flex flex-col items-start gap-[var(--spacing-xxs)]">
180-
=======
181-
<div className="mx-[120px] mt-[74px] flex w-[1200px] flex-col items-center gap-[74px]">
182-
{/* 사진 업로드 */}
183-
<section className="w-full">
184-
<div className="flex w-full flex-col items-start gap-[70px]">
185-
<div className="flex items-start gap-[113px]">
186-
<div className="flex flex-col items-start gap-[10px]">
187-
>>>>>>> f7b7659 (feat: 제목 및 제조사 필드)
188115
<h2 className="typo-title-2 text-[color:var(--color-gray-900)]">사진 올리기</h2>
189116
<p className="typo-body-2 text-[color:var(--color-gray-900)]">(최대 1장)</p>
190117
</div>
@@ -194,25 +121,11 @@ export default function SellPage() {
194121
className="flex h-[212px] w-[204px] cursor-pointer items-center justify-center overflow-hidden rounded-[var(--radius-s)] bg-[var(--color-gray-100)]"
195122
>
196123
{previewUrl ? (
197-
<<<<<<< HEAD
198124
<img src={previewUrl} alt="업로드된 이미지" className="h-full w-full object-cover" />
199125
) : (
200126
<div className="flex w-[90px] flex-col items-center gap-[var(--padding-ss)]">
201127
<PictureIcon className="h-[90px] w-[90px] text-[color:var(--color-gray-500)]" />
202128
<span className="typo-body-2 text-center text-[color:var(--color-gray-500)]">0/1</span>
203-
=======
204-
<img
205-
src={previewUrl}
206-
alt="업로드된 이미지"
207-
className="h-full w-full object-cover"
208-
/>
209-
) : (
210-
<div className="flex w-[90px] flex-col items-center gap-[var(--padding-ss)]">
211-
<PictureIcon className="h-[90px] w-[90px] text-[color:var(--color-gray-500)]" />
212-
<span className="typo-body-2 text-center text-[color:var(--color-gray-500)]">
213-
0/1
214-
</span>
215-
>>>>>>> f7b7659 (feat: 제목 및 제조사 필드)
216129
</div>
217130
)}
218131

@@ -225,20 +138,16 @@ export default function SellPage() {
225138
/>
226139
</label>
227140
</div>
228-
<<<<<<< HEAD
229141
{errors.imageFile?.message && (
230142
<span className="text-[12px] leading-[16px] font-normal text-[var(--color-red-500)]">
231143
{errors.imageFile.message}
232144
</span>
233145
)}
234-
=======
235-
>>>>>>> f7b7659 (feat: 제목 및 제조사 필드)
236146
</div>
237147
</section>
238148

239149
<section className="w-full">
240150
<div className="flex items-start gap-[139px] py-[var(--padding-m)]">
241-
<<<<<<< HEAD
242151
<h2 className="typo-title-2 w-[120px] text-[var(--color-gray-900)] md:w-[120px]">기본 정보</h2>
243152

244153
<div className="flex w-full max-w-[978px] flex-col gap-[39px]">
@@ -464,54 +373,6 @@ export default function SellPage() {
464373
>
465374
저장
466375
</Button>
467-
=======
468-
<h2 className="typo-title-2 w-[120px] text-[var(--Text-text-5)]">기본 정보</h2>
469-
470-
<div className="flex w-[978px] flex-col gap-[39px]">
471-
<div className="flex flex-col gap-[16px]">
472-
<span className="typo-body-2 text-[var(--Text-text-5)]">제목</span>
473-
474-
<TextField
475-
aria-label="제목"
476-
placeholder="제목을 입력해 주세요"
477-
className="w-full"
478-
showCharacterCount={false}
479-
/>
480-
</div>
481-
482-
<div className="relative flex flex-col gap-[16px]" ref={dropdownRef}>
483-
<span className="typo-body-2 text-[var(--Text-text-5)]">제조사</span>
484-
485-
<div onClick={() => setIsOpen((prev) => !prev)}>
486-
<TextField
487-
readOnly
488-
value={manufacturer ?? ''}
489-
placeholder="제조사를 선택해 주세요"
490-
className="w-full cursor-pointer"
491-
showCharacterCount={false}
492-
/>
493-
</div>
494-
495-
{isOpen && (
496-
<div className="absolute top-[84px] z-10 flex w-full flex-col rounded-[8px] border border-[var(--Primitive-gray-gray-300)] bg-[var(--Backgorund-background-1)]">
497-
{['삼성', '애플'].map((item) => (
498-
<button
499-
key={item}
500-
type="button"
501-
onClick={() => {
502-
setManufacturer(item);
503-
setIsOpen(false);
504-
}}
505-
className="typo-body-1 flex h-[52px] items-center px-[16px] text-left text-[var(--Text-text-4)] hover:bg-[var(--color-gray-100)]"
506-
>
507-
{item}
508-
</button>
509-
))}
510-
</div>
511-
)}
512-
</div>
513-
</div>
514-
>>>>>>> f7b7659 (feat: 제목 및 제조사 필드)
515376
</div>
516377
</section>
517378
</div>

0 commit comments

Comments
 (0)