From c1fb30e3b03f4831173e945bb682bb19b11f2efa Mon Sep 17 00:00:00 2001
From: tooooo1 <wer4272@nate.com>
Date: Mon, 12 Sep 2022 04:05:09 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20Detail=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EA=B5=AC=EC=B2=B4=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Card.tsx           |  2 +-
 frontend/src/components/DetailSchedule.tsx | 18 +++++++++---------
 frontend/src/hooks/useSubscription.tsx     |  3 +++
 frontend/src/pages/Detail.tsx              |  7 +++----
 frontend/src/types/index.ts                |  1 +
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/Card.tsx b/frontend/src/components/Card.tsx
index f0ec5e6..0528f98 100644
--- a/frontend/src/components/Card.tsx
+++ b/frontend/src/components/Card.tsx
@@ -57,7 +57,7 @@ const Card = ({
       direction={direction}
       onClick={() =>
         navigate('/detail', {
-          state: { id: subscriptionId },
+          state: { id: subscriptionId, imgLink: getImage(image) },
         })
       }
     >
diff --git a/frontend/src/components/DetailSchedule.tsx b/frontend/src/components/DetailSchedule.tsx
index f9707f4..f008b4b 100644
--- a/frontend/src/components/DetailSchedule.tsx
+++ b/frontend/src/components/DetailSchedule.tsx
@@ -20,24 +20,24 @@ const DetailSchedule = ({ subData }: DetailScheduleProps) => {
       </StyledLocationDetail>
       <StyledLocationTitle>1순위 접수일 일정</StyledLocationTitle>
       <StyledLocationDetail>
-        <li>해당지역 1순위 접수일: {subData.GNRL_RNK1_CRSPAREA_RCEPT_PD}</li>
-        <li>경기지역 1순위 접수일: {subData.GNRL_RNK1_ETC_GG_RCPTDE_PD}</li>
-        <li>기타지역 1순위 접수일: {subData.GNRL_RNK1_ETC_AREA_RCPTDE_PD}</li>
+        <li>해당지역 1순위 접수일: {subData.GNRL_RNK1_CRSPAREA_RCEPT_PD ?? '해당사항 없음'}</li>
+        <li>경기지역 1순위 접수일: {subData.GNRL_RNK1_ETC_GG_RCPTDE_PD ?? '해당사항 없음'}</li>
+        <li>기타지역 1순위 접수일: {subData.GNRL_RNK1_ETC_AREA_RCPTDE_PD ?? '해당사항 없음'}</li>
       </StyledLocationDetail>
       <StyledLocationTitle>2순위 접수일 일정</StyledLocationTitle>
       <StyledLocationDetail>
-        <li>해당지역 2순위 접수일: {subData.GNRL_RNK2_CRSPAREA_RCEPT_PD}</li>
-        <li>경기지역 2순위 접수일: {subData.GNRL_RNK2_ETC_GG_RCPTDE_PD}</li>
-        <li>기타지역 2순위 접수일: {subData.GNRL_RNK2_ETC_AREA_RCPTDE_PD}</li>
+        <li>해당지역 2순위 접수일: {subData.GNRL_RNK2_CRSPAREA_RCEPT_PD ?? '해당사항 없음'}</li>
+        <li>경기지역 2순위 접수일: {subData.GNRL_RNK2_ETC_GG_RCPTDE_PD ?? '해당사항 없음'}</li>
+        <li>기타지역 2순위 접수일: {subData.GNRL_RNK2_ETC_AREA_RCPTDE_PD ?? '해당사항 없음'}</li>
       </StyledLocationDetail>
       <StyledLocationTitle>당첨자 발표 일정</StyledLocationTitle>
       <StyledLocationDetail>
-        <li>당첨 발표일: {subData.PRZWNER_PRESNATN_DE}</li>
+        <li>당첨 발표일: {subData.PRZWNER_PRESNATN_DE ?? '해당사항 없음'}</li>
       </StyledLocationDetail>
       <StyledLocationTitle>계약 일정</StyledLocationTitle>
       <StyledLocationDetail>
-        <li>계약 시작일: {subData.CNTRCT_CNCLS_BGNDE}</li>
-        <li>계약 종료일: {subData.CNTRCT_CNCLS_ENDDE}</li>
+        <li>계약 시작일: {subData.CNTRCT_CNCLS_BGNDE ?? '해당사항 없음'}</li>
+        <li>계약 종료일: {subData.CNTRCT_CNCLS_ENDDE ?? '해당사항 없음'}</li>
       </StyledLocationDetail>
     </StyledWrapper>
   );
diff --git a/frontend/src/hooks/useSubscription.tsx b/frontend/src/hooks/useSubscription.tsx
index 12f675e..be07ac2 100644
--- a/frontend/src/hooks/useSubscription.tsx
+++ b/frontend/src/hooks/useSubscription.tsx
@@ -75,6 +75,9 @@ const useTodaySubscription = (request: Request, region?: string, id?: number) =>
             GNRL_RNK2_CRSPAREA_RCEPT_PD: v.GNRL_RNK2_CRSPAREA_RCEPT_PD,
             GNRL_RNK2_ETC_GG_RCPTDE_PD: v.GNRL_RNK2_ETC_GG_RCPTDE_PD,
             GNRL_RNK2_ETC_AREA_RCPTDE_PD: v.GNRL_RNK2_ETC_AREA_RCPTDE_PD,
+            PRZWNER_PRESNATN_DE: v.PRZWNER_PRESNATN_DE,
+            CNTRCT_CNCLS_BGNDE: v.CNTRCT_CNCLS_BGNDE,
+            CNTRCT_CNCLS_ENDDE: v.CNTRCT_CNCLS_ENDDE,
             likeNum: -1,
             imgLink: tmpImg,
           };
diff --git a/frontend/src/pages/Detail.tsx b/frontend/src/pages/Detail.tsx
index 5495c20..44b840e 100644
--- a/frontend/src/pages/Detail.tsx
+++ b/frontend/src/pages/Detail.tsx
@@ -4,7 +4,6 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { ReactComponent as BigHeart } from '../assets/icons/bigHeart.svg';
 import { ReactComponent as BigNullHeart } from '../assets/icons/bigNullHeart.svg';
-import Picture from '../assets/images/picture2.png';
 import { DetailLocation, DetailSchedule, LayoutNavigation, TabBar } from '../components';
 import PALETTE from '../constants/palette';
 import useSubscription from '../hooks/useSubscription';
@@ -14,7 +13,7 @@ import axiosInstance from '../utils/axiosInstance';
 const Detail = () => {
   const location = useLocation();
   const state = location.state as DetailState;
-  const { id } = state;
+  const { id, imgLink } = state;
 
   const { loading, subscriptions } = useSubscription('id', '', id);
   const subscription = subscriptions[0];
@@ -61,10 +60,10 @@ const Detail = () => {
 
   return (
     <LayoutNavigation headerTitle="청약 상세">
-      <div style={{ height: '290px', backgroundColor: '#777777' }}>
+      <div style={{ height: '196px', backgroundColor: '#777777' }}>
         {!loading && subscription ? (
           <>
-            <img src={Picture} width="100%" alt="picture" />
+            <img src={imgLink} width="100%" alt="picture" />
             <StyledLabel>{subscription.houseLocation.split(' ')[0]}</StyledLabel>
           </>
         ) : (
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 1b77e73..af99692 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -59,6 +59,7 @@ export type SubscriptionResponse = {
 
 export type DetailState = {
   readonly id: number;
+  readonly imgLink: string;
 };
 
 export type Writing = '최신' | '인기';