Fix: conflict 해결

components/ActivityDetails/ActivityDetails.tsx

@@ -26,11 +26,12 @@ import { ActivityDetailsPageMeta } from '../MetaData/MetaData';
 import useDeleteActivity from '@/hooks/myActivity/useDeleteActivity';
 import { usePopup } from '@/hooks/usePopup';
 import { darkModeState } from '@/states/themeState';
-import SendChat from '../Chat/SendChat';
 import { ShareButton } from '../ShareButton/ShareButton';
 import { ViewedActivitiesState } from '@/states/ViewedState';
 import { ViewedActivityProps } from '../ViewedActivities/ViewedActivities.type';
 import useLoginState from '@/hooks/useLoginState';
+import profileThumbnail from '@/public/image/profile-circle-icon-512x512-zxne30hp.png';
+import SendChat from '../Chat/SendChat';
 
 export default function ActivityDetails({ id }: ActivityDetailsProps) {
   const router = useRouter();
@@ -256,7 +257,7 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
           />
         )}
         <div className="flex gap-4 m:block m:relative">
-          <div className="mb-20 ipad-pro:w-[725px] w-full m:px-[24px]">
+          <div className="mb-20 w-full ipad-pro:w-[725px] t:w-full m:w-full m:px-[24px]">
             <div className="border-t-2 border-var-gray3 dark:border-var-dark4 border-solid pt-10 m:pt-6" />
             <div className="flex flex-col gap-4">
               <p className="text-nomad-black dark:text-var-gray2 font-bold text-xl">
@@ -306,7 +307,7 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
                   >
                     <div className="flex-shrink-0">
                       <Image
-                        src={review.user.profileImageUrl}
+                        src={review.user.profileImageUrl || profileThumbnail}
                         alt={`${review.user.nickname}의 프로필 이미지`}
                         width={45}
                         height={45}

components/CatergoryBtn/CatergoryBtn.tsx

@@ -37,7 +37,7 @@ export default function CatergoryBtn({ categoryName }: CategoryBtnProps) {
 
   return (
     <button
-      className={`flex items-center justify-center rounded-[15px] border-[1px] border-solid border-2 m:border-[1px] border-var-green2 dark:border-none w-[127px] h-[53px] t:min-w-[120px] m:min-w-[80px] m:h-[41px] ${backgroundColor}`}
+      className={`flex items-center justify-center rounded-[15px] border-[2px] border-solid border-2 m:border-[1px] border-var-green2 dark:border-none w-[127px] h-[53px] t:min-w-[120px] m:min-w-[80px] m:h-[41px] ${backgroundColor}`}
       onClick={handleClick}
     >
       <p className={`text-[18px] p:font-[600] m:text-[14px] ${textColor}`}>

components/Lander/AllActivities.tsx

@@ -157,7 +157,7 @@ function AllActivities() {
 
   return (
     <div ref={PaginationScrollRef}>
-      <div className="flex justify-between">
+      <div className="flex justify-between mt-[120px]">
         <div className="relative t:w-[520px] m:w-[230px]">
           <div className="flex gap-[24px] t:gap-[14px] m:gap-[8px] t:w-[520px] m:w-[230px] overflow-auto scrollbar-hide">
             {Kategories.map((Kategorie, index) => (

components/Layout/NavigationBar.tsx

@@ -58,7 +58,7 @@ export default function NavigationBar() {
   }
 
   return (
-    <div className="sticky top-0 flex h-[70px] justify-center items-center z-30 px-[24px] t:px-[24px] m:px-[24px] border-b bg-white dark:bg-var-dark1 border-var-gray3 dark:border-none border-solid">
+    <div className="sticky top-0 flex h-[70px] justify-center items-center z-30 px-[24px] t:px-[24px] m:px-[24px] border-b border-solid bg-white border-var-gray3 dark:bg-var-dark1 dark:border-var-dark1">
       <div className="w-[1200px] flex justify-between items-center ">
         <div className="flex items-center">
           <Link href="/">
@@ -84,7 +84,7 @@ export default function NavigationBar() {
                   <Image src={notificationIcon} alt="알림 아이콘" />
                   {data?.totalCount !== undefined && data?.totalCount > 0 && (
                     <span className="absolute top-[-7px] right-[-7px] flex items-center justify-center bg-red-500 w-[15px] h-[15px] text-white text-[12px] rounded-full">
-                      <p className="translate-y-[-4%] translate-x-[-10%]">
+                      <p className="translate-y-[2%] translate-x-[-10%]">
                         {data.totalCount}
                       </p>
                     </span>

components/PriceFilterBtn/PriceFilterBtn.tsx

@@ -31,10 +31,10 @@ export default function PriceFilterBtn() {
   return (
     <div className="relative" ref={dropDownElement}>
       <button
-        className="flex justify-between items-center w-[147px] h-[53px] border-solid border-[1px] rounded-[15px] t:w-[140px] m:w-[94px] m:h-[41px] border-var-green2 px-[20px] m:px-[10px] bg-white dark:bg-var-dark2 dark:border-none"
+        className="flex justify-between items-center w-[147px] h-[53px] border-solid border-[2px] m:border-[1px] rounded-[15px] t:w-[140px] m:w-[94px] m:h-[41px] border-var-green2 px-[20px] m:px-[10px] bg-white dark:bg-var-dark2 dark:border-none"
         onClick={() => setShowMenuList((prev) => !prev)}
       >
-        <p className="text-[18px] t:text-[16px] m:text-[12px] text-var-green2 dark:text-var-gray2">
+        <p className="text-[18px] t:text-[16px] m:text-[12px] text-var-green2 dark:text-var-gray2 font-[600]">
           {isClient && !showMenuList ? sortedName || '정렬' : sortedName}
         </p>
         <Image

components/ViewedActivities/ViewedActivities.tsx

@@ -1,11 +1,14 @@
-import RecordImg from '@/public/icon/Record.svg';
-import Ximg from '@/public/icon/btn_x_big.svg';
 import Image from 'next/image';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import ViewedActivity from './ViewedActivity';
 import useClickOutside from '@/hooks/useClickOutside';
 import { useRecoilValue } from 'recoil';
 import { ViewedActivitiesState } from '@/states/ViewedState';
+import HistoryImg_black from '@/public/icon/History_black.svg';
+import HistoryImg_white from '@/public/icon/History_white.svg';
+import CloseImg_black from '@/public/icon/close_black.svg';
+import CloseImg_white from '@/public/icon/close_white.svg';
+import { darkModeState } from '@/states/themeState';
 
 function ViewedActivities() {
   const [isOpen, setIsOpen] = useState(false);
@@ -15,6 +18,7 @@ function ViewedActivities() {
     setIsOpen(false)
   );
   const ViewedActivitiesVlue = useRecoilValue(ViewedActivitiesState);
+  const isDarkMode = useRecoilValue(darkModeState);
 
   const openModal = () => {
     setAnimationClass('rotate-open');
@@ -29,10 +33,10 @@ function ViewedActivities() {
 
   return (
     <div ref={ViewedActivitiesElement}>
-      <div className="fixed right-[32px] m:right-[14px] bottom-[90px] z-30 w-[40px] h-[40px] bg-gray-200 flex items-center justify-center rounded-xl cursor-pointer hover:bg-gray-300">
+      <div className="fixed right-[32px] m:right-[14px] bottom-[90px] z-30 w-[40px] h-[40px] bg-gray-200 border-[1px] dark:bg-black dark:border-[2px] dark:bg-var-dark2 border-solid dark:border-var-dark3 flex items-center justify-center rounded-xl cursor-pointer hover:bg-gray-300">
         {!isOpen ? (
           <Image
-            src={RecordImg}
+            src={isDarkMode ? HistoryImg_white : HistoryImg_black}
             alt="방문한 체험 표시 이미지"
             width={32}
             height={32}
@@ -41,7 +45,7 @@ function ViewedActivities() {
           />
         ) : (
           <Image
-            src={Ximg}
+            src={isDarkMode ? CloseImg_white : CloseImg_black}
             alt="닫기 이미지"
             width={32}
             height={32}
@@ -52,7 +56,7 @@ function ViewedActivities() {
       </div>
       {isOpen && (
         <div
-          className={`w-[180px] h-[300px] rounded-lg fixed right-[32px] m:right-[14px] bottom-[138px] z-30 bg-white border-solid border-4 border-gray-800 ${faded} flex flex-col items-center px-[10px] pt-[10px] gap-[10px] overflow-y-auto overflow-x-hidden pb-[10px] custom-scrollbar`}
+          className={`w-[180px] h-[300px] rounded-lg fixed right-[32px] m:right-[14px] bottom-[138px] z-30 bg-white border-solid border-4 border-gray-800 ${faded} flex flex-col items-center px-[10px] pt-[10px] gap-[10px] overflow-y-auto overflow-x-hidden pb-[10px] custom-scrollbar dark:border-gray-400 dark:bg-gray-900`}
         >
           <div className="font-sans text-[14px] font-[600]">
             최근 방문한 체험

components/ViewedActivities/ViewedActivity.tsx

@@ -12,7 +12,7 @@ function ViewedActivity({ id, bannerImage, title }: ViewedActivityProps) {
 
   return (
     <div
-      className="min-w-[140px] min-h-[80px] rounded bg-gray-200 flex items-center justify-between cursor-pointer block hover:bg-gray-300"
+      className="min-w-[140px] min-h-[80px] rounded bg-gray-200 flex items-center justify-between cursor-pointer block hover:bg-gray-300 dark:bg-gray-600"
       onClick={linkToClick}
     >
       <Image

states/mainPageState.tsx

@@ -20,7 +20,7 @@ export const mainPageState = atom<mainPageStateProps>({
     itemsPerPage: 8,
     selectedKategorie: '',
     selectedSorted: '',
-    sortedName: '',
+    sortedName: '정렬',
   },
   effects_UNSTABLE: [persistAtom],
 });