feat: 바인딩 페이지 팝업 구현_url, title, 싱글페이지 순서 받아서 API요청 가능_미리보기, 선택된 페이지에 …

…오버레이 구현 필요 #234
Mapps-unit · Jul 29, 2022 · f82ab65 · f82ab65
1 parent 5dc7d23
commit f82ab65
Show file tree

Hide file tree

Showing 5 changed files with 433 additions and 4 deletions.
diff --git a/src/components/MyPage/BindingPopUp.jsx b/src/components/MyPage/BindingPopUp.jsx
@@ -0,0 +1,270 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import React, { useState, useRef, useEffect } from 'react';
+import useRequestAuth from '../../hooks/useRequestAuth';
+import { useGetPersonalUrl } from '../../hooks/useParamsUrl';
+import { getApiEndpoint } from '../../utils/util';
+import BindingPreview from './BindingPreview';
+import BindingSelectSinglePages from './BindingSelectSinglePages';
+
+function BindingPopUp({ userSeq, popUp, setPopUp }) {
+  const [inputs, setInputs] = useState({
+    title: '',
+    url: '',
+    thumbnail: '',
+    singlePages: [],
+  });
+  const [paddingSize, setPaddingSize] = useState(0);
+  const [selectedPages, setSelectedPages] = useState([]);
+
+  const endpoint = `${getApiEndpoint()}/user/page/multi/${userSeq}`;
+  // eslint-disable-next-line no-unused-vars
+  const { res, request } = useRequestAuth({
+    endpoint: endpoint,
+    method: 'post',
+    data: inputs,
+  });
+
+  const pageUrl = useGetPersonalUrl();
+  const fixedTextRef = useRef(null);
+  useEffect(() => {
+    setPaddingSize(fixedTextRef.current.clientWidth + 1);
+  }, []);
+  useEffect(() => {
+    setInputs({
+      ...inputs,
+      singlePages: { selectedPages },
+    });
+  }, [selectedPages]);
+
+  const { title, url } = inputs;
+
+  const onChange = (e) => {
+    const { name, value } = e.target;
+    setInputs({
+      ...inputs,
+      [name]: value,
+    });
+  };
+  function onChangeForm(event) {
+    // eslint-disable-next-line no-unused-vars
+    event.preventDefault();
+    request();
+    setPopUp(!popUp);
+  }
+
+  console.log(inputs);
+  return (
+    <div css={[backGroundPopStyle]}>
+      <div css={[pagePopUpBoxStyle]}>
+        <div css={[pagePopUpBoxTitle]}>페이지 합치기</div>
+        <form css={[formWidth]} onSubmit={onChangeForm}>
+          <button
+            type='button'
+            css={[pagePopUpBoxCloseButton]}
+            onClick={() => setPopUp(!popUp)}
+          >
+            X{' '}
+          </button>
+          <div css={[HorizontalLayout]}>
+            <div css={[PreviewWidth]}>
+              <BindingPreview />
+            </div>
+            <div css={[InputWidth]}>
+              <div css={[pagePopUpBoxContentsWraper]}>
+                <div css={[pagePopUpBoxContents]}>페이지 주소</div>
+                <div css={[formText]}>
+                  <span css={[fixedText]} ref={fixedTextRef}>
+                    https://iamonit.kr/{pageUrl}/
+                  </span>
+                  <input
+                    css={[
+                      pagePopUpBoxInput,
+                      css`
+                        padding-left: ${paddingSize}px;
+                      `,
+                    ]}
+                    name='url'
+                    value={url}
+                    autoComplete='off'
+                    onChange={onChange}
+                  />
+                </div>
+              </div>
+              <div css={[pagePopUpBoxContentsWraper]}>
+                <div css={[pagePopUpBoxContents]}>페이지 제목</div>
+                <input
+                  css={[pagePopUpBoxInput]}
+                  placeholder='제목을 입력해주세요! 최상단에 표시됩니다.'
+                  name='title'
+                  value={title}
+                  autoComplete='off'
+                  onChange={onChange}
+                />
+              </div>
+              <div css={[pagePopUpBoxContentsWraper]}>
+                <div css={[pagePopUpBoxContents]}>페이지 선택</div>
+                <div css={[SelectSinglePagesLayout]}>
+                  <BindingSelectSinglePages
+                    selectedPages={selectedPages}
+                    setSelectedPages={setSelectedPages}
+                  />
+                </div>
+              </div>
+              <button
+                type='button'
+                css={[AddButtonStyle, LoginButtonColor]}
+                onClick={onChangeForm}
+              >
+                추가하기
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default BindingPopUp;
+
+const backGroundPopStyle = css`
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.2);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+const pagePopUpBoxStyle = css`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 980px;
+  height: 584px;
+  background-color: #ffffff;
+  box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.16);
+  border-radius: 20px;
+`;
+
+const pagePopUpBoxTitle = css`
+  font-size: 30px;
+  text-align: center;
+  font-weight: bold;
+  margin-top: 45px;
+`;
+
+const pagePopUpBoxContentsWraper = css`
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  width: 100%;
+  justify-content: space-between;
+  text-align: center;
+`;
+
+const pagePopUpBoxContents = css`
+  font-size: 15px;
+  line-height: 30px;
+  font-weight: bold;
+  margin-top: 47px;
+  margin-left: 5px;
+  margin-right: 0px;
+`;
+
+const formText = css`
+  position: relative;
+`;
+
+const pagePopUpBoxInput = css`
+  width: 330px;
+  height: 40px;
+  border-radius: 20px;
+  background-color: white;
+  font-size: 15px;
+  box-sizing: border-box;
+  border: none;
+  text-indent: 15px;
+  margin-right: 50px;
+  margin-top: 40px;
+  box-shadow: 0 3px 30px 0 rgba(0, 0, 0, 0.07);
+  :focus {
+    box-shadow: 0 3px 30px 0 rgba(0, 0, 0, 0.18);
+  }
+`;
+
+const fixedText = css`
+  position: absolute;
+  left: 15px;
+  top: 50px;
+  color: gray;
+  z-index: 9;
+`;
+
+const formWidth = css`
+  width: 100%;
+  height: 85%;
+`;
+
+const AddButtonStyle = css`
+  position: absolute;
+  left: 650px;
+  top: 480px;
+  width: 15%;
+  height: 50px;
+  border-radius: 30px;
+  border: 0;
+  font-weight: bold;
+  font-size: 20px;
+`;
+
+const pagePopUpBoxCloseButton = css`
+  width: 3%;
+  height: 30px;
+  border-radius: 30px;
+  border: 0;
+  position: absolute;
+  left: 95%;
+  top: 3%;
+  font-size: 15px;
+  margin-bottom: 10px;
+  background-color: lightgray;
+  &:hover {
+    background-color: darkgray;
+  }
+`;
+
+const LoginButtonColor = css`
+  color: rgba(255, 255, 255, 1);
+  background-color: rgba(239, 100, 8, 1);
+  &:hover {
+    background-color: rgba(300, 100, 8, 1);
+  }
+`;
+
+const HorizontalLayout = css`
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  text-align: center;
+`;
+
+const PreviewWidth = css`
+  width: 50%;
+`;
+
+const InputWidth = css`
+  width: 50%;
+`;
+
+const SelectSinglePagesLayout = css`
+  margin-right: 50px;
+  margin-top: 40px;
+  width: 330px;
+  height: 210px;
+`;
diff --git a/src/components/MyPage/BindingPreview.jsx b/src/components/MyPage/BindingPreview.jsx
@@ -0,0 +1,12 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+const BindingPreview = () => {
+  return <div css={[previewLayout]}>미리보기 영역</div>;
+};
+
+export default BindingPreview;
+
+const previewLayout = css`
+  height: 100%;
+`;
diff --git a/src/components/MyPage/BindingSelectSinglePages.jsx b/src/components/MyPage/BindingSelectSinglePages.jsx
@@ -0,0 +1,64 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import BindingSinglePageBlock from './BindingSinglePageBlock';
+
+const BindingSelectSinglePages = ({ selectedPages, setSelectedPages }) => {
+  const { singlePages } = useSelector((state) => ({
+    singlePages: state.info.singlePages,
+  }));
+  const singlePagesInfo = singlePages.data;
+
+  function handleSelect(selectedPageUrl) {
+    let newSinglePageList;
+    if (
+      selectedPages.filter(
+        (element) => element.singlePageUrl === selectedPageUrl
+      ).length === 0
+    ) {
+      newSinglePageList = [
+        ...selectedPages,
+        { singlePageUrl: selectedPageUrl },
+      ];
+    } else {
+      newSinglePageList = selectedPages.filter(
+        (element) => element.singlePageUrl !== selectedPageUrl
+      );
+    }
+    setSelectedPages(newSinglePageList);
+  }
+
+  return singlePages.data.length !== 0 ? (
+    <div css={siteViewBZone}>
+      {singlePagesInfo.map((page, index) => {
+        const semiIndex = index + 1;
+        return (
+          <div key={semiIndex}>
+            <BindingSinglePageBlock data={page} handleSelect={handleSelect} />
+          </div>
+        );
+      })}
+    </div>
+  ) : (
+    <div css={[noneSinglePageMsg]}>싱글 페이지가 없습니다!</div>
+  );
+};
+
+export default BindingSelectSinglePages;
+
+const siteViewBZone = css`
+  display: flex;
+  height: 100%;
+  justify-content: flex-start;
+  align-items: flex-start;
+  overflow: scroll;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  background-color: white;
+`;
+
+const noneSinglePageMsg = css`
+  display: block;
+  margin-top: 10px;
+`;
diff --git a/src/components/MyPage/BindingSinglePageBlock.jsx b/src/components/MyPage/BindingSinglePageBlock.jsx
@@ -0,0 +1,46 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import React from 'react';
+
+const BindingSinglePageBlock = (props) => {
+  const thumbnailUrl =
+    props.data.thumbnail !== ''
+      ? props.data.thumbnail
+      : 'https://mblogthumb-phinf.pstatic.net/MjAxNzA2MjNfNDEg/MDAxNDk4MjExMTE1OTYy.RGjgC51-8rYSISInewpiERaIWLuYkk6h8-DHImZWlNog.6nJ1cYNwJuFRBYbzuXIlfFC2vAz9SSYihxEpnVX2ttUg.PNG.kkp0079/1.PNG?type=w800';
+
+  return (
+    <div
+      css={[singlePageBox]}
+      onClick={() => props.handleSelect(props.data.url)}
+      onKeyDown={() => props.handleSelect(props.data.url)}
+    >
+      <img css={[thumbnailImg]} src={thumbnailUrl} />
+      <div css={[singlePageTitle]}>{props.data.title}</div>
+    </div>
+  );
+};
+
+export default BindingSinglePageBlock;
+
+const thumbnailImg = css`
+  width: 100px;
+  height: 80%;
+  border-radius: 20px 20px 0px 0px;
+  object-fit: cover;
+`;
+
+const singlePageBox = css`
+  width: 100px;
+  height: 160px;
+  border: 10px black;
+  border-radius: 20px;
+  margin-right: 5px;
+`;
+
+const singlePageTitle = css`
+  font-size: 15px;
+  margin: auto;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  overflow: hidden;
+`;