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/#488] 모임초대페이지 반응형 #491

Merged
merged 9 commits into from
Dec 18, 2024
Merged

[Feat/#488] 모임초대페이지 반응형 #491

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
84ecc3f
chore: mSubtitle2 잘못된거 반영
se0jinYoon Dec 8, 2024
fd27645
chore: msubtitle2 font-weight 돌리기
se0jinYoon Dec 8, 2024
3a27471
feat: 모임 초대 페이지 반응형 구현
se0jinYoon Dec 8, 2024
4bda8c3
chore: 반응형 placeholder 반영
se0jinYoon Dec 8, 2024
d128bc2
chore: merge develop
se0jinYoon Dec 17, 2024
eab900b
fix: 헤더 적용
se0jinYoon Dec 17, 2024
57c0bf3
fix: 코리 반영 - input label htmlfor
se0jinYoon Dec 17, 2024
fabf582
design: 그룹 가입 축하 페이지 레이아웃 조정
se0jinYoon Dec 18, 2024
c45a480
design: 그룹 가입 축하페이지 모바일 반응형 구현
se0jinYoon Dec 18, 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
32 changes: 22 additions & 10 deletions src/pages/groupInvite/GroupInvite.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import Title from './components/Title';
import UserInfoInput from './components/UserInfoInput';
import { MODAL } from './constants/modalContent';
import { useGetGroupInfo } from './hooks/queries';
import { MOBILE_MEDIA_QUERY } from '../../styles/mediaQuery';
import Responsive from '../../components/commons/Responsive/Responsive';

const GroupInvite = () => {
const navigate = useNavigate();
Expand Down Expand Up @@ -59,10 +61,15 @@ const GroupInvite = () => {
}, [moimsData?.length]);

return (
<InviteWrapper>
<>
<DefaultHeader />
<GroupInviteWrapper>
<Spacing marginBottom="11.4" />
<Responsive only="desktop">
<Spacing marginBottom="11.4" />
</Responsive>
<Responsive only="mobile">
<Spacing marginBottom="9.9" />
</Responsive>
<Title />
<Spacing marginBottom="4.8" />

Expand All @@ -74,7 +81,12 @@ const GroupInvite = () => {
memberCount={memberCount}
description={description}
/>
<Spacing marginBottom="2.8" />
<Responsive only="desktop">
<Spacing marginBottom="2.8" />
</Responsive>
<Responsive only="mobile">
<Spacing marginBottom="3" />
</Responsive>
<UserInfoInput moimTitle={moimTitle} />

<Spacing marginBottom="7.7" />
Expand All @@ -89,22 +101,22 @@ const GroupInvite = () => {
}}
/>
</FullModal>
</InviteWrapper>
</>
);
};

export default GroupInvite;

const InviteWrapper = styled.div`
display: flex;
width: 100%;
`;

const GroupInviteWrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 82.6rem;
margin: 0 auto;

@media ${MOBILE_MEDIA_QUERY} {
justify-content: flex-start;
width: 100%;
padding: 0 2rem;
}
`;
61 changes: 57 additions & 4 deletions src/pages/groupInvite/components/GroupInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import styled from '@emotion/styled';

import { GroupDateIc, GroupLeaderIc, GroupMemberIc } from '../../../assets/svgs';
import Spacing from '../../../components/commons/Spacing';
import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery';
import Responsive from '../../../components/commons/Responsive/Responsive';

interface GroupInfoPropTypes {
moimTitle: string | undefined;
Expand All @@ -20,25 +22,28 @@ const GroupInfo = (props: GroupInfoPropTypes) => {
<GroupImg src={imageUrl} alt={'모임 이미지'} />
<GroupInfoContainer>
<GroupName>{moimTitle}</GroupName>
<Spacing marginBottom="1.8" />
<Responsive only="desktop">
<Spacing marginBottom="1.8" />
</Responsive>
<Responsive only="mobile">
<Spacing marginBottom="1.2" />
</Responsive>

<GroupInfoContentWrapper>
<GroupLeaderIc />
<GroupInfoContent>모임방장</GroupInfoContent>
<GroupInfoText>{leader}</GroupInfoText>
</GroupInfoContentWrapper>
<Spacing marginBottom="1.2" />
<GroupInfoContentWrapper>
<GroupDateIc />
<GroupInfoContent>설립날짜</GroupInfoContent>
<GroupInfoText>{foundedDate}~</GroupInfoText>
</GroupInfoContentWrapper>
<Spacing marginBottom="1.2" />
<GroupInfoContentWrapper>
<GroupMemberIc />
<GroupInfoContent>모임인원</GroupInfoContent>
<GroupInfoText>{memberCount}명의 작가들</GroupInfoText>
</GroupInfoContentWrapper>
<Spacing marginBottom="2.4" />
<GroupDetailWrapper>
<BorderBar />
<GroupDetail>{description}</GroupDetail>
Expand All @@ -56,13 +61,24 @@ const GroupInfoWrapper = styled.section`
align-items: center;
width: 100%;
height: fit-content;

@media ${MOBILE_MEDIA_QUERY} {
flex-direction: column;
gap: 2.4rem;
align-items: flex-start;
}
`;

const GroupImg = styled.img`
width: 36.4rem;
height: 27.3rem;

border-radius: 8px;

@media ${MOBILE_MEDIA_QUERY} {
width: 33.2rem;
height: 18.7rem;
}
`;

const GroupInfoContainer = styled.div`
Expand All @@ -71,24 +87,53 @@ const GroupInfoContainer = styled.div`
align-items: flex-start;
justify-content: center;
width: 41.7rem;

@media ${MOBILE_MEDIA_QUERY} {
width: 100%;
}
`;

const GroupName = styled.div`
color: ${({ theme }) => theme.colors.black};

${({ theme }) => theme.fonts.title10};

@media ${MOBILE_MEDIA_QUERY} {
${({ theme }) => theme.fonts.mTitle4};
}
`;

const GroupInfoContentWrapper = styled.div`
display: flex;
gap: 0.8rem;
align-items: center;
justify-content: space-between;
margin-bottom: 1.2rem;

&:last-child {
margin-bottom: 2.4rem;

@media ${MOBILE_MEDIA_QUERY} {
margin-bottom: 1.2rem;
}
}

@media ${MOBILE_MEDIA_QUERY} {
margin-bottom: 1rem;

&:last-child {
margin-bottom: 1.2rem;
}
}
`;

const GroupInfoContent = styled.span`
color: ${({ theme }) => theme.colors.gray70};
${({ theme }) => theme.fonts.subtitle6};

@media ${MOBILE_MEDIA_QUERY} {
${({ theme }) => theme.fonts.mTitle1};
}
`;

const GroupInfoText = styled.span`
Expand All @@ -101,6 +146,10 @@ const GroupDetailWrapper = styled.section`
gap: 1.2rem;
justify-content: flex-start;
width: 100%;

@media ${MOBILE_MEDIA_QUERY} {
padding-top: 0.2rem;
}
`;

const BorderBar = styled.div`
Expand All @@ -120,4 +169,8 @@ const GroupDetail = styled.p`
white-space: pre-wrap;
word-break: keep-all;
line-break: auto;

@media ${MOBILE_MEDIA_QUERY} {
${({ theme }) => theme.fonts.mBody3};
}
`;
9 changes: 9 additions & 0 deletions src/pages/groupInvite/components/Title.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import styled from '@emotion/styled';
import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery';

const Title = () => {
return (
Expand All @@ -23,10 +24,18 @@ const InviteText1 = styled.h2`
color: ${({ theme }) => theme.colors.gray70};

${({ theme }) => theme.fonts.title5};

@media ${MOBILE_MEDIA_QUERY} {
${({ theme }) => theme.fonts.mTitle4};
}
`;

const InviteText2 = styled.h1`
color: ${({ theme }) => theme.colors.mainViolet};

${({ theme }) => theme.fonts.title1};

@media ${MOBILE_MEDIA_QUERY} {
${({ theme }) => theme.fonts.mTitle6};
}
`;
Loading
Loading