Refactor/place page image

src/components/common/skeleton/Base.tsx

@@ -0,0 +1,41 @@
+import styled from "@emotion/styled";
+
+const Base = styled.div`
+  display: inline-block;
+  border-radius: 4px;
+  background-image: linear-gradient(
+    90deg,
+    #dfe3e8 0px,
+    #efefef 40px,
+    #dfe3e8 80px
+  );
+  background-size: 200% 100%;
+  background-position: 0 center;
+  animation: skeleton--zoom-in 0.2s ease-out,
+    skeleton--loading 2s infinite linear;
+
+  @keyframes skeleton--zoom-in {
+    0% {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes skeleton--loading {
+    0% {
+      background-position-x: 100%;
+    }
+    50% {
+      background-position-x: -100%;
+    }
+    100% {
+      background-position-x: -100%;
+    }
+  }
+`;
+
+export default Base;

src/components/common/skeleton/Box.tsx

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+import Base from "./Base";
+
+interface BoxProps {
+  width: string | number;
+  height: string | number;
+}
+
+const Box = styled(Base)<BoxProps>`
+  width: ${({ width }) => (typeof width === "number" ? `${width}px` : width)};
+  height: ${({ height }) =>
+    typeof height === "number" ? `${height}px` : height};
+`;
+
+export default Box;

src/components/common/skeleton/Paragraph.tsx

@@ -0,0 +1,34 @@
+import styled from "@emotion/styled";
+import Box from "./Box";
+
+const Paragraph = ({ line = 3, ...props }) => {
+  return (
+    <Container {...props}>
+      <Box width='40%' height='2rem'></Box>
+      <Box width='60%' height='1.3rem'></Box>
+      <ImageContainer>
+        {Array.from(Array(line), (_, index) =>
+          index !== line - 1 ? (
+            <Box key={index} width='12.4rem' height='12.4rem' />
+          ) : (
+            <Box key={index} width='11rem' height='12.4rem' />
+          )
+        )}
+      </ImageContainer>
+    </Container>
+  );
+};
+
+export default Paragraph;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 2.1rem 1.5rem 2.5rem 1.5rem;
+  gap: 0.6rem 0;
+`;
+
+const ImageContainer = styled.div`
+  display: flex;
+  gap: 0.6rem;
+`;

src/components/layout/header.tsx

@@ -133,22 +133,8 @@ const Header = ({ token }: TokenProps) => {
           </HeaderIconWrap>
         </>
       )}
+
       <TextP>{HEADER_TEXT}</TextP>
-      {!token && !tokenData && (
-        <>
-          <HeaderIconWrap>
-            <Tooltip title='로그인' arrow>
-              <IconButton
-                onClick={handleClickLogin}
-                style={{
-                  color: "white",
-                }}>
-                <LoginIcon />
-              </IconButton>
-            </Tooltip>
-          </HeaderIconWrap>
-        </>
-      )}
 
       <embed src='/logo1.svg' width={147} height={56} />
     </HeaderContainer>

src/pages/index.tsx

@@ -248,10 +248,11 @@ export default function Home() {
           }}>
           <form>
             <Stack
-              spacing={2.5}
+              // spacing={2.5} //layout shift 발생!
               sx={{
                 width: "100%",
                 alignItems: "center",
+                gap: "2rem",
               }}>
               {inputs.map((input, index) => (
                 <FormInput

src/pages/place/index.tsx

@@ -10,6 +10,7 @@ import { PlaceInput, PlaceList, PlaceTabList } from "@/components/place";
 import Image from "next/image";
 import { useCallback, useEffect, useState } from "react";
 import { useRouter } from "next/router";
+import Paragraph from "@/components/common/skeleton/Paragraph";
 
 const SIZE = 5;
 const FIRST_PAGE_NUM = 0;
@@ -66,18 +67,10 @@ const PlacePage = () => {
       <MainContainer>
         <UnOrderedList>
           {isLoading ? (
-            <Box
-              sx={{
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                padding: "2rem 0 2.5rem 0",
-                position: "absolute",
-                top: "50%",
-                left: "50%",
-                transform: "translate(-50%, -50%)",
-              }}>
-              <CircularProgress size='5rem' sx={{ color: "#5AB27D" }} />
+            <Box>
+              <Paragraph />
+              <Paragraph />
+              <Paragraph />
             </Box>
           ) : (
             <>