From 88e0cfa177e3f181c68d22002c23222fb95de20e Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Sun, 11 Feb 2024 01:47:04 +0900 Subject: [PATCH 1/6] style: card banner border fix! --- src/components/Banner/CardBanner.tsx | 28 ++++++++++++++++++++-------- 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/src/components/Banner/CardBanner.tsx b/src/components/Banner/CardBanner.tsx index 1ff53863..4bf2041a 100644 --- a/src/components/Banner/CardBanner.tsx +++ b/src/components/Banner/CardBanner.tsx @@ -4,12 +4,14 @@ import { css } from '@/styled-system/css'; function CardBanner(props: CardBannerType) { return ( -
-
- {props.title} +
+
+
+ {props.title} +
+

{props.description}

+

{props.title}

-

{props.description}

-

{props.title}

); } @@ -17,12 +19,11 @@ function CardBanner(props: CardBannerType) { export default CardBanner; const containerCss = css({ - minWidth: 'fit-content', width: '100%', + height: '100%', + minWidth: 'fit-content', overflow: 'hidden', - borderRadius: '22px', boxShadow: '0px 10px 30px 4px rgba(78, 80, 122, 0.20) inset, 0px 4px 20px 0px rgba(15, 16, 23, 0.30)', - border: ' 1px solid #474A5D', padding: '20px 16px 16px', background: 'linear-gradient(136deg, rgba(168, 184, 240, 0.02) 15.95%, rgba(165, 143, 255, 0.02) 85.07%)', display: 'flex', @@ -30,6 +31,17 @@ const containerCss = css({ alignItems: 'center', }); +const outerContainerCss = css({ + overflow: 'hidden', + border: '1px solid transparent', + borderRadius: '22px', + padding: '0px !', // NOTE: padding 0 필수, + backgroundOrigin: 'border-box', + backgroundClip: 'content-box, border-box', + backgroundImage: + 'linear-gradient(token(colors.bg.surface3), token(colors.bg.surface3)), token(colors.gradients.stroke)', +}); + const descriptionCss = css({ marginTop: '8px', textStyle: 'body4', From f6476f5be30b4a12851f7815b56717e60d678d85 Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Sun, 11 Feb 2024 01:55:47 +0900 Subject: [PATCH 2/6] =?UTF-8?q?fix:=20=EC=9E=A0=EA=B2=A8=EC=9E=88=EB=8A=94?= =?UTF-8?q?=20=EB=A0=88=EB=B2=A8=EC=9D=80=20=ED=98=84=EC=9E=AC=20=EB=A0=88?= =?UTF-8?q?=EB=B2=A8=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EB=B3=B4=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/level/guide/page.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/level/guide/page.tsx b/src/app/level/guide/page.tsx index 2ee74221..74037c64 100644 --- a/src/app/level/guide/page.tsx +++ b/src/app/level/guide/page.tsx @@ -45,7 +45,7 @@ function LevelGuidePage() { ) : ( <>
-

현재 레벨

+

{!isLockedLevel && '현재 레벨'}

{selectLevelInfo.label}
@@ -95,6 +95,7 @@ const levelLabelCss = css({ textStyle: 'body5', color: 'purple.purple700', marginBottom: '8px', + height: '17px', }); const badgeCss = css({ From f36c50be17685eec90dd015f19f3020c3aaa2484 Mon Sep 17 00:00:00 2001 From: Dongmin Ahn Date: Sun, 11 Feb 2024 21:45:01 +0900 Subject: [PATCH 3/6] =?UTF-8?q?fix=20:=20=ED=9A=8C=EC=9B=90=ED=83=88?= =?UTF-8?q?=ED=87=B4=20api=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/member.ts | 12 +++--------- src/app/mypage/withdrawal/page.tsx | 6 ++---- 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/src/apis/member.ts b/src/apis/member.ts index 59ac47f9..0e602576 100644 --- a/src/apis/member.ts +++ b/src/apis/member.ts @@ -12,10 +12,6 @@ import { } from '@tanstack/react-query'; import axios from 'axios'; -interface WithdrawalMemberRequest { - username: string; -} - interface CheckUsernameRequest { username: string; } @@ -48,10 +44,8 @@ export const AUTH_PROVIDER_LABEL = { type MemberMeResponse = MemberType; const MEMBER_API = { - withdrawalMember: async (request: WithdrawalMemberRequest) => { - const { data } = await apiInstance.delete(`/members/withdrawal`, { - data: request, - }); + withdrawalMember: async () => { + const { data } = await apiInstance.delete(`/members/withdrawal`); return data; }, getMembersMe: async (): Promise => { @@ -138,7 +132,7 @@ export const useGetMembersMe = (option?: UseQueryOptions) => { }); }; -export const useWithdrawalMember = (option?: UseMutationOptions) => { +export const useWithdrawalMember = (option?: UseMutationOptions) => { return useMutation({ mutationFn: MEMBER_API.withdrawalMember, ...option, diff --git a/src/app/mypage/withdrawal/page.tsx b/src/app/mypage/withdrawal/page.tsx index f8ca220d..1792ff3f 100644 --- a/src/app/mypage/withdrawal/page.tsx +++ b/src/app/mypage/withdrawal/page.tsx @@ -1,7 +1,7 @@ 'use client'; import { useRouter } from 'next/navigation'; -import { useGetMembersMe, useWithdrawalMember } from '@/apis/member'; +import { useWithdrawalMember } from '@/apis/member'; import Button from '@/components/Button/Button'; import { useSnackBar } from '@/components/SnackBar/SnackBarProvider'; import { ROUTER } from '@/constants/router'; @@ -11,7 +11,6 @@ import { grid } from '@/styled-system/patterns'; function WithdrawalPage() { const router = useRouter(); - const { data } = useGetMembersMe(); const { triggerSnackBar } = useSnackBar(); const { mutate } = useWithdrawalMember({ onSuccess: () => { @@ -33,8 +32,7 @@ function WithdrawalPage() { }; const onWithdrawal = () => { - if (!data?.username) return; - mutate({ username: data.username }); + mutate(); }; return ( From 1973d22ee9beb8512c61daaf5be49acb6111170a Mon Sep 17 00:00:00 2001 From: Dongmin Ahn Date: Sun, 11 Feb 2024 23:17:12 +0900 Subject: [PATCH 4/6] =?UTF-8?q?fix=20:=20=ED=94=84=EB=A1=9C=ED=95=84?= =?UTF-8?q?=EA=B3=BC=20=ED=94=BC=EB=93=9C=ED=83=AD=EC=97=90=20bottomDim=20?= =?UTF-8?q?=EB=8B=A4=EB=A5=B4=EA=B2=8C=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/feed/page.tsx | 2 +- src/app/mypage/page.tsx | 6 +-- src/app/profile/[id]/page.tsx | 6 +-- src/components/BottomDim/BottomDim.tsx | 52 ++++++++++++++++++-------- 4 files changed, 43 insertions(+), 23 deletions(-) diff --git a/src/app/feed/page.tsx b/src/app/feed/page.tsx index 9620d081..e51493e0 100644 --- a/src/app/feed/page.tsx +++ b/src/app/feed/page.tsx @@ -8,7 +8,7 @@ export default function FeedPage() { <> - + ); diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx index b5851803..6431007a 100644 --- a/src/app/mypage/page.tsx +++ b/src/app/mypage/page.tsx @@ -30,8 +30,8 @@ function Mypage() {
-
- +
+ ); } @@ -43,7 +43,7 @@ const backgroundCss = css({ background: 'gradients.primary', }); -const dimCss = css({ +const profileBackgroundDimCss = css({ position: 'absolute', width: '100%', height: '100%', diff --git a/src/app/profile/[id]/page.tsx b/src/app/profile/[id]/page.tsx index e795feb2..6e04a4cc 100644 --- a/src/app/profile/[id]/page.tsx +++ b/src/app/profile/[id]/page.tsx @@ -36,8 +36,8 @@ function FollowProfilePage({ params }: { params: { id: string } }) { > -
- +
+ ); } @@ -52,7 +52,7 @@ const backgroundCss = css({ background: 'gradients.primary', }); -const dimCss = css({ +const profileBackgroundDimCss = css({ position: 'absolute', width: '100%', height: '100%', diff --git a/src/components/BottomDim/BottomDim.tsx b/src/components/BottomDim/BottomDim.tsx index 8233d8c1..27e6e7bf 100644 --- a/src/components/BottomDim/BottomDim.tsx +++ b/src/components/BottomDim/BottomDim.tsx @@ -1,22 +1,42 @@ -import { css } from '@/styled-system/css'; +import { cva } from '@/styled-system/css'; -function BottomDim() { - return
; +function BottomDim({ type = 'bottomDim1' }: { type?: 'bottomDim1' | 'bottomDim2' }) { + return ( +
+ ); } export default BottomDim; -const containerCss = css({ - width: '100vw', - height: '200px', - maxWidth: '475px', - margin: '0 auto', - position: 'fixed', - left: 0, - right: 0, - bottom: 0, - 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', +const containerCss = cva({ + base: { + width: '100vw', + maxWidth: '475px', + margin: '0 auto', + position: 'fixed', + left: 0, + right: 0, + bottom: 0, + zIndex: 'bottomDim', + pointerEvents: 'none', + }, + variants: { + type: { + bottomDim1: { + 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%)', + height: '200px', + }, + + bottomDim2: { + background: + 'linear-gradient(180deg, rgba(24, 24, 29, 0.00) 0%, rgba(24, 24, 29, 0.10) 15.1%, rgba(24, 24, 29, 0.61) 51.56%, rgba(24, 24, 29, 0.73) 70.83%, rgba(24, 24, 29, 0.85) 86.98%, #18181D 100%)', + height: '156px', + }, + }, + }, }); From 9019d20ca8a2e2f370fd30c2dad0959e3428f55e Mon Sep 17 00:00:00 2001 From: Dongmin Ahn Date: Sun, 11 Feb 2024 23:17:36 +0900 Subject: [PATCH 5/6] =?UTF-8?q?fix=20:=20=ED=8C=94=EB=A1=9C=EC=9A=B0=20?= =?UTF-8?q?=ED=8C=94=EB=A1=9C=EC=9E=89=20=ED=8F=B0=ED=8A=B8=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/profile/[id]/ProfileContent.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/profile/[id]/ProfileContent.tsx b/src/app/profile/[id]/ProfileContent.tsx index 30eec209..06212698 100644 --- a/src/app/profile/[id]/ProfileContent.tsx +++ b/src/app/profile/[id]/ProfileContent.tsx @@ -45,8 +45,7 @@ function ProfileContent({ 팔로잉 {followingCount} - {' '} -   + 팔로워 {followerCount} @@ -92,7 +91,11 @@ const userNameCss = css({ }); const followerTabCss = css({ color: 'text.secondary', + textStyle: 'body5', marginTop: '6px', + + display: 'flex', + gap: '10px', }); const myTabCss = css({ From d9e66198711b56efedc61cf5b630f043cb9cdfad Mon Sep 17 00:00:00 2001 From: Dongmin Ahn Date: Sun, 11 Feb 2024 23:17:59 +0900 Subject: [PATCH 6/6] =?UTF-8?q?fix=20:=20=ED=94=BC=EB=93=9C=ED=83=AD,=20?= =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=20=ED=94=BC=EB=93=9C=ED=83=AD=20emp?= =?UTF-8?q?ty=20=EC=83=81=ED=83=9C=20=ED=99=94=EB=A9=B4=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/feed/FeedList.tsx | 24 ++++++++++++++++++++++++ src/app/mypage/ProfileFeedList.tsx | 16 ++++++++++++++++ 2 files changed, 40 insertions(+) diff --git a/src/app/feed/FeedList.tsx b/src/app/feed/FeedList.tsx index 743332c4..c70eed9a 100644 --- a/src/app/feed/FeedList.tsx +++ b/src/app/feed/FeedList.tsx @@ -1,6 +1,8 @@ 'use client'; import { useFeedMe } from '@/apis/feed'; import FeedItem, { FeedSkeletonItem } from '@/app/feed/FeedItem'; +import Empty from '@/components/Empty/Empty'; +import { ROUTER } from '@/constants/router'; import { css } from '@styled-system/css'; function FeedList() { @@ -13,6 +15,21 @@ function FeedList() { ); + if (data.length === 0) { + return ( +
+ +
+ ); + } + return (
    {data.map((feed) => ( @@ -24,6 +41,13 @@ function FeedList() { export default FeedList; +const emptyFeedCss = css({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + height: 'calc(100vh - 200px)', +}); + const feedListCss = css({ padding: '0 16px 132px 16px', display: 'flex', diff --git a/src/app/mypage/ProfileFeedList.tsx b/src/app/mypage/ProfileFeedList.tsx index 2605cda1..cd97fa08 100644 --- a/src/app/mypage/ProfileFeedList.tsx +++ b/src/app/mypage/ProfileFeedList.tsx @@ -1,6 +1,7 @@ import Link from 'next/link'; import { useFeedByMemberId } from '@/apis/feed'; import ProfileFeedItem, { ProfileFeedItemSkeleton } from '@/app/mypage/ProfileFeedItem'; +import Empty from '@/components/Empty/Empty'; import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog'; import { ROUTER } from '@/constants/router'; import { eventLogger } from '@/utils'; @@ -23,6 +24,14 @@ function ProfileFeedList({ memberId, isMySelf }: { memberId: number; isMySelf: b
); + + if (data.length === 0) { + return ( +
+ +
+ ); + } return (
    {data?.map((feed) => ( @@ -43,6 +52,13 @@ const getHref = (recordId: string, isMySelf: boolean) => { return ROUTER.RECORD.DETAIL.FOLLOW(recordId); }; +const emptyFeedCss = css({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + padding: '60px 0', +}); + const feedListCss = css({ display: 'grid', padding: '0 0 132px 0',