fix: backdrop 추가하여 클릭하면 이모지 설정 BS 닫히도록 수정

src/common/service/useChangeEmoji.tsx

@@ -18,7 +18,7 @@ const useChangeEmoji = () => {
     closeEmojiBS();
   };
 
-  return { emoji, onChangeEmoji, setEmojiBSOpen, isEmojiBSOpen };
+  return { emoji, isEmojiBSOpen, onChangeEmoji, setEmojiBSOpen, closeEmojiBS };
 };
 
 export default useChangeEmoji;

src/common/ui/Emoji.tsx

@@ -11,8 +11,13 @@ interface EmojiProps {
 
 const Emoji = ({ emoji, onClickEmoji }: EmojiProps) => {
   return (
-    <UserEmojiEdit onClick={onClickEmoji}>
-      <UserBox>
+    <UserEmojiEdit>
+      <UserBox
+        onClick={(e) => {
+          e.stopPropagation();
+          onClickEmoji();
+        }}
+      >
         <Text.Span fontSize={getRem(48)}>{emoji}</Text.Span>
         <EditIcon>
           <Icon name="pencil" size="xs" />

src/pages/UserInfoPage.tsx

@@ -16,7 +16,7 @@ const UserInfoPage = ({ mode }: UserCreatePageProps) => {
   const [nickname, onChangeElementNickname, onChangeNickname] =
     useHandleInput();
 
-  const { emoji, isEmojiBSOpen, onChangeEmoji, setEmojiBSOpen } =
+  const { emoji, isEmojiBSOpen, onChangeEmoji, setEmojiBSOpen, closeEmojiBS } =
     useChangeEmoji();
 
   // TODO : 이게 최선의 방법인지 고민해보기
@@ -69,20 +69,17 @@ const UserInfoPage = ({ mode }: UserCreatePageProps) => {
     });
   };
 
-  // TODO : FIREBASE 연동 후 수정
-  const email = '[email protected]';
-
   return (
     <UserProfileInfo
       emoji={emoji}
       name={name}
-      email={email}
       nickname={nickname}
       isEmojiBSOpen={isEmojiBSOpen}
       buttonDisabled={disabled}
       mode={mode}
       onChangeEmoji={onChangeEmoji}
       setEmojiBSOpen={setEmojiBSOpen}
+      closeEmojiBS={closeEmojiBS}
       onChangeName={onChangeElementName}
       onChangeNickname={onChangeElementNickname}
       onSubmit={onSubmitUserInfo}

src/user/ui/UserProfileInfo.tsx

@@ -9,13 +9,13 @@ import { FormEvent } from 'react';
 
 interface UserProfileInfoProps {
   emoji: string;
-  email: string;
   name: string;
   nickname: string;
   isEmojiBSOpen: boolean;
   buttonDisabled: boolean;
   mode: Mode;
   setEmojiBSOpen: () => void;
+  closeEmojiBS: () => void;
   onChangeEmoji: (emoji: string) => void;
   onChangeName: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onChangeNickname: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -24,13 +24,13 @@ interface UserProfileInfoProps {
 
 const UserProfileInfo = ({
   emoji,
-  email,
   name,
   nickname,
   isEmojiBSOpen,
   buttonDisabled,
   mode,
   setEmojiBSOpen,
+  closeEmojiBS,
   onChangeEmoji,
   onChangeName,
   onChangeNickname,
@@ -39,25 +39,31 @@ const UserProfileInfo = ({
   return (
     <Form onSubmit={onSubmit}>
       <Header showBackButton={mode === 'EDIT'} />
-      <Emoji emoji={emoji} onClickEmoji={setEmojiBSOpen} />
-      <StyleEditBox>
-        {/* <EditBox name="이메일" value={email} onChange={onChangeName} disabled /> */}
-        <EditBox name="이름" value={name} onChange={onChangeName} isEssential />
-        <EditBox
-          name="닉네임"
-          value={nickname}
-          onChange={onChangeNickname}
-          isEssential
-        />
-      </StyleEditBox>
-      <BottomFixedButton
-        activeButtonColor="lightGreen"
-        buttonColor="buttonGreen"
-        type="submit"
-        disabled={buttonDisabled}
-      >
-        {mode === 'CREATE' ? '회원가입' : '수정하기'}
-      </BottomFixedButton>
+      <EmojiBackDrop onClick={closeEmojiBS}>
+        <Emoji emoji={emoji} onClickEmoji={setEmojiBSOpen} />
+        <StyleEditBox>
+          <EditBox
+            name="이름"
+            value={name}
+            onChange={onChangeName}
+            isEssential
+          />
+          <EditBox
+            name="닉네임"
+            value={nickname}
+            onChange={onChangeNickname}
+            isEssential
+          />
+        </StyleEditBox>
+        <BottomFixedButton
+          activeButtonColor="lightGreen"
+          buttonColor="buttonGreen"
+          type="submit"
+          disabled={buttonDisabled}
+        >
+          {mode === 'CREATE' ? '회원가입' : '수정하기'}
+        </BottomFixedButton>
+      </EmojiBackDrop>
       {isEmojiBSOpen && <EmojiSelect onChangeEmoji={onChangeEmoji} />}
     </Form>
   );
@@ -67,6 +73,13 @@ export default UserProfileInfo;
 
 const Form = styled.form``;
 
+const EmojiBackDrop = styled.div`
+  position: absolute;
+  top: ${getRem(60)};
+  left: 0;
+  width: 100%;
+`;
+
 const StyleEditBox = styled.div`
   display: flex;
   margin-top: ${getRem(20)};