feat: chatbot 클릭시 공고 상세보기로 이동

Author: hwiyoon20010309

app/dashboard/jobs/[id]/page.tsx

@@ -223,7 +223,18 @@ export default function JobDetailPage() {
   useEffect(() => {
     const fetchScreenshot = async () => {
       const jobId = params.id as string
-      if (!jobId) return
+      if (!jobId) {
+        console.log('스크린샷: jobId가 없습니다')
+        return
+      }
+      
+      // job.screenShotUrl이 있으면 우선 사용
+      if (job?.screenShotUrl) {
+        console.log('스크린샷 URL (job에서):', job.screenShotUrl)
+        setScreenshotUrl(job.screenShotUrl)
+        setIsLoadingScreenshot(false)
+        return
+      }
 
       try {
         setIsLoadingScreenshot(true)
@@ -236,18 +247,20 @@ export default function JobDetailPage() {
 
         // API 프록시를 통해 스크린샷 가져오기
         const screenshotApiUrl = `/api/posts/${jobId}/screenshot?${queryParams.toString()}`
+        console.log('스크린샷 URL (API에서):', screenshotApiUrl)
         setScreenshotUrl(screenshotApiUrl)
+        setIsLoadingScreenshot(false)
       } catch (err) {
+        console.error('스크린샷 URL 설정 오류:', err)
         const errorMessage = err instanceof Error ? err.message : '스크린샷을 불러오는 중 오류가 발생했습니다.'
         setScreenshotError(errorMessage)
         setScreenshotUrl(null)
-      } finally {
         setIsLoadingScreenshot(false)
       }
     }
 
     fetchScreenshot()
-  }, [params.id])
+  }, [params.id, job])
 
   // 매칭된 직무 생성
   useEffect(() => {
@@ -474,16 +487,20 @@ export default function JobDetailPage() {
             <div className="text-center py-12">
               <p className="text-red-500 text-sm">{screenshotError}</p>
             </div>
-          ) : (screenshotUrl || job.screenShotUrl) ? (
+          ) : screenshotUrl ? (
             <div className="flex justify-center">
               <img
-                src={screenshotUrl || job.screenShotUrl || ''}
-                alt={`${job.title} 공고 스크린샷`}
+                src={screenshotUrl}
+                alt={`${job?.title || '공고'} 스크린샷`}
                 className="max-w-full h-auto rounded-lg border border-gray-200 shadow-sm"
                 onError={() => {
                   setScreenshotError('스크린샷을 불러올 수 없습니다.')
                   setScreenshotUrl(null)
                 }}
+                onLoad={() => {
+                  // 이미지 로드 성공 시 에러 상태 초기화
+                  setScreenshotError(null)
+                }}
               />
             </div>
           ) : (

components/dashboard/AIChatbot.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useRef, useEffect } from 'react'
 import { useRouter, usePathname } from 'next/navigation'
+import Link from 'next/link'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Card } from '@/components/ui/card'
@@ -826,42 +827,46 @@ export default function AIChatbot() {
                         관련 채용 공고 ({message.jobPostings.length}개)
                       </div>
                       {message.jobPostings.map((job) => (
-                        <Card
+                        <Link
                           key={job.id}
-                          className="p-3 border border-gray-200"
+                          href={`/dashboard/jobs/${job.id}`}
+                          className="block"
                         >
-                          <div className="flex items-start gap-3">
-                            <div className="flex-1 min-w-0">
-                              <div className="flex items-start justify-between gap-2 mb-1">
-                                <h4 className="font-semibold text-sm text-gray-900 line-clamp-1">
-                                  {job.title || '제목 없음'}
-                                </h4>
-                              </div>
-                              {job.companyName && (
-                                <p className="text-xs text-gray-600 mb-1">
-                                  {job.companyName}
-                                </p>
-                              )}
-                              <div className="flex flex-wrap gap-2 mt-2">
-                                {job.role && (
-                                  <span className="text-xs px-2 py-0.5 bg-blue-100 text-blue-700 rounded">
-                                    {job.role}
-                                  </span>
+                          <Card className="p-3 border border-gray-200 hover:bg-gray-50 cursor-pointer transition-all hover:border-gray-300 hover:shadow-md">
+                            <div className="flex items-start gap-3">
+                              <div className="flex-1 min-w-0">
+                                <div className="flex items-start justify-between gap-2 mb-1">
+                                  <h4 className="font-semibold text-sm text-gray-900 line-clamp-1">
+                                    {job.title || '제목 없음'}
+                                  </h4>
+                                  <ExternalLink className="w-3 h-3 text-gray-400 flex-shrink-0" />
+                                </div>
+                                {job.companyName && (
+                                  <p className="text-xs text-gray-600 mb-1">
+                                    {job.companyName}
+                                  </p>
                                 )}
-                                {job.experience && (
-                                  <span className="text-xs px-2 py-0.5 bg-purple-100 text-purple-700 rounded">
-                                    {job.experience}
-                                  </span>
+                                <div className="flex flex-wrap gap-2 mt-2">
+                                  {job.role && (
+                                    <span className="text-xs px-2 py-0.5 bg-blue-100 text-blue-700 rounded">
+                                      {job.role}
+                                    </span>
+                                  )}
+                                  {job.experience && (
+                                    <span className="text-xs px-2 py-0.5 bg-purple-100 text-purple-700 rounded">
+                                      {job.experience}
+                                    </span>
+                                  )}
+                                </div>
+                                {job.postedAt && (
+                                  <p className="text-xs text-gray-500 mt-2">
+                                    등록일: {job.postedAt.year}.{String(job.postedAt.month).padStart(2, '0')}.{String(job.postedAt.day).padStart(2, '0')}
+                                  </p>
                                 )}
                               </div>
-                              {job.postedAt && (
-                                <p className="text-xs text-gray-500 mt-2">
-                                  등록일: {job.postedAt.year}.{String(job.postedAt.month).padStart(2, '0')}.{String(job.postedAt.day).padStart(2, '0')}
-                                </p>
-                              )}
                             </div>
-                          </div>
-                        </Card>
+                          </Card>
+                        </Link>
                       ))}
                     </div>
                   )}