From de93eafee5a2c0ca01d74b7158d08fd11fd07110 Mon Sep 17 00:00:00 2001 From: hyeongrok7874 Date: Tue, 22 Aug 2023 15:43:30 +0900 Subject: [PATCH 01/53] Update client app QueryClient --- apps/client/src/app/providers.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/client/src/app/providers.tsx b/apps/client/src/app/providers.tsx index 0f7ef9c78..4d024da3e 100644 --- a/apps/client/src/app/providers.tsx +++ b/apps/client/src/app/providers.tsx @@ -6,7 +6,7 @@ import { ThemeProvider } from '@emotion/react'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { theme } from 'common'; +import { minutesToMs, theme } from 'common'; export default function Providers({ children }: { children: React.ReactNode }) { // TODO: client api 연동 시, queryclient option 공유 가능하도록 구성 변경 @@ -16,6 +16,8 @@ export default function Providers({ children }: { children: React.ReactNode }) { defaultOptions: { queries: { retry: false, + staleTime: minutesToMs(5), + cacheTime: minutesToMs(5), }, }, }) From e01aa847db71bd081b43b18e9c98371863b504fe Mon Sep 17 00:00:00 2001 From: hyeongrok7874 Date: Tue, 22 Aug 2023 15:43:58 +0900 Subject: [PATCH 02/53] Remove staleTime at useGetPostDetail --- packages/api/client/src/hooks/api/post/useGetPostDetail.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/api/client/src/hooks/api/post/useGetPostDetail.ts b/packages/api/client/src/hooks/api/post/useGetPostDetail.ts index e7ed28478..be2f2e728 100644 --- a/packages/api/client/src/hooks/api/post/useGetPostDetail.ts +++ b/packages/api/client/src/hooks/api/post/useGetPostDetail.ts @@ -13,5 +13,5 @@ export const useGetPostDetail = ( useQuery( postQueryKeys.getPostDetail(seq), () => get(postUrl.postDetail(seq)), - { staleTime: 1000, ...options } + options ); From 40273f84145ec680da9016a74f2a9c7568a10e08 Mon Sep 17 00:00:00 2001 From: hyeongrok7874 Date: Tue, 22 Aug 2023 15:44:57 +0900 Subject: [PATCH 03/53] Update getPostList QueryKey --- .../api/client/src/hooks/api/post/useGetPostList.ts | 2 +- packages/api/client/src/libs/queryKeys.ts | 11 +++++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/api/client/src/hooks/api/post/useGetPostList.ts b/packages/api/client/src/hooks/api/post/useGetPostList.ts index a3d0ba4f2..59ec1333b 100644 --- a/packages/api/client/src/hooks/api/post/useGetPostList.ts +++ b/packages/api/client/src/hooks/api/post/useGetPostList.ts @@ -17,7 +17,7 @@ export const useGetPostList = ( pageSize: number ) => useQuery( - postQueryKeys.getPostList(category, pageNumber), + postQueryKeys.getPostList(category, pageNumber, pageSize), () => get(postUrl.postList(category, pageNumber, pageSize)), { keepPreviousData: true, diff --git a/packages/api/client/src/libs/queryKeys.ts b/packages/api/client/src/libs/queryKeys.ts index d71fc71f7..02e4fedf6 100644 --- a/packages/api/client/src/libs/queryKeys.ts +++ b/packages/api/client/src/libs/queryKeys.ts @@ -1,11 +1,10 @@ import type { CategoryQueryStringType } from 'types'; export const postQueryKeys = { - getPostList: (category: CategoryQueryStringType, pageNumber: number) => [ - 'post', - 'list', - category, - pageNumber, - ], + getPostList: ( + category: CategoryQueryStringType, + pageNumber: number, + pageSize: number + ) => ['post', 'list', category, pageNumber, pageSize], getPostDetail: (postSeq: number) => ['post', 'detail', postSeq], } as const; From a43e0bb3cbdb1dbdb10c845fc5e318358a438734 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=98=88=EB=B9=88?= Date: Tue, 22 Aug 2023 17:03:12 +0900 Subject: [PATCH 04/53] Add svg --- apps/client/src/assets/index.ts | 2 ++ .../src/assets/svg/icon/CopyLinkIcon.tsx | 20 ++++++++++++++ .../src/assets/svg/icon/FavoriteIcon.tsx | 19 +++++++++++++ .../components/About/Location/Map/index.tsx | 27 ++++++++++++++++++- .../src/components/About/Location/index.tsx | 2 +- 5 files changed, 68 insertions(+), 2 deletions(-) create mode 100644 apps/client/src/assets/svg/icon/CopyLinkIcon.tsx create mode 100644 apps/client/src/assets/svg/icon/FavoriteIcon.tsx diff --git a/apps/client/src/assets/index.ts b/apps/client/src/assets/index.ts index d1898b376..8a06ce48c 100644 --- a/apps/client/src/assets/index.ts +++ b/apps/client/src/assets/index.ts @@ -2,8 +2,10 @@ export { default as ArrowIcon } from './svg/icon/ArrowIcon'; export { default as ChevronIcon } from './svg/icon/ChevronIcon'; export { default as CloseIcon } from './svg/icon/CloseIcon'; export { default as ContactIcon } from './svg/icon/ContactIcon'; +export { default as CopyLinkIcon } from './svg/icon/CopyLinkIcon'; export { default as DownChevronsIcon } from './about/section1/DownChevronsIcon'; export { default as DreamIcon } from './about/section3/DreamIcon'; +export { default as FavoriteIcon } from './svg/icon/FavoriteIcon'; export { default as FooterGSMLogo } from './svg/FooterGSMLogo'; export { default as FutureIcon } from './about/section3/FutureIcon'; export { default as HamburgerIcon } from './svg/icon/HamburgerIcon'; diff --git a/apps/client/src/assets/svg/icon/CopyLinkIcon.tsx b/apps/client/src/assets/svg/icon/CopyLinkIcon.tsx new file mode 100644 index 000000000..c522a77a5 --- /dev/null +++ b/apps/client/src/assets/svg/icon/CopyLinkIcon.tsx @@ -0,0 +1,20 @@ +const CopyLinkIcon = () => ( + + + +); + +export default CopyLinkIcon; diff --git a/apps/client/src/assets/svg/icon/FavoriteIcon.tsx b/apps/client/src/assets/svg/icon/FavoriteIcon.tsx new file mode 100644 index 000000000..a31d77673 --- /dev/null +++ b/apps/client/src/assets/svg/icon/FavoriteIcon.tsx @@ -0,0 +1,19 @@ +const FavoriteIcon = () => ( + + + +); + +export default FavoriteIcon; diff --git a/apps/client/src/components/About/Location/Map/index.tsx b/apps/client/src/components/About/Location/Map/index.tsx index 99a9b9e93..6b1a777ff 100644 --- a/apps/client/src/components/About/Location/Map/index.tsx +++ b/apps/client/src/components/About/Location/Map/index.tsx @@ -34,7 +34,7 @@ function Map({ latitude, longitude }: MapProps) { const infoWindow = new window.kakao.maps.InfoWindow({ content: - '
광주소프트웨어마이스터고등학교
', + '

광주소프트웨어마이스터고등학교


광주 광산구 상무대로 312(우) 62423(지번) 송정동 710-3
062-949-6800
', removable: true, }); @@ -60,6 +60,31 @@ function Map({ latitude, longitude }: MapProps) { const MapContainer = styled.div` width: 77.5rem; height: 25rem; + .hi { + width: 342px; + height: 200px; + background: #ffffff; + border-radius: 12px; + .locationContent { + width: 208px; + height: 92px; + h1 { + color: #212121; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 24px; + } + } + .IconBox { + .icon { + width: 32px; + height: 32px; + border-radius: 100%; + background: pink; + } + } + } @media ${({ theme }) => theme.breakPoint['1440']} { width: calc(100vw - 12.5rem); } diff --git a/apps/client/src/components/About/Location/index.tsx b/apps/client/src/components/About/Location/index.tsx index 0fe76cbef..cabca79d4 100644 --- a/apps/client/src/components/About/Location/index.tsx +++ b/apps/client/src/components/About/Location/index.tsx @@ -17,7 +17,7 @@ const Location = () => { return ( - 🔍 찾아오시는 길 + 🔍 찾아오시는 길 From 1069daafe20ddb9563485290c5fd55c2cfb79579 Mon Sep 17 00:00:00 2001 From: hyeongrok7874 Date: Tue, 22 Aug 2023 17:33:56 +0900 Subject: [PATCH 05/53] Add label in PaginationController --- packages/ui/src/components/PaginationController/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/components/PaginationController/index.tsx b/packages/ui/src/components/PaginationController/index.tsx index 797b4fc1d..fe19ec4ce 100644 --- a/packages/ui/src/components/PaginationController/index.tsx +++ b/packages/ui/src/components/PaginationController/index.tsx @@ -7,7 +7,7 @@ import { PaginationIcon } from 'ui/assets'; import * as S from './style'; interface PageNationControllerProps { - /** 1 ~ totalpages */ + /** 1 ~ totalPages */ pageNumber: number; totalPages: number; } @@ -36,6 +36,7 @@ const PaginationController: React.FC = ({ onClick={() => updatePageNumber(pageNumber - 1)} type='button' disabled={pageNumber === 1} + aria-label='이전' > @@ -59,6 +60,7 @@ const PaginationController: React.FC = ({ onClick={() => updatePageNumber(pageNumber + 1)} type='button' disabled={pageNumber === totalPages} + aria-label='다음' > From 8b3283259c0acf4e309ad826a72201bd50d543da Mon Sep 17 00:00:00 2001 From: hyeongrok7874 Date: Wed, 23 Aug 2023 10:05:28 +0900 Subject: [PATCH 06/53] Combine Category objects --- packages/common/src/shared/category.ts | 23 +++++++++++++++++++ packages/common/src/shared/categoryTitle.ts | 11 --------- packages/common/src/shared/index.ts | 3 +-- .../common/src/shared/postListQueryString.ts | 11 --------- 4 files changed, 24 insertions(+), 24 deletions(-) create mode 100644 packages/common/src/shared/category.ts delete mode 100644 packages/common/src/shared/categoryTitle.ts delete mode 100644 packages/common/src/shared/postListQueryString.ts diff --git a/packages/common/src/shared/category.ts b/packages/common/src/shared/category.ts new file mode 100644 index 000000000..7df52cc37 --- /dev/null +++ b/packages/common/src/shared/category.ts @@ -0,0 +1,23 @@ +import { CategoryType, CategoryQueryStringType } from 'types'; + +type CategoryTitleType = { + [key in CategoryType]: string; +}; + +export const categoryTitle: CategoryTitleType = { + notice: '📢 공지사항', + newsletter: '📃 가정통신문', + gallery: '📷 행사 갤러리', +} as const; + +type CategoryQueryString = { + [key in CategoryType]: CategoryQueryStringType; +}; + +export const categoryQueryString: CategoryQueryString = { + notice: 'NOTICE', + newsletter: 'FAMILY_NEWSLETTER', + gallery: 'EVENT_GALLERY', +} as const; + +export const categoryList = Object.keys(categoryTitle) as CategoryType[]; diff --git a/packages/common/src/shared/categoryTitle.ts b/packages/common/src/shared/categoryTitle.ts deleted file mode 100644 index c1610bee1..000000000 --- a/packages/common/src/shared/categoryTitle.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { CategoryType } from 'types'; - -type CategoryTitleType = { - [key in CategoryType]: string; -}; - -export const categoryTitle: CategoryTitleType = { - notice: '📢 공지사항', - newsletter: '📃 가정통신문', - gallery: '📷 행사 갤러리', -} as const; diff --git a/packages/common/src/shared/index.ts b/packages/common/src/shared/index.ts index 9a4a2e590..182b5fe19 100644 --- a/packages/common/src/shared/index.ts +++ b/packages/common/src/shared/index.ts @@ -1,2 +1 @@ -export * from './postListQueryString'; -export * from './categoryTitle'; +export * from './category'; diff --git a/packages/common/src/shared/postListQueryString.ts b/packages/common/src/shared/postListQueryString.ts deleted file mode 100644 index 344171c53..000000000 --- a/packages/common/src/shared/postListQueryString.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { CategoryQueryStringType, CategoryType } from 'types'; - -type PostListQueryStringType = { - [key in CategoryType]: CategoryQueryStringType; -}; - -export const categoryQueryString: PostListQueryStringType = { - notice: 'NOTICE', - newsletter: 'FAMILY_NEWSLETTER', - gallery: 'EVENT_GALLERY', -} as const; From 5417f6fd03a207b1d3383dbfdcaf0a8cf8eb81b9 Mon Sep 17 00:00:00 2001 From: hyeongrok7874 Date: Wed, 23 Aug 2023 10:05:43 +0900 Subject: [PATCH 07/53] Add useGetPostList options --- .../api/client/src/hooks/api/post/useGetPostList.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/api/client/src/hooks/api/post/useGetPostList.ts b/packages/api/client/src/hooks/api/post/useGetPostList.ts index 59ec1333b..630d66bef 100644 --- a/packages/api/client/src/hooks/api/post/useGetPostList.ts +++ b/packages/api/client/src/hooks/api/post/useGetPostList.ts @@ -4,6 +4,8 @@ import { get, postQueryKeys, postUrl } from 'api/client'; import type { CategoryQueryStringType, PostListType } from 'types'; +import type { UseQueryOptions } from '@tanstack/react-query'; + /** * * @param category - 'NOTICE' | 'FAMILY_NEWSLETTER' | 'EVENT_GALLERY' @@ -14,12 +16,14 @@ import type { CategoryQueryStringType, PostListType } from 'types'; export const useGetPostList = ( category: CategoryQueryStringType, pageNumber: number, - pageSize: number + pageSize: number, + options?: UseQueryOptions ) => - useQuery( + useQuery( postQueryKeys.getPostList(category, pageNumber, pageSize), - () => get(postUrl.postList(category, pageNumber, pageSize)), + () => get(postUrl.postList(category, pageNumber, pageSize)), { keepPreviousData: true, + ...options, } ); From 8ad33c8e2c9bf15679ba9ca31b5f64ca2b72d134 Mon Sep 17 00:00:00 2001 From: hyeongrok7874 Date: Wed, 23 Aug 2023 10:10:29 +0900 Subject: [PATCH 08/53] Add getPostList SSR --- apps/client/src/app/list/[category]/page.tsx | 72 +++++++++++++++---- .../src/components/ListPageContent/index.tsx | 15 ++-- 2 files changed, 68 insertions(+), 19 deletions(-) diff --git a/apps/client/src/app/list/[category]/page.tsx b/apps/client/src/app/list/[category]/page.tsx index 32e15278a..1bf25ce5d 100644 --- a/apps/client/src/app/list/[category]/page.tsx +++ b/apps/client/src/app/list/[category]/page.tsx @@ -1,6 +1,12 @@ +import { notFound, redirect } from 'next/navigation'; + import { Footer, Header, ListPageContent } from 'client/components'; -import type { CategoryType } from 'types'; +import { postUrl } from 'api/client'; + +import { categoryList, categoryQueryString } from 'common'; + +import type { CategoryType, PostListType } from 'types'; import type { Metadata } from 'next'; @@ -21,32 +27,74 @@ const categoryTitle: { }, } as const; -export const generateMetadata = async ({ +export const generateMetadata = ({ params: { category }, -}: ListPageProps): Promise => ({ - title: { absolute: categoryTitle[category].title }, - description: categoryTitle[category].description, - openGraph: { - title: categoryTitle[category].title, +}: ListPageProps): Metadata => { + if (!categoryList.includes(category)) { + return notFound(); + } + + return { + title: { absolute: categoryTitle[category].title }, description: categoryTitle[category].description, - url: `https://official.hellogsm.kr/list/${category}`, - }, -}); + openGraph: { + title: categoryTitle[category].title, + description: categoryTitle[category].description, + url: `https://official.hellogsm.kr/list/${category}`, + }, + }; +}; interface ListPageProps { params: { category: CategoryType }; searchParams: { pageNumber: string }; } -export default function ListPage({ +export default async function ListPage({ params: { category }, searchParams, }: ListPageProps) { + const pageNumber = Number(searchParams.pageNumber ?? 1); + const postList = await getPostList(category, pageNumber); + return ( <>
- +