Refactor: merge Location component to one.

rnintai · Oct 2, 2021 · 3af96b2 · 3af96b2
1 parent 8547e0b
commit 3af96b2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 31 deletions.
diff --git a/src/components/Locations.js b/src/components/Locations.js
@@ -2,16 +2,7 @@ import React, { useState } from "react";
 
 import axios from "axios";
 
-import {
-  Location,
-  Thumb,
-  Metadata,
-  MetaTitle,
-  MetaTitleNumber,
-  MetaTitleContent,
-  MetaDesc,
-  MetaSights,
-} from "./styled/Location";
+import { Location } from "./styled/Location";
 
 function Locations() {
   let [locations, setLocations] = useState([]);
@@ -29,19 +20,7 @@ function Locations() {
   }
 
   if (locations !== undefined && locations.length > 0) {
-    return locations.map((location) => (
-      <Location key={location.id}>
-        <Thumb src={location.thumb}></Thumb>
-        <Metadata>
-          <MetaTitle>
-            <MetaTitleNumber>{location.id}.&nbsp;</MetaTitleNumber>
-            <MetaTitleContent>{location.title}</MetaTitleContent>
-          </MetaTitle>
-          <MetaDesc>{location.description}</MetaDesc>
-          <MetaSights>추천명소 : {location.sights.join(", ")}</MetaSights>
-        </Metadata>
-      </Location>
-    ));
+    return <Location locations={locations}></Location>;
   } else {
     searchApi();
     return null;

diff --git a/src/components/styled/Location.js b/src/components/styled/Location.js
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const Location = styled.section`
+const LocationWrap = styled.section`
   :nth-child(even) {
     flex-direction: row-reverse;
   }
@@ -15,7 +15,7 @@ export const Location = styled.section`
   }
 `;
 
-export const Thumb = styled.img.attrs((props) => ({
+const Thumb = styled.img.attrs((props) => ({
   src: props.src,
 }))`
   width: 100px;
@@ -28,35 +28,51 @@ export const Thumb = styled.img.attrs((props) => ({
 `;
 
 // Wrap
-export const Metadata = styled.div`
+const Metadata = styled.div`
   display: flex;
   text-align: left;
   flex-direction: column;
   width: 100%;
 `;
 // Title
-export const MetaTitle = styled.div`
+const MetaTitle = styled.div`
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 5px;
 `;
-export const MetaTitleNumber = styled.h3`
+const MetaTitleNumber = styled.h3`
   display: inline-block;
   color: #f17031;
 `;
-export const MetaTitleContent = styled.h3`
+const MetaTitleContent = styled.h3`
   display: inline-block;
 `;
 
 // Desc
-export const MetaDesc = styled.p`
+const MetaDesc = styled.p`
   font-size: 13px;
   font-weight: 400;
   color: #5e5e5e;
 `;
 // Sights
-export const MetaSights = styled.span`
+const MetaSights = styled.span`
   font-size: 13px;
   font-weight: 300;
   color: #6b9929;
 `;
+
+export function Location({ locations }) {
+  return locations.map((location) => (
+    <LocationWrap key={location.id}>
+      <Thumb src={location.thumb}></Thumb>
+      <Metadata>
+        <MetaTitle>
+          <MetaTitleNumber>{location.id}.&nbsp;</MetaTitleNumber>
+          <MetaTitleContent>{location.title}</MetaTitleContent>
+        </MetaTitle>
+        <MetaDesc>{location.description}</MetaDesc>
+        <MetaSights>추천명소 : {location.sights.join(", ")}</MetaSights>
+      </Metadata>
+    </LocationWrap>
+  ));
+}