🔀 merge: dev -> main

Dev

src/components/accommodationDetail/ConfirmModal.tsx

@@ -44,7 +44,11 @@ export const ConfirmModal = ({
         <div className="flex flex-col gap-5 modal-box w-full max-w-2xl shadow-none">
           <div className="flex gap-5">
             <figure className="w-full">
-              <img src={data.imgUrl} className="w-full" />
+              <img
+                src={data.imgUrl}
+                alt={`${data.accommodationName} image`}
+                className="w-full"
+              />
             </figure>
           </div>
           <div>

src/components/common/Footer.tsx

@@ -1,28 +1,38 @@
-import { Github, Notion } from '../logo';
+import { BsGithub } from 'react-icons/bs';
 import { Link } from 'react-router-dom';
+import { SiNaver, SiTistory, SiNotion } from 'react-icons/si';
+import { SiVelog } from 'react-icons/si';
 
 const channels = [
   {
-    name: 'Github',
-    url: 'https://github.com/orgs/YOGIZOGI-Zerobase-2023/repositories',
-    logo: (
-      <Github
-        width={22}
-        height={22}
-        fill={'fill-gray-400 hover:fill-gray-500'}
-      />
-    )
+    name: 'YogiZogi',
+    notion: 'https://www.notion.so/YOGIZOGI-fd26b4d3490b431e8753780ebad4b6fc',
+    github: 'https://github.com/orgs/YOGIZOGI-Zerobase-2023/repositories'
   },
   {
-    name: 'Notion',
-    url: 'https://jet-enquiry-8e3.notion.site/YOGIZOGI-fd26b4d3490b431e8753780ebad4b6fc',
-    logo: (
-      <Notion
-        width={22}
-        height={22}
-        fill={'fill-gray-400 hover:fill-gray-500'}
-      />
-    )
+    name: '고영준',
+    blog: 'https://blog.naver.com/cloudedpanther',
+    github: 'https://github.com/cloudedpanther'
+  },
+  {
+    name: '김은정',
+    blog: 'https://premubo.tistory.com/',
+    github: 'https://github.com/Ryomi-j'
+  },
+  {
+    name: '박성은',
+    blog: 'https://velog.io/@bbung',
+    github: 'https://github.com/bbung95'
+  },
+  {
+    name: '왕석현',
+    blog: 'https://velog.io/@wsh096',
+    github: 'https://github.com/wsh096'
+  },
+  {
+    name: '강민지',
+    blog: 'https://pumkinni.tistory.com/',
+    github: 'https://github.com/pumkinni'
   }
 ];
 
@@ -36,19 +46,51 @@ const Footer = () => {
         minWidth: '375px'
       }}
     >
-      <div className="w-full max-w-5xl flex flex-col md:flex-row justify-center md:justify-between items-center px-8">
-        <p className="text-gray-500 order-2 md:order-1 text-xs">
-          &copy; 2023 Yogizogi All Rights Reserved.
-        </p>
-        <div className="flex gap-8 order-1 md:order-2 mb-4 md:mb-0">
+      <div className="w-full h-full max-w-5xl flex flex-col md:flex-row justify-center md:justify-between items-center px-4">
+        <div className="flex items-center justify-center w-full h-full">
           {channels.map((channel) => {
             return (
               <div
                 key={channel.name}
-                className="tooltip"
-                data-tip={channel.name}
+                className="flex w-full justify-center items-center gap-2"
               >
-                <Link to={channel.url}>{channel.logo}</Link>
+                <div className="tooltip" data-tip={`${channel.name} Github`}>
+                  <Link
+                    to={channel.github}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <BsGithub className="w-5 h-5 " />
+                  </Link>
+                </div>
+                {channel.blog && (
+                  <div className="tooltip" data-tip={`${channel.name} Blog`}>
+                    <Link
+                      to={channel.blog}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {channel.blog.includes('tistory') ? (
+                        <SiTistory className="w-4 h-4" />
+                      ) : channel.blog.includes('naver') ? (
+                        <SiNaver className="w-4 h-4 text-[#03c75a]" />
+                      ) : (
+                        <SiVelog className="w-5 h-5 text-[#12B886]" />
+                      )}
+                    </Link>
+                  </div>
+                )}
+                {channel.notion && (
+                  <div className="tooltip" data-tip={`${channel.name} Notion`}>
+                    <Link
+                      to={channel.notion}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <SiNotion className="w-5 h-5" />
+                    </Link>
+                  </div>
+                )}
               </div>
             );
           })}

src/components/common/Nav.tsx

@@ -1,5 +1,4 @@
-import useSignIn from '../../hooks/useSignIn';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { SearchBar } from '../searchBar/SearchBar';
 import useAuth from '../../hooks/useAuth';
@@ -73,7 +72,11 @@ const Nav = () => {
               to="/"
               className="cursor-pointer w-fit text-xl font-bold flex gap-2"
             >
-              <img src="/assets/logos/72.png" alt="YogiZogi" className="w-8" />
+              <img
+                src="/assets/logos/72.png"
+                alt="YogiZogi logo"
+                className="w-8"
+              />
               <p>YogiZogi</p>
             </Link>
           </div>

src/components/floatingIcons/comparison/ComparisonBox.tsx

@@ -8,7 +8,7 @@ import {
 import { addCommasToPrice } from '../../../helpers';
 import { AlertModal } from '../../common/AlertModal';
 import { ComparisonModal } from './ComparisonModal';
-import { getSlashDateFormat } from '../../../utils/handleDate';
+import { getDateFormat, getSlashDateFormat } from '../../../utils/handleDate';
 import { IComparisonBoxProps, IComparisonItem } from './types';
 
 interface IComparisonBox {
@@ -20,15 +20,30 @@ export const ComparisonBox = ({ display, source }: IComparisonBox) => {
   let data: IComparisonBoxProps[],
     setData: SetterOrUpdater<IComparisonBoxProps[]>;
   const [alertModalState, setAlertModalState] = useState(false);
+
   const [comparisonModalState, setComparisonModalState] = useState(false);
   const [comparisonItems, setComparisonItems] = useState<IComparisonItem[]>([]);
+
   const [selectedRooms, setSelectedRooms] = useRecoilState(selectedRoom);
   const [selectedAcc, setSelectedAcc] = useRecoilState(selectedAccommodation);
 
   useEffect(() => {
+    const lastTimeStamp = localStorage.getItem('lastTimeStamp');
     const selectedRooms = localStorage.getItem('selectedRoom');
-      const selectedAcc = localStorage.getItem('selectedAccommodation');
+    const selectedAcc = localStorage.getItem('selectedAccommodation');
 
+    if (
+      lastTimeStamp &&
+      JSON.parse(lastTimeStamp) !== getDateFormat(new Date())
+    )
+      localStorage.clear();
+    else {
+    if (
+      lastTimeStamp &&
+      JSON.parse(lastTimeStamp) !== getDateFormat(new Date())
+    )
+      localStorage.clear();
+    else {
       if (selectedRooms) {
         const parsedData = JSON.parse(selectedRooms);
         setSelectedRooms(parsedData);
@@ -38,6 +53,8 @@ export const ComparisonBox = ({ display, source }: IComparisonBox) => {
         const parsedData = JSON.parse(selectedAcc);
         setSelectedAcc(parsedData);
       }
+    }
+    }
   }, []);
 
   if (source === 'room') {
@@ -83,11 +100,21 @@ export const ComparisonBox = ({ display, source }: IComparisonBox) => {
 
   const saveComparisonData = () => {
     const handleBeforeUnload = () => {
-      localStorage.setItem('selectedRoom', JSON.stringify(selectedRooms));
-      localStorage.setItem(
-        'selectedAccommodation',
-        JSON.stringify(selectedAcc)
-      );
+      const today = getDateFormat(new Date());
+      const lastTimeStamp = localStorage.getItem('lastTimeStamp');
+
+      if (lastTimeStamp && lastTimeStamp !== today) localStorage.clear();
+      else {
+        localStorage.setItem(
+          'lastTimeStamp',
+          JSON.stringify(getDateFormat(new Date()))
+        );
+        localStorage.setItem('selectedRoom', JSON.stringify(selectedRooms));
+        localStorage.setItem(
+          'selectedAccommodation',
+          JSON.stringify(selectedAcc)
+        );
+      }
     };
 
     window.addEventListener('beforeunload', handleBeforeUnload);
@@ -148,7 +175,10 @@ export const ComparisonBox = ({ display, source }: IComparisonBox) => {
                 <p>{addCommasToPrice(el.price)}원</p>
               </div>
               <button
-                onClick={() => deleteSelectedAcc(idx)}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  deleteSelectedAcc(idx);
+                }}
                 className="badge badge-neutral badge-sm mt-1 mr-1 w-3 text-white"
               >
                 ✕

src/components/floatingIcons/comparison/ComparisonModal.tsx

@@ -22,7 +22,7 @@ export const ComparisonModal = ({
         onChange={() => handleModal(!modalState)}
       />
       <div className="modal">
-        <div className="modal-box md:w-[600px] max-w-full h-fit overflow-hidden">
+        <div className="modal-box md:w-[600px] max-w-full h-fit">
           <div className="overflow-x-auto">
             <h2 className="mb-3 text-2xl font-semibold text-center">
               한 눈에 비교하기

src/components/floatingIcons/comparison/DraggableAccommodationList.tsx

@@ -45,18 +45,20 @@ export const DraggableAccommodationList = ({
           people: el.people
         };
       })
-      .catch((e) => console.log(e.message));
+      .catch(() => {});
   };
 
   useEffect(() => {
     const fetchDataForAllItems = async () => {
       const promises = data.map((el) => fetchDataForItem(el));
-      const results = await Promise.all(promises);
-      setSelectedItemInfo(results);
+      try {
+        const results = await Promise.all(promises);
+        setSelectedItemInfo(results);
+      } catch {
+        setSelectedItemInfo([]);
+      }
     };
-
     setComparisonData([...data]);
-
     fetchDataForAllItems();
   }, [data]);
 
@@ -134,12 +136,13 @@ export const DraggableAccommodationList = ({
                             className="flex flex-col gap-y-1 text-center w-full px-1 text-xs md:text-base rounded-lg"
                           >
                             <figure className="relative h-32 object-cover mx-1">
-                              <div className="absolute top-[-10px] left-16 badge bg-red-500 text-white font-bold">
+                              <div className="absolute top-[-10px] left-16 badge border border-gray-300 bg-white-500 font-bold">
                                 {' '}
                                 · · ·
                               </div>
                               <img
                                 src={el.picUrl}
+                                alt={`${el.accommodationName} image`}
                                 className="w-full h-full rounded-lg"
                               />
                             </figure>
@@ -154,6 +157,14 @@ export const DraggableAccommodationList = ({
                                 data={comparisonData[idx]}
                               />
                             )}
+                            {el.roomName && (
+                              <p className="truncate">{el.roomName}</p>
+                            )}
+                            {comparisonData[idx] && (
+                              <PriceComparisonChart
+                                data={comparisonData[idx]}
+                              />
+                            )}
                             <p className="flex justify-center gap-1">
                               {addCommasToPrice(el.price)}원
                               {el.price === minPrice && (

src/components/login/SignLayout.tsx

@@ -19,7 +19,7 @@ const SignLayout = ({ children }: SignLayoutProps) => {
             alt="일러스트"
           />
         </div>
-        <div className="relative max-md:absolute top-0 left-0 right-0 bottom-0 bg-white max-md:bg-inherit backdrop-filter backdrop-blur-sm flex-1 ">
+        <div className="relative max-md:absolute top-0 left-0 right-0 bottom-0 bg-white max-md:bg-inherit flex-1 ">
           {children}
         </div>
       </div>