Merge pull request #146 from Strong-Potato/124-feat-detail-page-last-…

…markup-todo Feat: detail page last markup
Strong-Potato · Jan 22, 2024 · 2a1739a · 2a1739a
2 parents 0582c5e + 2613fd3
commit 2a1739a
Show file tree

Hide file tree

Showing 29 changed files with 831 additions and 104 deletions.
diff --git a/src/chakra/modalCustom.ts b/src/chakra/modalCustom.ts
@@ -57,6 +57,16 @@ export const modalTheme = defineMultiStyleConfig({
   baseStyle,
   variants: {alertModal},
   sizes: {
-    addVote: {dialog: {w: '100%', maxW: '41rem', mx: '24px'}},
+    addVote: { dialog: { w: "100%", maxW: "41rem", mx: "24px" } },
+    imageModal: {
+      dialog: {
+        w: "100%",
+        maxW: "45rem",
+        height: "100%",
+        my: 0,
+        bg: "#0A0D14",
+      },
+
+    },
   },
 });
diff --git a/src/components/Detail/BottomFixedBtn/BottomFixedBtn.tsx b/src/components/Detail/BottomFixedBtn/BottomFixedBtn.tsx
@@ -1,16 +1,44 @@
+import { useRecoilValue, useSetRecoilState } from "recoil";
+
 import styles from "./BottomFixedBtn.module.scss";
 
+import { IsLoginState } from "@/recoil/detail/detail";
+import { isModalOpenState, modalContentState } from "@/recoil/vote/alertModal";
+
 import { BottomFixedBtnProps } from "@/types/detail";
 
 function BottomFixedBtn({ onOpen }: BottomFixedBtnProps) {
+  const setIsModalOpen = useSetRecoilState(isModalOpenState);
+  const setModalContent = useSetRecoilState(modalContentState);
+  const isLogin = useRecoilValue(IsLoginState);
+
+  const notLoginContent = {
+    title: "로그인이 필요한 기능입니다.",
+    subText: "로그인하고 모든 서비스를 이용해 보세요! ",
+    cancelText: "닫기",
+    actionButton: "로그인하기",
+    isSmallSize: true,
+  };
+
+  const showNotLoginModal = () => {
+    setIsModalOpen(true);
+    setModalContent({ ...notLoginContent });
+  };
+
   return (
     <div className={styles.container}>
       <div
         className={styles.container__wrapper}
         style={{
           backgroundColor: "#2388FF",
         }}
-        onClick={onOpen}
+        onClick={() => {
+          if (isLogin) {
+            onOpen();
+          } else {
+            showNotLoginModal();
+          }
+        }}
       >
         <span>이 장소 후보로 등록하기</span>
       </div>

diff --git a/...omponents/Detail/BottomFixedBtn/RegistrationSlide/RegistrationModal/RegistrationModal.tsx b/...omponents/Detail/BottomFixedBtn/RegistrationSlide/RegistrationModal/RegistrationModal.tsx
@@ -32,7 +32,7 @@ const RegistrationModal = ({ isOpen, onClose }: RegistrationMoalProps) => {
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} size="addVote">
-      <ModalOverlay maxWidth="45rem" left="50%" transform="translateX(-50%)" />
+      <ModalOverlay />
       <ModalContent
         px="24px"
         py="40px"

diff --git a/src/components/Detail/BottomFixedBtn/RegistrationSlide/RegistrationSlide.module.scss b/src/components/Detail/BottomFixedBtn/RegistrationSlide/RegistrationSlide.module.scss
@@ -20,6 +20,11 @@
         @include typography(tabLabel);
       }
     }
+
+    &__notValued {
+      cursor: auto;
+      color: $neutral300;
+    }
   }
 
   &__tripTitle {
@@ -58,6 +63,21 @@
     gap: 8px;
   }
 
+  &__voteNotValued {
+    margin-top: 64px;
+    text-align: center;
+
+    &__top {
+      @include typography(subTitle);
+      color: $neutral400;
+    }
+
+    &__bottom {
+      @include typography(captionSmall);
+      color: $neutral300;
+    }
+  }
+
   &__bottomFixedBtn {
     padding: 12px 0;
     width: 100%;

diff --git a/src/components/Detail/BottomFixedBtn/RegistrationSlide/RegistrationSlide.tsx b/src/components/Detail/BottomFixedBtn/RegistrationSlide/RegistrationSlide.tsx
@@ -24,6 +24,8 @@ function RegistrationSlide({ slideOnClose }: RegistrationSlideProps) {
 
   // useEffect fetchData
 
+  const exArray = [];
+
   return (
     <>
       <div className={styles.container}>
@@ -36,43 +38,58 @@ function RegistrationSlide({ slideOnClose }: RegistrationSlideProps) {
           <CloseIcon width="2rem" height="2rem" />
         </button>
         <div className={styles.container__createBtn}>
-          <button
-            className={styles.container__CreateBtn}
-            onClick={() => {
-              if (TripSelected) {
+          {TripSelected ? (
+            <button
+              onClick={() => {
                 onOpen();
                 console.log(1);
-              }
-            }}
-          >
-            <CiEdit fontSize="2.2rem" />
-            <span>새 투표 생성</span>
-          </button>
+              }}
+            >
+              <CiEdit fontSize="2.2rem" />
+              <span>새 투표 생성</span>
+            </button>
+          ) : (
+            <button className={styles.container__createBtn__notValued} disabled>
+              <CiEdit fontSize="2.2rem" color="#CDCFD0" />
+              <span>새 투표 생성</span>
+            </button>
+          )}
         </div>
         <div className={styles.container__tripTitle}>여행 스페이스</div>
         <RegistrationTripSpace setTripSelected={setTripSelected} />
         <div className={styles.container__voteTitle}>투표리스트</div>
         {TripSelected ? (
-          <div>
-            <div className={styles.container__voteSelected}>
-              <span>후보로 등록할 투표 제목을 선택해주세요</span>
+          exArray.length > 0 ? (
+            <div>
+              <div className={styles.container__voteSelected}>
+                <span>후보로 등록할 투표 제목을 선택해주세요</span>
+              </div>
+              <div className={styles.container__voteList}>
+                <RegistrationListItem
+                  title="맛집 어디갈까"
+                  isSelectedProps={true}
+                />
+                {/*  초과 글씨 ... 처리 해야함*/}
+                <RegistrationListItem
+                  title="둘째 날 숙소 어디서 묵지?"
+                  isSelectedProps={false}
+                />
+                <RegistrationListItem
+                  title="루프탑 카페 정하자~"
+                  isSelectedProps={false}
+                />
+              </div>
             </div>
-            <div className={styles.container__voteList}>
-              <RegistrationListItem
-                title="맛집 어디갈까"
-                isSelectedProps={true}
-              />
-              {/*  초과 글씨 ... 처리 해야함*/}
-              <RegistrationListItem
-                title="둘째 날 숙소 어디서 묵지?"
-                isSelectedProps={false}
-              />
-              <RegistrationListItem
-                title="루프탑 카페 정하자~"
-                isSelectedProps={false}
-              />
+          ) : (
+            <div className={styles.container__voteNotValued}>
+              <p className={styles.container__voteNotValued__top}>
+                생성된 투표가 없습니다.
+              </p>
+              <p className={styles.container__voteNotValued__bottom}>
+                투표 생성을 눌러 새로운 투표를 만들어주세요!
+              </p>
             </div>
-          </div>
+          )
         ) : (
           <div className={styles.container__voteUnSelected}>
             <span>여행을 먼저 선택해주세요</span>

diff --git a/src/components/Detail/BottomSlideDetail/BottomSlideDetail.tsx b/src/components/Detail/BottomSlideDetail/BottomSlideDetail.tsx
@@ -1,10 +1,41 @@
 import { Slide } from "@chakra-ui/react";
+import { useSetRecoilState } from "recoil";
 
 import styles from "./BottomSlideDetail.module.scss";
 
-import { BottomSlideProps } from "@/types/bottomSlide";
+import { isModalOpenState, modalContentState } from "@/recoil/vote/alertModal";
+
+import { BottomSlideDetailProps } from "@/types/detail";
+
+function BottomSlideDetail({
+  isOpen,
+  onClose,
+  children,
+  isReviewModal,
+  setBottomSlideContent,
+}: BottomSlideDetailProps) {
+  const setIsModalOpen = useSetRecoilState(isModalOpenState);
+  const setModalContent = useSetRecoilState(modalContentState);
+
+  const checkBeforeExit = {
+    title: "잠깐!",
+    subText: "지금 나가면 작성내용이 전부 삭제돼요",
+    cancelText: "마저 작성할게요",
+    actionButton: "나갈래요",
+    isSmallSize: true,
+    onClickAction: () => {
+      setBottomSlideContent(null);
+      setIsModalOpen(false);
+      onClose();
+      document.body.style.removeProperty("overflow");
+    },
+  };
+
+  const showCheckBeforeExitModal = () => {
+    setIsModalOpen(true);
+    setModalContent({ ...checkBeforeExit });
+  };
 
-function BottomSlideDetail({ isOpen, onClose, children }: BottomSlideProps) {
   return (
     <>
       <div
@@ -13,8 +44,13 @@ function BottomSlideDetail({ isOpen, onClose, children }: BottomSlideProps) {
           visibility: isOpen ? "visible" : "hidden",
         }}
         onClick={() => {
+          if (isReviewModal) {
+            showCheckBeforeExitModal();
+          } else {
+            setBottomSlideContent(null);
+            onClose();
+          }
           document.body.style.removeProperty("overflow");
-          onClose();
         }}
       ></div>
       <Slide className={styles.slide} direction="bottom" in={isOpen}>

diff --git a/src/components/Detail/Contents/Contents.tsx b/src/components/Detail/Contents/Contents.tsx
@@ -1,15 +1,40 @@
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
+import { useEffect } from "react";
+import { useRecoilState, useSetRecoilState } from "recoil";
 
 import styles from "./Contents.module.scss";
 
+import { TabIndexState, TabYPosition } from "@/recoil/detail/detail";
+
 import Information from "./Information/Information";
 import Reviews from "./Reviews/Reviews";
 
 import { ContentsProps } from "@/types/detail";
 
 function Contents({ onOpen }: ContentsProps) {
+  const [tabIndex, setTabIndex] = useRecoilState(TabIndexState);
+  const setTabPosition = useSetRecoilState(TabYPosition);
+
+  const handleTabsChange = (index: number) => {
+    setTabIndex(index);
+  };
+
+  useEffect(() => {
+    const tabRef = document.getElementById("tab");
+
+    if (tabRef) {
+      setTabPosition(tabRef.getBoundingClientRect().top + window.scrollY - 32);
+    }
+  });
+
   return (
-    <Tabs isFitted className={styles.container}>
+    <Tabs
+      isFitted
+      className={styles.container}
+      index={tabIndex}
+      onChange={handleTabsChange}
+      id="tab"
+    >
       <TabList>
         <Tab
           fontSize="1.4rem"

diff --git a/src/components/Detail/Contents/Information/BasicInformation/BasicInformation.tsx b/src/components/Detail/Contents/Information/BasicInformation/BasicInformation.tsx
@@ -19,7 +19,7 @@ function BasicInformation() {
         </div>
         <div className={styles.container__contents__item}>
           <IoMdCall color="#979C9E" fontSize="2.4rem" />
-          <a href="#">031-771-1234</a>
+          <span>031-771-1234</span>
         </div>
         <div className={styles.container__contents__item}>
           <AiOutlineLink color="#979C9E" fontSize="2.4rem" />

diff --git a/src/components/Detail/Contents/Information/BasicInformation/MapInDetail/MapInDetail.tsx b/src/components/Detail/Contents/Information/BasicInformation/MapInDetail/MapInDetail.tsx
@@ -1,12 +1,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+import { useDisclosure } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { CustomOverlayMap, Map } from "react-kakao-maps-sdk";
 
 import styles from "./MapInDetail.module.scss";
 
 import BigHomeMarker from "@/assets/homeIcons/map/house_big.svg?react";
 
+import MapModal from "../MapModal/MapModal";
+
 interface Coordinate {
   lat: number;
   lng: number;
@@ -18,6 +21,7 @@ function MapInDetail() {
     lat: 33.5563,
     lng: 126.79581,
   });
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
   useEffect(() => {
     const geocoder = new kakao.maps.services.Geocoder();
@@ -32,15 +36,35 @@ function MapInDetail() {
     geocoder.addressSearch("경기도 양평군 양평읍 백안리 9", callback);
   }, []);
 
+  const handleMapDoubleClick = (event: any) => {
+    event.preventDefault();
+  };
+
   return (
-    <Map
-      center={{ lat: coordinate.lat, lng: coordinate.lng }}
-      className={styles.container}
-    >
-      <CustomOverlayMap position={{ lat: coordinate.lat, lng: coordinate.lng }}>
-        <BigHomeMarker />
-      </CustomOverlayMap>
-    </Map>
+    <>
+      <Map
+        center={{ lat: coordinate.lat, lng: coordinate.lng }}
+        className={styles.container}
+        draggable={false}
+        zoomable={false}
+        level={3}
+        onClick={onOpen}
+        onDoubleClick={handleMapDoubleClick}
+      >
+        <CustomOverlayMap
+          position={{ lat: coordinate.lat, lng: coordinate.lng }}
+        >
+          <BigHomeMarker />
+        </CustomOverlayMap>
+      </Map>
+      <MapModal
+        isOpen={isOpen}
+        onClose={onClose}
+        lat={coordinate.lat}
+        lng={coordinate.lng}
+        name={"호텔 Loft"}
+      />
+    </>
   );
 }