Merge pull request #177 from Codeit-Part4-SFJs/sh/logoAndFavicon

design: 로고, favicon, 로딩 디자인 및 적용

src/components/Detail/ProductDetail/ProductDetail.tsx

@@ -10,6 +10,8 @@ import { useSuspenseQuery } from '@tanstack/react-query';
 import { productOptions } from '@/app/[category]/[product]/queryOptions';
 import { useRouter } from 'next/navigation';
 import { useCompareItems } from '@/stores/useCompareItems';
+import { convertIdToCategory } from '@/shared/@common/utils';
+import Link from 'next/link';
 
 export const ProductDetail = ({
   userId,
@@ -59,7 +61,11 @@ export const ProductDetail = ({
       <div className="w-full flex flex-col gap-[60px]">
         <div className="flex flex-col gap-[20px] md:gap-[50px] lg:gap-[50px]">
           <div className="flex flex-col gap-[10px]">
-            <CategoryChip categoryID={productDetailData.categoryId} />
+            <Link
+              href={`/${convertIdToCategory(productDetailData.categoryId)}`}
+            >
+              <CategoryChip categoryID={productDetailData.categoryId} />
+            </Link>
             <div className="mobile:relative flex justify-between items-center">
               <div className="flex gap-[15px] mobile:justify-between mobile:w-full">
                 <div className="text-gray-F1 not-italic font-normal mobile:leading-7 md:leading-normal lg:leading-normal text-xl lg:text-2xl">

src/components/Home/MainProducts/HotProducts/HotProducts.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { SideMenuOpenButton } from '@/shared/ui/Menu/SideMenu/SideMenuOpenButton';
 import ProductCard from '@/components/@common/ProductCard';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { hotProductOptions } from '@/app/[category]/homeQueryOptions';
@@ -9,9 +10,14 @@ export const HotProducts = () => {
 
   return (
     <section className="mb-20">
-      <h2 className="text-[24px] text-gray-F1 font-semibold mb-6">
-        지금 핫한 상품 <span className="text-main-blue">TOP 6</span>
-      </h2>
+      <div className="mobile:flex mobile:place-content-between">
+        <h2 className="text-[24px] text-gray-F1 font-semibold mb-6">
+          지금 핫한 상품 <span className="text-main-blue">TOP 6</span>
+        </h2>
+        <div className="mobile:relative">
+          <SideMenuOpenButton />
+        </div>
+      </div>
       <div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-3">
         {hotProductsData
           ?.slice(0, 6)

src/components/Home/ReviewerRanking/ReviewerRanking.tsx

@@ -17,7 +17,7 @@ export const ReviewerRanking = () => {
       <h2 className="text-[16px] text-gray-F1 font-normal mb-4 lg:mb-8 md:mt-7 lg:mt-7">
         리뷰어 랭킹
       </h2>
-      <ul className="flex flex-row lg:flex-col gap-5 lg:gap-1 overflow-hidden">
+      <ul className="flex flex-row lg:flex-col gap-5 lg:gap-1 mobile:overflow-x-scroll md:overflow-x-scroll scrollbar-hide">
         {rankingData?.map((ranking) => (
           <RankingCard key={ranking.id} ranking={ranking} />
         ))}

src/shared/ui/Icon/Loading.tsx

@@ -1,6 +1,6 @@
 import { twMerge } from 'tailwind-merge';
 import { PropsWithChildren } from 'react';
-import LoadingIcon from '../../../../public/icon/loading.svg';
+import LoadingIcon from '../../../../public/icon/newLoading.svg';
 import { LoadingProps } from './types/iconType';
 
 export const Loading = ({
@@ -12,7 +12,7 @@ export const Loading = ({
     <div className="flex flex-col items-center gap-3">
       <LoadingIcon
         className={twMerge(
-          'mobile:w-[39px] mobile:h-[32px] w-[39px] h-[32px] lg:w-[49px] lg:h-[40px] fill-gray-6E',
+          'mobile:w-[50px] mobile:h-[32px] w-[50px] h-[32px] lg:w-[50px] lg:h-[40px] fill-gray-6E',
           iconClassName,
         )}
       />

src/shared/ui/Icon/Logo.tsx

@@ -1,7 +1,7 @@
-import LogoIcon from '../../../../public/icon/logo.svg';
+import LogoIcon from '../../../../public/icon/newLogo.svg';
 
 export const Logo = () => {
   return (
-    <LogoIcon className="mobile:w-[112px] mobile:h-[18px] md:w-[138px] md:h-[24px] lg:w-[166px] lg:h-[28px] " />
+    <LogoIcon className="mobile:w-[140px] mobile:h-[30px] md:w-[150px] md:h-[35px] lg:w-[180px] lg:h-[40px] " />
   );
 };

svgr.d.ts

@@ -1,7 +1,7 @@
-import { FC, SVGProps, SVGSVGElement } from "react";
+import { FC, SVGProps, SVGSVGElement } from 'react';
 
 declare global {
-  module "*.svg" {
+  module '*.svg' {
     const component: FC<SVGProps<SVGSVGElement>>;
 
     export default component;