공지사항 Content 링크 처리

apps/user/src/components/notice/NoticeDetailContent/NoticeDetailContent.tsx

@@ -1,7 +1,7 @@
 import { useNoticeDetailQuery } from '@/services/notice/queries';
-import { color } from '@maru/theme';
+import { color, font } from '@maru/theme';
 import { Column, Text } from '@maru/ui';
-import { flex, formatCreatedAt } from '@maru/utils';
+import { convertLink, flex, formatCreatedAt } from '@maru/utils';
 import styled from 'styled-components';
 
 interface Props {
@@ -23,9 +23,7 @@ const NoticeDetailContent = ({ id }: Props) => {
                     </Text>
                 </Column>
             </NoticeHeader>
-            <Text fontType="p2" color={color.gray900}>
-                {noticeDetailData.content}
-            </Text>
+            <Content dangerouslySetInnerHTML={{ __html: convertLink(noticeDetailData.content) }} />
         </StyledNoticeDetailContent>
     ) : null;
 };
@@ -45,3 +43,7 @@ const NoticeHeader = styled.div`
     border-bottom: 1px solid ${color.gray300};
     margin-bottom: 8px;
 `;
+const Content = styled.div`
+    ${font.p2};
+    color: ${color.gray900};
+`;

packages/maru-theme/src/global.ts

@@ -1,5 +1,6 @@
 import { createGlobalStyle } from 'styled-components';
 import { reset } from 'styled-reset';
+import color from './color';
 
 const GlobalStyle = createGlobalStyle`
 ${reset}
@@ -51,6 +52,11 @@ button {
   padding: 0;
   cursor: pointer;
 }
+
+.link {
+  color: ${color.maruDefault};
+  text-decoration: underline;
+}
 `;
 
 export default GlobalStyle;

packages/maru-utils/functions/convertLink.ts

@@ -0,0 +1,7 @@
+const convertLink = (content: string): string => {
+    const pattern = /(https?:\/\/\S+)/g;
+
+    return content.replace(pattern, '<a href="$1" class="link">$1</a>').replace(/\n/g, '<br />');
+};
+
+export default convertLink;

packages/maru-utils/index.ts

@@ -1,7 +1,7 @@
 // function
+export { default as convertLink } from './functions/convertLink';
 export { default as formatCreatedAt } from './functions/formatCreatedAt';
 export { default as formatPostedAt } from './functions/formatPostedAt';
 export { default as formatTime } from './functions/formatTime';
-
 // style
 export { default as flex } from './styles/flex';