diff --git a/src/components/Common/Card/Card.jsx b/src/components/Common/Card.jsx similarity index 100% rename from src/components/Common/Card/Card.jsx rename to src/components/Common/Card.jsx diff --git a/src/components/Common/Card/GroomerCard.jsx b/src/components/Common/Carousel.jsx similarity index 56% rename from src/components/Common/Card/GroomerCard.jsx rename to src/components/Common/Carousel.jsx index 2dadaf6..1883bf0 100644 --- a/src/components/Common/Card/GroomerCard.jsx +++ b/src/components/Common/Carousel.jsx @@ -1,8 +1,9 @@ -import { Box, Typography, IconButton } from '@mui/material'; +import { Box, IconButton } from '@mui/material'; import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import Card from '@components/Common/Card'; -const GroomerCard = ({ +const CarouselCard = ({ title, subtitle, onClick, @@ -13,7 +14,7 @@ const GroomerCard = ({ onNextClick, }) => { return ( - + {withSliderArrows && ( <> )} - - {title} { - e.target.src = defaultImage; - }} - style={{ - width: '80px', - height: '80px', - objectFit: 'cover', - borderRadius: '50%', - marginBottom: '8px', - }} + + - - {title} - {subtitle} - ); }; -export default GroomerCard; +export default CarouselCard; diff --git a/src/pages/Contest/ContestResult.jsx b/src/pages/Contest/ContestResult.jsx index ef6da68..1e4024a 100644 --- a/src/pages/Contest/ContestResult.jsx +++ b/src/pages/Contest/ContestResult.jsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import { Box, Typography } from '@mui/material'; import { Header } from '@components/Common/Header/Header'; -import Card from '@components/Common/Card/Card'; +import Card from '@components/Common/Card'; import WinnerProfile from '@components/Contest/WinnerProfile'; import { getContestRanking } from '@/api/contest'; import Loading from '@components/Layout/Loading'; diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 533d257..d2bc694 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -6,7 +6,7 @@ import Button from '@components/Common/Button/Button'; import Slider from 'react-slick'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; -import GroomerCard from '@components/Common/Card/GroomerCard'; +import CarouselCard from '@components/Common/Carousel'; import WinnerProfile from '@components/Contest/WinnerProfile'; import paths from '@/routes/paths'; import { getGroomerProfileMainPage, getContestWinner } from '@/api/home'; @@ -33,6 +33,7 @@ const Home = () => { speed: 500, slidesToShow: 1, slidesToScroll: 1, + accessibility: true, }; const localGroomersSliderRef = useRef(null); @@ -114,28 +115,55 @@ const Home = () => { /> - {localGroomers.length > 0 && ( - - 우리 동네 추천 반려견 미용사 - - )} - - {localGroomers.map((groomer, index) => ( - - navigate(paths.salonProfile.replace(':id', groomer.profileId)) - } - imageUrl={groomer.imageKey} - defaultImage="/images/default-groomer-profile.png" - withSliderArrows={true} - onPrevClick={() => handlePrevSlide(localGroomersSliderRef)} - onNextClick={() => handleNextSlide(localGroomersSliderRef)} - /> - ))} - + + 우리 동네 추천 반려견 미용사 + + + + + {localGroomers.map((groomer, index) => ( + + navigate( + paths.salonProfile.replace(':id', groomer.profileId) + ) + } + imageUrl={groomer.imageKey} + defaultImage="/images/default-groomer-profile.png" + withSliderArrows={true} + onPrevClick={() => handlePrevSlide(localGroomersSliderRef)} + onNextClick={() => handleNextSlide(localGroomersSliderRef)} + /> + ))} + + + {role === 'ROLE_USER' && ( @@ -169,28 +197,55 @@ const Home = () => { )} - {popularGroomers.length > 0 && ( - - 전국 인기 반려견 미용사 - - )} - - {popularGroomers.map((groomer, index) => ( - - navigate(paths.salonProfile.replace(':id', groomer.profileId)) - } - imageUrl={groomer.imageKey} - defaultImage="/images/default-groomer-profile.png" - withSliderArrows={true} - onPrevClick={() => handlePrevSlide(popularGroomersSliderRef)} - onNextClick={() => handleNextSlide(popularGroomersSliderRef)} - /> - ))} - + + 전국 인기 반려견 미용사 + + + + + {popularGroomers.map((groomer, index) => ( + + navigate( + paths.salonProfile.replace(':id', groomer.profileId) + ) + } + imageUrl={groomer.imageKey} + defaultImage="/images/default-groomer-profile.png" + withSliderArrows={true} + onPrevClick={() => handlePrevSlide(popularGroomersSliderRef)} + onNextClick={() => handleNextSlide(popularGroomersSliderRef)} + /> + ))} + + + );