ASAP-Lettering · yyypearl · Jan 13, 2025 · Jan 11, 2025 · Jan 11, 2025 · Jan 13, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@next/third-parties": "^14.2.5",
     "axios": "^1.7.7",
     "browser-image-compression": "^2.0.2",
     "cookie": "^1.0.0",

diff --git a/src/app/guide/page.tsx b/src/app/guide/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import BlinkTag from "@/components/common/BlinkingTag";
-// import BottomSheet from "@/components/common/BottomSheet";
 import Button from "@/components/common/Button";
 import Check from "@/components/common/Check";
 import ConfirmModal from "@/components/common/ConfirmModal";
@@ -13,7 +12,7 @@ import Tag from "@/components/common/Tag";
 import Toast from "@/components/common/Toast";
 import Letter from "@/components/letter/Letter";
 import NewItemPicker from "@/components/signup/NewItemPicker";
-import { LETTER_DATA } from "@/constants/letter";
+import { LETTER_DUMMY } from "@/constants/letterDummy";
 import { theme } from "@/styles/theme";
 import Image from "next/image";
 import React, { useState } from "react";
@@ -72,7 +71,7 @@ const GuidePage = () => {
   };
 
   //Letter
-  const letterData = LETTER_DATA[0];
+  const letterData = LETTER_DUMMY[0];
   const imageData = [
     "https://via.assets.so/album.png?id=6&q=95&w=360&h=360&fit=fill",
     "https://via.assets.so/album.png?id=2&q=95&w=360&h=360&fit=fill",

diff --git a/src/app/independent/[id]/page.tsx b/src/app/independent/[id]/page.tsx
@@ -79,7 +79,7 @@ const IndependentLetterPage = () => {
             showType="receive"
             key={key}
             contentType="all"
-            id={letterId}
+            id={letterId || ""}
             templateType={letterData.templateType}
             name={letterData.senderName}
             content={letterData.content}

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import Providers from "./providers";
+import { GoogleAnalytics, GoogleTagManager } from "@next/third-parties/google";
 
 export const metadata = {
   title: "레터링 | 온라인 편지 아카이빙 플랫폼",
@@ -64,27 +65,9 @@ export default function RootLayout({
         />
       </head>
       <body>
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-              (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-              j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-              'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-              })(window,document,'script','dataLayer','GTM-K6XC8LPQ');
-            `,
-          }}
-        />
         <Providers>{children}</Providers>
-        {/* Google Tag Manager Noscript */}
-        <noscript>
-          <iframe
-            src="https://www.googletagmanager.com/ns.html?id=GTM-K6XC8LPQ"
-            height="0"
-            width="0"
-            style={{ display: "none", visibility: "hidden" }}
-          ></iframe>
-        </noscript>
+        <GoogleTagManager gtmId="GTM-K4JD5J82" />
+        <GoogleAnalytics gaId="G-RT86Q6W1PP" />
       </body>
     </html>
   );

diff --git a/src/app/letter/[id]/page.tsx b/src/app/letter/[id]/page.tsx
@@ -97,7 +97,7 @@ const LetterPage = () => {
             key={key}
             contentType="all"
             pageType="space"
-            id={letterId}
+            id={letterId || ""}
             templateType={letterData.templateType}
             name={letterData.sender}
             content={letterData.content}

diff --git a/src/app/mypage/send/[id]/page.tsx b/src/app/mypage/send/[id]/page.tsx
@@ -1,20 +1,18 @@
 "use client";
 
 import { getSentLetterDetail } from "@/api/mypage/user";
-import Button from "@/components/common/Button";
 import KakaoShareButton from "@/components/common/KakaoShareButton";
 import Loader from "@/components/common/Loader";
 import NavigatorBar from "@/components/common/NavigatorBar";
 import Letter from "@/components/letter/Letter";
 import { theme } from "@/styles/theme";
 import { SentDetailLetterType } from "@/types/letter";
 import { getAccessToken } from "@/utils/storage";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { Suspense, useEffect, useState } from "react";
 import styled from "styled-components";
 
 const SendDetailPage = () => {
-  const router = useRouter();
   const { id } = useParams();
   const letterId = Array.isArray(id) ? id[0] : id;
   const [key, setKey] = useState(1);
@@ -61,7 +59,7 @@ const SendDetailPage = () => {
           <Letter
             showType="send"
             key={key}
-            id={letterId}
+            id={letterId || ""}
             templateType={letterData.templateType}
             name={letterData.receiverName}
             content={letterData.content}

diff --git a/src/app/onboarding/page.tsx b/src/app/onboarding/page.tsx
@@ -7,8 +7,8 @@ import Loader from "@/components/common/Loader";
 import Planet from "@/components/common/Planet";
 import Tag from "@/components/common/Tag";
 import Pagination from "@/components/letter/Pagination";
-import { Orbit } from "@/constants/orbit";
 import { theme } from "@/styles/theme";
+import { Orbit } from "@/types/orbit";
 import { setOnboarding } from "@/utils/storage";
 import { useRouter } from "next/navigation";
 import { Suspense, useEffect, useState } from "react";

diff --git a/src/app/planet/manage/page.tsx b/src/app/planet/manage/page.tsx
@@ -5,7 +5,6 @@ import styled, { css } from "styled-components";
 import { theme } from "@/styles/theme";
 import NavigatorBar from "@/components/common/NavigatorBar";
 import Button from "@/components/common/Button";
-import { Planet, PLANETS } from "@/constants/planet";
 import PlanetList from "@/components/planet/PlanetList";
 import Image from "next/image";
 import ConfirmModal from "@/components/common/ConfirmModal";
@@ -20,6 +19,7 @@ import { spaceState } from "@/recoil/spaceStore";
 import { useSetRecoilState } from "recoil";
 import { useRouter } from "next/navigation";
 import Loader, { LoaderContainer } from "@/components/common/Loader";
+import { Planet } from "@/types/planet";
 
 const PlanetManagePage = () => {
   const router = useRouter();

diff --git a/src/app/planet/move/page.tsx b/src/app/planet/move/page.tsx
@@ -7,7 +7,6 @@ import NavigatorBar from "@/components/common/NavigatorBar";
 import Button from "@/components/common/Button";
 import { useRouter, useSearchParams } from "next/navigation";
 import PlanetBox from "@/components/planet/PlanetBox";
-import { Planet } from "@/constants/planet";
 import Loader, { LoaderContainer } from "@/components/common/Loader";
 import {
   putLetterToIndep,
@@ -16,6 +15,7 @@ import {
 import Image from "next/image";
 import { getSpaceList } from "@/api/planet/space/space";
 import { useToast } from "@/hooks/useToast";
+import { Planet } from "@/types/planet";
 
 const PlanetMovePage = () => {
   const router = useRouter();

diff --git a/src/app/planet/page.tsx b/src/app/planet/page.tsx
@@ -4,9 +4,7 @@ import React, { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import Image from "next/image";
 import Bottom from "@/components/common/Bottom";
-import Planet from "@/components/common/Planet";
 import Tag from "@/components/common/Tag";
-import { Orbit } from "@/constants/orbit";
 import { theme } from "@/styles/theme";
 import Pagination from "@/components/common/Pagination";
 import { useRouter } from "next/navigation";
@@ -40,6 +38,7 @@ import { useToast } from "@/hooks/useToast";
 import Tooltip from "@/components/common/Tooltip";
 import { userState } from "@/recoil/userStore";
 import { spaceState } from "@/recoil/spaceStore";
+import { Orbit } from "@/types/orbit";
 
 const PlanetPage = () => {
   const router = useRouter();

diff --git a/src/app/send/complete/page.tsx b/src/app/send/complete/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import Button from "@/components/common/Button";
-import KakaoShareButton from "@/components/common/KakaoShareButton";
 import { sendLetterState } from "@/recoil/letterStore";
 import { theme } from "@/styles/theme";
 import Image from "next/image";

diff --git a/src/app/verify/letter/page.tsx b/src/app/verify/letter/page.tsx
@@ -9,7 +9,6 @@ import { getMainId } from "@/api/planet/space/space";
 import Button from "@/components/common/Button";
 import Loader, { LoaderContainer } from "@/components/common/Loader";
 import Letter from "@/components/letter/Letter";
-import { LETTER_DATA } from "@/constants/letter";
 import { LetterType } from "@/types/letter";
 import { getAccessToken } from "@/utils/storage";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -109,33 +108,6 @@ const VerifyLetter = () => {
     };
 
     checkMainIdAndVerify();
-    //accessToken이 없는 상황이라면 로그인으로
-
-    //letterCode가 있다면 검증 진행
-    // if (url) {
-    //   verifyLetter(url)
-    //     .then((res) => {
-    //       if (res.data.letterId) {
-    //         //검증 성공하면 letterData를 받아온다
-    //         setletterId(res.data.letterId);
-    //         fetchLetterData(res.data.letterId);
-    //       }
-    //     })
-    //     .catch((error) => {
-    //       //검증 실패시 조회할 수 없는 편지 에러 페이지로 이동
-    //       console.log(error);
-    //       router.push(url ? `/error/letter?url=${url}` : `/error/letter`);
-    //     });
-    // }
-
-    // if (letterData === null) {
-    //   //LetterData 받아오는 로직
-    //   for (let i = 0; i < LETTER_DATA.length; i++) {
-    //     if (LETTER_DATA[i].url === url) {
-    //       setLetterData(LETTER_DATA[i]);
-    //     }
-    //   }
-    // }
     setIsLoading(false);
   }, []);
 
@@ -155,7 +127,7 @@ const VerifyLetter = () => {
           <Letter
             showType="url"
             key={key}
-            id={letterId}
+            id={letterId || ""}
             templateType={letterData.templateType}
             name={letterData.sender}
             images={letterData.images}
@@ -167,7 +139,7 @@ const VerifyLetter = () => {
           <Letter
             showType="url"
             key={key}
-            id={letterId}
+            id={letterId || ""}
             templateType={letterData.templateType}
             name={letterData.sender}
             content={letterData.content}
@@ -234,10 +206,6 @@ const Container = styled.div`
   overflow-x: hidden;
   padding: 40px 0;
   background: ${(props) => props.theme.colors.bg};
-  /* background-image: url('/assets/signup/verify_image.png'); 
-    background-size: 550px auto; 
-    background-position: bottom 80px center;
-    background-repeat: no-repeat; */
 `;
 
 const MainWrapper = styled.div`

diff --git a/src/components/common/Bottom.tsx b/src/components/common/Bottom.tsx
@@ -3,9 +3,8 @@ import styled from "styled-components";
 import Tag from "./Tag";
 import Button from "./Button";
 import { theme } from "@/styles/theme";
-import { Orbit } from "@/constants/orbit";
-import Image from "next/image";
 import { useRouter } from "next/navigation";
+import { Orbit } from "@/types/orbit";
 
 interface BottomProps {
   orbitMessages: Orbit[] | null;

diff --git a/src/components/common/Tag.tsx b/src/components/common/Tag.tsx
@@ -1,8 +1,7 @@
 import { deleteOrbitLetter } from "@/api/planet/letter/spaceLetter";
-import { Orbit } from "@/constants/orbit";
 import { planetRefState } from "@/recoil/RefStore";
 import { theme } from "@/styles/theme";
-import { motion } from "framer-motion";
+import { Orbit } from "@/types/orbit";
 import Image from "next/image";
 import React, { useRef, useState } from "react";
 import { useRecoilState } from "recoil";
@@ -380,29 +379,25 @@ const Box = styled.div<{
       background: ${theme.colors.gray800};
       ${(props) => props.theme.fonts.body08};
       display: flex;
-      ${
-        $hasEditIcon &&
-        css`
+      ${$hasEditIcon &&
+      css`
         height: 47px;
         padding: 9px 18px;
         border-radius: 200px;
         background: rgba(255, 255, 255, 0.2);
         backdrop-filter: blur(2px);
         ${(props) => props.theme.fonts.title01};
         gap: 4px;
-      `
-      }
-      ${
-        $hasName === false &&
-        css`
+      `}
+      ${$hasName === false &&
+      css`
         padding: 7.5px 13px 7.5px 13px;
-      `
-      }
+      `}
     `}
 
     ${({ $tagType, $orbitType }) =>
-      $tagType === "letter" &&
-      css`
+    $tagType === "letter" &&
+    css`
       display: block;
       max-width: 90px;
       padding: ${$orbitType === "2" ? "7.5px 15px" : "11px 15px"};

diff --git a/src/components/planet/PlanetSlide.tsx b/src/components/planet/PlanetSlide.tsx
@@ -1,10 +1,9 @@
-import { theme } from "@/styles/theme";
-import React, { useState } from "react";
+import React from "react";
 import styled from "styled-components";
 import { motion, AnimatePresence } from "framer-motion";
 import { SpaceInfo } from "@/types/space";
-import { Orbit } from "@/constants/orbit";
 import Planet from "../common/Planet";
+import { Orbit } from "@/types/orbit";
 
 interface PlanetSlideProps {
   idx: number;