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/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/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/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({ 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', 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/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 ( 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({ 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/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', 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', + }, + }, + }, });