Merge pull request #261 from asksa1256/style/IndexKeyboardCard-hover

Style: IndexKeyboardCard hover 스타일 추가

Author: asksa1256

src/components/feature/Keyboards/IndexKeyboardsCard.tsx

@@ -1,10 +1,9 @@
 // 목록 페이지의 키보드 카드 컴포넌트
-
-import Image from 'next/image';
 import Link from 'next/link';
 
 import React from 'react';
 
+import CustomRightArrowIcon from '@/components/ui/Icon/CustomRightArrowIcon';
 import KeyboardThumbnail from '@/components/ui/KeyboardThumbnail';
 import RatingAndPrice from '@/components/ui/RatingAndPrice';
 import StarRating from '@/components/ui/StarRating';
@@ -36,7 +35,7 @@ const IndexKeyboardsCard = ({
   return (
     <Link
       href={`/keyboards/${keyboardId}`}
-      className='block mb-5 border border-gray-300 rounded-xl md:rounded-2xl bg-white'
+      className='group block mb-5 border border-gray-300 rounded-xl md:rounded-2xl bg-white  hover:-translate-y-2 hover:shadow-primary hover:border-primary transition-all'
     >
       <div className='flex'>
         {/* 이미지 영역 */}
@@ -73,13 +72,9 @@ const IndexKeyboardsCard = ({
                 {reviewCount}개의 후기
               </div>
             </div>
-            <Image
-              src='/images/RightArrowIcon.svg'
-              alt='오른쪽 이동'
-              width={32}
-              height={32}
-              className='ml-auto w-[32px] md:w-[36px] md:mt-auto cursor-pointer'
-            />
+            <div className='ml-auto md:mt-auto w-[32px] md:w-[36px]'>
+              <CustomRightArrowIcon className=' text-gray-300 transition-all -translate-x-2 group-hover:translate-x-2 group-hover:text-primary' />
+            </div>
           </div>
         </div>
       </div>

src/components/ui/Icon/CustomRightArrowIcon.tsx

@@ -0,0 +1,19 @@
+const CustomRightArrowIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      fill='none'
+      strokeWidth='0.3'
+      stroke='currentColor'
+      {...props}
+    >
+      <path
+        d='M12.175 9.00011H1C0.716667 9.00011 0.479167 8.90428 0.2875 8.71261C0.0958333 8.52094 0 8.28344 0 8.00011C0 7.71678 0.0958333 7.47928 0.2875 7.28761C0.479167 7.09594 0.716667 7.00011 1 7.00011H12.175L7.275 2.10011C7.075 1.90011 6.97917 1.66678 6.9875 1.40011C6.99583 1.13344 7.1 0.900109 7.3 0.700109C7.5 0.516776 7.73333 0.420943 8 0.412609C8.26667 0.404276 8.5 0.500109 8.7 0.700109L15.3 7.30011C15.4 7.40011 15.4708 7.50844 15.5125 7.62511C15.5542 7.74178 15.575 7.86678 15.575 8.00011C15.575 8.13344 15.5542 8.25844 15.5125 8.37511C15.4708 8.49178 15.4 8.60011 15.3 8.70011L8.7 15.3001C8.51667 15.4834 8.2875 15.5751 8.0125 15.5751C7.7375 15.5751 7.5 15.4834 7.3 15.3001C7.1 15.1001 7 14.8626 7 14.5876C7 14.3126 7.1 14.0751 7.3 13.8751L12.175 9.00011Z'
+        fill='currentColor'
+      />
+    </svg>
+  );
+};
+
+export default CustomRightArrowIcon;