Refactor: Detail 페이지 구체화

subscriptionRescueTeam · Sep 11, 2022 · c1fb30e · c1fb30e
1 parent 5e0cb98
commit c1fb30e
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -59,6 +59,7 @@ export type SubscriptionResponse = {
 
 export type DetailState = {
   readonly id: number;
+  readonly imgLink: string;
 };
 
 export type Writing = '최신' | '인기';