Merge branch 'FE/main' into FE/feature/visit/changeSnowBalls

front/src/App.tsx

@@ -2,7 +2,7 @@ import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';
 import styled, { ThemeProvider } from 'styled-components';
 import GlobalStyles from './GlobalStyles';
 import { theme } from './utils';
-import { IsLogin } from './router';
+import { IsLogin, IsSnowballData } from './router';
 import * as Pages from './pages';
 import { Song } from './components';
 import { SnowBallProvider } from './pages/Visit/SnowBallProvider';
@@ -11,15 +11,10 @@ import { DecoProvider } from './pages/Visit/Deco/DecoProvider';
 
 const Outer = styled.div`
   position: relative;
-
   left: 50%;
   transform: translateX(-50%);
-
   width: 100%;
   height: 100%;
-  /* ::-webkit-scrollbar {
-    display: none;
-  } */
 
   @media (min-width: ${theme.size['--desktop-min-width']}) {
     width: ${theme.size['--desktop-width']};
@@ -56,9 +51,9 @@ const App = () => {
               <Route
                 path="/make"
                 element={
-                  <IsLogin>
+                  <IsSnowballData>
                     <Outlet />
-                  </IsLogin>
+                  </IsSnowballData>
                 }
               >
                 <Route path="" element={<Pages.Nickname />} />

front/src/components/Msg/ListMsg.tsx

@@ -0,0 +1,104 @@
+import styled from 'styled-components';
+import axios from 'axios';
+
+interface MsgProps {
+  color: string;
+  content: string;
+  sender: string;
+  to: string;
+  messageId: number;
+}
+
+interface MsgColor {
+  color: string;
+}
+
+const StyledLetterBox = styled.div<MsgColor>`
+  width: 80%;
+  display: flex;
+  align-self: center;
+  font: ${props => props.theme.font['--normal-introduce-font']};
+  text-shadow: -1px 0px black, 0px 1px black, 1px 0px black, 0px -1px black;
+  flex-direction: column;
+  border-radius: 1rem;
+  padding: 1.5rem;
+  gap: 1rem;
+  background-color: ${props => props.color + '80'};
+  margin: 1rem;
+`;
+
+const StyledLetterPerson = styled.div`
+  display: flex;
+  justify-content: space-between;
+  color: white;
+`;
+
+const StyledTo = styled.span`
+  color: ${props => props.theme.colors['--nick-name']};
+`;
+
+const StyledLetterContent = styled.div`
+  white-space: pre;
+  text-align: center;
+  color: white;
+`;
+
+const StyledFromBox = styled(StyledLetterPerson)`
+  flex-direction: row-reverse;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const StyledFrom = styled.span`
+  text-align: right;
+  color: ${props => props.theme.colors['--primary-redp-variant']};
+`;
+
+
+const StyledFromInput = styled.input`
+  width: 55%;
+  outline: none;
+  border: none;
+  background-color: transparent;
+  color: ${props => props.theme.colors['--nick-name']};
+  text-shadow: -1px 0px black, 0px 1px black, 1px 0px black, 0px -1px black;
+  font-size: 1rem;
+  font-weight: 700;
+  pointer-events: stroke;
+`;
+
+const StyledToWrap = styled.div``;
+
+const StyledDeleteButton = styled.button`
+`;
+
+const ListMsg = (props: MsgProps): JSX.Element => {
+
+  const deleteMsg = () => {
+    axios.delete(`/api/message/${props.messageId}`, {
+      withCredentials: true
+    }).then(() => {
+      // 리렌더링 구현해야함
+    });
+  };
+
+  return (
+    <StyledLetterBox color={props.color}>
+      <StyledLetterPerson>
+        <StyledToWrap>To. <StyledTo>{props.to}</StyledTo></StyledToWrap>
+        <StyledDeleteButton onClick={deleteMsg}>X</StyledDeleteButton>
+      </StyledLetterPerson>
+
+      <StyledLetterContent>{props.content}</StyledLetterContent>
+
+      <StyledFromBox>
+        <StyledFrom>
+          From.
+          <StyledFromInput value={props.sender} disabled />
+        </StyledFrom>
+      </StyledFromBox>
+    </StyledLetterBox>
+  );
+};
+
+export default ListMsg;

front/src/components/Msg/Msg.tsx

@@ -106,7 +106,7 @@ const StyledFromInput = styled.input`
   pointer-events: stroke;
 `;
 
-const Msg = (props: MsgProps) => {
+const Msg = (props: MsgProps): JSX.Element => {
   const [wordCount, setWordCount] = useState(0);
   const { content, sender, setContent, setSender } = useContext(DecoContext);
   const maxWordCount = 500;

front/src/components/Msg/index.tsx

@@ -1 +1,2 @@
 export { default as Msg } from './Msg';
+export { default as ListMsg } from './ListMsg';

front/src/components/SnowGlobeCanvas/SnowGlobeCanvas.tsx

@@ -13,6 +13,7 @@ const SnowGlobeCanvas = () => {
   const glassRadius = 7;
   const glassPosition = new THREE.Vector3(0, glassRadius / 2, 0);
   const { snowBallData } = useContext(SnowBallContext);
+
   const snows = Array.from({ length: 100 }, (_, i) => (
     <Models.Snow
       key={i}

front/src/components/index.tsx

@@ -5,4 +5,5 @@ export { InputSnowball } from './InputSnowball';
 export { HeaderText } from './HeaderText';
 export { Prev } from './Prev';
 export { Msg } from './Msg';
+export { ListMsg } from './Msg';
 export { UIContainer } from './UIContainer';

front/src/pages/Main/ListMsgs.tsx

@@ -0,0 +1,77 @@
+import styled from 'styled-components';
+import { ListMsg } from '../../components';
+import { Prev } from '../../components';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { MSG_COLOR } from '../../constants/deco';
+
+interface ListMsgProps {
+  set: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const StyledList = styled.div`
+  pointer-events: auto;
+  position: absolute;
+  width: 100%;
+  top: 10%;
+  height: 85%;
+  overflow-y: scroll;
+`;
+
+const StyledListWrap = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+`;
+
+interface MsgResponse {
+  user_id: number;
+  snowball_id: number;
+  location: number;
+  content: string;
+  sender: string;
+  to: string;
+  created: string;
+  decoration_id: number;
+  decoration_color: string;
+  id: number;
+  is_deleted: boolean;
+  opened: string;
+  letter_id: number;
+};
+
+const ListMsgs = (props: ListMsgProps) => {
+  const [messages, setMessages] = useState<Array<MsgResponse>>([]);
+
+  useEffect(() => {
+    axios.get('/api/message').then(res => {
+      console.log(res.data);
+      setMessages(res.data);
+    });
+  }, []);
+
+  return (
+    <>
+      <Prev set={props.set} />
+
+      <StyledList>
+        <StyledListWrap>
+          {messages.map((msg, idx) => {
+            return (
+              <ListMsg
+                key={idx}
+                color={MSG_COLOR[msg.letter_id].color}
+                content={msg.content}
+                sender={msg.sender}
+                to={msg.to} // 요게 지금 없음
+                messageId={msg.id}
+              />
+            );
+          })}
+        </StyledListWrap>
+      </StyledList>
+    </>
+  );
+};
+
+export default ListMsgs;

front/src/pages/Main/MainButtonBox.tsx

@@ -3,7 +3,8 @@ import styled from 'styled-components';
 import { Container } from '../../utils';
 import { HeaderText } from '../../components';
 import MenuModal from './MenuModal';
-import ListMsg from './ListMsg';
+import ListMsgs from './ListMsgs';
+import axios from 'axios';
 
 const StyledMenu = styled.img`
   position: fixed;
@@ -67,7 +68,26 @@ const MainButtonBox = (props: MainButtonBoxProps) => {
   const [menuModal, setMenuModal] = useState(false);
   const [list, setList] = useState(false);
   const [screen, setScreen] = useState(false);
-  const [shareLink, setShareLink] = useState(false);
+
+  const shareLink = () => {
+    axios.get('/api/user', { withCredentials: true }).then(res => {
+      const user = res.data.user.auth_id;
+
+      const url = `https://www.mysnowball.kr/visit/${user}`;
+      if (navigator.share === undefined) {
+        navigator.clipboard.writeText(url);
+      } else {
+        navigator.share({
+          title: '내 마음 속 스노우볼',
+          text: '내 스노우 볼을 꾸며줘 !',
+          url: url
+        });
+      }
+
+    });
+
+
+  };
 
   return (
     <>
@@ -102,11 +122,10 @@ const MainButtonBox = (props: MainButtonBoxProps) => {
           <StyledShareLink
             ref={shareLinkRef}
             src={'/icons/shareLink.svg'}
-            onClick={() => setShareLink(true)}
+            onClick={shareLink}
           />
-          {shareLink ? <div>shareLink</div> : null}
 
-          {list ? <ListMsg set={setList} /> : null}
+          {list ? <ListMsgs set={setList} /> : null}
         </>
       ) : null}
     </>

front/src/pages/Main/MenuModal.tsx

@@ -41,8 +41,8 @@ const StyledClosed = styled(StyledSection)`
 `;
 
 const Logout = (navigate: NavigateFunction) => {
-  // sessionStorage 등 정리, 로그아웃 절차 진행
-
+  // 현재 가지고 있는 쿠키값 모두 지우기
+  // logout api 호출
   navigate('/');
 };