diff --git a/src/components/MyPage/AddPagePopUp.js b/src/components/MyPage/AddPagePopUp.js index bd7fa635..39ebe708 100644 --- 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 index 748ea444..74a6808c 100644 --- 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 (
diff --git a/src/components/MyPage/BindingSelectSinglePages.jsx b/src/components/MyPage/BindingSelectSinglePages.jsx index 09cb81a7..5d4844c0 100644 --- 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 (
- +
); })} @@ -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 index e701da8b..a3e96cdc 100644 --- a/src/components/MyPage/BindingSinglePageBlock.jsx +++ b/src/components/MyPage/BindingSinglePageBlock.jsx @@ -7,6 +7,10 @@ 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 (
{ onClick={() => props.handleSelect(props.data.url)} onKeyDown={() => props.handleSelect(props.data.url)} > + {selectedIndex !== 0 ? ( +
+
+
{selectedIndex}
+
+ ) : ( + <> + )}
{props.data.title}
@@ -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 index 52985985..d6db40b7 100644 --- 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 }) { ) : (
- +
+