Merge branch 'main' into feature/#12-api-연동-작업

2023-AHEUNGTHON · Nov 25, 2023 · 5baa547 · 5baa547
2 parents 92f8ff3 + 5d7142f
commit 5baa547
Show file tree

Hide file tree

Showing 19 changed files with 304 additions and 163 deletions.
diff --git a/index.html b/index.html
@@ -1,13 +1,42 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Mind Letters</title>
-    </head>
-    <body>
-        <div id="root"></div>
-        <script type="module" src="/src/main.jsx"></script>
-    </body>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/mindletter.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mind Letter</title>
+    <meta name="description" content="당신의 편지 나에게로, 마인드 레터" />
+    <meta property="og:title" content="당신의 편지 나에게로, 마인드 레터" />
+    <meta
+      property="og:description"
+      content="당신의 편지 나에게로, 마인드 레터"
+    />
+    <meta
+      property="og:image"
+      content="https://velog.velcdn.com/images/seochan99/post/5f25ac82-c58c-4999-bc4a-b5b85f8a90d3/image.jpeg"
+    />
+    <meta property="og:image:alt" content="Moin Letters Logo" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://mind-letter.site/" />
+
+    <!-- GA -->
+    <!-- Google tag (gtag.js) -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-69GRNWX2QN"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "G-69GRNWX2QN");
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
 </html>
diff --git a/public/mindletter.svg b/public/mindletter.svg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/apis/axios.js b/src/apis/axios.js
@@ -0,0 +1,14 @@
+import axios from "axios";
+
+const { VITE_APP_SERVER_PORT } = import.meta.env;
+
+const instance = axios.create({
+  baseURL: VITE_APP_SERVER_PORT,
+
+  withCredentials: true,
+  headers: {
+    "Content-Type": "application/json"
+  }
+});
+
+export default instance;
diff --git a/src/assets/decoLib/shape1/White.png → src/assets/decoLib/shape1/white.png b/src/assets/decoLib/shape1/White.png → src/assets/decoLib/shape1/white.png
diff --git a/src/assets/img/envelop/green.png b/src/assets/img/envelop/green.png
diff --git a/src/assets/img/envelop/purple.png b/src/assets/img/envelop/purple.png
diff --git a/src/assets/img/envelop/red.png b/src/assets/img/envelop/red.png
diff --git a/src/assets/img/envelop/yellow.png b/src/assets/img/envelop/yellow.png
diff --git a/src/pages/Deco/Deco.jsx b/src/pages/Deco/Deco.jsx
@@ -43,7 +43,7 @@ import shape1pink from "../../assets/decoLib/shape1/pink.png";
 import shape1purple from "../../assets/decoLib/shape1/purple.png";
 import shape1red from "../../assets/decoLib/shape1/red.png";
 import shape1skyblue from "../../assets/decoLib/shape1/sky-blue.png";
-import shape1white from "../../assets/decoLib/shape1/White.png";
+import shape1white from "../../assets/decoLib/shape1/white.png";
 import shape1yellow from "../../assets/decoLib/shape1/yellow.png";
 
 import shape2beige from "../../assets/decoLib/shape2/beige.png";
@@ -59,7 +59,7 @@ import shape2pink from "../../assets/decoLib/shape2/pink.png";
 import shape2purple from "../../assets/decoLib/shape2/purple.png";
 import shape2red from "../../assets/decoLib/shape2/red.png";
 import shape2skyblue from "../../assets/decoLib/shape2/sky-blue.png";
-import shape2white from "../../assets/decoLib/shape2/White.png";
+import shape2white from "../../assets/decoLib/shape2/white.png";
 import shape2yellow from "../../assets/decoLib/shape2/yellow.png";
 
 import shape3beige from "../../assets/decoLib/shape3/beige.png";
@@ -75,7 +75,7 @@ import shape3pink from "../../assets/decoLib/shape3/pink.png";
 import shape3purple from "../../assets/decoLib/shape3/purple.png";
 import shape3red from "../../assets/decoLib/shape3/red.png";
 import shape3skyblue from "../../assets/decoLib/shape3/sky-blue.png";
-import shape3white from "../../assets/decoLib/shape3/White.png";
+import shape3white from "../../assets/decoLib/shape3/white.png";
 import shape3yellow from "../../assets/decoLib/shape3/yellow.png";
 
 import shape4beige from "../../assets/decoLib/shape4/beige.png";
@@ -91,7 +91,7 @@ import shape4pink from "../../assets/decoLib/shape4/pink.png";
 import shape4purple from "../../assets/decoLib/shape4/purple.png";
 import shape4red from "../../assets/decoLib/shape4/red.png";
 import shape4skyblue from "../../assets/decoLib/shape4/sky-blue.png";
-import shape4white from "../../assets/decoLib/shape4/White.png";
+import shape4white from "../../assets/decoLib/shape4/white.png";
 import shape4yellow from "../../assets/decoLib/shape4/yellow.png";
 
 import shape5beige from "../../assets/decoLib/shape5/beige.png";
@@ -107,7 +107,7 @@ import shape5pink from "../../assets/decoLib/shape5/pink.png";
 import shape5purple from "../../assets/decoLib/shape5/purple.png";
 import shape5red from "../../assets/decoLib/shape5/red.png";
 import shape5skyblue from "../../assets/decoLib/shape5/sky-blue.png";
-import shape5white from "../../assets/decoLib/shape5/White.png";
+import shape5white from "../../assets/decoLib/shape5/white.png";
 import shape5yellow from "../../assets/decoLib/shape5/yellow.png";
 
 import shape6beige from "../../assets/decoLib/shape6/beige.png";
@@ -123,7 +123,7 @@ import shape6pink from "../../assets/decoLib/shape6/pink.png";
 import shape6purple from "../../assets/decoLib/shape6/purple.png";
 import shape6red from "../../assets/decoLib/shape6/red.png";
 import shape6skyblue from "../../assets/decoLib/shape6/sky-blue.png";
-import shape6white from "../../assets/decoLib/shape6/White.png";
+import shape6white from "../../assets/decoLib/shape6/white.png";
 import shape6yellow from "../../assets/decoLib/shape6/yellow.png";
 
 export default function Deco() {

diff --git a/src/pages/MyPostBox/Detail/LetterDetail/LetterDetail.jsx b/src/pages/MyPostBox/Detail/LetterDetail/LetterDetail.jsx
@@ -28,16 +28,24 @@ function LetterDetail() {
       letterImage: DummyImg,
       answer: [
         {
-          question: "킁킁현주님은  어떤 존재인가요? ",
-          answer: "대단한존재~"
+          question: "기억에 남는 장소는 어딘가요? ",
+          answer: "숭실대학교 어흥올림픽"
         },
         {
-          question: "킁킁현주님은 철수님에게 어떤 존재인가요? ",
-          answer: "대단한존재"
+          question: "그 장소의 날씨는 어땠나요?",
+          answer: "추웠어요"
         },
         {
-          question: "킁킁현주님은 철수님에게 어떤 존재인가요? ",
-          answer: "대단한존"
+          question: "그 날 거기서 무엇을 했나요?",
+          answer: "해커톤!"
+        },
+        {
+          question: "받는이를 생각하면 떠오르는 게 있나요?",
+          answer: "개발자?"
+        },
+        {
+          question: "원하는 엽서의 분위기가 있나요?",
+          answer: "귀여운"
         }
       ]
     };

diff --git a/src/pages/MyPostBox/Detail/MyPostBoxDetail.jsx b/src/pages/MyPostBox/Detail/MyPostBoxDetail.jsx
@@ -3,10 +3,11 @@ import * as PS from "../style";
 import React, { useEffect, useState } from "react";
 import DummyImg from "../../../assets/img/letter_done.png";
 import { useNavigate } from "react-router-dom";
+import Loading from "../../../components/common/Loading";
 
 function MyPostBoxDetail() {
   const [letterList, setLetterList] = useState([]);
-
+  const [isLoading, setIsLoading] = useState(true);
   const [userName, setUserName] = useState("chan");
   const navigate = useNavigate();
 
@@ -39,26 +40,38 @@ function MyPostBoxDetail() {
         letterImage: DummyImg
       }
     ];
+
     setLetterList(data);
+    setIsLoading(false);
   }, []);
 
   return (
     <PS.Root>
-      <S.Title>{userName}님의 우체통</S.Title>
-      <S.Description>내 편지를 구경해보아요!</S.Description>
-      <S.PostWrapper>
-        {letterList.map((letter, index) => (
-          <S.PostContainer key={index}>
-            <S.PostImg
-              src={letter.letterImage}
-              onClick={() => {
-                goDetailPage(letter.id);
-              }}
-            />
-            <S.PostTitle>From.{letter.sender}</S.PostTitle>
-          </S.PostContainer>
-        ))}
-      </S.PostWrapper>
+      {isLoading ? (
+        <>
+          <Loading text={"편지를 불러오고 있어요..."} />
+        </>
+      ) : (
+        <>
+          <S.Title>{userName}님의 우체통</S.Title>
+          <S.Description>
+            총 {letterList.length}통의 편지를 받았어요!
+          </S.Description>
+          <S.PostWrapper>
+            {letterList.map((letter, index) => (
+              <S.PostContainer key={index}>
+                <S.PostImg
+                  src={letter.letterImage}
+                  onClick={() => {
+                    goDetailPage(letter.id);
+                  }}
+                />
+                <S.PostTitle>From.{letter.sender}</S.PostTitle>
+              </S.PostContainer>
+            ))}
+          </S.PostWrapper>
+        </>
+      )}
     </PS.Root>
   );
 }

diff --git a/src/pages/MyPostBox/MyPostBox.jsx b/src/pages/MyPostBox/MyPostBox.jsx
@@ -8,14 +8,16 @@ import CustomAlert from "../../components/common/CustomAlert";
 function MyPostBox() {
   const [showAlert, setShowAlert] = useState(false);
   const navigate = useNavigate();
+
   // location username=uuid 값을 가지고와서 변수에 저장
-  //   const location = useLocation();
-  //   const { username } = useParams();
+  const location = useLocation();
+  const { username } = useParams();
+
   const [userName, setUserName] = useState("chan");
 
-  // 나중에 query로 유저 정보 가져와서 저장
+  // const [isLoading, setIsLoading] = useState(true);
+  // // 나중에 query로 유저 정보 가져와서 저장
   //   useEffect(() => {
-  //     first;
 
   //     return () => {
   //       second;

diff --git a/src/pages/MyPostBox/style.jsx b/src/pages/MyPostBox/style.jsx
@@ -40,7 +40,7 @@ export const Title = styled.div`
 
 export const LetterBox = styled.div`
   position: absolute;
-  margin-top: 8rem;
+  margin-top: 4rem;
   transform: translateY(4rem);
   width: 70%;
   min-height: 40rem;

diff --git a/src/pages/PostBox/PostBox.jsx b/src/pages/PostBox/PostBox.jsx
@@ -7,18 +7,24 @@ import MindLetterBtnComponent from "../../components/common/MindLetterBtn";
 function PostBox() {
   const navigate = useNavigate();
   // location username=uuid 값을 가지고와서 변수에 저장
-  //   const location = useLocation();
-  //   const { username } = useParams();
-  const [userName, setUserName] = useState("chan");
+  const location = useLocation();
+  const { username } = useParams();
+  const [userInf, setUserInf] = useState({
+    userName: "",
+    letterBox: "String" // image....
+  });
 
   // 나중에 query로 유저 정보 가져와서 저장
-  //   useEffect(() => {
-  //     first;
-
-  //     return () => {
-  //       second;
-  //     };
-  //   }, [third]);
+  // 유저 이름이랑 posterbodx setting
+  useEffect(() => {
+    const data = {
+      userName: "chan",
+      letterBox: "String" // image....
+    };
+    return () => {
+      second;
+    };
+  }, [third]);
 
   const [post, setPost] = useState({
     title: "",