Merge pull request #73 from prgrms-web-devcourse-final-project/41-des…

…ign/chat

[Design] #41  ChatModal

src/App.tsx

@@ -12,7 +12,6 @@ function App() {
   //* 다크모드 확장성 고려
   const [theme, setTheme] = useState(lightTheme)
   const toggleTheme = () => setTheme(prev => (prev === lightTheme ? darkTheme : lightTheme))
-
   return (
     <>
       <HelmetProvider>
@@ -27,9 +26,9 @@ function App() {
           <GlobalStyle />
           <MobileWrapper>
             <RouterProvider router={router} />
+            <ModalContainer />
           </MobileWrapper>
           <PWABadge />
-          <ModalContainer />
         </ThemeProvider>
       </HelmetProvider>
     </>

src/components/Button/CloseButton/styles.ts

@@ -2,9 +2,6 @@ import { styled } from 'styled-components'
 import { MdClose } from 'react-icons/md'
 
 export const CloseButton = styled(MdClose)`
-  position: absolute;
   width: 28px;
   height: 28px;
-  top: 12px;
-  right: 20px;
 `

src/components/Button/PrevButton/styles.ts

@@ -2,10 +2,6 @@ import { styled } from 'styled-components'
 import { GrPrevious } from 'react-icons/gr'
 
 export const PrevButton = styled(GrPrevious)`
-  position: absolute;
-  left: 20px;
-  top: 14px;
   width: 28px;
   height: 28px;
-  z-index: 5;
 `

src/components/Header/index.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react'
+import * as S from './styles'
+import { HeaderType } from '~types/headerType'
+
+type HeaderProps = {
+  prevBtn?: boolean
+  closeBtn?: boolean
+  onClickPrev?: () => void
+  onClickClose?: () => void
+  children: ReactNode
+  type: HeaderType
+}
+
+export default function Header({ onClickPrev, onClickClose, children, type, prevBtn, closeBtn }: HeaderProps) {
+  return (
+    <S.Header $type={type}>
+      {prevBtn ? <S.HeaderPrevBtn onClick={onClickPrev} /> : null}
+      {closeBtn ? <S.HeaderCloseBtn onClick={onClickClose} /> : null}
+      {children}
+    </S.Header>
+  )
+}

src/components/Header/styles.ts

@@ -0,0 +1,31 @@
+import styled from 'styled-components'
+import CloseButton from '~components/Button/CloseButton'
+import PrevButton from '~components/Button/PrevButton'
+import { HEADER_HEIGHT, HEADER_HEIGHT_LG, HEADER_Z_INDEX } from '~constants/layout'
+import { HeaderType } from '~types/headerType'
+
+type HeaderProps = {
+  $type: HeaderType
+}
+
+export const Header = styled.header<HeaderProps>`
+  height: ${({ $type }) => ($type === 'sm' ? HEADER_HEIGHT : HEADER_HEIGHT_LG)}px;
+  position: fixed;
+  padding-left: 20px;
+  padding-right: 20px;
+  background-color: ${({ theme }) => theme.colors.grayscale.gc_4};
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  z-index: ${HEADER_Z_INDEX};
+`
+
+export const HeaderPrevBtn = styled(PrevButton)`
+  margin-right: 8px;
+`
+export const HeaderCloseBtn = styled(CloseButton)`
+  position: absolute;
+  right: 20px;
+`

src/components/Message.ts

@@ -0,0 +1,17 @@
+import { styled } from 'styled-components'
+
+const Message = styled.div`
+  padding: 9.5px 16px;
+  border-radius: 12px;
+  white-space: pre-line;
+  margin: 16px 0;
+`
+export const OutgoingMessage = styled(Message)`
+  margin-left: auto;
+  width: fit-content;
+  background-color: ${({ theme }) => theme.colors.brand.lighten_2};
+`
+export const IncomingMessage = styled(Message)`
+  width: fit-content;
+  background-color: ${({ theme }) => theme.colors.grayscale.gc_4};
+`

src/components/Profile.ts

@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+type ProfileProps = {
+  $size: number
+  $src: string
+}
+export const Profile = styled.div<ProfileProps>`
+  width: ${({ $size }) => $size + 'px'};
+  height: ${({ $size }) => $size + 'px'};
+  background: url(${({ $src }) => $src}) center/cover ${({ theme }) => theme.colors.brand.sub};
+  border-radius: 50%;
+`

src/components/SendMessageForm/index.tsx

@@ -0,0 +1,15 @@
+import { Typo14 } from '~components/Typo'
+import * as S from './styles'
+
+type SendMessageFormProps = React.FormHTMLAttributes<HTMLFormElement>
+
+export default function SendMessageForm({ ...rest }: SendMessageFormProps) {
+  return (
+    <S.SendMessageForm {...rest}>
+      <S.ChatInput placeholder='채팅 내용 입력' />
+      <S.SendBtn>
+        <Typo14 weight='700'>전송</Typo14>
+      </S.SendBtn>
+    </S.SendMessageForm>
+  )
+}

src/components/SendMessageForm/styles.ts

@@ -0,0 +1,24 @@
+import { styled } from 'styled-components'
+
+export const SendMessageForm = styled.form`
+  padding: 20.5px 20px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  height: 64px;
+  width: 100%;
+  background-color: ${({ theme }) => theme.colors.grayscale.gc_4};
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`
+export const ChatInput = styled.input`
+  flex: 1;
+  border: none;
+  font-weight: 500;
+`
+export const SendBtn = styled.button`
+  background-color: ${({ theme }) => theme.colors.brand.lighten_2};
+  padding: 9.5px 16px;
+  border-radius: 32px;
+`

src/components/Separator.ts

@@ -1,8 +1,12 @@
 import { styled } from 'styled-components'
 
-export const Separator = styled.hr`
+type SeparatorProps = {
+  $height: number
+}
+
+export const Separator = styled.hr<SeparatorProps>`
   border: none;
   width: 1px;
-  height: 20px;
+  height: ${({ $height }) => $height + 'px'};
   background-color: ${({ theme }) => theme.colors.grayscale.gc_1};
 `

src/constants/layout.ts

@@ -1,2 +1,5 @@
-export const FOOTER_HEIGHT = 56
 export const HEADER_HEIGHT = 56
+export const HEADER_HEIGHT_LG = 80
+export const HEADER_Z_INDEX = 80
+
+export const FOOTER_HEIGHT = 56