feat: 바인딩 페이지 팝업에서 싱글페이지 선택 시 인덱스 오버레이됨 #234

Mapps-unit · Jul 29, 2022 · 8bb857e · 8bb857e
1 parent f82ab65
commit 8bb857e
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 24 deletions.
diff --git a/src/components/MyPage/AddPagePopUp.js b/src/components/MyPage/AddPagePopUp.js
@@ -20,22 +20,22 @@ function AddPopUp({ userSeq, popUp, setPopUp }) {
   };
   // eslint-disable-next-line no-unused-vars
 
-  const [test, setTest] = useState({ title: '', url: '' });
+  // const [test, setTest] = useState({ title: '', url: '' });
 
   function onChangeForm(event) {
     // eslint-disable-next-line no-unused-vars
-    const data = { title, url, thumbnail: 'later' };
+    // const data = { title, url, thumbnail: 'later' };
     // setDatas(data);
     // setTest('hi');
-    setTest(data);
-    setInputs({
-      title: '',
-      url: '',
-    });
+    // setTest(data);
+    // setInputs({
+    //   title: '',
+    //   url: '',
+    // });
     // console.log(data.title);
     event.preventDefault();
+    console.log(inputs);
     request();
-    console.log(test);
     // setPopUp(!popUp);
   }
 
@@ -45,11 +45,7 @@ function AddPopUp({ userSeq, popUp, setPopUp }) {
     endpoint: endpoint,
     method: 'post',
     // data: test,
-    data: {
-      title: test.title,
-      url: 'urltest',
-      thumbnail: '',
-    },
+    data: inputs,
   });
 
   return (

diff --git a/src/components/MyPage/BindingPopUp.jsx b/src/components/MyPage/BindingPopUp.jsx
@@ -53,7 +53,6 @@ function BindingPopUp({ userSeq, popUp, setPopUp }) {
     setPopUp(!popUp);
   }
 
-  console.log(inputs);
   return (
     <div css={[backGroundPopStyle]}>
       <div css={[pagePopUpBoxStyle]}>

diff --git a/src/components/MyPage/BindingSelectSinglePages.jsx b/src/components/MyPage/BindingSelectSinglePages.jsx
@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { useSelector } from 'react-redux';
 import BindingSinglePageBlock from './BindingSinglePageBlock';
 
@@ -35,7 +35,11 @@ const BindingSelectSinglePages = ({ selectedPages, setSelectedPages }) => {
         const semiIndex = index + 1;
         return (
           <div key={semiIndex}>
-            <BindingSinglePageBlock data={page} handleSelect={handleSelect} />
+            <BindingSinglePageBlock
+              data={page}
+              handleSelect={handleSelect}
+              selectedPages={selectedPages}
+            />
           </div>
         );
       })}
@@ -49,7 +53,7 @@ export default BindingSelectSinglePages;
 
 const siteViewBZone = css`
   display: flex;
-  height: 100%;
+  height: 180px;
   justify-content: flex-start;
   align-items: flex-start;
   overflow: scroll;

diff --git a/src/components/MyPage/BindingSinglePageBlock.jsx b/src/components/MyPage/BindingSinglePageBlock.jsx
@@ -7,13 +7,25 @@ const BindingSinglePageBlock = (props) => {
     props.data.thumbnail !== ''
       ? props.data.thumbnail
       : 'https://mblogthumb-phinf.pstatic.net/MjAxNzA2MjNfNDEg/MDAxNDk4MjExMTE1OTYy.RGjgC51-8rYSISInewpiERaIWLuYkk6h8-DHImZWlNog.6nJ1cYNwJuFRBYbzuXIlfFC2vAz9SSYihxEpnVX2ttUg.PNG.kkp0079/1.PNG?type=w800';
+  const selectedIndex =
+    props.selectedPages.findIndex(
+      (element) => element.singlePageUrl === props.data.url
+    ) + 1;
 
   return (
     <div
       css={[singlePageBox]}
       onClick={() => props.handleSelect(props.data.url)}
       onKeyDown={() => props.handleSelect(props.data.url)}
     >
+      {selectedIndex !== 0 ? (
+        <div>
+          <div css={[selectedPageOverlay]} />
+          <div css={[selectedPageIndexText]}>{selectedIndex}</div>
+        </div>
+      ) : (
+        <></>
+      )}
       <img css={[thumbnailImg]} src={thumbnailUrl} />
       <div css={[singlePageTitle]}>{props.data.title}</div>
     </div>
@@ -30,6 +42,7 @@ const thumbnailImg = css`
 `;
 
 const singlePageBox = css`
+  position: relative;
   width: 100px;
   height: 160px;
   border: 10px black;
@@ -44,3 +57,22 @@ const singlePageTitle = css`
   margin-bottom: 10px;
   overflow: hidden;
 `;
+
+const selectedPageOverlay = css`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0.7;
+  border-radius: 20px;
+  background-color: rgba(239, 100, 8, 1);
+`;
+
+const selectedPageIndexText = css`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 50px;
+  color: white;
+`;
diff --git a/src/components/MyPage/PageBlock.js b/src/components/MyPage/PageBlock.js
@@ -3,9 +3,11 @@ import { css } from '@emotion/react';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { InitButtonStyle } from '../../styles/GlobalStyles';
+import { useGetPersonalUrl } from '../../hooks/useParamsUrl';
 
 // eslint-disable-next-line no-unused-vars
 function PageBlock({ data, addBlock, popUp, setPopUp }) {
+  const pageUrl = useGetPersonalUrl();
   // if (data) {
   // console.log(`data: ${data.title}`);
   // console.log(`data: ${data.url}`);
@@ -29,7 +31,7 @@ function PageBlock({ data, addBlock, popUp, setPopUp }) {
         </>
       ) : (
         <div css={siteViewBZone}>
-          <Link to={data.url ? `/dongslee/${data.url}` : ''}>
+          <Link to={data.url ? `/${pageUrl}/${data.url}` : ''}>
             <div
               css={css`
                 height: 70%;

diff --git a/src/pages/MyPage.js b/src/pages/MyPage.js
@@ -316,12 +316,7 @@ function MyPage() {
             })} */}
             {/* {console.log(users)} */}
             {bzoneimage()}
-            <PageBlock
-              data={bZoneData}
-              addBlock
-              setPopUp={setPopUp}
-              popUp={popUp}
-            />
+            <PageBlock addBlock setPopUp={setPopUp} popUp={popUp} />
 
             <div css={[overFlowHidden]} />
           </div>