diff --git a/src/app/Host_post/page.tsx b/src/app/Host_post/page.tsx deleted file mode 100644 index f263aba..0000000 --- a/src/app/Host_post/page.tsx +++ /dev/null @@ -1,213 +0,0 @@ -import Image from "next/image"; -import { Footer } from "@/components/Footer"; -import { Header } from "@/components/Header"; -import { Section } from "@/components/Section"; - -const heroImages = [ - { - title: "Host desk", - image: - "https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=520&q=80", - size: "side", - }, - { - title: "Room details", - image: - "https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=620&q=80", - size: "mid", - }, - { - title: "Main host space", - image: - "https://images.unsplash.com/photo-1538485399081-7191377e8241?auto=format&fit=crop&w=860&q=80", - size: "main", - }, - { - title: "Evening salon", - image: - "https://images.unsplash.com/photo-1514894780887-121968d00567?auto=format&fit=crop&w=620&q=80", - size: "mid dark", - }, - { - title: "Vintage room", - image: - "https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?auto=format&fit=crop&w=520&q=80", - size: "side", - }, -]; - -const postSteps = [ - ["공간 기본 정보", "공간명, 위치, 운영 시간을 먼저 등록해요.", "01"], - ["사진과 분위기", "대표 사진과 MomentLit에 맞는 무드를 골라요.", "02"], - ["예약 조건", "인원, 가격, 이용 규칙을 한 번에 정리해요.", "03"], - ["검수 요청", "등록 내용을 확인하고 호스트 심사를 요청해요.", "04"], -]; - -const hostFields = [ - ["공간 이름", "예: 햇살이 오래 머무는 작은 작업실"], - ["지역", "서울 성수동"], - ["수용 인원", "최대 8명"], - ["시간당 금액", "45,000원"], - ["대표 무드", "조용한, 빈티지, 대화하기 좋은"], - ["운영 시간", "평일 11:00 - 21:00"], -]; - -const previewCards = [ - ["따뜻한 창가", "오후 자연광이 잘 드는 대표 좌석"], - ["작은 테이블", "2-4인 모임에 맞는 배치"], - ["촬영 포인트", "필름 사진이 잘 나오는 오브제"], - ["안내 메모", "주차, 반려동물, 외부 음식 정책"], - ["호스트 톤", "친절하고 차분한 소개 문장"], - ["예약 체크", "승인 전 마지막 확인 항목"], -]; - -function HostHero() { - return ( -
-
-
- {heroImages.map((card) => ( -
- {card.title} -
- ))} -
-
- -
-

- MomentLit Host -

-

- 당신의 공간을 취향이 머무는 순간으로 등록하세요 -

-
-
- ); -} - -function StepCard({ - desc, - index, - title, -}: { - desc: string; - index: string; - title: string; -}) { - return ( -
- {index} -

{title}

-

{desc}

-
- ); -} - -function FieldCard({ label, value }: { label: string; value: string }) { - return ( -
-

{label}

-

- {value} -

-
- ); -} - -function PreviewCard({ meta, title }: { meta: string; title: string }) { - return ( -
-
- - HOST - -
-
-

- {title} -

-

{meta}

-
-
- ); -} - -export default function HostPost() { - return ( -
-
-
- - -
-
-
- {postSteps.map(([title, desc, index]) => ( - - ))} -
-
- -
-
- {hostFields.map(([label, value]) => ( - - ))} -
-
- -
-
- {previewCards.map(([title, meta]) => ( - - ))} -
-
-
-
-
- ); -} diff --git a/src/app/spaces_create/SpaceCreateForm.tsx b/src/app/spaces_create/SpaceCreateForm.tsx new file mode 100644 index 0000000..4fbc126 --- /dev/null +++ b/src/app/spaces_create/SpaceCreateForm.tsx @@ -0,0 +1,220 @@ +"use client"; + +import { type FormEvent, useState } from "react"; + +const infoFields = [ + { + id: "category", + label: "카테고리", + type: "select" as const, + options: ["팝업 스토어", "전시", "쇼룸", "스튜디오"], + }, + { + id: "region", + label: "지역", + type: "input" as const, + placeholder: "예) 서울 성수동", + }, + { + id: "capacity", + label: "수용 인원", + type: "input" as const, + placeholder: "예) 최대 100명", + }, + { + id: "schedule", + label: "운영 가능 일정", + type: "select" as const, + options: ["평일 / 주말 모두 가능", "평일만 가능", "주말만 가능"], + }, + { + id: "price", + label: "희망 대관 단가", + type: "input" as const, + placeholder: "예) 일 120만원부터", + }, + { + id: "contact", + label: "연락 방식", + type: "select" as const, + options: ["이메일 + 플랫폼 메시지", "이메일", "플랫폼 메시지"], + }, +] as const; + +const initialForm = { + title: "예) 성수 브랜드 팝업 전용 쇼룸", + description: + "예) 성수 메인 동선에 위치한 이 공간은 브랜드 팝업, 쇼룸, 전시에 잘 어울립니다.\n전면 유리와 높은 층고 덕분에 낮에는 자연광이 풍부하고, 저녁에는 조명 연출이 깔끔하게 살아납니다.\n\n가구 배치가 유연해서 행사 성격에 맞게 동선을 구성하기 좋고, 방문객이 사진 찍기 좋은 포인트도 충분합니다.", + category: "팝업 스토어", + region: "서울 성수동", + capacity: "100명", + schedule: "평일 / 주말 모두 가능", + price: "일 120만원부터", + contact: "이메일 + 플랫폼 메시지", +}; + +type FormState = typeof initialForm; + +function FieldControl({ + field, + onChange, + value, +}: { + field: (typeof infoFields)[number]; + onChange: (name: keyof FormState, value: string) => void; + value: string; +}) { + const commonClassName = + "h-[58px] w-full rounded-[16px] border border-[#C8E4E6] bg-white px-[18px] text-[15px] font-medium text-[#222831] outline-none transition focus:border-[#00ADB5]"; + + if (field.type === "select") { + return ( + + ); + } + + return ( + + ); +} + +export function SpaceCreateForm() { + const [form, setForm] = useState(initialForm); + const [statusMessage, setStatusMessage] = useState(""); + + const handleFieldChange = (name: keyof FormState, value: string) => { + setForm((current) => ({ ...current, [name]: value })); + }; + + const handleDraftSave = () => { + setStatusMessage("임시 저장했습니다."); + console.log("space-create draft", form); + }; + + const handleSubmit = (event: FormEvent) => { + event.preventDefault(); + setStatusMessage("등록 요청을 보냈습니다."); + console.log("space-create submit", form); + }; + + return ( +
+
+

제목

+ +
+ +
+

공간소개

+