🎨Design: ChatModal BackgroundImage

Author: shlee9999

src/assets/dog_howling.svg

@@ -6,6 +6,7 @@ const Message = styled.div`
   border-radius: 12px;
   white-space: pre-line;
   margin: 16px 0;
+  z-index: 1;
 `
 export const IncomingMessage = styled(Message)`
   width: fit-content;

src/components/Message.ts

@@ -11,6 +11,7 @@ export const SendMessageForm = styled.form`
   display: flex;
   align-items: center;
   gap: 12px;
+  z-index: 1;
 `
 export const ChatInput = styled.input`
   flex: 1;

src/components/SendMessageForm/styles.ts

@@ -1,13 +1,24 @@
 import { styled } from 'styled-components'
 import { HEADER_HEIGHT_LG } from '~constants/layout'
+import DogHowling from '~assets/dog_howling.svg'
 
 export const ChatModal = styled.div`
+  position: relative;
   width: 100%;
   height: 100%;
-  background-color: ${({ theme }) => theme.colors.grayscale.gc_4};
   padding: ${HEADER_HEIGHT_LG}px 20px 0;
   background-color: ${({ theme }) => theme.colors.brand.lighten_3};
   overflow: auto;
+  &::after {
+    background: url(${DogHowling}) center/cover;
+    content: '';
+    width: 190px;
+    height: 260px;
+    position: fixed;
+    bottom: 95px;
+    left: 50%;
+    translate: -50%;
+  }
 `
 export const ProfileWrapper = styled.div`
   display: flex;

src/modals/ChatModal/styles.ts

@@ -1,6 +1,7 @@
 import { styled } from 'styled-components'
 
 export const FriendChatList = styled.div`
+  position: relative;
   overflow: auto;
   margin-top: 8px;
   height: 100%;