Merge pull request #74 from ssumai-kr/Feature-박수민

Fix: null오류 해결 / Style: 방문목록 다크모드적용

components/ActivityDetails/ActivityDetails.tsx

@@ -26,17 +26,15 @@ 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 { loginState } from '@/states/loginState';
 import { ViewedActivitiesState } from '@/states/ViewedState';
 import { ViewedActivityProps } from '../ViewedActivities/ViewedActivities.type';
+import profileThumbnail from '@/public/image/profile-circle-icon-512x512-zxne30hp.png';
 
 export default function ActivityDetails({ id }: ActivityDetailsProps) {
   const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);
   const isDarkMode = useRecoilValue(darkModeState);
-  const isLogined = useRecoilValue(loginState);
   const [currentPage, setCurrentPage] = useState<number>(
     router.query.page ? parseInt(router.query.page as string, 10) : 1
   );
@@ -205,24 +203,14 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
               </div>
             </div>
           </div>
-          <div className="flex items-center t:items-center m:items-center">
-            <div className="flex gap-[12px]">
-              {isLogined && !isAuthor && (
-                <SendChat
-                  receiver={Number(activityData?.userId)}
-                  activityId={Number(activityData?.id)}
-                  activityTitle={String(activityData?.title)}
-                  activityImage={String(activityData?.bannerImageUrl)}
-                />
-              )}
-              <ShareButton
-                type="none-bg"
-                title={activityData?.title}
-                bannerImageUrl={activityData?.bannerImageUrl}
-                description={activityData?.description}
-                activityId={id}
-              />
-            </div>
+          <div className="flex t:items-center m:items-end">
+            <ShareButton
+              type="none-bg"
+              title={activityData?.title}
+              bannerImageUrl={activityData?.bannerImageUrl}
+              description={activityData?.description}
+              activityId={id}
+            />
             {isAuthor && (
               <div className="flex items-center">
                 <MeatballButton onClick={toggleMenu} />
@@ -256,7 +244,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 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 +294,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/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],
 });