[WIP] QA: 메인 페이지 qa 반영 (#29)

* feat: mainListTap 하단 border set Width as screen * feat: header height값 수정 * feat: Digest탭의 빈 페이지 구현 * feat: 탐색탭 구독자 삭제, 설명 height 고정 QA 반영 * feat: 로그아웃, 회원탈퇴 기능 구현 * WIP: [선행작업대기중] domain 구독 버튼 클릭시 구독 페이지 이동
YAPP-Github · Sep 9, 2024 · b09ec7e · b09ec7e
1 parent 529f764
commit b09ec7e
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 32 deletions.
diff --git a/src/api/hooks/useFetchProfileQuery.ts b/src/api/hooks/useFetchProfileQuery.ts
@@ -1,5 +1,5 @@
 import { axiosInstance } from '@/api/axiosInstance';
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { AxiosError, AxiosResponse } from 'axios';
 
 export interface ProfileType {
@@ -15,10 +15,21 @@ export const fetchProfileData = () => {
   return data;
 };
 
+export const deleteProfileDataMutation = () => {
+  const data = axiosInstance.delete('/users');
+  return data;
+};
+
 export const useProfileQuery = () => {
   return useQuery<AxiosResponse<ProfileType>, AxiosError, ProfileType>({
     queryKey: ['profile'],
     queryFn: fetchProfileData,
     select: ({ data }) => data,
   });
 };
+
+export const usewithdrawalMutation = () => {
+  return useMutation<AxiosResponse, AxiosError, null>({
+    mutationFn: deleteProfileDataMutation,
+  });
+};
diff --git a/src/api/hooks/useFetchSubscriptionListQuery.ts b/src/api/hooks/useFetchSubscriptionListQuery.ts
@@ -7,6 +7,8 @@ export interface SubscriptionListType {
   isPublished: boolean;
   address: string;
   thumbnailImage: string;
+  isAutomated: boolean;
+  subscriptionLink: string;
 }
 
 type Response = { subscriptions: SubscriptionListType[] };

diff --git a/src/api/hooks/useSearchTabQuery.ts b/src/api/hooks/useSearchTabQuery.ts
@@ -4,6 +4,7 @@ import { AxiosError, AxiosResponse } from 'axios';
 
 export interface Newsletter {
   name: string;
+  address: string;
   companyName: string;
   isAutomated: boolean;
   content: string;

diff --git a/src/app/main/DigestTab/index.tsx b/src/app/main/DigestTab/index.tsx
@@ -29,8 +29,8 @@ const DigestTab = () => {
           </div>
         ) : (
           data?.map(article => (
-            <div onClick={() => handleReadMail(article.mailId)}>
-              <ArticleCard key={article.mailId} {...article} />
+            <div key={article.mailId} onClick={() => handleReadMail(article.mailId)}>
+              <ArticleCard {...article} />
             </div>
           ))
         )}

diff --git a/src/app/main/SearchTab/ArticleCard.tsx b/src/app/main/SearchTab/ArticleCard.tsx
@@ -18,7 +18,7 @@ const ArticleCard = ({ newsLetter }: ArticleCardProps) => {
       <div className='flex flex-row items-center justify-between w-full'>
         <div className='flex flex-col'>
           <span className='text-h3'>{newsLetter.name}</span>
-          <span className='text-caption text-darkgrey'>{newsLetter.companyName} • 구독자 20명</span>
+          <span className='text-caption text-darkgrey'>{newsLetter.companyName}</span>
         </div>
         <SubscribeButton
           isSubscribed={false}
@@ -28,7 +28,9 @@ const ArticleCard = ({ newsLetter }: ArticleCardProps) => {
           }}
         />
       </div>
-      <div className='overflow-hidden whitespace-pre-wrap break-keep text-body2 line-clamp-3'>{newsLetter.content}</div>
+      <div className='h-12 overflow-hidden whitespace-pre-wrap break-keep text-body2 line-clamp-2'>
+        {newsLetter.content}
+      </div>
       <Link
         href={newsLetter.contentLink}
         target='_blank'

diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
@@ -1,12 +1,30 @@
-import type { UserDataType, UserDataTypes } from '@/types';
+'use client';
+
 import Link from 'next/link';
-import { GET } from '@/network';
+import { useProfileQuery, usewithdrawalMutation } from '@/api/hooks/useFetchProfileQuery';
+
+const MyPage = () => {
+  const { data: userData } = useProfileQuery();
+  const withdrawalMutation = usewithdrawalMutation();
+
+  const handleWithdrawal = () => {
+    console.log('withdrawal');
+    withdrawalMutation.mutate(null, {
+      onSuccess: () => {
+        alert('회원 탈퇴가 완료되었습니다.');
+        window.location.href = '/';
+      },
+      onError: () => {
+        alert('회원 탈퇴에 실패했습니다.\n관리자에게 문의하세요.');
+        window.open('mailto:[email protected]', '_blank');
+      },
+    });
+  };
 
-const MyPage = async () => {
-  //TODO: 추후 로그인 로직 완성 후 주석 교체
-  const userData: UserDataTypes = await getUserData();
-  console.log(userData);
-  // const userData = cookies().get('userData');
+  const handleLogout = () => {
+    document.cookie = 'connect.sid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    window.location.href = '/';
+  };
 
   return (
     <div className='flex flex-col gap-8 w-articleCard'>
@@ -23,27 +41,21 @@ const MyPage = async () => {
         >
           뉴스레터 구독 관리
         </Link>
-        <Link
-          href='/logout' // Link to Logout
-          className='flex flex-col gap-2 py-4 font-bold w-fit'
-        >
+        <div role='button' onClick={handleLogout} className='flex flex-col gap-2 py-4 font-bold w-fit'>
           로그아웃
           <span className='font-normal text-body2 text-darkgrey'>다시 로그인 할 때까지 계정이 비활성화됩니다.</span>
-        </Link>
-        <Link href='/mypage' className='flex flex-col gap-2 py-4 font-bold w-fit text-darkgrey'>
+        </div>
+        <div
+          role='button'
+          onClick={handleWithdrawal}
+          className='flex flex-col gap-2 py-4 font-bold w-fit text-darkgrey'
+        >
           회원 탈퇴
           <span className='font-normal text-body2'>개인 정보 및 설정이 모두 영구적으로 삭제됩니다</span>
-        </Link>
+        </div>
       </div>
     </div>
   );
 };
 
 export default MyPage;
-
-// TODO: 추후 로그인 로직 완성 후 아래 제거
-const getUserData = async () => {
-  const response = await GET('/users');
-  console.log(response);
-  return response.data;
-};
diff --git a/src/components/Domain/DomainListWithSubscribeButton.tsx b/src/components/Domain/DomainListWithSubscribeButton.tsx
@@ -1,9 +1,6 @@
-import { ProfileType } from '@/api/hooks/useFetchProfileQuery';
-import { SubscriptionListType } from '@/api/hooks/useFetchSubscriptionListQuery';
+import type { SubscriptionListType } from '@/api/hooks/useFetchSubscriptionListQuery';
 import { useSubscribtionMutation } from '@/api/hooks/useSubscribtionMutation';
-import { Chip } from '@/components/Chip';
 import SubscribeButton from '@/components/SubscribeButton';
-import type { DomainType } from '@/types';
 import Image from 'next/image';
 import { useState } from 'react';
 
@@ -17,7 +14,10 @@ const DomainListWithSubscribeButton = ({ domainData }: DomainListWithSubscribeBu
   const subscribtionMutation = useSubscribtionMutation();
 
   //TODO: 구독 버튼 클릭 시 구독 페이지로 이동 로직 추가
-  const handleSubscribe = (name: string, address: string) => {
+  const handleSubscribe = (name: string, address: string, link: string, isAuto: boolean) => {
+    if (!isAuto) {
+      window.open(link, '_blank');
+    }
     subscribtionMutation.mutate(
       {
         subscriptions: [{ name, address }],
@@ -49,8 +49,11 @@ const DomainListWithSubscribeButton = ({ domainData }: DomainListWithSubscribeBu
         </span>
       </span>
       <SubscribeButton
-        onClick={() => handleSubscribe(domainData.name, domainData.address)}
+        onClick={() =>
+          handleSubscribe(domainData.name, domainData.address, domainData.subscriptionLink, domainData.isAutomated)
+        }
         isSubscribed={isSubscribed}
+        internalSubscribe={domainData.isAutomated}
       />
     </div>
   );

diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
@@ -186,6 +186,9 @@ export const handlers = [
       updated_at: new Date('2024-07-13'),
     });
   }),
+  http.delete('/users', () => {
+    return HttpResponse.json({ status: 204 });
+  }),
 
   http.get('/articleList', req => {
     const { currentTab } = req.params;
@@ -397,6 +400,15 @@ export const handlers = [
             contentLink: 'https://surfside.stibee.com/',
             thumbnailImage: 'https://picsum.photos/200',
           },
+          {
+            name: '디자인 나침반 뉴스레터',
+            companyName: '디자인 나침반',
+            isAutomated: false,
+            content: ' 매주 화요일 아침, 16년 차 디자이너가큐레이션한 디자인 트렌드를 모아보세요.',
+            subscriptionLink: 'https://designcompass.org/',
+            contentLink: 'https://designcompass.org/',
+            thumbnailImage: 'https://picsum.photos/200',
+          },
         ],
         startup: [
           {
@@ -421,18 +433,27 @@ export const handlers = [
           isPublished: false,
           address: '[email protected]',
           thumbnailImage: 'https://picsum.photos/48',
+          isAutomated: false,
+          subscriptionLink: 'https://maily.so/josh',
+          companyName: 'string',
         },
         {
           name: 'string1',
           isPublished: false,
           address: '[email protected]',
           thumbnailImage: 'https://picsum.photos/48',
+          isAutomated: false,
+          subscriptionLink: 'https://maily.so/josh',
+          companyName: 'string',
         },
         {
           name: 'string2',
           isPublished: false,
           address: '[email protected]',
           thumbnailImage: 'https://picsum.photos/48',
+          isAutomated: true,
+          subscriptionLink: 'https://maily.so/josh',
+          companyName: 'string',
         },
       ],
     });