From 2d553bdd20f10742bc23c28f8ca98525c799c17c Mon Sep 17 00:00:00 2001 From: Neoself1 Date: Thu, 22 Aug 2024 10:51:19 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A1=9C=EB=94=A9=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20ui=20(#2)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + src/app/api/apis.ts | 22 ++++++ src/app/photographer/page.tsx | 95 +++++++++++++++----------- src/app/request-custom/page.tsx | 62 +++++++++++++---- src/app/request-notification/page.tsx | 35 ++++++++-- src/app/select-mood/page.tsx | 84 +++++++++++------------ src/app/select-type/page.tsx | 34 ++++----- src/components/Loading.tsx | 20 ++++++ src/components/MoodImageGroup.tsx | 44 ++++++++++++ src/data/database.ts | 4 ++ src/data/loading.gif | Bin 0 -> 26634 bytes yarn.lock | 65 ++++++++++++++++++ 12 files changed, 349 insertions(+), 118 deletions(-) create mode 100644 src/app/api/apis.ts create mode 100644 src/components/Loading.tsx create mode 100644 src/components/MoodImageGroup.tsx create mode 100644 src/data/loading.gif 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 = () => {