-
+
11월 콘테스트 우승자
-
+
{
label="우승 미용사 프로필"
backgroundColor="primary"
size="medium"
+ onClick={() =>
+ navigate(
+ paths.salonProfile.replace(':id', winner.grommerProfileId)
+ )
+ }
/>
@@ -60,10 +91,10 @@ const Home = () => {
우리 동네 추천 반려견 미용사
- {groomers.map((groomer, index) => (
+ {localGroomers.map((groomer, index) => (
))}
@@ -101,10 +132,10 @@ const Home = () => {
전국 인기 반려견 미용사
- {groomers.map((groomer, index) => (
+ {popularGroomers.map((groomer, index) => (
))}
diff --git a/src/pages/NewReview.jsx b/src/pages/NewReview.jsx
index f052932..03c1d91 100644
--- a/src/pages/NewReview.jsx
+++ b/src/pages/NewReview.jsx
@@ -3,9 +3,9 @@ import { Box, Typography } from '@mui/material';
import { useState } from 'react';
import Button from '@components/Common/Button/Button';
import TextArea from '@components/Common/TextArea/TextArea';
-import axios from 'axios';
import { Toaster } from 'react-hot-toast';
import ImageSelector from '@components/Features/ImageSelector';
+import { postReview } from '@/api/review';
const NewReview = () => {
const [data, setData] = useState({
@@ -15,7 +15,7 @@ const NewReview = () => {
});
const MAX_IMAGES = 3;
- const totalStars = 5;
+ const TOTAL_STARS = 5;
const [userRating, setUserRating] = useState(0);
const [hoverRating, setHoverRating] = useState(0);
@@ -26,7 +26,7 @@ const NewReview = () => {
const renderStars = () => {
const stars = [];
- for (let i = 1; i <= totalStars; i++) {
+ for (let i = 1; i <= TOTAL_STARS; i++) {
const isFilled = i <= (hoverRating || userRating);
stars.push(
![]()
{
setData((prev) => ({ ...prev, [field]: value }));
};
- const handleSubmit = () => {
- const userId = 2;
- // const accessToken ='';
-
- axios
- .post(`http://localhost:8080/api/reviews/${userId}`, data, {
- headers: {
- Accept: 'application/json',
- 'Content-Type': 'application/json',
- // Authorization: `Bearer ${accessToken}`,
- },
- })
- .then((response) => {
- console.log('Review submitted successfully:', response.data);
- })
- .catch((error) => {
- console.error('Error submitting review:', error);
- });
+ const handleSubmit = async () => {
+ const groomerId = 4; //TODO: 변수로 대체하기
+ await postReview(data, groomerId);
};
return (
@@ -111,16 +96,17 @@ const NewReview = () => {
- setData((prev) => ({ ...prev, imageKey: updatedImages }))
- }
+ onChange={(updatedImages) => {
+ handleChange('imageKey', updatedImages);
+ }}
/>
diff --git a/src/pages/Notification.jsx b/src/pages/Notification.jsx
index d0f5040..b12bed4 100644
--- a/src/pages/Notification.jsx
+++ b/src/pages/Notification.jsx
@@ -1,64 +1,132 @@
import { DetailHeader } from '@components/Common/DetailHeader/DetailHeader';
-import { Box, Typography, Badge } from '@mui/material';
+import { Box, Typography, Badge, Switch } from '@mui/material';
import ArrowForwardIosRoundedIcon from '@mui/icons-material/ArrowForwardIosRounded';
import { useNavigate } from 'react-router-dom';
import EmptyContent from '@components/Layout/EmptyContent';
+import { useEffect, useState } from 'react';
+import {
+ deleteAll,
+ getNotification,
+ markAsRead,
+ updateSetting,
+} from '@/api/notification';
+import { Modal } from '@components/Common/Modal/Modal';
+import {
+ handleEnableNotifications,
+ notificationServiceInstance,
+} from '@/utils/NotificationService';
+import useUserStore from '@/store/useUserStore';
+import paths from '@/routes/paths';
const Notification = () => {
const navigate = useNavigate();
+ const [notifications, setNotifications] = useState([]);
+ const { notificationEnabled, setNotificationEnabled } = useUserStore();
- //TODO: API 명세서 업데이트 되면 대상 추가하기
- const notifications = [
- {
- description: '새 견적이 도착했습니다.',
- link: '/quotation/123',
- status: 'NOT_READ',
- },
- {
- description: '리뷰를 작성해 주세요.',
- link: '/newreview',
- status: 'NOT_READ',
- },
- ];
+ useEffect(() => {
+ const getList = async () => {
+ const res = await getNotification();
+ setNotifications(res);
+ };
+
+ getList();
+
+ const handleIncomingNotification = (newNotification) => {
+ setNotifications((prev) => [newNotification, ...prev]);
+ };
+
+ notificationServiceInstance.listenForMessages(handleIncomingNotification);
+
+ return () => {
+ notificationServiceInstance.callbacks =
+ notificationServiceInstance.callbacks.filter(
+ (cb) => cb !== handleIncomingNotification
+ );
+ };
+ }, []);
+
+ const handleDeleteAll = async () => {
+ await deleteAll();
+ setNotifications([]);
+ };
+
+ const handleNotificationChange = async () => {
+ if (await updateSetting(!notificationEnabled))
+ setNotificationEnabled(!notificationEnabled);
+
+ if (!notificationEnabled) {
+ await notificationServiceInstance.registerServiceWorker();
+ await handleEnableNotifications();
+ } else {
+ await notificationServiceInstance.unsubscribeFromNotifications();
+ await notificationServiceInstance.unregisterServiceWorker();
+ }
+ };
return (
- {notifications.length ? (
-
- {notifications.map((notification, index) => (
- navigate(notification.link)}
- >
+
+
+
+ 알림 허용
+
+
+ {notifications.length ? (
+
+
+
+ ) : (
+ <>
+ )}
+
+
+ {notifications.length ? (
+
+ {notifications.map((notification, index) => (
{
+ if (await markAsRead(notification.id)) {
+ navigate(paths.chat); //TODO: link to chatroom
+ }
+ }}
>
-
-
- {notification.description}
-
-
-
+
+
+ {notification.title}
+
+ {notification.body}
+
+
+
-
- ))}
-
- ) : (
-
- )}
+ ))}
+
+ ) : (
+
+ )}
+
);
};
diff --git a/src/pages/SalonProfile.jsx b/src/pages/SalonProfile.jsx
index 309a9f5..89a83b5 100644
--- a/src/pages/SalonProfile.jsx
+++ b/src/pages/SalonProfile.jsx
@@ -6,47 +6,71 @@ import WorkspacePremiumRoundedIcon from '@mui/icons-material/WorkspacePremiumRou
import ReviewStars from '@components/Features/ReviewStars';
import { useNavigate } from 'react-router-dom';
import Grid from '@mui/material/Grid2';
+import React, { useEffect, useState } from 'react';
+import { groomerPublicProfile } from '@/api/groomerProfile';
+import paths from '@/routes/paths';
const SalonProfile = () => {
const navigate = useNavigate();
+ const [data, setData] = useState({});
+ const [detail, setDetail] = useState({});
- const data = {
- name: '펫살롱 포미',
- experienceYears: '15',
- description:
- '펫살롱 포미는 강아지의 건강과 행복을 우선으로 생각하는 반려견 전문 미용실입니다. 오랜 경력과 다양한 자격을 갖춘 미용사가 고객님의 소중한 반려견에게 맞춤형 미용 서비스를 제공합니다. 피부 상태, 털의 특성, 기질 등을 고려하여 강아지의 스트레스를 최소화하며 편안한 미용 경험을 선사합니다. 기본 미용 외에도 건강 체크와 피부 관리, 맞춤형 스타일링까지 반려견에게 필요한 모든 서비스를 준비해 두었습니다.',
- phone: '010-1111-2222',
- contactHours: '평일 오전 10시 ~ 오후 7시',
- serviceLocation: '서울특별시 성동구, 강남구',
- serviceType: 'ANY',
- services: '목욕, 털 미용, 발톱관리, 피부 미용, 양치, 귀 청소',
- certification: [
- '애견미용사 자격증 1급',
- '반려동물 행동 상담사 2급',
- '반려견 피부 관리사 자격증',
- ],
- businessNumber: '123-45-67890',
- address: '서울특별시 강남구 역삼동 123-45',
- faq: '1. 처음 방문하는데, 제 반려견에게 맞는 서비스는 어떻게 알 수 있나요? \n 반려견의 상태(피부, 털 상태, 성격 등)에 따라 적합한 서비스를 추천드립니다. 방문 시 상담을 통해 최적의 옵션을 안내해 드립니다.\n\n 2. 미용 시간이 얼마나 걸리나요? \n 서비스 내용과 반려견의 크기 및 상태에 따라 다르지만, 보통: \n 소형견: 1.5~2시간 \n 중형견: 2~3시간 \n 대형견: 3시간 이상자세한 시간은 상담 후 알려드립니다.',
- averageReview: 3.5,
- };
+ const defaultImgPath = '/images/default-groomer-profile.png';
+ const imageSrc = data.imageKey ? data.imageKey : defaultImgPath;
+ const imageStyle = data.imageKey
+ ? {
+ borderRadius: '50%',
+ objectFit: 'cover',
+ border: '2px solid',
+ borderColor: '#9747FF',
+ }
+ : {};
+
+ useEffect(() => {
+ const currentPath = window.location.pathname;
+ const id = currentPath.split('/').pop();
+
+ const getGroomerProfile = async () => {
+ const res = await groomerPublicProfile(id);
+ setData(res);
+ setDetail(res.groomerProfileDetailsInfoResponseDto);
+ };
+
+ getGroomerProfile();
+ }, []);
return (
- 
+ 
- {data.name}
+ {data?.name}
-
+ {!isNaN(detail.starScore) && (
+ <>
+
+
+
+
+
+ )}
- {data.description}
+ {data?.description}
{
flexDirection="column"
sx={{
cursor: 'pointer',
+ '&:hover': { color: 'secondary.main' },
}}
>
-
+
결제
- 11
+ {detail?.estimateRequestCount}
@@ -102,58 +124,74 @@ const SalonProfile = () => {
flexDirection="column"
sx={{
cursor: 'pointer',
+ '&:hover': { color: 'secondary.main' },
}}
+ onClick={() =>
+ navigate(paths.salonReviews, {
+ state: { profileId: data.profileId },
+ })
+ }
>
-
+
리뷰
- 10
+ {data?.reviewCount || 0}
- {data.experienceYears}년 경력
+ {data?.experience}
📞전화번호:
- {data.phone}
+ {data?.phone}
🧑연락 가능 시간:
- {data.contactHours}
+ {data?.contactHours}
📍서비스 지역:
- {data.serviceLocation}
+
+ {detail?.servicesDistricts?.map((item, index) => (
+
+ {item.city} {item.district}
+
+ ))}
+
🚙서비스 형태:
- {data.serviceType == 'VISIT'
+ {data?.serviceType == 'VISIT'
? '방문'
- : data.serviceType == 'SHOP'
+ : data?.serviceType == 'SHOP'
? '매장'
: '방문, 매장'}
✂제공 서비스:
- {data.services}
+
+ {detail?.servicesOffered?.map((item, index) => (
+
+ {item}
+ {index < detail.servicesOffered.length - 1 && ', '}
+
+ ))}
+
🪪자격증:
- {data.certification.map((cert, index) => {
+ {detail?.certifications?.map((cert, index) => {
return {cert};
})}
💼사업자 번호:
- {data.businessNumber}
+ {data?.businessNumber}
📍가게 위치 정보:
- {data.address}
+ {data?.address}
FAQ
- {data.faq}
+ {data?.faq}
diff --git a/src/pages/SalonReviews.jsx b/src/pages/SalonReviews.jsx
new file mode 100644
index 0000000..ca8812d
--- /dev/null
+++ b/src/pages/SalonReviews.jsx
@@ -0,0 +1,48 @@
+import { myReviews, receivedReviews } from '@/api/review';
+import useUserStore from '@/store/useUserStore';
+import { DetailHeader } from '@components/Common/DetailHeader/DetailHeader';
+import ReviewAccordion from '@components/Features/ReviewAccordion';
+import EmptyContent from '@components/Layout/EmptyContent';
+import { Box, Typography } from '@mui/material';
+import { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const SalonReviews = () => {
+ const location = useLocation();
+ const [id, setId] = useState(location.state?.profileId);
+ const [allReviews, setAllReviews] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ const getReviews = async () => {
+ const res = await receivedReviews(id);
+ setAllReviews(res);
+ setLoading(false);
+ };
+ getReviews();
+ }, []);
+
+ if (loading) return
LOADING;
+
+ return (
+
+
+
+ {!allReviews.length ? (
+
+ ) : (
+
+ {allReviews?.map((review) => (
+
+ ))}
+
+ )}
+
+ );
+};
+
+export default SalonReviews;
diff --git a/src/pages/Survey/AddDogProfile.jsx b/src/pages/Survey/AddDogProfile.jsx
new file mode 100644
index 0000000..d442f43
--- /dev/null
+++ b/src/pages/Survey/AddDogProfile.jsx
@@ -0,0 +1,119 @@
+import { Container, Box } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { SurveyHeader } from '@/components/Common/SurveyHeader/SurveyHeader';
+import Button from '@/components/Common/Button/Button';
+import Step1 from '@/components/Survey/UserSteps/Step1';
+import Step2 from '@/components/Survey/UserSteps/Step2';
+import Step3 from '@/components/Survey/UserSteps/Step3';
+import Step4 from '@/components/Survey/UserSteps/Step4';
+import Step5 from '@/components/Survey/UserSteps/Step5';
+import Step6 from '@/components/Survey/UserSteps/Step6';
+import Step7 from '@/components/Survey/UserSteps/Step7';
+import useSurveyUserStore from '@/store/useSurveyUserStore';
+import { postDogProfile } from '@/api/dogProfile';
+import paths from '@/routes/paths';
+
+const AddDogProfile = () => {
+ const navigate = useNavigate();
+ const { step, setStep, petInfo, characteristics } = useSurveyUserStore();
+
+ const isStepValid = () => {
+ switch (step) {
+ case 1:
+ return petInfo.name.trim() !== '';
+ case 2:
+ return petInfo.ageYear > 0 || petInfo.ageMonth > 0;
+ case 3:
+ return petInfo.weight > 0;
+ case 4:
+ return petInfo.species !== '' && petInfo.species !== null;
+ case 5:
+ return (
+ ['MALE', 'FEMALE'].includes(petInfo.gender) &&
+ ['Y', 'N'].includes(petInfo.neutering)
+ );
+ case 6:
+ return (
+ petInfo.featureIds.length !== 0 ||
+ characteristics.없음 === true ||
+ petInfo.additionalFeature.trim() !== ''
+ );
+ case 7:
+ return true;
+ default:
+ return false;
+ }
+ };
+
+ const handleSaveProfile = async () => {
+ const res = await postDogProfile(petInfo);
+ return res;
+ };
+
+ const handleSubmit = async () => {
+ if (!isStepValid()) return '';
+ if (await handleSaveProfile()) navigate(paths.mypage);
+ };
+
+ const handleNextStep = () => {
+ if (!isStepValid()) return '';
+ setStep(step + 1);
+ };
+
+ const handleBack = () => {
+ if (step > 1) setStep(step - 1);
+ else navigate(-1);
+ };
+
+ return (
+ <>
+
+
+
+ {step === 1 && }
+ {step === 2 && }
+ {step === 3 && }
+ {step === 4 && }
+ {step === 5 && }
+ {step === 6 && }
+ {step === 7 && }
+
+
+ {step === 7 ? (
+
+ ) : (
+
+ )}
+
+
+
+ );
+};
+
+export default AddDogProfile;
diff --git a/src/pages/Survey/AddSalonProfile.jsx b/src/pages/Survey/AddSalonProfile.jsx
new file mode 100644
index 0000000..acc2a5c
--- /dev/null
+++ b/src/pages/Survey/AddSalonProfile.jsx
@@ -0,0 +1,124 @@
+import { Box, Container } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { SurveyHeader } from '@/components/Common/SurveyHeader/SurveyHeader';
+import Button from '@/components/Common/Button/Button';
+import Step1 from '@/components/Survey/GroomerSteps/Step1';
+import Step2 from '@/components/Survey/GroomerSteps/Step2';
+import Step3 from '@/components/Survey/GroomerSteps/Step3';
+import Step4 from '@/components/Survey/GroomerSteps/Step4';
+import Step5 from '@components/Survey/GroomerSteps/Step5';
+import Step6 from '@components/Survey/GroomerSteps/Step6';
+import Step7 from '@components/Survey/GroomerSteps/Step7';
+import useSurveyGroomerStore from '@/store/useSurveyGroomerStore';
+import {
+ postAddGroomerProfile,
+ postGroomerProfile,
+} from '@/api/groomerProfile';
+import paths from '@/routes/paths';
+
+function AddSalonProfile() {
+ const navigate = useNavigate();
+ const { groomerInfo, businessInfo, step, setStep } = useSurveyGroomerStore();
+
+ const isStepValid = () => {
+ switch (step) {
+ case 1:
+ return groomerInfo.name.trim() !== '';
+ case 2:
+ return groomerInfo.servicesOfferedId.length > 0;
+ case 3:
+ return groomerInfo.phone.trim() !== '';
+ case 4:
+ return groomerInfo.contactHours.trim() !== '';
+ case 5:
+ return groomerInfo.servicesDistrictIds.length > 0;
+ case 6:
+ return groomerInfo.serviceType !== '';
+ case 7:
+ return true;
+ default:
+ return false;
+ }
+ };
+
+ const handleNextStep = async () => {
+ if (!isStepValid()) return '';
+ if (step === 7) {
+ if (await postAddGroomerProfile(businessInfo)) navigate(paths.home);
+ } else setStep(step + 1);
+ };
+
+ const handleBack = () => {
+ if (step > 1) setStep(step - 1);
+ else navigate(-1);
+ };
+
+ const handleSaveProfile = async () => {
+ const res = await postGroomerProfile(groomerInfo);
+ return res;
+ };
+
+ return (
+ <>
+
+
+ {step === 1 && }
+ {step === 2 && }
+ {step === 3 && }
+ {step === 4 && }
+ {step === 5 && }
+ {step === 6 && }
+ {step === 7 && }
+
+ {step === 6 ? (
+
+
+ ) : (
+
+ )}
+
+
+
+ );
+}
+
+export default AddSalonProfile;
diff --git a/src/pages/Survey/Survey.jsx b/src/pages/Survey/Survey.jsx
index eaf5015..da21a20 100644
--- a/src/pages/Survey/Survey.jsx
+++ b/src/pages/Survey/Survey.jsx
@@ -8,10 +8,12 @@ import { Selector2 } from '@components/NewRequest/atoms/Selector2';
import LocationOnIcon from '@mui/icons-material/LocationOn';
import { useNavigate } from 'react-router-dom';
import paths from '@/routes/paths';
+import useUserStore from '@/store/useUserStore';
function Survey() {
const [location, setLocation] = useState(null);
const [isModalOpen, setIsModalOpen] = useState(false);
+ const { role, setRole } = useUserStore();
const [id, setId] = useState(null);
const navigate = useNavigate();
@@ -22,11 +24,13 @@ function Survey() {
const handleHairstylistSignup = async () => {
if (!location) return false;
+ setRole('ROLE_SALON');
if (await join('ROLE_SALON', id)) navigate(paths.survey.groomer);
};
const handleUserSignup = async () => {
if (!location) return false;
+ setRole('ROLE_USER');
if (await join('ROLE_USER', id)) navigate(paths.survey.user);
};
diff --git a/src/pages/Survey/SurveyGroomer.jsx b/src/pages/Survey/SurveyGroomer.jsx
index bcaaafd..c764571 100644
--- a/src/pages/Survey/SurveyGroomer.jsx
+++ b/src/pages/Survey/SurveyGroomer.jsx
@@ -10,7 +10,12 @@ import Step5 from '@components/Survey/GroomerSteps/Step5';
import Step6 from '@components/Survey/GroomerSteps/Step6';
import Step7 from '@components/Survey/GroomerSteps/Step7';
import useSurveyGroomerStore from '@/store/useSurveyGroomerStore';
-import { postAddGroomerProfile, postGroomerProfile } from '@/api/profile';
+import {
+ postAddGroomerProfile,
+ postGroomerProfile,
+} from '@/api/groomerProfile';
+import paths from '@/routes/paths';
+import { handleEnableNotifications } from '@/utils/NotificationService';
function SurveyGroomer() {
const navigate = useNavigate();
@@ -40,13 +45,16 @@ function SurveyGroomer() {
const handleNextStep = async () => {
if (!isStepValid()) return '';
if (step === 7) {
- if (await postAddGroomerProfile(businessInfo)) navigate('/home');
+ if (await postAddGroomerProfile(businessInfo)) {
+ handleEnableNotifications();
+ navigate(paths.home);
+ }
} else setStep(step + 1);
};
const handleBack = () => {
if (step > 1) setStep(step - 1);
- else navigate('/survey');
+ else navigate(paths.survey);
};
const handleSaveProfile = async () => {
diff --git a/src/pages/Survey/SurveyUser.jsx b/src/pages/Survey/SurveyUser.jsx
index 687dc56..7581f12 100644
--- a/src/pages/Survey/SurveyUser.jsx
+++ b/src/pages/Survey/SurveyUser.jsx
@@ -11,7 +11,9 @@ import Step5 from '@/components/Survey/UserSteps/Step5';
import Step6 from '@/components/Survey/UserSteps/Step6';
import Step7 from '@/components/Survey/UserSteps/Step7';
import useSurveyUserStore from '@/store/useSurveyUserStore';
-import { postDogProfile } from '@/api/profile';
+import { postDogProfile } from '@/api/dogProfile';
+import paths from '@/routes/paths';
+import { handleEnableNotifications } from '@/utils/NotificationService';
const SurveyUser = () => {
const navigate = useNavigate();
@@ -57,8 +59,11 @@ const SurveyUser = () => {
}
};
- const handleGoHome = async () => {
- if (await handleSaveProfile()) navigate('/home');
+ const completeProfile = async () => {
+ if (await handleSaveProfile()) {
+ handleEnableNotifications();
+ navigate(paths.home);
+ }
};
const handleNextStep = () => {
@@ -68,7 +73,7 @@ const SurveyUser = () => {
const handleBack = () => {
if (step > 1) setStep(step - 1);
- else navigate('/survey');
+ else navigate(paths.survey);
};
return (
@@ -103,14 +108,14 @@ const SurveyUser = () => {
>
{step === 7 ? (
{
const is = 1;
return (
-
+
{is ? : }
diff --git a/src/pages/mypage/DogProfile.jsx b/src/pages/mypage/DogProfile.jsx
index d97f2cc..7840f7f 100644
--- a/src/pages/mypage/DogProfile.jsx
+++ b/src/pages/mypage/DogProfile.jsx
@@ -8,64 +8,53 @@ import { Selector } from '@components/Common/Selector/Selector';
import RadioButton from '@components/Common/RadioButton/RadioButton';
import { breeds } from '@/constants/breeds';
import ProfileSelector from '@components/Features/ProfileSelector';
+import { useEffect } from 'react';
+import { dogProfile, updateDogProfile } from '@/api/dogProfile';
+import { characteristics } from '@/constants/features';
+import { useNavigate } from 'react-router-dom';
const DogProfile = () => {
- const features = [
- '물을 무서워해요',
- '사람을 좋아해요',
- '발을 만지는 걸 싫어해요',
- '없음',
- ];
- const [profileImage, setProfileImage] = useState(null);
- const [etc, setEtc] = useState(false);
- const [data, setData] = useState({
- name: '댕댕이',
- species: '골든 리트리버',
- ageYears: 1,
- ageMonths: 2,
- gender: 'female',
- neutering: 'Y',
- weight: 10,
- additionalFeature: [],
- customFeature: '',
- });
+ const navigate = useNavigate();
+ const [id, setId] = useState(0);
+ const [data, setData] = useState({});
+ const [features, setFeatures] = useState([]);
+ const [additionalFeature, setAdditionalFeature] = useState('');
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ const currentPath = window.location.pathname;
+ const id = currentPath.split('/').pop();
+ setId(id);
+
+ const getDogProfile = async () => {
+ const res = await dogProfile(id);
+ setData(res);
+ setFeatures(res.features.map((item) => item.description));
+ setLoading(false);
+ };
+
+ getDogProfile();
+ }, []);
const handleChange = (field, value) => {
setData((prev) => ({ ...prev, [field]: value }));
};
- const handleFeatureChange = (feature) => {
- if (data.additionalFeature.includes(feature)) {
- handleChange(
- 'additionalFeature',
- data.additionalFeature.filter((f) => f !== feature)
- );
- } else if (feature === '없음') {
- handleChange('additionalFeature', ['없음']);
- setEtc(false);
- } else {
- setData((prev) => {
- const updatedFeatures = prev.additionalFeature.includes('없음')
- ? prev.additionalFeature.filter((f) => f !== '없음')
- : [...prev.additionalFeature];
-
- if (!updatedFeatures.includes(feature)) {
- updatedFeatures.push(feature);
- }
-
- return { ...prev, additionalFeature: updatedFeatures };
- });
- }
- };
-
const handleImageChange = (image) => {
- setProfileImage(image);
+ handleChange('profileImage', image);
};
const handleSubmit = () => {
- console.log('Form Submitted:', data);
+ const featureIds = features
+ .filter((feat) => feat !== '기타' && feat !== '없음')
+ .map((feat) => Object.keys(characteristics).indexOf(feat) + 1);
+
+ updateDogProfile(data, id, featureIds, additionalFeature);
+ navigate(-1);
};
+ if (loading) return LOADING;
+
return (
@@ -73,7 +62,7 @@ const DogProfile = () => {
@@ -92,15 +81,15 @@ const DogProfile = () => {
나이
handleChange('ageYears', value)}
- value={data.ageYears}
+ onChange={(value) => handleChange('ageYear', value)}
+ value={data.ageYear}
placeholder={0}
label="년"
/>
handleChange('ageMonths', value)}
- value={data.ageMonths}
+ onChange={(value) => handleChange('ageMonth', value)}
+ value={data.ageMonth}
placeholder={0}
label="개월"
/>
@@ -122,15 +111,15 @@ const DogProfile = () => {
handleChange('gender', 'male')}
+ selected={data.gender === 'MALE'}
+ onChange={() => handleChange('gender', 'MALE')}
/>
handleChange('gender', 'female')}
+ selected={data.gender === 'FEMALE'}
+ onChange={() => handleChange('gender', 'FEMALE')}
/>
@@ -163,35 +152,38 @@ const DogProfile = () => {
특징
- {features.map((feat) => (
- handleFeatureChange(feat)}
- />
+ {Object.entries(characteristics).map(([trait, checked]) => (
+
+ {
+ setFeatures((prevFeatures) => {
+ if (trait === '없음') return ['없음'];
+ if (trait === '기타') setAdditionalFeature('');
+ if (prevFeatures.includes(trait))
+ return prevFeatures.filter((item) => item !== trait);
+
+ return [
+ ...prevFeatures.filter((item) => item !== '없음'),
+ trait,
+ ];
+ });
+ }}
+ />
+ {trait === '기타' && features.includes(trait) && (
+
+ setAdditionalFeature(e.target.value)}
+ />
+
+ )}
+
))}
- {
- setEtc(!etc);
- handleChange(
- 'additionalFeature',
- data.additionalFeature.filter((f) => f !== '없음')
- );
- if (etc) handleChange('customFeature', '');
- }}
- />
- {etc && (
- handleChange('customFeature', e.target.value)}
- />
- )}
-
+export const Header = () => {
+ const [unreadNotification, setUnreadNotification] = useState(0);
-