Merge pull request #136 from hhhhyelim/test

Feat: 로그인, 회원가입 모달창 구현
readyvery · Dec 3, 2023 · a4a15cf · a4a15cf
2 parents b1cc5d8 + 18d5651
commit a4a15cf
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 10 deletions.
diff --git a/src/assets/images/store_not_open.svg b/src/assets/images/store_not_open.svg
diff --git a/src/assets/images/store_not_open_icon.svg b/src/assets/images/store_not_open_icon.svg
diff --git a/src/pages/CafeSearch/CafeSearch.css b/src/pages/CafeSearch/CafeSearch.css
@@ -24,15 +24,42 @@
   color: black;
 }
 
+.search-details {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  margin: 2% 0;
+  align-items: center;
+}
+/* 가게 이미지 */
 .search-img {
   margin: 0 2%;
+  position: relative;
 }
 
-.search-details {
+.search-img::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 0.5rem 0.5rem 0rem 0rem;
+}
+
+.closed-icon-div {
+  position: absolute;
+
+  margin: 0 2%;
+  width: 80px;
+  height: 80px;
+  z-index: 1;
   display: flex;
-  flex-direction: row;
-  margin: 2% 0;
+  justify-content: center;
   align-items: center;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 0.5rem;
 }
 
 .search-detail {
@@ -45,7 +72,6 @@
   display: flex;
   flex-direction: row;
   margin: 2% 0;
-
 }
 
 .search-name {

diff --git a/src/pages/CafeSearch/CafeSearch.jsx b/src/pages/CafeSearch/CafeSearch.jsx
@@ -1,6 +1,7 @@
 import axios from "axios";
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
+import store_not_open_icon from "../../assets/images/store_not_open_icon.svg";
 // import search_cafedream from "../../assets/images/search_cafedream.svg";
 // import search_harang from "../../assets/images/search_harang.svg";
 // import search_orda from "../../assets/images/search_orda.svg";
@@ -78,6 +79,15 @@ function CafeSearch() {
                   alt="search_cafe"
                   className="search-img"
                 />
+                {!item.status && (
+                  <div className="closed-icon-div">
+                    <img
+                      src={store_not_open_icon} // Replace with your closed image path
+                      alt="closedImage"
+                      className="closed-icon"
+                    />
+                  </div>
+                )}
                 <div className="search-detail">
                   <div className="search-name">{item.name}</div>
                   <div className="search-status-time">

diff --git a/src/pages/HomePage/Homepage.css b/src/pages/HomePage/Homepage.css
@@ -131,6 +131,7 @@
 }
 
 .pick-detail-wrapper {
+  position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -139,11 +140,34 @@
   margin: 0 0 1rem 0;
 }
 
+/* 가게 이미지 */
 .pick-detail {
-  width: 100%; /* Set the fixed width for the image */
+  width: 100%;
   height: 7.625rem;
   border-radius: 0.5rem 0.5rem 0 0;
-  object-fit: cover; /* Ensure the image covers the entire container */
+  object-fit: cover;
+}
+
+.closed-image-div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 0.5rem 0.5rem 0rem 0rem;
+  height: 7.625rem;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.closed-image {
+  position: absolute;
+  width: 50px; /* 원하는 가로 크기 */
+  height: 50px;
+  background-size: cover;
+  background-position: center;
 }
 
 .pick-info {

diff --git a/src/pages/HomePage/Homepage.jsx b/src/pages/HomePage/Homepage.jsx
@@ -12,6 +12,7 @@ import { useRecoilValue } from "recoil";
 import { isAuthenticatedState } from "../../Atom/status";
 import eventTextIcon from "../../assets/images/icon_eventText.svg";
 import profile_icon from "../../assets/images/profile_icon.svg";
+import store_not_open from "../../assets/images/store_not_open.svg";
 import Header from "../../components/views/Header/Header";
 import NavBar from "../../components/views/NavBar/NavBar";
 import NavBar2 from "../../components/views/NavBar/NavBar2";
@@ -22,7 +23,7 @@ function Homepage() {
   const apiRoot = process.env.REACT_APP_API_ROOT;
   // const [cookies] = useCookies(["accessToken"]);
   // const [loggedIn, setLoggedIn] = useState(false);
-  const isAuth = useRecoilValue(isAuthenticatedState)
+  const isAuth = useRecoilValue(isAuthenticatedState);
 
   // useEffect(() => {
   //   if (cookies?.accessToken) {
@@ -34,7 +35,6 @@ function Homepage() {
   //   // eslint-disable-next-line react-hooks/exhaustive-deps
   // }, [cookies]);
 
-
   const [quickOrder, setQuickOrder] = useState([]);
   // {/* 바로주문 */}
   useEffect(() => {
@@ -66,6 +66,7 @@ function Homepage() {
     axios
       .get(`${apiRoot}/api/v1/board/store`, config)
       .then((response) => {
+        console.log(response.data);
         setStores(response.data.stores);
       })
       .catch((error) => {
@@ -220,6 +221,15 @@ function Homepage() {
                       alt="veryPickimg"
                       className="pick-detail"
                     />
+                    {!item.status && (
+                      <div className="closed-image-div">
+                        <img
+                          src={store_not_open} // Replace with your closed image path
+                          alt="closedImage"
+                          className="closed-image"
+                        />
+                      </div>
+                    )}
                     <div className="pick-info">
                       <div className="pick-name">{item.name}</div>
                       <div className="pick-address">{item.address}</div>

diff --git a/src/pages/MyPage/MyprofilePage/MyprofilePage.jsx b/src/pages/MyPage/MyprofilePage/MyprofilePage.jsx
@@ -7,13 +7,19 @@ import { useSetRecoilState } from "recoil";
 import { getAuthenticatedSelector } from "../../../Atom/status";
 import profile_icon from "../../../assets/images/profile_icon.svg";
 import Header from "../../../components/views/Header/Header";
+import Modal from "../../../components/views/Modal/Modal";
 import "./MyprofilePage.css";
 
 function MyprofilePage() {
   const navigate = useNavigate();
   const apiUrl = process.env.REACT_APP_API_ROOT;
   const [, , removeCookie] = useCookies(["accessToken", "JSESSIONID"]);
   const setIsAuth = useSetRecoilState(getAuthenticatedSelector);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isBye, setIsBye] = useState(false);
+
+  const byeText =
+    "계정탈퇴 시, 개인정보 및 레디베리에 저장된 데이터는<br />약관에 따라 3개월 이후 삭제됩니다. 계속하겠습니까?";
 
   const handleLogout = async () => {
     try {
@@ -116,13 +122,29 @@ function MyprofilePage() {
           </div>
         </div>
         <div className="myprofile-bye">
-          <div className="myprofile-logout" onClick={handleLogout}>
+          <div className="myprofile-logout" onClick={() => setIsOpen(true)}>
             로그아웃
           </div>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-          <div className="myprofile-unregister" onClick={handleLogdelete}>
+          <div className="myprofile-unregister" onClick={() => setIsBye(true)}>
             회원탈퇴
           </div>
+          {isOpen && (
+            <Modal
+              setIsOpen={setIsOpen}
+              handleCancle={handleLogout}
+              title="로그아웃 하시겠습니까?"
+              subtitle=""
+            />
+          )}
+          {isBye && (
+            <Modal
+              setIsOpen={setIsBye}
+              handleCancle={handleLogdelete}
+              title="계정탈퇴"
+              subtitle={<div dangerouslySetInnerHTML={{ __html: byeText }} />}
+            />
+          )}
         </div>
       </div>
     </div>