From 0c630e94d224a4ec4a574cb850fcebf5c56d96b8 Mon Sep 17 00:00:00 2001 From: Jungwoo Date: Sat, 30 Sep 2023 17:26:28 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20No=20Image=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/icons/svgIcons.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/client/src/components/icons/svgIcons.tsx b/client/src/components/icons/svgIcons.tsx index e9dbf5940..4a0c0e400 100644 --- a/client/src/components/icons/svgIcons.tsx +++ b/client/src/components/icons/svgIcons.tsx @@ -2454,3 +2454,18 @@ export const ImageUploadIcon = ({ width, ...props }: SVGProps) => /> ); + +export const NoImageIcon = ({ width, ...props }: SVGProps) => ( + + + +); From 13aeb995f903af77c4df33966806f0b8219be7d0 Mon Sep 17 00:00:00 2001 From: Jungwoo Date: Sat, 30 Sep 2023 17:27:34 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=EB=A1=9C=EB=93=9C=EB=A7=B5?= =?UTF-8?q?=EC=9D=98=20ExtraInfo(Meta=20data)=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../extraInfo/ExtraInfo.styles.ts | 44 +++++++++++++++++++ .../roadmapDetailPage/extraInfo/ExtraInfo.tsx | 33 ++++++++++++++ 2 files changed, 77 insertions(+) create mode 100644 client/src/components/roadmapDetailPage/extraInfo/ExtraInfo.styles.ts create mode 100644 client/src/components/roadmapDetailPage/extraInfo/ExtraInfo.tsx diff --git a/client/src/components/roadmapDetailPage/extraInfo/ExtraInfo.styles.ts b/client/src/components/roadmapDetailPage/extraInfo/ExtraInfo.styles.ts new file mode 100644 index 000000000..5485af792 --- /dev/null +++ b/client/src/components/roadmapDetailPage/extraInfo/ExtraInfo.styles.ts @@ -0,0 +1,44 @@ +import styled from 'styled-components'; +import media from '@styles/media'; + +export const ExtraInfo = styled.div` + ${({ theme }) => theme.fonts.description5}; + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: space-between; + + width: 30%; + height: 55rem; + + ${media.mobile` + display: none; + `} +`; + +export const RoadmapMetadata = styled.div` + display: flex; + flex-direction: column; + + & > div:not(:last-child) { + margin-bottom: 3rem; + } +`; + +export const Category = styled.div` + display: flex; + align-items: center; + justify-content: flex-end; +`; + +export const Difficulty = styled.div` + text-align: end; +`; + +export const RecommendedRoadmapPeriod = styled.div` + text-align: end; +`; + +export const Tags = styled.div` + color: ${({ theme }) => theme.colors.main_dark}; +`; diff --git a/client/src/components/roadmapDetailPage/extraInfo/ExtraInfo.tsx b/client/src/components/roadmapDetailPage/extraInfo/ExtraInfo.tsx new file mode 100644 index 000000000..4959bca11 --- /dev/null +++ b/client/src/components/roadmapDetailPage/extraInfo/ExtraInfo.tsx @@ -0,0 +1,33 @@ +import { RoadmapDetailType } from '@myTypes/roadmap/internal'; +import * as S from './ExtraInfo.styles'; +import SVGIcon from '@components/icons/SVGIcon'; +import { CategoriesInfo } from '@constants/roadmap/category'; + +type ExtraInfoProps = { + roadmapInfo: RoadmapDetailType; +}; + +const ExtraInfo = ({ roadmapInfo }: ExtraInfoProps) => { + return ( + +
Created by {roadmapInfo.creator.name}
+ + + 카테고리: {roadmapInfo.category.name} + + + 난이도: {roadmapInfo.difficulty} + + 예상 소요시간: {roadmapInfo.recommendedRoadmapPeriod}일 + + + + {roadmapInfo.tags.map((tag) => ( +
#{tag.name}
+ ))} + + + ); +}; + +export default ExtraInfo; From 51212f5846a964c0129cbd967910fa424b9daa27 Mon Sep 17 00:00:00 2001 From: Jungwoo Date: Sat, 30 Sep 2023 17:29:02 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20Introduction(=EB=A1=9C=EB=93=9C?= =?UTF-8?q?=EB=A7=B5=20=EC=84=A4=EB=AA=85)=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../introduction/Introduction.styles.ts | 47 +++++++++++++++++ .../introduction/Introduction.tsx | 51 +++++++++++++++++++ 2 files changed, 98 insertions(+) create mode 100644 client/src/components/roadmapDetailPage/introduction/Introduction.styles.ts create mode 100644 client/src/components/roadmapDetailPage/introduction/Introduction.tsx diff --git a/client/src/components/roadmapDetailPage/introduction/Introduction.styles.ts b/client/src/components/roadmapDetailPage/introduction/Introduction.styles.ts new file mode 100644 index 000000000..bd5f1e6bf --- /dev/null +++ b/client/src/components/roadmapDetailPage/introduction/Introduction.styles.ts @@ -0,0 +1,47 @@ +import media from '@styles/media'; +import styled from 'styled-components'; + +export const IntroductionWrapper = styled.div` + width: 70%; + + ${media.mobile` + width:100%; + `} +`; + +export const Introduction = styled.div<{ isExpanded: boolean }>` + ${({ theme }) => theme.fonts.description5}; + overflow: hidden; + max-height: ${({ isExpanded }) => (isExpanded ? 'auto' : '55rem')}; + + & > p:not(:last-child) { + margin-bottom: 2rem; + } + + & div { + ${({ theme }) => theme.fonts.h1}; + margin-bottom: 0.5rem; + color: ${({ theme }) => theme.colors.main_dark}; + } +`; + +export const LineShadow = styled.div` + position: relative; + width: 100%; + height: 0.2rem; + box-shadow: 0 -4px 6px rgba(0, 0, 0, 1); +`; + +export const ReadMoreButton = styled.button` + position: relative; + top: calc(-2rem - 4px); + left: 50%; + transform: translateX(-5rem); + + width: 10rem; + height: 4rem; + + background-color: ${({ theme }) => theme.colors.white}; + border-radius: 8px; + box-shadow: ${({ theme }) => theme.shadows.main}; +`; diff --git a/client/src/components/roadmapDetailPage/introduction/Introduction.tsx b/client/src/components/roadmapDetailPage/introduction/Introduction.tsx new file mode 100644 index 000000000..2fae32dd3 --- /dev/null +++ b/client/src/components/roadmapDetailPage/introduction/Introduction.tsx @@ -0,0 +1,51 @@ +import { RoadmapDetailType } from '@myTypes/roadmap/internal'; +import * as S from './Introduction.styles'; +import { useEffect, useRef, useState } from 'react'; + +type IntroductionType = { + roadmapInfo: RoadmapDetailType; +}; + +const Introduction = ({ roadmapInfo }: IntroductionType) => { + const [isExpanded, setIsExpanded] = useState(false); + const [showMoreButton, setShowMoreButton] = useState(false); + const introRef = useRef(null); + + useEffect(() => { + if (!introRef.current) return; + + const element = introRef.current; + if (element.scrollHeight > element.clientHeight) { + setShowMoreButton(true); + } + }, []); + + const toggleExpand = () => { + setIsExpanded(!isExpanded); + }; + + return ( + + +

+

설명
+ {roadmapInfo.introduction} +

+

+

본문
+ {roadmapInfo.content.content === '' + ? '로드맵에 대한 설명이 없어요🥲' + : roadmapInfo.content.content} +

+ + {showMoreButton && !isExpanded && ( + <> + + 더 보기 + + )} + + ); +}; + +export default Introduction; From e01e873566b684429c242fd2be1cfa8adb86299a Mon Sep 17 00:00:00 2001 From: Jungwoo Date: Sat, 30 Sep 2023 17:29:49 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat:=20NodeContent(=EA=B0=81=20=EB=85=B8?= =?UTF-8?q?=EB=93=9C=20=EC=A0=95=EB=B3=B4=20Slider)=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../nodeContent/NodeContent.styles.ts | 92 +++++++++++++++++++ .../nodeContent/NodeContent.tsx | 38 ++++++++ 2 files changed, 130 insertions(+) create mode 100644 client/src/components/roadmapDetailPage/nodeContent/NodeContent.styles.ts create mode 100644 client/src/components/roadmapDetailPage/nodeContent/NodeContent.tsx diff --git a/client/src/components/roadmapDetailPage/nodeContent/NodeContent.styles.ts b/client/src/components/roadmapDetailPage/nodeContent/NodeContent.styles.ts new file mode 100644 index 000000000..9db8597f8 --- /dev/null +++ b/client/src/components/roadmapDetailPage/nodeContent/NodeContent.styles.ts @@ -0,0 +1,92 @@ +import styled from 'styled-components'; +import media from '@styles/media'; + +export const SliderContent = styled.div` + display: flex; + aspect-ratio: 5 / 3.5; + background-color: ${({ theme }) => theme.colors.gray100}; + border-radius: 8px; + + ${media.mobile` + flex-direction: column; + aspect-ratio: 0; + `} +`; + +export const LeftContent = styled.div` + flex-shrink: 0; + width: 45%; + + ${media.mobile` + display:none; + `} +`; + +export const NodeImg = styled.img` + width: 100%; + height: 100%; + padding: 1.5rem; + object-fit: cover; +`; + +export const NoImg = styled.div` + ${({ theme }) => theme.fonts.title_large} + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + width: 100%; + height: 100%; +`; + +export const Separator = styled.div` + display: flex; + flex-direction: column; + width: 0.2rem; + height: 100%; + + & > div { + height: 50%; + } + + & > div:last-child { + background-color: black; + } +`; + +export const RightContent = styled.div` + ${({ theme }) => theme.fonts.h1} + overflow: scroll; + width: 55%; + padding: 1.5rem; + padding-top: 3rem; + + ${media.mobile` + width: 100%; + height: 60rem; + padding-top: 1.5rem; + `} +`; + +export const ContentTitle = styled.div` + ${({ theme }) => theme.fonts.title_large} + display: flex; + align-items: center; + margin-bottom: 1rem; +`; + +export const Step = styled.div` + ${({ theme }) => theme.fonts.h2} + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + + width: 3rem; + height: 3rem; + margin-right: 0.5rem; + + border: 0.3rem solid black; + border-radius: 50%; +`; diff --git a/client/src/components/roadmapDetailPage/nodeContent/NodeContent.tsx b/client/src/components/roadmapDetailPage/nodeContent/NodeContent.tsx new file mode 100644 index 000000000..f2ffb7e60 --- /dev/null +++ b/client/src/components/roadmapDetailPage/nodeContent/NodeContent.tsx @@ -0,0 +1,38 @@ +import type { NodeType } from '@myTypes/roadmap/internal'; +import * as S from './NodeContent.styles'; +import SVGIcon from '@components/icons/SVGIcon'; + +type NodeContentProps = { + node: NodeType; + index: number; +}; + +const NodeContent = ({ node, index }: NodeContentProps) => { + return ( + + + {node.imageUrls[0] ? ( + + ) : ( + + +
No Image
+ + )} + + +
+
+ + + + {index + 1} +

{node.title}

+ + {node.description} + + + ); +}; + +export default NodeContent; From efe0c38d7169a70d7eb6482c48549a3f8f10bf78 Mon Sep 17 00:00:00 2001 From: Jungwoo Date: Sat, 30 Sep 2023 17:30:31 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=EB=A1=9C=EB=93=9C=EB=A7=B5=20?= =?UTF-8?q?=EB=94=94=ED=85=8C=EC=9D=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20UI=20=EA=B0=9C=ED=8E=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../roadmapDetail/RoadmapDetail.styles.ts | 41 ++------- .../roadmapDetail/RoadmapDetail.tsx | 46 +++++----- .../roadmapNodeList/RoadmapNodeList.tsx | 35 -------- .../roadmapNodeList/roadmapNodeList.styles.ts | 89 ------------------- 4 files changed, 30 insertions(+), 181 deletions(-) delete mode 100644 client/src/components/roadmapDetailPage/roadmapNodeList/RoadmapNodeList.tsx delete mode 100644 client/src/components/roadmapDetailPage/roadmapNodeList/roadmapNodeList.styles.ts diff --git a/client/src/components/roadmapDetailPage/roadmapDetail/RoadmapDetail.styles.ts b/client/src/components/roadmapDetailPage/roadmapDetail/RoadmapDetail.styles.ts index f7ee43222..ce6785c43 100644 --- a/client/src/components/roadmapDetailPage/roadmapDetail/RoadmapDetail.styles.ts +++ b/client/src/components/roadmapDetailPage/roadmapDetail/RoadmapDetail.styles.ts @@ -1,42 +1,19 @@ -import media from '@styles/media'; import styled from 'styled-components'; export const RoadmapDetail = styled.div` - position: relative; - margin: 4rem 0; - padding: 0 2rem; - - ${media.mobile` - flex-direction: column; - align-items: center; - `} + padding: 2rem 0 4rem 0; `; -export const RoadmapBody = styled.p` - ${({ theme }) => theme.fonts.button1} - width: 50%; - padding: 4rem 4rem; - height: 35rem; - - overflow: scroll; - - border-radius: 18px; - box-shadow: ${({ theme }) => theme.shadows.box}; - - color: ${({ theme }) => theme.colors.gray300}; - - ${media.mobile` - padding: 4rem 4rem; - `} +export const RoadmapInfo = styled.div` + margin-bottom: 4rem; +`; - & > strong { - ${({ theme }) => theme.fonts.h1}; - margin-bottom: 4rem; - color: ${({ theme }) => theme.colors.main_dark}; - } +export const Title = styled.div` + ${({ theme }) => theme.fonts.title_large}; + margin-bottom: 2rem; + color: ${({ theme }) => theme.colors.main_dark}; `; -export const PageOnTop = styled.div` +export const Description = styled.div` display: flex; - justify-content: space-around; `; diff --git a/client/src/components/roadmapDetailPage/roadmapDetail/RoadmapDetail.tsx b/client/src/components/roadmapDetailPage/roadmapDetail/RoadmapDetail.tsx index 94da78baa..76ee29aec 100644 --- a/client/src/components/roadmapDetailPage/roadmapDetail/RoadmapDetail.tsx +++ b/client/src/components/roadmapDetailPage/roadmapDetail/RoadmapDetail.tsx @@ -1,36 +1,32 @@ -import RoadmapItem from '../../_common/roadmapItem/RoadmapItem'; -import Button from '../../_common/button/Button'; import * as S from './RoadmapDetail.styles'; -import useValidParams from '@/hooks/_common/useValidParams'; -import { useNavigate } from 'react-router-dom'; -import { useRoadmapDetail } from '@/hooks/queries/roadmap'; -import RoadmapNodeList from '../roadmapNodeList/RoadmapNodeList'; +import useValidParams from '@hooks/_common/useValidParams'; +// import { useNavigate } from 'react-router-dom'; +import { useRoadmapDetail } from '@hooks/queries/roadmap'; + +import Slider from '@components/_common/slider/Slider'; +import NodeContent from '../nodeContent/NodeContent'; +import ExtraInfo from '../extraInfo/ExtraInfo'; +import Introduction from '../introduction/Introduction'; const RoadmapDetail = () => { const { id: roadmapId } = useValidParams<{ id: string }>(); - const navigate = useNavigate(); + // const navigate = useNavigate(); const { roadmapInfo } = useRoadmapDetail(Number(roadmapId)); - const moveToGoalRoomCreatePage = () => { - navigate(`/roadmap/${roadmapId}/goalroom-create`); - }; - return ( - - - - 로드맵 설명
- {roadmapInfo.content.content === '' - ? '로드맵에 대한 설명이 없어요🥲' - : roadmapInfo.content.content} - - - - + + {roadmapInfo.roadmapTitle} + + + + + + + {roadmapInfo.content.nodes.map((node, index) => ( + + ))} + ); }; diff --git a/client/src/components/roadmapDetailPage/roadmapNodeList/RoadmapNodeList.tsx b/client/src/components/roadmapDetailPage/roadmapNodeList/RoadmapNodeList.tsx deleted file mode 100644 index 2f6ab88d6..000000000 --- a/client/src/components/roadmapDetailPage/roadmapNodeList/RoadmapNodeList.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { NodeType } from '@/myTypes/roadmap/internal'; -import * as S from './roadmapNodeList.styles'; - -type RoadmapNodeListProps = { - roadmapTitle: string; - nodeInfo: NodeType[]; -}; - -const RoadmapNodeList = ({ roadmapTitle, nodeInfo }: RoadmapNodeListProps) => { - return ( - - - 🐘 {roadmapTitle}의 로드맵 🐘 - - {nodeInfo.map((node, index) => { - return ( - - {index + 1} - - {node.title} - {node.description} - - {node.imageUrls.map((nodeImage) => { - return ; - })} - - - - ); - })} - - ); -}; - -export default RoadmapNodeList; diff --git a/client/src/components/roadmapDetailPage/roadmapNodeList/roadmapNodeList.styles.ts b/client/src/components/roadmapDetailPage/roadmapNodeList/roadmapNodeList.styles.ts deleted file mode 100644 index da3d3cd20..000000000 --- a/client/src/components/roadmapDetailPage/roadmapNodeList/roadmapNodeList.styles.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { styled } from 'styled-components'; - -export const RoadmapNodeList = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; - - width: 100%; - min-height: 30rem; - margin-top: 3rem; - padding: 2rem 0; - - border-radius: 12px; - box-shadow: ${({ theme }) => theme.shadows.box}; -`; - -export const Title = styled.h1` - ${({ theme }) => theme.fonts.nav_title} - color: ${({ theme }) => theme.colors.gray300}; - - & > strong { - color: ${({ theme }) => theme.colors.main_dark}; - } -`; - -export const NodeItemContainer = styled.article` - display: flex; - align-items: center; - justify-content: space-around; - margin-top: 2rem; -`; - -export const NodeIndicator = styled.div` - ${({ theme }) => theme.fonts.nav_title} - position: relative; - left: 2rem; - - display: flex; - align-items: center; - justify-content: center; - - width: 4rem; - height: 4rem; - - color: ${({ theme }) => theme.colors.white}; - - background-color: ${({ theme }) => theme.colors.main_dark}; - border-radius: 50%; -`; - -export const NodeContent = styled.div` - overflow-y: scroll; - display: flex; - flex-direction: column; - align-items: center; - - width: 50rem; - padding: 2rem 0; - - word-wrap: break-word; - overflow-wrap: break-word; - white-space: normal; - - border: 0.3rem solid ${({ theme }) => theme.colors.main_dark}; - border-radius: 24px; -`; - -export const NodeTitle = styled.h2` - ${({ theme }) => theme.fonts.h2} - color: ${({ theme }) => theme.colors.black}; -`; - -export const NodeDescription = styled.div` - ${({ theme }) => theme.fonts.description5} - width: 40rem; - color: ${({ theme }) => theme.colors.gray300}; - text-align: center; -`; - -export const ImageWrapper = styled.div` - display: flex; -`; - -export const NodeImage = styled.img` - width: 15rem; - height: 20rem; - object-fit: cover; -`; From 552796fe5659a208c10da5c0d51089371e7fc432 Mon Sep 17 00:00:00 2001 From: Jungwoo Date: Sun, 1 Oct 2023 00:09:57 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat:=20=EB=AA=A8=EC=9E=84=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1,=20=EC=A7=84=ED=96=89=EC=A4=91=EC=9D=B8=20=EB=AA=A8?= =?UTF-8?q?=EC=9E=84=EB=B3=B4=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../extraInfo/ExtraInfo.styles.ts | 4 ++ .../roadmapDetail/RoadmapDetail.styles.ts | 39 +++++++++++++++++-- .../roadmapDetail/RoadmapDetail.tsx | 13 ++++++- 3 files changed, 51 insertions(+), 5 deletions(-) diff --git a/client/src/components/roadmapDetailPage/extraInfo/ExtraInfo.styles.ts b/client/src/components/roadmapDetailPage/extraInfo/ExtraInfo.styles.ts index 5485af792..98aa0449c 100644 --- a/client/src/components/roadmapDetailPage/extraInfo/ExtraInfo.styles.ts +++ b/client/src/components/roadmapDetailPage/extraInfo/ExtraInfo.styles.ts @@ -41,4 +41,8 @@ export const RecommendedRoadmapPeriod = styled.div` export const Tags = styled.div` color: ${({ theme }) => theme.colors.main_dark}; + + & > div { + text-align: end; + } `; diff --git a/client/src/components/roadmapDetailPage/roadmapDetail/RoadmapDetail.styles.ts b/client/src/components/roadmapDetailPage/roadmapDetail/RoadmapDetail.styles.ts index ce6785c43..93c0b17ce 100644 --- a/client/src/components/roadmapDetailPage/roadmapDetail/RoadmapDetail.styles.ts +++ b/client/src/components/roadmapDetailPage/roadmapDetail/RoadmapDetail.styles.ts @@ -4,9 +4,7 @@ export const RoadmapDetail = styled.div` padding: 2rem 0 4rem 0; `; -export const RoadmapInfo = styled.div` - margin-bottom: 4rem; -`; +export const RoadmapInfo = styled.div``; export const Title = styled.div` ${({ theme }) => theme.fonts.title_large}; @@ -17,3 +15,38 @@ export const Title = styled.div` export const Description = styled.div` display: flex; `; + +export const ButtonsWrapper = styled.div` + position: relative; + width: 100%; +`; + +export const Buttons = styled.div` + bottom: 3rem; + + display: flex; + align-items: center; + justify-content: space-around; + + margin: 2rem 0; + + background-color: ${({ theme }) => theme.colors.main_dark}; + border-radius: 8px; + + & > div { + width: 0.2rem; + height: 5.5rem; + background-color: ${({ theme }) => theme.colors.white}; + } +`; + +export const Button = styled.button` + ${({ theme }) => theme.fonts.nav_text} + width: 50%; + height: 5.5rem; + + color: ${({ theme }) => theme.colors.white}; + + background-color: ${({ theme }) => theme.colors.main_dark}; + border-radius: 8px; +`; diff --git a/client/src/components/roadmapDetailPage/roadmapDetail/RoadmapDetail.tsx b/client/src/components/roadmapDetailPage/roadmapDetail/RoadmapDetail.tsx index 76ee29aec..912425ee5 100644 --- a/client/src/components/roadmapDetailPage/roadmapDetail/RoadmapDetail.tsx +++ b/client/src/components/roadmapDetailPage/roadmapDetail/RoadmapDetail.tsx @@ -1,6 +1,6 @@ import * as S from './RoadmapDetail.styles'; import useValidParams from '@hooks/_common/useValidParams'; -// import { useNavigate } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { useRoadmapDetail } from '@hooks/queries/roadmap'; import Slider from '@components/_common/slider/Slider'; @@ -10,7 +10,7 @@ import Introduction from '../introduction/Introduction'; const RoadmapDetail = () => { const { id: roadmapId } = useValidParams<{ id: string }>(); - // const navigate = useNavigate(); + const navigate = useNavigate(); const { roadmapInfo } = useRoadmapDetail(Number(roadmapId)); return ( @@ -22,6 +22,15 @@ const RoadmapDetail = () => { + + navigate(`/roadmap/${roadmapId}/goalroom-create`)}> + 모임 생성하기 + +
+ navigate(`/roadmap/${roadmapId}/goalroom-list`)}> + 진행중인 모임보기 + + {roadmapInfo.content.nodes.map((node, index) => ( From 1619ac8573cec39c3a1a9d531344f5ede0c4941d Mon Sep 17 00:00:00 2001 From: Jungwoo Date: Sun, 1 Oct 2023 00:34:45 +0900 Subject: [PATCH 7/8] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20css=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../roadmapDetailPage/nodeContent/NodeContent.styles.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/client/src/components/roadmapDetailPage/nodeContent/NodeContent.styles.ts b/client/src/components/roadmapDetailPage/nodeContent/NodeContent.styles.ts index 9db8597f8..695e6a26b 100644 --- a/client/src/components/roadmapDetailPage/nodeContent/NodeContent.styles.ts +++ b/client/src/components/roadmapDetailPage/nodeContent/NodeContent.styles.ts @@ -8,17 +8,15 @@ export const SliderContent = styled.div` border-radius: 8px; ${media.mobile` - flex-direction: column; aspect-ratio: 0; `} `; export const LeftContent = styled.div` - flex-shrink: 0; width: 45%; ${media.mobile` - display:none; + display: none; `} `; From 0fa6668cb74e82efdcbe867871091616fafb43e5 Mon Sep 17 00:00:00 2001 From: Jungwoo Date: Sun, 1 Oct 2023 12:56:56 +0900 Subject: [PATCH 8/8] =?UTF-8?q?refactor:=20=ED=83=80=EC=9E=85=20=EC=BB=A8?= =?UTF-8?q?=EB=B2=A4=EC=85=98=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../roadmapDetailPage/introduction/Introduction.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/src/components/roadmapDetailPage/introduction/Introduction.tsx b/client/src/components/roadmapDetailPage/introduction/Introduction.tsx index 2fae32dd3..3069efacf 100644 --- a/client/src/components/roadmapDetailPage/introduction/Introduction.tsx +++ b/client/src/components/roadmapDetailPage/introduction/Introduction.tsx @@ -2,11 +2,11 @@ import { RoadmapDetailType } from '@myTypes/roadmap/internal'; import * as S from './Introduction.styles'; import { useEffect, useRef, useState } from 'react'; -type IntroductionType = { +type IntroductionProps = { roadmapInfo: RoadmapDetailType; }; -const Introduction = ({ roadmapInfo }: IntroductionType) => { +const Introduction = ({ roadmapInfo }: IntroductionProps) => { const [isExpanded, setIsExpanded] = useState(false); const [showMoreButton, setShowMoreButton] = useState(false); const introRef = useRef(null); @@ -21,7 +21,7 @@ const Introduction = ({ roadmapInfo }: IntroductionType) => { }, []); const toggleExpand = () => { - setIsExpanded(!isExpanded); + setIsExpanded((prev) => !prev); }; return (