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'; 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%; + } `; // 댓글 등록하기 비활성화 diff --git a/src/pages/postDetail/PostDetail.tsx b/src/pages/postDetail/PostDetail.tsx index 6e53b575..c99ba00b 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} @@ -159,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 && } @@ -211,6 +245,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 +258,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 +270,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 +293,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 +315,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 +328,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 +341,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 +355,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 +376,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 +421,7 @@ const PostContainer = styled.div` & > p { min-height: 2.5rem; + ${({ theme }) => theme.fonts.body2}; } `; @@ -358,6 +435,13 @@ const WriterInfoWrapper = styled.div` background-color: ${({ theme }) => theme.colors.white}; border-radius: 8px; + + @media ${MOBILE_MEDIA_QUERY} { + flex-direction: column; + gap: 1.6rem; + height: 16rem; + padding: 2.1rem 2rem; + } `; const WriterInfoContainer = styled.div` @@ -372,6 +456,14 @@ const InfoWrapper = styled.div` gap: 0.7rem; width: 53.6rem; max-height: 9.7rem; + + @media ${MOBILE_MEDIA_QUERY} { + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + height: 4.4rem; + } `; const WriterInfoBox = styled.div` @@ -380,23 +472,66 @@ 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)` + margin-bottom: 0.2rem; +`; + +const DefaultProfileIcon = styled(DefaultProfileIc)` + @media ${MOBILE_MEDIA_QUERY} { + width: 4rem; + 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/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..43f33b82 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,23 @@ 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}; + width: ${({ isMainComment }) => (isMainComment ? '93%' : '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 +198,25 @@ const CommentForm = styled.textarea<{ isMainComment: boolean }>` ${({ theme }) => theme.fonts.button2}; `; +const MobileCommentForm = styled.textarea<{ isMainComment: boolean }>` + width: 100%; + 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 +237,19 @@ 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.mBody1} + } `; -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..d57491ae 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,30 @@ 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; + word-break: break-all; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.mBody3}; + } `; const Modal = styled.div` @@ -250,3 +285,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; + } +`; 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` 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 */