1- import React , { useState } from 'react' ;
1+ import React from 'react' ;
22import { useLocation } from 'react-router-dom' ;
33
4- import { useLatestComment } from '@apis/comment/useComment' ;
4+ import { usePreviewComment } from '@apis/comment/useComment' ;
5+ import useReportTopic from '@apis/topic/useReportTopic' ;
56import useVoteTopic from '@apis/topic/useVoteTopic' ;
7+ import { Col , Row } from '@components/commons/Flex/Flex' ;
68import BackButton from '@components/commons/Header/BackButton/BackButton' ;
79import Layout from '@components/commons/Layout/Layout' ;
10+ import ActionModalButton from '@components/commons/Modal/ActionModalButton' ;
811import ProfileImg from '@components/commons/ProfileImg/ProfileImg' ;
912import Text from '@components/commons/Text/Text' ;
13+ import { Toast } from '@components/commons/Toast/Toast' ;
1014import ChoiceSlider from '@components/Home/ChoiceSlider/ChoiceSlider' ;
1115import CommentBox from '@components/Home/CommentBox/CommentBox' ;
1216import Timer from '@components/Home/Timer/Timer' ;
1317import {
1418 TopicCardContainer ,
15- BestTopicCotainer ,
1619 TopicContainer ,
1720 Topic ,
18- UserInfoContainer ,
1921 SelectTextContainer ,
22+ TopicFooter ,
2023} from '@components/Home/TopicCard/TopicCard.styles' ;
2124import TopicComments from '@components/Home/TopicComments/TopicComments' ;
2225import VoteCompletion from '@components/Home/VoteCompletion/VoteCompletion' ;
2326import useBottomSheet from '@hooks/useBottomSheet/useBottomSheet' ;
24- import { LatestComment } from '@interfaces/api/comment ' ;
27+ import useModal from '@hooks/useModal/useModal ' ;
2528import { Choice , TopicResponse } from '@interfaces/api/topic' ;
2629
30+ import { useAuthStore } from '@store/auth' ;
31+
2732import { colors } from '@styles/theme' ;
2833
29- import { LeftDoubleArrowIcon , RightDoubleArrowIcon } from '@icons/index' ;
34+ import {
35+ HideIcon ,
36+ LeftDoubleArrowIcon ,
37+ MeatballIcon ,
38+ RefreshIcon ,
39+ ReportIcon ,
40+ RightDoubleArrowIcon ,
41+ } from '@icons/index' ;
42+
43+ import { ResponseError } from '@apis/fetch' ;
3044
3145interface BTopicProps {
3246 topic : TopicResponse ;
3347}
3448
3549const BTopic = ( ) => {
3650 const location = useLocation ( ) ;
37- const { topic } = location . state as BTopicProps ;
3851 const { BottomSheet : CommentSheet , toggleSheet } = useBottomSheet ( { } ) ;
39- const voteMutation = useVoteTopic ( ) ;
40- const { data : latestCommentData , isSuccess } = useLatestComment (
52+ const { Modal, toggleModal } = useModal ( 'action' ) ;
53+ const memberId = useAuthStore ( ( store ) => store . memberId ) ;
54+ const { topic } = location . state as BTopicProps ;
55+ const isMyTopic = topic . author . id === memberId ;
56+
57+ const { data : previewComment } = usePreviewComment (
4158 topic . topicId ,
42- topic . selectedOption !== null
59+ topic . selectedOption !== null || isMyTopic
4360 ) ;
44- const [ latestComment , setLatestComment ] = useState < LatestComment | undefined > ( ) ;
61+ const voteMutation = useVoteTopic ( ) ;
62+ const reportMutation = useReportTopic ( topic . topicId ) ;
4563
4664 const handleVote = async ( choiceOption : Choice [ 'choiceOption' ] ) => {
47- const data = await voteMutation . mutateAsync ( {
48- topicId : topic . topicId ,
49- choiceOption : choiceOption ,
50- votedAt : new Date ( ) . getTime ( ) / 1000 ,
51- } ) ;
52- setLatestComment ( data . latestComment ) ;
53- return true ;
65+ try {
66+ await voteMutation . mutateAsync ( {
67+ topicId : topic . topicId ,
68+ choiceOption : choiceOption ,
69+ votedAt : new Date ( ) . getTime ( ) / 1000 ,
70+ } ) ;
71+ return true ;
72+ } catch ( error ) {
73+ if ( error instanceof ResponseError ) {
74+ if ( error . errorData . abCode === 'VOTED_BY_AUTHOR' ) {
75+ Toast . error ( '토픽을 작성한 사람은 투표할 수 없어요' ) ;
76+ }
77+ }
78+ return false ;
79+ }
5480 } ;
5581
5682 const handleCommentBoxClick = ( ) => {
57- if ( topic . selectedOption !== null ) {
83+ if ( isMyTopic || topic . selectedOption !== null ) {
5884 toggleSheet ( ) ;
5985 }
6086 } ;
6187
88+ const handleTopicOptionClick = ( ) => {
89+ toggleModal ( ) ;
90+ } ;
91+
92+ const handleHideTopic = ( ) => { } ;
93+
94+ const handleReportTopic = ( ) => {
95+ reportMutation . mutate ( ) ;
96+ toggleModal ( ) ;
97+ } ;
98+
99+ const handleRevoteTopic = ( ) => {
100+ throw new Error ( '투표 다시하기 기능을 사용할 수 없습니다.' ) ;
101+ } ;
102+
62103 return (
63104 < React . Fragment >
64105 < Layout hasBottomNavigation = { false } HeaderLeft = { < BackButton /> } >
65106 < TopicCardContainer >
107+ < Text size = { 18 } color = { colors . purple } >
108+ { topic . keyword ?. keywordName }
109+ </ Text >
66110 < TopicContainer >
67111 < Topic style = { { width : 170 , wordBreak : 'keep-all' , overflowWrap : 'break-word' } } >
68112 { topic . topicTitle }
69113 </ Topic >
70114 </ TopicContainer >
71- < UserInfoContainer >
72- < ProfileImg url = { topic . author . profileImageUrl } size = { 20 } />
73- < Text size = { 14 } weight = { 'regular' } color = { colors . white_60 } >
74- { topic . author . nickname }
75- </ Text >
76- </ UserInfoContainer >
77115 { topic . selectedOption !== null ? (
78116 < VoteCompletion
79117 side = { topic . selectedOption === 'CHOICE_A' ? 'A' : 'B' }
@@ -94,21 +132,51 @@ const BTopic = () => {
94132 </ Text >
95133 < RightDoubleArrowIcon />
96134 </ SelectTextContainer >
97- < CommentBox
98- side = { topic . topicSide }
99- hasVoted = { topic . selectedOption !== null }
100- topicId = { topic . topicId }
101- commentCount = { 0 }
102- voteCount = { 0 }
103- keyword = { topic . keyword }
104- latestComment = { latestComment }
105- onClick = { handleCommentBoxClick }
106- />
135+ < TopicFooter >
136+ < Row >
137+ < Row gap = { 8 } alignItems = "center" >
138+ < ProfileImg url = { topic . author . profileImageUrl } size = { '22px' } />
139+ < Text size = { 13 } color = { colors . white_60 } >
140+ { topic . author . nickname }
141+ </ Text >
142+ </ Row >
143+ < button onClick = { handleTopicOptionClick } >
144+ < MeatballIcon fill = { colors . white_60 } />
145+ </ button >
146+ </ Row >
147+ < CommentBox
148+ hasVoted = { topic . selectedOption !== null || isMyTopic }
149+ commentCount = { topic . commentCount }
150+ voteCount = { topic . voteCount }
151+ previewComment = { previewComment }
152+ onClick = { handleCommentBoxClick }
153+ isBig = { true }
154+ />
155+ </ TopicFooter >
107156 </ TopicCardContainer >
108157 </ Layout >
109158 < CommentSheet >
110159 < TopicComments topic = { topic } />
111160 </ CommentSheet >
161+ < Modal >
162+ < Col padding = { '36px 24px' } gap = { 20 } >
163+ < ActionModalButton
164+ handleClick = { handleHideTopic }
165+ Icon = { ( ) => < HideIcon /> }
166+ label = { '이런 토픽은 안볼래요' }
167+ />
168+ < ActionModalButton
169+ handleClick = { handleReportTopic }
170+ Icon = { ( ) => < ReportIcon /> }
171+ label = { '신고하기' }
172+ />
173+ < ActionModalButton
174+ handleClick = { handleRevoteTopic }
175+ Icon = { ( ) => < RefreshIcon /> }
176+ label = { '투표 다시 하기' }
177+ />
178+ </ Col >
179+ </ Modal >
112180 </ React . Fragment >
113181 ) ;
114182} ;
0 commit comments