From 91e8f49279c6c2d8e8ab23a4379628319d9c0dab Mon Sep 17 00:00:00 2001 From: daiki0381 Date: Sat, 16 Mar 2024 03:34:55 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=92=84=20future=20timeline=20ui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/Line.tsx | 2 +- .../atoms/MileStoneContentPreview.tsx | 2 +- src/components/atoms/MileStoneDate.tsx | 43 +------------ src/components/atoms/MileStoneDatePreview.tsx | 45 +------------- src/components/atoms/MileStoneImage.tsx | 61 ------------------- src/components/molecules/TimeLineItem.tsx | 13 +--- .../molecules/TimeLineItemPreview.tsx | 5 -- src/components/organisms/FutureTimeLine.tsx | 1 - .../organisms/FutureTimeLinePreview.tsx | 1 - src/constants/json/user-info.json | 14 ++--- src/sample-data/milestones.json | 2 +- 11 files changed, 15 insertions(+), 174 deletions(-) delete mode 100644 src/components/atoms/MileStoneImage.tsx diff --git a/src/components/atoms/Line.tsx b/src/components/atoms/Line.tsx index 6f6598e..c788807 100644 --- a/src/components/atoms/Line.tsx +++ b/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) =>
; diff --git a/src/components/atoms/MileStoneContentPreview.tsx b/src/components/atoms/MileStoneContentPreview.tsx index f6bc03a..ef79fdb 100644 --- a/src/components/atoms/MileStoneContentPreview.tsx +++ b/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", diff --git a/src/components/atoms/MileStoneDate.tsx b/src/components/atoms/MileStoneDate.tsx index 6eead35..bab0078 100644 --- a/src/components/atoms/MileStoneDate.tsx +++ b/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 = { diff --git a/src/components/atoms/MileStoneDatePreview.tsx b/src/components/atoms/MileStoneDatePreview.tsx index e85c160..2e1527d 100644 --- a/src/components/atoms/MileStoneDatePreview.tsx +++ b/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", }; diff --git a/src/components/atoms/MileStoneImage.tsx b/src/components/atoms/MileStoneImage.tsx deleted file mode 100644 index 36672ce..0000000 --- a/src/components/atoms/MileStoneImage.tsx +++ /dev/null @@ -1,61 +0,0 @@ -"use client"; -import React from "react"; -import Image from "next/image"; - -// TODO: implement this in utils -const generateImageUri = (imageUrl: string) => { - return imageUrl; - throw new Error("Not implemented"); -}; - -type Props = { - imageUrl: string | null; -}; - -const MileStoneImage = ({ imageUrl }: Props): JSX.Element => { - // props handling - // TODO: modify alternative image - const imgUrl = imageUrl - ? generateImageUri(imageUrl) - : "/milestone-sample.png"; - - const imageSizes = { - large: { - width: 350, - height: 250, - }, - small: { - width: 210, - height: 160, - }, - }; - - // states - // TODO: implement custom hook - const [windowWidth, setWindowWidth] = React.useState(0); - React.useEffect(() => { - setWindowWidth(window.innerWidth); - const handleResize = () => setWindowWidth(window.innerWidth); - window.addEventListener("resize", handleResize); - return () => window.removeEventListener("resize", handleResize); - }, []); - - // UI - return ( - <> - Milestone Image 768 ? imageSizes.large.width : imageSizes.small.width - } - height={ - windowWidth > 768 ? imageSizes.large.height : imageSizes.small.height - } - /> - - ); -}; - -export default MileStoneImage; diff --git a/src/components/molecules/TimeLineItem.tsx b/src/components/molecules/TimeLineItem.tsx index 3030757..dbd4d55 100644 --- a/src/components/molecules/TimeLineItem.tsx +++ b/src/components/molecules/TimeLineItem.tsx @@ -1,6 +1,5 @@ import React from "react"; import MileStoneDate from "../atoms/MileStoneDate"; -import MileStoneImage from "../atoms/MileStoneImage"; import MileStoneContent from "../atoms/MileStoneContent"; type Props = { @@ -8,18 +7,11 @@ type Props = { 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 = ({
-
); diff --git a/src/components/molecules/TimeLineItemPreview.tsx b/src/components/molecules/TimeLineItemPreview.tsx index 035d1c6..e2cf29c 100644 --- a/src/components/molecules/TimeLineItemPreview.tsx +++ b/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 = ({
-
); diff --git a/src/components/organisms/FutureTimeLine.tsx b/src/components/organisms/FutureTimeLine.tsx index e21eb84..0070f19 100644 --- a/src/components/organisms/FutureTimeLine.tsx +++ b/src/components/organisms/FutureTimeLine.tsx @@ -7,7 +7,6 @@ type MileStone = { milestoneId: string; title: string; content: string; - imageUrl: string; beginDate: string; finishDate: string; }; diff --git a/src/components/organisms/FutureTimeLinePreview.tsx b/src/components/organisms/FutureTimeLinePreview.tsx index e38517d..fc07355 100644 --- a/src/components/organisms/FutureTimeLinePreview.tsx +++ b/src/components/organisms/FutureTimeLinePreview.tsx @@ -7,7 +7,6 @@ type MileStone = { milestoneId: string; title: string; content: string; - imageUrl?: string | undefined; beginDate: string; finishDate: string; }; diff --git a/src/constants/json/user-info.json b/src/constants/json/user-info.json index 2ea362a..d1a8c43 100644 --- a/src/constants/json/user-info.json +++ b/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" diff --git a/src/sample-data/milestones.json b/src/sample-data/milestones.json index f5bbb7c..df6de00 100644 --- a/src/sample-data/milestones.json +++ b/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" From 01e07f67a1accf088d0af99c22b14ce45f92988c Mon Sep 17 00:00:00 2001 From: daiki0381 Date: Sat, 16 Mar 2024 03:39:17 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=92=84=20future=20timeline=20ui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/MileStoneDate.tsx | 2 +- src/components/atoms/MileStoneDatePreview.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/atoms/MileStoneDate.tsx b/src/components/atoms/MileStoneDate.tsx index bab0078..584d551 100644 --- a/src/components/atoms/MileStoneDate.tsx +++ b/src/components/atoms/MileStoneDate.tsx @@ -7,7 +7,7 @@ const convertToShortHandDate = (date: string): string => { const year = date.split("-")[0]; const month = date.split("-")[1]; - return `${year}年 ${parseInt(month, 10).toString()}月`; + return `${year}年${parseInt(month, 10).toString()}月`; }; type Props = { diff --git a/src/components/atoms/MileStoneDatePreview.tsx b/src/components/atoms/MileStoneDatePreview.tsx index 2e1527d..4ac0399 100644 --- a/src/components/atoms/MileStoneDatePreview.tsx +++ b/src/components/atoms/MileStoneDatePreview.tsx @@ -7,7 +7,7 @@ const convertToShortHandDate = (date: string): string => { const year = date.split("-")[0]; const month = date.split("-")[1]; - return `${year}年 ${parseInt(month, 10).toString()}月`; + return `${year}年${parseInt(month, 10).toString()}月`; }; type Props = {