[FLOW-14] feat: message component added, component folder revised

src/components/chat/Message.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+type AvatarProps = {
+  imageUrl: string;
+  altText: string;
+};
+
+const Avatar: React.FC<AvatarProps> = ({ imageUrl, altText }) => {
+  return (
+    <div className="w-[35px] h-[35px] relative">
+      <div className="w-[35px] h-[35.51px] left-0 top-0 absolute rounded-full bg-gray-500" />
+      <img
+        className="w-[31px] h-[30.94px] left-[2px] top-[2.03px] absolute rounded-full"
+        src={imageUrl}
+        alt={altText}
+      />
+    </div>
+  );
+};
+
+type MessageHeaderProps = {
+  username: string;
+  timestamp: string;
+};
+
+const MessageHeader: React.FC<MessageHeaderProps> = ({ username, timestamp }) => {
+  return (
+    <div className="justify-start items-end gap-1.5 inline-flex">
+      <div className="text-white text-xs font-semibold font-['Whitney Semibold']">{username}</div>
+      <div className="text-[#72767d] text-[9px] font-medium font-['Whitney']">{timestamp}</div>
+    </div>
+  );
+};
+
+type MessageContentProps = {
+  content: string;
+};
+
+const MessageContent: React.FC<MessageContentProps> = ({ content }) => {
+  return (
+    <div className="justify-start items-start inline-flex">
+      <div className="text-[#dcddde] text-xs font-medium font-['Whitney']">{content}</div>
+    </div>
+  );
+};
+
+type MessageProps = {
+  avatarUrl: string;
+  username: string;
+  timestamp: string;
+  content: string;
+};
+
+const Message: React.FC<MessageProps> = ({ avatarUrl, username, timestamp, content }) => {
+  return (
+    <div className="h-[35px] justify-start items-start gap-[9px] inline-flex">
+      <Avatar imageUrl={avatarUrl} altText="User avatar" />
+      <div className="flex-col justify-start items-start gap-[5px] inline-flex">
+        <MessageHeader username={username} timestamp={timestamp} />
+        <MessageContent content={content} />
+      </div>
+    </div>
+  );
+};
+
+export default Message;

src/components/chat/Reply.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+const MentionIcon: React.FC = () => {
+  return (
+    <svg width="26" height="9" viewBox="0 0 26 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M1 9V6C1 3.23858 3.23858 1 6 1H25.5" stroke="#72767D" />
+    </svg>
+  );
+};
+
+type MentionAvatarProps = {
+  avatarUrl: string;
+};
+
+const MentionAvatar: React.FC<MentionAvatarProps> = ({ avatarUrl }) => {
+  return (
+    <div className="w-3.5 h-3.5 relative opacity-90">
+      <div className="w-3.5 h-[14.20px] left-0 top-0 absolute rounded-full bg-gray-500" />
+      <img className="w-[12.40px] h-[12.38px] left-[0.80px] top-[0.81px] absolute rounded-full" src={avatarUrl} alt="Mention avatar" />
+    </div>
+  );
+};
+
+type MentionTextProps = {
+  username: string;
+  message: string;
+};
+
+const MentionText: React.FC<MentionTextProps> = ({ username, message }) => {
+  return (
+    <div className="justify-start items-end gap-[3px] flex">
+      <div className="opacity-80 text-white text-[10px] font-bold font-['Whitney']">@{username}</div>
+      <div className="opacity-50 text-[#dcddde] text-[9px] font-medium font-['Whitney']">{message}</div>
+    </div>
+  );
+};
+
+type MentionMessageProps = {
+  avatarUrl: string;
+  username: string;
+  message: string;
+};
+
+const MentionMessage: React.FC<MentionMessageProps> = ({ avatarUrl, username, message }) => {
+  return (
+    <div className="h-3.5 pl-[18px] pr-px justify-start items-end gap-0.5 inline-flex">
+      <div data-svg-wrapper>
+        <MentionIcon />
+      </div>
+      <div className="justify-start items-center gap-0.5 flex">
+        <MentionAvatar avatarUrl={avatarUrl} />
+        <MentionText username={username} message={message} />
+      </div>
+    </div>
+  );
+};
+
+export default MentionMessage;

tailwind.config.js

@@ -7,12 +7,49 @@ export default {
     './src/App.tsx',
   ],
   theme: {
-    fontSize: {
-      lg: '16px',
-      base: '14px',
-      sm: '12px',
-    },
     extend: {
+      fontFamily: {
+        sans: ["gg sans", "sans-serif"],
+        display: ["ABC Ginto Nord Trial", "sans-serif"],
+        regular: ['gg sans Regular', 'sans-serif'],
+        bold: ['gg sans Bold', 'sans-serif'],
+        medium: ['gg sans Medium', 'sans-serif'],
+        semibold: ['gg sans Semibold', 'sans-serif'],
+        kr: ['NotoSansKR-VariableFont_wght', 'sans-serif'],
+      },
+      fontSize: {
+        "heading-sm": "0.875rem", // 14px
+        "heading-md": "1rem", // 16px
+        "heading-lg": "1.25rem", // 20px
+        "heading-xl": "1.5rem", // 24px
+        "heading-xxl": "2rem", // 32px
+        "text-xxs": "0.625rem", // 10px
+        "text-xs": "0.75rem", // 12px
+        "text-sm": "0.875rem", // 14px
+        "text-md": "1rem", // 16px
+        "text-lg": "1.25rem", // 20px
+        "display-sm": "1.5rem", // 24px
+        "display-md": "2.125rem", // 34px
+        "display-lg": "2.75rem", // 44px
+        lg: '16px',
+        base: '14px',
+        sm: '12px',
+      },
+      fontWeight: {
+        normal: "400",
+        medium: "500",
+        semibold: "600",
+        bold: "700",
+        extrabold: "800",
+        black: "900",
+      },
+      lineHeight: {
+        none: "1",
+        tight: "1.1",
+        snug: "1.2",
+        normal: "1.5",
+        relaxed: "1.75",
+      },
       colors: {
         'wrapper': '#313338',
         'sidebar': '#2E3036',
@@ -21,13 +58,13 @@ export default {
         'des': '#DCDDDE',
         'primary': '#5865F2',
         'panel': '#292b2f',
-      },
-      fontFamily: {
-        regular: ['gg sans Regular', 'sans-serif'],
-        bold: ['gg sans Bold', 'sans-serif'],
-        medium: ['gg sans Medium', 'sans-serif'],
-        semibold: ['gg sans Semibold', 'sans-serif'],
-        kr: ['NotoSansKR-VariableFont_wght', 'sans-serif'],
+        'blurple': '#5865F2', // CMYK 80, 60, 0, 0
+        'green': '#57F287', // CMYK 50, 0, 55, 0
+        'yellow': '#FEE75C', // CMYK 0, 5, 80, 0
+        'fuchsia': '#EB459E', // CMYK 0, 90, 0, 0
+        'red': '#ED4245', // CMYK 0, 90, 65, 0
+        'white': '#FFFFFF', // CMYK 0, 0, 0, 0
+        'black': '#000000', // CMYK 35, 0, 0, 100
       },
       width: {
         'wrapper': '72px',
@@ -37,4 +74,4 @@ export default {
     },
   },
   plugins: [],
-}
+};