From b95b9ab224ff73e36e8f5cd5e3f9a9b2d0b22618 Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Thu, 8 Feb 2024 13:02:03 +0900 Subject: [PATCH 01/14] =?UTF-8?q?feat:=20my=20mission=20list=20motion=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/home/MissionInnerList.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/app/home/MissionInnerList.tsx b/src/app/home/MissionInnerList.tsx index db5cae43..55bc8d0d 100644 --- a/src/app/home/MissionInnerList.tsx +++ b/src/app/home/MissionInnerList.tsx @@ -5,6 +5,7 @@ import { MissionListSkeleton } from '@/app/home/home.styles'; import MissionBadge from '@/app/home/MissionBadge'; import MissionEmptyList from '@/app/home/MissionEmptyList'; import { TwoLineListItem } from '@/components/ListItem'; +import StaggerWrapper from '@/components/Motion/StaggerWrapper'; import { MISSION_CATEGORY_LABEL } from '@/constants/mission'; import { ROUTER } from '@/constants/router'; import { css } from '@styled-system/css'; @@ -25,7 +26,7 @@ function MissionListInner() { } return ( - <> + {missionList.map((item) => { const isProgressingMission = progressMissionId === String(item.missionId); const status = isProgressingMission ? MissionStatus.PROGRESSING : item.missionStatus; @@ -47,12 +48,18 @@ function MissionListInner() { ); })} - + ); } export default MissionListInner; +const listCss = css({ + flex: 1, + gap: '8px', + height: '100%', +}); + const containerCss = css({ height: '100%', padding: '60px 0', From dd613855dbb7833513aef16c9fc447a469ca8604 Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Thu, 8 Feb 2024 23:30:48 +0900 Subject: [PATCH 02/14] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=AA=A8=EC=85=98=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/home/FollowList.tsx | 18 ++++++++++-------- src/app/home/ProfileItem.tsx | 7 +++++-- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/app/home/FollowList.tsx b/src/app/home/FollowList.tsx index 8bca66de..c5cff50c 100644 --- a/src/app/home/FollowList.tsx +++ b/src/app/home/FollowList.tsx @@ -2,6 +2,7 @@ import { useRouter, useSearchParams } from 'next/navigation'; import { useFollowMembers } from '@/apis/follow'; import UserProfile from '@/app/home/UserProfile'; import { type FollowDataState } from '@/app/page'; +import MotionDiv from '@/components/Motion/MotionDiv'; import { flex } from '@/styled-system/patterns'; import ProfileItem from './ProfileItem'; @@ -25,14 +26,15 @@ function FollowList() { {data && data.map((profile) => ( - + + + ))} ); diff --git a/src/app/home/ProfileItem.tsx b/src/app/home/ProfileItem.tsx index abea862a..d08523e2 100644 --- a/src/app/home/ProfileItem.tsx +++ b/src/app/home/ProfileItem.tsx @@ -3,13 +3,15 @@ import { type FollowDataState } from '@/app/page'; import Thumbnail from '@/components/Thumbnail/Thumbnail'; import { css, cx } from '@styled-system/css'; -function ProfileItem(props: { +interface Props { name: string; id: number | null; onClick: (props: FollowDataState) => void; selected?: boolean; url?: string; -}) { +} + +function ProfileItem(props: Props) { const handleClick = () => { if (props.id === null) { props.onClick(null); @@ -20,6 +22,7 @@ function ProfileItem(props: { nickname: props.name, }); }; + return (
From 55ce9250d3ea53979ca208546e63e997f6ac1b7c Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Thu, 8 Feb 2024 23:47:25 +0900 Subject: [PATCH 03/14] =?UTF-8?q?fix:=20percent=20animation=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/app/home/FollowSummary.tsx | 5 +++-- src/components/Graph/LevelProgressBar.tsx | 7 ++++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/app/home/FollowSummary.tsx b/src/app/home/FollowSummary.tsx index 90b2c151..7a3b13c9 100644 --- a/src/app/home/FollowSummary.tsx +++ b/src/app/home/FollowSummary.tsx @@ -11,6 +11,7 @@ import { gradientTextCss } from '@/constants/style/gradient'; import { calcProgress, getLevel } from '@/utils/result'; import { css, cx } from '@styled-system/css'; import { flex } from '@styled-system/patterns'; +import { motion } from 'framer-motion'; type FollowSummaryProps = FollowMemberType; @@ -21,7 +22,7 @@ function FollowSummary({ memberId: followId, nickname: followNickname, profileIm const progress = calcProgress(symbolStack); return ( -
+
@@ -39,7 +40,7 @@ function FollowSummary({ memberId: followId, nickname: followNickname, profileIm

{currentLevel.label}

- +
diff --git a/src/components/Graph/LevelProgressBar.tsx b/src/components/Graph/LevelProgressBar.tsx index d5be11a1..4e07ab15 100644 --- a/src/components/Graph/LevelProgressBar.tsx +++ b/src/components/Graph/LevelProgressBar.tsx @@ -1,6 +1,7 @@ import { css, cx } from '@/styled-system/css'; import { flex } from '@/styled-system/patterns'; import { type ColorToken } from '@styled-system/tokens'; +import { motion } from 'framer-motion'; interface Props { current: number; @@ -24,7 +25,7 @@ function LevelProgressBar({ return (
-
{isLabel && ( @@ -53,7 +56,6 @@ const progressContainerCss = css({ backgroundColor: '#3B3E4F', width: '100%', position: 'relative', - // overflow: 'hidden', height: '4px', }); @@ -61,7 +63,6 @@ const progressInnerContainerCss = css({ position: 'absolute', borderRadius: '10px', height: '100%', - transition: 'width .7s ease-in-out', }); const labelContainerCss = flex({ From efe4c974faaabaebf924d8f1f5225169ae99e8fc Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Thu, 8 Feb 2024 23:58:41 +0900 Subject: [PATCH 04/14] =?UTF-8?q?feat:=20bottom=20dim=ED=84=B0=EC=B9=98=20?= =?UTF-8?q?=EC=95=88=EB=90=98=EA=B2=8C=20=EB=A7=89=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/home/FollowSummary.tsx | 2 -- src/components/BottomDim/BottomDim.tsx | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/home/FollowSummary.tsx b/src/app/home/FollowSummary.tsx index 7a3b13c9..b83e9671 100644 --- a/src/app/home/FollowSummary.tsx +++ b/src/app/home/FollowSummary.tsx @@ -5,13 +5,11 @@ import Banner from '@/components/Banner/Banner'; import LevelProgressBar from '@/components/Graph/LevelProgressBar'; import Icon from '@/components/Icon'; import Thumbnail from '@/components/Thumbnail/Thumbnail'; -import { LEVEL_SYSTEM } from '@/constants/level'; import { ROUTER } from '@/constants/router'; import { gradientTextCss } from '@/constants/style/gradient'; import { calcProgress, getLevel } from '@/utils/result'; import { css, cx } from '@styled-system/css'; import { flex } from '@styled-system/patterns'; -import { motion } from 'framer-motion'; type FollowSummaryProps = FollowMemberType; diff --git a/src/components/BottomDim/BottomDim.tsx b/src/components/BottomDim/BottomDim.tsx index 13abfe4e..8233d8c1 100644 --- a/src/components/BottomDim/BottomDim.tsx +++ b/src/components/BottomDim/BottomDim.tsx @@ -18,4 +18,5 @@ const containerCss = css({ zIndex: 'bottomDim', background: 'linear-gradient(180deg, rgba(24, 24, 29, 0.00) 0%, rgba(24, 24, 29, 0.09) 7.58%, rgba(24, 24, 29, 0.59) 34.59%, rgba(24, 24, 29, 0.69) 41.18%, rgba(24, 24, 29, 0.83) 51.39%, #18181D 63.25%)', + pointerEvents: 'none', }); From 6f36a89474ad1ee9c492c8a6f3e39f0dfccc4e72 Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Fri, 9 Feb 2024 00:17:23 +0900 Subject: [PATCH 05/14] style: banner style fix --- .../MissionHistoryBanner.tsx | 30 +++++++++++-------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/src/app/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBanner.tsx b/src/app/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBanner.tsx index d85a4513..c2fc5a75 100644 --- a/src/app/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBanner.tsx +++ b/src/app/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBanner.tsx @@ -1,4 +1,5 @@ import Image from 'next/image'; +import MotionDiv from '@/components/Motion/MotionDiv'; import { css } from '@styled-system/css'; // TODO : banner 컴포넌트 분리 @@ -13,11 +14,13 @@ function MissionHistoryBanner({ }) { return (
- {title} -
-

{title}

-

{description}

-
+ + {title} +
+

{title}

+

{description}

+
+
); } @@ -25,14 +28,10 @@ function MissionHistoryBanner({ export default MissionHistoryBanner; export const missionHistoryBannerCss = css({ - display: 'flex', - flexDirection: 'row', - padding: '16px', - gap: '8px', borderRadius: '22px', - background: 'linear-gradient(93deg, rgba(25, 23, 27, 0.80) 0.82%, rgba(24, 25, 33, 0.80) 99.97%)', - boxShadow: '0px 5px 50px 4px rgba(92, 78, 122, 0.50) inset, 0px 4px 20px 0px rgba(16, 15, 23, 0.20)', - backdropFilter: 'blur(20px)', + boxShadow: '0px 5px 50px 4px #5C4E7A80 inset, 0px 4px 20px 0px #100F1733', + background: 'linear-gradient(92.59deg, rgba(25, 23, 27, 0.8) 0.82%, rgba(24, 25, 33, 0.8) 99.97%)', + transition: 'all 0.3s ease', '& img': { width: '36px', @@ -40,6 +39,13 @@ export const missionHistoryBannerCss = css({ }, }); +const bannerInnerCss = css({ + display: 'flex', + flexDirection: 'row', + padding: '16px', + gap: '8px', +}); + const bannerTitleCss = css({ textStyle: 'body1', color: 'text.primary', From daa59cca3e0a863f1a8d1e7f4c8a6804527c2364 Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Fri, 9 Feb 2024 00:18:19 +0900 Subject: [PATCH 06/14] =?UTF-8?q?feat:=20=EB=AF=B8=EC=85=98=20=EB=82=B4?= =?UTF-8?q?=EC=97=AD=EC=97=90=20bottom=20dim=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/mission/[id]/follow/page.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/mission/[id]/follow/page.tsx b/src/app/mission/[id]/follow/page.tsx index 3b252814..a6acbbce 100644 --- a/src/app/mission/[id]/follow/page.tsx +++ b/src/app/mission/[id]/follow/page.tsx @@ -1,6 +1,7 @@ 'use client'; import MissionHistoryTab from '@/app/mission/[id]/detail/MissionHistoryTab'; +import BottomDim from '@/components/BottomDim/BottomDim'; import Header from '@/components/Header/Header'; import Tab from '@/components/Tab/Tab'; import { css } from '@styled-system/css'; @@ -20,6 +21,7 @@ export default function FollowMissionDetailPage() {
+ ); } From 6cd6c9663db884245ef75e05d3ff9adfc65dedd4 Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Fri, 9 Feb 2024 00:33:14 +0900 Subject: [PATCH 07/14] =?UTF-8?q?style:=20padding=20bottom=20style=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/record/[id]/page.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/record/[id]/page.tsx b/src/app/record/[id]/page.tsx index dac65f70..ea14316f 100644 --- a/src/app/record/[id]/page.tsx +++ b/src/app/record/[id]/page.tsx @@ -186,6 +186,7 @@ const mainWrapperCss = css({ flexDirection: 'column', backgroundColor: 'bg.surface2', height: '100%', + paddingBottom: '60px', }); const headerWrapperCss = css({ From 7b75615ee58c7a2e01a06dc5ebd8564d54d37462 Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Fri, 9 Feb 2024 00:37:38 +0900 Subject: [PATCH 08/14] =?UTF-8?q?feat:=20mission=20list=20=EC=95=A0?= =?UTF-8?q?=EB=8B=88=EB=A7=A4=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/home/FollowMissionList.tsx | 16 ++++++++++------ src/components/Motion/StaggerWrapper.tsx | 4 ++-- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/app/home/FollowMissionList.tsx b/src/app/home/FollowMissionList.tsx index 690bd469..3e3c4935 100644 --- a/src/app/home/FollowMissionList.tsx +++ b/src/app/home/FollowMissionList.tsx @@ -4,6 +4,7 @@ import { MissionListSkeleton } from '@/app/home/home.styles'; import MissionBadge from '@/app/home/MissionBadge'; import Empty from '@/components/Empty/Empty'; import { TwoLineListItem } from '@/components/ListItem'; +import StaggerWrapper from '@/components/Motion/StaggerWrapper'; import { MISSION_CATEGORY_LABEL } from '@/constants/mission'; import { ROUTER } from '@/constants/router'; import { css } from '@styled-system/css'; @@ -19,9 +20,8 @@ function FollowMissionList({ followId }: FollowMissionListProps) {

미션 목록

-
    - -
+ +
); } @@ -52,7 +52,11 @@ const listCss = flex({ export function MissionFollowListInner({ followId }: { followId: number }) { const { data, isLoading } = useFollowMissions(followId); if (isLoading) { - return ; + return ( +
    + +
+ ); } if (!data) { @@ -68,7 +72,7 @@ export function MissionFollowListInner({ followId }: { followId: number }) { } return ( - <> + {data.followMissions.map((item) => { const status = item.missionStatus; @@ -84,6 +88,6 @@ export function MissionFollowListInner({ followId }: { followId: number }) { ); })} - + ); } diff --git a/src/components/Motion/StaggerWrapper.tsx b/src/components/Motion/StaggerWrapper.tsx index 022f6956..15b3d486 100644 --- a/src/components/Motion/StaggerWrapper.tsx +++ b/src/components/Motion/StaggerWrapper.tsx @@ -17,7 +17,7 @@ interface Props extends PropsWithChildren { wrapperOverrideCss?: string; /** * @description wrapper에 적용될 variants 입니다. - * @default stagger(0.5) + * @default stagger(0.3) */ staggerVariants?: Variants; /** @@ -33,7 +33,7 @@ interface Props extends PropsWithChildren { const StaggerWrapper = ({ children, wrapperOverrideCss, - staggerVariants = stagger(0.5), + staggerVariants = stagger(0.3), itemVariants = fadeInUpVariants, }: Props) => { return ( From 942b55d8954319fc3ac7b99b77d3fb13e6acbdff Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Fri, 9 Feb 2024 00:46:02 +0900 Subject: [PATCH 09/14] style: mypage tab style fix --- src/app/mypage/MyProfile.tsx | 3 +-- src/app/profile/[id]/ProfileContent.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/app/mypage/MyProfile.tsx b/src/app/mypage/MyProfile.tsx index baba9ac7..fa34072a 100644 --- a/src/app/mypage/MyProfile.tsx +++ b/src/app/mypage/MyProfile.tsx @@ -50,8 +50,7 @@ export default function MyProfile() { } const tabWrapper = css({ - margin: '20px 0', - padding: '16px 16px 0 16px', + margin: '36px 0 24px', }); const profileEditButtonCss = css({ diff --git a/src/app/profile/[id]/ProfileContent.tsx b/src/app/profile/[id]/ProfileContent.tsx index 9c4178a3..3606080e 100644 --- a/src/app/profile/[id]/ProfileContent.tsx +++ b/src/app/profile/[id]/ProfileContent.tsx @@ -70,7 +70,7 @@ const myTabContainerCss = css({ backgroundColor: 'bg.surface2', borderTopRightRadius: '28px', borderTopLeftRadius: '28px', - padding: '52px 24px 0', + padding: '52px 16px 0', }); const userNameCss = css({ color: 'text.primary', From 5ab4d7481d1ece08d7e07a1360e1d930c1fd05ac Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Fri, 9 Feb 2024 01:13:26 +0900 Subject: [PATCH 10/14] =?UTF-8?q?style:=20=EA=B7=B8=EB=9D=BC=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=ED=85=8D=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Button/GradientTextButton.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Button/GradientTextButton.tsx b/src/components/Button/GradientTextButton.tsx index 1f86ca7e..5feee182 100644 --- a/src/components/Button/GradientTextButton.tsx +++ b/src/components/Button/GradientTextButton.tsx @@ -25,8 +25,8 @@ function GradientTextButton({ children, ...props }: PropsWithChildren Date: Fri, 9 Feb 2024 01:13:41 +0900 Subject: [PATCH 11/14] =?UTF-8?q?feat:=20=EC=83=81=EB=8B=A8=20=EC=8A=A4?= =?UTF-8?q?=EB=82=B5=EB=B0=94=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/search/page.tsx | 6 +-- src/components/SnackBar/SnackBar.types.ts | 1 + src/components/SnackBar/SnackBarOverlay.tsx | 45 ++++++++++++++++++--- src/hooks/query/useMutationHandleError.ts | 2 +- 4 files changed, 44 insertions(+), 10 deletions(-) diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx index 805a88ea..9230f022 100644 --- a/src/app/search/page.tsx +++ b/src/app/search/page.tsx @@ -16,7 +16,7 @@ function SearchPage() { <>
}> - + ); @@ -33,8 +33,8 @@ function List({ nickname }: { nickname: string }) { return ( - {data.map((item) => ( - + {data.map((item, idx) => ( + {item.followStatus === 'FOLLOWING' ? ( ) : ( diff --git a/src/components/SnackBar/SnackBar.types.ts b/src/components/SnackBar/SnackBar.types.ts index 2987e101..6df0a455 100644 --- a/src/components/SnackBar/SnackBar.types.ts +++ b/src/components/SnackBar/SnackBar.types.ts @@ -5,6 +5,7 @@ export type SnackBarOffset = 'appBar' | 'default' | 'cta'; export interface SnackBarBaseType { message: string; offset?: SnackBarOffset; + position?: 'top' | 'bottom'; id: string; } diff --git a/src/components/SnackBar/SnackBarOverlay.tsx b/src/components/SnackBar/SnackBarOverlay.tsx index 0343ee6c..5be43bd7 100644 --- a/src/components/SnackBar/SnackBarOverlay.tsx +++ b/src/components/SnackBar/SnackBarOverlay.tsx @@ -14,7 +14,7 @@ function SnackBarOverlay() { snackBar.map((item) => ( ; +type SnackBarOptions = Pick; function useMutationHandleError( options?: UseMutationOptions, From 42a5a13e7e6175f5d4fdc6d04925395fbe5f3cbc Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Fri, 9 Feb 2024 01:25:19 +0900 Subject: [PATCH 12/14] =?UTF-8?q?feat:=20search=20page=20auto=20focus=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SearchBar/SearchBar.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx index 6753b601..a45ce5a2 100644 --- a/src/components/SearchBar/SearchBar.tsx +++ b/src/components/SearchBar/SearchBar.tsx @@ -1,4 +1,5 @@ 'use client'; + import { type ComponentProps } from 'react'; import Icon from '@/components/Icon'; import { css, cx } from '@/styled-system/css'; @@ -15,7 +16,7 @@ function SearchBar({ onChange, ...props }: Props) { return (
- onChange(e.target.value)} {...props}> + onChange(e.target.value)} {...props} autoFocus /> Date: Fri, 9 Feb 2024 01:47:36 +0900 Subject: [PATCH 13/14] =?UTF-8?q?style:=20=EC=84=B1=EA=B3=B5=20=EC=8A=A4?= =?UTF-8?q?=ED=94=84=EB=A7=81=20=EC=95=A0=EB=8B=88=EB=A7=A4=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/record/success/layout.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/app/record/success/layout.tsx b/src/app/record/success/layout.tsx index 594aefa4..5f451d78 100644 --- a/src/app/record/success/layout.tsx +++ b/src/app/record/success/layout.tsx @@ -5,16 +5,7 @@ import { motion } from 'framer-motion'; export default function Layout({ children }: PropsWithChildren) { return ( - +
{children}
 ); From ef1d6c94372d4839406ab6df9983ba76a62d28ba Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Fri, 9 Feb 2024 01:53:37 +0900 Subject: [PATCH 14/14] =?UTF-8?q?feat:=20=ED=8C=94=EB=A1=9C=EC=9E=89/?= =?UTF-8?q?=ED=8C=94=EB=A1=9C=EC=9A=B0=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=8C=A8=EC=B9=AD=20=EC=8B=9C=20=EB=B2=84=ED=8A=BC=20disabled?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/profile/[id]/FollowButton.tsx | 2 +- .../profile/[id]/follows/FollowingList.tsx | 2 + src/app/profile/[id]/follows/page.tsx | 23 +++++++++-- src/app/search/page.tsx | 10 ++--- src/components/Button/GradientTextButton.tsx | 2 +- src/components/ListItem/Follow/MemberItem.tsx | 41 ++++++++++++++++--- 6 files changed, 64 insertions(+), 16 deletions(-) diff --git a/src/app/profile/[id]/FollowButton.tsx b/src/app/profile/[id]/FollowButton.tsx index 451c4fc3..d68ebce7 100644 --- a/src/app/profile/[id]/FollowButton.tsx +++ b/src/app/profile/[id]/FollowButton.tsx @@ -68,7 +68,7 @@ const followingButtonCss = css({ border: '1px solid', borderColor: 'gray.gray500', borderRadius: '20px', - backgroundColor: 'transparent', + backgroundColor: 'transparent !', display: 'flex', alignItems: 'center', justifyContent: 'center', diff --git a/src/app/profile/[id]/follows/FollowingList.tsx b/src/app/profile/[id]/follows/FollowingList.tsx index 70685663..6121b956 100644 --- a/src/app/profile/[id]/follows/FollowingList.tsx +++ b/src/app/profile/[id]/follows/FollowingList.tsx @@ -15,6 +15,7 @@ import { css } from '@/styled-system/css'; interface Props { list: FollowerMemberWithStatusType[]; refetch: () => void; + isFetching: boolean; } function FollowingList(props: Props) { @@ -30,6 +31,7 @@ function FollowingList(props: Props) { onUpdateItem(_item); props.refetch(); }} + isLoading={props.isFetching} /> ))} diff --git a/src/app/profile/[id]/follows/page.tsx b/src/app/profile/[id]/follows/page.tsx index d51ecba7..36fdd6f6 100644 --- a/src/app/profile/[id]/follows/page.tsx +++ b/src/app/profile/[id]/follows/page.tsx @@ -18,7 +18,7 @@ function FollowListPage({ params }: { params: { id: string } }) { const currentMemberId = Number(params.id); - const { data, refetch, isLoading } = useFetFollowList(Number(params.id)); + const { data, refetch, isLoading, isFetching } = useFetFollowList(Number(params.id)); const followingCount = data?.followingList.length ?? ''; const followerCount = data?.followerList.length ?? ''; @@ -56,16 +56,31 @@ function FollowListPage({ params }: { params: { id: string } }) { {/* 내 팔로잉/팔로우 */} {isMyFollowList && (activeTab === 'following' ? ( - + ) : ( ))} {/* 다른 사람 팔로잉/팔로우 */} {!isMyFollowList && (activeTab === 'following' ? ( - + ) : ( - + ))}
); diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx index 9230f022..8033440b 100644 --- a/src/app/search/page.tsx +++ b/src/app/search/page.tsx @@ -25,7 +25,7 @@ function SearchPage() { export default SearchPage; function List({ nickname }: { nickname: string }) { - const { data, refetch } = useSuspenseGetSearchNickname(nickname); + const { data, refetch, isFetching } = useSuspenseGetSearchNickname(nickname); const onButtonClick = () => { refetch(); @@ -33,12 +33,12 @@ function List({ nickname }: { nickname: string }) { return ( - {data.map((item, idx) => ( - + {data.map((item) => ( + {item.followStatus === 'FOLLOWING' ? ( - + ) : ( - + )} ))} diff --git a/src/components/Button/GradientTextButton.tsx b/src/components/Button/GradientTextButton.tsx index 5feee182..a6c55da8 100644 --- a/src/components/Button/GradientTextButton.tsx +++ b/src/components/Button/GradientTextButton.tsx @@ -25,7 +25,7 @@ function GradientTextButton({ children, ...props }: PropsWithChildren void; - + isLoading?: boolean; onClick?: (item: FollowerMemberWithStatusType) => void; } export function FollowingMember({ onClick, ...props }: MemberItemProps) { - const { mutate } = useDeleteFollow({ + const { mutate, isPending } = useDeleteFollow({ onSuccess: (res) => { // TODO : 서버 데이터 잘 받아오는지 체크 const newStatus = res?.followStatus ?? FollowStatus.NOT_FOLLOWING; @@ -18,6 +19,8 @@ export function FollowingMember({ onClick, ...props }: MemberItemProps) { }, }); + const isButtonDisabled = isPending || props.isLoading; + const onFollowingCancel = async () => { mutate(props.memberId); }; @@ -27,7 +30,13 @@ export function FollowingMember({ onClick, ...props }: MemberItemProps) { name={props.nickname} thumbnailUrl={props.profileImageUrl} buttonElement={ - } @@ -35,14 +44,24 @@ export function FollowingMember({ onClick, ...props }: MemberItemProps) { ); } +const secondaryButtonCss = css({ + '&:disabled': { + filter: 'none', + backgroundColor: 'gray.gray200', + color: 'text.secondary', + }, +}); + // 팔로잉 되어있지 않은 멤버 export function NotFollowingMember(props: MemberItemProps) { - const { mutate } = useAddFollow({ + const { mutate, isPending } = useAddFollow({ onSuccess: () => { props.onButtonClick?.({ ...props, followStatus: FollowStatus.FOLLOWING }); }, }); + const isButtonDisabled = isPending || props.isLoading; + const onFollowerClick = async () => { mutate(props.memberId); }; @@ -52,7 +71,13 @@ export function NotFollowingMember(props: MemberItemProps) { name={props.nickname} thumbnailUrl={props.profileImageUrl} buttonElement={ - } @@ -60,6 +85,12 @@ export function NotFollowingMember(props: MemberItemProps) { ); } +const primaryButtonCss = css({ + '&:disabled': { + filter: 'none', + }, +}); + export function MineMemberItem(props: MemberItemProps) { return } thumbnailUrl={props.profileImageUrl} />; }