Merge pull request #170 from Ureca-Dangdang-salon/fix-main

fix:스타일 수정
Ureca-Dangdang-salon · Dec 18, 2024 · 987bc9d · 987bc9d
2 parents 852be85 + da57431
commit 987bc9d
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 91 deletions.
diff --git a/src/components/Common/Card/Card.jsx → src/components/Common/Card.jsx b/src/components/Common/Card/Card.jsx → src/components/Common/Card.jsx
diff --git a/src/components/Common/Card/GroomerCard.jsx → src/components/Common/Carousel.jsx b/src/components/Common/Card/GroomerCard.jsx → 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,17 +14,18 @@ const GroomerCard = ({
   onNextClick,
 }) => {
   return (
-    <Box position="relative">
+    <Box position="relative" sx={{ padding: '0 40px' }}>
       {withSliderArrows && (
         <>
           <IconButton
             onClick={(e) => {
               e.stopPropagation();
               onPrevClick();
             }}
+            aria-label="이전 슬라이드"
             sx={{
               position: 'absolute',
-              right: -32,
+              left: 0,
               top: '50%',
               transform: 'translateY(-50%)',
               backgroundColor: 'white',
@@ -42,9 +44,10 @@ const GroomerCard = ({
               e.stopPropagation();
               onNextClick();
             }}
+            aria-label="다음 슬라이드"
             sx={{
               position: 'absolute',
-              left: -32,
+              right: 0,
               top: '50%',
               transform: 'translateY(-50%)',
               backgroundColor: 'white',
@@ -60,49 +63,17 @@ const GroomerCard = ({
           </IconButton>
         </>
       )}
-      <Box
-        my={1}
-        mx={2}
-        p={2}
-        borderRadius="10px"
-        boxShadow="rgba(0, 0, 0, 0.05) 0px 0px 7px 1px"
-        sx={{
-          textAlign: 'center !important',
-          display: 'flex !important',
-          flexDirection: 'column',
-          alignItems: 'center',
-          cursor: onClick ? 'pointer' : 'default',
-          maxWidth: '280px',
-          margin: '0 auto',
-        }}
-        onClick={onClick}
-      >
-        <img
-          src={imageUrl || defaultImage}
-          alt={title}
-          onError={(e) => {
-            e.target.src = defaultImage;
-          }}
-          style={{
-            width: '80px',
-            height: '80px',
-            objectFit: 'cover',
-            borderRadius: '50%',
-            marginBottom: '8px',
-          }}
+      <Box sx={{ maxWidth: '350px', margin: '0 auto' }}>
+        <Card
+          title={title}
+          subtitle={subtitle}
+          onClick={onClick}
+          imageUrl={imageUrl}
+          defaultImage={defaultImage}
         />
-        <Box
-          display="flex"
-          flexDirection="column"
-          alignItems="center"
-          gap={0.5}
-        >
-          <Typography fontWeight="bold">{title}</Typography>
-          <Typography>{subtitle}</Typography>
-        </Box>
       </Box>
     </Box>
   );
 };
 
-export default GroomerCard;
+export default CarouselCard;
diff --git 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
@@ -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 = () => {
           />
         </Box>
 
-        {localGroomers.length > 0 && (
-          <Typography fontWeight="bold" mt={3}>
-            우리 동네 추천 반려견 미용사
-          </Typography>
-        )}
-        <Slider ref={localGroomersSliderRef} {...sliderSettings}>
-          {localGroomers.map((groomer, index) => (
-            <GroomerCard
-              title={groomer.name}
-              subtitle={`${groomer.city} ${groomer.district}`}
-              key={index}
-              onClick={() =>
-                navigate(paths.salonProfile.replace(':id', groomer.profileId))
-              }
-              imageUrl={groomer.imageKey}
-              defaultImage="/images/default-groomer-profile.png"
-              withSliderArrows={true}
-              onPrevClick={() => handlePrevSlide(localGroomersSliderRef)}
-              onNextClick={() => handleNextSlide(localGroomersSliderRef)}
-            />
-          ))}
-        </Slider>
+        <Typography fontWeight="bold" mt={3} mb={1}>
+          우리 동네 추천 반려견 미용사
+        </Typography>
+        <Box sx={{ position: 'relative', mb: 5 }}>
+          <Box
+            sx={{
+              '& .slick-list': {
+                overflow: 'hidden !important',
+                padding: '5px',
+              },
+              '& .slick-slide': {
+                padding: '0 12px',
+              },
+              '& .slick-dots': {
+                position: 'absolute',
+                bottom: '-30px',
+                '& li': {
+                  '& button:before': {
+                    fontSize: 8,
+                    color: '#n1.main',
+                  },
+                },
+                '& li.slick-active button:before': {
+                  color: 'primary.main',
+                },
+              },
+            }}
+          >
+            <Slider ref={localGroomersSliderRef} {...sliderSettings}>
+              {localGroomers.map((groomer, index) => (
+                <CarouselCard
+                  title={groomer.name}
+                  subtitle={`${groomer.city} ${groomer.district}`}
+                  key={index}
+                  onClick={() =>
+                    navigate(
+                      paths.salonProfile.replace(':id', groomer.profileId)
+                    )
+                  }
+                  imageUrl={groomer.imageKey}
+                  defaultImage="/images/default-groomer-profile.png"
+                  withSliderArrows={true}
+                  onPrevClick={() => handlePrevSlide(localGroomersSliderRef)}
+                  onNextClick={() => handleNextSlide(localGroomersSliderRef)}
+                />
+              ))}
+            </Slider>
+          </Box>
+        </Box>
 
         {role === 'ROLE_USER' && (
           <Box bgcolor="n1.main" p={3} mt={5} borderRadius="10px">
@@ -169,28 +197,55 @@ const Home = () => {
           </Box>
         )}
 
-        {popularGroomers.length > 0 && (
-          <Typography fontWeight="bold" mt={3}>
-            전국 인기 반려견 미용사
-          </Typography>
-        )}
-        <Slider ref={popularGroomersSliderRef} {...sliderSettings}>
-          {popularGroomers.map((groomer, index) => (
-            <GroomerCard
-              title={groomer.name}
-              subtitle={`${groomer.city} ${groomer.district}`}
-              key={index}
-              onClick={() =>
-                navigate(paths.salonProfile.replace(':id', groomer.profileId))
-              }
-              imageUrl={groomer.imageKey}
-              defaultImage="/images/default-groomer-profile.png"
-              withSliderArrows={true}
-              onPrevClick={() => handlePrevSlide(popularGroomersSliderRef)}
-              onNextClick={() => handleNextSlide(popularGroomersSliderRef)}
-            />
-          ))}
-        </Slider>
+        <Typography fontWeight="bold" mt={3} mb={1}>
+          전국 인기 반려견 미용사
+        </Typography>
+        <Box sx={{ position: 'relative', mb: 5 }}>
+          <Box
+            sx={{
+              '& .slick-list': {
+                overflow: 'hidden !important',
+                padding: '5px',
+              },
+              '& .slick-slide': {
+                padding: '0 12px',
+              },
+              '& .slick-dots': {
+                position: 'absolute',
+                bottom: '-30px',
+                '& li': {
+                  '& button:before': {
+                    fontSize: 8,
+                    color: '#n1.main',
+                  },
+                },
+                '& li.slick-active button:before': {
+                  color: 'primary.main',
+                },
+              },
+            }}
+          >
+            <Slider ref={popularGroomersSliderRef} {...sliderSettings}>
+              {popularGroomers.map((groomer, index) => (
+                <CarouselCard
+                  title={groomer.name}
+                  subtitle={`${groomer.city} ${groomer.district}`}
+                  key={index}
+                  onClick={() =>
+                    navigate(
+                      paths.salonProfile.replace(':id', groomer.profileId)
+                    )
+                  }
+                  imageUrl={groomer.imageKey}
+                  defaultImage="/images/default-groomer-profile.png"
+                  withSliderArrows={true}
+                  onPrevClick={() => handlePrevSlide(popularGroomersSliderRef)}
+                  onNextClick={() => handleNextSlide(popularGroomersSliderRef)}
+                />
+              ))}
+            </Slider>
+          </Box>
+        </Box>
       </Box>
     </div>
   );