refactor: refactoring pretter

boostcampwm2023 · Dec 7, 2023 · 06fded2 · 06fded2
1 parent c40487a
commit 06fded2
Show file tree

Hide file tree

Showing 18 changed files with 299 additions and 222 deletions.
diff --git a/front/index.html b/front/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="스노우볼 속 내마음" />
+    <meta property="og:title" content="스노우볼 속 내 마음" />
     <meta property="og:url" content="https://mysnowball.kr" />
     <meta property="og:image" content="/img/Thumbnail.png" />
     <meta property="og:image:width" content="400" />

diff --git a/front/src/App.tsx b/front/src/App.tsx
@@ -8,6 +8,7 @@ import { HasSnowballData } from './router';
 import { SnowBallProvider } from '@pages/Visit/SnowBallProvider';
 import { MessageProvider } from '@pages/Visit/MessageProvider';
 import { DecoProvider } from '@pages/Visit/Deco/DecoProvider';
+import { MessageListProvider } from '@pages/Visit/MessageListProvider';
 
 const Outer = styled.div`
   position: relative;
@@ -38,7 +39,9 @@ const App = () => {
                   <DecoProvider>
                     <MessageProvider>
                       <SnowBallProvider>
-                        <Outlet />
+                        <MessageListProvider>
+                          <Outlet />
+                        </MessageListProvider>
                       </SnowBallProvider>
                     </MessageProvider>
                   </DecoProvider>
@@ -66,7 +69,9 @@ const App = () => {
                 element={
                   <MessageProvider>
                     <SnowBallProvider>
-                      <Pages.Main />
+                      <MessageListProvider>
+                        <Pages.Main />
+                      </MessageListProvider>
                     </SnowBallProvider>
                   </MessageProvider>
                 }

diff --git a/front/src/components/Modal/Modal.tsx b/front/src/components/Modal/Modal.tsx
@@ -11,7 +11,7 @@ import {
 } from '@pages/Visit/SnowBallProvider';
 
 interface DeleteModalProps {
-  message : number;
+  message: number;
 }
 
 const Button = styled.button`
@@ -79,9 +79,9 @@ const ModalButton = styled.div`
 `;
 
 const Divider = styled.div`
-    height: 100%;
-    width: 1rem;
-    color: white;
+  height: 100%;
+  width: 1rem;
+  color: white;
 `;
 
 const MButton = styled.button`
@@ -94,7 +94,11 @@ const DeleteModal = (props: DeleteModalProps) => {
 
   useEffect(() => {
     const closeModal = (e: MouseEvent) => {
-      if (isModalOpened && modalRef.current && !modalRef.current.contains(e.target as Node)) {
+      if (
+        isModalOpened &&
+        modalRef.current &&
+        !modalRef.current.contains(e.target as Node)
+      ) {
         setIsModalOpened(false);
       }
     };
@@ -143,9 +147,7 @@ const DeleteModal = (props: DeleteModalProps) => {
   return (
     <>
       <Button onClick={() => setIsModalOpened(true)}>
-        <Text>
-          Delete
-        </Text>
+        <Text>Delete</Text>
       </Button>
 
       {isModalOpened &&
@@ -156,12 +158,14 @@ const DeleteModal = (props: DeleteModalProps) => {
               <SubTitle>삭제된 편지는 복구할 수 없어요 😭 </SubTitle>
               <ButtonWrap>
                 <ModalButton>
-              <MButton onClick={deleteMsg}>삭제</MButton> 
-              </ModalButton>
-              <Divider>|</Divider>
-              <ModalButton>
-              <MButton onClick={() => setIsModalOpened(false)}>취소</MButton>
-              </ModalButton>
+                  <MButton onClick={deleteMsg}>삭제</MButton>
+                </ModalButton>
+                <Divider>|</Divider>
+                <ModalButton>
+                  <MButton onClick={() => setIsModalOpened(false)}>
+                    취소
+                  </MButton>
+                </ModalButton>
               </ButtonWrap>
             </Modal>
           </ModalBackground>,
@@ -171,4 +175,4 @@ const DeleteModal = (props: DeleteModalProps) => {
   );
 };
 
-export default DeleteModal;
+export default DeleteModal;
diff --git a/front/src/components/Msg/ListMsg.tsx b/front/src/components/Msg/ListMsg.tsx
@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 import { DeleteModal } from '@components';
 
-
 interface MsgProps {
   color: string;
   content: string;
@@ -69,17 +68,14 @@ const StyledFromInput = styled.input`
 
 const StyledToWrap = styled.div``;
 
-
-
 const ListMsg = (props: MsgProps): JSX.Element => {
-
   return (
     <StyledLetterBox color={props.color}>
       <StyledLetterPerson>
         <StyledToWrap>
           To. <StyledTo>{props.to}</StyledTo>
         </StyledToWrap>
-        <DeleteModal message={props.messageId}/>
+        <DeleteModal message={props.messageId} />
       </StyledLetterPerson>
 
       <StyledLetterContent>{props.content}</StyledLetterContent>

diff --git a/front/src/components/Msg/Msg.tsx b/front/src/components/Msg/Msg.tsx
@@ -1,10 +1,10 @@
 import { useContext, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useParams } from 'react-router-dom';
 import axios from 'axios';
 import styled from 'styled-components';
 import { DecoContext } from '@pages/Visit/Deco/DecoProvider';
 import { MessageContext } from '@pages/Visit/MessageProvider';
-import { createPortal } from 'react-dom';
 
 interface MsgProps {
   color: string;
@@ -20,7 +20,7 @@ interface MsgColor {
 }
 
 const StyledLetterBox = styled.div<MsgColor>`
-flex: 0 0 auto;
+  flex: 0 0 auto;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -116,6 +116,7 @@ const StyledFromInput = styled.input`
   color: ${props => props.theme.colors['--nick-name']};
   text-shadow: ${props => props.theme.font['--text-shadow']};
   font-size: 1rem;
+
   font-weight: 700;
   pointer-events: stroke;
 `;
@@ -140,13 +141,13 @@ const MsgBackground = styled.div`
   display: flex;
   flex-direction: column;
   background-color: rgba(0, 0, 0, 0.5);
-  overflow: scroll  ;
+  overflow: scroll;
 `;
 
 const DecoBackground = styled.div`
   width: 100%;
   padding: 3rem;
-`
+`;
 
 const Msg = (props: MsgProps): JSX.Element => {
   const [wordCount, setWordCount] = useState(0);
@@ -187,72 +188,73 @@ const Msg = (props: MsgProps): JSX.Element => {
 
   return (
     <>
-    { !props.isInput && !props.isDeco ? (
-      createPortal(
-        <MsgBackground onClick={removeMsg}>
-          <StyledLetterBox color={props.color} onClick={stopEvent}>
-            {props.isInput ? (
-              <StyledLetterInput>
-                To. <StyledTo>{props.to}</StyledTo>
-              </StyledLetterInput>
-            ) : (
-              <StyledLetterPerson>
-                <StyledToWrap>
+      {!props.isInput && !props.isDeco ? (
+        createPortal(
+          <MsgBackground onClick={removeMsg}>
+            <StyledLetterBox color={props.color} onClick={stopEvent}>
+              {props.isInput ? (
+                <StyledLetterInput>
                   To. <StyledTo>{props.to}</StyledTo>
-                </StyledToWrap>
-                {props.isDeco ? null : (
-                  <StyledDeleteButton onClick={removeMsg}>X</StyledDeleteButton>
-                )}
-              </StyledLetterPerson>
-            )}
-            {props.isInput ? (
-              <StyledInputBox>
-                <StyledTextArea
-                  rows={1}
-                  value={content}
-                  onChange={wordLength}
-                  placeholder="편지를 작성해주세요."
-                />
-              </StyledInputBox>
-            ) : (
-              <StyledLetterContent>
-                {props.content.toString()}
-              </StyledLetterContent>
-            )}
-
-            <StyledFromBox>
-              <StyledFrom>
-                From.
-                {props.isInput ? (
-                  <StyledFromInput
-                    value={sender}
-                    placeholder="이름입력"
-                    onFocus={e => {
-                      e.target.value = '';
-                    }}
-                    onChange={e => {
-                      if (e.target.value.length > 8) {
-                        e.target.value = e.target.value.substring(0, 8);
-                      }
-                      setSender(e.target.value);
-                    }}
+                </StyledLetterInput>
+              ) : (
+                <StyledLetterPerson>
+                  <StyledToWrap>
+                    To. <StyledTo>{props.to}</StyledTo>
+                  </StyledToWrap>
+                  {props.isDeco ? null : (
+                    <StyledDeleteButton onClick={removeMsg}>
+                      X
+                    </StyledDeleteButton>
+                  )}
+                </StyledLetterPerson>
+              )}
+              {props.isInput ? (
+                <StyledInputBox>
+                  <StyledTextArea
+                    rows={1}
+                    value={content}
+                    onChange={wordLength}
+                    placeholder="편지를 작성해주세요."
                   />
-                ) : (
-                  <StyledFromInput value={props.sender} disabled />
-                )}
-              </StyledFrom>
-
-              {props.isInput && props.sender === '익명' ? (
-                `${wordCount} / 500`
-              ) : null
-              }
-            </StyledFromBox>
-          </StyledLetterBox>
-        </MsgBackground>,
-        document.body
-      )
-    ) : (
-      <DecoBackground>
+                </StyledInputBox>
+              ) : (
+                <StyledLetterContent>
+                  {props.content.toString()}
+                </StyledLetterContent>
+              )}
+
+              <StyledFromBox>
+                <StyledFrom>
+                  From.
+                  {props.isInput ? (
+                    <StyledFromInput
+                      value={sender}
+                      placeholder="이름입력"
+                      onFocus={e => {
+                        e.target.value = '';
+                      }}
+                      onChange={e => {
+                        if (e.target.value.length > 8) {
+                          e.target.value = e.target.value.substring(0, 8);
+                        }
+                        setSender(e.target.value);
+                      }}
+                    />
+                  ) : (
+                    <StyledFromInput value={props.sender} disabled />
+                  )}
+                </StyledFrom>
+
+                {props.isInput && props.sender === '익명'
+                  ? `${wordCount} / 500`
+                  : null}
+              </StyledFromBox>
+            </StyledLetterBox>
+          </MsgBackground>,
+          document.body
+        )
+      ) : (
+        <DecoBackground>
           <StyledLetterBox color={props.color}>
             {props.isInput ? (
               <StyledLetterInput>
@@ -305,15 +307,13 @@ const Msg = (props: MsgProps): JSX.Element => {
                 )}
               </StyledFrom>
 
-              {props.isInput && props.sender === '익명' ? (
-                `${wordCount} / 500`
-              ) : null
-              }
+              {props.isInput && props.sender === '익명'
+                ? `${wordCount} / 500`
+                : null}
             </StyledFromBox>
           </StyledLetterBox>
-          </DecoBackground>
-    ) }
-
+        </DecoBackground>
+      )}
     </>
   );
 };

diff --git a/front/src/components/SnowGlobeCanvas/Decos.tsx b/front/src/components/SnowGlobeCanvas/Decos.tsx
@@ -0,0 +1,25 @@
+import { useContext } from 'react';
+import { getDecoPoisition } from '@utils';
+import * as Models from './models';
+import { MessageListContext } from '@pages/Visit/MessageListProvider';
+
+const Decos = () => {
+  const { messageList } = useContext(MessageListContext);
+  console.log(messageList);
+  const decos = messageList.map((message, index) => (
+    <Models.Deco
+      key={index}
+      id={message.decoration_id}
+      scale={1}
+      position={getDecoPoisition(message.location)}
+      message={message.content ?? '비공개메시지입니다'}
+      color={message.decoration_color}
+      sender={message.sender ?? '비공개'}
+      letterID={message.letter_id ?? 0}
+      messageID={message.id}
+      isOpened={message.opened !== null}
+    />
+  ));
+  return <>{decos}</>;
+};
+export default Decos;