Merge pull request #98 from INFLUY/feat/#92

[FIX] 수정 및 오류 해결#92

Author: xseojungx

src/api/sellerItem/handleItemAccess.ts

@@ -0,0 +1,26 @@
+import { SELLER_API_DOMAINS } from '@/constants/api';
+import { instance } from '@/api/axiosInstance';
+import { generateApiPath } from '@/api/utils';
+import { ItemAccessDTO } from '@/types/common/ItemType.types';
+import { ApiResponse } from '@/types/common/ApiResponse.types';
+
+export const patchItemAccess = async ({
+  itemId,
+  data,
+}: {
+  itemId: number;
+  data: ItemAccessDTO;
+}) => {
+  const response = await instance.patch(
+    generateApiPath(SELLER_API_DOMAINS.SELLER_ITEM_ACCESS, { itemId }),
+    data
+  );
+  return response.data.result;
+};
+
+export const getItemAccess = async ({ itemId }: { itemId: number }) => {
+  const response = await instance.get<ApiResponse<ItemAccessDTO>>(
+    generateApiPath(SELLER_API_DOMAINS.SELLER_ITEM_ACCESS, { itemId })
+  );
+  return response.data.result;
+};

src/assets/icon/common/DarkPinIcon16.svg

@@ -2,9 +2,10 @@ import { FaqCardDetailResponse } from '@/types/common/FaqCardType.types';
 import { formatDate } from '@/utils/formatDate';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { A11y, Navigation, Pagination } from 'swiper/modules';
-import PinIcon from '@/assets/icon/common/Pin.svg?react';
+import PinIcon from '@/assets/icon/common/LightPinIcon24.svg?react';
 import cn from '@/utils/cn';
 import { LoadingSpinner } from '@/components';
+import InfluyLogo from '@/assets/icon/common/InfluyIcon.svg?react';
 
 import 'swiper/css';
 import 'swiper/css/navigation';
@@ -65,15 +66,32 @@ const ItemDetailFaqCard = ({
             role="group"
             aria-roledescription="FAQ 카드"
           >
-            <article className="relative flex w-full flex-col bg-black">
-              <img
-                src={faq.backgroundImgLink ?? undefined}
-                className={cn(
-                  'h-[23.4375rem] w-full object-cover',
-                  faq.adjustImg ? 'object-contain' : 'object-cover'
-                )}
-                role="img"
-              />
+            <article className="relative flex w-full flex-col items-center overflow-hidden">
+              {faq.backgroundImgLink ? (
+                <>
+                  {/* 배경으로 들어갈 블러 이미지 레이어 */}
+                  <span
+                    className="absolute inset-0 scale-105 overflow-hidden bg-cover bg-center opacity-80 blur-lg filter"
+                    style={{ backgroundImage: `url(${faq.backgroundImgLink})` }}
+                  />
+                  {/* 실제 보여질 포그라운드 이미지 */}
+                  <img
+                    src={faq.backgroundImgLink}
+                    className={cn(
+                      'aspect-productImg relative w-full',
+                      faq.adjustImg ? 'object-contain' : 'object-cover'
+                    )}
+                    role="img"
+                  />
+                </>
+              ) : (
+                <div className="aspect-productImg from-grey05 to-sub-light/40 flex w-full flex-col items-center justify-center bg-gradient-to-bl object-cover">
+                  <InfluyLogo className="w-1/3 text-white opacity-65" />
+                  <p className="caption-m text-white">
+                    해당 FAQ 이미지가 없습니다.
+                  </p>
+                </div>
+              )}
             </article>
             <article className="border-grey02 bg-grey01 flex h-full w-full flex-col gap-2.5 px-5 py-2.5">
               <div className="flex w-full justify-between">

src/assets/icon/common/DarkPinIcon24.svg

@@ -41,7 +41,7 @@ export const ItemDetailInfo = ({
       className="item-detail-swiper-section flex w-full flex-col pb-[.6875rem]"
       ref={ref}
     >
-      <div className="relative h-[23.8125rem] w-full">
+      <div className="aspect-productImg relative w-full">
         {data.itemImgList && (
           <Swiper
             className="z-0 h-full"
@@ -58,7 +58,7 @@ export const ItemDetailInfo = ({
               <SwiperSlide key={i} className="z-0 h-full">
                 <img
                   src={img}
-                  className="h-full w-full object-cover"
+                  className="aspect-productImg w-full object-cover"
                   decoding="async"
                   role="img"
                   alt={'상품 이미지 ' + (i + 1)}

src/assets/icon/common/LightPinIcon16.svg

@@ -11,9 +11,9 @@
 }
 
 .item-detail-swiper-section .swiper-pagination {
-  top: 22.6875rem !important;
-  left: 0;
   width: 100% !important;
+  top: 10px !important;
+  left: 0;
   display: flex !important;
   justify-content: center !important;
   /* gap: auto; */
@@ -30,10 +30,11 @@
   border-radius: 0.1875rem !important;
   background-color: #ababab;
   transition: #ababab 0.3s ease;
-  opacity: 1 !important;
+  opacity: 0.7 !important;
 }
 
 /* active bullet (highlight) */
 .item-detail-swiper-section .custom-bullet-active {
   background-color: white !important;
+  opacity: 1 !important;
 }

src/assets/icon/common/LightPinIcon20.svg

@@ -1,6 +1,6 @@
 import { AnnouncementType } from '@/types/common/AnnouncementType.types';
 import KebabIcon from '@/assets/icon/common/KebabIcon.svg?react';
-import PinIcon from '@/assets/icon/common/DarkPinIcon.svg?react';
+import PinIcon from '@/assets/icon/common/LightPinIcon.svg?react';
 import { parseDateString } from '@/utils/formatDate';
 
 const Announcement = ({