feat: 커피챗 상세 페이지 머지

sopt-makers · Nov 1, 2024 · 21efe17 · 21efe17
1 parent 7fc7156
commit 21efe17
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx b/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx
@@ -40,16 +40,14 @@ interface MessageForm {
 }
 
 interface MessageModalProps {
-  phone: string;
-  name: string;
+  phone?: string;
   receiverId: string;
   onClose:()=>void
 }
 
 const MessageModal: FC<MessageModalProps> = ({
   receiverId,
   phone,
-  name,
   ...props
 }) => {
 
@@ -104,11 +102,11 @@ const MessageModal: FC<MessageModalProps> = ({
       throw error;
     }
   };
-
+  
   return (
     <StyledModal isOpen {...props}>
       <StyledForm onSubmit={handleSubmit(submit)}>
-        <ProfileImage src="./icons/icon_coffeechat.svg"/>
+        <ProfileImage src="/icons/icon_coffeechat.svg"/>
         <Text mt={30} typography='SUIT_24_B'>
           커피챗 제안하기
         </Text>
@@ -167,15 +165,16 @@ const StyledModal = styled(Modal)`
   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;
+    margin-top:114px;
     width: 100vw;
     height:auto;
+    overflow-y: auto;
   }
 
 `;

diff --git a/src/components/coffeechat/detail/OpenerProfile/index.tsx b/src/components/coffeechat/detail/OpenerProfile/index.tsx
@@ -6,8 +6,10 @@ import { IconMail } from '@sopt-makers/icons';
 import ProfileIcon from 'public/icons/icon-profile.svg';
 
 import { useGetCoffeechatDetail } from '@/api/endpoint/coffeechat/getCoffeechatDetail';
+import MessageModal from '@/components/coffeechat/CoffeeChatModal/CoffeeChatModal';
 import RegisterCoffeechatButton from '@/components/coffeechat/detail/RegisterCoffeechatButton';
 import ShowCoffeechatToggle from '@/components/coffeechat/detail/ShowCoffeechatToggle';
+import useModalState from '@/components/common/Modal/useModalState';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 
 interface OpenerProfileProps {
@@ -16,9 +18,10 @@ interface OpenerProfileProps {
 
 export default function OpenerProfile({ memberId }: OpenerProfileProps) {
   const { data: openerProfile } = useGetCoffeechatDetail(memberId);
-
+  const { isOpen: isOpenMessageModal, onOpen: onOpenMessageModal, onClose: onCloseMessageModal } = useModalState();
   return (
     <>
+
       {openerProfile && (
         <OpenerProfileSection isMine={!!openerProfile.isMine}>
           <ProfileImageBox>
@@ -52,11 +55,16 @@ export default function OpenerProfile({ memberId }: OpenerProfileProps) {
             ) : (
               <RegisterCoffeechatButton
                 onClick={() => {
-                  console.log('TODO: 커피챗 모달 열기 추가');
+                  onOpenMessageModal()
                 }}
               />
             )}
           </ButtonSection>
+          {isOpenMessageModal&&(
+    <MessageModal
+    receiverId={memberId}
+    onClose={onCloseMessageModal}
+  />)}
         </OpenerProfileSection>
       )}
     </>

diff --git a/src/components/coffeechat/detail/RegisterCoffeechatButton/index.tsx b/src/components/coffeechat/detail/RegisterCoffeechatButton/index.tsx
@@ -10,12 +10,12 @@ export default function RegisterCoffeechatButton({ onClick }: RegisterCoffeechat
   return (
     <div onClick={onClick}>
       <Responsive only='desktop'>
-        <Button size='lg' style={{ float: 'right' }}>
+        <Button size='lg' style={{ cssFloat: 'right',whiteSpace:'nowrap' }}>
           커피챗 제안하기
         </Button>
       </Responsive>
       <Responsive only='mobile'>
-        <Button size='md' style={{ width: '100%' }}>
+        <Button size='md' style={{ width: '100%',whiteSpace:'nowrap'  }}>
           커피챗 제안하기
         </Button>
       </Responsive>