From 7062943a35e886762652dcbcb9ab187bff0a63c8 Mon Sep 17 00:00:00 2001 From: se0jinYoon Date: Mon, 9 Dec 2024 00:04:21 +0900 Subject: [PATCH 1/5] =?UTF-8?q?chore:=20body2=20line-height=20=EB=B0=98?= =?UTF-8?q?=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/theme.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 007aaf47..e80bef23 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -272,7 +272,7 @@ export const theme = { font-size: 1.6rem; font-family: 'Pretendard Variable', sans-serif; font-style: normal; - line-height: 160%; /* 25.6px */ + line-height: 200%; /* 25.6px */ `, body3: css` font-weight: 400; @@ -339,7 +339,7 @@ export const theme = { `, mBody3: css` font-weight: 400; - font-size: 1.4px; + font-size: 1.4rem; font-family: 'Pretendard Variable', sans-serif; font-style: normal; line-height: 140%; /* 19.6px */ From 4c9116b3bddd7dd08ea95964802838082d4bacba Mon Sep 17 00:00:00 2001 From: se0jinYoon Date: Mon, 9 Dec 2024 00:04:35 +0900 Subject: [PATCH 2/5] =?UTF-8?q?chore:=20=EA=B5=AC=EB=B6=84=EC=A0=90=20svg?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svgs/divideDot.svg | 3 +++ src/assets/svgs/index.tsx | 1 + 2 files changed, 4 insertions(+) create mode 100644 src/assets/svgs/divideDot.svg diff --git a/src/assets/svgs/divideDot.svg b/src/assets/svgs/divideDot.svg new file mode 100644 index 00000000..b179d95c --- /dev/null +++ b/src/assets/svgs/divideDot.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx index 48202095..83deb124 100644 --- a/src/assets/svgs/index.tsx +++ b/src/assets/svgs/index.tsx @@ -94,3 +94,4 @@ export { default as GroupCuriousIc } from './groupCuriousIcn.svg?react'; export { default as GroupViewIc } from './groupViewIcn.svg?react'; // export { default as LoadingIc } from './loadingSvg.svg?react'; +export { default as DivideDotIc } from './divideDot.svg?react'; From 906673d7d2cd52642b4c15b5fc2ec3d6ffc7e751 Mon Sep 17 00:00:00 2001 From: se0jinYoon Date: Mon, 9 Dec 2024 00:04:59 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=82=AD=EC=A0=9C=ED=95=98=EA=B8=B0,=EC=88=98?= =?UTF-8?q?=EC=A0=95=ED=95=98=EA=B8=B0=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/Button.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/commons/Button.tsx b/src/components/commons/Button.tsx index 52264991..057c9dcc 100644 --- a/src/components/commons/Button.tsx +++ b/src/components/commons/Button.tsx @@ -1,6 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import React from 'react'; +import { MOBILE_MEDIA_QUERY } from '../../styles/mediaQuery'; interface ButtonProps { children: React.ReactNode; @@ -69,6 +70,11 @@ const DeleteTempStoreBtn = styled.button` ${({ theme }) => theme.fonts.button3}; } ${({ theme }) => theme.fonts.button3}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mButton1}; + width: 100%; + } `; // 글 제출하기, 수정 완료하기, 글 수정하기 @@ -84,6 +90,11 @@ const SubmitEditBtn = styled.button` background-color: ${({ theme }) => theme.colors.mileViolet}; } ${({ theme }) => theme.fonts.button3}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mButton1}; + width: 100%; + } `; // 댓글 등록하기 비활성화 From f84d3e3f606ba52102fa202973606bd6aae92bde Mon Sep 17 00:00:00 2001 From: se0jinYoon Date: Mon, 9 Dec 2024 00:05:17 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=EA=B8=80=20=EC=83=81=EC=84=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=98=EC=9D=91=ED=98=95=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=20(=EB=8C=80=EB=8C=93=EA=B8=80=EC=B0=BD=20?= =?UTF-8?q?=EC=A0=9C=EC=99=B8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/postDetail/PostDetail.tsx | 76 +++++++++- src/pages/postDetail/components/Comment.tsx | 24 +++- .../postDetail/components/CommentInputBox.tsx | 131 +++++++++++++++--- .../postDetail/components/CommentItem.tsx | 48 ++++++- 4 files changed, 251 insertions(+), 28 deletions(-) diff --git a/src/pages/postDetail/PostDetail.tsx b/src/pages/postDetail/PostDetail.tsx index 6e53b575..72d721c3 100644 --- a/src/pages/postDetail/PostDetail.tsx +++ b/src/pages/postDetail/PostDetail.tsx @@ -16,6 +16,7 @@ import { GroupChatIc, GroupCuriousIc, GroupViewIc, + DivideDotIc, } from './../../assets/svgs'; import Button from './../../components/commons/Button'; import { AuthorizationHeader, UnAuthorizationHeader } from './../../components/commons/Header'; @@ -26,6 +27,8 @@ import { useCheckPostAuth, useDeletePost, useGetPostDetail } from './hooks/queri import { DefaultModal, DefaultModalBtn } from '../../components/commons/modal/DefaultModal'; import useModal from '../../hooks/useModal'; import { MODAL } from './constants/modalContent'; +import { MOBILE_MEDIA_QUERY } from '../../styles/mediaQuery'; +import Responsive from '../../components/commons/Responsive/Responsive'; const PostDetail = () => { const navigate = useNavigate(); @@ -116,7 +119,12 @@ const PostDetail = () => { {postData?.title} {postData?.createdAt} - + + + + + + {postData?.curiousCount} @@ -160,7 +168,7 @@ const PostDetail = () => { - + {postData?.writerName} @@ -211,6 +219,10 @@ const ThumnailImg = styled.img` border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; + + @media ${MOBILE_MEDIA_QUERY} { + height: 18rem; + } `; const PostDetailWrapper = styled.div` @@ -220,6 +232,11 @@ const PostDetailWrapper = styled.div` align-items: center; justify-content: center; width: 82.6rem; + + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + padding: 0 2rem; + } `; const PostDetailContainer = styled.div` @@ -227,6 +244,10 @@ const PostDetailContainer = styled.div` gap: 1.8rem; justify-content: space-between; width: 100%; + + @media ${MOBILE_MEDIA_QUERY} { + flex-direction: column; + } `; const InfoTextBox = styled.div` display: flex; @@ -246,11 +267,19 @@ const TitleText = styled.h1` color: ${({ theme }) => theme.colors.grayBlack}; ${({ theme }) => theme.fonts.title1}; word-break: break-all; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mTitle7}; + } `; const DateText = styled.p` color: ${({ theme }) => theme.colors.gray70}; ${({ theme }) => theme.fonts.subtitle4}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mBody3}; + } `; const CuriousCount = styled.div` @@ -260,6 +289,10 @@ const CuriousCount = styled.div` color: ${({ theme }) => theme.colors.gray70}; ${({ theme }) => theme.fonts.subtitle4}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mBody3}; + } `; const ViewCount = styled.div` @@ -269,6 +302,10 @@ const ViewCount = styled.div` color: ${({ theme }) => theme.colors.gray70}; ${({ theme }) => theme.fonts.subtitle4}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mBody3}; + } `; const CommentCount = styled.div` @@ -278,6 +315,10 @@ const CommentCount = styled.div` color: ${({ theme }) => theme.colors.gray70}; ${({ theme }) => theme.fonts.subtitle4}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mBody3}; + } `; const ButtonWrapper = styled.div<{ role: string }>` @@ -288,6 +329,11 @@ const ButtonWrapper = styled.div<{ role: string }>` max-width: ${({ role }) => (role === 'writer' ? `20.4rem` : role === 'owner' ? '12rem' : '0rem')}; height: 4rem; padding-top: 0.4rem; + + @media ${MOBILE_MEDIA_QUERY} { + max-width: 100%; + ${({ theme }) => theme.fonts.mButton1}; + } `; const TopicWrapper = styled.div` @@ -304,6 +350,10 @@ const TopicText = styled.p` color: ${({ theme }) => theme.colors.gray90}; ${({ theme }) => theme.fonts.subtitle3}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.subtitle6}; + } `; const PostWrapper = styled.div` @@ -345,6 +395,7 @@ const PostContainer = styled.div` & > p { min-height: 2.5rem; + ${({ theme }) => theme.fonts.body2}; } `; @@ -358,6 +409,12 @@ const WriterInfoWrapper = styled.div` background-color: ${({ theme }) => theme.colors.white}; border-radius: 8px; + + /* 피그마 답 보고 변경 필요 */ + @media ${MOBILE_MEDIA_QUERY} { + height: 12rem; + padding: 2.1rem 2rem; + } `; const WriterInfoContainer = styled.div` @@ -372,6 +429,10 @@ const InfoWrapper = styled.div` gap: 0.7rem; width: 53.6rem; max-height: 9.7rem; + + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + } `; const WriterInfoBox = styled.div` @@ -400,3 +461,14 @@ const GroupInfoText = styled.p` color: ${({ theme }) => theme.colors.gray50}; ${({ theme }) => theme.fonts.body6}; `; + +const DivideDotIcon = styled(DivideDotIc)` + margin-bottom: 0.2rem; +`; + +const DefaultProfileIcon = styled(DefaultProfileIc)` + @media ${MOBILE_MEDIA_QUERY} { + width: 4rem; + height: 4rem; + } +`; diff --git a/src/pages/postDetail/components/Comment.tsx b/src/pages/postDetail/components/Comment.tsx index 46afc1f6..7c9cd921 100644 --- a/src/pages/postDetail/components/Comment.tsx +++ b/src/pages/postDetail/components/Comment.tsx @@ -8,6 +8,7 @@ import { useGetCommentList } from '../hooks/queries'; import { ArrowTopLeftIc } from '../../../assets/svgs'; import Spacing from '../../../components/commons/Spacing'; import noCommentImg from '/src/assets/images/noCommentImage.png'; +import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery'; interface CommentPropTypes { postId: string | undefined; @@ -51,7 +52,7 @@ const Comment = (props: CommentPropTypes) => { ) : ( commentListData?.map((data: CommentListPropTypes) => ( -
+ { /> ))} -
+ )) )} @@ -95,19 +96,30 @@ const NestedWrapper = styled.div` align-items: center; width: 76.8rem; padding-left: 1.2rem; + + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + } `; const CommentWrapper = styled.div` display: flex; flex-direction: column; align-items: center; - box-sizing: content-box; - width: 76.8rem; + + /* box-sizing: content-box; */ + + /* width: 76.8rem; */ + width: 100%; height: fit-content; padding: 2.8rem; background-color: ${({ theme }) => theme.colors.white}; border-radius: 8px; + + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + } `; const NoCommentText = styled.p` @@ -117,3 +129,7 @@ const NoCommentText = styled.p` ${({ theme }) => theme.fonts.title8}; `; + +const CommentListWrapper = styled.div` + width: 100%; +`; diff --git a/src/pages/postDetail/components/CommentInputBox.tsx b/src/pages/postDetail/components/CommentInputBox.tsx index 0ff8f6e9..401ce842 100644 --- a/src/pages/postDetail/components/CommentInputBox.tsx +++ b/src/pages/postDetail/components/CommentInputBox.tsx @@ -5,6 +5,8 @@ import { useNavigate } from 'react-router-dom'; import { usePostComment, usePostNestedComment } from '../hooks/queries'; import { CheckIc } from '../../../assets/svgs'; +import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery'; +import Responsive from '../../../components/commons/Responsive/Responsive'; interface CommentPropTypes { postId: string | undefined; @@ -25,7 +27,8 @@ const CommentInputBox = (props: CommentPropTypes) => { ); const token = localStorage.getItem('accessToken'); const navigate = useNavigate(); - const textareaRef = useRef(null); + const desktopTextareaRef = useRef(null); + const mobileTextareaRef = useRef(null); const handleCommentSubmit = (e: FormEvent) => { e.preventDefault(); @@ -41,24 +44,70 @@ const CommentInputBox = (props: CommentPropTypes) => { } }; - useEffect(() => { - if (textareaRef.current) { - textareaRef.current.style.height = '2.3rem'; - const scrollHeight = textareaRef.current.scrollHeight; - textareaRef.current.style.height = `${scrollHeight}px`; + // useEffect(() => { + // if (desktopTextareaRef.current) { + // desktopTextareaRef.current.style.height = '2.3rem'; + // const scrollHeight = desktopTextareaRef.current.scrollHeight; + // desktopTextareaRef.current.style.height = `${scrollHeight}px`; + // } + // }); + + // useEffect(() => { + // if (mobileTextareaRef.current) { + // mobileTextareaRef.current.style.height = '3.7rem'; + // const scrollHeight = mobileTextareaRef.current.scrollHeight; + // mobileTextareaRef.current.style.height = `${scrollHeight}px`; + // } + // }); + + // 댓글 작성 높이 조정 + const adjustTextareaHeight = () => { + const isDesktop = window.innerWidth > 850; + + if (isDesktop && desktopTextareaRef.current) { + desktopTextareaRef.current.style.height = '2.3rem'; + const scrollHeight = desktopTextareaRef.current.scrollHeight; + desktopTextareaRef.current.style.height = `${scrollHeight}px`; + } else if (!isDesktop && mobileTextareaRef.current) { + mobileTextareaRef.current.style.height = '3.7rem'; + const scrollHeight = mobileTextareaRef.current.scrollHeight; + mobileTextareaRef.current.style.height = `${scrollHeight}px`; } + }; + + useEffect(() => { + adjustTextareaHeight(); + + window.addEventListener('resize', adjustTextareaHeight); + + return () => { + window.removeEventListener('resize', adjustTextareaHeight); + }; }, [comment]); + return ( - + = 1500}> - setComment(e.target.value)} - isMainComment={isMainComment} - placeholder="댓글을 남겨주세요." - maxLength={1500} - /> + + setComment(e.target.value)} + isMainComment={isMainComment} + placeholder="댓글을 남겨주세요." + maxLength={1500} + /> + + + setComment(e.target.value)} + isMainComment={isMainComment} + placeholder="댓글을 남겨주세요." + maxLength={1500} + /> + theme.fonts.body5}; color: ${({ theme }) => theme.colors.gray70}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mSubtitle1}; + } `; const Checkbox = styled.button<{ isUnknownWriter: boolean }>` @@ -110,17 +163,24 @@ const CommentLayout = styled.div<{ isMainComment: boolean; isError: boolean }>` gap: 1rem; align-items: flex-end; width: ${({ isMainComment }) => (isMainComment ? '69.9rem' : '65.1rem')}; - height: auto; + min-height: 4.3rem; padding: 1rem 1.2rem; background-color: ${({ theme }) => theme.colors.gray5}; border: 1px solid ${({ theme, isError }) => (isError ? theme.colors.mileRed : theme.colors.gray30)}; border-radius: 6px; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mSubtitle1}; + /* 넓이 수정 필 */ + max-width: ${({ isMainComment }) => (isMainComment ? '95%' : '90%')}; + min-height: 6rem; + } `; -const CommentForm = styled.textarea<{ isMainComment: boolean }>` - width: ${({ isMainComment }) => (isMainComment ? '62.1rem' : '57.3rem')}; +const DesktopCommentForm = styled.textarea<{ isMainComment: boolean }>` + width: ${({ isMainComment }) => (isMainComment ? '61.1rem' : '56.3rem')}; overflow: hidden; color: ${({ theme }) => theme.colors.gray100}; @@ -139,6 +199,26 @@ const CommentForm = styled.textarea<{ isMainComment: boolean }>` ${({ theme }) => theme.fonts.button2}; `; +const MobileCommentForm = styled.textarea<{ isMainComment: boolean }>` + /* 넓이 수정 필요 */ + width: ${({ isMainComment }) => (isMainComment ? '100%' : '56.3rem')}; + overflow: hidden; + + color: ${({ theme }) => theme.colors.gray100}; + + background-color: ${({ theme }) => theme.colors.gray5}; + border: none; + + resize: none; + + ::placeholder { + color: ${({ theme }) => theme.colors.gray30}; + + background-color: ${({ theme }) => theme.colors.gray5}; + } + ${({ theme }) => theme.fonts.mSubtitle1}; +`; + const CommentPostBtn = styled.button<{ $isComment: string }>` height: 4rem; padding: 1rem 1.6rem; @@ -159,11 +239,20 @@ const CommentPostBtn = styled.button<{ $isComment: string }>` background-color: ${({ $isComment, theme }) => $isComment === '' ? theme.colors.gray10 : theme.colors.mileViolet}; } + + @media ${MOBILE_MEDIA_QUERY} { + width: 4rem; + height: 4.4rem; + padding: 0; + + /* 폰트 수정 필요 */ + ${({ theme }) => theme.fonts.mSubtitle1} + } `; -const CommentPostWrapper = styled.div` +const CommentPostWrapper = styled.div<{ $isMainComment: boolean }>` display: flex; gap: 1.2rem; align-items: flex-end; - width: 100%; + width: ${({ $isMainComment }) => ($isMainComment ? '100%' : '95%')}; `; diff --git a/src/pages/postDetail/components/CommentItem.tsx b/src/pages/postDetail/components/CommentItem.tsx index 604c6c4d..e80ccaf8 100644 --- a/src/pages/postDetail/components/CommentItem.tsx +++ b/src/pages/postDetail/components/CommentItem.tsx @@ -13,6 +13,7 @@ import { GroupListProfileCloseIc, } from '../../../assets/svgs'; import useClickOutside from '../../../hooks/useClickOutside'; +import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery'; interface CommentItem { name: string; @@ -69,7 +70,7 @@ const CommentItem = ({ return ( <> - {isAnonymous ? : } + {isAnonymous ? : } {name} @@ -142,10 +143,18 @@ const NestedCommentWrapper = styled.div` align-items: center; margin-left: 1.2rem; padding: 1.2rem 0; + + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + } `; const IconWrapper = styled.div` display: flex; + + @media ${MOBILE_MEDIA_QUERY} { + gap: 1.2rem; + } `; const NestCommentIcon = styled.div` @@ -166,6 +175,10 @@ const CommentItemWrapper = styled.div<{ isComment: boolean }>` padding: 1.8rem 0; background-color: ${({ theme }) => theme.colors.white}; + + @media ${MOBILE_MEDIA_QUERY} { + width: ${({ isComment }) => (isComment ? '100%' : '95%')}; + } `; const CommentItemContainer = styled.div` @@ -174,6 +187,10 @@ const CommentItemContainer = styled.div` gap: 0.6rem; width: 67rem; height: auto; + + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + } `; const CommentInfoWrapper = styled.div` @@ -181,6 +198,11 @@ const CommentInfoWrapper = styled.div` gap: 0.4rem; align-items: center; justify-content: start; + + @media ${MOBILE_MEDIA_QUERY} { + flex-direction: column; + align-items: flex-start; + } `; const CommenterNameText = styled.p<{ $name: string }>` @@ -188,17 +210,29 @@ const CommenterNameText = styled.p<{ $name: string }>` color: ${({ $name, theme }) => $name == '글쓴이' ? theme.colors.mainViolet : theme.colors.black}; ${({ theme }) => theme.fonts.body5}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mBody3}; + } `; const CommnertGroupNameText = styled.p` color: ${({ theme }) => theme.colors.gray50}; ${({ theme }) => theme.fonts.body8}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mSubtitle1}; + } `; const CommentText = styled.p` color: ${({ theme }) => theme.colors.gray90}; ${({ theme }) => theme.fonts.body6}; white-space: pre-wrap; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mBody3}; + } `; const Modal = styled.div` @@ -250,3 +284,15 @@ const MeatBallWrapper = styled.div` background-color: ${({ theme }) => theme.colors.gray20}; } `; + +const GroupListProfileCloseIcon = styled(GroupListProfileCloseIc)` + @media ${MOBILE_MEDIA_QUERY} { + width: 36px; + } +`; + +const TextCommentProfileIcon = styled(TextCommentProfileIc)` + @media ${MOBILE_MEDIA_QUERY} { + width: 36px; + } +`; From f3e5550937f97a9e5a85dde8744a94fb77fb0028 Mon Sep 17 00:00:00 2001 From: se0jinYoon Date: Sat, 14 Dec 2024 00:32:25 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80,=20=EB=8C=80?= =?UTF-8?q?=EB=8C=93=EA=B8=80=20=EB=B0=98=EC=9D=91=ED=98=95=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 --- src/pages/postDetail/PostDetail.tsx | 101 ++++++++++++++---- .../postDetail/components/CommentInputBox.tsx | 9 +- .../postDetail/components/CommentItem.tsx | 1 + .../postDetail/components/CuriousBtn.tsx | 5 + 4 files changed, 91 insertions(+), 25 deletions(-) diff --git a/src/pages/postDetail/PostDetail.tsx b/src/pages/postDetail/PostDetail.tsx index 72d721c3..c99ba00b 100644 --- a/src/pages/postDetail/PostDetail.tsx +++ b/src/pages/postDetail/PostDetail.tsx @@ -167,19 +167,45 @@ const PostDetail = () => { - - - - - {postData?.writerName} - {postData?.moimName} - - - {!postData?.writerInfo ? '아직 작가소개를 작성하지 않았어요' : postData?.writerInfo} - - - - {isMember && } + + + + + + {postData?.writerName} + {postData?.moimName} + + + {!postData?.writerInfo + ? '아직 작가소개를 작성하지 않았어요' + : postData?.writerInfo} + + + {isMember && } + + + + + <> + + + + + {postData?.writerName} + {postData?.moimName} + + {isMember && } + + + + + {!postData?.writerInfo + ? '아직 작가소개를 작성하지 않았어요' + : postData?.writerInfo} + + + + {isMember && } @@ -410,9 +436,10 @@ const WriterInfoWrapper = styled.div` background-color: ${({ theme }) => theme.colors.white}; border-radius: 8px; - /* 피그마 답 보고 변경 필요 */ @media ${MOBILE_MEDIA_QUERY} { - height: 12rem; + flex-direction: column; + gap: 1.6rem; + height: 16rem; padding: 2.1rem 2rem; } `; @@ -431,7 +458,11 @@ const InfoWrapper = styled.div` max-height: 9.7rem; @media ${MOBILE_MEDIA_QUERY} { + flex-direction: row; + align-items: center; + justify-content: space-between; width: 100%; + height: 4.4rem; } `; @@ -441,25 +472,44 @@ const WriterInfoBox = styled.div` align-items: center; max-width: 53.6rem; height: 2.4rem; + + @media ${MOBILE_MEDIA_QUERY} { + flex-direction: column; + gap: 0.4rem; + align-items: flex-start; + height: 4.3rem; + padding-left: 1rem; + } `; const WriterDesc = styled.div` - overflow: hidden; + height: 6.6rem; color: ${({ theme }) => theme.colors.gray80}; - text-overflow: ellipsis; - word-break: keep-all; - ${({ theme }) => theme.fonts.body3}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mBody3}; + width: 100%; + height: 6rem; + } `; const WriterInfoText = styled.p` color: ${({ theme }) => theme.colors.black}; ${({ theme }) => theme.fonts.subtitle2}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mSubtitle4}; + } `; const GroupInfoText = styled.p` color: ${({ theme }) => theme.colors.gray50}; ${({ theme }) => theme.fonts.body6}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mBody3}; + } `; const DivideDotIcon = styled(DivideDotIc)` @@ -472,3 +522,16 @@ const DefaultProfileIcon = styled(DefaultProfileIc)` height: 4rem; } `; + +const MobileWriterInfoTop = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + margin-bottom: 1.6rem; +`; + +const MobileWriterDescription = styled.div` + width: 100%; + ${({ theme }) => theme.fonts.body3} +`; diff --git a/src/pages/postDetail/components/CommentInputBox.tsx b/src/pages/postDetail/components/CommentInputBox.tsx index 401ce842..43f33b82 100644 --- a/src/pages/postDetail/components/CommentInputBox.tsx +++ b/src/pages/postDetail/components/CommentInputBox.tsx @@ -173,8 +173,7 @@ const CommentLayout = styled.div<{ isMainComment: boolean; isError: boolean }>` @media ${MOBILE_MEDIA_QUERY} { ${({ theme }) => theme.fonts.mSubtitle1}; - /* 넓이 수정 필 */ - max-width: ${({ isMainComment }) => (isMainComment ? '95%' : '90%')}; + width: ${({ isMainComment }) => (isMainComment ? '93%' : '90%')}; min-height: 6rem; } `; @@ -200,8 +199,7 @@ const DesktopCommentForm = styled.textarea<{ isMainComment: boolean }>` `; const MobileCommentForm = styled.textarea<{ isMainComment: boolean }>` - /* 넓이 수정 필요 */ - width: ${({ isMainComment }) => (isMainComment ? '100%' : '56.3rem')}; + width: 100%; overflow: hidden; color: ${({ theme }) => theme.colors.gray100}; @@ -245,8 +243,7 @@ const CommentPostBtn = styled.button<{ $isComment: string }>` height: 4.4rem; padding: 0; - /* 폰트 수정 필요 */ - ${({ theme }) => theme.fonts.mSubtitle1} + ${({ theme }) => theme.fonts.mBody1} } `; diff --git a/src/pages/postDetail/components/CommentItem.tsx b/src/pages/postDetail/components/CommentItem.tsx index e80ccaf8..d57491ae 100644 --- a/src/pages/postDetail/components/CommentItem.tsx +++ b/src/pages/postDetail/components/CommentItem.tsx @@ -229,6 +229,7 @@ const CommentText = styled.p` color: ${({ theme }) => theme.colors.gray90}; ${({ theme }) => theme.fonts.body6}; white-space: pre-wrap; + word-break: break-all; @media ${MOBILE_MEDIA_QUERY} { ${({ theme }) => theme.fonts.mBody3}; diff --git a/src/pages/postDetail/components/CuriousBtn.tsx b/src/pages/postDetail/components/CuriousBtn.tsx index 5428082b..7578f180 100644 --- a/src/pages/postDetail/components/CuriousBtn.tsx +++ b/src/pages/postDetail/components/CuriousBtn.tsx @@ -5,6 +5,7 @@ import { useEffect, useState } from 'react'; import checkAuthenticate from '../../../utils/checkAuthenticate'; import { useDeleteCurious, useGetCuriousInfo, usePostCurious } from '../hooks/queries'; import { DetailPurpleFavoriteIc, DetailWhiteFavoriteIc } from './../../../assets/svgs'; +import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery'; interface CuriousBtnProps { postId: string; } @@ -73,6 +74,10 @@ const CuriousBtnWrapper = styled.button<{ $isClick: boolean }>` background-color: ${({ $isClick, theme }) => !$isClick ? theme.colors.mileViolet : theme.colors.mainViolet}; } + + @media ${MOBILE_MEDIA_QUERY} { + height: 4.4rem; + } `; const CuriousTextWrapper = styled.div`