From c8f04d44076e62550a8e0bd28511387ef6bcba47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EA=B4=80=EC=8B=9D?= <39869096+gwansikk@users.noreply.github.com> Date: Wed, 10 Apr 2024 17:51:45 +0900 Subject: [PATCH 01/11] =?UTF-8?q?refactor(member):=20=ED=99=88=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B3=B5=EC=A7=80=20UI=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0=20(#93)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/common/Notice/Notice.tsx | 71 ++++++++++++++ .../components/main/MainAlert/MainAlert.tsx | 98 ------------------- .../MainNoticeSection/MainNoticeSection.tsx | 65 ++++++++++++ apps/member/src/pages/MainPage/MainPage.tsx | 9 +- 4 files changed, 141 insertions(+), 102 deletions(-) create mode 100644 apps/member/src/components/common/Notice/Notice.tsx delete mode 100644 apps/member/src/components/main/MainAlert/MainAlert.tsx create mode 100644 apps/member/src/components/main/MainNoticeSection/MainNoticeSection.tsx diff --git a/apps/member/src/components/common/Notice/Notice.tsx b/apps/member/src/components/common/Notice/Notice.tsx new file mode 100644 index 00000000..14b96f1d --- /dev/null +++ b/apps/member/src/components/common/Notice/Notice.tsx @@ -0,0 +1,71 @@ +import useModal from '@hooks/common/useModal'; +import { calculateDDay, formattedDate } from '@utils/date'; +import { cn } from '@utils/string'; +import { useCallback } from 'react'; + +interface NoticeProps { + title: string; + content: string; + date: string; + showDDay?: boolean; + className?: string; +} + +const Notice = ({ + title, + content, + date, + showDDay = false, + className, +}: NoticeProps) => { + const { openModal } = useModal(); + + const handleNoticeClick = useCallback(() => { + openModal({ + title: '๐Ÿ“† ๊ณต์ง€', + content, + }); + }, [content, openModal]); + + let renderDDay: React.ReactNode | null = null; + if (showDDay) { + const dDay = calculateDDay(date); + renderDDay = ( +
= 14, + 'bg-sky-400': dDay >= 30, + }, + )} + > + D-{dDay} +
+ ); + } + + return ( +
+ +
+ ); +}; + +export default Notice; diff --git a/apps/member/src/components/main/MainAlert/MainAlert.tsx b/apps/member/src/components/main/MainAlert/MainAlert.tsx deleted file mode 100644 index 0564fc24..00000000 --- a/apps/member/src/components/main/MainAlert/MainAlert.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import Section from '@components/common/Section/Section'; -import { useState } from 'react'; -import DropdownButton from '@components/common/DropdownButton/DropdownButton'; -import classNames from 'classnames'; -import { calculateDDay, formattedDate } from '@utils/date'; -import useModal from '@hooks/common/useModal'; -import type { ScheduleItem } from '@type/schedule'; - -interface MainAlertProps { - data: Array; -} - -interface MainAlertItemProps { - className?: string; - title: string; - startDate: string; - detail: string; - onClick: (content: string) => void; -} - -const MainAlert = ({ data }: MainAlertProps) => { - const { openModal } = useModal(); - const [open, setOpen] = useState(false); - - if (data.length === 0) return null; - - const onClick = (content: string) => { - openModal({ - title: '๐Ÿ“† ์ผ์ •', - content, - }); - }; - - return ( -
-
- - {data.length > 1 && ( - setOpen((prev) => !prev)} - /> - )} -
-
-
-
- {data.slice(1).map(({ id, ...rest }) => ( - - ))} -
-
-
- ); -}; - -MainAlert.Item = ({ - className, - title, - startDate, - detail, - onClick, -}: MainAlertItemProps) => { - const dDay = calculateDDay(startDate); - - return ( -
onClick(detail)} - > -
-
14, - }, - )} - > - D-{dDay} -
-

{title}

-

- {formattedDate(startDate)} -

-
-
- ); -}; - -export default MainAlert; diff --git a/apps/member/src/components/main/MainNoticeSection/MainNoticeSection.tsx b/apps/member/src/components/main/MainNoticeSection/MainNoticeSection.tsx new file mode 100644 index 00000000..81cfb8fd --- /dev/null +++ b/apps/member/src/components/main/MainNoticeSection/MainNoticeSection.tsx @@ -0,0 +1,65 @@ +import Section from '@components/common/Section/Section'; +import { useState } from 'react'; +import DropdownButton from '@components/common/DropdownButton/DropdownButton'; +import classNames from 'classnames'; +import Notice from '@components/common/Notice/Notice'; +import { useSchedule } from '@hooks/queries'; +import { DATE_FORMAT } from '@constants/state'; +import { now } from '@utils/date'; + +const MainNoticeSection = () => { + const { data } = useSchedule({ + startDate: now().format(DATE_FORMAT.WITH_TIME), + }); + + const [open, setOpen] = useState(false); + /** + * ์ผ์ •์ด ์—†์„ ๊ฒฝ์šฐ ๋ Œ๋”๋งํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. + */ + if (data.items.length === 0) { + return null; + } + + const closestNotice = data.items[0]; + + return ( +
+
+ + {data.items.length > 1 && ( + setOpen((prev) => !prev)} + /> + )} +
+
+
+
+ {data.items.slice(1).map(({ id, title, detail, startDate }) => ( + + ))} +
+
+
+ ); +}; + +export default MainNoticeSection; diff --git a/apps/member/src/pages/MainPage/MainPage.tsx b/apps/member/src/pages/MainPage/MainPage.tsx index 8953ddf2..cdb5be9b 100644 --- a/apps/member/src/pages/MainPage/MainPage.tsx +++ b/apps/member/src/pages/MainPage/MainPage.tsx @@ -1,3 +1,4 @@ +import { Suspense } from 'react'; import Content from '@components/common/Content/Content'; import ImageBanner from '@components/common/ImageBanner/ImageBanner'; import NewsCardSection from '@components/main/NewsCardSection/NewsCardSection'; @@ -6,20 +7,18 @@ import { PATH } from '@constants/path'; import { useNews, useBlog, - useSchedule, useActivityPicture, useBirthday, useHire, } from '@hooks/queries'; import { useBoardsList } from '@hooks/queries/useBoardsList'; -import MainAlert from '@components/main/MainAlert/MainAlert'; +import MainNoticeSection from '@components/main/MainNoticeSection/MainNoticeSection'; import { BoardSection, BoardSectionItem, } from '@components/community/BoardSection'; const MainPage = () => { - const { data: mainAlertData } = useSchedule({}); const { data: mainBannerData } = useActivityPicture(); const { data: noticeData } = useBoardsList({ category: 'notice' }); const { data: QnAData } = useBoardsList({ category: 'qna' }); @@ -30,7 +29,9 @@ const MainPage = () => { return ( - + + + From 367d555b49e5cb274c39d267294509adaea9306e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EA=B4=80=EC=8B=9D?= <39869096+gwansikk@users.noreply.github.com> Date: Wed, 10 Apr 2024 18:20:41 +0900 Subject: [PATCH 02/11] =?UTF-8?q?refactor(member):=20=ED=99=9C=EB=8F=99?= =?UTF-8?q?=EC=82=AC=EC=A7=84=20API=20=EB=B3=80=EA=B2=BD=20(#93)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/ImageBanner/ImageBanner.tsx | 33 ------------------- .../components/main/MainBanner/MainBanner.tsx | 32 ++++++++++++++++++ apps/member/src/hooks/queries/index.ts | 2 +- ...ActivityPicture.ts => useActivityPhoto.ts} | 5 ++- apps/member/src/pages/MainPage/MainPage.tsx | 15 +++------ apps/member/src/types/activity.ts | 4 ++- 6 files changed, 45 insertions(+), 46 deletions(-) delete mode 100644 apps/member/src/components/common/ImageBanner/ImageBanner.tsx create mode 100644 apps/member/src/components/main/MainBanner/MainBanner.tsx rename apps/member/src/hooks/queries/{useActivityPicture.ts => useActivityPhoto.ts} (74%) diff --git a/apps/member/src/components/common/ImageBanner/ImageBanner.tsx b/apps/member/src/components/common/ImageBanner/ImageBanner.tsx deleted file mode 100644 index 59adcb3d..00000000 --- a/apps/member/src/components/common/ImageBanner/ImageBanner.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { ActivityPhotoItem } from '@type/activity'; -import Image from '../Image/Image'; - -interface ImageBannerProps { - data: Array; -} - -const ImageBanner = ({ data }: ImageBannerProps) => { - if (data.length === 0) { - return null; - } - - const { imageUrl, title, date } = data[0]; - - return ( -
- {title} -
-
-

{title}

-

{date}

-
-
- ); -}; - -export default ImageBanner; diff --git a/apps/member/src/components/main/MainBanner/MainBanner.tsx b/apps/member/src/components/main/MainBanner/MainBanner.tsx new file mode 100644 index 00000000..e535e7c8 --- /dev/null +++ b/apps/member/src/components/main/MainBanner/MainBanner.tsx @@ -0,0 +1,32 @@ +import Image from '@components/common/Image/Image'; +import { useActivityPhoto } from '@hooks/queries'; +import { createImageUrl } from '@utils/api'; + +const MainBanner = () => { + const { data } = useActivityPhoto(); + + if (data.items.length === 0) { + return null; + } + + const { title, date, files } = data.items[0]; + + return ( +
+ {title} +
+
+

{title}

+

{date}

+
+
+ ); +}; + +export default MainBanner; diff --git a/apps/member/src/hooks/queries/index.ts b/apps/member/src/hooks/queries/index.ts index 91fea0b7..cc8e232b 100644 --- a/apps/member/src/hooks/queries/index.ts +++ b/apps/member/src/hooks/queries/index.ts @@ -8,7 +8,7 @@ export * from './useActivityGroupBoardMutation'; export * from './useActivityGroupBoardsMyAssignment'; export * from './useActivityGroupMemberApplyMutation'; export * from './useActivityGroupMemberByStatus'; -export * from './useActivityPicture'; +export * from './useActivityPhoto'; export * from './useBirthday'; export * from './useBlog'; export * from './useBoardModifyMutation'; diff --git a/apps/member/src/hooks/queries/useActivityPicture.ts b/apps/member/src/hooks/queries/useActivityPhoto.ts similarity index 74% rename from apps/member/src/hooks/queries/useActivityPicture.ts rename to apps/member/src/hooks/queries/useActivityPhoto.ts index 02893797..6f7eef72 100644 --- a/apps/member/src/hooks/queries/useActivityPicture.ts +++ b/apps/member/src/hooks/queries/useActivityPhoto.ts @@ -2,7 +2,10 @@ import { getActivityPhoto } from '@api/activity'; import { QUERY_KEY } from '@constants/key'; import { useSuspenseQuery } from '@tanstack/react-query'; -export const useActivityPicture = (page = 0, size = 6) => { +/** + * ํ™œ๋™ ์‚ฌ์ง„์„ ์กฐํšŒํ•ฉ๋‹ˆ๋‹ค. + */ +export const useActivityPhoto = (page = 0, size = 6) => { return useSuspenseQuery({ queryKey: [QUERY_KEY.MAIN_ACTIVITY_PHOTO, page, size], queryFn: () => getActivityPhoto(page, size), diff --git a/apps/member/src/pages/MainPage/MainPage.tsx b/apps/member/src/pages/MainPage/MainPage.tsx index cdb5be9b..dd6554d8 100644 --- a/apps/member/src/pages/MainPage/MainPage.tsx +++ b/apps/member/src/pages/MainPage/MainPage.tsx @@ -1,25 +1,18 @@ import { Suspense } from 'react'; import Content from '@components/common/Content/Content'; -import ImageBanner from '@components/common/ImageBanner/ImageBanner'; import NewsCardSection from '@components/main/NewsCardSection/NewsCardSection'; import BirthdayList from '@components/main/BirthdayList/BirthdayList'; import { PATH } from '@constants/path'; -import { - useNews, - useBlog, - useActivityPicture, - useBirthday, - useHire, -} from '@hooks/queries'; +import { useNews, useBlog, useBirthday, useHire } from '@hooks/queries'; import { useBoardsList } from '@hooks/queries/useBoardsList'; import MainNoticeSection from '@components/main/MainNoticeSection/MainNoticeSection'; import { BoardSection, BoardSectionItem, } from '@components/community/BoardSection'; +import MainBanner from '@components/main/MainBanner/MainBanner'; const MainPage = () => { - const { data: mainBannerData } = useActivityPicture(); const { data: noticeData } = useBoardsList({ category: 'notice' }); const { data: QnAData } = useBoardsList({ category: 'qna' }); const { data: birthdayData } = useBirthday(); @@ -32,7 +25,9 @@ const MainPage = () => { - + + + Date: Wed, 10 Apr 2024 18:26:31 +0900 Subject: [PATCH 03/11] refactor(member): changed BirthdayList to BirthdaySection (#93) --- .../BirthdaySection.tsx} | 50 +++++++++---------- apps/member/src/pages/MainPage/MainPage.tsx | 9 ++-- 2 files changed, 29 insertions(+), 30 deletions(-) rename apps/member/src/components/main/{BirthdayList/BirthdayList.tsx => BirthdaySection/BirthdaySection.tsx} (77%) diff --git a/apps/member/src/components/main/BirthdayList/BirthdayList.tsx b/apps/member/src/components/main/BirthdaySection/BirthdaySection.tsx similarity index 77% rename from apps/member/src/components/main/BirthdayList/BirthdayList.tsx rename to apps/member/src/components/main/BirthdaySection/BirthdaySection.tsx index 1ba8ce43..539746d8 100644 --- a/apps/member/src/components/main/BirthdayList/BirthdayList.tsx +++ b/apps/member/src/components/main/BirthdaySection/BirthdaySection.tsx @@ -1,12 +1,8 @@ import Section from '@components/common/Section/Section'; import Image from '@components/common/Image/Image'; -import type { MemberType } from '@type/member'; import dayjs from 'dayjs'; import { createImageUrl } from '@utils/api'; - -interface BirthdayListProps { - data: Array; -} +import { useBirthday } from '@hooks/queries'; interface BirthdayCardProps { id: string; @@ -15,11 +11,32 @@ interface BirthdayCardProps { birth: string; } +const BirthdaySection = () => { + const { data } = useBirthday(); + + return ( +
+ + + {data.items.length === 0 ? ( +

+ ์ด๋ฒˆ ๋‹ฌ์—” ์ƒ์ผ์ž๊ฐ€ ์—†์–ด์š”. +

+ ) : ( + data.items.map(({ id, ...props }) => ( + + )) + )} + +
+ ); +}; + const BirthdayCard = ({ id, name, imageUrl, birth }: BirthdayCardProps) => { return (
{name} { ); }; -const BirthdayList = ({ data }: BirthdayListProps) => { - return ( -
- - - {data.length === 0 ? ( -

- ์ด๋ฒˆ ๋‹ฌ์—” ์ƒ์ผ์ž๊ฐ€ ์—†์–ด์š”! -

- ) : ( - data.map(({ id, ...props }) => ( - - )) - )} - -
- ); -}; - -export default BirthdayList; +export default BirthdaySection; diff --git a/apps/member/src/pages/MainPage/MainPage.tsx b/apps/member/src/pages/MainPage/MainPage.tsx index dd6554d8..85543ad9 100644 --- a/apps/member/src/pages/MainPage/MainPage.tsx +++ b/apps/member/src/pages/MainPage/MainPage.tsx @@ -1,9 +1,8 @@ import { Suspense } from 'react'; import Content from '@components/common/Content/Content'; import NewsCardSection from '@components/main/NewsCardSection/NewsCardSection'; -import BirthdayList from '@components/main/BirthdayList/BirthdayList'; import { PATH } from '@constants/path'; -import { useNews, useBlog, useBirthday, useHire } from '@hooks/queries'; +import { useNews, useBlog, useHire } from '@hooks/queries'; import { useBoardsList } from '@hooks/queries/useBoardsList'; import MainNoticeSection from '@components/main/MainNoticeSection/MainNoticeSection'; import { @@ -11,11 +10,11 @@ import { BoardSectionItem, } from '@components/community/BoardSection'; import MainBanner from '@components/main/MainBanner/MainBanner'; +import BirthdaySection from '@components/main/BirthdaySection/BirthdaySection'; const MainPage = () => { const { data: noticeData } = useBoardsList({ category: 'notice' }); const { data: QnAData } = useBoardsList({ category: 'qna' }); - const { data: birthdayData } = useBirthday(); const { data: blogData } = useBlog(); const { data: ITNewsData } = useNews(); const { data: hireData } = useHire(); @@ -41,7 +40,9 @@ const MainPage = () => { data={QnAData.items} /> - + + + Date: Wed, 10 Apr 2024 20:59:32 +0900 Subject: [PATCH 04/11] feat(member): add EmptyBox Component (#93) --- apps/member/src/components/common/EmptyBox/EmptyBox.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 apps/member/src/components/common/EmptyBox/EmptyBox.tsx diff --git a/apps/member/src/components/common/EmptyBox/EmptyBox.tsx b/apps/member/src/components/common/EmptyBox/EmptyBox.tsx new file mode 100644 index 00000000..fb3b41a9 --- /dev/null +++ b/apps/member/src/components/common/EmptyBox/EmptyBox.tsx @@ -0,0 +1,9 @@ +import { StrictPropsWithChildren } from '@type/component'; + +interface EmptyBoxProps extends StrictPropsWithChildren {} + +const EmptyBox = ({ children }: EmptyBoxProps) => { + return

{children}

; +}; + +export default EmptyBox; From 557c97c9292e2d5ceed414088c49a6c6e1785100 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EA=B4=80=EC=8B=9D?= <39869096+gwansikk@users.noreply.github.com> Date: Wed, 10 Apr 2024 21:29:06 +0900 Subject: [PATCH 05/11] =?UTF-8?q?refactor(member):=20blog=20section=20UI?= =?UTF-8?q?=20=EA=B0=9C=EC=84=A0=20(#93)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/common/Card/Card.tsx | 50 ------------------- .../components/common/PostCard/PostCard.tsx | 48 ++++++++++++++++++ .../main/BlogSection/BlogSection.tsx | 27 ++++++++++ .../main/NewsCardSection/NewsCardSection.tsx | 35 ------------- .../MyActivityGroupSection.tsx | 8 +-- 5 files changed, 79 insertions(+), 89 deletions(-) delete mode 100644 apps/member/src/components/common/Card/Card.tsx create mode 100644 apps/member/src/components/common/PostCard/PostCard.tsx create mode 100644 apps/member/src/components/main/BlogSection/BlogSection.tsx delete mode 100644 apps/member/src/components/main/NewsCardSection/NewsCardSection.tsx diff --git a/apps/member/src/components/common/Card/Card.tsx b/apps/member/src/components/common/Card/Card.tsx deleted file mode 100644 index 6ada4a14..00000000 --- a/apps/member/src/components/common/Card/Card.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { useNavigate } from 'react-router-dom'; -import Image from '../Image/Image'; -import { createImageUrl } from '@utils/api'; -import classNames from 'classnames'; - -interface CardProps { - to?: string; - image?: string; - title: string; - description?: string; -} - -const Card = ({ to, image, title, description }: CardProps) => { - const navigate = useNavigate(); - - const handleCardClick = () => { - to && navigate(to); - }; - - return ( -
- {image && ( - {title} - )} -
-

- {title} -

- {description && ( -

{description}

- )} -
-
- ); -}; - -export default Card; diff --git a/apps/member/src/components/common/PostCard/PostCard.tsx b/apps/member/src/components/common/PostCard/PostCard.tsx new file mode 100644 index 00000000..10f27a4c --- /dev/null +++ b/apps/member/src/components/common/PostCard/PostCard.tsx @@ -0,0 +1,48 @@ +import { useCallback } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { createImageUrl } from '@utils/api'; +import { cn } from '@utils/string'; +import Image from '../Image/Image'; + +interface PostCardProps { + to: string; + title: string; + subTitle?: string; + imageUrl?: string; +} + +const PostCard = ({ to, title, subTitle, imageUrl }: PostCardProps) => { + const navigate = useNavigate(); + + const handleClick = useCallback(() => navigate(to), [navigate, to]); + + return ( +
+ {title} +
+

+ {title} +

+ {subTitle && ( +

{subTitle}

+ )} +
+
+ ); +}; + +export default PostCard; diff --git a/apps/member/src/components/main/BlogSection/BlogSection.tsx b/apps/member/src/components/main/BlogSection/BlogSection.tsx new file mode 100644 index 00000000..4e32f809 --- /dev/null +++ b/apps/member/src/components/main/BlogSection/BlogSection.tsx @@ -0,0 +1,27 @@ +import { useBlog } from '@hooks/queries'; +import Section from '@components/common/Section/Section'; +import { COMMUNITY_MESSAGE } from '@constants/message'; +import PostCard from '@components/common/PostCard/PostCard'; +import { PATH } from '@constants/path'; +import EmptyBox from '@components/common/EmptyBox/EmptyBox'; + +const BlogSection = () => { + const { data } = useBlog(); + + return ( +
+ + + {data.items.length === 0 ? ( + {COMMUNITY_MESSAGE.NO_ARTICLE} + ) : ( + data.items.map((news) => ( + + )) + )} + +
+ ); +}; + +export default BlogSection; diff --git a/apps/member/src/components/main/NewsCardSection/NewsCardSection.tsx b/apps/member/src/components/main/NewsCardSection/NewsCardSection.tsx deleted file mode 100644 index 32153bba..00000000 --- a/apps/member/src/components/main/NewsCardSection/NewsCardSection.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import Card from '@components/common/Card/Card'; -import Section from '@components/common/Section/Section'; -import { COMMUNITY_MESSAGE } from '@constants/message'; -import { PATH } from '@constants/path'; -import type { BlogPostItem } from '@type/blog'; -import type { CommunityPostItem } from '@type/community'; - -interface NewsCardSectionProps { - to: string; - title: string; - data?: Array; -} - -const NewsCardSection = ({ to, title, data = [] }: NewsCardSectionProps) => { - const post_path = to === PATH.NEWS ? PATH.NEWS : PATH.BLOG; - - return ( -
- - - {data.length === 0 ? ( -

- {COMMUNITY_MESSAGE.NO_ARTICLE} -

- ) : ( - data.map((news, index) => ( - - )) - )} - -
- ); -}; - -export default NewsCardSection; diff --git a/apps/member/src/components/my/MyActivityGroupSection/MyActivityGroupSection.tsx b/apps/member/src/components/my/MyActivityGroupSection/MyActivityGroupSection.tsx index cd569587..abc5f854 100644 --- a/apps/member/src/components/my/MyActivityGroupSection/MyActivityGroupSection.tsx +++ b/apps/member/src/components/my/MyActivityGroupSection/MyActivityGroupSection.tsx @@ -1,4 +1,4 @@ -import Card from '@components/common/Card/Card'; +import PostCard from '@components/common/PostCard/PostCard'; import Section from '@components/common/Section/Section'; import { PATH_FINDER } from '@constants/path'; import type { ActivityGroupMemberMyType } from '@type/activity'; @@ -13,12 +13,12 @@ const MyActivityGroupSection = ({ data }: MyActivityGroupSectionProps) => { {data.map((activityGroup) => ( - ))} From 7c5638a179081aa16604ef5a9ff30182a1060b8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EA=B4=80=EC=8B=9D?= <39869096+gwansikk@users.noreply.github.com> Date: Wed, 10 Apr 2024 21:32:04 +0900 Subject: [PATCH 06/11] refactor(member): organization news (#93) --- .../OrganizationNewsSection.tsx | 31 +++++++++++++++++++ apps/member/src/constants/key.ts | 1 + apps/member/src/constants/path.ts | 2 -- .../member/src/hooks/queries/useBoardsList.ts | 13 +++++--- apps/member/src/hooks/queries/usePosts.ts | 13 ++++---- apps/member/src/pages/MainPage/MainPage.tsx | 18 +++++------ apps/member/src/types/blog.ts | 3 +- apps/member/src/types/community.ts | 6 ++-- apps/member/src/utils/community.ts | 24 +++++++++++--- 9 files changed, 81 insertions(+), 30 deletions(-) create mode 100644 apps/member/src/components/main/OrganizationNewsSection/OrganizationNewsSection.tsx diff --git a/apps/member/src/components/main/OrganizationNewsSection/OrganizationNewsSection.tsx b/apps/member/src/components/main/OrganizationNewsSection/OrganizationNewsSection.tsx new file mode 100644 index 00000000..7faf1ee6 --- /dev/null +++ b/apps/member/src/components/main/OrganizationNewsSection/OrganizationNewsSection.tsx @@ -0,0 +1,31 @@ +import EmptyBox from '@components/common/EmptyBox/EmptyBox'; +import PostCard from '@components/common/PostCard/PostCard'; +import Section from '@components/common/Section/Section'; +import { COMMUNITY_MESSAGE } from '@constants/message'; +import { PATH_FINDER } from '@constants/path'; +import { useBoardsList } from '@hooks/queries'; + +const OrganizationNewsSection = () => { + const { data } = useBoardsList({ category: 'organization' }); + + return ( +
+ + + {data.items.length === 0 ? ( + {COMMUNITY_MESSAGE.NO_ARTICLE} + ) : ( + data.items.map((news) => ( + + )) + )} + +
+ ); +}; + +export default OrganizationNewsSection; diff --git a/apps/member/src/constants/key.ts b/apps/member/src/constants/key.ts index 0ce8a96d..19048519 100644 --- a/apps/member/src/constants/key.ts +++ b/apps/member/src/constants/key.ts @@ -16,6 +16,7 @@ export const QUERY_KEY = { BORDER_FREE: 'BorderFREE', BORDER_QNA: 'BorderQNA', BORDER_GRADUATED: 'BorderGraduated', + ORGANIZATION: 'Organization', BOOK: 'Book', BOOK_DETAIL: 'BookDetail', BOOK_LOAN_RECORD: 'BookLoanRecord', diff --git a/apps/member/src/constants/path.ts b/apps/member/src/constants/path.ts index 6171159f..211cec41 100644 --- a/apps/member/src/constants/path.ts +++ b/apps/member/src/constants/path.ts @@ -24,7 +24,6 @@ export const PATH = { ACTIVITY_DETAIL: `/activity/:id`, ACTIVITY_CONFIG: '/activity/:id/config', ACTIVITY_ASSIGNMENT: '/activity/:id/:assignmentId', - NEWS: '/news', BLOG: '/blog', LIBRARY: '/library', LIBRARY_DETAIL: '/library/:id', @@ -35,7 +34,6 @@ export const PATH = { } as const; export const PATH_FINDER = { - NEWS_POST: (id: IDType) => createPath(PATH.NEWS, id), BLOG_POST: (id: IDType) => createPath(PATH.BLOG, id), COMMUNITY_POST: (sort: CommunityCategoryType, id: IDType) => createPath(PATH.COMMUNITY, sort, id), diff --git a/apps/member/src/hooks/queries/useBoardsList.ts b/apps/member/src/hooks/queries/useBoardsList.ts index 615474da..250ea167 100644 --- a/apps/member/src/hooks/queries/useBoardsList.ts +++ b/apps/member/src/hooks/queries/useBoardsList.ts @@ -9,15 +9,14 @@ import type { PostItem } from '@type/post'; import type { NewsItem } from '@type/news'; import type { HireItem } from '@type/hire'; -interface QueryOptions { - queryKey: string; - queryFn: () => Promise>; -} - interface UseBoardsListParams extends PaginationPramsType { category: CommunityCategoryType; } +type QueryOptions = { + queryKey: string; + queryFn: () => Promise>; +}; /** * ์ปค๋ฎค๋‹ˆํ‹ฐ ๊ฒŒ์‹œ๊ธ€๋ฅผ ์นดํ…Œ๊ณ ๋ฆฌ๋ณ„๋กœ ์กฐํšŒํ•ฉ๋‹ˆ๋‹ค. */ @@ -43,6 +42,10 @@ export const useBoardsList = ({ queryKey: QUERY_KEY.BORDER_GRADUATED, queryFn: () => getBoardsList('graduated', page, size), }, + organization: { + queryKey: QUERY_KEY.ORGANIZATION, + queryFn: () => getBoardsList('organization', page, size), + }, news: { queryKey: QUERY_KEY.NEWS, queryFn: () => getNews(page, size), diff --git a/apps/member/src/hooks/queries/usePosts.ts b/apps/member/src/hooks/queries/usePosts.ts index 0741c6e8..458403fc 100644 --- a/apps/member/src/hooks/queries/usePosts.ts +++ b/apps/member/src/hooks/queries/usePosts.ts @@ -11,7 +11,6 @@ import type { } from '@type/community'; type PostsType = CommunityPostDetailItem | NewsItem | HireItem; - /** * ์นดํ…Œ๊ณ ๋ฆฌ์— ๋”ฐ๋ฅธ ๊ฒŒ์‹œ๊ธ€์„ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค. */ @@ -33,6 +32,10 @@ export const usePosts = (category: CommunityCategoryType, id: string) => { queryKey: QUERY_KEY.BORDER_GRADUATED, queryFn: () => getBoardsDetail(id), }, + organization: { + queryKey: QUERY_KEY.ORGANIZATION, + queryFn: () => getBoardsDetail(id), + }, news: { queryKey: QUERY_KEY.NEWS, queryFn: () => getNewsPost(id), @@ -41,12 +44,10 @@ export const usePosts = (category: CommunityCategoryType, id: string) => { queryKey: QUERY_KEY.HIRE, queryFn: () => getHirePost(id), }, - }; - - const options = queryOptions[category]; + }[category]; return useSuspenseQuery({ - queryFn: options.queryFn, - queryKey: [options.queryKey, category, id], + queryKey: [queryOptions.queryKey, category, id], + queryFn: queryOptions.queryFn, }); }; diff --git a/apps/member/src/pages/MainPage/MainPage.tsx b/apps/member/src/pages/MainPage/MainPage.tsx index 85543ad9..0c04b713 100644 --- a/apps/member/src/pages/MainPage/MainPage.tsx +++ b/apps/member/src/pages/MainPage/MainPage.tsx @@ -1,8 +1,7 @@ import { Suspense } from 'react'; import Content from '@components/common/Content/Content'; -import NewsCardSection from '@components/main/NewsCardSection/NewsCardSection'; import { PATH } from '@constants/path'; -import { useNews, useBlog, useHire } from '@hooks/queries'; +import { useNews, useHire } from '@hooks/queries'; import { useBoardsList } from '@hooks/queries/useBoardsList'; import MainNoticeSection from '@components/main/MainNoticeSection/MainNoticeSection'; import { @@ -11,11 +10,12 @@ import { } from '@components/community/BoardSection'; import MainBanner from '@components/main/MainBanner/MainBanner'; import BirthdaySection from '@components/main/BirthdaySection/BirthdaySection'; +import BlogSection from '@components/main/BlogSection/BlogSection'; +import OrganizationNewsSection from '@components/main/OrganizationNewsSection/OrganizationNewsSection'; const MainPage = () => { const { data: noticeData } = useBoardsList({ category: 'notice' }); const { data: QnAData } = useBoardsList({ category: 'qna' }); - const { data: blogData } = useBlog(); const { data: ITNewsData } = useNews(); const { data: hireData } = useHire(); @@ -27,7 +27,9 @@ const MainPage = () => { - + + + { - + + + Date: Wed, 10 Apr 2024 22:45:40 +0900 Subject: [PATCH 07/11] refactor(member): add board suspense (#93) --- .../src/components/community/Board/Board.tsx | 82 +++++++++++++++++++ .../src/components/community/Board/index.ts | 6 ++ .../CommunityBoardCollectSection.tsx | 12 +-- .../src/pages/CommunityPage/CommunityPage.tsx | 73 +++++++---------- apps/member/src/pages/MainPage/MainPage.tsx | 51 +++++------- 5 files changed, 141 insertions(+), 83 deletions(-) create mode 100644 apps/member/src/components/community/Board/Board.tsx create mode 100644 apps/member/src/components/community/Board/index.ts diff --git a/apps/member/src/components/community/Board/Board.tsx b/apps/member/src/components/community/Board/Board.tsx new file mode 100644 index 00000000..7a1f4595 --- /dev/null +++ b/apps/member/src/components/community/Board/Board.tsx @@ -0,0 +1,82 @@ +import { PATH } from '@constants/path'; +import { BoardSectionItem } from '../BoardSection'; +import { useBoardsList, useHire, useNews } from '@hooks/queries'; + +const NoticeBoard = () => { + const { data } = useBoardsList({ category: 'notice' }); + + return ( + + ); +}; +NoticeBoard.displayName = 'NoticeBoard'; + +const FreeBoard = () => { + const { data } = useBoardsList({ category: 'free' }); + + return ( + + ); +}; +FreeBoard.displayName = 'NoticeBoard'; + +const QnABoard = () => { + const { data } = useBoardsList({ category: 'qna' }); + + return ( + + ); +}; +QnABoard.displayName = 'QnABoard'; + +const GraduatedBoard = () => { + const { data } = useBoardsList({ category: 'graduated' }); + + return ( + + ); +}; +GraduatedBoard.displayName = 'QnABoard'; + +const NewsBoard = () => { + const { data } = useNews(); + + return ( + + ); +}; +NewsBoard.displayName = 'NewsBoard'; + +const HireBoard = () => { + const { data } = useHire(); + + return ( + + ); +}; +HireBoard.displayName = 'HireBoard'; + +export { + NoticeBoard, + FreeBoard, + QnABoard, + GraduatedBoard, + NewsBoard, + HireBoard, +}; diff --git a/apps/member/src/components/community/Board/index.ts b/apps/member/src/components/community/Board/index.ts new file mode 100644 index 00000000..e19957c9 --- /dev/null +++ b/apps/member/src/components/community/Board/index.ts @@ -0,0 +1,6 @@ +export { NoticeBoard } from './Board.tsx'; +export { FreeBoard } from './Board.tsx'; +export { QnABoard } from './Board.tsx'; +export { GraduatedBoard } from './Board.tsx'; +export { NewsBoard } from './Board.tsx'; +export { HireBoard } from './Board.tsx'; diff --git a/apps/member/src/components/community/CommunityBoardCollectSection/CommunityBoardCollectSection.tsx b/apps/member/src/components/community/CommunityBoardCollectSection/CommunityBoardCollectSection.tsx index c3dd78a5..660d00d9 100644 --- a/apps/member/src/components/community/CommunityBoardCollectSection/CommunityBoardCollectSection.tsx +++ b/apps/member/src/components/community/CommunityBoardCollectSection/CommunityBoardCollectSection.tsx @@ -1,18 +1,14 @@ import Section from '@components/common/Section/Section'; import { PATH_FINDER } from '@constants/path'; +import { useBoards } from '@hooks/queries'; import { categoryToTitle } from '@utils/community'; import { formattedDate } from '@utils/date'; import { LiaCommentSolid } from 'react-icons/lia'; import { Link } from 'react-router-dom'; -import type { BoardItem } from '@type/board'; -interface CommunityBoardCollectSectionProps { - data: BoardItem[]; -} +const CommunityBoardCollectSection = () => { + const { data } = useBoards({ page: 0, size: 6 }); -const CommunityBoardCollectSection = ({ - data, -}: CommunityBoardCollectSectionProps) => { return (
- {data.map( + {data.items.map( ({ id, writerId, diff --git a/apps/member/src/pages/CommunityPage/CommunityPage.tsx b/apps/member/src/pages/CommunityPage/CommunityPage.tsx index 2cc1f967..4bff97ea 100644 --- a/apps/member/src/pages/CommunityPage/CommunityPage.tsx +++ b/apps/member/src/pages/CommunityPage/CommunityPage.tsx @@ -1,26 +1,23 @@ +import { Suspense } from 'react'; import { useNavigate } from 'react-router-dom'; import { Button } from '@clab/design-system'; import { PATH } from '@constants/path'; import Content from '@components/common/Content/Content'; import Header from '@components/common/Header/Header'; import CommunityBoardCollectSection from '@components/community/CommunityBoardCollectSection/CommunityBoardCollectSection'; -import { useHire, useNews, useBoardsList, useBoards } from '@hooks/queries'; +import { BoardSection } from '@components/community/BoardSection'; import { - BoardSection, - BoardSectionItem, -} from '@components/community/BoardSection'; + FreeBoard, + GraduatedBoard, + HireBoard, + NewsBoard, + NoticeBoard, + QnABoard, +} from '@components/community/Board'; const CommunityPage = () => { const navigate = useNavigate(); - const { data: noticeData } = useBoardsList({ category: 'notice' }); - const { data: freeData } = useBoardsList({ category: 'free' }); - const { data: QnAData } = useBoardsList({ category: 'qna' }); - const { data: graduatedData } = useBoardsList({ category: 'graduated' }); - const { data: newsData } = useNews(); - const { data: hireData } = useHire(); - const { data: collectData } = useBoards({ page: 0, size: 6 }); - return (
@@ -29,38 +26,28 @@ const CommunityPage = () => {
- - - - - - + + + + + + + + + + + + + + + + + + - + + + ); }; diff --git a/apps/member/src/pages/MainPage/MainPage.tsx b/apps/member/src/pages/MainPage/MainPage.tsx index 0c04b713..04214dc4 100644 --- a/apps/member/src/pages/MainPage/MainPage.tsx +++ b/apps/member/src/pages/MainPage/MainPage.tsx @@ -1,24 +1,19 @@ import { Suspense } from 'react'; import Content from '@components/common/Content/Content'; -import { PATH } from '@constants/path'; -import { useNews, useHire } from '@hooks/queries'; -import { useBoardsList } from '@hooks/queries/useBoardsList'; import MainNoticeSection from '@components/main/MainNoticeSection/MainNoticeSection'; -import { - BoardSection, - BoardSectionItem, -} from '@components/community/BoardSection'; import MainBanner from '@components/main/MainBanner/MainBanner'; import BirthdaySection from '@components/main/BirthdaySection/BirthdaySection'; import BlogSection from '@components/main/BlogSection/BlogSection'; import OrganizationNewsSection from '@components/main/OrganizationNewsSection/OrganizationNewsSection'; +import { BoardSection } from '@components/community/BoardSection'; +import { + HireBoard, + NewsBoard, + NoticeBoard, + QnABoard, +} from '@components/community/Board'; const MainPage = () => { - const { data: noticeData } = useBoardsList({ category: 'notice' }); - const { data: QnAData } = useBoardsList({ category: 'qna' }); - const { data: ITNewsData } = useNews(); - const { data: hireData } = useHire(); - return ( @@ -31,16 +26,12 @@ const MainPage = () => { - - + + + + + + @@ -49,16 +40,12 @@ const MainPage = () => { - - + + + + + + ); From 5ef989abeaea607781a175e0fa1ca252a24eca0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EA=B4=80=EC=8B=9D?= <39869096+gwansikk@users.noreply.github.com> Date: Thu, 11 Apr 2024 15:56:59 +0900 Subject: [PATCH 08/11] =?UTF-8?q?refactor(member):=20layout=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EA=B0=9C=EC=84=A0=20(#93)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/common/Content/Content.tsx | 2 +- apps/member/src/components/common/Nav/Nav.tsx | 22 +++++++++---------- .../CommunityBoardCollectSection.tsx | 4 ++-- .../main/BlogSection/BlogSection.tsx | 16 +++++++++----- .../OrganizationNewsSection.tsx | 18 ++++++++------- .../panels/PanelAside/PanelAside.tsx | 18 +++++++-------- apps/member/src/styles/global.css | 11 ---------- apps/member/tailwind.config.js | 2 ++ 8 files changed, 44 insertions(+), 49 deletions(-) diff --git a/apps/member/src/components/common/Content/Content.tsx b/apps/member/src/components/common/Content/Content.tsx index a5399c9a..8a1b3e0b 100644 --- a/apps/member/src/components/common/Content/Content.tsx +++ b/apps/member/src/components/common/Content/Content.tsx @@ -5,7 +5,7 @@ interface ContentProps { } const Content = ({ children }: ContentProps) => { - return
{children}
; + return
{children}
; }; export default Content; diff --git a/apps/member/src/components/common/Nav/Nav.tsx b/apps/member/src/components/common/Nav/Nav.tsx index 1ebc5c3a..76012c4d 100644 --- a/apps/member/src/components/common/Nav/Nav.tsx +++ b/apps/member/src/components/common/Nav/Nav.tsx @@ -1,10 +1,8 @@ +import useModal from '@hooks/common/useModal'; import { Link, useLocation } from 'react-router-dom'; import { PATH } from '@constants/path'; -import { FiSearch } from 'react-icons/fi'; -import { FiUser } from 'react-icons/fi'; -import { FiGrid } from 'react-icons/fi'; -import useModal from '@hooks/common/useModal'; import { MODE } from '@constants/environment'; +import { FiSearch, FiUser, FiGrid } from 'react-icons/fi'; const Nav = () => { const location = useLocation(); @@ -22,19 +20,19 @@ const Nav = () => { } }; - const onClickNotReady = () => { - openModal({ + const handleNotReadyClick = () => { + return openModal({ content: 'ํ•ด๋‹น ๊ธฐ๋Šฅ์€ ์ค€๋น„์ค‘์ž…๋‹ˆ๋‹ค.', }); }; return (