[Style] chatting bubble 컴포넌트 제작 및 소켓 라이브러리 설치

package.json

@@ -13,20 +13,23 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@stomp/stompjs": "^7.0.0",
     "@tanstack/react-query": "^4.36.1",
+    "@types/stompjs": "^2.3.7",
     "axios": "^1.5.1",
     "d3": "^7.8.5",
     "emotion-reset": "^3.0.1",
     "framer-motion": "^10.16.4",
+    "http-proxy-middleware": "^2.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.47.0",
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.16.0",
+    "react-spinners": "^0.13.8",
     "react-toastify": "^9.1.3",
     "zustand": "^4.4.4",
-    "zustand-persist": "^0.4.0",
-    "react-spinners": "^0.13.8"
+    "zustand-persist": "^0.4.0"
   },
   "devDependencies": {
     "@rushstack/eslint-config": "^3.4.1",

setupProxy.ts

@@ -0,0 +1,10 @@
+import { createProxyMiddleware } from 'http-proxy-middleware'
+
+module.exports = (app) => {
+  app.use(
+    createProxyMiddleware('/api/chat-stomp', {
+      target: process.env.VITE_BASE_URL,
+      ws: true,
+    }),
+  )
+}

src/components/common/ChattingText/index.tsx

@@ -0,0 +1,42 @@
+import styled from '@emotion/styled'
+import { type HTMLAttributes, type ReactNode } from 'react'
+
+import { type TextType, theme } from '@/styles/theme'
+/**
+ * @param as Text 컴포넌트의 종류 : 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
+ * @param typo Typo theme 선택
+ * @param color Palette theme 선택
+ */
+
+export interface TextProps extends HTMLAttributes<HTMLDivElement> {
+  as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'
+  typo: TextType['typo']
+  color?: TextType['color']
+  children: ReactNode
+}
+
+export type TextPropsKey = 'typo' | 'color'
+
+export const ChattingText = ({
+  typo = 'Body_16',
+  as = 'h1',
+  color,
+  children,
+  ...props
+}: TextProps) => {
+  return (
+    <StyledText typoKey={typo} as={as} colorKey={color} {...props}>
+      {children}
+    </StyledText>
+  )
+}
+
+const StyledText = styled.span<{
+  typoKey: TextType['typo']
+  colorKey?: TextType['color']
+}>`
+  white-space: pre-wrap;
+  color: ${({ colorKey }) => {
+    return colorKey && theme.palette[colorKey]
+  }};
+`

src/components/common/chattingBubble/index.tsx

@@ -0,0 +1,83 @@
+import styled from '@emotion/styled'
+import { ComponentProps } from 'react'
+
+import { ChattingText } from '@/components/common/ChattingText'
+import { FlexBox } from '@/components/common/Flexbox'
+import { palette } from '@/styles/palette'
+import { type KeyOfPalette, type KeyOfTypo } from '@/styles/theme'
+
+interface ChattingBubbleProps extends ComponentProps<'div'> {
+  isMyChat?: boolean
+  message: string
+  time: string
+  messageTypo?: KeyOfTypo
+  messageColor?: KeyOfPalette
+  timeTypo?: KeyOfTypo
+  timeColor?: KeyOfPalette
+  color?: KeyOfPalette
+}
+
+/**
+ * @param isMychat : 내 채팅인지, 상대방의 채팅인지 여부 / 기본 : false
+ * @param message : 메시지 내용
+ * @param time : 메시지 작성 시간
+ * @param messageType : message에 적용할 typo
+ * @param messageColor: message에 적용시킬 color
+ * @param timeType : time에 적용할 typo
+ * @param timeColor : time에 적용할 color
+ */
+
+const ChattingBubble = ({
+  isMyChat = false,
+  message,
+  time,
+  messageTypo = 'Body_12',
+  messageColor = 'BLACK',
+  timeTypo = 'Caption_11',
+  timeColor = 'GRAY500',
+  ...props
+}: ChattingBubbleProps) => {
+  return (
+    <BubbleContainer
+      justify={'flex-start'}
+      gap={10}
+      fullWidth={true}
+      isMyChat={isMyChat}
+      {...props}
+    >
+      <StyledText isMyChat={isMyChat}>
+        <MessageText typo={'Body_20'} color={messageColor} {...props}>
+          {message}
+        </MessageText>
+      </StyledText>
+      <TimeText typo={'Body_20'} color={timeColor} {...props}>
+        {time}
+      </TimeText>
+    </BubbleContainer>
+  )
+}
+
+const BubbleContainer = styled(FlexBox)<{ isMyChat: boolean }>`
+  justify-content: ${(props) => props.isMyChat && 'flex-end'};
+`
+
+const StyledText = styled.div<{
+  isMyChat: boolean
+}>`
+  border-radius: 10px;
+  background-color: ${palette.WHITE};
+  padding: 7px 12px;
+  word-wrap: break-word;
+  order: ${(props) => (props.isMyChat ? '2' : '1')};
+`
+
+const TimeText = styled(ChattingText)`
+  order: 1;
+  line-height: 150%;
+`
+
+const MessageText = styled(ChattingText)`
+  line-height: 150%;
+`
+
+export default ChattingBubble

tsconfig.json

@@ -6,6 +6,7 @@
     // "typeRoots":["./node_modules/@types","./types"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "types": ["node","vite/client"],
 
     /* Bundler mode */
     "moduleResolution": "bundler",