Merge branch 'refactor/hojin' into develop

4bujak-4bujak · Jun 20, 2024 · c53d9c5 · c53d9c5
2 parents 962db9b + 8e6ac50
commit c53d9c5
Show file tree

Hide file tree

Showing 9 changed files with 182 additions and 10 deletions.
diff --git a/public/home/pwalogo.png b/public/home/pwalogo.png
diff --git a/src/components/community/shared/WritePostButton.tsx b/src/components/community/shared/WritePostButton.tsx
@@ -6,10 +6,9 @@ const WritePostButton = () => {
   return (
     <div
       onClick={() => setOpen(true)}
-      className="fixed bottom-[100px] z-10
-    right-4 xl:right-1/3 xl:mr-7
+      className="fixed bottom-[100px] z-10 ml-[320px]
     cursor-pointer w-12 h-12 rounded-full bg-space-purple flex justify-center items-center">
-      <img src="/community/writePost.svg" alt="" />
+      <img src="/community/writePost.svg" alt="btn" />
     </div>
   );
 };

diff --git a/src/components/home/PopUpModal.tsx b/src/components/home/PopUpModal.tsx
@@ -0,0 +1,140 @@
+'use client';
+import React, { Dispatch } from 'react';
+import { motion } from 'framer-motion';
+import { IoClose } from 'react-icons/io5';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+
+interface PopUpModalType {
+  setGuideModalOpen: Dispatch<React.SetStateAction<boolean>>;
+}
+
+const PopUpModal = ({ setGuideModalOpen }: PopUpModalType) => {
+  const handleExpireTime = () => {
+    const timeClicked = JSON.stringify(new Date().getTime());
+    localStorage.setItem('timeClicked', timeClicked);
+    setGuideModalOpen(false);
+  };
+
+  const router = useRouter();
+
+  return (
+    <div className="fixed inset-0 bg-gray-900 bg-opacity-30 z-[99999]">
+      <div className="z-50 w-[393px] bg-white absolute left-1/2 bottom-0 transform -translate-x-1/2 rounded-t-2xl">
+        <div
+          onClick={() => handleExpireTime()}
+          className="flex items-center justify-end mt-2 mr-2 cursor-pointer">
+          <IoClose size={30} color="#828282" />
+        </div>
+        <div className="flex items-center justify-center mt-4">
+          <div className="text-space-purple-normal font-bold py-3 px-5 text-lg bg-space-purple-light rounded-lg">
+            홈화면에서 만나요
+          </div>
+        </div>
+        <motion.div
+          initial={{ opacity: 0, translateX: -90 }}
+          transition={{
+            duration: 0.4,
+            ease: 'easeInOut'
+          }}
+          animate={{
+            opacity: 1,
+            translateX: 0
+          }}>
+          <div className="mt-4 flex items-center justify-center text-space-black text-xl font-semibold">
+            Offisapce 서비스를
+          </div>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, translateX: -90 }}
+          transition={{
+            duration: 0.4,
+            ease: 'easeInOut',
+            delay: 0.2
+          }}
+          animate={{
+            opacity: 1,
+            translateX: 0
+          }}>
+          <div className="flex items-center justify-center text-space-black text-xl font-semibold">
+            <span className="text-space-purple font-bold">바로가기</span>에 추가해보세요.
+          </div>
+        </motion.div>
+        <motion.div
+          className="box"
+          animate={{
+            scale: [1, 1.1, 1.1, 1, 1],
+            rotate: [0, 0, 10, 10, 0],
+            borderRadius: ['0%', '0%', '50%', '50%', '0%']
+          }}
+          transition={{
+            duration: 1,
+            ease: 'easeInOut',
+            times: [0, 0.1, 0.2, 0.4, 1],
+            repeatDelay: 1
+          }}>
+          <div className="my-6 flex items-center justify-center ">
+            <Image
+              src="/home/pwalogo.png"
+              width={140}
+              height={140}
+              alt="logo"
+              className="rounded-2xl"
+            />
+          </div>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, translateX: -90 }}
+          transition={{
+            duration: 0.4,
+            ease: 'easeInOut',
+            delay: 0.6
+          }}
+          animate={{
+            opacity: 1,
+            translateX: 0
+          }}>
+          <div className="mb-4">
+            <div className="mt-2 flex items-center justify-center text-gray-600 font-semibold text-md">
+              모바일 첫 화면에서
+            </div>
+            <div className="flex items-center justify-center text-gray-600 font-semibold text-md">
+              빠르게 이동할 수 있어요.
+            </div>
+          </div>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, translateX: -90 }}
+          transition={{
+            duration: 0.4,
+            ease: 'easeInOut',
+            delay: 0.9
+          }}
+          animate={{
+            opacity: 1,
+            translateX: 0
+          }}>
+          <div className="flex items-center justify-center gap-3 mb-6">
+            <div
+              onClick={() => handleExpireTime()}
+              className="cursor-pointer flex-1 ml-5 flex items-center h-[45px] justify-center rounded-lg bg-gray-400 text-lg text-white font-semibold ">
+              다시 보지 않기
+            </div>
+            <div
+              onClick={() =>
+                router.push(
+                  'https://support.google.com/chrome/answer/9658361?hl=ko&co=GENIE.Platform%3DiOS&oco=2'
+                )
+              }
+              className="cursor-pointer flex-1 mr-5 flex items-center  h-[45px] justify-center rounded-lg bg-space-purple text-lg text-white font-semibold ">
+              자세히 보기
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default PopUpModal;
diff --git a/src/components/reservation/ReservationIndex.tsx b/src/components/reservation/ReservationIndex.tsx
@@ -22,7 +22,7 @@ const ReservationIndex: React.FC<ReservationIndexProps> = ({ initialTab }) => {
       setCurrentRoom(tabMapping[initialTab] || 'meeting');
     }
   }, [initialTab]);
-  
+
   return (
     <div className="mt-[80px] mb-[100px] ">
       {/* 현재 지정된 오피스 */}

diff --git a/src/components/reservation/meetingRoom/DatePickerModal.tsx b/src/components/reservation/meetingRoom/DatePickerModal.tsx
@@ -1,9 +1,10 @@
 /* eslint-disable no-unused-vars */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import DatePickerWheel from './WheelPicker';
 import { ko } from 'date-fns/locale';
+import useOnClickOutside from '@/components/community/hooks/useOnClickOutside';
 
 interface DatePickerModalProps {
   showModal: boolean;
@@ -31,6 +32,8 @@ const DatePickerModal: React.FC<DatePickerModalProps> = ({
   initialEndTime,
   activeTab
 }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  useOnClickOutside(ref, () => setShowModal(false));
   const [startDate, setStartDate] = useState<Date>(initialStartTime);
   const [startTime, setStartTime] = useState<string>(
     initialStartTime.toTimeString().substr(0, 5)
@@ -156,7 +159,9 @@ const DatePickerModal: React.FC<DatePickerModalProps> = ({
   return (
     <div className="fixed inset-0 flex items-end justify-center z-[99999]">
       <div className="bg-black bg-opacity-50 absolute inset-0"></div>
-      <div className="bg-white rounded-t-2xl w-[100%] max-w-[430px] h-[640px] p-6 absolute bottom-0 overflow-y-auto">
+      <div
+        ref={ref}
+        className="bg-white rounded-t-2xl w-[100%] max-w-[430px] h-[640px] p-6 absolute bottom-0 overflow-y-auto">
         <div className="flex">
           <button
             className={`py-2 px-4 ${

diff --git a/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx b/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx
@@ -399,7 +399,7 @@ const MeetingRoomIndex: React.FC = () => {
 
   return (
     <div className="p-4 h-screen">
-      <div className="relative">
+      <div className="relative cursor-pointer">
         <Image
           src={'/resetwithbg.svg'}
           width={45}

diff --git a/src/components/reservation/rechargingRoom/RechargingRoomIndex.tsx b/src/components/reservation/rechargingRoom/RechargingRoomIndex.tsx
@@ -4,18 +4,22 @@ import { getRechargingRoom } from '../remote/recharging';
 import { useBranchStore } from '@/store/branch.store';
 import { useBranchStore2 } from '@/store/reserve.store';
 import RechargingHead from './RechargingHead';
-import RechargingRoomItem from './RechargingRoomItem';
 import { rechargingRoomDataType } from '../model/recharging';
 import RechargingBtn from './RechargingBtn';
 import RechargingConfirmModal from './modal/RechargingConfirmModal';
 import RechargingErrorModal from './modal/RechargingErrorModal';
+import dynamic from 'next/dynamic';
 
 export interface SelectedState {
   rechargingRoomId: number;
   startAt: string;
   rechargingRoomName?: string;
 }
 
+const RechargingRoomItem = dynamic(() => import('./RechargingRoomItem'), {
+  loading: () => <div className="w-[361px] h-[341px] " />
+});
+
 const RechargingRoomIndex = () => {
   const selectedBranch = useBranchStore((state) => state.selectedBranch);
   const updatedTimeSelected = useBranchStore((state) => state.updatedTimeSelected);

diff --git a/src/components/reservation/rechargingRoom/RechargingRoomItem.tsx b/src/components/reservation/rechargingRoom/RechargingRoomItem.tsx
@@ -2,6 +2,7 @@ import React, { Dispatch } from 'react';
 import { rechargingRoomDataType } from '../model/recharging';
 import { SelectedState } from './RechargingRoomIndex';
 import { checkValidRecharging } from '../remote/recharging';
+import Image from 'next/image';
 
 interface RechargingRoomItemType {
   roomData: rechargingRoomDataType;
@@ -53,7 +54,13 @@ const RechargingRoomItem = ({
     <div className="mt-5">
       {/* 캐러셀 */}
       <div className="mx-4 w-[361px] shadow rounded border border-gray-100">
-        <img src="/reservation/rechargingMock.jpeg" alt="" className="w-full" />
+        <Image
+          width={359}
+          height={239}
+          src="/reservation/rechargingMock.jpeg"
+          alt=""
+          className="w-full"
+        />
         <div className="mx-4 mt-4 text-space-black text-lg font-bold">
           {roomData?.rechargingRoomName}
         </div>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -4,16 +4,20 @@ import MainPageIndex from '@/components/home/MainPageIndex';
 import Footer from '@/components/layout/footer/Footer';
 import MainContainer from '@/components/shared/MainContainer';
 import { useMember, useSetMember } from '@/store/user';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
 import { fcmpost } from '@/api/fcm/fcm.post.api';
 import { getTokenHandler } from '@/components/pwa/Fcm';
+import PopUpModal from '@/components/home/PopUpModal';
 const Index = () => {
   //
   /* eslint-disable */
   const member = useMember();
   const { data: memberData } = useQuery({ queryKey: ['userinfo'], queryFn: userinfo });
   const setmember = useSetMember();
+
+  const [guideModalOpen, setGuideModalOpen] = useState(false);
+
   useEffect(() => {
     setmember(memberData?.data);
   }, [memberData, setmember]);
@@ -33,10 +37,23 @@ const Index = () => {
     fetchToken();
   }, []);
 
+  useEffect(() => {
+    const timeClicked = localStorage.getItem('timeClicked');
+    if (timeClicked) {
+      const currentTime = new Date().getTime();
+      const timeDifference = currentTime - JSON.parse(timeClicked);
+      if (timeDifference < 24 * 60 * 60 * 1000) {
+        return;
+      }
+    }
+    setGuideModalOpen(true);
+  }, []);
+
   return (
     <MainContainer>
       <MainPageIndex />
       <Footer />
+      {guideModalOpen ? <PopUpModal setGuideModalOpen={setGuideModalOpen} /> : null}
     </MainContainer>
   );
 };