dev to main

package.json

@@ -28,7 +28,7 @@
     "next": "15.1.11",
     "react": "^19.0.0",
     "react-chartjs-2": "^5.3.0",
-    "react-dom": "^19.0.0",
+    "react-dom": "^19.2.0",
     "react-redux": "^9.2.0",
     "sheet": "link:@/components/ui/sheet",
     "tailwind-merge": "^3.3.1"
@@ -37,8 +37,8 @@
     "@eslint/eslintrc": "^3",
     "@eslint/js": "^9.27.0",
     "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
     "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-next": "^0.0.0",
@@ -54,5 +54,6 @@
     "typescript": "^5",
     "typescript-eslint": "^8.32.1",
     "webpack": "^5.99.9"
-  }
+  },
+  "packageManager": "[email protected]"
 }

src/api/pages/valanse/trendinVoteApi.ts

@@ -0,0 +1,21 @@
+import { authApi } from '../../instance/authApi'
+
+export type TrendingVoteResponse = {
+  voteId: number
+  title: string
+  content: string
+  category: string
+  totalParticipants: number
+  createdBy: string
+  createdAt: string
+  options: {
+    optionId: number
+    content: string
+    vote_count: number
+  }[]
+}
+
+export async function fetchTrendingVotes() {
+  const res = await authApi.get<TrendingVoteResponse>('/votes/trending')
+  return res.data
+}

src/api/votes.ts

@@ -24,6 +24,7 @@ export interface VoteOption {
 export interface BestVoteResponse {
   voteId: number
   title: string
+  content: string | null
   category: VoteCategory
   totalParticipants: number
   createdBy: string

src/app/(unauth)/balanse/loading.tsx

@@ -0,0 +1,5 @@
+import Loading from '@/components/_shared/loading'
+
+export default function BalanseLoading() {
+  return <Loading />
+}

src/app/(unauth)/entry/loading.tsx

@@ -0,0 +1,5 @@
+import Loading from '@/components/_shared/loading'
+
+export default function EntryLoading() {
+  return <Loading />
+}

src/app/(unauth)/oauth/kakao/redirect/loading.tsx

@@ -0,0 +1,5 @@
+import Loading from '@/components/_shared/loading'
+
+export default function KakaoRedirectLoading() {
+  return <Loading />
+}

src/app/(unauth)/onboarding/loading.tsx

@@ -0,0 +1,5 @@
+import Loading from '@/components/_shared/loading'
+
+export default function OnboardingLoading() {
+  return <Loading />
+}

src/app/create/loading.tsx

@@ -0,0 +1,5 @@
+import Loading from '@/components/_shared/loading'
+
+export default function CreateLoading() {
+  return <Loading />
+}

src/app/main/loading.tsx

@@ -0,0 +1,5 @@
+import Loading from '@/components/_shared/loading'
+
+export default function MainLoading() {
+  return <Loading />
+}

src/app/my/loading.tsx

@@ -0,0 +1,5 @@
+import Loading from '@/components/_shared/loading'
+
+export default function MyLoading() {
+  return <Loading />
+}

src/app/poll/[id]/page.tsx

@@ -15,6 +15,7 @@ import VoteChart from '@/components/pages/poll/statistics/statisics'
 import { fetchBestVote } from '@/api/votes'
 import Header from '@/components/_shared/header'
 import BottomNavBar from '@/components/_shared/nav/bottomNavBar'
+import Loading from '@/components/_shared/loading'
 
 interface PollOption {
   optionId: number
@@ -26,13 +27,14 @@ interface PollOption {
 interface PollDetail {
   voteId: number
   title: string
+  content: string | null
   category: string
   creatorNickname: string
   createdAt: string
   totalVoteCount: number
   options: PollOption[]
   hasVoted: boolean
-  votedOptionLabel: string
+  votedOptionLabel: string | null
 }
 
 export default function PollDetailPage() {
@@ -111,19 +113,7 @@ export default function PollDetailPage() {
 
   // 인기 탭에서 로딩 중일 때
   if (id === 'hot') {
-    return (
-      <div>
-        <Header title="오늘의 핫이슈" showBackButton={false} />
-        <div className="flex items-center justify-center min-h-screen">
-          <div className="text-center">
-            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
-            <p className="text-gray-600">
-              가장 인기 있는 투표를 불러오는 중...
-            </p>
-          </div>
-        </div>
-      </div>
-    )
+    return <Loading />
   }
 
   const getHeaderTitle = () => {
@@ -146,28 +136,23 @@ export default function PollDetailPage() {
     }
   }
 
-  if (loading)
-    return (
-      <div>
-        <Header
-          title={getHeaderTitle()}
-          showBackButton={shouldShowBackButton()}
-          bgGray={true}
-          onBackClick={handleBackClick}
-        />
-        <div className="p-4">로딩 중...</div>
-      </div>
-    )
+  if (loading) return <Loading />
   if (error)
     return (
-      <div>
+      <div className="flex flex-col min-h-screen bg-[#f0f0f0]">
         <Header
           title={getHeaderTitle()}
           showBackButton={shouldShowBackButton()}
           bgGray={true}
           onBackClick={handleBackClick}
         />
-        <div className="p-4 text-red-500">{error}</div>
+        <div className="flex flex-col items-center justify-center flex-1 p-4">
+          <div className="text-center">
+            <p className="text-xl font-bold text-red-500 mb-2">⚠️</p>
+            <p className="text-lg font-semibold text-gray-700 mb-2">{error}</p>
+            <p className="text-sm text-gray-500">다시 시도해주세요</p>
+          </div>
+        </div>
       </div>
     )
   if (!data) return null
@@ -186,14 +171,15 @@ export default function PollDetailPage() {
             voteId={data.voteId}
             createdBy={data.creatorNickname}
             title={data.title}
+            content={data.content}
             options={data.options.map((opt) => ({
               optionId: opt.optionId,
               content: opt.content,
               vote_count: opt.voteCount,
             }))}
             totalParticipants={data.totalVoteCount}
             hasVoted={data.hasVoted}
-            votedOptionLabel={data.votedOptionLabel}
+            votedOptionLabel={data.votedOptionLabel ?? undefined}
           />
         )}
         {bestComment && !open && (

src/app/poll/loading.tsx

@@ -0,0 +1,5 @@
+import Loading from '@/components/_shared/loading'
+
+export default function PollLoading() {
+  return <Loading />
+}

src/components/_shared/inlineLoading.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import styles from './loading.module.css'
+
+const messages = [
+  '당신의 선택을 기다리는 중...',
+  '오늘은 어떤 선택을 하시겠어요?',
+]
+
+export default function InlineLoading() {
+  const [message, setMessage] = useState('')
+
+  useEffect(() => {
+    const randomMessage = messages[Math.floor(Math.random() * messages.length)]
+    setMessage(randomMessage)
+  }, [])
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <svg
+        className={styles.loadingSvg}
+        xmlns="http://www.w3.org/2000/svg"
+        width="130"
+        height="130"
+        viewBox="0 0 130 130"
+        fill="none"
+      >
+        <rect width="130" height="130" rx="21.6667" />
+        <path
+          d="M38.3861 95.1753L59.4066 77.6582C62.6206 74.9799 67.2891 74.9799 70.5031 77.6582L91.5237 95.1754C97.7508 100.365 94.0814 110.5 85.9755 110.5H43.9343C35.8284 110.5 32.1589 100.365 38.3861 95.1753Z"
+          fill="#4D7298"
+        />
+
+        {/* 왼쪽 말풍선 */}
+        <g className={styles.bubble}>
+          <path
+            d="M38.7295 20.5834C51.1442 20.5836 61.208 30.6481 61.208 43.0629C61.2078 55.3143 51.4069 65.2756 39.2178 65.5355L39.2246 65.5414H16.667L16.2637 43.8002C16.2558 43.5554 16.25 43.3096 16.25 43.0629C16.25 30.648 26.3146 20.5834 38.7295 20.5834Z"
+            fill="#E4E4E4"
+          />
+          <rect
+            x="23.7431"
+            y="35.5695"
+            width="29.9722"
+            height="3.74653"
+            rx="1.87326"
+            fill="#B6B6B6"
+          />
+          <rect
+            x="23.7431"
+            y="43.0625"
+            width="18.7326"
+            height="3.74653"
+            rx="1.87326"
+            fill="#B6B6B6"
+          />
+        </g>
+
+        {/* 오른쪽 하트 */}
+        <g className={styles.heart}>
+          <path
+            d="M91.1809 20.5834C103.596 20.5835 113.659 30.6481 113.659 43.0629C113.659 43.3211 113.653 43.5782 113.645 43.8344L113.242 65.5414H90.6848L90.6906 65.5355C78.5021 65.2749 68.7016 55.3139 68.7014 43.0629C68.7014 30.648 78.766 20.5834 91.1809 20.5834Z"
+            fill="#E4E4E4"
+          />
+          <path
+            d="M99.1024 36.1233C98.6447 35.6508 98.1012 35.2759 97.5031 35.0202C96.9049 34.7644 96.2638 34.6328 95.6163 34.6328C94.9689 34.6328 94.3277 34.7644 93.7296 35.0202C93.1314 35.2759 92.588 35.6508 92.1303 36.1233L91.1803 37.1035L90.2304 36.1233C89.3058 35.1693 88.0518 34.6333 86.7443 34.6333C85.4368 34.6333 84.1828 35.1693 83.2582 36.1233C82.3337 37.0773 81.8142 38.3713 81.8142 39.7205C81.8142 41.0697 82.3337 42.3636 83.2582 43.3176L84.2082 44.2978L91.1803 51.4922L98.1525 44.2978L99.1024 43.3176C99.5604 42.8453 99.9236 42.2846 100.171 41.6673C100.419 41.0501 100.547 40.3886 100.547 39.7205C100.547 39.0524 100.419 38.3908 100.171 37.7736C99.9236 37.1564 99.5604 36.5956 99.1024 36.1233Z"
+            fill="#EB5E28"
+          />
+        </g>
+
+        {/* 저울 막대 */}
+        <rect
+          className={styles.beam}
+          x="16.25"
+          y="69.2882"
+          width="97.4097"
+          height="7.49306"
+          rx="3.74653"
+          fill="#4D7298"
+        />
+      </svg>
+
+      {/* 브랜드 메시지 */}
+      <div className="mt-6 text-center text-lg font-bold text-white">
+        {message}
+      </div>
+    </div>
+  )
+}