Merge pull request #538 from depromeet/develop

배포용 PR v2.3.9

Author: wade3420

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<MemberMeResponse> => {
@@ -138,7 +132,7 @@ export const useGetMembersMe = (option?: UseQueryOptions<MemberMeResponse>) => {
   });
 };
 
-export const useWithdrawalMember = (option?: UseMutationOptions<unknown, unknown, WithdrawalMemberRequest>) => {
+export const useWithdrawalMember = (option?: UseMutationOptions<unknown, unknown>) => {
   return useMutation({
     mutationFn: MEMBER_API.withdrawalMember,
     ...option,

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() {
       </ul>
     );
 
+  if (data.length === 0) {
+    return (
+      <div className={emptyFeedCss}>
+        <Empty
+          type={'suggest'}
+          image={'docs'}
+          link={ROUTER.SEARCH.HOME}
+          title={'피드가 없습니다.'}
+          buttonText={'친구 찾기'}
+          description={'친구를 팔로우하고 피드를 받아볼까요?'}
+        />
+      </div>
+    );
+  }
+
   return (
     <ul className={feedListCss}>
       {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',

src/app/feed/page.tsx

@@ -8,7 +8,7 @@ export default function FeedPage() {
     <>
       <AppBar />
       <FeedList />
-      <BottomDim />
+      <BottomDim type={'bottomDim2'} />
       <AppBarBottom />
     </>
   );

src/app/level/guide/page.tsx

@@ -45,7 +45,7 @@ function LevelGuidePage() {
         ) : (
           <>
             <section className={levelTextWrapperCss}>
-              <p className={levelLabelCss}>현재 레벨</p>
+              <p className={levelLabelCss}>{!isLockedLevel && '현재 레벨'}</p>
               <div className={cx(badgeCss)}>
                 <MotionDiv key={selectLevelInfo.label}>{selectLevelInfo.label}</MotionDiv>
               </div>
@@ -95,6 +95,7 @@ const levelLabelCss = css({
   textStyle: 'body5',
   color: 'purple.purple700',
   marginBottom: '8px',
+  height: '17px',
 });
 
 const badgeCss = css({

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
         <ProfileFeedItemSkeleton />
       </ul>
     );
+
+  if (data.length === 0) {
+    return (
+      <div className={emptyFeedCss}>
+        <Empty type={'notice'} image={'docs'} title={'아직 작성한 피드가 없어요.'} description={''} />
+      </div>
+    );
+  }
   return (
     <ul className={feedListCss}>
       {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',

src/app/mypage/page.tsx

@@ -30,8 +30,8 @@ function Mypage() {
       <Header />
       <MyProfile />
       <AppBarBottom />
-      <div className={dimCss} />
-      <BottomDim />
+      <div className={profileBackgroundDimCss} />
+      <BottomDim type={'bottomDim2'} />
     </main>
   );
 }
@@ -43,7 +43,7 @@ const backgroundCss = css({
   background: 'gradients.primary',
 });
 
-const dimCss = css({
+const profileBackgroundDimCss = css({
   position: 'absolute',
   width: '100%',
   height: '100%',

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 (

src/app/profile/[id]/ProfileContent.tsx

@@ -45,8 +45,7 @@ function ProfileContent({
             <span className={followerTabCss}>
               <Link onClick={handleClickFollowList} href={ROUTER.PROFILE.FOLLOW_LIST(memberId, 'following')}>
                 팔로잉 {followingCount}
-              </Link>{' '}
-              &nbsp;
+              </Link>
               <Link onClick={handleClickFollowList} href={ROUTER.PROFILE.FOLLOW_LIST(memberId, 'follower')}>
                 팔로워 {followerCount}
               </Link>
@@ -92,7 +91,11 @@ const userNameCss = css({
 });
 const followerTabCss = css({
   color: 'text.secondary',
+  textStyle: 'body5',
   marginTop: '6px',
+
+  display: 'flex',
+  gap: '10px',
 });
 
 const myTabCss = css({

src/app/profile/[id]/page.tsx

@@ -36,8 +36,8 @@ function FollowProfilePage({ params }: { params: { id: string } }) {
       >
         <ProfileTab memberId={Number(params.id)} />
       </ProfileContent>
-      <div className={dimCss} />
-      <BottomDim />
+      <div className={profileBackgroundDimCss} />
+      <BottomDim type={'bottomDim2'} />
     </main>
   );
 }
@@ -52,7 +52,7 @@ const backgroundCss = css({
   background: 'gradients.primary',
 });
 
-const dimCss = css({
+const profileBackgroundDimCss = css({
   position: 'absolute',
   width: '100%',
   height: '100%',

src/components/Banner/CardBanner.tsx

@@ -4,32 +4,44 @@ import { css } from '@/styled-system/css';
 
 function CardBanner(props: CardBannerType) {
   return (
-    <div className={containerCss}>
-      <div>
-        <Image src={props.iconUrl} width={20} height={20} alt={props.title} />
+    <div className={outerContainerCss}>
+      <div className={containerCss}>
+        <div>
+          <Image src={props.iconUrl} width={20} height={20} alt={props.title} />
+        </div>
+        <p className={descriptionCss}>{props.description}</p>
+        <p className={titleCss}>{props.title}</p>
       </div>
-      <p className={descriptionCss}>{props.description}</p>
-      <p className={titleCss}>{props.title}</p>
     </div>
   );
 }
 
 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',
   flexDirection: 'column',
   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',

src/components/BottomDim/BottomDim.tsx

@@ -1,22 +1,42 @@
-import { css } from '@/styled-system/css';
+import { cva } from '@/styled-system/css';
 
-function BottomDim() {
-  return <article className={containerCss}></article>;
+function BottomDim({ type = 'bottomDim1' }: { type?: 'bottomDim1' | 'bottomDim2' }) {
+  return (
+    <article
+      className={containerCss({
+        type: type,
+      })}
+    ></article>
+  );
 }
 
 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',
+      },
+    },
+  },
 });