feat: accessToken 이용한 창작자 본인 확인 기능 구현

woowacourse-teams · Jul 18, 2021 · 4be79fe · 4be79fe
1 parent c1cdfa4
commit 4be79fe
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 13 deletions.
diff --git a/client/src/components/Creator/DonationList/DonationList.tsx b/client/src/components/Creator/DonationList/DonationList.tsx
@@ -1,6 +1,7 @@
 import { useParams } from 'react-router';
 
 import { ParamTypes } from '../../../App';
+import { DONATION_VIEW_SIZE } from '../../../constants/donation';
 import useCreator from '../../../service/hooks/useCreator';
 import useCreatorDonations from '../../../service/hooks/useCreatorDonations';
 import {
@@ -43,7 +44,11 @@ const DonationList = ({ isAdmin }: Props) => {
               </CommentsListItem>
             ))}
           </CommentsList>
-          {isAdmin && <ShowMoreButton onClick={showNextDonationList}>더보기</ShowMoreButton>}
+          {isAdmin && donationList.length % DONATION_VIEW_SIZE === 0 && (
+            <ShowMoreButton type="button" onClick={showNextDonationList}>
+              더보기
+            </ShowMoreButton>
+          )}
         </>
       ) : (
         <EmptyCommentsList>아직 후원한 사람이 없습니다.</EmptyCommentsList>

diff --git a/client/src/pages/Creator/CreatorPage.tsx b/client/src/pages/Creator/CreatorPage.tsx
@@ -11,6 +11,7 @@ import Button from '../../components/@atom/Button/Button';
 import DonationList from '../../components/Creator/DonationList/DonationList';
 import { StyledTemplate, ProfileContainer, DescriptionContainer } from './CreatorPage.styles';
 import { popupWindow } from '../../service/popup';
+import { donationUrlShare } from '../../service/share';
 
 const CreatorPage: FC<HTMLAttributes<HTMLElement>> = () => {
   const history = useHistory();
@@ -22,8 +23,10 @@ const CreatorPage: FC<HTMLAttributes<HTMLElement>> = () => {
     popupWindow(`/donation/${creatorId}`, 'width=460,height=900,resizable=0');
   };
 
-  const moveStatisticsPage = () => {
-    history.push(`/creator/${creatorId}/statistic`);
+  const shareUrl = () => {
+    if (!userInfo) return;
+
+    donationUrlShare(userInfo.nickname, userInfo.pageName);
   };
 
   return (
@@ -48,13 +51,13 @@ const CreatorPage: FC<HTMLAttributes<HTMLElement>> = () => {
               <p>제 페이지에 와주셔서 감사합니다!!</p>
             </DescriptionContainer>
             {isAdmin ? (
-              <Button onClick={moveStatisticsPage}>내 페이지 공유하기</Button>
+              <Button onClick={shareUrl}>내 페이지 공유하기</Button>
             ) : (
               <Button onClick={moveDonationPage}>후원하기</Button>
             )}
           </Suspense>
         </ProfileContainer>
-        <Suspense fallback={<p>후원기록을 불러오는 중입니다.</p>}>
+        <Suspense fallback={true}>
           <DonationList isAdmin={isAdmin} />
         </Suspense>
       </ErrorBoundary>

diff --git a/client/src/service/hooks/useCreatorDonations.ts b/client/src/service/hooks/useCreatorDonations.ts
@@ -6,17 +6,19 @@ import { DONATION_VIEW_SIZE } from '../../constants/donation';
 import { creatorPrivateDonationListQuery, creatorPublicDonationListQuery } from '../state/creator';
 
 const useCreatorDonations = (isAdmin: boolean, creatorId: CreatorId) => {
-  const [currentPage, setCurrentPage] = useState(1);
+  const [currentPage, setCurrentPage] = useState(0);
   const [privateDonationList, setPrivateDonationList] = useState<Donation[]>([]);
   const newDonationList = useRecoilValue(
     creatorPrivateDonationListQuery({
       page: currentPage,
       size: DONATION_VIEW_SIZE,
     })
   );
+  console.log(newDonationList);
 
   const showNextDonationList = () => {
     setPrivateDonationList(privateDonationList.concat(newDonationList));
+
     setCurrentPage(currentPage + 1);
   };
 

diff --git a/client/src/service/hooks/useLoginEffect.ts b/client/src/service/hooks/useLoginEffect.ts
@@ -26,7 +26,6 @@ const useLoginEffect = (oauthProvider?: OAuthProvider) => {
         alert('회원가입 페이지로 이동합니다.');
         history.push('/register');
       }
-      console.log(error.response.data);
     }
   };
 

diff --git a/client/src/service/request/creator.ts b/client/src/service/request/creator.ts
@@ -14,9 +14,11 @@ export const requestCreatorPrivateDonationList = (
   page: number,
   size: number
 ): Promise<Donation[]> => {
-  return apiClient.get(`/donations/me?page=${page}&size=${size}`, {
-    headers: { Authorization: `bearer ${accessToken}` },
-  });
+  return apiClient
+    .get(`/donations/me?page=${page}&size=${size}`, {
+      headers: { Authorization: `bearer ${accessToken}` },
+    })
+    .then((response) => response.data);
 };
 
 export const requestCreatorPublicDonationList = (creatorId: CreatorId): Promise<Donation[]> => {

diff --git a/client/src/service/state/creator.ts b/client/src/service/state/creator.ts
@@ -30,10 +30,11 @@ export const creatorPrivateDonationListQuery = selectorFamily<
 >({
   key: 'creatorPrivateDonationListQuery',
   get:
-    ({ page = 1, size = 5 }) =>
+    ({ page, size }) =>
     ({ get }) => {
       const accessToken = get(accessTokenState);
       if (!accessToken) return [];
+
       return requestCreatorPrivateDonationList(accessToken, page, size);
     },
 });
diff --git a/client/src/service/state/statistics.ts b/client/src/service/state/statistics.ts
@@ -7,8 +7,6 @@ export const userStatisticsQuery = selector({
   get: ({ get }) => {
     const accessToken = get(accessTokenState);
 
-    console.log(accessToken);
-
     return requestUserStatistics(accessToken);
   },
 });