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 ? (
+
+ ) : (
+ <>>
+ )}
{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 }) {
>
) : (