[FE] Refact #133: DetailBucket 컴포넌트 import 정보 순서 정리 및 주석, console 제거

Change-Id: I6aac3df11c1a0f6845d3649fde1a12ca80847798

frontend/src/pages/Bucket/BucketDetail/index.tsx

@@ -1,22 +1,25 @@
-import UserProfile from '../../../components/UserProfile/UserProfile'
+import { useParams } from 'react-router-dom'
+import { useEffect, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { Skeleton } from '@mui/material'
+
 import WithHeaderLayout from '../../../components/layout/WithHeaderLayout'
-import { icons } from '../../../constants/header-icons'
-import { useRouter } from '../../../hooks/useRouter'
-import { IBucketDetailInfo, IMenu, IMenuFunc } from '../../../interfaces'
 import BucketInfo from './BucketInfo'
 import InterestTag from './InterestTag'
+import UserProfile from '../../../components/UserProfile/UserProfile'
 import ShareButton from '../../../components/ShareButton'
 import AchieveDreamButton from './AcheiveDreamButton'
 import WriteReviewButton from './WriteReviewButton'
-import { useParams } from 'react-router-dom'
+import DetailLocation from './DetailLocation'
 import Reaction from './Reaction'
 import CommentList from './Comment/CommentList'
 import CommentInput from './Comment/CommentInput'
-import { useEffect, useState } from 'react'
-import { useQuery } from '@tanstack/react-query'
+
+import { useRouter } from '../../../hooks/useRouter'
 import { getBucketDetailInfo } from './api'
-import DetailLocation from './DetailLocation'
-import { Skeleton } from '@mui/material'
+
+import { IBucketDetailInfo, IMenu, IMenuFunc } from '../../../interfaces'
+import { icons } from '../../../constants/header-icons'
 
 const BucketDetail = () => {
 	const [isInputShown, setIsInputShown] = useState(false)
@@ -39,7 +42,6 @@ const BucketDetail = () => {
 		queryKey: ['bucketInfo', bucketId],
 		queryFn: getBucketDetailInfo,
 	})
-	console.log('isLoading', isLoading, bucketDetailInfo)
 
 	// :: Header
 	const handleLeftFunc = () => {
@@ -52,26 +54,21 @@ const BucketDetail = () => {
 	}
 	const headerFunc: IMenuFunc = { left_func: handleLeftFunc, right_func: undefined }
 
+	// :: Rendering
 	return (
 		<>
 			<WithHeaderLayout headerMenu={headerMenu} headerFunc={headerFunc}>
 				<BucketInfo
 					isLoading={isLoading}
 					title={bucketDetailInfo?.bucketInfo.title}
-					// title={undefined}
 					color={bucketDetailInfo?.bucketInfo.color}
 					dayCount={bucketDetailInfo?.bucketInfo.dayCount}
 					isPrivate={bucketDetailInfo?.bucketInfo.isPrivate}
 				/>
 				<UserProfile type="detail" isLoading={isLoading} userInfo={bucketDetailInfo?.userInfo} />
 				{/* 옵셔널한 정보들 (장소, 사진) */}
 				{isLoading || bucketDetailInfo === undefined ? (
-					<Skeleton
-						variant="rectangular"
-						width={'100%'}
-						height={'16rem'}
-						// className="rounded-md"
-					/>
+					<Skeleton variant="rectangular" width={'100%'} height={'16rem'} />
 				) : (
 					bucketDetailInfo.bucketInfo.bucketPicture && (
 						<img