Merge pull request #257 from Kernel360/fix-issue-main

페이지 디자인: 홈페이지 디자인 수정
Kernel360 · Mar 5, 2024 · ec89f77 · ec89f77
2 parents 2d65dd6 + 5f6ccaf
commit ec89f77
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 51 deletions.
diff --git a/src/app/(my-page)/my-page/page.tsx b/src/app/(my-page)/my-page/page.tsx
@@ -20,7 +20,7 @@ import styles from './page.module.scss';
 const cx = classNames.bind(styles);
 
 const TOP_MARGIN = 96;
-const BOTTOM_MARGIN = 97;
+const BOTTOM_MARGIN = 110;
 
 function MyProfilePage() {
   const logout = useLoggedOut();

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -19,15 +19,14 @@ function Home() {
     <>
       <Header className={cx('home')} type="home" />
       <main className={cx('mainContainer')}>
-        <Spacing size={8} />
         <Banner bannerData={MOCK_BANNER_DATA} />
         <Spacing size={32} />
         <div className={cx('recommendWrapper')}>
           <Text typography="t4" bold>추천 세차용품</Text>
           <Spacing size={16} />
           <RecommendListContainer />
         </div>
-        <Spacing size={35} />
+        <Spacing size={32} />
         <div className={cx('productListContainer')}>
           <Text typography="t4" bold>WashFit 랭킹</Text>
           <Spacing size={16} />

diff --git a/src/components/shared/carousel/RecommendList.scss b/src/components/shared/carousel/RecommendList.scss
@@ -1,37 +1,10 @@
-/* stylelint-disable selector-class-pattern */
-
-.recommend-slide {
-    .slick-list {
-        box-sizing: border-box;
-        padding: 0 var(--default-padding);
-
-        .slick-track {
-            .slick-slide {
-                width: 85px !important;
-                margin-right: 8px;
-
-                & > div {
-                    a {
-                        box-sizing: border-box;
-                        text-align: center;
-
-                        .img-container {
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            width: 100%;
-                            height: 85px;
-                            margin: 0 auto 3px;
-                            border-radius: 16px;
-                            background-color: #eff9ff;
-
-                            img {
-                                vertical-align: top;
-                            }
-                        }
-                    }
-                }
-            }
-        }
+.imageContainer {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    text-align: center;
+
+    span {
+        width: 85px;
     }
 }
diff --git a/src/components/shared/carousel/RecommendList.tsx b/src/components/shared/carousel/RecommendList.tsx
@@ -9,6 +9,8 @@ import Link from 'next/link';
 import { RecommendProductsType } from '@remote/api/types/home';
 import Text from '@shared/text/Text';
 
+import Spacing from '../spacing/Spacing';
+
 const settings = {
   infinite: true,
   slidesToShow: 4,
@@ -19,6 +21,7 @@ const settings = {
   arrows: false,
   speed: 2000,
   autoplaySpeed: 5000,
+  swipeToSlide: true,
 };
 
 // eslint-disable-next-line max-len
@@ -29,16 +32,15 @@ function RecommendList({ recommendProductsData }: { recommendProductsData: Recom
     <Slider {...settings} className="recommend-slide">
       {recommendList?.map((slide) => {
         return (
-          <Link href={`/product/${slide.productNo.toString()}`} key={slide.productNo}>
-            <div className="img-container">
-              <Image
-                // src={slide.imageSource}
-                src={slide.item === '코팅제' ? '/assets/코팅제.webp' : '/assets/세정제.webp'}
-                alt={slide.alt}
-                width={60}
-                height={60}
-              />
-            </div>
+          <Link href={`/product/${slide.productNo.toString()}`} key={slide.productNo} className="imageContainer">
+            <Image
+              // src={slide.imageSource}
+              src={slide.item === '코팅제' ? '/assets/코팅제.webp' : '/assets/세정제.webp'}
+              alt={slide.alt}
+              width={85}
+              height={85}
+            />
+            <Spacing size={4} />
             <Text color="gray800" typography="t7" className="ellipsis" css={{ height: '35px' }}>{slide.productName}</Text>
           </Link>
         );

diff --git a/src/hooks/withAuth.tsx b/src/hooks/withAuth.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ComponentType, useEffect } from 'react';
-import { toast } from 'react-toastify';
 
 import { useRouter } from 'next/navigation';
 
@@ -18,8 +17,7 @@ function withAuth<Props = Record<string, never>>(
 
     useEffect(() => {
       if (userId == null) {
-        router.push('/');
-        toast.info('로그인 해주세요.');
+        router.replace('/login');
       }
     }, [userId, router]);