💄 future timeline ui

src/components/atoms/Line.tsx

@@ -3,7 +3,7 @@ import React from "react";
 type Props = {};
 
 const styles = {
-  boxing: "w-1/2 md:h-24 h-12 border-l-4",
+  boxing: "w-1/2 md:h-24 h-12",
 };
 
 const Line = (props: Props) => <div className={styles.boxing}></div>;

src/components/atoms/MileStoneContentPreview.tsx

@@ -15,7 +15,7 @@ const MileStoneContentPreview = ({ title, description }: Props) => {
   // styles (IMO: No strict typing needed.)
   const styles = {
     sizing: "w-11/12 h-full",
-    boxing: "ml-2 p-4 break-words ",
+    boxing: "ml-5 p-4 break-words",
     text: "whitespace-pre-line",
     color: "bg-gray-300",
     border: "rounded-lg",

src/components/atoms/MileStoneDate.tsx

@@ -7,48 +7,7 @@ const convertToShortHandDate = (date: string): string => {
   const year = date.split("-")[0];
   const month = date.split("-")[1];
 
-  let monthStr;
-
-  switch (month) {
-    case "01":
-      monthStr = "Jan";
-      break;
-    case "02":
-      monthStr = "Feb";
-      break;
-    case "03":
-      monthStr = "Mar";
-      break;
-    case "04":
-      monthStr = "Apr";
-      break;
-    case "05":
-      monthStr = "May";
-      break;
-    case "06":
-      monthStr = "Jun";
-      break;
-    case "07":
-      monthStr = "Jul";
-      break;
-    case "08":
-      monthStr = "Aug";
-      break;
-    case "09":
-      monthStr = "Sep";
-      break;
-    case "10":
-      monthStr = "Oct";
-      break;
-    case "11":
-      monthStr = "Nov";
-      break;
-    case "12":
-      monthStr = "Dec";
-      break;
-  }
-
-  return `${monthStr} ${year}`;
+  return `${year}年${parseInt(month, 10).toString()}月`;
 };
 
 type Props = {

src/components/atoms/MileStoneDatePreview.tsx

@@ -7,48 +7,7 @@ const convertToShortHandDate = (date: string): string => {
   const year = date.split("-")[0];
   const month = date.split("-")[1];
 
-  let monthStr;
-
-  switch (month) {
-    case "01":
-      monthStr = "Jan";
-      break;
-    case "02":
-      monthStr = "Feb";
-      break;
-    case "03":
-      monthStr = "Mar";
-      break;
-    case "04":
-      monthStr = "Apr";
-      break;
-    case "05":
-      monthStr = "May";
-      break;
-    case "06":
-      monthStr = "Jun";
-      break;
-    case "07":
-      monthStr = "Jul";
-      break;
-    case "08":
-      monthStr = "Aug";
-      break;
-    case "09":
-      monthStr = "Sep";
-      break;
-    case "10":
-      monthStr = "Oct";
-      break;
-    case "11":
-      monthStr = "Nov";
-      break;
-    case "12":
-      monthStr = "Dec";
-      break;
-  }
-
-  return `${monthStr} ${year}`;
+  return `${year}年${parseInt(month, 10).toString()}月`;
 };
 
 type Props = {
@@ -66,7 +25,7 @@ const MileStoneDatePreview = ({
   // styles (IMO: No strict typing needed.)
   const styles = {
     sizing: "w-32 md:w-48 h-full",
-    text: "text-2xl text-center pr-4",
+    text: "text-1xl text-center pr-4",
     flex: "flex flex-col items-center justify-center",
     color: "bg-white",
   };

src/components/molecules/TimeLineItem.tsx

@@ -1,25 +1,17 @@
 import React from "react";
 import MileStoneDate from "../atoms/MileStoneDate";
-import MileStoneImage from "../atoms/MileStoneImage";
 import MileStoneContent from "../atoms/MileStoneContent";
 
 type Props = {
   title: string;
   content: string;
   beginDate: string;
   finishDate: string;
-  imageUrl: string;
 };
 
-const TimeLineItem = ({
-  title,
-  content,
-  beginDate,
-  finishDate,
-  imageUrl,
-}: Props) => {
+const TimeLineItem = ({ title, content, beginDate, finishDate }: Props) => {
   const styles = {
-    sizing: "md:h-52 h-28  md:w-4/5 w-11/12 rounded-lg ",
+    sizing: "md:h-52 h-28  md:w-4/5 w-11/12",
     flex: "flex flex-row items-center",
     color: "bg-gray-300",
   };
@@ -29,7 +21,6 @@ const TimeLineItem = ({
       <section className={`${styles.sizing} ${styles.flex} ${styles.color}`}>
         <MileStoneDate beginDate={beginDate} finishDate={finishDate} />
         <MileStoneContent title={title} description={content} />
-        <MileStoneImage imageUrl={imageUrl} />
       </section>
     </>
   );

src/components/molecules/TimeLineItemPreview.tsx

@@ -1,7 +1,4 @@
 import React from "react";
-import MileStoneDate from "../atoms/MileStoneDate";
-import MileStoneImage from "../atoms/MileStoneImage";
-import MileStoneContent from "../atoms/MileStoneContent";
 import MileStoneContentPreview from "../atoms/MileStoneContentPreview";
 import MileStoneImagePreview from "../atoms/MileStoneImagePreview";
 import MileStoneDatePreview from "../atoms/MileStoneDatePreview";
@@ -19,7 +16,6 @@ const TimeLineItemPreview = ({
   content,
   beginDate,
   finishDate,
-  imageUrl,
 }: Props) => {
   const styles = {
     sizing: "h-36 w-11/12",
@@ -32,7 +28,6 @@ const TimeLineItemPreview = ({
       <section className={`${styles.sizing} ${styles.flex} ${styles.color}`}>
         <MileStoneDatePreview beginDate={beginDate} finishDate={finishDate} />
         <MileStoneContentPreview title={title} description={content} />
-        <MileStoneImagePreview imageUrl={imageUrl} />
       </section>
     </>
   );

src/components/organisms/FutureTimeLine.tsx

@@ -7,7 +7,6 @@ type MileStone = {
   milestoneId: string;
   title: string;
   content: string;
-  imageUrl: string;
   beginDate: string;
   finishDate: string;
 };

src/components/organisms/FutureTimeLinePreview.tsx

@@ -7,7 +7,6 @@ type MileStone = {
   milestoneId: string;
   title: string;
   content: string;
-  imageUrl?: string | undefined;
   beginDate: string;
   finishDate: string;
 };

src/constants/json/user-info.json

@@ -25,7 +25,7 @@
         "userId": "Mike Tanaka",
         "milestoneId": "1",
         "title": "Mile Stone Title",
-        "content": "long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence",
+        "content": "content",
         "imageUrl": "/milestone-sample.jpg",
         "beginDate": "2023-01-11",
         "finishDate": "2024-03-11"
@@ -121,7 +121,7 @@
         "userId": "John Smith",
         "milestoneId": "1",
         "title": "Mile Stone Title",
-        "content": "long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence",
+        "content": "content",
         "imageUrl": "/milestone-sample.jpg",
         "beginDate": "2023-01-11",
         "finishDate": "2024-03-11"
@@ -217,7 +217,7 @@
         "userId": "Emily Johnson",
         "milestoneId": "1",
         "title": "Mile Stone Title",
-        "content": "long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence",
+        "content": "content",
         "imageUrl": "/milestone-sample.jpg",
         "beginDate": "2023-01-11",
         "finishDate": "2024-03-11"
@@ -313,7 +313,7 @@
         "userId": "Jessica Lee",
         "milestoneId": "1",
         "title": "Mile Stone Title",
-        "content": "long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence",
+        "content": "content",
         "imageUrl": "/milestone-sample.jpg",
         "beginDate": "2023-01-11",
         "finishDate": "2024-03-11"
@@ -409,7 +409,7 @@
         "userId": "Michael Brown",
         "milestoneId": "1",
         "title": "Mile Stone Title",
-        "content": "long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence",
+        "content": "content",
         "imageUrl": "/milestone-sample.jpg",
         "beginDate": "2023-01-11",
         "finishDate": "2024-03-11"
@@ -505,7 +505,7 @@
         "userId": "Sophia Martinez",
         "milestoneId": "1",
         "title": "Mile Stone Title",
-        "content": "long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence",
+        "content": "content",
         "imageUrl": "/milestone-sample.jpg",
         "beginDate": "2023-01-11",
         "finishDate": "2024-03-11"
@@ -601,7 +601,7 @@
         "userId": "David Garcia",
         "milestoneId": "1",
         "title": "Mile Stone Title",
-        "content": "long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence",
+        "content": "content",
         "imageUrl": "/milestone-sample.jpg",
         "beginDate": "2023-01-11",
         "finishDate": "2024-03-11"

src/sample-data/milestones.json

@@ -3,7 +3,7 @@
     "userId": "'1",
     "milestoneId": "1",
     "title": "Mile Stone Title",
-    "content": "long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence long sentence",
+    "content": "content",
     "imageUrl": "/milestone-sample.jpg",
     "beginDate": "2023-01-11",
     "finishDate": "2024-03-11"