email bottom

src/entities/common/ui/email-bottom-sheet.tsx

@@ -1,21 +1,36 @@
 import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { motion } from 'framer-motion';
+import { ChangeEvent, useState } from 'react';
 
 export interface EmailBottomSheetProps {
   bottomSheetOn: boolean;
   setBottomSheetOn: (bottomSheetOn: boolean) => void;
-  callPurposeUpdate: () => void;
+  imageSave: boolean;
+  sendEmail: boolean;
+  sendRequest: (email?: string) => void;
 };
 
 export const EmailBottomSheet = ({
   bottomSheetOn,
   setBottomSheetOn,
+  imageSave,
+  sendEmail,
+  sendRequest
 }: EmailBottomSheetProps) => {
-  
+  const [userEmail, setUserEmail] = useState<string>('');
+  const emailList = [
+    {name: 'test1@nicepay.co.kr', value: 'test1@nicepay.co.kr'},
+    {name: 'test2@nicepay.co.kr', value: 'test2@nicepay.co.kr'},
+    {name: 'test3@nicepay.co.kr', value: 'test3@nicepay.co.kr'},
+  ];
   const onClickToClose = () => {
     setBottomSheetOn(false);
   };
+
+  const onClickToRequest = () => {
+    sendRequest(userEmail);
+  };
   
   
   return (
@@ -48,6 +63,7 @@ export const EmailBottomSheet = ({
 
         <div className="bottomsheet-content">
           <div className="email-section">
+            { !!imageSave &&
             <div className="email-label mb-10">
               <div className="mail-icon">
                 <div className="mail-icon-bg"></div>
@@ -58,38 +74,49 @@ export const EmailBottomSheet = ({
               </div>
               <span className="label-text">이미지 저장</span>
             </div>
-            <div className="email-label">
-              <div className="mail-icon">
-                <div className="mail-icon-bg"></div>
-                <img 
-                  src={ IMAGE_ROOT + '/ico_email.svg' } 
-                  alt='메일'
-                />
+            }
+            { !!sendEmail &&
+            <>
+              <div className="email-label">
+                <div className="mail-icon">
+                  <div className="mail-icon-bg"></div>
+                  <img 
+                    src={ IMAGE_ROOT + '/ico_email.svg' } 
+                    alt='메일'
+                  />
+                </div>
+                <span className="label-text">메일로 받기</span>
               </div>
-              <span className="label-text">메일로 받기</span>
-            </div>
-          
-            <div className="email-select">
-              <div className="select-wrapper">
-                <select>
-                  <option>test@nicepay.co.kr</option>
-                  <option>test@nicepay.co.kr</option>
-                  <option>선택2</option>
-                </select>
+              <div className="email-select">
+                <div className="select-wrapper">
+                  <select
+                    value={ userEmail }
+                    onChange={ (e: ChangeEvent<HTMLSelectElement>) => setUserEmail(e.target.value) }
+                  >
+                    {
+                      emailList.map((value, index) => (
+                        <option value={ value.value }>{ value.value }</option>
+                      ))
+                    }
+                  </select>
+                </div>
               </div>
-            </div>
-          
-            <div className="error-message">
-              <p>등록된 메일 정보가 없습니다.<br />이메일 인증정보를 사용자관리 메뉴에서 추가 후 신청하세요.</p>
-            </div>
+              {/*
+              <div className="error-message">
+                <p>등록된 메일 정보가 없습니다.<br />이메일 인증정보를 사용자관리 메뉴에서 추가 후 신청하세요.</p>
+              </div>
+              */}
+            </>
+            }
+            
           </div>
         </div>
 
         <div className="bottomsheet-footer">
           <button
             className="btn-50 btn-blue flex-1" 
-            type="button" 
-            disabled
+            type="button"
+            onClick={ onClickToRequest }
           >신청</button>
         </div>
       </motion.div>