Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat/#489] 글 상세페이지 반응형 구현 #496

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

[Feat/#489] 글 상세페이지 반응형 구현 #496

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7062943
chore: body2 line-height 반영
se0jinYoon Dec 8, 2024
4c9116b
chore: 구분점 svg추가
se0jinYoon Dec 8, 2024
906673d
feat: 공통버튼 삭제하기,수정하기 모바일 반영
se0jinYoon Dec 8, 2024
f84d3e3
feat: 글 상세 페이지 반응형 작업 (대댓글창 제외)
se0jinYoon Dec 8, 2024
f3e5550
feat: 댓글, 대댓글 반응형 구현
se0jinYoon Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/assets/svgs/divideDot.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/assets/svgs/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
11 changes: 11 additions & 0 deletions src/components/commons/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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%;
}
`;

// 글 제출하기, 수정 완료하기, 글 수정하기
Expand All @@ -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%;
}
`;

// 댓글 등록하기 비활성화
Expand Down
171 changes: 153 additions & 18 deletions src/pages/postDetail/PostDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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();
Expand Down Expand Up @@ -116,7 +119,12 @@ const PostDetail = () => {
<TitleText>{postData?.title}</TitleText>
<DetailBox>
<DateText>{postData?.createdAt} </DateText>
<DividingLine />
<Responsive only="desktop">
<DividingLine />
</Responsive>
<Responsive only="mobile">
<DivideDotIcon />
</Responsive>
<CuriousCount>
<GroupCuriousIc />
{postData?.curiousCount}
Expand Down Expand Up @@ -159,19 +167,45 @@ const PostDetail = () => {
<PostContainer dangerouslySetInnerHTML={{ __html: postData?.content || '' }} />
</PostWrapper>
<WriterInfoWrapper>
<WriterInfoContainer>
<DefaultProfileIc />
<InfoWrapper>
<WriterInfoBox>
<WriterInfoText>{postData?.writerName}</WriterInfoText>
<GroupInfoText>{postData?.moimName}</GroupInfoText>
</WriterInfoBox>
<WriterDesc>
{!postData?.writerInfo ? '아직 작가소개를 작성하지 않았어요' : postData?.writerInfo}
</WriterDesc>
</InfoWrapper>
</WriterInfoContainer>
{isMember && <CuriousBtn postId={postId} />}
<Responsive only="desktop">
<WriterInfoContainer>
<DefaultProfileIcon />
<InfoWrapper>
<WriterInfoBox>
<WriterInfoText>{postData?.writerName}</WriterInfoText>
<GroupInfoText>{postData?.moimName}</GroupInfoText>
</WriterInfoBox>
<WriterDesc>
{!postData?.writerInfo
? '아직 작가소개를 작성하지 않았어요'
: postData?.writerInfo}
</WriterDesc>
</InfoWrapper>
{isMember && <CuriousBtn postId={postId} />}
</WriterInfoContainer>
</Responsive>

<Responsive only="mobile">
<>
<MobileWriterInfoTop>
<DefaultProfileIcon />
<InfoWrapper>
<WriterInfoBox>
<WriterInfoText>{postData?.writerName}</WriterInfoText>
<GroupInfoText>{postData?.moimName}</GroupInfoText>
</WriterInfoBox>
{isMember && <CuriousBtn postId={postId} />}
</InfoWrapper>
</MobileWriterInfoTop>
<MobileWriterDescription>
<WriterDesc>
{!postData?.writerInfo
? '아직 작가소개를 작성하지 않았어요'
: postData?.writerInfo}
</WriterDesc>
</MobileWriterDescription>
</>
</Responsive>
</WriterInfoWrapper>
{isMember && <Comment postId={postId} />}
<Spacing marginBottom="8" />
Expand Down Expand Up @@ -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`
Expand All @@ -220,13 +258,22 @@ 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`
display: flex;
gap: 1.8rem;
justify-content: space-between;
width: 100%;

@media ${MOBILE_MEDIA_QUERY} {
flex-direction: column;
}
`;
const InfoTextBox = styled.div`
display: flex;
Expand All @@ -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`
Expand All @@ -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`
Expand All @@ -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`
Expand All @@ -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 }>`
Expand All @@ -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`
Expand All @@ -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`
Expand Down Expand Up @@ -345,6 +421,7 @@ const PostContainer = styled.div`

& > p {
min-height: 2.5rem;
${({ theme }) => theme.fonts.body2};
}
`;

Expand All @@ -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`
Expand All @@ -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`
Expand All @@ -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}
`;
Loading
Loading