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

selectMeeting 컴포넌트 모바일 대응 #610

Merged
merged 5 commits into from
Dec 9, 2023
Merged

selectMeeting 컴포넌트 모바일 대응 #610

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0f05166
feat: MeetingInfo 호버 애니메이션
na-reum Dec 7, 2023
c2646c6
feat: 배경 누르면 플로팅이 꺼진다
na-reum Dec 7, 2023
844e34a
feat: 모바일 대응
na-reum Dec 7, 2023
4631acf
chore: 원래 모달로 되돌리기
na-reum Dec 7, 2023
42a48b1
Update src/components/feed/Modal/FeedFormPresentation.tsx
na-reum Dec 9, 2023
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
37 changes: 20 additions & 17 deletions src/components/feed/Modal/FeedFormPresentation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,23 +140,26 @@ function FeedFormPresentation({
완료
</SSubmitButton>
</SFormHeader>
{attendGroupsInfo?.length === 0 && groupInfo ? (
<SGroupInfoSection className="calc_target">
<SThumbnailImage
css={{
backgroundImage: `url(${getResizedImage(groupInfo.imageUrl, 168)})`,
}}
<div className="calc_target">
{attendGroupsInfo?.length === 0 && groupInfo ? (
<SGroupInfoSection>
<SThumbnailImage
css={{
backgroundImage: `url(${getResizedImage(groupInfo.imageUrl, 168)})`,
}}
/>
<SCategory>{groupInfo.category}</SCategory>
<STitle>{groupInfo.title}</STitle>{' '}
na-reum marked this conversation as resolved.
Show resolved Hide resolved
</SGroupInfoSection>
) : (
<SelectMeeting
selectMeetingInfo={selectedMeeting}
meetingList={attendGroupsInfo}
onClick={handleSelectMeeting}
/>
<SCategory>{groupInfo.category}</SCategory>
<STitle>{groupInfo.title}</STitle>{' '}
</SGroupInfoSection>
) : (
<SelectMeeting
selectMeetingInfo={selectedMeeting}
meetingList={attendGroupsInfo}
onClick={handleSelectMeeting}
/>
)}
)}
</div>

<SDivider className="calc_target" />
<FormController
name="title"
Expand All @@ -180,7 +183,7 @@ function FeedFormPresentation({
/>
)}
/>
<SDivider />
<SDivider className="calc_target" />
<FormController
name="contents"
defaultValue=""
Expand Down
135 changes: 104 additions & 31 deletions src/components/feed/Modal/SelectMeeting/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,42 +25,64 @@ function SelectMeeting({ selectMeetingInfo, meetingList, onClick }: SelectMeetin
};

return (
<Container>
<InfoWrapper onClick={handleSelectClick}>
{selectMeetingInfo ? (
<>
<SThumbnailImage
css={{
backgroundImage: `url(${getResizedImage(selectMeetingInfo.imageUrl, 168)})`,
}}
/>
<SCategory>{selectMeetingInfo.category}</SCategory>
<STitle>{selectMeetingInfo.title}</STitle>{' '}
</>
) : (
<STitle css={{ p: '$0' }}>어떤 모임의 피드를 작성할까요?</STitle>
)}

<Arrow direction={isSelectOpen ? 'top' : 'bottom'} css={{ margin: '0 0 0 6px' }} />
</InfoWrapper>
<>
<ModalBackground
onClick={isSelectOpen ? handleSelectClick : () => {}}
onClick={handleSelectClick}
css={{
background: 'rgba(0, 0, 0, 0)',
background: isSelectOpen ? '$grayAlpha800' : 'rgba(0, 0, 0, 0)',
transition: 'all 0.3s ease',
pointerEvents: isSelectOpen ? 'auto' : 'none',
}}
/>
<SelectWrapper isSelectOpen={isSelectOpen}>
{meetingList.map(meetingInfo => (
<SelectMeetingOptionItem
meetingInfo={meetingInfo}
isSelected={selectMeetingInfo?.id === meetingInfo.id}
onClick={handleSelectItemClick}
/>
))}
</SelectWrapper>
</Container>
<SelectMobileLayout isSelectOpen={isSelectOpen}>
<SelectMobileTitle>어떤 모임의 피드를 작성할까요?</SelectMobileTitle>
<SelectMobileListWrapper>
{meetingList.map(meetingInfo => (
<SelectMeetingOptionItem
meetingInfo={meetingInfo}
isSelected={selectMeetingInfo?.id === meetingInfo.id}
onClick={handleSelectItemClick}
/>
))}
</SelectMobileListWrapper>
</SelectMobileLayout>
<Container>
<InfoWrapper onClick={handleSelectClick}>
{selectMeetingInfo ? (
<>
<SThumbnailImage
css={{
backgroundImage: `url(${getResizedImage(selectMeetingInfo.imageUrl, 168)})`,
}}
/>
<SCategory>{selectMeetingInfo.category}</SCategory>
<STitle>{selectMeetingInfo.title}</STitle>{' '}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기도 바꿔주세유 ~~

Suggested change
<STitle>{selectMeetingInfo.title}</STitle>{' '}
<STitle>{selectMeetingInfo.title}</STitle>

</>
) : (
<STitle css={{ p: '$0' }}>어떤 모임의 피드를 작성할까요?</STitle>
)}

<Arrow direction={isSelectOpen ? 'top' : 'bottom'} css={{ margin: '0 0 0 6px' }} />
</InfoWrapper>
<ModalBackground
onClick={isSelectOpen ? handleSelectClick : () => {}}
css={{
background: 'rgba(0, 0, 0, 0)',
transition: 'all 0.3s ease',
pointerEvents: isSelectOpen ? 'auto' : 'none',
}}
/>
<SelectDesktopLayout isSelectOpen={isSelectOpen}>
{meetingList.map(meetingInfo => (
<SelectMeetingOptionItem
meetingInfo={meetingInfo}
isSelected={selectMeetingInfo?.id === meetingInfo.id}
onClick={handleSelectItemClick}
/>
))}
</SelectDesktopLayout>
</Container>
</>
);
}

Expand Down Expand Up @@ -118,7 +140,7 @@ const STitle = styled('p', {
},
});

const SelectWrapper = styled('div', {
const SelectDesktopLayout = styled('div', {
position: 'absolute',
top: '120%',
left: 0,
Expand All @@ -144,4 +166,55 @@ const SelectWrapper = styled('div', {
},
},
},
'@tablet': {
display: 'none',
},
});

const SelectMobileTitle = styled('p', {
color: '$gray10',
fontStyle: 'T4',
ml: '$16',
mr: '$16',
mb: '$12',
});

const SelectMobileLayout = styled('div', {
position: 'absolute',
display: 'none',

bottom: '20px',
left: '20px',
right: '20px',
pt: '$24',
pb: '$16',
height: '400px',
overflow: 'hidden',

backgroundColor: '$gray700',
borderRadius: '16px',
zIndex: '$3',
transition: 'all 0.3s ease-in-out',
variants: {
isSelectOpen: {
true: {
height: '400px',
},
false: {
height: '0px',
p: '$0',
},
},
},
'@tablet': {
display: 'block',
position: 'absolute',
},
});

const SelectMobileListWrapper = styled('div', {
height: '324px',
overflowX: 'hidden',
overflowY: 'auto',
p: '$8',
});
4 changes: 4 additions & 0 deletions src/components/page/meetingDetail/Feed/FeedItem/MeetingInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@ const Container = styled('div', {
fontStyle: 'T5',
padding: '$0 $12',
mb: '$20',
border: '1px solid $gray800',
'&:hover': {
border: '1px solid $gray500',
},
});

const MeetingInfoWrapper = styled('div', {
Expand Down
9 changes: 7 additions & 2 deletions src/components/page/postList/FloatingButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
import Plus from '@assets/svg/plus.svg?rect';
import FloatingButtonModal from '@components/modal/FloatingButtonModal';
import ModalBackground from '@components/modal/ModalBackground';
import { useState } from 'react';
import { styled } from 'stitches.config';
import FloatingButtonModal from '@components/modal/FloatingButtonModal';

function FloatingButton() {
const [isActive, setIsActive] = useState(false);

const handleButtonClick = () => setIsActive(isActive => !isActive);
const handleOptionClose = () => setIsActive(false);

return (
<>
<ModalBackground
onClick={handleOptionClose}
css={{
background: isActive ? '$grayAlpha800' : 'rgba(0, 0, 0, 0)',
transition: 'all 0.3s ease',
pointerEvents: isActive ? 'auto' : 'none',
}}
/>
<Container isActive={isActive}>
<OptionOpenButton isActive={isActive} onClick={() => setIsActive(isActive => !isActive)}>
<OptionOpenButton isActive={isActive} onClick={handleButtonClick}>
<Icon isActive={isActive} />
</OptionOpenButton>
<FloatingButtonModal isActive={isActive} />
Expand Down