🎨 슬랙 관련 하드코딩 스타일들을 tailwind theme으로 추출

fecapark · fecapark · commit 31aaf1b41149 · 2025-04-14T23:07:15.000+09:00
diff --git a/src/app/archives/[channelId]/[threadId]/components/SlackThreadHeadMessageItem.tsx b/src/app/archives/[channelId]/[threadId]/components/SlackThreadHeadMessageItem.tsx
@@ -14,8 +14,8 @@ export const SlackThreadHeadMessageItem = ({
     <>
       <SlackThreadMessageItem message={message} variants="thread-head" />
       <div className="flex items-center gap-3 px-4">
-        <span className="text-[13px] text-[rgba(29,28,29,0.7)]">{messageCount}개의 댓글</span>
-        <div className="h-[1px] grow bg-[rgb(29,28,29,0.13)]" />
+        <span className="text-slack-text-opacity700 text-[13px]">{messageCount}개의 댓글</span>
+        <div className="bg-slack-stroke-decorative h-[1px] grow" />
       </div>
     </>
   )
diff --git a/src/app/archives/[channelId]/components/SlackMessageMenu.tsx b/src/app/archives/[channelId]/components/SlackMessageMenu.tsx
@@ -26,8 +26,7 @@ const menu = tv({
   slots: {
     target:
       'hover:bg-grey200 ease-ease inline-flex cursor-pointer rounded-sm p-2 text-sm transition-colors duration-300',
-    content:
-      'min-w-[160px] rounded-lg border-none bg-white px-1 py-2 shadow-[shadow:rgba(23,23,28,0.05)_0px_2px_10px,rgba(23,23,28,0.05)_0px_2px_60px]',
+    content: 'shadow-menu-overlay min-w-[160px] rounded-lg border-none bg-white px-1 py-2',
     buttonItem:
       'hover:bg-grey100 ease-ease text-text-secondary flex w-full cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold transition-colors duration-300',
   },
@@ -55,7 +54,7 @@ export const SlackMessageMenu = ({
   return (
     <div
       className={clsx(
-        'invisible absolute top-0 right-2 -translate-y-1/2 rounded-sm border border-[rgba(29,28,29,0.13)] bg-white group-hover:visible',
+        'border-slack-stroke-decorative invisible absolute top-0 right-2 -translate-y-1/2 rounded-sm border bg-white group-hover:visible',
         active && 'visible',
         isFirstItem && '!top-1 !-translate-y-0'
       )}
diff --git a/src/app/archives/[channelId]/components/SlackThreadInformation.tsx b/src/app/archives/[channelId]/components/SlackThreadInformation.tsx
@@ -20,7 +20,7 @@ export const SlackThreadInformation = ({
 }: SlackThreadInformationProps) => {
   return (
     <Link href={`/archives/${channelId}/${threadId}`}>
-      <div className="group/link ease-ease mb-1 -ml-1 flex max-w-[600px] items-center justify-between rounded-md border border-transparent p-1 text-[13px] transition-colors duration-300 hover:border hover:border-[rgba(29,28,29,0.13)] hover:bg-white">
+      <div className="group/link ease-ease hover:border-slack-stroke-decorative mb-1 -ml-1 flex max-w-[600px] items-center justify-between rounded-md border border-transparent p-1 text-[13px] transition-colors duration-300 hover:border hover:bg-white">
         <div className="flex items-center">
           <div className="flex items-center">
             {metadata.userAvatars.map((avatar) => (
@@ -34,10 +34,10 @@ export const SlackThreadInformation = ({
               />
             ))}
           </div>
-          <div className="ml-[3px] font-bold text-[rgb(18,100,163)] hover:underline">
+          <div className="text-slack-text-link ml-[3px] font-bold hover:underline">
             {metadata.messagesAmount - 1}개의 댓글
           </div>
-          <div className="ml-2 text-[rgb(97,96,97)]">
+          <div className="text-slack-text-secondary ml-2">
             {formatTemplates['(2024년)? 2월 3일, 오후 10:23'](archivedAt)} 에 아카이브됨
           </div>
         </div>
diff --git a/src/components/ImagePlaceholder/index.tsx b/src/components/ImagePlaceholder/index.tsx
@@ -11,7 +11,7 @@ export const ImagePlaceholder = ({
   return (
     <div
       className={
-        'bg-grey50 inline-block w-full overflow-hidden rounded-lg border border-[rgba(29,28,29,0.13)]'
+        'bg-grey50 border-slack-stroke-decorative inline-block w-full overflow-hidden rounded-lg border'
       }
       style={{ aspectRatio: `${width} / ${height}` }}
     >
diff --git a/src/components/Slack/SlackMessageInput/IconWrapper.tsx b/src/components/Slack/SlackMessageInput/IconWrapper.tsx
@@ -17,7 +17,7 @@ export const IconWrapper = ({
         containerClassName
       )}
     >
-      <div className={clsx('size-4.5 text-[rgba(29,28,29,0.7)]', className)}>{children}</div>
+      <div className={clsx('text-slack-text-opacity700 size-4.5', className)}>{children}</div>
     </div>
   )
 }
diff --git a/src/components/Slack/SlackMessageInput/index.tsx b/src/components/Slack/SlackMessageInput/index.tsx
@@ -26,7 +26,7 @@ export const SlackMessageInput = ({
         paddingTop: commands.length * 60,
       }}
     >
-      <div className="relative w-full rounded-lg border border-[rgba(29,28,29,0.3)]">
+      <div className="border-slack-stroke-decorative relative w-full rounded-lg border">
         {!!commands.length && (
           <SlackMessageInputCommandOverlay>
             {commands.map((props) => (
@@ -37,7 +37,7 @@ export const SlackMessageInput = ({
         <div className="px-3 py-2">{children}</div>
         <div className="flex h-[40px] items-center justify-between pr-1 pl-1.5">
           <div className="flex items-center">
-            <IconWrapper containerClassName="bg-[rgba(29,28,29,0.06)] rounded-full">
+            <IconWrapper containerClassName="bg-slack-button-default rounded-full">
               <IconAdd />
             </IconWrapper>
             <IconWrapper>
@@ -50,7 +50,7 @@ export const SlackMessageInput = ({
               <IconEllipsisHorizontal />
             </IconWrapper>
           </div>
-          <div className="flex h-7 items-center rounded-sm bg-[#007a5a] py-0.5">
+          <div className="bg-slack-submit-primary flex h-7 items-center rounded-sm py-0.5">
             <div className="flex h-full items-center border-r border-white px-2">
               <IconSendFilled className="size-4 text-white" />
             </div>
diff --git a/src/components/Slack/SlackMessageInputCommandOverlay/index.tsx b/src/components/Slack/SlackMessageInputCommandOverlay/index.tsx
@@ -10,7 +10,10 @@ interface CommandItemProps {
 const CommandItem = ({ name, description, selected }: CommandItemProps) => {
   return (
     <div
-      className={clsx('flex h-[60px] w-full items-center', selected && 'bg-[#1264a3] text-white')}
+      className={clsx(
+        'flex h-[60px] w-full items-center',
+        selected && 'bg-slack-command-active text-white'
+      )}
     >
       <div className="flex w-full pl-2">
         <div className="mx-2 mt-1 mb-2.5">
@@ -44,7 +47,7 @@ const CommandItem = ({ name, description, selected }: CommandItemProps) => {
 export const SlackMessageInputCommandOverlay = ({ children }: React.PropsWithChildren<unknown>) => {
   return (
     <div className="absolute top-0.5 -left-1.5 w-full -translate-y-[100%]" data-command-overlay>
-      <div className="w-full max-w-[435px] rounded-lg bg-white py-2 shadow-[shadow:rgba(29,_28,_29,_0.13)_0_0_0_1px,rgba(0,0,0,0.1)_0_4px_12px_0]">
+      <div className="shadow-commands-overlay w-full max-w-[435px] rounded-lg bg-white py-2">
         {children}
       </div>
     </div>
diff --git a/src/components/Slack/SlackMessageItem/components/ReactionTooltipContent.tsx b/src/components/Slack/SlackMessageItem/components/ReactionTooltipContent.tsx
@@ -49,7 +49,7 @@ export const ReactionTooltipContent = ({
       <div className="flex flex-col items-center gap-4">
         {reactionGroup.map((reaction) => (
           <div
-            className="text-center text-[13px] leading-[1.38463] font-bold text-white"
+            className="text-center text-[13px] leading-[18px] font-bold text-white"
             key={reaction.name}
           >
             {getReactionDescription(reaction)} 님이{' '}
diff --git a/src/components/Slack/SlackMessageItem/components/SlackMessageAttachment/SlackMessageAttachmentLayout.tsx b/src/components/Slack/SlackMessageItem/components/SlackMessageAttachment/SlackMessageAttachmentLayout.tsx
@@ -44,7 +44,7 @@ const AttachmentTitleLink = ({
   return (
     <div>
       <Link
-        className="font-bold text-[rgb(18,100,163)] hover:underline"
+        className="text-slack-text-link font-bold hover:underline"
         href={href}
         rel="noopener noreferrer"
         target="_blank"
@@ -62,7 +62,7 @@ const AttachmentText = ({ markdown, children }: AttachmentTextProps) => {
 export const SlackMessageAttachmentLayout = ({ children }: React.PropsWithChildren<unknown>) => {
   return (
     <div className="mb-2 flex max-w-[600px]">
-      <div className="w-1 shrink-0 rounded-md bg-[rgb(221,221,221)]" />
+      <div className="bg-slack-divider-inline w-1 shrink-0 rounded-md" />
       <div className="px-3 text-[15px]">{children}</div>
     </div>
   )
diff --git a/src/components/Slack/SlackMessageItem/components/SlackMessageAttachment/SlackMessageSlackAttachment.tsx b/src/components/Slack/SlackMessageItem/components/SlackMessageAttachment/SlackMessageSlackAttachment.tsx
@@ -17,15 +17,15 @@ export const SlackMessageSlackAttachment = ({ attachment }: SlackMessageSlackAtt
       <SlackMessageAttachmentLayout.Text markdown>
         {attachment.text ?? ''}
       </SlackMessageAttachmentLayout.Text>
-      <div className="flex items-center gap-1 pt-1 text-xs text-[rgb(97,96,97)]">
+      <div className="text-slack-text-secondary flex items-center gap-1 pt-1 text-xs">
         <div>
           {formatTemplates['(2024년)? 2월 3일, 오후 10:23'](
             convertSlackTimestampToISOString(attachment.ts)
           )}
         </div>
-        <div className="text-[rgb(221,221,221)]">{' | '}</div>
+        <div className="text-slack-divider-inline">{' | '}</div>
         <Link
-          className="text-[rgb(18,100,163)] hover:underline"
+          className="text-slack-text-link hover:underline"
           href={attachment.url}
           rel="noopener noreferrer"
           target="_blank"
diff --git a/src/components/Slack/SlackMessageItem/components/SlackMessageAttachment/SlackMessageYoutubeAttachment.tsx b/src/components/Slack/SlackMessageItem/components/SlackMessageAttachment/SlackMessageYoutubeAttachment.tsx
@@ -43,8 +43,8 @@ export const SlackMessageYoutubeAttachment = ({
       <SlackMessageAttachmentLayout.Header imageUrl={attachment.serviceIcon}>
         {attachment.serviceName}
 
-        <span className="font-normal text-[rgb(221,221,221)]">{' | '}</span>
-        <span className="font-normal text-[rgb(97,96,97)]">{attachment.authorName}</span>
+        <span className="text-slack-divider-inline font-normal">{' | '}</span>
+        <span className="text-slack-text-secondary font-normal">{attachment.authorName}</span>
       </SlackMessageAttachmentLayout.Header>
       <SlackMessageAttachmentLayout.TitleLink href={attachment.titleLink}>
         {attachment.title}
diff --git a/src/components/Slack/SlackMessageItem/components/SlackMessageMediaList.tsx b/src/components/Slack/SlackMessageItem/components/SlackMessageMediaList.tsx
@@ -17,7 +17,7 @@ export const SlackMessageMediaList = ({ files }: SlackMessageMediaListProps) =>
 
   return (
     <div>
-      <div className="mb-1 text-[13px] text-[rgba(29,28,29,0.7)]">{fileLabel}</div>
+      <div className="text-slack-text-opacity700 mb-1 text-[13px]">{fileLabel}</div>
       <div className={clsx('flex flex-col', isAllImage && 'flex-row items-center')}>
         {files?.map((file) => {
           const fileType = getFileType(file.mimetype)
diff --git a/src/components/Slack/SlackMessageItem/components/SlackMessageReactionList.tsx b/src/components/Slack/SlackMessageItem/components/SlackMessageReactionList.tsx
@@ -54,7 +54,7 @@ export const SlackMessageReactionList = ({ reactions }: SlackMessageReactionList
           }
           key={reactionGroup.map((v) => v.name).join(',')}
         >
-          <div className="text-grey600 ease-ease flex h-6 cursor-default items-center gap-1 rounded-full bg-[rgba(29,28,29,0.06)] px-2 text-xs transition-shadow duration-300 select-none hover:bg-transparent hover:shadow-[0_0_0_1px_rgb(124,122,127)]">
+          <div className="text-grey600 ease-ease bg-slack-button-default hover:shadow-reactions-hover flex h-6 cursor-default items-center gap-1 rounded-full px-2 text-xs transition-shadow duration-300 select-none hover:bg-transparent">
             {reactionGroup.map(
               (reaction) =>
                 reaction.url && (
@@ -67,7 +67,7 @@ export const SlackMessageReactionList = ({ reactions }: SlackMessageReactionList
                   />
                 )
             )}
-            <span className="text-[rgb(29,28,29)]">
+            <span className="text-slack-text-primary">
               {getReactionGroupTotalCount(reactionGroup)}
             </span>
           </div>
diff --git a/src/components/Slack/SlackMessageItem/index.tsx b/src/components/Slack/SlackMessageItem/index.tsx
@@ -70,7 +70,7 @@ export const SlackMessageItem = ({
   return (
     <div className="flex">
       {isGrouped && (
-        <div className="ease-ease mr-2 h-fit w-9 shrink-0 text-right text-xs leading-[22.0002px] text-[rgb(97,96,97)] opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+        <div className="ease-ease text-slack-text-secondary mr-2 h-fit w-9 shrink-0 text-right text-xs leading-[22px] opacity-0 transition-opacity duration-300 group-hover:opacity-100">
           {formatTemplates['10:00'](convertSlackTimestampToISOString(createdAt))}
         </div>
       )}
@@ -84,14 +84,14 @@ export const SlackMessageItem = ({
       <div className="flex-[1_1_0]">
         {!isGrouped && (
           <div className="-mt-1 flex items-center">
-            <span className="text-[15px] font-bold text-[#1d1c1d]">{username}</span>
+            <span className="text-slack-text-primary text-[15px] font-bold">{username}</span>
             {isBot && (
-              <span className="ml-1 flex h-[14px] items-center rounded-xs bg-[rgba(29,28,29,0.13)] px-[3px] py-[1px] text-[10px] font-bold text-[rgba(29,28,29,0.7)]">
+              <span className="text-slack-text-opacity700 bg-slack-stroke-decorative ml-1 flex h-[14px] items-center rounded-xs px-[3px] py-[1px] text-[10px] font-bold">
                 앱
               </span>
             )}
             &nbsp;&nbsp;
-            <span className="text-xs text-[#616061]">
+            <span className="text-slack-text-secondary text-xs">
               {formatTemplates[createdAtFormat](convertSlackTimestampToISOString(createdAt))}
             </span>
           </div>
diff --git a/src/components/SlackMarkdown/components/Blockquote.tsx b/src/components/SlackMarkdown/components/Blockquote.tsx
@@ -8,9 +8,9 @@ interface BlockquoteProps {
 const blockQuotePseudoElement = tv({
   slots: {
     before:
-      'before:absolute before:top-0 before:left-0 before:mr-[10px] before:block before:h-full before:w-1 before:bg-[rgb(221,221,221)] before:content-[""]',
+      'before:bg-slack-divider-inline before:absolute before:top-0 before:left-0 before:mr-2.5 before:block before:h-full before:w-1 before:content-[""]',
     after:
-      'after:absolute after:top-0 after:left-0 after:ml-[10px] after:block after:h-full after:w-1 after:bg-[rgb(221,221,221)] after:content-[""]',
+      'after:bg-slack-divider-inline after:absolute after:top-0 after:left-0 after:ml-2.5 after:block after:h-full after:w-1 after:content-[""]',
   },
 })
 
diff --git a/src/components/SlackMarkdown/components/Code.tsx b/src/components/SlackMarkdown/components/Code.tsx
@@ -6,7 +6,7 @@ export const Code = ({ className, children, ...props }: React.HTMLAttributes<HTM
       {...props}
       className={clsx(
         className,
-        'm-[1px] h-fit rounded-[3px] border border-[rgba(29,28,29,0.13)] bg-[rgba(29,28,29,0.04)] px-[3px] pt-[2px] pb-[2px] text-xs text-[rgb(192,19,67)]'
+        'border-slack-stroke-decorative bg-slack-codeblock-bg text-slack-text-inline-code m-[1px] h-fit rounded-[3px] border px-[3px] pt-0.5 pb-0.5 text-xs'
       )}
     >
       {children}
diff --git a/src/components/SlackMarkdown/components/CodeBlock.tsx b/src/components/SlackMarkdown/components/CodeBlock.tsx
@@ -1,6 +1,6 @@
 export const CodeBlock = ({ children }: React.PropsWithChildren<unknown>) => {
   return (
-    <pre className="my-1 rounded-sm border border-[rgba(29,28,29,0.13)] bg-[rgba(29,28,29,0.04)] p-2 text-xs whitespace-pre-wrap text-[rgb(29,28,29)]">
+    <pre className="text-slack-text-primary border-slack-stroke-decorative bg-slack-codeblock-bg my-1 rounded-sm border p-2 text-xs whitespace-pre-wrap">
       {children}
     </pre>
   )
diff --git a/src/components/SlackMarkdown/components/InlineEmoji.tsx b/src/components/SlackMarkdown/components/InlineEmoji.tsx
@@ -11,17 +11,17 @@ interface InlineEmojiProps {
 
 const inlineEmoji = tv({
   slots: {
-    container: 'relative inline-block size-[22px] overflow-visible align-top',
+    container: 'relative inline-block size-5.5 overflow-visible align-top',
     image: 'absolute top-1/2 -mt-[11px] overflow-hidden object-contain',
   },
   variants: {
     size: {
       large: {
-        container: 'size-[32px]',
+        container: 'size-8',
         image: '-mt-[16px]',
       },
       medium: {
-        container: 'size-[22px]',
+        container: 'size-5.5',
         image: '-mt-[11px]',
       },
     },
@@ -38,7 +38,7 @@ const TooltipContent = ({ name, url }: { name: string; url: string }) => {
         src={url}
         width={64}
       />
-      <div className="text-center text-[13px] leading-[1.38463] font-bold text-white">:{name}:</div>
+      <div className="text-center text-[13px] leading-[18px] font-bold text-white">:{name}:</div>
     </div>
   )
 }
diff --git a/src/components/SlackMarkdown/components/MdLink.tsx b/src/components/SlackMarkdown/components/MdLink.tsx
@@ -4,7 +4,7 @@ export const MdLink = ({ children, href }: React.PropsWithChildren<{ href: strin
   return (
     <HoverTooltip content={href}>
       <a
-        className="break-all text-[rgb(18,100,163)] hover:underline"
+        className="text-slack-text-link break-all hover:underline"
         href={href}
         rel="noopener noreferrer"
         target="_blank"
diff --git a/src/components/SlackMarkdown/components/MentionSpan.tsx b/src/components/SlackMarkdown/components/MentionSpan.tsx
@@ -9,7 +9,7 @@ export const MentionSpan = ({ children, className, ...props }: Props) => {
       className={clsx(
         className,
         'mention-block',
-        'h-fit w-fit rounded-[3px] bg-[rgba(29,155,209,0.1)] px-1 pb-0.5 text-[rgb(18,100,163)]'
+        'text-slack-text-link bg-slack-mention-bg h-fit w-fit rounded-[3px] px-1 pb-0.5'
       )}
     >
       {children}
diff --git a/src/components/SlackMarkdown/index.tsx b/src/components/SlackMarkdown/index.tsx
@@ -47,7 +47,7 @@ export const SlackMarkdown = ({ children, isEdited }: SlackMarkdownProps) => {
 
   return (
     <div
-      className={`line-height-[22.0002px] text-[15px] text-[#1d1c1d] ${NotoSansKR.className} antialiased`}
+      className={`line-height-[22px] text-slack-text-primary text-[15px] ${NotoSansKR.className} antialiased`}
       style={{
         fontVariantLigatures: 'common-ligatures',
         wordBreak: 'break-word',
@@ -118,7 +118,7 @@ export const SlackMarkdown = ({ children, isEdited }: SlackMarkdownProps) => {
       >
         {children && converts.reduce((acc, convert) => convert(acc), children)}
       </ReactMarkdown>
-      {isEdited && <span className="text-[13px] text-[rgb(134,134,134)]"> (편집됨)</span>}
+      {isEdited && <span className="text-slack-text-tertiary text-[13px]"> (편집됨)</span>}
     </div>
   )
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1,7 +1,9 @@
 @import 'tailwindcss';
+@import './theme.variable.css';
 @import './theme.gen.css';
 @import './transition.css';
 @import './breakpoint.css';
+@import './shadow.css';
 
 @theme {
   --font-pretendard: var(--font-pretendard);
diff --git a/src/styles/shadow.css b/src/styles/shadow.css
@@ -0,0 +1,7 @@
+@import 'tailwindcss';
+
+@theme {
+  --shadow-reactions-hover: 0 0 0 1px rgb(124, 122, 127);
+  --shadow-commands-overlay: rgba(29, 28, 29, 0.13) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 4px 12px 0;
+  --shadow-menu-overlay: rgba(23, 23, 28, 0.05) 0 2px 10px, rgba(23, 23, 28, 0.05) 0px 2px 60px;
+}
diff --git a/src/styles/theme.gen.css b/src/styles/theme.gen.css
@@ -87,4 +87,17 @@
   --color-text-secondary: var(--text-secondary);
   --color-text-disabled: var(--text-disabled);
   --color-yourssu-primary: var(--yourssu-primary);
+  --color-slack-text-primary: var(--slack-text-primary);
+  --color-slack-text-secondary: var(--slack-text-secondary);
+  --color-slack-text-tertiary: var(--slack-text-tertiary);
+  --color-slack-text-opacity700: var(--slack-text-opacity700);
+  --color-slack-text-link: var(--slack-text-link);
+  --color-slack-text-inline-code: var(--slack-text-inline-code);
+  --color-slack-divider-inline: var(--slack-divider-inline);
+  --color-slack-command-active: var(--slack-command-active);
+  --color-slack-submit-primary: var(--slack-submit-primary);
+  --color-slack-mention-bg: var(--slack-mention-bg);
+  --color-slack-stroke-decorative: var(--slack-stroke-decorative);
+  --color-slack-button-default: var(--slack-button-default);
+  --color-slack-codeblock-bg: var(--slack-codeblock-bg);
 }
diff --git a/src/styles/theme.variable.css b/src/styles/theme.variable.css
@@ -91,4 +91,19 @@
   --text-secondary: var(--grey700);
   --text-disabled: var(--grey400);
   --yourssu-primary: #816dec;
+
+  --slack-text-primary: #1d1c1d;
+  --slack-text-secondary: #616061;
+  --slack-text-tertiary: #868686;
+  --slack-text-opacity700: #1d1c1db3;
+  --slack-text-link: #1264a3;
+  --slack-text-inline-code: #c01343;
+
+  --slack-divider-inline: #dddddd;
+  --slack-command-active: #1264a3;
+  --slack-submit-primary: #007a5a;
+  --slack-mention-bg: #1d9bd11a;
+  --slack-stroke-decorative: #1d1c1d21;
+  --slack-button-default: #1d1c1d0f;
+  --slack-codeblock-bg: #1d1c1d0a;
 }

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ export const ImagePlaceholder = ({`
`11`	`11`	`return (`
`12`	`12`	`<div`
`13`	`13`	`className={`
`14`		`- 'bg-grey50 inline-block w-full overflow-hidden rounded-lg border border-[rgba(29,28,29,0.13)]'`
	`14`	`+ 'bg-grey50 border-slack-stroke-decorative inline-block w-full overflow-hidden rounded-lg border'`
`15`	`15`	`}`
`16`	`16`	style={{ aspectRatio: `${width} / ${height}` }}
`17`	`17`	`>`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ export const IconWrapper = ({`
`17`	`17`	`containerClassName`
`18`	`18`	`)}`
`19`	`19`	`>`
`20`		`- <div className={clsx('size-4.5 text-[rgba(29,28,29,0.7)]', className)}>{children}</div>`
	`20`	`+ <div className={clsx('text-slack-text-opacity700 size-4.5', className)}>{children}</div>`
`21`	`21`	`</div>`
`22`	`22`	`)`
`23`	`23`	`}`
Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@ export const ReactionTooltipContent = ({`
`49`	`49`	`<div className="flex flex-col items-center gap-4">`
`50`	`50`	`{reactionGroup.map((reaction) => (`
`51`	`51`	`<div`
`52`		`- className="text-center text-[13px] leading-[1.38463] font-bold text-white"`
	`52`	`+ className="text-center text-[13px] leading-[18px] font-bold text-white"`
`53`	`53`	`key={reaction.name}`
`54`	`54`	`>`
`55`	`55`	`{getReactionDescription(reaction)} 님이{' '}`