✨ feat: Show Apartment Details on Result Page

src/App.jsx

@@ -12,6 +12,7 @@ import {
   ProfilePage,
   NewProfilePage,
   ApartmentPage,
+  ResultPage,
   NotFoundPage,
 } from './pages';
 
@@ -38,8 +39,9 @@ export default function App() {
           <Route exact path="/" component={HomePage} />
           <Route exact path="/profile" component={ProfilePage} />
           <Route path="/profile/new" component={NewProfilePage} />
-          <Route exact path="/apartment" component={ApartmentPage} />
-          <Route path="/apartment/:id" component={ApartmentPage} />
+          <Route exact path="/apartments" component={ApartmentPage} />
+          <Route path="/apartments/:id" component={ApartmentPage} />
+          <Route exact path="/result" component={ResultPage} />
           <Route component={NotFoundPage} />
         </Switch>
       </main>

src/App.test.jsx

@@ -18,6 +18,7 @@ describe('App', () => {
   const dispatch = jest.fn();
 
   const profile = {
+    isNew: false,
     name: '신형탁',
     age: 29,
     salary: 5000,
@@ -41,7 +42,18 @@ describe('App', () => {
     },
   ];
 
+  const apartment = {
+    name: '아크로리버파크',
+    date: '2021-03',
+    district: '반포동',
+    area: '129.92',
+    price: '470,000',
+    lotNumber: 1,
+  };
+
+  given('userFields', () => (profile));
   given('apartments', () => apartments);
+  given('apartment', () => apartment);
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -51,6 +63,7 @@ describe('App', () => {
     useSelector.mockImplementation((selector) => selector({
       userFields: given.userFields,
       apartments: given.apartments,
+      apartment: given.apartment,
     }));
 
     loadItem.mockImplementation(() => null);
@@ -65,8 +78,6 @@ describe('App', () => {
   }
 
   context('with path /', () => {
-    given('userFields', () => (profile));
-
     beforeEach(() => {
       loadItem.mockImplementation(() => (JSON.stringify(profile)));
     });
@@ -79,8 +90,6 @@ describe('App', () => {
   });
 
   context('with path /profile/new', () => {
-    given('userFields', () => (profile));
-
     it('renders new profile page', () => {
       renderApp({ path: '/profile/new' });
 
@@ -95,8 +104,6 @@ describe('App', () => {
   });
 
   context('with path /profile', () => {
-    given('userFields', () => (profile));
-
     it('renders profile page', () => {
       renderApp({ path: '/profile' });
 
@@ -107,19 +114,31 @@ describe('App', () => {
     });
   });
 
-  context('with path /aparment', () => {
+  context('with path /aparments', () => {
     it('renders apartment page', () => {
-      renderApp({ path: '/apartment' });
+      renderApp({ path: '/apartments' });
 
       expect(screen.getByText('거주하고 싶은신 아파트를 선택해주세요')).toBeInTheDocument();
     });
   });
 
-  context('with path /apartment/:id', () => {
+  context('with path /apartments/:id', () => {
     it('redners the apartment page', () => {
-      renderApp({ path: '/apartment/riverside' });
+      renderApp({ path: '/apartments/riverside' });
+
+      expect(screen.getByText('아크로리버파크')).toBeInTheDocument();
+    });
+  });
+
+  context('with path /result', () => {
+    it('renders the apartment result page', () => {
+      renderApp({ path: '/result' });
+
+      expect(screen.getByText('결과')).toBeInTheDocument();
 
       expect(screen.getByText('아크로리버파크')).toBeInTheDocument();
+      expect(screen.getByText('129.92')).toBeInTheDocument();
+      expect(screen.getByText('470,000')).toBeInTheDocument();
     });
   });
 

src/components/LinkField.jsx

@@ -1,8 +1,13 @@
 import React, { useCallback } from 'react';
 
-export default function LinkField({ url, title, onClick }) {
+export default function LinkField({
+  url, title, onClick, apartment, changeApartment,
+}) {
   const handleClick = useCallback((event) => {
     event.preventDefault();
+    if (title === '보기') {
+      changeApartment(apartment);
+    }
     onClick({ url });
   }, [onClick]);
 

src/components/LinkField.test.jsx

@@ -6,38 +6,68 @@ import LinkField from './LinkField';
 
 describe('LinkField', () => {
   const handleClick = jest.fn();
+  const changeApartment = jest.fn();
 
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  it('renders Link', () => {
-    render((
-      <LinkField
-        url="/profile/new"
-        title="내 정보 입력하러가기"
-        onClick={handleClick}
-      />
-    ));
+  context("with '내 정보 입력하러가기' title", () => {
+    it('renders Link', () => {
+      render((
+        <LinkField
+          url="/profile/new"
+          title="내 정보 입력하러가기"
+          onClick={handleClick}
+        />
+      ));
+
+      expect(screen.getByRole('link', {
+        name: '내 정보 입력하러가기',
+      })).toBeInTheDocument();
+    });
+  });
+
+  context("with '거주하고 싶은 아파트 둘러보기' title", () => {
+    it('calls handleClick upon clicking link', () => {
+      render((
+        <LinkField
+          url="/apartments"
+          title="거주하고 싶은 아파트 둘러보기"
+          onClick={handleClick}
+        />
+      ));
+
+      fireEvent.click(screen.getByRole('link', {
+        name: '거주하고 싶은 아파트 둘러보기',
+      }));
 
-    expect(screen.getByRole('link', {
-      name: '내 정보 입력하러가기',
-    })).toBeInTheDocument();
+      expect(handleClick).toBeCalledWith({ url: '/apartments' });
+    });
   });
 
-  it('calls handleClick upon clicking link', () => {
+  context("with '보기' title", () => {
     render((
       <LinkField
-        url="/apartment"
-        title="거주하고 싶은 아파트 둘러보기"
+        url="/apartments"
+        title="보기"
         onClick={handleClick}
+        apartment={{
+          name: '아크로리버파크',
+          date: '2021-03',
+          area: '129.92',
+          price: '470,000',
+          lotNumber: 1,
+        }}
+        changeApartment={changeApartment}
       />
     ));
 
     fireEvent.click(screen.getByRole('link', {
-      name: '거주하고 싶은 아파트 둘러보기',
+      name: '보기',
     }));
 
-    expect(handleClick).toBeCalledWith({ url: '/apartment' });
+    expect(handleClick).toBeCalled();
+    expect(changeApartment).toBeCalled();
   });
 });

src/pages/Apartment/Apartment.jsx

@@ -1,26 +1,20 @@
 import React from 'react';
 
-export default function Apartment({ apartments }) {
-  if (!apartments.length) {
-    return (
-      <p>loading</p>
-    );
-  }
+export default function Apartment({ apartment }) {
+  const {
+    name,
+    district,
+    area,
+  } = apartment;
 
   return (
-    <>
-      {apartments?.map((apartment) => (
-        <div key={apartment.name}>
-          <dl>
-            <dd>아파트명:</dd>
-            <dt>{apartment.name}</dt>
-            <dd>법정동:</dd>
-            <dt>{apartment.district}</dt>
-            <dd>전용면적:</dd>
-            <dt>{apartment.area}</dt>
-          </dl>
-        </div>
-      ))}
-    </>
+    <dl>
+      <dd>아파트명:</dd>
+      <dt>{name}</dt>
+      <dd>법정동:</dd>
+      <dt>{district}</dt>
+      <dd>전용면적:</dd>
+      <dt>{area}</dt>
+    </dl>
   );
 }

src/pages/Apartment/Apartment.test.jsx

@@ -5,37 +5,20 @@ import { render, screen } from '@testing-library/react';
 import Apartment from './Apartment';
 
 describe('Apartment', () => {
-  const apartments = [
-    {
-      name: '아크로리버파크',
-      date: '2021-03',
-      area: '129.92',
-      price: '470,000',
-      lotNumber: 1,
-    },
-    {
-      name: '서울',
-      date: '2021-02',
-      area: '200.27',
-      price: '420,000',
-      lotNumber: 2,
-    },
-  ];
+  const apartment = {
+    name: '아크로리버파크',
+    date: '2021-03',
+    district: '반포동',
+    area: '129.92',
+    price: '470,000',
+    lotNumber: 1,
+  };
 
-  context('without apartments', () => {
-    it('renders loading', () => {
-      render(<Apartment apartments={[]} />);
+  it('renders apartment', () => {
+    render(<Apartment apartment={apartment} />);
 
-      expect(screen.getByText('loading')).toBeInTheDocument();
-    });
-  });
-
-  context('with apartments', () => {
-    it('renders Apartment Page', () => {
-      render(<Apartment apartments={apartments} />);
-
-      expect(screen.getByText('아크로리버파크')).toBeInTheDocument();
-      expect(screen.getByText('서울')).toBeInTheDocument();
-    });
+    expect(screen.getByText('아크로리버파크')).toBeInTheDocument();
+    expect(screen.getByText('반포동')).toBeInTheDocument();
+    expect(screen.getByText('129.92')).toBeInTheDocument();
   });
 });

src/pages/Apartment/ApartmentNavigation.jsx

@@ -7,14 +7,14 @@ export default function ApartmentNavigation({ onClick }) {
       <ul>
         <li>
           <LinkField
-            url="/apartment/riverside"
+            url="/apartments/riverside"
             title="한강 뷰"
             onClick={onClick}
           />
         </li>
         <li>
           <LinkField
-            url="/apartment/businessdistrict"
+            url="/apartments/businessdistrict"
             title="우수 상권"
             onClick={onClick}
           />

src/pages/Apartment/ApartmentNavigation.test.jsx

@@ -35,6 +35,6 @@ describe('ApartmentNavigation', () => {
       name: '한강 뷰',
     }));
 
-    expect(handleClick).toBeCalledWith({ url: '/apartment/riverside' });
+    expect(handleClick).toBeCalledWith({ url: '/apartments/riverside' });
   });
 });

src/pages/Apartment/ApartmentPage.jsx

@@ -14,10 +14,13 @@ export default function ApartmentPage({ params }) {
   }, [history]);
 
   return (
-    <div>
-      <h2>거주하고 싶은신 아파트를 선택해주세요</h2>
+    <section>
+      <header>거주하고 싶은신 아파트를 선택해주세요</header>
       <ApartmentNavigation onClick={handleClick} />
-      <ApartmentContainer apartmentCategory={id} />
-    </div>
+      <ApartmentContainer
+        apartmentCategory={id}
+        onClick={handleClick}
+      />
+    </section>
   );
 }

src/pages/Apartment/Apartments.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import LinkField from '../../components/LinkField';
+
+import Apartment from './Apartment';
+
+export default function Apartments({ apartments, onClick, changeApartment }) {
+  if (!apartments.length) {
+    return (
+      <p>loading</p>
+    );
+  }
+
+  return (
+    <>
+      {apartments?.map((apartment) => (
+        <article key={apartment.name}>
+          <Apartment apartment={apartment} />
+          <LinkField
+            url="/result"
+            title="보기"
+            onClick={onClick}
+            apartment={apartment}
+            changeApartment={changeApartment}
+          />
+        </article>
+      ))}
+    </>
+  );
+}