From 529cc991ebbddaa6470d7ac6ea051d38163e1e6e Mon Sep 17 00:00:00 2001 From: hayoun Date: Mon, 28 Oct 2024 23:53:19 +0900 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20mediaQuery=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/mediaQuery.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/styles/mediaQuery.ts b/src/styles/mediaQuery.ts index 3617dffc0..19780870c 100644 --- a/src/styles/mediaQuery.ts +++ b/src/styles/mediaQuery.ts @@ -1,5 +1,16 @@ export const TABLET_MAX_WIDTH = 1065; export const MOBILE_MAX_WIDTH = 768; - +export const PCTA_BIG_WIDTH=1488; +export const PCTA_MID_WIDTH=1046; +export const PCTA_SM_WIDTH=918; +export const MB_BIG_WIDTH=430; +export const MB_MID_WIDTH=360; +export const MB_SM_WIDTH=320; export const TABLET_MEDIA_QUERY = `screen and (max-width: ${TABLET_MAX_WIDTH}px)`; export const MOBILE_MEDIA_QUERY = `screen and (max-width: ${MOBILE_MAX_WIDTH}px)`; +export const PCTA_BIG_MEDIA_QUERY=`screen and (max-width: ${PCTA_BIG_WIDTH}px)`; +export const PCTA_MID_MEDIA_QUERY=`screen and (max-width: ${PCTA_MID_WIDTH}px)`; +export const PCTA_SM_MEDIA_QUERY=`screen and (max-width: ${PCTA_SM_WIDTH}px)`; +export const MB_BIG_MEDIA_QUERY=`screen and (max-width: ${MB_BIG_WIDTH}px)`; +export const MB_MID_MEDIA_QUERY=`screen and (max-width: ${MB_MID_WIDTH}px)`; +export const MB_SM_MEDIA_QUERY=`screen and (max-width: ${MB_SM_WIDTH}px)`; \ No newline at end of file From a1f57a0e8dd4d87c979d73b5472ab8571da9b3fe Mon Sep 17 00:00:00 2001 From: hayoun Date: Mon, 28 Oct 2024 23:53:37 +0900 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=EC=BB=A4=ED=94=BC=EC=B1=97?= =?UTF-8?q?=EC=9A=A9=20=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=8F=AC=ED=83=88=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CoffeeChatCustomPortalModal.tsx | 134 ++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 src/components/coffeechat/CoffeeChatModal/CoffeeChatCustomPortalModal.tsx diff --git a/src/components/coffeechat/CoffeeChatModal/CoffeeChatCustomPortalModal.tsx b/src/components/coffeechat/CoffeeChatModal/CoffeeChatCustomPortalModal.tsx new file mode 100644 index 000000000..ba29143ce --- /dev/null +++ b/src/components/coffeechat/CoffeeChatModal/CoffeeChatCustomPortalModal.tsx @@ -0,0 +1,134 @@ +import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; +import FocusTrap from 'focus-trap-react'; +import { FC, HTMLAttributes, PropsWithChildren, ReactNode, useRef } from 'react'; +import { RemoveScroll } from 'react-remove-scroll'; + +import Portal from '@/components/common/Portal'; +import { useEscapeCallback } from '@/hooks/useEscapeCallback'; +import useOnClickOutside from '@/hooks/useOnClickOutside'; +import IconModalCheck from '@/public/icons/icon-modal-check.svg'; +import IconModalClose from '@/public/icons/icon-modal-close.svg'; +import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; +import { textStyles } from '@/styles/typography'; + +/** + * @deprecated MessageModal 만을 위한 임시 모달 입니다. 모바일 화면에 대응하기 위해 임시로 사용돼요. + */ +export interface ModalProps extends PropsWithChildren> { + confirmIcon?: boolean; + title?: string; + content?: ReactNode; + isOpen?: boolean; + width?: number; + className?: string; + onClose?: () => void; +} + + + +const Modal: FC = (props) => { + const { confirmIcon, children, title = '', content, isOpen, onClose, width, ...restProps } = props; + const modalRef = useRef(null); + + useEscapeCallback({ + callback: onClose, + }); + + useOnClickOutside(modalRef, onClose); + + if (!isOpen) { + return null; + } + + return ( + + + + + + + + + + {confirmIcon && } + {title && {title}} + {content && {content}} + {children} + + + + + + + ); +}; + +export default Modal; + +const StyledBackground = styled.div<{ visible?: boolean }>` + display: flex; + position: fixed; + top: 0; + left: 0; + align-items: center; + justify-content: center; + z-index: 200; + background-color: rgb(0 0 0 / 30%); + width: 100%; + height: 100%; +`; + +const StyledModal = styled.div<{ width?: number }>` + position: relative; + z-index: 101; + border-radius: 22.94px; + background: ${colors.gray800}; + width: ${({ width }) => width ?? 450}px; + color: ${colors.gray10}; +`; + +const StyledCloseButton = styled.button` + display: flex; + position: absolute; + top: 32px; + right: 32px; + align-items: center; + justify-content: center; + cursor: pointer; + padding: 4px; + + @media ${MOBILE_MEDIA_QUERY} { + top: 24px; + right: 20px; + } +`; + +const StyledIconClose = styled(IconModalClose)``; + +const StyledIconCheck = styled(IconModalCheck)` + margin-bottom: 18px; +`; + +const ModalContent = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 0; + + @media ${MOBILE_MEDIA_QUERY} { + padding: 0; + } +`; + +const StyledTitle = styled.h1` + ${textStyles.SUIT_24_B} +`; + +const StyledContent = styled.div` + margin-top: 18px; + color: ${colors.gray200}; + + ${textStyles.SUIT_18_M}; +`; From ca1f4b92487804c7553dbf9824344d84f1ac3ea0 Mon Sep 17 00:00:00 2001 From: hayoun Date: Mon, 28 Oct 2024 23:54:14 +0900 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20=EC=BB=A4=ED=94=BC=EC=B1=97=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/icon_coffeechat.svg | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 public/icons/icon_coffeechat.svg diff --git a/public/icons/icon_coffeechat.svg b/public/icons/icon_coffeechat.svg new file mode 100644 index 000000000..7da4ced10 --- /dev/null +++ b/public/icons/icon_coffeechat.svg @@ -0,0 +1,7 @@ + + + + + + + From 133b15e8003bb5101e4e79bca526da9289a68869 Mon Sep 17 00:00:00 2001 From: hayoun Date: Tue, 29 Oct 2024 00:19:24 +0900 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20CoffeeChat=20=EC=8B=A0=EC=B2=AD?= =?UTF-8?q?=20=EB=AA=A8=EB=8B=AC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CoffeeChatCustomPortalModal.tsx | 2 +- .../CoffeeChatModal/CoffeeChatModal.tsx | 235 ++++++++++++++++++ 2 files changed, 236 insertions(+), 1 deletion(-) create mode 100644 src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx diff --git a/src/components/coffeechat/CoffeeChatModal/CoffeeChatCustomPortalModal.tsx b/src/components/coffeechat/CoffeeChatModal/CoffeeChatCustomPortalModal.tsx index ba29143ce..9423d677c 100644 --- a/src/components/coffeechat/CoffeeChatModal/CoffeeChatCustomPortalModal.tsx +++ b/src/components/coffeechat/CoffeeChatModal/CoffeeChatCustomPortalModal.tsx @@ -13,7 +13,7 @@ import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; /** - * @deprecated MessageModal 만을 위한 임시 모달 입니다. 모바일 화면에 대응하기 위해 임시로 사용돼요. + * @deprecated CoffeeChatMessageModal 만을 위한 임시 모달 입니다. 모바일 화면에 대응하기 위해 임시로 사용돼요. */ export interface ModalProps extends PropsWithChildren> { confirmIcon?: boolean; diff --git a/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx b/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx new file mode 100644 index 000000000..3769e16cf --- /dev/null +++ b/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx @@ -0,0 +1,235 @@ +import styled from '@emotion/styled'; +import { yupResolver } from '@hookform/resolvers/yup'; +import { colors } from '@sopt-makers/colors'; +import { fonts } from '@sopt-makers/fonts'; +import ProfileIcon from 'public/icons/icon-profile.svg'; +import { FC, useState } from 'react'; +import { useForm } from 'react-hook-form'; +import * as yup from 'yup'; + +import { usePostMemberMessageMutation } from '@/api/endpoint_LEGACY/hooks'; +import { PHONE_REGEX_SHORT } from '@/components/auth/register/verify/regex'; +import Modal from '@/components/coffeechat/CoffeeChatModal/CoffeeChatCustomPortalModal'; +import RHFControllerFormItem from '@/components/common/form/RHFControllerFormItem'; +import Input from '@/components/common/Input'; +import Loading from '@/components/common/Loading'; +import useAlert from '@/components/common/Modal/useAlert'; +import useCustomConfirm from '@/components/common/Modal/useCustomConfirm'; +import Responsive from '@/components/common/Responsive'; +import Text from '@/components/common/Text'; +import TextArea from '@/components/common/TextArea'; +import { MB_BIG_MEDIA_QUERY,MB_MID_MEDIA_QUERY,MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; +import { zIndex } from '@/styles/zIndex'; + + + +const schema = yup.object().shape({ + phone: yup.string() + .nullable() + .required('연락처를 입력해주세요.') + .matches(PHONE_REGEX_SHORT, "'-'없이 입력해주세요"), + content: yup.string().required('내용을 입력해주세요.').max(500, '500자 이내로 입력해주세요.'), +}); + +const COFFEECHAT_PLACEHOLDER = + `ex. 안녕하세요, 커리어 전환을 고민 중인 PM 원하연이라고 합니다.  +\n +1. 최근 주변 PM들의 넥스트 커리어는 어떻게 되는지 궁금합니다.`; + +interface MessageForm { + phone: string; + content: string; +} + +interface MessageModalProps { + phone: string; + name: string; + receiverId: string; +} + +const MessageModal: FC = ({ + receiverId, + phone, + name, + ...props +}) => { + + const { + handleSubmit, + control, + formState: { isValid: _isValid }, + } = useForm({ + resolver: yupResolver(schema), + mode: 'onChange', + }); + const isValid = _isValid; + const { mutateAsync, isPending } = usePostMemberMessageMutation(); + const { alert } = useAlert(); + const { confirm, ConfirmComponent } = useCustomConfirm(); + + + const submit = async ({ content, phone }: MessageForm) => { + if(isPending){ + return; + } + const result = await confirm({ + title: '커피챗 제안을 보내시겠습니까?', + description: '작성하신 내용은 상대방에게 문자로 전달돼요. 한번 보낸 커피챗 제안은 취소할 수 없어요.', + okButtonColor: colors.white, + okButtonTextColor: colors.black, + okButtonText: '보내기', + cancelButtonText: '취소', + zIndex: zIndex.헤더+102, + width: 400, + }); + try { + if (result) { + await mutateAsync({ + senderPhone: phone, + content, + receiverId, + category:"커피챗" + }); + await alert({ + title: '쪽지 보내기', + description: '성공적으로 전송되었어요!', + zIndex:zIndex.헤더+103 + }); + } + } catch (error) { + throw error; + } + }; + + return ( + + + + + 커피챗 제안하기 + + + 작성하신 내용은 회원님의 프로필과 함께 문자로 전달돼요 + 작성하신 내용은
회원님의 프로필과 함께 문자로 전달돼요 + + + + 회신 받을 본인 연락처 * + + + + + + 무엇이 궁금하신가요? * + + + + + + + + {isPending ? ( + + ) : ( + + 커피챗 제안 보내기 + + )} + + + {ConfirmComponent} + + ); +}; + +export default MessageModal; + +const StyledModal = styled(Modal)` + + max-height: 100vh; + overflow-y: auto; + padding: 32px 32px 48px 32px; + width: 588px; + margin-top:143px; + margin-bottom:143px; + + @supports (height: 100dvh) { + max-height: 100dvh; + } + @media ${MB_BIG_MEDIA_QUERY}{ + width: 100vw; + height:auto; + margin-top:36px; + } + +`; + +const StyledForm = styled.form` + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + height:100%; +`; + +const ProfileImage = styled.img` + border-radius: 20px; + width: 84px; + height: 84px; + object-fit: cover; + margin-top:40px; + @media ${MB_BIG_MEDIA_QUERY} { + border-radius: 20px; + width: 88px; + height: 88px; + } +`; + +const TextWrapper = styled.div` + display: flex; + width: 100%; +`; + +const StyledInput = styled(Input)` + margin-top: 12px; +`; + +const StyledTextArea = styled(TextArea)` + margin-top: 14px; + height: 172px; +`; + +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 InputWrapper=styled.div` +width:100%; +height:184px; + +@media ${MB_BIG_MEDIA_QUERY}{ + height:150px; +} +` +const StyledText=styled(Text)` + ${fonts.LABEL_14_SB}; +` \ No newline at end of file From 59ad2532076b42a3c22d4b7b4cea0aee5300c6fe Mon Sep 17 00:00:00 2001 From: hayoun Date: Tue, 29 Oct 2024 00:19:46 +0900 Subject: [PATCH 05/10] =?UTF-8?q?fix:=20API=20=ED=98=B8=EC=B6=9C=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/endpoint_LEGACY/members/type.ts | 3 ++- src/components/common/Modal/useCustomConfirm.tsx | 7 ++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/api/endpoint_LEGACY/members/type.ts b/src/api/endpoint_LEGACY/members/type.ts index ee3a20741..57c29cb08 100644 --- a/src/api/endpoint_LEGACY/members/type.ts +++ b/src/api/endpoint_LEGACY/members/type.ts @@ -160,7 +160,8 @@ export interface ProfileRequest { export interface PostMemberMessageVariables { receiverId: string; - senderEmail: string; + senderEmail?: string; + senderPhone?:string; category: string; content: string; } diff --git a/src/components/common/Modal/useCustomConfirm.tsx b/src/components/common/Modal/useCustomConfirm.tsx index 984395588..49aa3e8e6 100644 --- a/src/components/common/Modal/useCustomConfirm.tsx +++ b/src/components/common/Modal/useCustomConfirm.tsx @@ -99,6 +99,7 @@ const StyledBackground = styled.div<{ zIndex?: number }>` background: rgb(0 0 0 / 50%); width: 100%; height: 100%; + padding-bottom:20px; `; const StyledModalContainer = styled.div<{ width?: number }>` @@ -107,11 +108,11 @@ const StyledModalContainer = styled.div<{ width?: number }>` box-shadow: 0 4px 6px rgb(0 0 0 / 10%); background: ${colors.gray800}; width: ${({ width }) => width|| 400}px; - height:196px; + height:auto; overflow: hidden; @media ${MOBILE_MEDIA_QUERY} { max-width: 303px; - height:166px; + height:auto; } `; export const StyledModalTitle = styled.h1` @@ -148,7 +149,7 @@ const StyledModalDescription = styled.div` const StyledFooter = styled.div<{ align: 'left' | 'right' | 'stretch'; stack?: 'horizontal' | 'vertical' }>` display: grid; margin-top: 36px; - + ${(props) => props.stack !== 'vertical' && css` From dc3dfa1e15d14c8339b480b42c4a5a78c468889f Mon Sep 17 00:00:00 2001 From: hayoun Date: Tue, 29 Oct 2024 00:21:51 +0900 Subject: [PATCH 06/10] =?UTF-8?q?feat:=20default=20Value=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx b/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx index 3769e16cf..d19ba5ce1 100644 --- a/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx +++ b/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx @@ -121,6 +121,7 @@ const MessageModal: FC = ({ style={{ width: '100%' }} control={control} name='phone' + defaultValue={phone} component={StyledInput} placeholder='연락처를 입력해주세요!' /> From 2f30a84995e0d702645b5a46f0149fc8bc9abdde Mon Sep 17 00:00:00 2001 From: hayoun Date: Tue, 29 Oct 2024 00:28:40 +0900 Subject: [PATCH 07/10] =?UTF-8?q?feat:=20Toast,=20Onclose=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CoffeeChatModal/CoffeeChatModal.tsx | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx b/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx index d19ba5ce1..179a99ad7 100644 --- a/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx +++ b/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx @@ -2,6 +2,7 @@ import styled from '@emotion/styled'; import { yupResolver } from '@hookform/resolvers/yup'; import { colors } from '@sopt-makers/colors'; import { fonts } from '@sopt-makers/fonts'; +import { useToast } from '@sopt-makers/ui'; import ProfileIcon from 'public/icons/icon-profile.svg'; import { FC, useState } from 'react'; import { useForm } from 'react-hook-form'; @@ -64,9 +65,9 @@ const MessageModal: FC = ({ }); const isValid = _isValid; const { mutateAsync, isPending } = usePostMemberMessageMutation(); - const { alert } = useAlert(); - const { confirm, ConfirmComponent } = useCustomConfirm(); + const { confirm, ConfirmComponent } = useCustomConfirm(); + const { open } = useToast(); const submit = async ({ content, phone }: MessageForm) => { if(isPending){ @@ -90,11 +91,16 @@ const MessageModal: FC = ({ receiverId, category:"커피챗" }); - await alert({ - title: '쪽지 보내기', - description: '성공적으로 전송되었어요!', - zIndex:zIndex.헤더+103 - }); + open({ + icon: 'success', + content: '커피챗 제안이 잘 전달되었어요!', + style: { + content: { + whiteSpace: 'pre-wrap', + }, + }, + }); + props.onClose(); } } catch (error) { throw error; From 2c5b3ac3a4c553c2a6fb50849551c6261e7ee3d7 Mon Sep 17 00:00:00 2001 From: hayoun Date: Wed, 30 Oct 2024 22:19:19 +0900 Subject: [PATCH 08/10] =?UTF-8?q?fix:=20=EB=B9=8C=EB=93=9C=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CoffeeChatCustomPortalModal.tsx | 2 +- .../coffeechat/CoffeeChatModal/CoffeeChatModal.tsx | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/coffeechat/CoffeeChatModal/CoffeeChatCustomPortalModal.tsx b/src/components/coffeechat/CoffeeChatModal/CoffeeChatCustomPortalModal.tsx index 9423d677c..d2fab3c4e 100644 --- a/src/components/coffeechat/CoffeeChatModal/CoffeeChatCustomPortalModal.tsx +++ b/src/components/coffeechat/CoffeeChatModal/CoffeeChatCustomPortalModal.tsx @@ -22,7 +22,7 @@ export interface ModalProps extends PropsWithChildren void; + onClose: () => void; } diff --git a/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx b/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx index 179a99ad7..1a25b2b42 100644 --- a/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx +++ b/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx @@ -46,6 +46,7 @@ interface MessageModalProps { phone: string; name: string; receiverId: string; + onClose:()=>void } const MessageModal: FC = ({ @@ -164,21 +165,20 @@ const MessageModal: FC = ({ export default MessageModal; const StyledModal = styled(Modal)` - - max-height: 100vh; - overflow-y: auto; - padding: 32px 32px 48px 32px; - width: 588px; margin-top:143px; margin-bottom:143px; + padding: 32px 32px 48px; + width: 588px; + max-height: 100vh; + overflow-y: auto; @supports (height: 100dvh) { max-height: 100dvh; } @media ${MB_BIG_MEDIA_QUERY}{ + margin-top:36px; width: 100vw; height:auto; - margin-top:36px; } `; @@ -192,11 +192,11 @@ const StyledForm = styled.form` `; const ProfileImage = styled.img` + margin-top:40px; border-radius: 20px; width: 84px; height: 84px; object-fit: cover; - margin-top:40px; @media ${MB_BIG_MEDIA_QUERY} { border-radius: 20px; width: 88px; From e2c17befb5ffca260da2146b4ed0eeeddf45d3b2 Mon Sep 17 00:00:00 2001 From: hayoun Date: Wed, 30 Oct 2024 22:24:03 +0900 Subject: [PATCH 09/10] fix: eslint error --- src/components/common/Modal/useCustomConfirm.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/common/Modal/useCustomConfirm.tsx b/src/components/common/Modal/useCustomConfirm.tsx index 49aa3e8e6..14c8d9a79 100644 --- a/src/components/common/Modal/useCustomConfirm.tsx +++ b/src/components/common/Modal/useCustomConfirm.tsx @@ -97,9 +97,10 @@ const StyledBackground = styled.div<{ zIndex?: number }>` justify-content: center; z-index: ${({ zIndex }) => zIndex || 1000}; background: rgb(0 0 0 / 50%); + padding-bottom:20px; width: 100%; height: 100%; - padding-bottom:20px; + `; const StyledModalContainer = styled.div<{ width?: number }>` From 9adf5e2575917d1b9ec8d7acebc877eb284711e0 Mon Sep 17 00:00:00 2001 From: hayoun Date: Thu, 31 Oct 2024 20:57:47 +0900 Subject: [PATCH 10/10] =?UTF-8?q?fix:=20=EC=BD=94=EB=93=9C=20=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../coffeechat/CoffeeChatCard/index.tsx | 20 +++++++++---------- .../CoffeeChatModal/CoffeeChatModal.tsx | 9 +++------ 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/src/components/coffeechat/CoffeeChatCard/index.tsx b/src/components/coffeechat/CoffeeChatCard/index.tsx index ec809d95f..a5f78e8ca 100644 --- a/src/components/coffeechat/CoffeeChatCard/index.tsx +++ b/src/components/coffeechat/CoffeeChatCard/index.tsx @@ -1,20 +1,20 @@ +import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; - -import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; -import HorizontalScroller from '@/components/common/HorizontalScroller'; -import { Flex } from '@toss/emotion-utils'; import { Tag } from '@sopt-makers/ui'; -import IconCoffee from '@/public/icons/icon-coffee.svg'; -import { useState } from 'react'; -import { MessageModalState } from '@/components/members/main/MemberList'; -import MessageModal, { MessageCategory } from '@/components/members/detail/MessageSection/MessageModal'; +import { Flex } from '@toss/emotion-utils'; +import { m } from 'framer-motion'; import { useRouter } from 'next/router'; import { playgroundLink } from 'playground-common/export'; -import { css } from '@emotion/react'; -import { m } from 'framer-motion'; +import { useState } from 'react'; + +import HorizontalScroller from '@/components/common/HorizontalScroller'; import ResizedImage from '@/components/common/ResizedImage'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; +import MessageModal, { MessageCategory } from '@/components/members/detail/MessageSection/MessageModal'; +import { MessageModalState } from '@/components/members/main/MemberList'; +import IconCoffee from '@/public/icons/icon-coffee.svg'; +import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; interface MentoringCardProps { id: string; diff --git a/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx b/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx index 1a25b2b42..c8ebc1607 100644 --- a/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx +++ b/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx @@ -21,9 +21,6 @@ import Text from '@/components/common/Text'; import TextArea from '@/components/common/TextArea'; import { MB_BIG_MEDIA_QUERY,MB_MID_MEDIA_QUERY,MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { zIndex } from '@/styles/zIndex'; - - - const schema = yup.object().shape({ phone: yup.string() .nullable() @@ -115,13 +112,13 @@ const MessageModal: FC = ({ 커피챗 제안하기 - + 작성하신 내용은 회원님의 프로필과 함께 문자로 전달돼요 작성하신 내용은
회원님의 프로필과 함께 문자로 전달돼요 - 회신 받을 본인 연락처 * + 회신 받을 본인 연락처 * = ({ /> - 무엇이 궁금하신가요? * + 무엇이 궁금하신가요? *