feat#29-mainpage-ui

.github/workflows/auto-pr.yml

@@ -157,7 +157,7 @@ jobs:
 
                   // 429 에러 (Rate Limit)인 경우 재시도 대기
                   if (response.status === 429 && attempt < maxRetries) {
-                    const waitTime = Math.pow(2, attempt) * 1000; // 지수 백오프
+                    const waitTime = Math.pow(2, attempt) * 2000;
                     console.log(`Rate limit 초과. ${waitTime}ms 후 재시도...`);
                     await new Promise(resolve => setTimeout(resolve, waitTime));
                     lastError = error;
@@ -199,9 +199,20 @@ jobs:
                   throw new Error(`Invalid or empty text response from Gemini.\nParts: ${JSON.stringify(candidate.content.parts)}`);
                 }
 
+                // 응답 검증 - 최소 길이 확인
+                if (aiResponse.length < 100) {
+                  throw new Error(`Generated response is too short (${aiResponse.length} characters). This might indicate an incomplete response.`);
+                }
+
                 aiResponse = aiResponse.replace(/^```markdown\n/, '').replace(/\n```$/, '');
-                console.log('Generated PR body:', aiResponse);
+                console.log('Generated PR body length:', aiResponse.length);
+                console.log('Generated PR body preview:', aiResponse.substring(0, 200) + '...');
+
+                // 출력 설정 전에 잠시 대기
+                await new Promise(resolve => setTimeout(resolve, 1000));
+
                 core.setOutput('body', aiResponse);
+                console.log('PR body successfully set to output');
                 return; // 성공 시 함수 종료
 
               } catch (error) {
@@ -213,7 +224,7 @@ jobs:
                 }
 
                 // 마지막 시도가 아니면 잠시 대기
-                const waitTime = 1000 * attempt;
+                const waitTime = 2000 * attempt; // 대기 시간 증가
                 console.log(`${waitTime}ms 후 재시도...`);
                 await new Promise(resolve => setTimeout(resolve, waitTime));
               }
@@ -224,16 +235,31 @@ jobs:
             return;
         env:
           GEMINI_API_KEY: ${{ secrets.GEMINI_API_KEY }}
+        timeout-minutes: 10 # 타임아웃 시간 증가
 
       - name: Create Pull Request
         if: steps.check_pr.outputs.exists == 'false'
         env:
           GH_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
           PR_BODY: ${{ steps.generate-body.outputs.body }}
         run: |
+          # PR body가 비어있는지 확인
+          if [ -z "$PR_BODY" ]; then
+            echo "Error: PR body is empty. Skipping PR creation."
+            exit 1
+          fi
+
+          echo "PR body length: ${#PR_BODY}"
+          echo "PR body preview: ${PR_BODY:0:200}..."
+
+          # 잠시 대기 후 PR 생성
+          sleep 2
+
           gh pr create \
             --base main \
             --head ${{ github.ref_name }} \
             --title "${{ github.ref_name }}" \
             --body "$PR_BODY" \
-            --assignee ${{ github.actor }}
+            --assignee ${{ github.actor }}
+
+          echo "Pull Request created successfully!"

src/features/main/components/common/Pagination.tsx

@@ -0,0 +1,50 @@
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+
+import { Button } from '@/shared';
+
+type Props = {
+  currentPage: number;
+  setCurrentPage: (page: number) => void;
+  totalPages: number;
+};
+
+export const Pagination = ({ currentPage, setCurrentPage, totalPages }: Props) => {
+  return (
+    <div className='mt-6 flex items-center justify-center gap-2'>
+      <Button
+        variant='ghost'
+        size='icon'
+        onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
+        disabled={currentPage === 1}
+        className='size-8 rounded-full text-gray-600 hover:bg-gray-100 disabled:opacity-50'
+      >
+        <ChevronLeftIcon className='size-4' />
+      </Button>
+
+      {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+        <Button
+          variant='ghost'
+          key={page}
+          onClick={() => setCurrentPage(page)}
+          className={`size-8 rounded-full ${
+            currentPage === page
+              ? 'bg-lighthouse-blue text-white'
+              : 'text-[#6B7684] hover:bg-[#E6E8EA]'
+          }`}
+        >
+          {page}
+        </Button>
+      ))}
+
+      <Button
+        variant='ghost'
+        size='icon'
+        onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
+        disabled={currentPage === totalPages}
+        className='size-8 rounded-full text-gray-600 hover:bg-gray-100 disabled:opacity-50'
+      >
+        <ChevronRightIcon className='size-4' />
+      </Button>
+    </div>
+  );
+};

src/features/main/components/common/index.ts

@@ -3,3 +3,4 @@ export * from './ChartGrid';
 export * from './ChartLineItem';
 export * from './LegendLine';
 export * from './Needle';
+export * from './Pagination';

src/features/main/components/features/chart/RiskChartBox.tsx

@@ -13,9 +13,10 @@ import { Needle } from '../../common';
 
 type Props = {
   riskScore: number;
+  title: string;
 };
 
-export const RiskChartBox = ({ riskScore }: Props) => {
+export const RiskChartBox = ({ riskScore, title }: Props) => {
   const gaugeData: GaugeData = getGaugeData(riskScore);
 
   const scoreColorClass = getRiskScoreColorClass(riskScore);
@@ -24,7 +25,7 @@ export const RiskChartBox = ({ riskScore }: Props) => {
 
   return (
     <div className='w-full rounded-lg bg-white p-6'>
-      <h3 className='mb-2 text-2xl font-bold text-gray-900'>전세 계약 최종 위험도</h3>
+      <h3 className='mb-2 text-2xl font-bold text-gray-900'>{title}</h3>
       <p className='text-md mb-6 flex items-center gap-2 text-gray-600'>
         <span className='font-semibold'>위험 점수 :</span>
         <span className={`font-semibold ${scoreColorClass}`}>{riskScore}</span>

src/features/main/components/features/index.ts

@@ -1,2 +1,4 @@
 export * from './form';
 export * from './chart';
+export * from './reliability';
+export * from './property';

src/features/main/components/features/property/PropertyListBox.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+
+import HomeIcon from '../../../_assets/Home.webp';
+import type { Property } from '../../../types';
+import { getPropertyTypeColor } from '../../../utils';
+import { Pagination } from '../../common';
+
+type Props = {
+  properties: Property[];
+  title: string;
+};
+
+export const PropertyListBox = ({ properties, title }: Props) => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 5;
+  const totalPages = Math.ceil(properties.length / itemsPerPage);
+
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const currentProperties = properties.slice(startIndex, endIndex);
+
+  return (
+    <div className='w-full rounded-lg bg-white p-6'>
+      <h3 className='mb-4 text-2xl font-bold text-gray-900'>{title}</h3>
+
+      <div className='space-y-4'>
+        {currentProperties.map((property) => (
+          <div key={property.id} className='flex items-start justify-center gap-3'>
+            <img src={HomeIcon} alt='home' className='mt-1 h-[19px] w-[15px]' />
+
+            <div className='flex flex-1 flex-col gap-1'>
+              {/* 매물 타입 라벨 */}
+              <div className='flex items-center gap-3'>
+                <span
+                  className='flex h-6 w-16 items-center justify-center rounded-xs text-sm font-medium text-white'
+                  style={{
+                    backgroundColor: getPropertyTypeColor(property.type),
+                  }}
+                >
+                  {property.type}
+                </span>
+                <span className='text-lg font-medium text-gray-900'>{property.buildingName}</span>
+              </div>
+
+              {/* 상세 주소 */}
+              <span className='text-sm text-gray-500'>{property.address}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* 페이지네이션 */}
+      <Pagination
+        currentPage={currentPage}
+        setCurrentPage={setCurrentPage}
+        totalPages={totalPages}
+      />
+    </div>
+  );
+};

src/features/main/components/features/property/index.ts

@@ -0,0 +1 @@
+export * from './PropertyListBox';

src/features/main/components/features/reliability/GradeBox.tsx

@@ -0,0 +1,23 @@
+import { getTrustGradeColorClass } from '@/shared';
+
+import { LANDLORD_TRUST_DATA } from '../../../mock';
+
+export const GradeBox = () => {
+  return (
+    <div className='flex flex-col gap-2'>
+      <h1 className='text-3xl font-bold'>임대인 신뢰도 등급</h1>
+      <span className='text-md flex gap-2 font-semibold'>
+        <span className='text-black'>위험점수 :</span>
+        <span className='text-chart-green'>{LANDLORD_TRUST_DATA.trustScore}</span>
+        <span className='text-black'>점</span>
+      </span>
+      <div className='flex w-full items-center justify-center'>
+        <span
+          className={`text-landlord-reliability font-semibold ${getTrustGradeColorClass(LANDLORD_TRUST_DATA.grade)}`}
+        >
+          {LANDLORD_TRUST_DATA.grade}
+        </span>
+      </div>
+    </div>
+  );
+};

src/features/main/components/features/reliability/MultiHouseBox.tsx

@@ -0,0 +1,15 @@
+import { LANDLORD_TRUST_DATA } from '../../../mock';
+
+export const MultiHouseBox = () => {
+  return (
+    <div>
+      <h1 className='text-3xl font-bold'>다주택자</h1>
+      <div className='flex w-full items-end justify-center'>
+        <span className='text-landlord-reliability font-bold text-blue-500'>
+          {LANDLORD_TRUST_DATA.ownedUnsoldCount}
+        </span>
+        <span className='mb-25 text-5xl font-semibold text-black'>채</span>
+      </div>
+    </div>
+  );
+};

src/features/main/components/features/reliability/ReasonBox.tsx

@@ -0,0 +1,24 @@
+import { RELIABILITY_REASONS } from '../../../mock';
+
+export const ReasonBox = () => {
+  return (
+    <div className='flex w-full flex-col gap-2 pb-3'>
+      <h1 className='text-3xl font-bold'>임대인 신뢰도 등급 사유</h1>
+      {RELIABILITY_REASONS.map((reason, index) => (
+        <div
+          key={`${reason.name}-${reason.percent}-${index}`}
+          className='flex items-center gap-5 py-3 text-center font-semibold'
+        >
+          <div className='size-1 rounded-full bg-black' />
+          <span className='flex items-center gap-2 text-gray-900'>
+            <span className='text-lg text-lighthouse-blue'>{reason.name}</span>
+            <div className='flex items-center gap-1'>
+              <span className='font-medium text-red-500'>{reason.percent}</span>
+              <span className='text-black'>%</span>
+            </div>
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};

src/features/main/components/features/reliability/SubrogationPaymentBox.tsx

@@ -0,0 +1,19 @@
+import { getSubrogationColorClass } from '@/shared';
+
+import { LANDLORD_TRUST_DATA } from '../../../mock';
+
+export const SubrogationPaymentBox = () => {
+  return (
+    <div>
+      <h1 className='text-3xl font-bold'>대위변제 이력</h1>
+      <div className='flex w-full items-end justify-center'>
+        <span
+          className={`text-landlord-reliability font-bold ${getSubrogationColorClass(LANDLORD_TRUST_DATA.subrogationCount)}`}
+        >
+          {LANDLORD_TRUST_DATA.subrogationCount}
+        </span>
+        <span className='mb-25 text-5xl font-semibold text-black'>회</span>
+      </div>
+    </div>
+  );
+};

src/features/main/components/features/reliability/index.ts

@@ -0,0 +1,4 @@
+export * from './GradeBox';
+export * from './ReasonBox';
+export * from './SubrogationPaymentBox';
+export * from './MultiHouseBox';

src/features/main/constants/index.ts

@@ -1,2 +1,3 @@
 export * from './form-type';
 export * from './house-type';
+export * from './property-type';

src/features/main/constants/property-type.ts

@@ -0,0 +1,24 @@
+// 기본 매물 타입별 색상 정의
+export const PROPERTY_TYPE_COLORS = {
+  오피스텔: '#B27373', // 적갈색
+  원룸: '#73B286', // 연한 초록색
+  투룸: '#7573B2', // 보라색
+  아파트: '#B273AE', // 연한 분홍색
+  복층: '#739EB2', // 청록색
+  빌라: '#FFA500', // 주황색
+  단독주택: '#32CD32', // 라임색
+} as const;
+
+// 동적 색상 생성을 위한 fallback 색상 배열
+export const FALLBACK_COLORS = [
+  '#FF6B6B', // 빨간색
+  '#4ECDC4', // 청록색
+  '#45B7D1', // 파란색
+  '#96CEB4', // 연한 초록색
+  '#FFEAA7', // 연한 노란색
+  '#DDA0DD', // 연한 보라색
+  '#98D8C8', // 민트색
+  '#F7DC6F', // 노란색
+  '#BB8FCE', // 연한 보라색
+  '#85C1E9', // 하늘색
+] as const;

src/features/main/mock/index.ts

@@ -1,2 +1,4 @@
 export * from './chart-data.mock';
+export * from './landlord-reliability.mock';
+export * from './property-data.mock';
 export * from './risk-analysis.mock';

src/features/main/mock/landlord-reliability.mock.ts

@@ -0,0 +1,33 @@
+// 임대인 신뢰도 등급, 대위변제 이력, 다주택자
+export const LANDLORD_TRUST_DATA = {
+  trustScore: 85,
+  subrogationCount: 0,
+  arrearsCount: 0,
+  litigationCount: 0,
+  ownedUnsoldCount: 2,
+  grade: 'A',
+};
+
+// 임대인 신뢰도 등급 사유
+export const RELIABILITY_REASONS = [
+  {
+    name: '임대인 신뢰도 등급 사유',
+    percent: 25,
+  },
+  {
+    name: '임대인 신뢰도 등급 사유',
+    percent: 20,
+  },
+  {
+    name: '임대인 신뢰도 등급 사유',
+    percent: 18,
+  },
+  {
+    name: '임대인 신뢰도 등급 사유',
+    percent: 15,
+  },
+  {
+    name: '임대인 신뢰도 등급 사유',
+    percent: 12,
+  },
+];