[Chat refactor] 채팅의 default 네브바와 input ui를 추가합니다.

packages/chat/src/index.ts

@@ -3,3 +3,5 @@ export * from './bubbles'
 export * as ChatBubble from './chat-bubble'
 export * from './chat'
 export * from './utils'
+export * from './navbar'
+export * from './input-area'

packages/chat/src/input-area/elements.ts

@@ -0,0 +1,72 @@
+import styled from 'styled-components'
+import { Container } from '@titicaca/core-elements'
+
+export const MainContainer = styled(Container)`
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+  border-top: 1px solid var(--color-gray100);
+  padding: 10px 12px;
+  background-color: var(--color-white);
+`
+
+export const InputArea = styled(Container)`
+  display: flex;
+  align-items: flex-end;
+  gap: 20px;
+  width: 100%;
+  border-radius: 15px;
+  border: 1px solid var(--color-gray100);
+  background-color: var(--color-gray20);
+  padding: 10px 15px;
+`
+
+export const UploadImageButton = styled.label`
+  width: 26px;
+  height: 26px;
+  margin-bottom: 8px;
+  background: url('https://assets.triple.guide/images/[email protected]')
+    no-repeat 0 0;
+  background-size: 26px 26px;
+`
+
+export const FileInput = styled.input`
+  position: absolute;
+  visibility: hidden;
+  width: 260px;
+`
+
+export const TextArea = styled.textarea`
+  width: 100%;
+  height: 20px;
+  min-height: 20px;
+  color: var(--color-black);
+  font-size: 15px;
+  background-color: transparent;
+  overflow-y: scroll;
+  line-height: 20px;
+  resize: none;
+  border: none;
+  outline: none;
+  box-shadow: none;
+
+  ::placeholder {
+    color: var(--color-gray300);
+  }
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`
+
+export const SendMessageButton = styled.button<{ color?: 'mint' | 'blue' }>`
+  flex-shrink: 0;
+  background: transparent;
+  color: ${({ color }) =>
+    color === 'mint' ? 'var(--color-mint)' : 'var(--color-blue)'};
+  font-size: 15px;
+  font-weight: 700;
+  outline: none;
+`

packages/chat/src/input-area/index.tsx

@@ -0,0 +1,99 @@
+import {
+  ChangeEventHandler,
+  KeyboardEventHandler,
+  SyntheticEvent,
+  useRef,
+} from 'react'
+
+import {
+  FileInput,
+  InputArea,
+  MainContainer,
+  SendMessageButton,
+  TextArea,
+  UploadImageButton,
+} from './elements'
+
+const MIN_TEXTAREA_HEIGHT = 20
+const MAX_TEXTAREA_HEIGHT = 100
+const MAX_TEXT_LENGTH = 2000
+
+export interface InputAreaUIProps {
+  inputValue: string
+  placeholder?: string
+  setInputValue: (value: string) => void
+  onImageUpload: ChangeEventHandler<HTMLInputElement>
+  onSendMessage: () => void
+  onInputClick?: () => void
+  onInputKeydown?: KeyboardEventHandler
+  buttonColor?: 'mint' | 'blue'
+  buttonText?: string
+  buttonDisabled?: boolean
+  maxTextLength?: number
+}
+
+export function InputAreaUI({
+  buttonColor = 'blue',
+  buttonText,
+  buttonDisabled,
+  inputValue,
+  setInputValue,
+  placeholder,
+  onImageUpload,
+  onSendMessage,
+  onInputClick,
+  onInputKeydown,
+  maxTextLength = MAX_TEXT_LENGTH,
+  ...props
+}: InputAreaUIProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  return (
+    <MainContainer {...props}>
+      <UploadImageButton htmlFor="image_upload" />
+      <FileInput
+        id="image_upload"
+        type="file"
+        name="file"
+        multiple={false}
+        onChange={onImageUpload}
+      />
+
+      <InputArea>
+        <TextArea
+          value={inputValue}
+          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+            setInputValue(e.target.value)
+            textAreaAutoResize(e)
+          }}
+          onKeyDown={onInputKeydown}
+          onClick={onInputClick}
+          ref={textareaRef}
+          placeholder={placeholder}
+          maxLength={maxTextLength}
+        />
+        <SendMessageButton
+          color={buttonColor}
+          onClick={async () => {
+            if (inputValue.trim().length > 0) {
+              if (textareaRef.current) {
+                textareaRef.current.style.height = `${MIN_TEXTAREA_HEIGHT}px`
+              }
+              onSendMessage()
+            }
+          }}
+          disabled={buttonDisabled}
+        >
+          {buttonText || '보내기'}
+        </SendMessageButton>
+      </InputArea>
+    </MainContainer>
+  )
+}
+
+function textAreaAutoResize(e: SyntheticEvent) {
+  const textareaElement = e.target as HTMLTextAreaElement
+  textareaElement.style.height = ''
+  textareaElement.style.height =
+    Math.min(textareaElement.scrollHeight, MAX_TEXTAREA_HEIGHT) + 'px'
+}

packages/chat/src/input-area/input-area.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryFn } from '@storybook/react'
+
+import { InputAreaUI, InputAreaUIProps } from './index'
+
+export default {
+  title: 'chat / InputArea',
+  component: InputAreaUI,
+  argTypes: {},
+} as Meta<typeof InputAreaUI>
+
+const Template: StoryFn<InputAreaUIProps> = (args) => <InputAreaUI {...args} />
+
+export const Default = {
+  render: Template,
+
+  args: {
+    placeholder: '문의 내용을 입력하세요',
+    inputValue: '',
+    setInputValue: () => {},
+    onImageUpload: () => {},
+    onSendMessage: () => {},
+  },
+}

packages/chat/src/navbar/index.tsx

@@ -0,0 +1,63 @@
+import { PropsWithChildren } from 'react'
+import { Navbar } from '@titicaca/core-elements'
+
+export enum NavbarItemType {
+  BACK = 'back',
+  MORE = 'more',
+}
+
+export interface NavbarItem {
+  type: NavbarItemType
+  onClick: () => void
+}
+
+export interface ChatNavbarUIProps {
+  title: JSX.Element
+  items?: NavbarItem[]
+}
+
+export function ChatNavbarUI({
+  title,
+  items,
+  children,
+  ...props
+}: PropsWithChildren<ChatNavbarUIProps>) {
+  const isTextTitle = typeof title === 'string'
+
+  return (
+    <Navbar
+      position="fixed"
+      title={isTextTitle ? title : undefined}
+      renderTitle={isTextTitle ? undefined : () => title}
+      {...props}
+    >
+      {items
+        ? items.map(({ type, ...props }) => {
+            switch (type) {
+              case NavbarItemType.BACK:
+                return (
+                  <Navbar.Item
+                    key={NavbarItemType.BACK}
+                    floated="left"
+                    icon="back"
+                    {...props}
+                  />
+                )
+              case NavbarItemType.MORE:
+                return (
+                  <Navbar.Item
+                    key={NavbarItemType.MORE}
+                    floated="right"
+                    icon="more"
+                    {...props}
+                  />
+                )
+              default:
+                return null
+            }
+          })
+        : null}
+      {children}
+    </Navbar>
+  )
+}

packages/chat/src/navbar/navbar.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryFn } from '@storybook/react'
+
+import { ChatNavbarUI, ChatNavbarUIProps, NavbarItemType } from './index'
+
+export default {
+  title: 'chat / ChatNavbar',
+  component: ChatNavbarUI,
+} as Meta<typeof ChatNavbarUI>
+
+const Template: StoryFn<ChatNavbarUIProps> = (args) => (
+  <ChatNavbarUI {...args} />
+)
+
+export const Default = {
+  render: Template,
+
+  args: {
+    title: '1:1 문의',
+    items: [
+      { type: NavbarItemType.BACK, onClick: () => {} },
+      { type: NavbarItemType.MORE, onClick: () => {} },
+    ],
+  },
+}