[chat] epic: geochat 기능을 chat 패키지에 추가합니다.

packages/chat/package.json

@@ -42,14 +42,15 @@
   "dependencies": {
     "@titicaca/color-palette": "workspace:*",
     "@titicaca/core-elements": "workspace:*",
-    "@titicaca/intersection-observer": "workspace:*",
+    "@titicaca/popup": "workspace:*",
     "@titicaca/router": "workspace:*",
     "@titicaca/triple-fallback-action": "workspace:*",
     "@titicaca/triple-web-to-native-interfaces": "1.9.0",
     "@titicaca/type-definitions": "workspace:*",
     "@titicaca/view-utilities": "workspace:*",
     "autolinker": "^4.0.0",
-    "moment": "^2.29.4",
+    "date-fns": "^3.3.1",
+    "react-intersection-observer": "^9.13.1",
     "use-long-press": "^3.2.0"
   },
   "devDependencies": {

packages/chat/src/bubble-container/bubble-container.stories.tsx

@@ -65,7 +65,7 @@ export const ReceivedBubbleContainer = {
         type: 'boolean',
       },
     },
-    profile: {
+    user: {
       control: {
         type: 'object',
       },
@@ -76,12 +76,12 @@ export const ReceivedBubbleContainer = {
     createdAt: new Date(2022, 10, 1).toISOString(),
     unreadCount: null,
     showInfo: true,
-    profile: {
-      imageUrl:
+    user: {
+      photo:
         'https://assets.triple-dev.titicaca-corp.com/images/app-download@2x.png',
       name: '테스트계정',
       userId: 'test',
-      unregister: false,
+      unregistered: false,
     },
   },
 }

packages/chat/src/bubble-container/bubble-container.tsx

@@ -2,6 +2,7 @@ import { PropsWithChildren } from 'react'
 import { Container } from '@titicaca/core-elements'
 
 import { DEFAULT_MESSAGE_ID_PREFIX } from '../chat/constants'
+import { DEFAULT_MAX_USERNAME_LENGTH, formatUsername } from '../utils/profile'
 
 import { BubbleInfo } from './bubble-info'
 import {
@@ -12,12 +13,12 @@ import {
   SendingFailureHandlerContainer,
   Thanks,
 } from './elements'
+import { DeleteIcon, RetryIcon } from './icons'
 
 const CHAT_CONTAINER_STYLES = {
-  marginTop: 20,
   position: 'relative',
-  minHeight: 46,
   width: '100%',
+  userSelect: 'none',
 } as const
 
 interface ContainerBaseProp {
@@ -26,12 +27,20 @@ interface ContainerBaseProp {
   createdAt?: string // Date?
   /** 해당 메시지를 읽지 않은 유저의 수 */
   unreadCount: number | null
-  /** 시간 정보 등의 정보의 노출 여부 */
+  /** 정보 영역 노출 여부 (시간, 안읽음 등) */
   showInfo?: boolean
+  /** 날짜 정보의 노출 여부 */
+  showDateInfo?: boolean
+  /** 시간 정보의 노출 여부 */
+  showTimeInfo?: boolean
   /** 좋아요 정보 */
   thanks?: { count: number; haveMine: boolean }
   /** 좋아요 아이콘 클릭 시 작동하는 함수 */
   onThanksClick?: () => void
+  /** 답장하기 아이콘 클릭 시 작동하는 함수 */
+  onReplyClick?: () => void
+  /** 메세지 ref에 주입되는 callback 함수 */
+  messageRefCallback?: (id: string) => void
 }
 
 type SentBubbleContainerProp = PropsWithChildren<
@@ -50,28 +59,43 @@ function SentBubbleContainer({
   onRetryCancel,
   unreadCount,
   showInfo = true,
+  showDateInfo,
+  showTimeInfo,
   thanks,
   onThanksClick,
+  onReplyClick,
+  messageRefCallback,
   children,
+  ...props
 }: SentBubbleContainerProp) {
   return (
     <Container
       id={`${DEFAULT_MESSAGE_ID_PREFIX}-${id}`}
       css={{ textAlign: 'right', ...CHAT_CONTAINER_STYLES }}
+      ref={() => messageRefCallback?.(id)}
+      {...props}
     >
       <div>
         {!createdAt && onRetry && onRetryCancel ? (
           <SendingFailureHandlerContainer>
-            <RetryButton onClick={onRetry} />
-            <DeleteButton onClick={onRetryCancel} />
+            <RetryButton onClick={onRetry}>
+              <RetryIcon />
+            </RetryButton>
+            <DeleteButton onClick={onRetryCancel}>
+              <DeleteIcon />
+            </DeleteButton>
           </SendingFailureHandlerContainer>
         ) : null}
 
         {createdAt && showInfo ? (
           <BubbleInfo
+            align="right"
             unreadCount={unreadCount}
             date={createdAt}
-            css={{ marginRight: 8, textAlign: 'right' }}
+            showDateInfo={showDateInfo}
+            showTimeInfo={showTimeInfo}
+            onReplyClick={onReplyClick}
+            css={{ marginRight: 4, textAlign: 'right' }}
           />
         ) : null}
 
@@ -99,6 +123,10 @@ type ReceivedBubbleContainerProp = PropsWithChildren<
       userId: string
       unregistered?: boolean
     }
+    /** 프로필 노출 여부 */
+    showProfile?: boolean
+    /** 유저 프로필 클릭 */
+    onUserClick?: (userId: string, unregistered: boolean) => void
   }
 >
 
@@ -108,28 +136,62 @@ function ReceivedBubbleContainer({
   unreadCount,
   createdAt,
   showInfo,
+  showDateInfo,
+  showTimeInfo,
+  showProfile = true,
   thanks,
   onThanksClick,
+  onReplyClick,
+  messageRefCallback,
+  onUserClick,
   children,
+  ...props
 }: ReceivedBubbleContainerProp) {
   return (
     <Container
       id={`${DEFAULT_MESSAGE_ID_PREFIX}-${id}`}
       css={{ ...CHAT_CONTAINER_STYLES }}
+      ref={() => messageRefCallback?.(id)}
+      {...props}
     >
-      <ProfileImage src={user?.photo} />
-      <Container css={{ marginLeft: 50 }}>
-        <ProfileName size="mini" alpha={0.8} margin={{ bottom: 5 }}>
-          {user?.name || ''}
-        </ProfileName>
+      {showProfile ? (
+        <ProfileImage
+          src={
+            user && !user.unregistered && user.photo
+              ? user.photo
+              : 'https://assets.triple.guide/images/ico-default-profile.svg'
+          }
+          onClick={() =>
+            onUserClick && user
+              ? onUserClick(user.userId, user.unregistered || false)
+              : undefined
+          }
+        />
+      ) : null}
+      <Container css={{ marginLeft: 40 }}>
+        {showProfile ? (
+          <ProfileName size="mini" alpha={0.8} margin={{ bottom: 5 }}>
+            {user
+              ? formatUsername({
+                  name: user?.name,
+                  unregistered: user?.unregistered,
+                  maxLength: DEFAULT_MAX_USERNAME_LENGTH,
+                })
+              : ''}
+          </ProfileName>
+        ) : null}
 
         {children}
 
         {createdAt && showInfo ? (
           <BubbleInfo
+            align="left"
             unreadCount={unreadCount}
+            showDateInfo={showDateInfo}
+            showTimeInfo={showTimeInfo}
+            onReplyClick={onReplyClick}
             date={createdAt}
-            css={{ marginLeft: 8, textAlign: 'left' }}
+            css={{ marginLeft: 4, textAlign: 'left' }}
           />
         ) : null}
 

packages/chat/src/bubble-container/bubble-info.tsx

@@ -1,6 +1,10 @@
-import moment from 'moment'
 import styled from 'styled-components'
 import { Container, Text } from '@titicaca/core-elements'
+import { format, setDefaultOptions } from 'date-fns'
+import { ko } from 'date-fns/locale'
+
+import { ReplyMessageIcon } from '../icons/reply-message-icon'
+import { REPLY_BUTTON_DATA_ID } from '../chat/constants'
 
 const BubbleInfoContainer = styled(Container)`
   vertical-align: bottom;
@@ -11,34 +15,63 @@ const UnreadMessageCountText = styled.div`
   font-size: 10px;
 `
 
-moment.locale('ko')
+const ReplyActionButton = styled.button<{
+  align: 'left' | 'right'
+}>`
+  display: flex;
+  align-items: flex-end;
+  justify-content: ${({ align }) => (align === 'right' ? 'flex-end' : 'auto')};
+  width: 100%;
+  height: 22px;
+  padding-bottom: 3px;
+  cursor: pointer;
+`
+
+setDefaultOptions({ locale: ko })
 
 export function BubbleInfo({
+  align,
   unreadCount,
   date,
+  showTimeInfo = true,
+  showDateInfo = false,
+  onReplyClick,
   ...props
 }: {
+  align: 'left' | 'right'
   unreadCount: number | null
   date: string
+  showTimeInfo?: boolean
+  showDateInfo?: boolean
+  onReplyClick?: () => void
 }) {
-  const showDate = !moment().isSame(date, 'day')
-  const showYear = !moment().isSame(date, 'year')
-
   return (
     <BubbleInfoContainer position="relative" display="inline-block" {...props}>
+      {onReplyClick ? (
+        <ReplyActionButton
+          align={align}
+          onClick={onReplyClick}
+          data-id={REPLY_BUTTON_DATA_ID}
+        >
+          <ReplyMessageIcon />
+        </ReplyActionButton>
+      ) : null}
+
       {unreadCount ? (
         <UnreadMessageCountText>{unreadCount}</UnreadMessageCountText>
       ) : null}
 
-      {showDate ? (
+      {showDateInfo ? (
         <Text size={10} alpha={0.51}>
-          {moment(date).format(showYear ? 'YYYY.MM.DD' : 'MM.DD')}
+          {format(new Date(date), 'MM.dd')}
         </Text>
       ) : null}
 
-      <Text size={10} alpha={0.51}>
-        {moment(date).format('A hh:mm')}
-      </Text>
+      {showTimeInfo ? (
+        <Text size={10} alpha={0.51}>
+          {format(new Date(date), 'a h:mm')}
+        </Text>
+      ) : null}
     </BubbleInfoContainer>
   )
 }

packages/chat/src/bubble-container/elements.tsx

@@ -6,13 +6,16 @@ export const HiddenElement = styled.div`
 `
 
 export const ProfileImage = styled.img`
-  width: 36px;
-  height: 36px;
-  border-radius: 26.8px;
+  width: 32px;
+  height: 32px;
+  border-radius: 32px;
+  box-shadow: rgba(0, 0, 0, 0.02) 0 0 0 1px;
+  outline-offset: -1px;
   float: left;
 `
 
 export const ProfileName = styled(Text)`
+  font-size: 11px;
   font-weight: 600;
 `
 
@@ -41,15 +44,13 @@ export const RetryButton = styled.button`
   ${sendingFailureHandlerStyle};
 
   width: 23.5px;
-  background-image: url('https://assets.triple.guide/images/btn-message-resend@3x.png');
 `
 
 export const DeleteButton = styled.button`
   ${sendingFailureHandlerStyle};
 
   width: 24.5px;
   border-left: 1px solid rgba(255, 255, 255, 0.3);
-  background-image: url('https://assets.triple.guide/images/btn-message-delete@3x.png');
 `
 
 const ThanksButton = styled(Button)<{ haveMine: boolean }>`

packages/chat/src/bubble-container/icons.tsx

@@ -0,0 +1,52 @@
+export function RetryIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.1765 9.09523C10.4332 10.6599 8.83833 11.7417 6.99083 11.7417C4.43302 11.7417 2.3595 9.66818 2.3595 7.11037C2.3595 4.55256 4.43302 2.47905 6.99083 2.47905C8.96589 2.47905 10.6522 3.71537 11.3181 5.45633"
+        stroke="white"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+      />
+      <path
+        d="M9.73587 5.33219L11.7016 5.60706L11.9765 3.64133"
+        stroke="white"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function DeleteIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.047 11L7 7.024L3 3"
+        stroke="white"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.953 11L7 7.024L11 3"
+        stroke="white"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}