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..584d551 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..4ac0399 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"