Merge pull request #253 from Mapps-unit/234_bindingPage

#234 바인딩 페이지 수정

src/components/MyPage/Azone.js

@@ -2,7 +2,7 @@
 import { css } from '@emotion/react';
 import ProfileBlock from './ProfileBlock';
 
-function Azone({ myInfo, setPopUp, popUp, setBindingPopUp, bindingPopUp }) {
+function Azone({ myInfo, setPopUp, popUp, bindingPopUp }) {
   return (
     <div css={MyPageAZone}>
       <div
@@ -65,13 +65,6 @@ function Azone({ myInfo, setPopUp, popUp, setBindingPopUp, bindingPopUp }) {
             text-align: center;
           `}
         >
-          <ProfileBlock
-            // 기존에 있던 버튼 컴포넌트 재활용_이름 변경 혹은 별도 컴포넌트로 분리 필요
-            addBlock
-            setPopUp={setBindingPopUp}
-            popUp={bindingPopUp}
-            buttonText='페이지 합치기'
-          />
           <ProfileBlock
             addBlock
             setPopUp={setPopUp}

src/components/MyPage/BindingButtonSet.jsx

@@ -1,12 +1,14 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import React, { useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import { getApiEndpoint } from '../../utils/util';
 import useRequestAuth from '../../hooks/useRequestAuth';
 import { useRequest } from '../../hooks/useRequest';
 import BindingPreview from './BindingPreview';
 import { PlainPopUp } from '../FeedbackBox/PlainPopUp';
 import { BlockDrag } from '../../styles/GlobalStyles';
+import { createReplacementMultiPagesAction } from '../../redux/slice';
 
 const BindingButtonSet = (props) => {
   const { userSeq, inputs, setPopUp } = props;
@@ -27,23 +29,37 @@ const BindingButtonSet = (props) => {
     data: inputs,
   });
 
+  const dispatch = useDispatch();
+
   const { res: urlOverlapRes, request: requestUrlOverlap } = useRequest({
     endpoint: `${getApiEndpoint()}/user/page/overlap/${inputs.url}/${userSeq}`,
     method: 'get',
   });
 
+  const { res: multiPagesData, request: requestMultiPagesData } = useRequest({
+    endpoint: `${getApiEndpoint()}/user/page/multies/${userSeq}`,
+    method: 'get',
+  });
+
   const SUCCESS = 0;
   const EXTRA_ERROR = 1;
   const URL_OVERLAP_ERROR = 2;
   const URL_FORMAT_ERROR = 3;
 
+  useEffect(() => {
+    if (multiPagesData) {
+      dispatch(createReplacementMultiPagesAction(multiPagesData.data));
+      setPopUp(false);
+    }
+  }, [multiPagesData]);
+
   useEffect(() => {
     // 마이페이지 업데이트를 위해 멀티페이지 GET 필요
     if (res) {
       setSendingPopUp(false);
-      console.log(res);
-      if (res.data.message === 'ok') setPopUp(false);
-      else setErrorRes(EXTRA_ERROR);
+      if (res.data.message === 'ok') {
+        requestMultiPagesData();
+      } else setErrorRes(EXTRA_ERROR);
     }
   }, [res]);
 

src/components/MyPage/BindingInputBox.jsx

@@ -12,7 +12,7 @@ const BindingInputBox = (props) => {
   const pageUrl = useGetPersonalUrl();
 
   useEffect(() => {
-    setPaddingSize(fixedTextRef.current.clientWidth + 16);
+    setPaddingSize(fixedTextRef.current.clientWidth + 20);
   }, []);
 
   const validateURL = useMemo(() => {
@@ -28,6 +28,15 @@ const BindingInputBox = (props) => {
 
   return (
     <div css={[VerticalLayout]}>
+      <div css={[pagePopUpBoxContents, BlockDrag]}>페이지 제목</div>
+      <input
+        css={[pagePopUpBoxInput]}
+        placeholder='제목을 입력해주세요! 최상단에 표시됩니다.'
+        name='title'
+        value={title}
+        autoComplete='off'
+        onChange={onChange}
+      />
       <div css={[pagePopUpBoxContents, BlockDrag]}>페이지 주소</div>
       <div css={[formText]}>
         <span css={[fixedText]} ref={fixedTextRef}>
@@ -52,15 +61,6 @@ const BindingInputBox = (props) => {
           <></>
         )}
       </div>
-      <div css={[pagePopUpBoxContents, BlockDrag]}>페이지 제목</div>
-      <input
-        css={[pagePopUpBoxInput]}
-        placeholder='제목을 입력해주세요! 최상단에 표시됩니다.'
-        name='title'
-        value={title}
-        autoComplete='off'
-        onChange={onChange}
-      />
     </div>
   );
 };
@@ -73,7 +73,7 @@ const VerticalLayout = css`
 `;
 
 const pagePopUpBoxContents = css`
-  font-size: 18px;
+  font-size: 16px;
   line-height: normal;
   font-weight: bold;
 `;
@@ -84,8 +84,9 @@ const formText = css`
 
 const fixedText = css`
   position: absolute;
-  left: 15px;
-  top: 25px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-87%, -95%);
   color: gray;
   z-index: 9;
 `;
@@ -97,7 +98,7 @@ const pagePopUpBoxInput = css`
   border-radius: 20px;
   border: none;
   background-color: white;
-  font-size: 15px;
+  font-size: 16px;
   margin-top: 15px;
   margin-bottom: 35px;
   padding-left: 15px;

src/components/MyPage/BindingPopUp.jsx

@@ -123,7 +123,7 @@ const pagePopUpBoxStyle = css`
   left: 50%;
   transform: translate(-50%, -50%);
   width: 872px;
-  min-height: 700px;
+  min-height: 720px;
   max-height: 800px;
   height: 85vh;
   padding-left: 96px;

src/components/MyPage/BindingSinglePageBlock.jsx

@@ -49,13 +49,15 @@ const singlePageBox = css`
   width: 147px;
   height: 116px;
   margin: 0 0 15px 10px;
-  border-radius: 8px;
 `;
 
 const singlePageTitle = css`
+  position: relative;
+  top: 3%;
+  left: 8%;
+  width: 85%;
   box-sizing: border-box;
   font-size: 12px;
-  margin: 5px 10px 0 10px;
   overflow: hidden;
 `;
 
@@ -75,9 +77,9 @@ const selectedPageOverlay = css`
   transform: translate(-50%, -50%);
   width: 100%;
   height: 100%;
-  border-radius: 9px;
+  border-radius: 10px;
   border: solid 2px #fc3f1d;
-  /* background-color: rgba(85, 85, 85, 0.4); */
+  background-color: rgba(85, 85, 85, 0.6);
   z-index: 10;
 `;
 
@@ -86,14 +88,14 @@ const selectedPageIndexText = css`
   box-sizing: border-box;
   width: 26px;
   height: 26px;
-  top: 85%;
-  left: 87%;
+  line-height: 26px;
+  top: 50%;
+  left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
+  font-family: 'SUIT';
   font-size: 19px;
   border-radius: 30px;
-  padding-top: 2px;
-  padding-bottom: 1;
   color: white;
   z-index: 11;
 `;

src/components/MyPage/PageBlock.js

@@ -54,6 +54,7 @@ function PageBlock({ data, popUp, setPopUp, userUrl }) {
                 display: flex;
                 margin: auto;
                 margin-top: 20px;
+                overflow: hidden;
               `}
             >
               {data ? `${data.title}` : ''}

src/font.css

@@ -61,3 +61,49 @@
     /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./asset/fonts/noto-sans-kr-v27-latin_korean-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
+/* noto-sans-kr-900 - latin_korean */
+@font-face {
+  font-family: 'SUIT';
+  font-weight: 100;
+  src: url('./asset/fonts/SUIT-Thin.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'SUIT';
+  font-weight: 200;
+  src: url('./asset/fonts/SUIT-ExtraLight.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'SUIT';
+  font-weight: 300;
+  src: url('./asset/fonts/SUIT-Light.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'SUIT';
+  font-weight: 400;
+  src: url('./asset/fonts/SUIT-Regular.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'SUIT';
+  font-weight: 500;
+  src: url('./asset/fonts/SUIT-Medium.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'SUIT';
+  font-weight: 600;
+  src: url('./asset/fonts/SUIT-SemiBold.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'SUIT';
+  font-weight: 700;
+  src: url('./asset/fonts/SUIT-Bold.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'SUIT';
+  font-weight: 800;
+  src: url('./asset/fonts/SUIT-ExtraBold.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'SUIT';
+  font-weight: 900;
+  src: url('./asset/fonts/SUIT-Heavy.woff2') format('woff2');
+}

src/pages/MyPage.js

@@ -2,7 +2,7 @@
 import { css } from '@emotion/react';
 import { useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
-import { useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { Header } from '../components';
 import AddPagePopUp from '../components/MyPage/AddPagePopUp';
 import EditPropfilePopUp from '../components/MyPage/EditProfilePopUp';
@@ -19,7 +19,10 @@ import {
 } from '../utils/util';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
-import { createReplacementSinglePagesAction } from '../redux/slice';
+import {
+  createReplacementSinglePagesAction,
+  createReplacementMultiPagesAction,
+} from '../redux/slice';
 import Azone from '../components/MyPage/Azone';
 
 function MyPage() {
@@ -33,6 +36,11 @@ function MyPage() {
   const [popUp, setPopUp] = useState(false);
   const [profilePopUp, setProfilePopUp] = useState(false);
   const [bindingPopUp, setBindingPopUp] = useState(false);
+
+  const { singlePagesState, multiPagesState } = useSelector((state) => ({
+    singlePagesState: state.info.singlePages,
+    multiPagesState: state.info.multiPages,
+  }));
   const dispatch = useDispatch();
 
   const { res: pageUserRes, request: requestPageUserInfo } = useRequest({
@@ -41,11 +49,6 @@ function MyPage() {
   });
 
   // eslint-disable-next-line no-unused-vars
-  const { res: bZoneData, request: requestBZoneData } = useRequest({
-    endpoint: `${getApiEndpoint()}/user/page/singles/${userSeq}`,
-    method: 'get',
-  });
-
   const { res: singlePagesData, request: requestSinglePagesData } = useRequest({
     endpoint: `${getApiEndpoint()}/user/page/singles/${userSeq}`,
     method: 'get',
@@ -68,7 +71,6 @@ function MyPage() {
         if (userSeq) {
           requestSinglePagesData();
           requestMultiPagesData();
-          requestBZoneData();
         }
         // 다른 사람 페이지일 경우
       } else {
@@ -81,7 +83,7 @@ function MyPage() {
       setUserMatched(null);
       setNickname(null);
     };
-  }, [pageUrl, myInfo, userSeq, requestPageUserInfo, requestBZoneData]);
+  }, [pageUrl, myInfo, userSeq, requestPageUserInfo]);
 
   // pageUserRes에 변화가 있으면 -> 데이터를 받아서 userseq, nickname 세팅.
   useEffect(() => {
@@ -109,7 +111,10 @@ function MyPage() {
     if (singlePagesData && singlePagesData.data) {
       dispatch(createReplacementSinglePagesAction(singlePagesData.data));
     }
-  }, [singlePagesData]);
+    if (multiPagesData && multiPagesData.data) {
+      dispatch(createReplacementMultiPagesAction(multiPagesData.data));
+    }
+  }, [singlePagesData, multiPagesData]);
 
   useEffect(() => {
     if (multiPagesData && multiPagesData.data) {
@@ -118,8 +123,8 @@ function MyPage() {
   }, [multiPagesData]);
 
   function singlePagesimage() {
-    if (bZoneData && bZoneData.data.message === 'ok') {
-      const usersb = bZoneData.data.data;
+    if (singlePagesState && singlePagesState.message === 'ok') {
+      const usersb = singlePagesState.data;
       return (
         <>
           {usersb.map((page, index) => {
@@ -142,6 +147,31 @@ function MyPage() {
     return <div>no data</div>;
   }
 
+  function multiPagesimage() {
+    if (multiPagesState && multiPagesState.message === 'ok') {
+      const multiPages = multiPagesState.data;
+      return (
+        <>
+          {multiPages.map((page, index) => {
+            const semiIndex = index + 1;
+
+            return (
+              <div key={semiIndex}>
+                <PageBlock
+                  userUrl={userUrl}
+                  data={page}
+                  setPopUp={setPopUp}
+                  popUp={popUp}
+                />
+              </div>
+            );
+          })}
+        </>
+      );
+    }
+    return <div>no data</div>;
+  }
+
   function multiPagesimage() {
     if (multiPagesData && multiPagesData.data.message === 'ok') {
       const multiPages = multiPagesData.data.data;
@@ -180,7 +210,6 @@ function MyPage() {
           myInfo={myInfo}
           setPopUp={setProfilePopUp}
           popUp={profilePopUp}
-          setBindingPopUp={setBindingPopUp}
           bindingPopUp={bindingPopUp}
         />
         <hr css={[divLine]} />