From eec5dcb3db1d7c1012b70555879787962f9b4e08 Mon Sep 17 00:00:00 2001 From: Kal-MH Date: Fri, 24 Mar 2023 15:42:08 +0900 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20header=20eslint=20=EC=98=A4=EB=A5=98?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EC=A0=84=20=EB=B2=84=EC=A0=84=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EB=8B=A4=EC=8B=9C=20=EB=90=98=EB=8F=8C=EB=A6=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/header.tsx | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx index 8b37795..264d5f6 100644 --- a/src/components/layout/header.tsx +++ b/src/components/layout/header.tsx @@ -133,22 +133,8 @@ const Header = ({ token }: TokenProps) => { )} + {HEADER_TEXT} - {!token && !tokenData && ( - <> - - - - - - - - - )} From 1e56957ce9843c7caa600119183dffe28f321b74 Mon Sep 17 00:00:00 2001 From: Kal-MH Date: Fri, 24 Mar 2023 15:42:35 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feature:=20skeleton=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/skeleton/Base.tsx | 41 ++++++++++++++++++++ src/components/common/skeleton/Box.tsx | 15 +++++++ src/components/common/skeleton/Paragraph.tsx | 18 +++++++++ 3 files changed, 74 insertions(+) create mode 100644 src/components/common/skeleton/Base.tsx create mode 100644 src/components/common/skeleton/Box.tsx create mode 100644 src/components/common/skeleton/Paragraph.tsx diff --git a/src/components/common/skeleton/Base.tsx b/src/components/common/skeleton/Base.tsx new file mode 100644 index 0000000..4ae50ad --- /dev/null +++ b/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; diff --git a/src/components/common/skeleton/Box.tsx b/src/components/common/skeleton/Box.tsx new file mode 100644 index 0000000..9585ea6 --- /dev/null +++ b/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)` + width: ${({ width }) => (typeof width === "number" ? `${width}px` : width)}; + height: ${({ height }) => + typeof height === "number" ? `${height}px` : height}; +`; + +export default Box; diff --git a/src/components/common/skeleton/Paragraph.tsx b/src/components/common/skeleton/Paragraph.tsx new file mode 100644 index 0000000..0b9a1c4 --- /dev/null +++ b/src/components/common/skeleton/Paragraph.tsx @@ -0,0 +1,18 @@ +import Box from "./Box"; + +const Paragraph = ({ line = 3, ...props }) => { + return ( +
+ + {Array.from(Array(line), (_, index) => + index !== line - 1 ? ( + + ) : ( + + ) + )} +
+ ); +}; + +export default Paragraph; From 7a70677f4395d95949d8dd97ce3ecf7d1c1a7196 Mon Sep 17 00:00:00 2001 From: Kal-MH Date: Fri, 24 Mar 2023 15:58:16 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feature:=20paragraph=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=A1=9C=EB=94=A9?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=8C=80=EC=8B=A0=20?= =?UTF-8?q?=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/skeleton/Paragraph.tsx | 36 ++++++++++++++------ src/pages/place/index.tsx | 30 +++++++++------- 2 files changed, 44 insertions(+), 22 deletions(-) diff --git a/src/components/common/skeleton/Paragraph.tsx b/src/components/common/skeleton/Paragraph.tsx index 0b9a1c4..925fc8c 100644 --- a/src/components/common/skeleton/Paragraph.tsx +++ b/src/components/common/skeleton/Paragraph.tsx @@ -1,18 +1,34 @@ +import styled from "@emotion/styled"; import Box from "./Box"; const Paragraph = ({ line = 3, ...props }) => { return ( -
- - {Array.from(Array(line), (_, index) => - index !== line - 1 ? ( - - ) : ( - - ) - )} -
+ + + + + {Array.from(Array(line), (_, index) => + index !== line - 1 ? ( + + ) : ( + + ) + )} + + ); }; 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; +`; diff --git a/src/pages/place/index.tsx b/src/pages/place/index.tsx index 6cdc251..9be63e3 100644 --- a/src/pages/place/index.tsx +++ b/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,23 @@ const PlacePage = () => { {isLoading ? ( - - + // + // + // + + + + ) : ( <> From 626dad88f140a5c4a5a202be6cf0afe0fbd0995d Mon Sep 17 00:00:00 2001 From: Kal-MH Date: Fri, 24 Mar 2023 16:21:37 +0900 Subject: [PATCH 4/5] =?UTF-8?q?design:=20=ED=99=88=EC=97=90=EC=84=9C=20lay?= =?UTF-8?q?out=20shift=20=ED=98=84=EC=83=81=20=EC=A0=9C=EA=B1=B0=EB=A5=BC?= =?UTF-8?q?=20=EC=9C=84=ED=95=B4=20gap=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3faf6c3..1b24790 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -248,10 +248,11 @@ export default function Home() { }}>
{inputs.map((input, index) => ( Date: Fri, 24 Mar 2023 16:29:15 +0900 Subject: [PATCH 5/5] =?UTF-8?q?comment:=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=20=EB=B0=8F=20layout=20shift=EB=8C=80=ED=95=9C=20?= =?UTF-8?q?=EC=A3=BC=EC=84=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/index.tsx | 2 +- src/pages/place/index.tsx | 13 ------------- 2 files changed, 1 insertion(+), 14 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 1b24790..59150f5 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -248,7 +248,7 @@ export default function Home() { }}> { {isLoading ? ( - // - // - //