From 15c73e526ea6250167357e8ac0f6fac0966f170e Mon Sep 17 00:00:00 2001
From: inhwa <igreen0485@gmail.com>
Date: Sat, 28 Nov 2020 01:39:30 +0900
Subject: [PATCH 1/2] mobile design change

---
 .../pages/ZaboPage/ZaboDetailPage.js          | 13 ++++--
 .../pages/ZaboPage/ZaboPage.styled.js         | 40 +++++++++++++++++--
 2 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/src/components/pages/ZaboPage/ZaboDetailPage.js b/src/components/pages/ZaboPage/ZaboDetailPage.js
index c4d31baf..a712dc27 100644
--- a/src/components/pages/ZaboPage/ZaboDetailPage.js
+++ b/src/components/pages/ZaboPage/ZaboDetailPage.js
@@ -1,3 +1,5 @@
+import 'moment/locale/ko';
+
 import React, { useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Link, useHistory, useRouteMatch } from 'react-router-dom';
@@ -119,7 +121,7 @@ const ZaboDetailPage = props => {
   const schedule = schedules[0];
   const timePast = getLabeledTimeDiff (createdAt, 60, 60, 6, 0);
   const due = schedule ? moment (schedule.startAt).diff (moment (), 'days') : 0;
-  const dueFormat = schedule && moment (schedule.startAt).format ('MM/DD h:mm');
+  const dueFormat = schedule && moment (schedule.startAt).format ('MM월 DD일 (ddd) h:mm');
   const stats = [{
     type: 'like',
     count: likesCount,
@@ -186,10 +188,13 @@ const ZaboDetailPage = props => {
               {schedule && (
                 <CategoryW>
                   <button>{schedule.eventType}</button>
-                  <h3>{schedule.title}</h3>
-                  <div className="schedule-date">
-                    {dueFormat}
+                  <div className="container">
+                    <h3 className="title">{schedule.title}</h3>
+                    <div className="schedule-date">
+                      {dueFormat}
+                    </div>
                   </div>
+
                 </CategoryW>
               )}
               <section className="contents">
diff --git a/src/components/pages/ZaboPage/ZaboPage.styled.js b/src/components/pages/ZaboPage/ZaboPage.styled.js
index 99a590b3..badadcb5 100644
--- a/src/components/pages/ZaboPage/ZaboPage.styled.js
+++ b/src/components/pages/ZaboPage/ZaboPage.styled.js
@@ -214,7 +214,30 @@ ZaboPageWrapper.Recommend = styled.section`
   }
 `;
 
-// TODO: temporal code - need to change
+// // TODO: temporal code - need to change
+// export const titleDate = styled.section`
+//   h3 {
+//     color: #363636;
+//     font-size: 16px;
+//     font-weight: bold;
+//     margin: 0;
+//     padding: 0;
+//   }
+//   .schedule-date {
+//     flex: 1;
+//     text-align: right;
+//     font-size: 16px;
+//     color: #797979;
+//   }
+// @media(max - width: 640px) {
+//   flex - direction: column;
+//   align - items: flex - start;
+//   height: 100 %;
+//   padding: 14px 20px;
+//   h3 { margin - bottom: 5px }
+// }
+// `
+
 export const CategoryW = styled.section`
   width: 99%;
   height: 66px;
@@ -236,8 +259,13 @@ export const CategoryW = styled.section`
     border: 0;
     margin-right: 8px;
     padding: 3px 8px;
+    white-space: nowrap;
+  }
+  .container{
+    display : flex;
+    flex-direction : row;
   }
-  h3 {
+  .title {
     color: #363636;
     font-size: 16px;
     font-weight: bold;
@@ -251,10 +279,16 @@ export const CategoryW = styled.section`
     color: #797979;
   }
   @media (max-width: 640px) {
-    flex-direction: column;
+    flex-direction: row;
     align-items: flex-start;
     height: 100%;
     padding: 14px 20px;
     button, h3 { margin-bottom: 5px }
+    .container{
+      flex-direction : column;
+    }
+    .schedule-date{
+      text-align: left;
+    }
   }
 `;

From 02ec2bdd71615c74a2d4a5a037c44d212d0867ba Mon Sep 17 00:00:00 2001
From: inhwa <igreen0485@gmail.com>
Date: Sat, 28 Nov 2020 01:47:57 +0900
Subject: [PATCH 2/2] change mobile design

---
 .../pages/ZaboPage/ZaboPage.styled.js         | 24 -------------------
 1 file changed, 24 deletions(-)

diff --git a/src/components/pages/ZaboPage/ZaboPage.styled.js b/src/components/pages/ZaboPage/ZaboPage.styled.js
index badadcb5..338e4bf6 100644
--- a/src/components/pages/ZaboPage/ZaboPage.styled.js
+++ b/src/components/pages/ZaboPage/ZaboPage.styled.js
@@ -214,30 +214,6 @@ ZaboPageWrapper.Recommend = styled.section`
   }
 `;
 
-// // TODO: temporal code - need to change
-// export const titleDate = styled.section`
-//   h3 {
-//     color: #363636;
-//     font-size: 16px;
-//     font-weight: bold;
-//     margin: 0;
-//     padding: 0;
-//   }
-//   .schedule-date {
-//     flex: 1;
-//     text-align: right;
-//     font-size: 16px;
-//     color: #797979;
-//   }
-// @media(max - width: 640px) {
-//   flex - direction: column;
-//   align - items: flex - start;
-//   height: 100 %;
-//   padding: 14px 20px;
-//   h3 { margin - bottom: 5px }
-// }
-// `
-
 export const CategoryW = styled.section`
   width: 99%;
   height: 66px;