Skip to content

Commit

Permalink
마이페이지 제안취소, 리뷰완료 시 해당 게시물 리스트에서 제거 (#569)
Browse files Browse the repository at this point in the history 
* design: 마이페이지 게시물 반응형 디자인 수정

* design: 서포터 선택페이지 padding 수정

* feat: 마이페이지 더보기 msw 수정

* design: 리뷰 상태 라벨 높이 수정

* feat: 마이페이지 게시물 더보기 msw 추가 (서포터 탭)

* feat: 리뷰 완료 및 제안 취소시 게시글을 목록에서 삭제
  • Loading branch information
@gyeongza
gyeongza authored Sep 20, 2023
1 parent 5787187 commit 093417c
Show file tree
Hide file tree
Showing 12 changed files with 273 additions and 280 deletions.
88 changes: 54 additions & 34 deletions frontend/src/components/MyPage/MyPagePostButton/MyPagePostButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,18 @@ import { usePageRouter } from '@/hooks/usePageRouter';
import useViewport from '@/hooks/useViewport';

import { ReviewStatus } from '@/types/runnerPost';
import React, { useContext, useMemo } from 'react';
import React, { useContext } from 'react';
import styled from 'styled-components';

interface Props {
runnerPostId: number;
reviewStatus: ReviewStatus;
isRunner: boolean;
supporterId?: number;
handleDeletePost: (handleDeletePost: number) => void;
}

const MyPagePostButton = ({ runnerPostId, reviewStatus, isRunner, supporterId }: Props) => {
const MyPagePostButton = ({ runnerPostId, reviewStatus, isRunner, supporterId, handleDeletePost }: Props) => {
const { goToSupportSelectPage, goToSupporterFeedbackPage } = usePageRouter();

const { isMobile } = useViewport();
Expand All @@ -27,14 +29,15 @@ const MyPagePostButton = ({ runnerPostId, reviewStatus, isRunner, supporterId }:
patchRequestWithAuth(`/posts/runner/${runnerPostId}/cancelation`, async (response) => {
showCompletionToast(TOAST_COMPLETION_MESSAGE.REVIEW_CANCEL);

setTimeout(window.location.reload, 2000);
handleDeletePost(runnerPostId);
});
};

const finishReview = () => {
patchRequestWithAuth(`/posts/runner/${runnerPostId}/done`, async (response) => {
showCompletionToast(TOAST_COMPLETION_MESSAGE.REVIEW_COMPLETE);
setTimeout(window.location.reload, 2000);

handleDeletePost(runnerPostId);
});
};

Expand Down Expand Up @@ -68,46 +71,63 @@ const MyPagePostButton = ({ runnerPostId, reviewStatus, isRunner, supporterId }:
switch (reviewStatus) {
case 'NOT_STARTED':
return (
<Button
fontSize={isMobile ? '14px' : ''}
colorTheme="WHITE"
fontWeight={700}
width={isMobile ? '100%' : '180px'}
height="40px"
onClick={isRunner ? handleClickSupportSelectButton : handleClickCancelReviewButton}
>
{isRunner ? '서포터 선택하기' : '리뷰 제안 취소'}
</Button>
<S.PostButtonWrapper>
<Button
fontSize={isMobile ? '14px' : ''}
colorTheme="WHITE"
fontWeight={700}
width={isMobile ? '100%' : '180px'}
height="40px"
onClick={isRunner ? handleClickSupportSelectButton : handleClickCancelReviewButton}
>
{isRunner ? '서포터 선택하기' : '리뷰 제안 취소'}
</Button>
</S.PostButtonWrapper>
);
case 'IN_PROGRESS':
return isRunner ? null : (
<Button
colorTheme="WHITE"
fontWeight={700}
fontSize={isMobile ? '14px' : ''}
width={isMobile ? '100%' : '180px'}
height="40px"
onClick={handleClickFinishButton}
>
리뷰 완료
</Button>
<S.PostButtonWrapper>
<Button
colorTheme="WHITE"
fontWeight={700}
fontSize={isMobile ? '14px' : ''}
width={isMobile ? '100%' : '180px'}
height="40px"
onClick={handleClickFinishButton}
>
리뷰 완료
</Button>
</S.PostButtonWrapper>
);
case 'DONE':
return isRunner ? (
<Button
colorTheme="WHITE"
fontWeight={700}
fontSize={isMobile ? '14px' : ''}
width={isMobile ? '100%' : '180px'}
height="40px"
onClick={handleClickSupportFeedbackButton}
>
후기 작성
</Button>
<S.PostButtonWrapper>
<Button
colorTheme="WHITE"
fontWeight={700}
fontSize={isMobile ? '14px' : ''}
width={isMobile ? '100%' : '180px'}
height="40px"
onClick={handleClickSupportFeedbackButton}
>
후기 작성
</Button>
</S.PostButtonWrapper>
) : null;
default:
return null;
}
};

export default MyPagePostButton;

const S = {
PostButtonWrapper: styled.div`
width: 180px;
@media (max-width: 768px) {
width: 100%;
margin-top: 18px;
}
`,
};
145 changes: 56 additions & 89 deletions frontend/src/components/MyPage/MyPagePostItem/MyPagePostItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import useViewport from '@/hooks/useViewport';

interface Props extends MyPagePost {
isRunner: boolean;
handleDeletePost: (handleDeletePost: number) => void;
}

const MyPagePostItem = ({
Expand All @@ -23,6 +24,7 @@ const MyPagePostItem = ({
applicantCount,
isRunner,
supporterId,
handleDeletePost,
}: Props) => {
const { goToRunnerPostPage } = usePageRouter();

Expand All @@ -34,73 +36,41 @@ const MyPagePostItem = ({

return (
<S.RunnerPostItemContainer onClick={handlePostClick}>
{isMobile && (
<>
<S.PostTitle>{title}</S.PostTitle>
<S.DeadLineContainer>
<S.DeadLine>{deadline.replace('T', ' ')} 까지</S.DeadLine>
<Label
colorTheme={reviewStatus === 'NOT_STARTED' ? 'WHITE' : reviewStatus === 'IN_PROGRESS' ? 'RED' : 'GRAY'}
fontSize={isMobile ? '10px' : ''}
>
{REVIEW_STATUS_LABEL_TEXT[reviewStatus]}
</Label>
</S.DeadLineContainer>
</>
)}
<S.SideContainer>
<S.LeftSideContainer>
{!isMobile && (
<>
<S.PostTitle>{title}</S.PostTitle>
<S.DeadLineContainer>
<S.DeadLine>{deadline.replace('T', ' ')} 까지</S.DeadLine>
<Label
colorTheme={
reviewStatus === 'NOT_STARTED' ? 'WHITE' : reviewStatus === 'IN_PROGRESS' ? 'RED' : 'GRAY'
}
fontSize={isMobile ? '10px' : ''}
>
{REVIEW_STATUS_LABEL_TEXT[reviewStatus]}
</Label>
</S.DeadLineContainer>
</>
)}
<S.TagContainer>
{tags.map((tag, index) => (
<S.Tag key={index}>#{tag}</S.Tag>
))}
</S.TagContainer>
</S.LeftSideContainer>
<S.RightSideContainer>
<S.ChatViewContainer>
<S.statisticsContainer>
<S.statisticsImage src={eyeIcon} />
<S.statisticsText>{watchedCount}</S.statisticsText>
<S.statisticsImage src={applicantIcon} />
<S.statisticsText>{applicantCount}</S.statisticsText>
</S.statisticsContainer>
</S.ChatViewContainer>
{!isMobile && (
<S.PostButtonWrapper>
<MyPagePostButton
runnerPostId={runnerPostId}
isRunner={isRunner}
reviewStatus={reviewStatus}
supporterId={supporterId}
/>
</S.PostButtonWrapper>
)}
</S.RightSideContainer>
<S.PostTitle>{title}</S.PostTitle>
<S.statisticsContainer>
<S.statisticsImage src={eyeIcon} />
<S.statisticsText>{watchedCount}</S.statisticsText>
<S.statisticsImage src={applicantIcon} />
<S.statisticsText>{applicantCount}</S.statisticsText>
</S.statisticsContainer>
</S.SideContainer>
{isMobile && (
<S.DeadLineContainer>
<S.DeadLine>{deadline.replace('T', ' ')} 까지</S.DeadLine>
<Label
height={isMobile ? '18px' : '22px'}
colorTheme={reviewStatus === 'NOT_STARTED' ? 'WHITE' : reviewStatus === 'IN_PROGRESS' ? 'RED' : 'GRAY'}
fontSize={isMobile ? '10px' : ''}
>
{REVIEW_STATUS_LABEL_TEXT[reviewStatus]}
</Label>
</S.DeadLineContainer>

<S.BottomContainer>
<S.TagContainer>
{tags.map((tag, index) => (
<S.Tag key={index}>#{tag}</S.Tag>
))}
</S.TagContainer>

<MyPagePostButton
handleDeletePost={handleDeletePost}
runnerPostId={runnerPostId}
isRunner={isRunner}
reviewStatus={reviewStatus}
supporterId={supporterId}
/>
)}
</S.BottomContainer>
</S.RunnerPostItemContainer>
);
};
Expand Down Expand Up @@ -138,6 +108,9 @@ const S = {
SideContainer: styled.div`
display: flex;
justify-content: space-between;
align-items: end;
gap: 12px;
`,

PostTitle: styled.p`
Expand All @@ -160,7 +133,7 @@ const S = {
`,

DeadLine: styled.p`
margin-bottom: 60px;
margin-bottom: 40px;
color: var(--gray-600);
Expand All @@ -171,43 +144,28 @@ const S = {
}
`,

TagContainer: styled.div`
& span {
margin-right: 10px;
font-size: 14px;
color: var(--gray-600);
}
`,
Tag: styled.span``,
TagContainer: styled.div``,

LeftSideContainer: styled.div``,
Tag: styled.span`
margin-right: 10px;
RightSideContainer: styled.div`
display: flex;
flex-direction: column;
justify-content: end;
gap: 15px;
font-size: 14px;
color: var(--gray-600);
& button:hover {
transition: all 0.3s ease;
background-color: var(--baton-red);
color: var(--white-color);
@media (max-width: 768px) {
font-size: 14px;
}
`,

PostButtonWrapper: styled.div`
padding-left: auto;
width: 140px;
`,

ChatViewContainer: styled.div`
BottomContainer: styled.div`
display: flex;
justify-content: end;
gap: 10px;
justify-content: space-between;
align-items: end;
font-size: 12px;
@media (max-width: 768px) {
flex-direction: column;
align-items: start;
}
`,

statisticsContainer: styled.div`
Expand All @@ -226,9 +184,18 @@ const S = {
width: 20px;
margin-left: 8px;
@media (max-width: 768px) {
width: 15px;
margin-left: 4px;
}
`,

statisticsText: styled.p`
font-size: 14px;
@media (max-width: 768px) {
font-size: 12px;
}
`,
};
5 changes: 3 additions & 2 deletions frontend/src/components/MyPage/MyPagePostList/MyPagePostList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,16 @@ import MyPagePostItem from '../MyPagePostItem/MyPagePostItem';
interface Props {
filteredPostList: MyPagePost[];
isRunner: boolean;
handleDeletePost: (handleDeletePost: number) => void;
}

const MyPagePostList = ({ filteredPostList, isRunner }: Props) => {
const MyPagePostList = ({ filteredPostList, isRunner, handleDeletePost }: Props) => {
if (filteredPostList?.length === 0) return <p>게시글 정보가 없습니다.</p>;

return (
<S.RunnerPostWrapper>
{filteredPostList?.map((item: MyPagePost) => (
<MyPagePostItem key={item.runnerPostId} {...item} isRunner={isRunner} />
<MyPagePostItem handleDeletePost={handleDeletePost} key={item.runnerPostId} {...item} isRunner={isRunner} />
))}
</S.RunnerPostWrapper>
);
Expand Down
1 change: 1 addition & 0 deletions frontend/src/components/RunnerPost/RunnerPostItem/RunnerPostItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const RunnerPostItem = ({
<S.DeadLineContainer>
<S.DeadLine>{deadline.replace('T', ' ')} 까지</S.DeadLine>
<Label
height={isMobile ? '18px' : '22px'}
colorTheme={reviewStatus === 'NOT_STARTED' ? 'WHITE' : reviewStatus === 'IN_PROGRESS' ? 'RED' : 'GRAY'}
fontSize={isMobile ? '10px' : ''}
>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/common/Label/Label.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const S = {
font-weight: ${({ $fontWeight }) => $fontWeight || '400'};
@media (max-width: 768px) {
padding: 5px 7px;
padding: 4px 6px;
font-size: ${({ $fontSize }) => $fontSize};
}
Expand Down
Loading

0 comments on commit 093417c

Please sign in to comment.