From 1732f19c63779f1411fcc9d1ce52d9481656cc50 Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Fri, 2 Aug 2024 01:53:42 +0900 Subject: [PATCH 01/14] =?UTF-8?q?feat:=20api=20=EC=84=A4=EC=A0=95,=20?= =?UTF-8?q?=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=9B=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/api.ts | 8 +++++++ src/{api => apis}/axios.ts | 7 ++++++ src/constants/.gitkeep | 0 src/constants/queryKey.ts | 9 ++++++++ src/hooks/.gitkeep | 0 src/hooks/useGetGuideBookData.ts | 25 +++++++++++++++++++++ src/pages/_app.page.tsx | 2 ++ src/pages/guide-book/index.page.tsx | 34 +++++++++++++++++++++++++++++ 8 files changed, 85 insertions(+) create mode 100644 src/apis/api.ts rename src/{api => apis}/axios.ts (65%) delete mode 100644 src/constants/.gitkeep create mode 100644 src/constants/queryKey.ts delete mode 100644 src/hooks/.gitkeep create mode 100644 src/hooks/useGetGuideBookData.ts create mode 100644 src/pages/guide-book/index.page.tsx diff --git a/src/apis/api.ts b/src/apis/api.ts new file mode 100644 index 0000000..fedc3a4 --- /dev/null +++ b/src/apis/api.ts @@ -0,0 +1,8 @@ +import { guideBookInstance } from "./axios"; + +export const getGuideBookData = async (pageParam: number) => { + const response = await guideBookInstance.get( + `/15123631/v1/uddi:33264f0a-158f-4a5d-95cd-99c740c8a097?page=${pageParam}&perPage=20&serviceKey=${process.env.NEXT_PUBLIC_DATA_GO_API_KEY}`, + ); + return response.data; +}; diff --git a/src/api/axios.ts b/src/apis/axios.ts similarity index 65% rename from src/api/axios.ts rename to src/apis/axios.ts index c398487..18d4858 100644 --- a/src/api/axios.ts +++ b/src/apis/axios.ts @@ -1,5 +1,12 @@ import axios from "axios"; +export const guideBookInstance = axios.create({ + baseURL: process.env.NEXT_PUBLIC_GUIDE_BOOK_API_BASE_URL, + headers: { + "Content-Type": "application/json", + }, +}); + export const instance = axios.create({ baseURL: "baseURL 추가 예정", headers: { diff --git a/src/constants/.gitkeep b/src/constants/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/constants/queryKey.ts b/src/constants/queryKey.ts new file mode 100644 index 0000000..77b109b --- /dev/null +++ b/src/constants/queryKey.ts @@ -0,0 +1,9 @@ +/** + * 쿼리 키 팩토리 + * {@link https://tkdodo.eu/blog/effective-react-query-keys} + */ + +export const GUIDE_BOOK_KEYS = { + all: ["guide-book"] as const, + lists: () => [...GUIDE_BOOK_KEYS.all, "list"] as const, +}; diff --git a/src/hooks/.gitkeep b/src/hooks/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/hooks/useGetGuideBookData.ts b/src/hooks/useGetGuideBookData.ts new file mode 100644 index 0000000..3544451 --- /dev/null +++ b/src/hooks/useGetGuideBookData.ts @@ -0,0 +1,25 @@ +import { useInfiniteQuery } from "@tanstack/react-query"; + +import { getGuideBookData } from "@/apis/api"; +import { GUIDE_BOOK_KEYS } from "@/constants/queryKey"; + +export const useGetGuideBookData = () => { + const { data, fetchNextPage, hasNextPage, isLoading, isError } = + useInfiniteQuery({ + queryKey: GUIDE_BOOK_KEYS.lists(), + queryFn: ({ pageParam }) => getGuideBookData(pageParam), + initialPageParam: 1, + getNextPageParam: (lastPage, allPages) => { + const count = allPages.reduce((acc, cur) => acc + cur.currentCount, 0); + + if (count < lastPage.totalCount) { + const pageParam = lastPage.page + 1; + return pageParam; + } + + return null; + }, + }); + + return { data, fetchNextPage, hasNextPage, isLoading, isError }; +}; diff --git a/src/pages/_app.page.tsx b/src/pages/_app.page.tsx index f2c412e..9c4ae0a 100644 --- a/src/pages/_app.page.tsx +++ b/src/pages/_app.page.tsx @@ -4,6 +4,7 @@ import { useState } from "react"; import { Global } from "@emotion/react"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import reset from "@/styles/reset"; @@ -26,6 +27,7 @@ export default function App({ Component, pageProps }: AppProps) { + ); } diff --git a/src/pages/guide-book/index.page.tsx b/src/pages/guide-book/index.page.tsx new file mode 100644 index 0000000..ed4f912 --- /dev/null +++ b/src/pages/guide-book/index.page.tsx @@ -0,0 +1,34 @@ +import { useGetGuideBookData } from "@/hooks/useGetGuideBookData"; + +export const getServerSideProps = async () => { + try { + return { + props: {}, + }; + } catch (error) { + return { + props: {}, + }; + } +}; + +function GuideBookPage() { + const { fetchNextPage, hasNextPage, isLoading, data } = useGetGuideBookData(); + // return

여행 가이드북

+ // console.log(data); + + // console.log(hasNextPage); + + return ( +
+ +
+ ); +} + +export default GuideBookPage; From e2339e2a5fe7140375a2f12dd5f4f3a48593249c Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Fri, 2 Aug 2024 01:57:34 +0900 Subject: [PATCH 02/14] =?UTF-8?q?feat:=20ssr=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/guide-book/index.page.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/pages/guide-book/index.page.tsx b/src/pages/guide-book/index.page.tsx index ed4f912..5196987 100644 --- a/src/pages/guide-book/index.page.tsx +++ b/src/pages/guide-book/index.page.tsx @@ -1,13 +1,24 @@ +import { dehydrate, QueryClient } from "@tanstack/react-query"; + +import { getGuideBookData } from "@/apis/api"; +import { GUIDE_BOOK_KEYS } from "@/constants/queryKey"; import { useGetGuideBookData } from "@/hooks/useGetGuideBookData"; export const getServerSideProps = async () => { + const queryClient = new QueryClient(); + try { + await queryClient.prefetchQuery({ + queryKey: GUIDE_BOOK_KEYS.lists(), + queryFn: () => getGuideBookData(1), + }); + return { - props: {}, + props: { dehydrateState: dehydrate(queryClient) }, }; } catch (error) { return { - props: {}, + props: { dehydrateState: null }, }; } }; From 93e85130b643f117d30f6577c9776682a25454cf Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Fri, 2 Aug 2024 18:17:35 +0900 Subject: [PATCH 03/14] =?UTF-8?q?feat:=20api=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/api.ts | 6 +++- src/hooks/useGetGuideBookData.ts | 8 ++++- src/hooks/useObserver.ts | 33 +++++++++++++++++++ .../components/GuideBookItem/index.tsx} | 0 src/pages/guide-book/index.page.tsx | 21 +++++------- src/pages/guide-book/styled.ts | 6 ++++ src/types/index.ts | 16 +++++++++ 7 files changed, 76 insertions(+), 14 deletions(-) create mode 100644 src/hooks/useObserver.ts rename src/{types/.gitkeep => pages/guide-book/components/GuideBookItem/index.tsx} (100%) create mode 100644 src/pages/guide-book/styled.ts create mode 100644 src/types/index.ts diff --git a/src/apis/api.ts b/src/apis/api.ts index fedc3a4..5b66042 100644 --- a/src/apis/api.ts +++ b/src/apis/api.ts @@ -1,6 +1,10 @@ +import { GuideBookType } from "@/types"; + import { guideBookInstance } from "./axios"; -export const getGuideBookData = async (pageParam: number) => { +export const getGuideBookData = async ( + pageParam: number, +): Promise => { const response = await guideBookInstance.get( `/15123631/v1/uddi:33264f0a-158f-4a5d-95cd-99c740c8a097?page=${pageParam}&perPage=20&serviceKey=${process.env.NEXT_PUBLIC_DATA_GO_API_KEY}`, ); diff --git a/src/hooks/useGetGuideBookData.ts b/src/hooks/useGetGuideBookData.ts index 3544451..ab37cb4 100644 --- a/src/hooks/useGetGuideBookData.ts +++ b/src/hooks/useGetGuideBookData.ts @@ -21,5 +21,11 @@ export const useGetGuideBookData = () => { }, }); - return { data, fetchNextPage, hasNextPage, isLoading, isError }; + return { + guideBookList: data?.pages, + fetchNextPage, + hasNextPage, + isLoading, + isError, + }; }; diff --git a/src/hooks/useObserver.ts b/src/hooks/useObserver.ts new file mode 100644 index 0000000..ad71a7e --- /dev/null +++ b/src/hooks/useObserver.ts @@ -0,0 +1,33 @@ +import { useEffect, useRef } from "react"; + +import { + FetchNextPageOptions, + InfiniteQueryObserverResult, +} from "@tanstack/react-query"; + +export const useObserver = ( + fetchNextPage: ( + options?: FetchNextPageOptions, + ) => Promise>, +) => { + const refElement = useRef(null); + + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + if (entries[0].isIntersecting) { + fetchNextPage(); + } + }, + { threshold: 0 }, + ); + + if (refElement.current) { + observer.observe(refElement.current); + } + + return () => observer.disconnect(); + }, [fetchNextPage]); + + return refElement; // 관찰 대상의 ref를 return +}; diff --git a/src/types/.gitkeep b/src/pages/guide-book/components/GuideBookItem/index.tsx similarity index 100% rename from src/types/.gitkeep rename to src/pages/guide-book/components/GuideBookItem/index.tsx diff --git a/src/pages/guide-book/index.page.tsx b/src/pages/guide-book/index.page.tsx index 5196987..d10b7e9 100644 --- a/src/pages/guide-book/index.page.tsx +++ b/src/pages/guide-book/index.page.tsx @@ -4,6 +4,8 @@ import { getGuideBookData } from "@/apis/api"; import { GUIDE_BOOK_KEYS } from "@/constants/queryKey"; import { useGetGuideBookData } from "@/hooks/useGetGuideBookData"; +import * as S from "./styled"; + export const getServerSideProps = async () => { const queryClient = new QueryClient(); @@ -24,21 +26,16 @@ export const getServerSideProps = async () => { }; function GuideBookPage() { - const { fetchNextPage, hasNextPage, isLoading, data } = useGetGuideBookData(); - // return

여행 가이드북

- // console.log(data); + const { fetchNextPage, hasNextPage, guideBookList } = useGetGuideBookData(); - // console.log(hasNextPage); + if (!guideBookList) { + return null; + } return ( -
- -
+ <> + 여행 가이드북 + ); } diff --git a/src/pages/guide-book/styled.ts b/src/pages/guide-book/styled.ts new file mode 100644 index 0000000..94f65f8 --- /dev/null +++ b/src/pages/guide-book/styled.ts @@ -0,0 +1,6 @@ +import styled from "@emotion/styled"; + +export const Title = styled.h1` + font-size: 1.5625rem; + font-weight: 700; +`; diff --git a/src/types/index.ts b/src/types/index.ts new file mode 100644 index 0000000..459930c --- /dev/null +++ b/src/types/index.ts @@ -0,0 +1,16 @@ +export interface GuideBookDataListType { + 제목: string; + 제작처: string; + "지역(시_도)": string; + "지역(시_군_구)": string; + "가이드북 링크": string; +} + +export interface GuideBookType { + page: number; + perPage: number; + totalCount: number; + currentCount: number; + matchCount: number; + data: GuideBookDataListType[]; +} From f0a5f088eb55c710121b468d1eed4882aee99e1e Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Fri, 2 Aug 2024 19:17:58 +0900 Subject: [PATCH 04/14] =?UTF-8?q?feat:=20=EA=B7=B8=EB=A6=AC=EB=93=9C=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/GuideBookItem/index.tsx | 18 +++++++ .../components/GuideBookItem/styled.tsx | 9 ++++ src/pages/guide-book/index.page.tsx | 18 +++++-- src/pages/guide-book/styled.ts | 48 +++++++++++++++++++ 4 files changed, 90 insertions(+), 3 deletions(-) create mode 100644 src/pages/guide-book/components/GuideBookItem/styled.tsx diff --git a/src/pages/guide-book/components/GuideBookItem/index.tsx b/src/pages/guide-book/components/GuideBookItem/index.tsx index e69de29..130db68 100644 --- a/src/pages/guide-book/components/GuideBookItem/index.tsx +++ b/src/pages/guide-book/components/GuideBookItem/index.tsx @@ -0,0 +1,18 @@ +import { GuideBookDataListType } from "@/types"; + +import * as S from "./styled"; + +interface GuideBookItemProps { + data: GuideBookDataListType; +} + +function GuideBookItem({ data }: GuideBookItemProps) { + console.log(data); + return ( + +

{`제목: ${data["제목"]}`}

+ + ); +} + +export default GuideBookItem; diff --git a/src/pages/guide-book/components/GuideBookItem/styled.tsx b/src/pages/guide-book/components/GuideBookItem/styled.tsx new file mode 100644 index 0000000..e8d0f9a --- /dev/null +++ b/src/pages/guide-book/components/GuideBookItem/styled.tsx @@ -0,0 +1,9 @@ +import Link from "next/link"; + +import styled from "@emotion/styled"; + +export const LinkItem = styled(Link)` + width: 100%; + height: 18rem; + border: 1px solid #000; +`; diff --git a/src/pages/guide-book/index.page.tsx b/src/pages/guide-book/index.page.tsx index d10b7e9..f929e84 100644 --- a/src/pages/guide-book/index.page.tsx +++ b/src/pages/guide-book/index.page.tsx @@ -4,6 +4,7 @@ import { getGuideBookData } from "@/apis/api"; import { GUIDE_BOOK_KEYS } from "@/constants/queryKey"; import { useGetGuideBookData } from "@/hooks/useGetGuideBookData"; +import GuideBookItem from "./components/GuideBookItem"; import * as S from "./styled"; export const getServerSideProps = async () => { @@ -33,9 +34,20 @@ function GuideBookPage() { } return ( - <> - 여행 가이드북 - + + + 여행 가이드북 + + + {`총 ${guideBookList[0].totalCount}건`} + + {guideBookList.map((list) => + list.data.map((data) => ( + + )), + )} + + ); } diff --git a/src/pages/guide-book/styled.ts b/src/pages/guide-book/styled.ts index 94f65f8..753b493 100644 --- a/src/pages/guide-book/styled.ts +++ b/src/pages/guide-book/styled.ts @@ -1,6 +1,54 @@ import styled from "@emotion/styled"; +import { TABLET_MEDIA_QUERY, MOBILE_MEDIA_QUERY } from "@/styles/const"; + +export const Container = styled.main` + max-width: 120rem; + min-width: 23.4375rem; + width: 64rem; + margin: 3.5rem auto 0; + padding: 0 1rem; + + @media ${TABLET_MEDIA_QUERY} { + width: 100%; + } +`; + +export const TitleBox = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + gap: 1rem; +`; + export const Title = styled.h1` font-size: 1.5625rem; font-weight: 700; `; + +export const Line = styled.p` + flex-grow: 2; + height: 0.5rem; + border-top: 2px solid #000; +`; + +export const CountBox = styled.div` + display: flex; + justify-content: right; + font-size: 1.5625rem; + font-weight: 700; +`; + +export const ListBox = styled.ul` + display: grid; + gap: 1rem; + grid-template-columns: repeat(4, 1fr); + place-items: center; + margin-top: 1rem; + border: 1px solid red; + + @media ${TABLET_MEDIA_QUERY} { + grid-template-columns: repeat(2, 1fr); + } +`; From 3ba2c0b140a25b9c9f2acf2b8095384c78cd1fec Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Fri, 2 Aug 2024 19:21:11 +0900 Subject: [PATCH 05/14] =?UTF-8?q?rename:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=ED=99=95=EC=9E=A5=EC=9E=90=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../guide-book/components/GuideBookItem/{styled.tsx => styled.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/pages/guide-book/components/GuideBookItem/{styled.tsx => styled.ts} (100%) diff --git a/src/pages/guide-book/components/GuideBookItem/styled.tsx b/src/pages/guide-book/components/GuideBookItem/styled.ts similarity index 100% rename from src/pages/guide-book/components/GuideBookItem/styled.tsx rename to src/pages/guide-book/components/GuideBookItem/styled.ts From b65589f58948074d53446a5fb30390b1c3b952fe Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Sat, 3 Aug 2024 00:12:35 +0900 Subject: [PATCH 06/14] =?UTF-8?q?feat:=20=EB=AC=B4=ED=95=9C=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useGetGuideBookData.ts | 31 +++++++++++++++-- src/hooks/useObserver.ts | 33 ------------------- .../components/GuideBookItem/index.tsx | 1 - src/pages/guide-book/index.page.tsx | 12 ++++--- src/pages/guide-book/styled.ts | 10 ++++-- 5 files changed, 42 insertions(+), 45 deletions(-) delete mode 100644 src/hooks/useObserver.ts diff --git a/src/hooks/useGetGuideBookData.ts b/src/hooks/useGetGuideBookData.ts index ab37cb4..3037f77 100644 --- a/src/hooks/useGetGuideBookData.ts +++ b/src/hooks/useGetGuideBookData.ts @@ -1,10 +1,12 @@ +import { useEffect, useRef } from "react"; + import { useInfiniteQuery } from "@tanstack/react-query"; import { getGuideBookData } from "@/apis/api"; import { GUIDE_BOOK_KEYS } from "@/constants/queryKey"; export const useGetGuideBookData = () => { - const { data, fetchNextPage, hasNextPage, isLoading, isError } = + const { data, fetchNextPage, hasNextPage, isLoading, isFetching } = useInfiniteQuery({ queryKey: GUIDE_BOOK_KEYS.lists(), queryFn: ({ pageParam }) => getGuideBookData(pageParam), @@ -21,11 +23,34 @@ export const useGetGuideBookData = () => { }, }); + const observerRef = useRef(null); + + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + if (!entries[0].isIntersecting) { + return; + } + + fetchNextPage(); + }, + { threshold: 0.5 }, + ); + + if (!observerRef.current) { + return; + } + + observer.observe(observerRef.current); + + return () => observer.disconnect(); + }, [fetchNextPage, hasNextPage, isFetching, isLoading]); + return { guideBookList: data?.pages, - fetchNextPage, hasNextPage, isLoading, - isError, + isFetching, + observerRef, }; }; diff --git a/src/hooks/useObserver.ts b/src/hooks/useObserver.ts deleted file mode 100644 index ad71a7e..0000000 --- a/src/hooks/useObserver.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { useEffect, useRef } from "react"; - -import { - FetchNextPageOptions, - InfiniteQueryObserverResult, -} from "@tanstack/react-query"; - -export const useObserver = ( - fetchNextPage: ( - options?: FetchNextPageOptions, - ) => Promise>, -) => { - const refElement = useRef(null); - - useEffect(() => { - const observer = new IntersectionObserver( - (entries) => { - if (entries[0].isIntersecting) { - fetchNextPage(); - } - }, - { threshold: 0 }, - ); - - if (refElement.current) { - observer.observe(refElement.current); - } - - return () => observer.disconnect(); - }, [fetchNextPage]); - - return refElement; // 관찰 대상의 ref를 return -}; diff --git a/src/pages/guide-book/components/GuideBookItem/index.tsx b/src/pages/guide-book/components/GuideBookItem/index.tsx index 130db68..5aa19ae 100644 --- a/src/pages/guide-book/components/GuideBookItem/index.tsx +++ b/src/pages/guide-book/components/GuideBookItem/index.tsx @@ -7,7 +7,6 @@ interface GuideBookItemProps { } function GuideBookItem({ data }: GuideBookItemProps) { - console.log(data); return (

{`제목: ${data["제목"]}`}

diff --git a/src/pages/guide-book/index.page.tsx b/src/pages/guide-book/index.page.tsx index f929e84..489e2be 100644 --- a/src/pages/guide-book/index.page.tsx +++ b/src/pages/guide-book/index.page.tsx @@ -27,10 +27,11 @@ export const getServerSideProps = async () => { }; function GuideBookPage() { - const { fetchNextPage, hasNextPage, guideBookList } = useGetGuideBookData(); + const { hasNextPage, guideBookList, isLoading, isFetching, observerRef } = + useGetGuideBookData(); - if (!guideBookList) { - return null; + if (isLoading) { + return
Loading...
; } return ( @@ -39,13 +40,14 @@ function GuideBookPage() { 여행 가이드북 - {`총 ${guideBookList[0].totalCount}건`} + {`총 ${guideBookList?.[0].totalCount}건`} - {guideBookList.map((list) => + {guideBookList?.map((list) => list.data.map((data) => ( )), )} + {hasNextPage && !isFetching && } ); diff --git a/src/pages/guide-book/styled.ts b/src/pages/guide-book/styled.ts index 753b493..28f7fbe 100644 --- a/src/pages/guide-book/styled.ts +++ b/src/pages/guide-book/styled.ts @@ -1,6 +1,6 @@ import styled from "@emotion/styled"; -import { TABLET_MEDIA_QUERY, MOBILE_MEDIA_QUERY } from "@/styles/const"; +import { TABLET_MEDIA_QUERY } from "@/styles/const"; export const Container = styled.main` max-width: 120rem; @@ -45,10 +45,14 @@ export const ListBox = styled.ul` gap: 1rem; grid-template-columns: repeat(4, 1fr); place-items: center; - margin-top: 1rem; - border: 1px solid red; + margin: 1rem 0 3rem; @media ${TABLET_MEDIA_QUERY} { grid-template-columns: repeat(2, 1fr); } `; + +export const Observer = styled.div` + width: 100%; + height: 2rem; +`; From 8da234be7b8820eda25a65d258d02edf9d041398 Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Sat, 3 Aug 2024 13:53:07 +0900 Subject: [PATCH 07/14] =?UTF-8?q?feat:=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EC=97=86=EC=9D=84=20=EB=95=8C=20=EB=B3=B4=EC=97=AC=EC=A4=84=20?= =?UTF-8?q?UI=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/logo.svg | 441 ++++++++++++++++++++++++++++ src/pages/guide-book/index.page.tsx | 32 +- src/pages/guide-book/styled.ts | 29 +- 3 files changed, 492 insertions(+), 10 deletions(-) create mode 100644 public/icons/logo.svg diff --git a/public/icons/logo.svg b/public/icons/logo.svg new file mode 100644 index 0000000..50bfe18 --- /dev/null +++ b/public/icons/logo.svg @@ -0,0 +1,441 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/guide-book/index.page.tsx b/src/pages/guide-book/index.page.tsx index 489e2be..60c0ebc 100644 --- a/src/pages/guide-book/index.page.tsx +++ b/src/pages/guide-book/index.page.tsx @@ -1,3 +1,5 @@ +import Image from "next/image"; + import { dehydrate, QueryClient } from "@tanstack/react-query"; import { getGuideBookData } from "@/apis/api"; @@ -30,7 +32,7 @@ function GuideBookPage() { const { hasNextPage, guideBookList, isLoading, isFetching, observerRef } = useGetGuideBookData(); - if (isLoading) { + if (!guideBookList) { return
Loading...
; } @@ -41,14 +43,26 @@ function GuideBookPage() { {`총 ${guideBookList?.[0].totalCount}건`} - - {guideBookList?.map((list) => - list.data.map((data) => ( - - )), - )} - {hasNextPage && !isFetching && } - + {guideBookList.length < 0 ? ( + + {guideBookList?.map((list) => + list.data.map((data) => ( + + )), + )} + {hasNextPage && !isFetching && } + + ) : ( + + + 가이드북 데이터가 없습니다. + + )} ); } diff --git a/src/pages/guide-book/styled.ts b/src/pages/guide-book/styled.ts index 28f7fbe..5906083 100644 --- a/src/pages/guide-book/styled.ts +++ b/src/pages/guide-book/styled.ts @@ -1,6 +1,8 @@ +import Image from "next/image"; + import styled from "@emotion/styled"; -import { TABLET_MEDIA_QUERY } from "@/styles/const"; +import { TABLET_MEDIA_QUERY, MOBILE_MEDIA_QUERY } from "@/styles/const"; export const Container = styled.main` max-width: 120rem; @@ -56,3 +58,28 @@ export const Observer = styled.div` width: 100%; height: 2rem; `; + +export const EmptyBox = styled.div` + width: 100%; + height: auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 2.25rem; + font-weight: 800; + gap: 1rem; + padding-top: 1rem; + + @media ${TABLET_MEDIA_QUERY} { + font-size: 1.75rem; + } +`; + +export const LogoImage = styled(Image)` + width: 28rem; + + @media ${TABLET_MEDIA_QUERY} { + width: 21rem; + } +`; From b192952fae0696d17561a9d4f5f5493b39cece7f Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Sat, 3 Aug 2024 17:35:29 +0900 Subject: [PATCH 08/14] =?UTF-8?q?feat:=20=EB=A1=9C=EB=94=A9=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/.gitkeep | 0 src/components/Loading/index.tsx | 29 +++++++++ src/components/Loading/styled.ts | 93 +++++++++++++++++++++++++++++ src/pages/404.page.tsx | 3 - src/pages/guide-book/index.page.tsx | 9 ++- src/styles/404.styled.ts | 2 +- src/styles/reset.ts | 60 +++++++++++++++++++ 7 files changed, 187 insertions(+), 9 deletions(-) delete mode 100644 src/components/.gitkeep create mode 100644 src/components/Loading/index.tsx create mode 100644 src/components/Loading/styled.ts diff --git a/src/components/.gitkeep b/src/components/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Loading/index.tsx b/src/components/Loading/index.tsx new file mode 100644 index 0000000..aea6ce5 --- /dev/null +++ b/src/components/Loading/index.tsx @@ -0,0 +1,29 @@ +import * as S from "./styled"; + +function Loading() { + return ( + + + + FestiBook + + + 데이터를 불러오는 중입니다... + + + + + ); +} + +export default Loading; diff --git a/src/components/Loading/styled.ts b/src/components/Loading/styled.ts new file mode 100644 index 0000000..0775065 --- /dev/null +++ b/src/components/Loading/styled.ts @@ -0,0 +1,93 @@ +import styled from "@emotion/styled"; +import Fireworks from "@fireworks-js/react"; + +import { MOBILE_MEDIA_QUERY } from "@/styles/const"; + +export const FireworksContainer = styled(Fireworks)` + width: 100vw; + height: calc(100vh - 5px); +`; + +export const Container = styled.div` + @font-face { + font-family: "ONE-Mobile-POP"; + src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-POP.woff") + format("woff"); + font-weight: normal; + font-style: normal; + } + + width: 50rem; + min-width: 23.4375rem; + position: fixed; + top: 47%; + left: 50%; + transform: translate(-50%, -50%); + font-family: "ONE-Mobile-POP"; + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + + @media ${MOBILE_MEDIA_QUERY} { + gap: 1rem; + } +`; + +export const Title = styled.p` + font-weight: 800; + font-size: 7rem; + background-clip: text; + background: linear-gradient(to right, #e55d87, #5fc3e4) text; + + @media ${MOBILE_MEDIA_QUERY} { + font-size: 3.25rem; + } +`; + +export const TitleEffect = styled.span` + color: transparent; +`; + +export const Text = styled.p` + font-weight: 800; + font-size: 3rem; + background: linear-gradient(to right, #e55d87, #5fc3e4) text; + + @media ${MOBILE_MEDIA_QUERY} { + font-size: 1.75rem; + } +`; + +export const TextEffect = styled.span` + letter-spacing: 0.0625rem; + color: transparent; +`; + +export const Spinner = styled.div` + display: flex; + justify-content: center; + align-items: center; + border: 14px solid #f3f3f3; + border-top: 14px solid #ab88af; + border-radius: 50%; + width: 6.25rem; + height: 6.25rem; + animation: spin 1.5s linear infinite; + + @media ${MOBILE_MEDIA_QUERY} { + border: 10px solid #f3f3f3; + border-top: 10px solid #ab88af; + width: 4.375rem; + height: 4.375rem; + } + + @keyframes spin { + 0% { + transform: rotate(0deg); /* 시작 각도 */ + } + 100% { + transform: rotate(360deg); /* 끝 각도 */ + } + } +`; diff --git a/src/pages/404.page.tsx b/src/pages/404.page.tsx index 606730f..202f712 100644 --- a/src/pages/404.page.tsx +++ b/src/pages/404.page.tsx @@ -1,5 +1,3 @@ -import Fireworks from "@fireworks-js/react"; - import * as S from "../styles/404.styled"; function NotFound() { @@ -14,7 +12,6 @@ function NotFound() { brightness: { min: 30, max: 100 }, // 밝기 범위 decay: { min: 0.01, max: 0.02 }, // 소멸 속도 범위 }} - style={{ width: "100vw", height: "calc(100vh - 5px)" }} > 404 diff --git a/src/pages/guide-book/index.page.tsx b/src/pages/guide-book/index.page.tsx index 60c0ebc..0673377 100644 --- a/src/pages/guide-book/index.page.tsx +++ b/src/pages/guide-book/index.page.tsx @@ -1,8 +1,7 @@ -import Image from "next/image"; - import { dehydrate, QueryClient } from "@tanstack/react-query"; import { getGuideBookData } from "@/apis/api"; +import Loading from "@/components/Loading"; import { GUIDE_BOOK_KEYS } from "@/constants/queryKey"; import { useGetGuideBookData } from "@/hooks/useGetGuideBookData"; @@ -32,8 +31,8 @@ function GuideBookPage() { const { hasNextPage, guideBookList, isLoading, isFetching, observerRef } = useGetGuideBookData(); - if (!guideBookList) { - return
Loading...
; + if (!isLoading) { + return ; } return ( @@ -43,7 +42,7 @@ function GuideBookPage() { {`총 ${guideBookList?.[0].totalCount}건`} - {guideBookList.length < 0 ? ( + {guideBookList && guideBookList.length > 0 ? ( {guideBookList?.map((list) => list.data.map((data) => ( diff --git a/src/styles/404.styled.ts b/src/styles/404.styled.ts index 7edcd25..ac64402 100644 --- a/src/styles/404.styled.ts +++ b/src/styles/404.styled.ts @@ -8,7 +8,7 @@ import { MOBILE_MEDIA_QUERY } from "./const"; export const FireworksContainer = styled(Fireworks)` width: 100vw; - height: 100vh; + height: calc(100vh - 5px); `; export const Container = styled.div` diff --git a/src/styles/reset.ts b/src/styles/reset.ts index ae0561e..ccd3e11 100644 --- a/src/styles/reset.ts +++ b/src/styles/reset.ts @@ -1,6 +1,66 @@ import { css } from "@emotion/react"; const reset = css` + @font-face { + font-family: "Pretendard"; + font-weight: 400; + font-style: normal; + src: + url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff2") + format("woff2"), + url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff") + format("woff"); + font-display: swap; + } + + @font-face { + font-family: "Pretendard"; + font-weight: 500; + font-style: normal; + src: + url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff2") + format("woff2"), + url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff") + format("woff"); + font-display: swap; + } + + @font-face { + font-family: "Pretendard"; + font-weight: 600; + font-style: normal; + src: + url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.woff2") + format("woff2"), + url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.woff") + format("woff"); + font-display: swap; + } + + @font-face { + font-family: "Pretendard"; + font-weight: 700; + font-style: normal; + src: + url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff2") + format("woff2"), + url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff") + format("woff"); + font-display: swap; + } + + @font-face { + font-family: "Pretendard"; + font-weight: 800; + font-style: normal; + src: + url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.woff2") + format("woff2"), + url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.woff") + format("woff"); + font-display: swap; + } + html, body, p, From 0df01ac4cb53cf958701f93e8df7499b4e3a636c Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Sat, 3 Aug 2024 17:37:14 +0900 Subject: [PATCH 09/14] =?UTF-8?q?feat:=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EB=B6=84=EA=B8=B0=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/guide-book/index.page.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/guide-book/index.page.tsx b/src/pages/guide-book/index.page.tsx index 0673377..9c0fa18 100644 --- a/src/pages/guide-book/index.page.tsx +++ b/src/pages/guide-book/index.page.tsx @@ -31,7 +31,7 @@ function GuideBookPage() { const { hasNextPage, guideBookList, isLoading, isFetching, observerRef } = useGetGuideBookData(); - if (!isLoading) { + if (isLoading) { return ; } @@ -41,10 +41,10 @@ function GuideBookPage() { 여행 가이드북 - {`총 ${guideBookList?.[0].totalCount}건`} + {`총 ${guideBookList ? guideBookList[0].totalCount : 0}건`} {guideBookList && guideBookList.length > 0 ? ( - {guideBookList?.map((list) => + {guideBookList.map((list) => list.data.map((data) => ( )), From b4c6348706597d9937404b8abcc64bd5f67f5783 Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Sat, 3 Aug 2024 18:28:30 +0900 Subject: [PATCH 10/14] =?UTF-8?q?feat:=20=EA=B8=80=EC=94=A8=20=ED=85=8C?= =?UTF-8?q?=EB=91=90=EB=A6=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Loading/styled.ts | 2 ++ src/pages/guide-book/index.page.tsx | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Loading/styled.ts b/src/components/Loading/styled.ts index 0775065..1fe1b99 100644 --- a/src/components/Loading/styled.ts +++ b/src/components/Loading/styled.ts @@ -47,6 +47,7 @@ export const Title = styled.p` export const TitleEffect = styled.span` color: transparent; + -webkit-text-stroke: 0.001px #000; `; export const Text = styled.p` @@ -62,6 +63,7 @@ export const Text = styled.p` export const TextEffect = styled.span` letter-spacing: 0.0625rem; color: transparent; + -webkit-text-stroke: 0.001px #000; `; export const Spinner = styled.div` diff --git a/src/pages/guide-book/index.page.tsx b/src/pages/guide-book/index.page.tsx index 9c0fa18..a4ebaac 100644 --- a/src/pages/guide-book/index.page.tsx +++ b/src/pages/guide-book/index.page.tsx @@ -31,7 +31,7 @@ function GuideBookPage() { const { hasNextPage, guideBookList, isLoading, isFetching, observerRef } = useGetGuideBookData(); - if (isLoading) { + if (!isLoading) { return ; } From 112b7aed181a0293397b2ae26c74855fafb04549 Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Wed, 7 Aug 2024 22:49:52 +0900 Subject: [PATCH 11/14] =?UTF-8?q?refactor:=20=EB=A1=9C=EB=94=A9=20?= =?UTF-8?q?=EB=B6=84=EA=B8=B0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../guide-book/components/GuideBookItem/styled.ts | 12 ++++++++++++ src/pages/guide-book/index.page.tsx | 2 +- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/pages/guide-book/components/GuideBookItem/styled.ts b/src/pages/guide-book/components/GuideBookItem/styled.ts index e8d0f9a..eacbdcc 100644 --- a/src/pages/guide-book/components/GuideBookItem/styled.ts +++ b/src/pages/guide-book/components/GuideBookItem/styled.ts @@ -7,3 +7,15 @@ export const LinkItem = styled(Link)` height: 18rem; border: 1px solid #000; `; + +export const Frame = styled.iframe` + width: 100%; + height: 18rem; + border: 1px solid #000; +`; + +export const Embed = styled.embed` + width: 100%; + height: 18rem; + border: 1px solid #000; +`; diff --git a/src/pages/guide-book/index.page.tsx b/src/pages/guide-book/index.page.tsx index a4ebaac..9c0fa18 100644 --- a/src/pages/guide-book/index.page.tsx +++ b/src/pages/guide-book/index.page.tsx @@ -31,7 +31,7 @@ function GuideBookPage() { const { hasNextPage, guideBookList, isLoading, isFetching, observerRef } = useGetGuideBookData(); - if (!isLoading) { + if (isLoading) { return ; } From f6fa61b0e3de42902a97517903e7fdf0a9fe3e06 Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Sat, 10 Aug 2024 20:05:27 +0900 Subject: [PATCH 12/14] =?UTF-8?q?style:=20=EB=A1=9C=EB=94=A9=20=ED=85=8D?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Loading/styled.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Loading/styled.ts b/src/components/Loading/styled.ts index 1fe1b99..c5f6829 100644 --- a/src/components/Loading/styled.ts +++ b/src/components/Loading/styled.ts @@ -47,7 +47,7 @@ export const Title = styled.p` export const TitleEffect = styled.span` color: transparent; - -webkit-text-stroke: 0.001px #000; + -webkit-text-stroke: 0.001px #efefef; `; export const Text = styled.p` @@ -63,14 +63,14 @@ export const Text = styled.p` export const TextEffect = styled.span` letter-spacing: 0.0625rem; color: transparent; - -webkit-text-stroke: 0.001px #000; + -webkit-text-stroke: 0.001px #efefef; `; export const Spinner = styled.div` display: flex; justify-content: center; align-items: center; - border: 14px solid #f3f3f3; + border: 14px solid #e8e8e8; border-top: 14px solid #ab88af; border-radius: 50%; width: 6.25rem; From d1ee77b10b38122723b615380bb72351316744ab Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Wed, 14 Aug 2024 22:25:54 +0900 Subject: [PATCH 13/14] =?UTF-8?q?refactor:=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useGetGuideBookData.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useGetGuideBookData.ts b/src/hooks/useGetGuideBookData.ts index 3037f77..7bf5d73 100644 --- a/src/hooks/useGetGuideBookData.ts +++ b/src/hooks/useGetGuideBookData.ts @@ -23,7 +23,7 @@ export const useGetGuideBookData = () => { }, }); - const observerRef = useRef(null); + const observerRef = useRef(null); useEffect(() => { const observer = new IntersectionObserver( From d370d9d770bffdd6aca4f170437595ffdaafdfe8 Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Fri, 30 Aug 2024 20:29:35 +0900 Subject: [PATCH 14/14] =?UTF-8?q?refactor:=20=EC=95=85=EC=8B=9C=EC=98=A4?= =?UTF-8?q?=EC=8A=A4=20=EC=9D=B8=EC=8A=A4=ED=84=B4=EC=8A=A4=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/api.ts | 6 ++++-- src/apis/axios.ts | 17 ++++++----------- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/src/apis/api.ts b/src/apis/api.ts index 5b66042..d1fea6b 100644 --- a/src/apis/api.ts +++ b/src/apis/api.ts @@ -1,11 +1,13 @@ import { GuideBookType } from "@/types"; -import { guideBookInstance } from "./axios"; +import { setInstance } from "./axios"; export const getGuideBookData = async ( pageParam: number, ): Promise => { - const response = await guideBookInstance.get( + const response = await setInstance( + process.env.NEXT_PUBLIC_GUIDE_BOOK_API_BASE_URL!, + ).get( `/15123631/v1/uddi:33264f0a-158f-4a5d-95cd-99c740c8a097?page=${pageParam}&perPage=20&serviceKey=${process.env.NEXT_PUBLIC_DATA_GO_API_KEY}`, ); return response.data; diff --git a/src/apis/axios.ts b/src/apis/axios.ts index 18d4858..4a424b6 100644 --- a/src/apis/axios.ts +++ b/src/apis/axios.ts @@ -1,19 +1,14 @@ -import axios from "axios"; - -export const guideBookInstance = axios.create({ - baseURL: process.env.NEXT_PUBLIC_GUIDE_BOOK_API_BASE_URL, - headers: { - "Content-Type": "application/json", - }, -}); +import axios, { AxiosInstance } from "axios"; export const instance = axios.create({ baseURL: "baseURL 추가 예정", - headers: { - "Content-Type": "application/json", - }, }); +export const setInstance = (baseUrl: string): AxiosInstance => { + instance.defaults.baseURL = baseUrl; + return instance; +}; + // 헤더 토큰 추가할 때 사용 등등... instance.interceptors.request.use();