fix: build error

boostcampwm2023 · Dec 11, 2023 · 9699ef5 · 9699ef5
1 parent 19ffd28
commit 9699ef5
Show file tree

Hide file tree

Showing 4 changed files with 187 additions and 14 deletions.
diff --git a/front/src/pages/Main/ListMsgs.tsx b/front/src/pages/Main/ListMsgs.tsx
@@ -82,7 +82,6 @@ const ListMsgs = (props: ListMsgProps) => {
       .then(res => {
         if (res.data.length !== 0) setMessages(res.data);
         else if (res.data.length === 0) {
-          console.log('메세지가 없습니다.');
           setToast(true);
           setTimeout(() => {
             props.set(false);

diff --git a/front/src/pages/Main/LockModal.tsx b/front/src/pages/Main/LockModal.tsx
@@ -0,0 +1,161 @@
+import React, { useRef, useEffect, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+import { theme } from '@utils';
+import {
+  SnowBallContext,
+} from '@pages/Visit/SnowBallProvider';
+
+
+
+
+interface LockModalProps {
+  flag : boolean;
+  set : React.Dispatch<React.SetStateAction<boolean>>;
+  toast : boolean;
+  setToast : React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+
+const Modal = styled.div`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  background-color: ${theme.colors['--primary-redp-variant']};
+  color: white;
+  border-radius: 1rem;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+`;
+
+const ModalBackground = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+
+  width: 100%;
+  height: 100%;
+
+  background-color: rgba(0, 0, 0, 0.5);
+`;
+
+const Title = styled.div`
+  font: ${theme.font['--normal-title-font']};
+`;
+
+const SubTitle = styled.div`
+  font: ${theme.font['--normal-introduce-font']};
+`;
+
+const ButtonWrap = styled.div`
+  display: flex;
+  width: 100%;
+  border-top: 1px solid white;
+  padding-top: 1rem;
+`;
+
+const ModalButton = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+`;
+
+const Divider = styled.div`
+  height: 100%;
+  width: 1rem;
+  color: white;
+`;
+
+const MButton = styled.button`
+  font: ${theme.font['--normal-button-font']};
+`;
+
+
+const LockModal = (props: LockModalProps) => {
+
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const closeModal = (e: MouseEvent) => {
+      if (
+        props.flag &&
+        modalRef.current &&
+        !modalRef.current.contains(e.target as Node)
+      ) {
+        props.set(false);
+      }
+    };
+
+    // 이벤트 리스너를 document 전체에 붙여줌
+    document.addEventListener('mousedown', closeModal);
+
+    return () => {
+      document.removeEventListener('mousedown', closeModal);
+    };
+  }, []);
+
+  const { changePrivate, snowBallData } = useContext(SnowBallContext);
+  const privateFlag = snowBallData.is_message_private;
+
+
+  const setPrivate = () => {
+    props.set(false);
+    changePrivate().then(() => {
+      props.setToast(true);
+      setTimeout(() => {
+        props.setToast(false);
+      }, 1500);
+    });
+  };
+
+  const stopEvent = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <>
+      {props.flag &&
+        createPortal(
+          <ModalBackground onClick={() => props.set(false)}>
+            <Modal onClick={stopEvent}>
+              { privateFlag ?
+                <> 
+                <Title>해당 스노우볼을 공개 할까요 ?</Title>
+                <SubTitle>공개한 스노우볼의 메세지는 방문자들도 볼 수 있어요.</SubTitle>
+                </>
+              : <>
+              <Title>해당 스노우볼을 비공개 할까요 ?</Title>
+              <SubTitle>비공개한 스노우볼의 메세지는 방문자에게 보이지 않아요.</SubTitle>
+              </>
+              }
+
+              <ButtonWrap>
+                <ModalButton>
+                  <MButton onClick={setPrivate}>{privateFlag ? '공개' : '비공개'}</MButton>
+                </ModalButton>
+                <Divider>|</Divider>
+                <ModalButton>
+                  <MButton onClick={() => props.set(false)}>
+                    닫기
+                  </MButton>
+                </ModalButton>
+              </ButtonWrap>
+            </Modal>
+          </ModalBackground>,
+          document.body
+        )}
+    </>
+  );
+};
+
+export default LockModal;
+
+
+
diff --git a/front/src/pages/Main/MainButtonBox.tsx b/front/src/pages/Main/MainButtonBox.tsx
@@ -5,6 +5,8 @@ import { HeaderText } from '@components';
 import MenuModal from './MenuModal';
 import ListMsgs from './ListMsgs';
 import { SnowBallContext } from '@pages/Visit/SnowBallProvider';
+import LockModal from './LockModal';
+
 
 interface MainButtonBoxProps {
   leftArrow: React.RefObject<HTMLImageElement>;
@@ -21,6 +23,8 @@ const StyledMenu = styled.img`
 const MessageCount = styled.span`
   font: ${props => props.theme.font['--normal-main-header-font']};
   color: white;
+  display: flex;
+  gap: 0.5rem;
 `;
 
 const PrivateButton = styled.img`
@@ -98,11 +102,12 @@ const MainButtonBox = (props: MainButtonBoxProps) => {
   const menuRef = useRef<HTMLImageElement>(null);
   const screenRef = useRef<HTMLImageElement>(null);
   const shareLinkRef = useRef<HTMLImageElement>(null);
-  const { snowBallData, changePrivate } = useContext(SnowBallContext);
+  const { snowBallData,  } = useContext(SnowBallContext);
   const [menuModal, setMenuModal] = useState(false);
   const [list, setList] = useState(false);
   const [screen, setScreen] = useState(false);
   const [toast, setToast] = useState(false);
+  const [ modalToast, setModalToast ] = useState(false);
   const { userData } = useContext(SnowBallContext);
 
   const shareLink = () => {
@@ -136,18 +141,25 @@ const MainButtonBox = (props: MainButtonBoxProps) => {
     }
   };
 
+  const [isModalOpened, setIsModalOpened] = useState(false);
+
   return (
     <>
       {!screen ? (
         <>
+          {isModalOpened ? <LockModal toast={modalToast} setToast={setModalToast} flag={isModalOpened} set={setIsModalOpened}/> : null}
           <Container ref={headerRef}>
             <HeaderText Ref={null} userName={userData.nickname} />
-            <MessageCount>총 {userData.message_count}개의 메시지</MessageCount>
+            <MessageCount><img style={{pointerEvents : 'none'}} src="/icons/letter.svg"/>총 {userData.message_count}개의 메시지</MessageCount>
+            { modalToast ? <div style={{width : '2rem', height : '2rem'}}></div> : // 여기 애니메이션 효과 넣어야해
+            <>
             {snowBallData.is_message_private ? (
-              <PrivateButton onClick={changePrivate} src="/icons/lock.svg" />
+              <PrivateButton onClick={() => setIsModalOpened(true)} src="/icons/lock.svg" />
             ) : (
-              <PrivateButton onClick={changePrivate} src="/icons/unlock.svg" />
-            )}
+              <PrivateButton onClick={() => setIsModalOpened(true)} src="/icons/unlock.svg" />
+            )} 
+            </>
+            }
           </Container>
 
           {list ? null : (
@@ -183,6 +195,7 @@ const MainButtonBox = (props: MainButtonBoxProps) => {
 
           {list ? <ListMsgs set={setList} /> : null}
           {toast ? <ToastMsg>링크가 복사되었습니다.</ToastMsg> : null}
+          {modalToast ? <ToastMsg>{snowBallData.is_message_private ? '메세지가 비공개 되었습니다.' : '메세지가 공개 되었습니다.'}</ToastMsg> : null}
         </>
       ) : null}
     </>

diff --git a/front/src/pages/Visit/SnowBallProvider.tsx b/front/src/pages/Visit/SnowBallProvider.tsx
@@ -28,15 +28,15 @@ interface SnowBallContextType {
   setSnowBallData: React.Dispatch<React.SetStateAction<SnowBallData>>;
   userData: UserData;
   setUserData: React.Dispatch<React.SetStateAction<UserData>>;
-  changePrivate: () => void;
+  changePrivate: () => Promise<void>;
 }
 
 const SnowBallContext = createContext<SnowBallContextType>({
   snowBallData: mockData.snowball_data as SnowBallData,
   setSnowBallData: () => {},
   userData: mockData.user_data,
   setUserData: () => {},
-  changePrivate: () => {}
+  changePrivate: () => Promise.resolve()
 });
 
 const SnowBallProvider: React.FC<{ children: React.ReactNode }> = ({
@@ -46,17 +46,17 @@ const SnowBallProvider: React.FC<{ children: React.ReactNode }> = ({
     mockData.snowball_data as SnowBallData
   );
   const [userData, setUserData] = useState<UserData>(mockData.user_data);
-  const changePrivate = () => {
+  const changePrivate = async () => {
     const newData = {
       title: snowBallData.title,
       is_message_private: !snowBallData.is_message_private
     };
-    axios.put(`/api/snowball/${snowBallData.id}`, newData).then(res => {
-      const resData = Object.assign({}, snowBallData);
-      resData.is_message_private = res.data.is_message_private;
-      setSnowBallData(resData);
-    });
+    const res = await axios.put(`/api/snowball/${snowBallData.id}`, newData);
+    const resData = Object.assign({}, snowBallData);
+    resData.is_message_private = res.data.is_message_private;
+    setSnowBallData(resData);
   };
+
   return (
     <SnowBallContext.Provider
       value={{