diff --git a/src/app/globals.css b/src/app/globals.css index 21de4fd..31186cf 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -27,6 +27,9 @@ .btn { @apply h-[3rem] px-[1.5rem] py-[0.75rem] rounded-lg transition-colors duration-200 w-full text-center font-medium; } + .btn-container { + @apply fixed bottom-0 left-1/2 transform -translate-x-1/2 flex justify-center bg-white p-4 max-w-md w-full; + } .btn-primary { @apply btn bg-gray-800 text-white hover:bg-gray-700; } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b1c7f1d..3010045 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,7 +1,7 @@ import type { Metadata } from 'next'; import './globals.css'; import localFont from 'next/font/local'; -import Header from '@/components/Header'; +import ClipContainer from '@/components/ClipContainer'; const pretendard = localFont({ src: '../fonts/PretendardVariable.woff2', @@ -22,11 +22,10 @@ export default function RootLayout({ }>) { return ( - -
-
+ +
{children}
-
+ ); diff --git a/src/app/page.tsx b/src/app/page.tsx index acffb22..ad1e142 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -20,7 +20,7 @@ const Home = () => {

- 순간을 chik다, + 순간을 Chik다,
칙스냅

@@ -39,8 +39,9 @@ const Home = () => { 어려우셨다면 저희가 찾아드릴게요!

+ - 원하는 사진작가 찾아보기 + 다음으로
diff --git a/src/app/photographer/page.tsx b/src/app/photographer/page.tsx index 6a9df51..e98cefa 100644 --- a/src/app/photographer/page.tsx +++ b/src/app/photographer/page.tsx @@ -5,7 +5,6 @@ import Image from 'next/image'; import Link from 'next/link'; import { useRouter, useSearchParams } from 'next/navigation'; import { photographers_mu } from '@/data/database'; -import ArrowBack from '@/data/arrowLeft.svg'; import Loading from '@/components/Loading'; const RecommendedPhotographers = () => { @@ -15,15 +14,11 @@ const RecommendedPhotographers = () => { useEffect(() => { const timer = setTimeout(() => { setIsLoading(false); - }, 2500); // 2.5초 + }, 1500); // 2.5초 return () => clearTimeout(timer); }, []); - const backFunction = () => { - router.back(); - }; - const searchParams = useSearchParams(); const type = searchParams.get('type'); const moods = searchParams.get('moods'); @@ -40,27 +35,25 @@ const RecommendedPhotographers = () => { } return ( -
-
-
- Back -
-
-

- 칙스냅에서 추천드리는 작가예요! -

-

- 선택하신 분위기를 기반으로 -
- 칙스냅에서 추천드리는 작가님들이에요. +
+

칙스냅에서 추천드리는 작가예요!

+ +

+ 아래 작가분들은 여러분의 선택을 기반으로 칙스냅에서 추천드리는 + 작가님이에요. 자세히 보기를 통해 작가님의 정보를 확인하고 그리던 사진을 + 촬영해요

-
+ +
{selectedPhotographers.map((photographer) => ( -
-
- - 맞춤형 작가 요청하기 - -
+
+ + 마음에 드는 작가가 없으시다면? +
); diff --git a/src/app/request-custom/page.tsx b/src/app/request-custom/page.tsx index 7b357f0..b07e947 100644 --- a/src/app/request-custom/page.tsx +++ b/src/app/request-custom/page.tsx @@ -1,67 +1,57 @@ 'use client'; import { ChangeEvent, useState } from 'react'; -import Image from 'next/image'; -import ArrowBack from '@/data/arrowLeft.svg'; import { useRouter } from 'next/navigation'; import { submitForm } from '../api/apis'; +import PopupWindow from '@/components/PopupWindow'; +import { handlePhoneNumberChange } from '@/lib/utils'; +import { LoadingIndicator } from '@/lib/svgs'; const RequestCustom = () => { const router = useRouter(); - const backFunction = () => { - router.back(); - }; const [text, setText] = useState(''); const [phoneNumber, setPhoneNumber] = useState(''); const [loading, setLoading] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); + + const isOverLimit = text.length > 600; + const isTextEntered = text.length > 0; + const isPhoneNumberEntered = phoneNumber.trim().length > 12; const handleTextChange = (e: ChangeEvent) => { setText(e.target.value); }; - const handlePhoneNumberChange = (e: ChangeEvent) => { - setPhoneNumber(e.target.value); - }; - - const isOverLimit = text.length > 600; - const isTextEntered = text.length > 0; - const isPhoneNumberEntered = phoneNumber.trim().length > 0; - const handleSubmit = async () => { - console.log(phoneNumber); - console.log(text); if (!isPhoneNumberEntered) return; - setLoading(true); try { await submitForm({ phone_number: phoneNumber, prefer_style: text }); - - alert('요청이 성공적으로 전송되었습니다.'); - router.push('/'); } catch (error) { console.error('실패: ', error); alert('요청 전송에 실패했습니다. 다시 시도해주세요.'); } finally { + setIsModalOpen(true); setLoading(false); } }; + const onClose = () => { + setIsModalOpen(false); + router.push('/'); + }; + return ( -
-
-
- Back -
-
-

- 맞춤형 작가 요청하기 -

-

- 칙스냅에서 회원님에게 최적화된 작가분들을 찾아 추천해드릴게요. 약 1~3일 - 정도 소요될 수 있어요. +
+

맞춤형 작가 요청해보세요.

+ +

+ {`칙스냅에서 회원님에게 최적화된 작가분들을 찾아 추천해드릴게요. + 약 1~3일 정도 소요될 수 있어요!`}

+

전화번호

@@ -72,7 +62,7 @@ const RequestCustom = () => { type="text" placeholder="XXX - XXXX - XXXX" value={phoneNumber} - onChange={handlePhoneNumberChange} + onChange={(e) => handlePhoneNumberChange(e, setPhoneNumber)} className="w-full h-[3.125rem] px-[0.875rem] bg-gray-50 rounded-lg body-1 placeholder-gray-300 hover:bg-gray-100 focus:bg-gray-100 focus:border-gray-200 focus:ring-0 focus:outline-none border border-transparent transition-colors duration-200 @@ -84,7 +74,7 @@ const RequestCustom = () => {

희망하는 작가님 스타일 (분위기, 종류 등)