@@ -171,17 +171,18 @@ export default function RequestDetailDreamer() {
171171 } , [ isPlaceholderData , currentPage , itemsPerPage , totalItems , makerId , queryClient ] ) ;
172172
173173 const handleKakaoShare = ( ) => {
174+ if ( typeof window === "undefined" ) return ;
175+
174176 const currentUrl = window . location . href ;
175- if ( typeof window !== "undefined" && window . Kakao ) {
176- const Kakao = window . Kakao ;
177- Kakao . Share . createDefaultButton ( {
178- container : "#kakaotalk-sharing-btn" ,
177+ if ( window . Kakao ) {
178+ window . Kakao . Share . sendDefault ( {
179179 objectType : "feed" ,
180180 content : {
181- title : makerProfileInfo ?. nickName || "Maker님" ,
182- description : makerProfileInfo ?. description || "여행 플랜 상세내용보기" ,
183- imageUrl :
184- "https://scontent-ssn1-1.cdninstagram.com/v/t51.29350-15/440535983_1166519591460822_7666710914928913519_n.jpg?stp=dst-jpg_e35_s1080x1080_tt6&_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=106&_nc_ohc=CzF6FbL6gvEQ7kNvgHzHfiF&_nc_gid=947375cfb83d43c5abb8aeacb63ed59a&edm=ANTKIIoBAAAA&ccb=7-5&oh=00_AYDtqZ0h00aA8oATSGX48sg79D3ROGTLYUaZSjkcbYafCQ&oe=67A60D41&_nc_sid=d885a2" ,
181+ title : makerProfileInfo ?. nickName || "Maker님" + " Maker님" ,
182+ description : makerProfileInfo ?. description || "Maker의 설명" ,
183+ imageUrl : "https://ifh.cc/g/wvkbqP.png" ,
184+ imageWidth : 400 ,
185+ imageHeight : 200 ,
185186 link : {
186187 mobileWebUrl : currentUrl ,
187188 webUrl : currentUrl ,
@@ -190,30 +191,15 @@ export default function RequestDetailDreamer() {
190191 } ) ;
191192 }
192193 } ;
194+
193195 useEffect ( ( ) => {
194196 if ( makerProfileInfo ) {
195197 setIsFollowed ( makerProfileInfo . isFollowed ) ;
196198 }
197199 } , [ makerProfileInfo ] ) ;
198200
199201 const handleFacebookShare = ( ) => {
200- if ( typeof window !== "undefined" && window . FB ) {
201- const shareUrl = `https://fs2-4-team2-go-for-me.vercel.app/maker-detail/${ makerId } ` ;
202-
203- window . FB . ui (
204- {
205- method : "share" ,
206- href : shareUrl ,
207- } ,
208- ( response ) => {
209- if ( response ) {
210- alert ( "공유를 성공했습니다!" ) ;
211- } else {
212- console . error ( "공유 실패 - URL:" , shareUrl ) ;
213- }
214- } ,
215- ) ;
216- }
202+ return window . open ( `http://www.facebook.com/sharer/sharer.php?u=${ location . href } ` ) ;
217203 } ;
218204
219205 const sharePromptContent = (
@@ -230,15 +216,16 @@ export default function RequestDetailDreamer() {
230216 ) ;
231217
232218 return (
233- < > < style >
234- { `
219+ < >
220+ < style >
221+ { `
235222 @media (min-width: 744px) and (max-width: 2700px) {
236223 .main-container {
237224 padding: 0 24px;
238225 }
239226 }
240227 ` }
241- </ style >
228+ </ style >
242229 < div className = "relative mt-20 grid w-full grid-cols-7 gap-10 mobile-tablet:flex mobile-tablet:flex-col" >
243230 { /* 왼쪽 열 */ }
244231 < div className = "col-span-5 flex flex-col" >
@@ -314,7 +301,7 @@ export default function RequestDetailDreamer() {
314301 </ div >
315302 </ div >
316303 < div className = "flex flex-col gap-10 mobile-tablet:gap-10" >
317- < hr className = "border-color-line-100 mt-10 " />
304+ < hr className = "mt-10 border-color-line-100" />
318305 < div >
319306 < div className = "pc:hidden" > { sharePromptContent } </ div >
320307 </ div >
@@ -346,64 +333,14 @@ export default function RequestDetailDreamer() {
346333 < p className = "bold mb-8 text-2xl text-color-black-400 mobile-tablet:text-lg" >
347334 서비스 가능 지역
348335 </ p >
336+
349337 < Selector
350338 category = "locations"
351339 selectedTypes = { makerProfileInfo ?. serviceArea ?? [ ] }
352340 data = { filteredLocations }
353- className = "flex gap-4"
341+ className = "flex w-full gap-4 mobile-tablet:w-full "
354342 />
355343 </ div >
356- < div >
357- < div >
358- < p className = "mb-8 text-lg bold" > 리뷰({ makerProfileInfo ?. totalReviews } )</ p >
359- < div className = "mb-10 flex items-center justify-center gap-10 mobile:flex-col" >
360- < div className = "flex flex-col items-center justify-center gap-4" >
361- < div className = "flex items-end gap-2" >
362- < p className = "text-[64px] bold leading-[76.38px]" >
363- { makerProfileInfo ?. averageRating }
364- </ p >
365- < p className = "text-[38px] leading-[45.38px] text-color-gray-100" > /5</ p >
366- </ div >
367- < div className = "flex justify-end" >
368- < StarRating
369- initialRating = { Number ( makerProfileInfo ?. averageRating ) }
370- readonly = { true }
371- />
372- </ div >
373- </ div >
374- < div className = "rounded-[16px] bg-color-background-200 px-[22px] py-4 shadow-md" >
375- < ReviewGraph reviewStats = { reviewStats } />
376- </ div >
377- </ div >
378- </ div >
379- { findMakerReview ?. list && findMakerReview . list . length > 0 && (
380- < >
381- { findMakerReview ?. list ?. map ( ( review , index ) => (
382- < div key = { index } className = "border-b border-color-line-100 py-8" >
383- < div className = "flex items-center gap-3" >
384- < p className = "border-r border-color-line-200 pr-3 text-md" >
385- { review . writer . nickName }
386- </ p >
387- < p className = "text-md text-color-gray-300" >
388- { formatToSimpleDate ( review . createdAt ) }
389- </ p >
390- </ div >
391- < div className = "mb-4 mt-2" >
392- < StarRating type = { true } initialRating = { review . rating } readonly = { true } />
393- </ div >
394- < p className = "text-2lg" > { review . content } </ p >
395- </ div >
396- ) ) }
397- < div className = "my-8 mobile-tablet:mb-[104px]" >
398- < Pagination
399- currentPage = { currentPage }
400- totalPages = { totalPages }
401- onPageChange = { handlePageChange }
402- />
403- </ div >
404- </ >
405- ) }
406- </ div >
407344 </ div >
408345 </ div >
409346
@@ -451,6 +388,57 @@ export default function RequestDetailDreamer() {
451388 </ div >
452389 </ div >
453390 </ div >
391+ < div >
392+ < div >
393+ < p className = "bold mb-8 text-lg pc:mt-12" > 리뷰({ makerProfileInfo ?. totalReviews } )</ p >
394+ < div className = "mb-10 flex items-center justify-center gap-10 mobile:flex-col" >
395+ < div className = "flex flex-col items-center justify-center gap-4" >
396+ < div className = "flex items-end gap-2" >
397+ < p className = "bold text-[64px] leading-[76.38px]" >
398+ { makerProfileInfo ?. averageRating }
399+ </ p >
400+ < p className = "text-[38px] leading-[45.38px] text-color-gray-100" > /5</ p >
401+ </ div >
402+ < div className = "flex justify-end" >
403+ < StarRating
404+ initialRating = { Number ( makerProfileInfo ?. averageRating ) }
405+ readonly = { true }
406+ />
407+ </ div >
408+ </ div >
409+ < div className = "rounded-[16px] bg-color-background-200 px-[22px] py-4 shadow-md mobile-tablet:mb-[104px]" >
410+ < ReviewGraph reviewStats = { reviewStats } />
411+ </ div >
412+ </ div >
413+ </ div >
414+ { findMakerReview ?. list && findMakerReview . list . length > 0 && (
415+ < >
416+ { findMakerReview ?. list ?. map ( ( review , index ) => (
417+ < div key = { index } className = "border-b border-color-line-100 py-8" >
418+ < div className = "flex items-center gap-3" >
419+ < p className = "border-r border-color-line-200 pr-3 text-md" >
420+ { review . writer . nickName }
421+ </ p >
422+ < p className = "text-md text-color-gray-300" >
423+ { formatToSimpleDate ( review . createdAt ) }
424+ </ p >
425+ </ div >
426+ < div className = "mb-4 mt-2" >
427+ < StarRating type = { true } initialRating = { review . rating } readonly = { true } />
428+ </ div >
429+ < p className = "text-2lg" > { review . content } </ p >
430+ </ div >
431+ ) ) }
432+ < div className = "my-8 mobile-tablet:mb-[104px]" >
433+ < Pagination
434+ currentPage = { currentPage }
435+ totalPages = { totalPages }
436+ onPageChange = { handlePageChange }
437+ />
438+ </ div >
439+ </ >
440+ ) }
441+ </ div >
454442 { isLoginModalOpen && (
455443 < div >
456444 < ModalLayout label = "알림" closeModal = { ( ) => setIsLoginModalOpen ( false ) } >
0 commit comments