diff --git a/package.json b/package.json index ca9f96b..90e1608 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "axios": "^1.7.4", "next": "14.1.2", "react": "^18", "react-dom": "^18", @@ -16,6 +17,7 @@ "react-range": "^1.10.0" }, "devDependencies": { + "@types/axios": "^0.14.0", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", diff --git a/src/app/api/apis.ts b/src/app/api/apis.ts new file mode 100644 index 0000000..93c114a --- /dev/null +++ b/src/app/api/apis.ts @@ -0,0 +1,22 @@ +import axios from 'axios'; + +interface SubmitFormData { + phone_number: string; + prefer_style: string; +} + +export const submitForm = async (data: SubmitFormData): Promise => { + try { + console.log(data); + const response = await axios.post( + 'https://api.chiksnap.site/recommend', + data, + ); + + if (response.status !== 200) { + throw new Error('전송 실패'); + } + } catch (error) { + throw new Error('실패: ' + error); + } +}; diff --git a/src/app/photographer/page.tsx b/src/app/photographer/page.tsx index 0364224..6a9df51 100644 --- a/src/app/photographer/page.tsx +++ b/src/app/photographer/page.tsx @@ -1,17 +1,29 @@ 'use client'; -import React from 'react'; +import React, { useEffect, useState } from 'react'; 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 = () => { + const [isLoading, setIsLoading] = useState(true); const router = useRouter(); + + useEffect(() => { + const timer = setTimeout(() => { + setIsLoading(false); + }, 2500); // 2.5초 + + return () => clearTimeout(timer); + }, []); + const backFunction = () => { router.back(); }; + const searchParams = useSearchParams(); const type = searchParams.get('type'); const moods = searchParams.get('moods'); @@ -23,8 +35,12 @@ const RecommendedPhotographers = () => { .sort(() => Math.random() - 0.5) .slice(0, 3); + if (isLoading) { + return ; // 로딩 중일 때 로딩 컴포넌트 표시 + } + return ( -
+
Back @@ -34,29 +50,29 @@ const RecommendedPhotographers = () => { 칙스냅에서 추천드리는 작가예요!

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

-
+
{selectedPhotographers.map((photographer) => (
-
-
- {photographer.name} -
-
+
+
+
+ {photographer.name} +
{photographer.name} @@ -65,19 +81,19 @@ const RecommendedPhotographers = () => { {`@${photographer.instagramId}`}
-
-
- {photographer.price} -
- {photographer.services.map((value, index) => ( -
- {value} -
- ))} +
+
+
+ {photographer.price}
+ {photographer.services.map((value, index) => ( +
+ {value} +
+ ))}
@@ -97,13 +113,16 @@ const RecommendedPhotographers = () => {
))}
-
- - 맞춤형 작가 요청하기 - + +
+
+ + 맞춤형 작가 요청하기 + +
); diff --git a/src/app/request-custom/page.tsx b/src/app/request-custom/page.tsx index 3062545..7b357f0 100644 --- a/src/app/request-custom/page.tsx +++ b/src/app/request-custom/page.tsx @@ -1,10 +1,10 @@ 'use client'; import { ChangeEvent, useState } from 'react'; -import Link from 'next/link'; import Image from 'next/image'; import ArrowBack from '@/data/arrowLeft.svg'; import { useRouter } from 'next/navigation'; +import { submitForm } from '../api/apis'; const RequestCustom = () => { const router = useRouter(); @@ -13,16 +13,43 @@ const RequestCustom = () => { }; const [text, setText] = useState(''); + const [phoneNumber, setPhoneNumber] = useState(''); + const [loading, setLoading] = useState(false); 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 { + setLoading(false); + } + }; return ( -
+
Back @@ -44,6 +71,8 @@ const RequestCustom = () => {