From fc9e17c76df61be9c0ecf59a7f9796f090db5304 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Thu, 22 Aug 2024 21:28:08 +0900 Subject: [PATCH 01/11] =?UTF-8?q?feat:=20=EC=95=8C=EB=A6=BC=EC=97=90=20?= =?UTF-8?q?=EB=8C=80=ED=95=9C=20=EA=B6=8C=ED=95=9C=EC=9D=84=20=EB=AF=B8=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=EC=8B=9C,=20=EC=95=8C=EB=A6=BC=EC=97=90=20?= =?UTF-8?q?=EB=8C=80=ED=95=9C=20=EC=84=A4=EB=AA=85=EC=9D=84=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=EB=A1=9C=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../KakaoOAuthLoginPage.tsx | 7 ++--- frontend/src/pages/MainPage/MainPage.style.ts | 7 ++++- frontend/src/pages/MainPage/MainPage.tsx | 27 ++++++++++++++++++- 3 files changed, 34 insertions(+), 7 deletions(-) diff --git a/frontend/src/pages/KakaoOAuthLoginPage/KakaoOAuthLoginPage.tsx b/frontend/src/pages/KakaoOAuthLoginPage/KakaoOAuthLoginPage.tsx index cb8c5c7ed..1751c7fdd 100644 --- a/frontend/src/pages/KakaoOAuthLoginPage/KakaoOAuthLoginPage.tsx +++ b/frontend/src/pages/KakaoOAuthLoginPage/KakaoOAuthLoginPage.tsx @@ -1,15 +1,12 @@ import ROUTES from '@_constants/routes'; import { getInviteCode } from '@_common/inviteCodeManager'; import { kakaoOAuth } from '@_apis/auth'; -import { requestPermission } from '@_service/notification'; import { setToken } from '@_utils/tokenManager'; import { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; -import useServeToken from '@_hooks/mutaions/useServeToken'; export default function KakaoOAuthLoginPage() { const navigate = useNavigate(); - const { mutate: serveToken } = useServeToken(); useEffect(() => { const loginKakaoOAuth = async () => { @@ -23,7 +20,7 @@ export default function KakaoOAuthLoginPage() { const response = await kakaoOAuth(code); setToken(response.data.accessToken); - requestPermission(serveToken); + const inviteCode = getInviteCode(); if (inviteCode) { navigate(`${ROUTES.darakbangInvitationRoute}?code=${inviteCode}`); @@ -34,7 +31,7 @@ export default function KakaoOAuthLoginPage() { }; loginKakaoOAuth(); - }, [navigate, serveToken]); + }, [navigate]); return null; } diff --git a/frontend/src/pages/MainPage/MainPage.style.ts b/frontend/src/pages/MainPage/MainPage.style.ts index fa0fb22a2..5223a4260 100644 --- a/frontend/src/pages/MainPage/MainPage.style.ts +++ b/frontend/src/pages/MainPage/MainPage.style.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/react'; +import { css, Theme } from '@emotion/react'; export const headerButton = css` background: none; @@ -11,3 +11,8 @@ export const headerLeft = css` align-items: center; font-size: 100%; `; + +export const ModalContent = (props: { theme: Theme }) => css` + ${props.theme.typography.b1} + margin: 5rem; +`; diff --git a/frontend/src/pages/MainPage/MainPage.tsx b/frontend/src/pages/MainPage/MainPage.tsx index c00e7d8c3..6ff11b493 100644 --- a/frontend/src/pages/MainPage/MainPage.tsx +++ b/frontend/src/pages/MainPage/MainPage.tsx @@ -1,6 +1,6 @@ import * as S from './MainPage.style'; -import { Fragment, useMemo, useState } from 'react'; +import { Fragment, useEffect, useMemo, useState } from 'react'; import MoimTabBar, { MainPageTab } from '@_components/MoimTabBar/MoimTabBar'; import OptionsPanel, { OptionsPanelOption, @@ -28,10 +28,14 @@ import useMyRoleInDarakbang from '@_hooks/queries/useMyDarakbangRole'; import { useNavigate } from 'react-router-dom'; import useNowDarakbangName from '@_hooks/queries/useNowDarakbangNameById'; import useServeToken from '@_hooks/mutaions/useServeToken'; +import Modal from '@_components/Modal/Modal'; +import { useTheme } from '@emotion/react'; +import Button from '@_components/Button/Button'; export default function MainPage() { const navigate = useNavigate(); const { mutate } = useServeToken(); + const theme = useTheme(); const [currentTab, setCurrentTab] = useState('모임목록'); const [isDarakbangMenuOpened, setIsDarakbangMenuOpened] = useState(false); @@ -41,6 +45,16 @@ export default function MainPage() { const nowDarakbangId = getLastDarakbangId(); const { myRoleInDarakbang: myRoleInNowDarakbang } = useMyRoleInDarakbang(); + const [isModalOpen, setIsModalOpen] = useState(false); + useEffect(() => { + if (window.Notification && window.Notification.permission === 'default') { + setIsModalOpen(true); + } + }, []); + + const handleModalClose = () => { + setIsModalOpen(false); + }; const handleTabClick = (tab: MainPageTab) => { setCurrentTab(tab); }; @@ -169,6 +183,17 @@ export default function MainPage() { + {isModalOpen && ( + +
+ 알림을 허용하시면 모임에 대한 알림을 받을 수 있습니다. 우측 상단에 + 알림 버튼을 눌러주세요 +
+ + + )} ); From 542a048621f4b40da3aae746d5b6287e159fa24b Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Thu, 22 Aug 2024 21:33:37 +0900 Subject: [PATCH 02/11] =?UTF-8?q?feat:=20=EC=95=8C=EB=A6=BC=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=ED=8F=B0=ED=8A=B8=EB=A5=BC=20s1=EC=9C=BC=EB=A1=9C?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/MainPage/MainPage.style.ts | 2 +- frontend/src/pages/MainPage/MainPage.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/MainPage/MainPage.style.ts b/frontend/src/pages/MainPage/MainPage.style.ts index 5223a4260..2e6cd5a2d 100644 --- a/frontend/src/pages/MainPage/MainPage.style.ts +++ b/frontend/src/pages/MainPage/MainPage.style.ts @@ -13,6 +13,6 @@ export const headerLeft = css` `; export const ModalContent = (props: { theme: Theme }) => css` - ${props.theme.typography.b1} + ${props.theme.typography.s1} margin: 5rem; `; diff --git a/frontend/src/pages/MainPage/MainPage.tsx b/frontend/src/pages/MainPage/MainPage.tsx index 6ff11b493..28fb25aa8 100644 --- a/frontend/src/pages/MainPage/MainPage.tsx +++ b/frontend/src/pages/MainPage/MainPage.tsx @@ -186,8 +186,8 @@ export default function MainPage() { {isModalOpen && (
- 알림을 허용하시면 모임에 대한 알림을 받을 수 있습니다. 우측 상단에 - 알림 버튼을 눌러주세요 + 알림을 허용하시면 모임에 대한 알림을 받을 수 있습니다. +
우측 상단에 알림 버튼을 눌러주세요
+ + )} + ); } From 3b624643e1bd4d999e95a5afcfc290c9305516d4 Mon Sep 17 00:00:00 2001 From: cys4585 Date: Thu, 22 Aug 2024 22:04:04 +0900 Subject: [PATCH 05/11] =?UTF-8?q?feat:=20=EC=B1=84=ED=8C=85=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ChatCardListSkeleton.style.ts | 8 ++++++ .../ChatListSkeleton/ChatCardListSkeleton.tsx | 17 ++++++++++++ .../ChatCardSkeleton.stories.tsx | 16 +++++++++++ .../ChatCardSkeleton.style.ts | 27 +++++++++++++++++++ .../ChatCardSkeleton/ChatCardSkeleton.tsx | 16 +++++++++++ frontend/src/pages/ChatPage/ChatPage.tsx | 8 ++++-- 6 files changed, 90 insertions(+), 2 deletions(-) create mode 100644 frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardListSkeleton.style.ts create mode 100644 frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardListSkeleton.tsx create mode 100644 frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardSkeleton/ChatCardSkeleton.stories.tsx create mode 100644 frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardSkeleton/ChatCardSkeleton.style.ts create mode 100644 frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardSkeleton/ChatCardSkeleton.tsx diff --git a/frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardListSkeleton.style.ts b/frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardListSkeleton.style.ts new file mode 100644 index 000000000..e57f33377 --- /dev/null +++ b/frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardListSkeleton.style.ts @@ -0,0 +1,8 @@ +import { css } from '@emotion/react'; + +export const cardListSection = css` + display: flex; + flex-direction: column; + gap: 1.2rem; + width: 100%; +`; diff --git a/frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardListSkeleton.tsx b/frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardListSkeleton.tsx new file mode 100644 index 000000000..cd40fc786 --- /dev/null +++ b/frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardListSkeleton.tsx @@ -0,0 +1,17 @@ +import ChatCardSkeleton from './ChatCardSkeleton/ChatCardSkeleton'; +import * as S from './ChatCardListSkeleton.style'; + +export default function ChatCardListSkeleton() { + return ( +
+ + + + + + + + +
+ ); +} diff --git a/frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardSkeleton/ChatCardSkeleton.stories.tsx b/frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardSkeleton/ChatCardSkeleton.stories.tsx new file mode 100644 index 000000000..b6d13572f --- /dev/null +++ b/frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardSkeleton/ChatCardSkeleton.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import ChatCardSkeleton from './ChatCardSkeleton'; + +const meta = { + component: ChatCardSkeleton, + title: 'Components/ChatCardSkeleton', +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: {}, + render: (args) => , +}; diff --git a/frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardSkeleton/ChatCardSkeleton.style.ts b/frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardSkeleton/ChatCardSkeleton.style.ts new file mode 100644 index 000000000..f61b57b94 --- /dev/null +++ b/frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardSkeleton/ChatCardSkeleton.style.ts @@ -0,0 +1,27 @@ +import { css } from '@emotion/react'; + +export const cardBox = css` + display: flex; + flex-direction: column; + gap: 1rem; + + width: 100%; + padding: 2rem 2.4rem; + + background: white; + border-radius: 2.5rem; + box-shadow: rgb(0 0 0 / 24%) 0 3px 8px; +`; + +export const messageContainer = css` + display: flex; + flex-direction: column; + gap: 0.4rem; + justify-content: space-evenly; +`; + +export const detailInfo = css` + display: flex; + flex-direction: column; + gap: 0.6rem; +`; diff --git a/frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardSkeleton/ChatCardSkeleton.tsx b/frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardSkeleton/ChatCardSkeleton.tsx new file mode 100644 index 000000000..8ef9313c8 --- /dev/null +++ b/frontend/src/pages/ChatPage/ChatListSkeleton/ChatCardSkeleton/ChatCardSkeleton.tsx @@ -0,0 +1,16 @@ +import SkeletonPiece from '@_components/Skeleton/SkeletonPiece'; +import * as S from './ChatCardSkeleton.style'; + +export default function ChatCardSkeleton() { + return ( +
+
+ +
+ +
+ +
+
+ ); +} diff --git a/frontend/src/pages/ChatPage/ChatPage.tsx b/frontend/src/pages/ChatPage/ChatPage.tsx index d766b3d58..4a3808a1b 100644 --- a/frontend/src/pages/ChatPage/ChatPage.tsx +++ b/frontend/src/pages/ChatPage/ChatPage.tsx @@ -10,12 +10,14 @@ import useChatPreviews from '@_hooks/queries/useChatPreiview'; import { useNavigate } from 'react-router-dom'; import useNowDarakbangName from '@_hooks/queries/useNowDarakbangNameById'; import { useTheme } from '@emotion/react'; +import ChatCardListSkeleton from './ChatListSkeleton/ChatCardListSkeleton'; export default function ChatPage() { const theme = useTheme(); - const { chatPreviews } = useChatPreviews(); + const { chatPreviews, isLoading } = useChatPreviews(); const { darakbangName } = useNowDarakbangName(); const navigate = useNavigate(); + return ( @@ -26,7 +28,9 @@ export default function ChatPage() { - {chatPreviews && chatPreviews.length > 0 ? ( + {isLoading ? ( + + ) : chatPreviews && chatPreviews.length > 0 ? ( chatPreviews?.map((chatPreview) => ( Date: Thu, 22 Aug 2024 22:13:31 +0900 Subject: [PATCH 06/11] =?UTF-8?q?fix:=20=ED=97=A4=EB=8D=94=EC=9D=98=20?= =?UTF-8?q?=EB=8B=A4=EB=9D=BD=EB=B0=A9=20=EC=9D=B4=EB=A6=84=EC=9D=B4=20?= =?UTF-8?q?=EC=A7=A7=EA=B2=8C=20=EB=82=98=EC=98=A4=EB=8A=94=20=EA=B2=83?= =?UTF-8?q?=EC=9D=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DarakbangNameWrapper/DarakbangNameWrapper.style.ts | 4 +++- .../src/pages/DarakbangLandingPage/DarakbangLandingPage.tsx | 6 +++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts b/frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts index 7c41d65d8..432b21452 100644 --- a/frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts +++ b/frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts @@ -2,8 +2,10 @@ import { SerializedStyles, css } from '@emotion/react'; export const name = ({ font }: { font: string | SerializedStyles }) => css` ${font} + + max-width: 40vw; overflow-x: hidden; - max-width: 30%; text-overflow: ellipsis; + white-space: nowrap; `; diff --git a/frontend/src/pages/DarakbangLandingPage/DarakbangLandingPage.tsx b/frontend/src/pages/DarakbangLandingPage/DarakbangLandingPage.tsx index 83c0a6105..2fff4830e 100644 --- a/frontend/src/pages/DarakbangLandingPage/DarakbangLandingPage.tsx +++ b/frontend/src/pages/DarakbangLandingPage/DarakbangLandingPage.tsx @@ -6,6 +6,8 @@ import HighlightSpan from '@_components/HighlightSpan/HighlightSpan'; import useMyInfo from '@_hooks/queries/useMyInfo'; import { useNavigate } from 'react-router-dom'; import useNowDarakbangName from '@_hooks/queries/useNowDarakbangNameById'; +import { theme } from '@_common/theme/theme.style'; +import { common } from '@_common/common.style'; export default function DarakbangLandingPage() { const navigate = useNavigate(); @@ -16,7 +18,9 @@ export default function DarakbangLandingPage() { - {darakbangName} + + {darakbangName} + From 399a602a792f9c7a42b6a7089b8df9b2367ba66b Mon Sep 17 00:00:00 2001 From: cys4585 Date: Thu, 22 Aug 2024 22:13:37 +0900 Subject: [PATCH 07/11] =?UTF-8?q?feat:=20=ED=95=B4=EC=A3=BC=EC=84=B8?= =?UTF-8?q?=EC=9A=94=EB=AA=A9=EB=A1=9D=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PleaseCardListSkeleton.style.ts | 7 ++++ .../PleaseCardListSkeleton.tsx | 15 +++++++++ .../PleaseCardSkeleton.stories.tsx | 16 +++++++++ .../PleaseCardSkeleton.style.ts | 33 +++++++++++++++++++ .../PleaseCardSkeleton/PleaseCardSkeleton.tsx | 21 ++++++++++++ .../src/components/PleaseList/PleaseList.tsx | 3 +- 6 files changed, 94 insertions(+), 1 deletion(-) create mode 100644 frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardListSkeleton.style.ts create mode 100644 frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardListSkeleton.tsx create mode 100644 frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardSkeleton/PleaseCardSkeleton.stories.tsx create mode 100644 frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardSkeleton/PleaseCardSkeleton.style.ts create mode 100644 frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardSkeleton/PleaseCardSkeleton.tsx diff --git a/frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardListSkeleton.style.ts b/frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardListSkeleton.style.ts new file mode 100644 index 000000000..1671b7dbf --- /dev/null +++ b/frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardListSkeleton.style.ts @@ -0,0 +1,7 @@ +import { css } from '@emotion/react'; + +export const cardListSection = css` + display: flex; + flex-direction: column; + gap: 1.2rem; +`; diff --git a/frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardListSkeleton.tsx b/frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardListSkeleton.tsx new file mode 100644 index 000000000..a72e42c7e --- /dev/null +++ b/frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardListSkeleton.tsx @@ -0,0 +1,15 @@ +import * as S from './PleaseCardListSkeleton.style'; +import PleaseCardSkeleton from './PleaseCardSkeleton/PleaseCardSkeleton'; + +export default function PleaseCardListSkeleton() { + return ( +
+ + + + + + +
+ ); +} diff --git a/frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardSkeleton/PleaseCardSkeleton.stories.tsx b/frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardSkeleton/PleaseCardSkeleton.stories.tsx new file mode 100644 index 000000000..53d45f19b --- /dev/null +++ b/frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardSkeleton/PleaseCardSkeleton.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import PleaseCardSkeleton from './PleaseCardSkeleton'; + +const meta = { + component: PleaseCardSkeleton, + title: 'Components/PleaseCardSkeleton', +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: {}, + render: (args) => , +}; diff --git a/frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardSkeleton/PleaseCardSkeleton.style.ts b/frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardSkeleton/PleaseCardSkeleton.style.ts new file mode 100644 index 000000000..a346bc576 --- /dev/null +++ b/frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardSkeleton/PleaseCardSkeleton.style.ts @@ -0,0 +1,33 @@ +import { css } from '@emotion/react'; + +export const cardBox = css` + display: flex; + gap: 1.6rem; + justify-content: space-between; + + width: 100%; + padding: 2rem 2.4rem; + + background: white; + border-radius: 2.5rem; + box-shadow: rgb(0 0 0 / 24%) 0 3px 8px; +`; + +export const contentWrapper = css` + display: flex; + flex-direction: column; + gap: 0.8rem; +`; + +export const headerWrapper = css` + display: flex; + gap: 0.6rem; + align-items: center; +`; + +export const actionWrapper = css` + display: flex; + flex-direction: column; + gap: 1rem; + align-items: center; +`; diff --git a/frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardSkeleton/PleaseCardSkeleton.tsx b/frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardSkeleton/PleaseCardSkeleton.tsx new file mode 100644 index 000000000..c99ba6007 --- /dev/null +++ b/frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardSkeleton/PleaseCardSkeleton.tsx @@ -0,0 +1,21 @@ +import SkeletonPiece from '@_components/Skeleton/SkeletonPiece'; +import * as S from './PleaseCardSkeleton.style'; + +export default function PleaseCardSkeleton() { + return ( +
+
+
+ + +
+ +
+ +
+ + +
+
+ ); +} diff --git a/frontend/src/components/PleaseList/PleaseList.tsx b/frontend/src/components/PleaseList/PleaseList.tsx index 9dac20f48..730bc5c23 100644 --- a/frontend/src/components/PleaseList/PleaseList.tsx +++ b/frontend/src/components/PleaseList/PleaseList.tsx @@ -1,12 +1,13 @@ import MissingFallback from '@_components/MissingFallback/MissingFallback'; import PleaseCardList from '@_components/PleaseCardList/PleaseCardList'; import usePleases from '@_hooks/queries/usePleases'; +import PleaseCardListSkeleton from './PleaseCardListSkeleton/PleaseCardListSkeleton'; export default function PleaseList() { const { pleases, isLoading } = usePleases(); if (isLoading) { - return
로딩중...
; + return ; } return pleases && pleases.length > 0 ? ( From 62dae27c60f2ecda28eff8446dfd0db2fd5f7c82 Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Thu, 22 Aug 2024 22:44:09 +0900 Subject: [PATCH 08/11] =?UTF-8?q?feat:=20=EB=AA=A8=EC=9E=84=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=8A=A4=EC=BC=88?= =?UTF-8?q?=EB=A0=88=ED=86=A4=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CommentCard/CommentCardSkeleton.tsx | 25 ++ .../CommentList/CommentListSkeleton.tsx | 22 ++ .../MoimDescriptionSkeleton.tsx | 34 +++ .../MoimInfomationSkeleton.tsx | 39 +++ .../MoimSummary/MoimSummarySkeleton.tsx | 15 + .../ProfileList/ProfileListSkeleton.tsx | 21 ++ frontend/src/components/Tag/TagSkeleton.tsx | 5 + .../pages/MoimDetailPage/MoimDetailPage.tsx | 280 +++++++++++------- 8 files changed, 333 insertions(+), 108 deletions(-) create mode 100644 frontend/src/components/CommentCard/CommentCardSkeleton.tsx create mode 100644 frontend/src/components/CommentList/CommentListSkeleton.tsx create mode 100644 frontend/src/components/MoimDescription/MoimDescriptionSkeleton.tsx create mode 100644 frontend/src/components/MoimInformation/MoimInfomationSkeleton.tsx create mode 100644 frontend/src/components/MoimSummary/MoimSummarySkeleton.tsx create mode 100644 frontend/src/components/ProfileList/ProfileListSkeleton.tsx create mode 100644 frontend/src/components/Tag/TagSkeleton.tsx diff --git a/frontend/src/components/CommentCard/CommentCardSkeleton.tsx b/frontend/src/components/CommentCard/CommentCardSkeleton.tsx new file mode 100644 index 000000000..9ee11ccef --- /dev/null +++ b/frontend/src/components/CommentCard/CommentCardSkeleton.tsx @@ -0,0 +1,25 @@ +import * as S from '@_components/CommentCard/CommentCard.style'; + +import SkeletonPiece from '@_components/Skeleton/SkeletonPiece'; +import { useTheme } from '@emotion/react'; + +export default function CommentCardSkeleton() { + const theme = useTheme(); + + return ( +
+
+ +
+
+
+ + +
+
+ +
+
+
+ ); +} diff --git a/frontend/src/components/CommentList/CommentListSkeleton.tsx b/frontend/src/components/CommentList/CommentListSkeleton.tsx new file mode 100644 index 000000000..544c093d9 --- /dev/null +++ b/frontend/src/components/CommentList/CommentListSkeleton.tsx @@ -0,0 +1,22 @@ +import * as S from '@_components/CommentList/ComentList.style'; + +import CommentCardSkeleton from '@_components/CommentCard/CommentCardSkeleton'; +import MessageInput from '@_components/Input/MessagInput/MessageInput'; + +export default function CommentListSkeleton() { + return ( +
+ + + + + { + message; + }} + > +
+ ); +} diff --git a/frontend/src/components/MoimDescription/MoimDescriptionSkeleton.tsx b/frontend/src/components/MoimDescription/MoimDescriptionSkeleton.tsx new file mode 100644 index 000000000..e15651fde --- /dev/null +++ b/frontend/src/components/MoimDescription/MoimDescriptionSkeleton.tsx @@ -0,0 +1,34 @@ +import * as S from './MoimDescription.style'; + +import { PropsWithChildren } from 'react'; +import SkeletonPiece from '@_components/Skeleton/SkeletonPiece'; +import { useTheme } from '@emotion/react'; + +interface MoimDescriptionProps extends PropsWithChildren { + title?: string; + color?: string; +} + +export default function MoimDescriptionSkeleton(props: MoimDescriptionProps) { + const theme = useTheme(); + const { title, color = '', children } = props; + + if (title === '') { + return; + } + + return ( +
+ {title &&

{title}

} + {!title && } + {!children && ( +
+ + + +
+ )} + {children && children} +
+ ); +} diff --git a/frontend/src/components/MoimInformation/MoimInfomationSkeleton.tsx b/frontend/src/components/MoimInformation/MoimInfomationSkeleton.tsx new file mode 100644 index 000000000..9929d15c6 --- /dev/null +++ b/frontend/src/components/MoimInformation/MoimInfomationSkeleton.tsx @@ -0,0 +1,39 @@ +import * as S from './MoimInformation.style'; + +import SkeletonPiece from '@_components/Skeleton/SkeletonPiece'; +import { useTheme } from '@emotion/react'; + +export default function MoimInformationSkeleton() { + const theme = useTheme(); + + return ( +
+

모임 정보

+
+
+ 날짜 + +
+ +
+ 시간 + +
+ +
+ 장소 + +
+ +
+ 최대 인원 + +
+
+ 현재 참여 인원 + +
+
+
+ ); +} diff --git a/frontend/src/components/MoimSummary/MoimSummarySkeleton.tsx b/frontend/src/components/MoimSummary/MoimSummarySkeleton.tsx new file mode 100644 index 000000000..c6ee92ff4 --- /dev/null +++ b/frontend/src/components/MoimSummary/MoimSummarySkeleton.tsx @@ -0,0 +1,15 @@ +import * as S from './MoimSummary.style'; + +import SkeletonPiece from '@_components/Skeleton/SkeletonPiece'; +import TagSkeleton from '@_components/Tag/TagSkeleton'; + +export default function MoimSummarySkeleton() { + return ( +
+
+ + +
+
+ ); +} diff --git a/frontend/src/components/ProfileList/ProfileListSkeleton.tsx b/frontend/src/components/ProfileList/ProfileListSkeleton.tsx new file mode 100644 index 000000000..416254460 --- /dev/null +++ b/frontend/src/components/ProfileList/ProfileListSkeleton.tsx @@ -0,0 +1,21 @@ +import * as S from './ProfileList.style'; + +import { Fragment } from 'react'; +import SkeletonPiece from '@_components/Skeleton/SkeletonPiece'; +import { useTheme } from '@emotion/react'; + +export default function ProfileListSkeleton() { + const theme = useTheme(); + return ( + +
참여자
+
+ + + + + +
+ + ); +} diff --git a/frontend/src/components/Tag/TagSkeleton.tsx b/frontend/src/components/Tag/TagSkeleton.tsx new file mode 100644 index 000000000..110d5b3da --- /dev/null +++ b/frontend/src/components/Tag/TagSkeleton.tsx @@ -0,0 +1,5 @@ +import SkeletonPiece from '@_components/Skeleton/SkeletonPiece'; + +export default function TagSkeleton() { + return ; +} diff --git a/frontend/src/pages/MoimDetailPage/MoimDetailPage.tsx b/frontend/src/pages/MoimDetailPage/MoimDetailPage.tsx index 9519aff2b..8879a3e9b 100644 --- a/frontend/src/pages/MoimDetailPage/MoimDetailPage.tsx +++ b/frontend/src/pages/MoimDetailPage/MoimDetailPage.tsx @@ -3,13 +3,18 @@ import { useNavigate, useParams } from 'react-router-dom'; import BackLogo from '@_common/assets/back.svg'; import Button from '@_components/Button/Button'; import CommentList from '@_components/CommentList/CommentList'; +import CommentListSkeleton from '@_components/CommentList/CommentListSkeleton'; import GET_ROUTES from '@_common/getRoutes'; import InformationLayout from '@_layouts/InformationLayout/InformationLayout'; import KebabMenu from '@_components/KebabMenu/KebabMenu'; import MoimDescription from '@_components/MoimDescription/MoimDescription'; +import MoimDescriptionSkeleton from '@_components/MoimDescription/MoimDescriptionSkeleton'; import MoimInformation from '@_components/MoimInformation/MoimInformation'; import MoimSummary from '@_components/MoimSummary/MoimSummary'; +import MoimSummarySkeleton from '@_components/MoimSummary/MoimSummarySkeleton'; import ProfileList from '@_components/ProfileList/ProfileList'; +import ProfileListSkeleton from '@_components/ProfileList/ProfileListSkeleton'; +import SkeletonPiece from '@_components/Skeleton/SkeletonPiece'; import ZzimButton from '@_components/Zzim/ZzimButton'; import useCancelChamyo from '@_hooks/mutaions/useCancelChamyo'; import useCancelMoim from '@_hooks/mutaions/useCancelMoim'; @@ -18,18 +23,21 @@ import useChamyoMine from '@_hooks/queries/useChamyoMine'; import useChangeZzim from '@_hooks/mutaions/useChangeZzim'; import useCompleteMoin from '@_hooks/mutaions/useCompleteMoin'; import useJoinMoim from '@_hooks/mutaions/useJoinMoim'; +import { useMemo } from 'react'; import useMoim from '@_hooks/queries/useMoim'; import useOpenChat from '@_hooks/mutaions/useOpenChat'; import useReopenMoim from '@_hooks/mutaions/useReopenMoim'; +import { useTheme } from '@emotion/react'; import useZzimMine from '@_hooks/queries/useZzimMine'; export default function MoimDetailPage() { const navigate = useNavigate(); const params = useParams(); + const theme = useTheme(); const moimId = Number(params.moimId); - const { moim, isLoading } = useMoim(moimId); + const { moim, isLoading: isMoimLoading } = useMoim(moimId); const { role, isChamyoMineLoading } = useChamyoMine(moimId); const { isZzimed, isZzimMineLoading } = useZzimMine(moimId); const { participants, chamyoAllIsLoading } = useChamyoAll(moimId); @@ -51,17 +59,132 @@ export default function MoimDetailPage() { navigate(GET_ROUTES.nowDarakbang.chattingRoom(moimId)), ); - if ( - isLoading || - isChamyoMineLoading || - isZzimMineLoading || - chamyoAllIsLoading - ) { - return
Loading...
; - } - if (!moim || isZzimed === undefined || !participants) { - return
No data found
; - } + const kebabMenu = useMemo(() => { + return role === 'MOIMER' ? ( + + navigate(GET_ROUTES.nowDarakbang.modify(moimId), { + state: { + ...moim, + moimId, + }, + }), + }, + { + name: '모임 취소하기', + disabled: isPendingCancelMoim, + onClick: () => cancelMoim(moimId), + }, + { + name: '모임 다시 열기', + disabled: isPendingReopenMoim, + onClick: () => ReopenMoim(moimId), + }, + ]} + /> + ) : ( + cancelChamyo(moimId), + }, + ]} + /> + ); + }, [ + ReopenMoim, + cancelChamyo, + cancelMoim, + isPendingCancelChamyo, + isPendingCancelMoim, + isPendingReopenMoim, + moim, + moimId, + navigate, + role, + ]); + + const button = useMemo(() => { + return isChamyoMineLoading ? ( + + ) : role === 'MOIMER' ? ( + moim?.status === 'MOIMING' ? ( + + ) : moim?.status === 'CANCELED' ? ( + + ) : ( + + ) + ) : role === 'NON_MOIMEE' ? ( + moim?.status === 'MOIMING' ? ( + + ) : moim?.status === 'COMPLETED' ? ( + + ) : ( + + ) + ) : moim?.status === 'MOIMING' ? ( + + ) : ( + + ); + }, [ + completeMoim, + isPendingCompleteMoim, + isPendingJoinMoim, + isPendingOpenChat, + moim?.status, + moimId, + navigate, + mutate, + openChat, + role, + isChamyoMineLoading, + ]); return ( @@ -71,117 +194,58 @@ export default function MoimDetailPage() { - changZzim(moimId)} /> - {role === 'MOIMER' ? ( - - navigate(GET_ROUTES.nowDarakbang.modify(moimId), { - state: { - ...moim, - moimId, - }, - }), - }, - { - name: '모임 취소하기', - disabled: isPendingCancelMoim, - onClick: () => cancelMoim(moimId), - }, - { - name: '모임 다시 열기', - disabled: isPendingReopenMoim, - onClick: () => ReopenMoim(moimId), - }, - ]} - /> - ) : ( - cancelChamyo(moimId), - }, - ]} + {isZzimMineLoading && ( + {}} /> + )} + {!isZzimMineLoading && ( + changZzim(moimId)} /> )} + {kebabMenu} - - - - {moim.description && ( + {isMoimLoading && } + {moim && } + + {chamyoAllIsLoading && } + {participants && } + + {isMoimLoading && ( + <> + 모임정보 + + + )} + {moim && } + {isMoimLoading && ( + <> + + + + )} + {isMoimLoading && } + {moim?.description && ( {moim.description} )} - {moim.comments && ( + + {isMoimLoading && ( + + + + )} + {moim && ( )} - {role === 'MOIMER' ? ( - moim.status === 'MOIMING' ? ( - - ) : moim.status === 'CANCELED' ? ( - - ) : ( - - ) - ) : role === 'NON_MOIMEE' ? ( - moim.status === 'MOIMING' ? ( - - ) : moim.status === 'COMPLETED' ? ( - - ) : ( - - ) - ) : moim.status === 'MOIMING' ? ( - - ) : ( - - )} + {button} ); From e0f5b0ed0ac7877300b0f53bbae5a9016c2b1cc6 Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Thu, 22 Aug 2024 22:46:47 +0900 Subject: [PATCH 09/11] =?UTF-8?q?feat:=EB=B2=84=ED=8A=BC=20=EC=8A=A4?= =?UTF-8?q?=EC=BC=88=EB=A0=88=ED=86=A4=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/MoimDetailPage/MoimDetailPage.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/frontend/src/pages/MoimDetailPage/MoimDetailPage.tsx b/frontend/src/pages/MoimDetailPage/MoimDetailPage.tsx index 8879a3e9b..28f0ce9b7 100644 --- a/frontend/src/pages/MoimDetailPage/MoimDetailPage.tsx +++ b/frontend/src/pages/MoimDetailPage/MoimDetailPage.tsx @@ -112,13 +112,7 @@ export default function MoimDetailPage() { const button = useMemo(() => { return isChamyoMineLoading ? ( - + <> ) : role === 'MOIMER' ? ( moim?.status === 'MOIMING' ? (