Skip to content

Commit

Permalink
feat: 쪽지 보내기 모달 mds로 변경 및 반응형 처리 (#1683)
Browse files Browse the repository at this point in the history 
* feat: mds 디자인으로 변경

* feat: 반응형 처리
  • Loading branch information
@simeunseo
simeunseo authored Nov 10, 2024
1 parent 2be6d25 commit bc3e78a
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 86 deletions.
105 changes: 51 additions & 54 deletions src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ interface MessageModalProps {
const MessageModal: FC<MessageModalProps> = ({ receiverId, phone, ...props }) => {
const {
handleSubmit,
control,watch,
control,
watch,
formState: { isValid: _isValid },
} = useForm<MessageForm>({
resolver: yupResolver(schema),
Expand All @@ -58,7 +59,7 @@ const MessageModal: FC<MessageModalProps> = ({ receiverId, phone, ...props }) =>
const { open } = useToast();
const { data: me } = useGetMemberOfMe();
const { data: profile } = useGetMemberProfileById(me?.id ?? undefined);
const {logSubmitEvent}=useEventLogger()
const { logSubmitEvent } = useEventLogger();
const submit = async ({ content, phone }: MessageForm) => {
if (isPending) {
return;
Expand All @@ -81,7 +82,7 @@ const MessageModal: FC<MessageModalProps> = ({ receiverId, phone, ...props }) =>
receiverId,
category: '커피챗',
});
logSubmitEvent('sendCoffeechat',{content:content})
logSubmitEvent('sendCoffeechat', { content: content });
open({
icon: 'success',
content: '커피챗 제안이 잘 전달되었어요!',
Expand All @@ -101,7 +102,7 @@ const MessageModal: FC<MessageModalProps> = ({ receiverId, phone, ...props }) =>
return (
<StyledModal isOpen {...props}>
{profile && (
<StyledForm onSubmit={handleSubmit(submit)}>
<StyledForm onSubmit={handleSubmit(submit)}>
<ProfileImage src='/icons/icon_coffeechat.svg' />
<Text mt={30} typography='SUIT_24_B'>
커피챗 제안하기
Expand All @@ -120,20 +121,20 @@ const MessageModal: FC<MessageModalProps> = ({ receiverId, phone, ...props }) =>
</Text>
<LoggingClick eventKey='senderPhone'>
<>
<TextWrapper>
<StyledText mt={48} color={colors.white}>
회신 받을 본인 연락처 <span style={{ color: '#F77234' }}>*</span>
</StyledText>
</TextWrapper>
<RHFControllerFormItem
style={{ width: '100%' }}
control={control}
name='phone'
defaultValue={profile?.phone ? profile?.phone : phone}
component={StyledInput}
placeholder='연락처를 입력해주세요!'
/>
</>
<TextWrapper>
<StyledText mt={48} color={colors.white}>
회신 받을 본인 연락처 <span style={{ color: '#F77234' }}>*</span>
</StyledText>
</TextWrapper>
<RHFControllerFormItem
style={{ width: '100%' }}
control={control}
name='phone'
defaultValue={profile?.phone ? profile?.phone : phone}
component={StyledInput}
placeholder='연락처를 입력해주세요!'
/>
</>
</LoggingClick>
<TextWrapper>
<StyledText mt={46} color={colors.white}>
Expand All @@ -148,13 +149,10 @@ const MessageModal: FC<MessageModalProps> = ({ receiverId, phone, ...props }) =>
component={StyledTextArea}
placeholder={COFFEECHAT_PLACEHOLDER}
maxCount={500}

/>
{/* 향후 any 수정 */}
</InputWrapper>
<TextCountWrapper>
{contentValue?contentValue.length:0}/500
</TextCountWrapper>
<TextCountWrapper>{contentValue ? contentValue.length : 0}/500</TextCountWrapper>

<StyledButton isDisabled={!isValid || isPending}>
{isPending ? (
Expand All @@ -181,43 +179,42 @@ const StyledModal = styled(Modal)`
padding: 32px 32px 48px;
width: 588px;
max-height: 100vh;
overflow-y:scroll;
overflow-y: scroll;
&::-webkit-scrollbar {
&::-webkit-scrollbar {
display: none;
}
textarea{
background-color : ${colors.gray800};
textarea {
background-color: ${colors.gray800};
&::placeholder {
color:${colors.gray300}
}
&::placeholder {
color: ${colors.gray300};
}
&:focus{
background-color : ${colors.gray800};
}
&:focus {
background-color: ${colors.gray800};
}
}
input{
background-color : ${colors.gray800};
input {
background-color: ${colors.gray800};
&::placeholder {
color:${colors.gray300}
}
&::placeholder {
color: ${colors.gray300};
}
}
@supports (height: 100dvh) {
max-height: 100dvh;
}
@media ${MB_BIG_MEDIA_QUERY} {
top:60px;
padding-top:16px;
top: 60px;
padding-top: 16px;
width: 100vw;
height: auto;
min-height:100dvh;
min-height: 100dvh;
overflow-y: scroll;
}
`;

const StyledForm = styled.form`
Expand Down Expand Up @@ -288,33 +285,33 @@ const StyledButton = styled.button<{ isDisabled: boolean }>`
background-color: ${colors.gray100};
}
@media ${MB_BIG_MEDIA_QUERY}{
margin-bottom:40px;
@media ${MB_BIG_MEDIA_QUERY} {
margin-bottom: 40px;
}
`;
const InputWrapper = styled.div`
width: 100%;
height: 184px;
textarea{
min-height:184px;
textarea {
min-height: 184px;
}
@media ${MB_BIG_MEDIA_QUERY} {
height: 150px;
textarea{
min-height:150px;
textarea {
min-height: 150px;
}
}
`;
const StyledText = styled(Text)`
${fonts.LABEL_14_SB};
`;
const TextCountWrapper=styled.div`
margin-top:24px;
width: 100%;
text-align: right;
color:${colors.gray300};
const TextCountWrapper = styled.div`
margin-top: 24px;
width: 100%;
text-align: right;
color: ${colors.gray300};
${fonts.LABEL_12_SB};
`
${fonts.LABEL_12_SB};
`;
65 changes: 39 additions & 26 deletions src/components/members/detail/MessageSection/MessageModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import styled from '@emotion/styled';
import { yupResolver } from '@hookform/resolvers/yup';
import { colors } from '@sopt-makers/colors';
import ProfileIcon from 'public/icons/icon-profile.svg';
import { IconUser } from '@sopt-makers/icons';
import { FC, useState } from 'react';
import { useForm } from 'react-hook-form';
import * as yup from 'yup';
Expand All @@ -15,8 +15,9 @@ import useCustomConfirm from '@/components/common/Modal/useCustomConfirm';
import Text from '@/components/common/Text';
import TextArea from '@/components/common/TextArea';
import Modal, { ModalProps } from '@/components/members/detail/MessageSection/Modal';
import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
import { MB_BIG_MEDIA_QUERY, MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
import { zIndex } from '@/styles/zIndex';
import { Button } from '@sopt-makers/ui';

export enum MessageCategory {
NETWORK = '친목',
Expand Down Expand Up @@ -134,11 +135,11 @@ const MessageModal: FC<MessageModalProps> = ({
{profileImageUrl ? (
<ProfileImage src={profileImageUrl} style={{ width: '84px', height: '84px', borderRadius: '20px' }} />
) : (
<EmptyProfileImage style={{ width: '84px', height: '84px' }}>
<ProfileIcon />
<EmptyProfileImage>
<IconUser style={{ width: '45px', height: '45px', color: `${colors.gray300}`, marginTop: '4px' }} />
</EmptyProfileImage>
)}
<Text mt={30} typography='SUIT_26_B'>
<Text mt={24} typography='SUIT_24_B'>
{name}님에게 쪽지 보내기
</Text>
<Text mt={14} typography='SUIT_14_M' color={colors.gray300}>
Expand All @@ -159,9 +160,7 @@ const MessageModal: FC<MessageModalProps> = ({
))}
</StyledCategory>
<TextWrapper>
<Text mt={46} color={colors.gray200} typography='SUIT_14_M'>
회신 받을 본인 이메일
</Text>
<Text typography='SUIT_14_SB'>회신 받을 본인 이메일</Text>
</TextWrapper>
<RHFControllerFormItem
style={{ width: '100%' }}
Expand All @@ -179,7 +178,7 @@ const MessageModal: FC<MessageModalProps> = ({
'멤버에게 궁금한 점을 자세하게 적어주세요. 이야기 나누고 싶은 주제를 쉽게 이해할 수 있도록, 회원님에 대해 간단하게 소개해 주시면 더 좋아요.'
}
/>
<StyledButton isDisabled={!isValid || isPending}>
<StyledButton type='submit' disabled={!isValid || isPending}>
{isPending ? (
<Loading color='white' />
) : (
Expand All @@ -197,13 +196,18 @@ const MessageModal: FC<MessageModalProps> = ({
export default MessageModal;

const StyledModal = styled(Modal)`
padding-top: 20px;
max-height: 100vh;
background: ${colors.gray900};
padding-top: 40px;
max-height: 792px;
overflow-y: auto;
@supports (height: 100dvh) {
max-height: 100dvh;
}
@media ${MB_BIG_MEDIA_QUERY} {
width: 100vw;
}
`;

const StyledForm = styled.form`
Expand All @@ -229,10 +233,10 @@ const EmptyProfileImage = styled.div`
display: flex;
align-items: center;
justify-content: center;
border-radius: 36px;
border-radius: 19px;
background: ${colors.gray700};
width: 171px;
height: 171px;
width: 84px;
height: 84px;
`;

const StyledCategory = styled.section`
Expand All @@ -242,7 +246,7 @@ const StyledCategory = styled.section`
column-gap: 10px;
align-items: center;
justify-content: center;
margin-top: 46px;
margin-top: 40px;
max-width: 224px;
`;

Expand All @@ -267,26 +271,35 @@ const StyledIcon = styled.img`

const TextWrapper = styled.div`
display: flex;
padding-top: 40px;
width: 100%;
`;

const StyledInput = styled(Input)`
margin-top: 12px;
margin-top: 8px;
& > input {
border: none;
border-radius: 10px;
background-color: ${colors.gray800};
padding: 15px 16px;
&::placeholder {
color: ${colors.gray400};
}
}
`;

const StyledTextArea = styled(TextArea)`
margin-top: 14px;
border: none;
border-radius: 10px;
background-color: ${colors.gray800};
padding: 15px 16px;
height: 172px;
line-height: 26px;
`;

const StyledButton = styled.button<{ isDisabled: boolean }>`
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
margin-top: 36px;
border-radius: 12px;
background-color: ${({ isDisabled }) => (isDisabled ? colors.gray700 : colors.gray10)};
cursor: pointer;
padding: 14px 28px;
const StyledButton = styled(Button)`
margin-top: 40px;
`;
14 changes: 8 additions & 6 deletions src/components/members/detail/MessageSection/Modal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import styled from '@emotion/styled';
import { colors } from '@sopt-makers/colors';
import { IconXClose } from '@sopt-makers/icons';
import FocusTrap from 'focus-trap-react';
import { FC, HTMLAttributes, PropsWithChildren, ReactNode, useRef } from 'react';
import { RemoveScroll } from 'react-remove-scroll';
Expand All @@ -25,8 +26,6 @@ export interface ModalProps extends PropsWithChildren<HTMLAttributes<HTMLDivElem
onClose: () => void;
}



const Modal: FC<ModalProps> = (props) => {
const { confirmIcon, children, title = '', content, isOpen, onClose, width, ...restProps } = props;
const modalRef = useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -74,7 +73,7 @@ const StyledBackground = styled.div<{ visible?: boolean }>`
align-items: center;
justify-content: center;
z-index: 200;
background-color: rgb(0 0 0 / 30%);
background-color: ${colors.backgroundDimmed};
width: 100%;
height: 100%;
`;
Expand Down Expand Up @@ -104,7 +103,10 @@ const StyledCloseButton = styled.button`
}
`;

const StyledIconClose = styled(IconModalClose)``;
const StyledIconClose = styled(IconXClose)`
width: 24px;
height: 24px;
`;

const StyledIconCheck = styled(IconModalCheck)`
margin-bottom: 18px;
Expand All @@ -115,10 +117,10 @@ const ModalContent = styled.div`
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
padding: 32px;
@media ${MOBILE_MEDIA_QUERY} {
padding: 80px;
padding: 24px 24px 40px;
}
`;

Expand Down

0 comments on commit bc3e78a

Please sign in to comment.