Merge pull request #159 from ASAP-Lettering/feat/#155

[Feat] Image의 placeholder를 활용한 홈 화면 행성 이미지 렌더링 최적화

Author: yyypearl

src/app/planet/page.tsx

@@ -558,6 +558,7 @@ const Layout = styled.div`
   gap: 10px;
   padding: 20px 0px 0px 0px;
   position: relative;
+  background-color: ${theme.colors.bg};
 
   ::-webkit-scrollbar {
     display: none;
@@ -668,7 +669,6 @@ const BottomWrapper = styled.div`
 const LoaderContainer = styled.div`
   width: 100%;
   height: 100%;
-  min-height: 600px;
   display: flex;
   align-items: center;
   justify-content: center;

src/components/common/Planet.tsx

@@ -1,17 +1,17 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
 import Tag from './Tag';
 import Button from './Button';
 import { useRouter } from 'next/navigation';
 import ConfirmModal from './ConfirmModal';
 import { useRecoilState, useSetRecoilState } from 'recoil';
-import { toastState } from '@/recoil/toastStore';
 import { deletePlanetLetter } from '@/api/planet/letter/spaceLetter';
 import { droppedLetterState } from '@/recoil/letterStore';
 import BlinkTag from './BlinkingTag';
 import { useToast } from '@/hooks/useToast';
 import { getCookie } from '@/utils/storage';
+import { PLANET_BLUR_DATA } from '@/constants/planetBlur';
 
 interface Orbit {
   letterId: string;
@@ -131,6 +131,8 @@ const Planet = (props: PlanetProps) => {
         width={400}
         height={400}
         alt="planet"
+        placeholder="blur"
+        blurDataURL={'data:/image/png;base64,' + PLANET_BLUR_DATA[planetType]}
         priority
         onContextMenu={handleContextMenu}
       />