Skip to content

Commit

Permalink
feat/#492 : 모임 정보 관련 모바일 컴포넌트
Browse files Browse the repository at this point in the history
  • Loading branch information
@moondda
moondda committed Dec 17, 2024
1 parent 70cf287 commit f0a0776
Show file tree
Hide file tree
Showing 6 changed files with 240 additions and 34 deletions.
84 changes: 75 additions & 9 deletions src/pages/groupFeed/carousel/EachArticle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import {
} from '../../../assets/svgs';
import Spacing from '../../../components/commons/Spacing';
import { useArticleList } from '../hooks/queries';
import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery';
import Responsive from '../../../components/commons/Responsive/Responsive';

interface EachProfilePropTypes {
groupId: string;
Expand Down Expand Up @@ -81,12 +83,29 @@ const EachArticle = (props: EachProfilePropTypes) => {
<div key={`${dataIndex}-${index}`} ref={bottomOfListRef}>
<ArticleWrapper onClick={() => handleGoPostDetail(list.postId)}>
<ArticleContainer isImageContained={list.isImageContained}>
<ArticleTitle>{list.postTitle}</ArticleTitle>
<Spacing marginBottom="1.6" />
<ArticleContent>{list.postContent}</ArticleContent>
<Spacing marginBottom="1.2" />
<Responsive only="desktop">
<ArticleTitle>{list.postTitle}</ArticleTitle>
<Spacing marginBottom="1.6" />
<ArticleContent isImageContained={list.isImageContained}>
{list.postContent}
</ArticleContent>
<Spacing marginBottom="1.2" />
</Responsive>
<Responsive only="mobile">
<MobileListWrapper>
<div>
<ArticleTitle>{list.postTitle}</ArticleTitle>
<Spacing marginBottom="0.8" />
<ArticleContent isImageContained={list.isImageContained}>
{list.postContent}
</ArticleContent>
<Spacing marginBottom="1.2" />
</div>
{list.isImageContained && <ArticleThumbnail imageUrl={list.imageUrl} />}
</MobileListWrapper>
</Responsive>
<ArticleInfo>
<GroupListProfileIc />
<GroupListProfileIcon />
<ProfileName>{list.writerName}</ProfileName>
<ArticleDetail>{list.createdAt} </ArticleDetail>
<ArticleDetail>
Expand All @@ -106,7 +125,9 @@ const EachArticle = (props: EachProfilePropTypes) => {
<ArticleDetailBold>{list.commentCount}</ArticleDetailBold>
</ArticleInfo>
</ArticleContainer>
{list.isImageContained && <ArticleThumbnail imageUrl={list.imageUrl} />}
<Responsive only="desktop">
{list.isImageContained && <ArticleThumbnail imageUrl={list.imageUrl} />}
</Responsive>
</ArticleWrapper>
</div>
)),
Expand All @@ -119,9 +140,23 @@ const EachArticle = (props: EachProfilePropTypes) => {
};

export default EachArticle;

const GroupListProfileIcon = styled(GroupListProfileIc)`
@media ${MOBILE_MEDIA_QUERY} {
width: 2rem;
height: 2rem;
}
`;

const MobileListWrapper = styled.div`
display: flex;
gap: 1.2rem;
width: 100%;
`;
const DividingLine = styled.div`
width: 0.1rem;
height: 1.4rem;
margin: 0 0.6rem;
background-color: ${({ theme }) => theme.colors.gray30};
border-radius: 2px;
Expand All @@ -147,39 +182,54 @@ const NoPostWrapper = styled.div`
`;

const ArticleThumbnail = styled.div<{ imageUrl: string }>`
flex-shrink: 0;
width: 20rem;
height: 14.9rem;
background-image: ${({ imageUrl }) => `url(${imageUrl})`};
background-size: cover;
border-radius: 8px;
@media ${MOBILE_MEDIA_QUERY} {
width: 14.6rem;
height: 11rem;
}
`;

const ArticleContainer = styled.div<{ isImageContained: boolean }>`
display: flex;
flex-direction: column;
width: ${({ isImageContained }) => (isImageContained ? '42.4rem' : 'auto')};
width: ${({ isImageContained }) => (isImageContained ? '100%' : 'auto')};
`;

const ArticleWrapper = styled.button`
display: flex;
gap: 3.2rem;
width: 72rem;
justify-content: space-between;
width: 100%;
padding: 3.2rem;
text-align: left;
background-color: ${({ theme }) => theme.colors.white};
border-radius: 8px;
@media ${MOBILE_MEDIA_QUERY} {
width: 100%;
padding: 1.6rem;
}
`;

const ArticleTitle = styled.div`
color: ${({ theme }) => theme.colors.black};
${({ theme }) => theme.fonts.title5};
@media ${MOBILE_MEDIA_QUERY} {
${({ theme }) => theme.fonts.mTitle1};
}
`;

const ArticleContent = styled.div`
const ArticleContent = styled.div<{ isImageContained: boolean }>`
display: -webkit-boen;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
Expand All @@ -189,6 +239,11 @@ const ArticleContent = styled.div`
color: ${({ theme }) => theme.colors.gray70};
${({ theme }) => theme.fonts.body3};
word-break: break-all;
@media ${MOBILE_MEDIA_QUERY} {
width: auto;
max-width: ${({ isImageContained }) => (isImageContained ? '62rem' : '100%')};
}
`;

const ArticleInfo = styled.div`
Expand All @@ -208,6 +263,11 @@ const ArticleDetail = styled.div`
color: ${({ theme }) => theme.colors.gray60};
${({ theme }) => theme.fonts.body6};
@media ${MOBILE_MEDIA_QUERY} {
margin-right: 0.2rem;
${({ theme }) => theme.fonts.mSubtitle1};
}
`;

const ArticleDetailBold = styled.div`
Expand All @@ -225,4 +285,10 @@ const ProfileName = styled.div`
color: ${({ theme }) => theme.colors.gray80};
${({ theme }) => theme.fonts.subtitle6};
@media ${MOBILE_MEDIA_QUERY} {
margin-right: 1rem;
margin-left: 0.6rem;
${({ theme }) => theme.fonts.mBody1};
}
`;
72 changes: 65 additions & 7 deletions src/pages/groupFeed/components/CuriousArticle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@ import styled from '@emotion/styled';
import { useNavigate } from 'react-router-dom';
import { GroupNoDataImgIc } from '../../../assets/svgs';
import GroupThumbnailImg from '/src/assets/svgs/groupCardThumnailImg.svg';
import PopularMobileIc from '/src/assets/svgs/popularMobile.svg';
import Spacing from '../../../components/commons/Spacing';
import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery';
import Responsive from '../../../components/commons/Responsive/Responsive';

interface ArticlePropTypes {
topic: string;
Expand All @@ -28,6 +31,7 @@ const CuriousArticle = (props: CuriousArticlePropTypes) => {

return (
<CuriousArticleWrapper>
{/* 여기도 디자인 가이드 필요 */}
{mostCuriousPost?.length == 0 ? (
<NoCuriousArticleWrapper>
<Spacing marginBottom="4" />
Expand All @@ -39,13 +43,20 @@ const CuriousArticle = (props: CuriousArticlePropTypes) => {
) : (
mostCuriousPost?.map((article: ArticlePropTypes, index: number) => (
<CuriousArticleLayout key={index} onClick={() => handleGoPostDetail(article.postId)}>
<ArticleThumbnail src={article.isContainPhoto ? article.imageUrl : GroupThumbnailImg} />
<Spacing marginBottom="1.6" />
<ArticleWritingStyle>{article.topic}</ArticleWritingStyle>
<Spacing marginBottom="0.4" />
<ArticleTitle>{article.title}</ArticleTitle>
<Spacing marginBottom="1.2" />
<ArticlePreview>{article.content}</ArticlePreview>
<Responsive only="desktop">
<ArticleThumbnail
src={article.isContainPhoto ? article.imageUrl : GroupThumbnailImg}
/>
</Responsive>
<Responsive only="mobile">
<ArticleThumbnail src={article.isContainPhoto ? article.imageUrl : PopularMobileIc} />
</Responsive>

<ArticleWrapper>
<ArticleWritingStyle>{article.topic}</ArticleWritingStyle>
<ArticleTitle>{article.title}</ArticleTitle>
<ArticlePreview>{article.content}</ArticlePreview>
</ArticleWrapper>
</CuriousArticleLayout>
))
)}
Expand All @@ -55,9 +66,18 @@ const CuriousArticle = (props: CuriousArticlePropTypes) => {

export default CuriousArticle;

const ArticleWrapper = styled.div`
width: 100%;
max-width: 37.5rem;
`;

const CuriousArticleWrapper = styled.div`
display: flex;
gap: 1.6rem;
@media screen and (width <= 540px) {
flex-direction: column;
}
`;

const ArticleThumbnail = styled.img`
Expand All @@ -66,33 +86,64 @@ const ArticleThumbnail = styled.img`
background-size: cover;
border-radius: 8px;
@media ${MOBILE_MEDIA_QUERY} {
width: 11.4rem;
height: 100%;
}
`;

const CuriousArticleLayout = styled.div`
display: flex;
flex-direction: column;
gap: 1.6rem;
width: 35.2rem;
height: 34.7rem;
padding: 3.2rem;
background-color: ${({ theme }) => theme.colors.white};
cursor: pointer;
border-radius: 8px;
@media ${MOBILE_MEDIA_QUERY} {
flex-direction: row;
gap: 1.4rem;
width: 50%;
height: 13rem;
padding: 1.6rem;
}
@media screen and (width <= 540px) {
width: 100%;
}
`;

const ArticleWritingStyle = styled.div`
margin-bottom: 0.4rem;
color: ${({ theme }) => theme.colors.mainViolet};
${({ theme }) => theme.fonts.body4};
@media ${MOBILE_MEDIA_QUERY} {
${({ theme }) => theme.fonts.mSubtitle1};
margin-bottom: 0.2rem;
}
`;

const ArticleTitle = styled.div`
display: -webkit-box;
margin-bottom: 1.2rem;
overflow: hidden;
color: ${({ theme }) => theme.colors.black};
${({ theme }) => theme.fonts.title7};
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
@media ${MOBILE_MEDIA_QUERY} {
margin-bottom: 0.6rem;
${({ theme }) => theme.fonts.mTitle1};
}
`;

const ArticlePreview = styled.div`
Expand All @@ -109,6 +160,13 @@ const ArticlePreview = styled.div`
white-space: wrap;
text-overflow: ellipsis;
${({ theme }) => theme.fonts.body3};
@media ${MOBILE_MEDIA_QUERY} {
width: 100%;
height: 5.1rem;
${({ theme }) => theme.fonts.mSubtitle1};
}
`;

const NoCuriousArticleWrapper = styled.div`
Expand Down
33 changes: 23 additions & 10 deletions src/pages/groupFeed/components/CuriousProfile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import styled from '@emotion/styled';

import { GroupBestProfileIc, GroupNoDataImgIc } from '../../../assets/svgs';
import Spacing from '../../../components/commons/Spacing';
import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery';

interface ProfilePropTypes {
writerName: string;
Expand All @@ -18,6 +19,7 @@ const CuriousProfile = (props: CuriousProfilePropTypes) => {

return (
<CuriousProfileWrapper>
{/* 없는 경우 디자인 가이드 필요! */}
{mostCuriousWriter?.length === 0 ? (
<NoCuriousProfileeWrapper>
<Spacing marginBottom="4" />
Expand All @@ -29,10 +31,8 @@ const CuriousProfile = (props: CuriousProfilePropTypes) => {
) : (
mostCuriousWriter?.map((writer: ProfilePropTypes, index: number) => (
<CuriousProfileLayout key={index}>
<GroupBestProfileIc />
<ProfileWrapper>
<ProfileTitle>{writer.writerName}</ProfileTitle>
</ProfileWrapper>
<GroupBestProfileIcon />
<ProfileTitle>{writer.writerName}</ProfileTitle>
</CuriousProfileLayout>
))
)}
Expand All @@ -42,22 +42,27 @@ const CuriousProfile = (props: CuriousProfilePropTypes) => {

export default CuriousProfile;

const GroupBestProfileIcon = styled(GroupBestProfileIc)`
@media ${MOBILE_MEDIA_QUERY} {
width: 5rem;
height: 5rem;
}
`;

const CuriousProfileWrapper = styled.div`
display: flex;
gap: 1.6rem;
align-items: center;
`;
const ProfileWrapper = styled.div`
display: flex;
flex-direction: column;
gap: 0.8rem;
width: 100%;
`;

const ProfileTitle = styled.div`
color: ${({ theme }) => theme.colors.gray90};
${({ theme }) => theme.fonts.subtitle3};
@media ${MOBILE_MEDIA_QUERY} {
${({ theme }) => theme.fonts.mSubtitle2};
}
`;

const CuriousProfileLayout = styled.div`
Expand All @@ -73,6 +78,14 @@ const CuriousProfileLayout = styled.div`
border-radius: 8px;
${({ theme }) => theme.fonts.subtitle3};
@media ${MOBILE_MEDIA_QUERY} {
flex-direction: column;
gap: 0.8rem;
width: 50vw;
height: 10.6rem;
padding: 1.4rem;
}
`;

const NoCuriousProfileeWrapper = styled.div`
Expand Down
Loading

0 comments on commit f0a0776

Please sign in to comment.