이벤트 코드 삭제 및 UI 버그 수정

frontend/__test__/convertTextToUrl.test.ts

@@ -6,7 +6,8 @@ test.each([
     '반갑다 https://github.com/woowacourse-teams/2023-votogether/issues/703    임',
     '반갑다 [[https://github.com/woowacourse-teams/2023-votogether/issues/703]]    임',
   ],
-  ['안녕 wwwww.naver.com', '안녕 wwwww.naver.com'],
+  ['안녕 wwwww.naver.com', '안녕 ww[[www.naver.com]]'],
+  ['하하 [www.naver.com]', '하하 [[[www.naver.com]]]'],
   ['http://localhost:3000/ 피카츄', '[[http://localhost:3000/]] 피카츄'],
   [
     'http://localhost:3000/http://localhost:3000/ 피카츄',

frontend/src/components/AlarmContainer/style.ts

@@ -5,7 +5,6 @@ export const Container = styled.div`
   grid-template-rows: 40px auto;
   gap: 10px;
 
-  height: 100%;
   padding: 10px;
 `;
 

frontend/src/components/common/LogoButton/index.tsx

@@ -1,6 +1,4 @@
-import { ButtonHTMLAttributes, useState } from 'react';
-
-import EventMascot from '@pages/EventMascot';
+import { ButtonHTMLAttributes } from 'react';
 
 import logo from '@assets/logo.svg';
 import votogether from '@assets/projectName.svg';
@@ -31,29 +29,19 @@ interface LogoButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export default function LogoButton({ content, ...rest }: LogoButtonProps) {
   const src = contentCategory[content].url;
   const ariaLabelText = contentCategory[content].name;
-  const [count, setCount] = useState(0);
-
-  //이벤트를 위한 코드
-  const handleLogoClick = () => {
-    if (count > 5) return;
-
-    setCount(count + 1);
-  };
 
   if (content === 'full') {
     return (
       <S.Button content={content} aria-label={ariaLabelText} {...rest}>
-        <img src={logo} alt="로고 아이콘" onClick={handleLogoClick} />
-        {count > 5 && <EventMascot type={'ma'} />}
+        <img src={logo} alt="로고 아이콘" />
         <img src={votogether} alt="보투게더 아이콘" />
       </S.Button>
     );
   }
 
   return (
     <S.Button content={content} aria-label={ariaLabelText} {...rest}>
-      <img src={src} alt="보투게더 아이콘" onClick={handleLogoClick} />
-      {count > 5 && <EventMascot type={'ma'} />}
+      <img src={src} alt="보투게더 아이콘" />
     </S.Button>
   );
 }

frontend/src/components/common/ToolTip/style.ts

@@ -6,7 +6,7 @@ const SIZE = {
   sm: { height: '300px', width: '250px' },
   md: { height: '460px', width: '315px' },
   lg: { height: '740px', width: '420px' },
-  free: { height: '100%', width: '100%' },
+  free: { height: 'fit-content', width: '100%' },
 };
 
 export const Container = styled.div`

frontend/src/components/common/UpButton/index.tsx

@@ -1,31 +1,15 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import chevronUp from '@assets/chevron_up_primary.svg';
-import mascotYo from '@assets/dangseon-yo.png';
 
 import * as S from './style';
 
 interface UpButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
 export default function UpButton({ ...rest }: UpButtonProps) {
-  const [count, setCount] = useState(0);
-
-  //이벤트를 위한 코드
-  const handleLogoClick = () => {
-    if (count > 5) return;
-
-    setCount(count + 1);
-  };
-  const handleClick = () => {
-    setCount(0);
-  };
-
   return (
-    <>
-      <S.Button {...rest}>
-        <img src={chevronUp} alt="페이지 최상단으로 스크롤 올리기" onClick={handleLogoClick} />
-      </S.Button>
-      <S.Image src={mascotYo} onClick={handleClick} $isMoving={count > 5} />
-    </>
+    <S.Button {...rest}>
+      <img src={chevronUp} alt="페이지 최상단으로 스크롤 올리기" />
+    </S.Button>
   );
 }

frontend/src/components/common/UpButton/style.ts

@@ -10,31 +10,3 @@ export const Button = styled.button`
 
   cursor: pointer;
 `;
-
-//이벤트를 위한 코드
-export const Image = styled.img<{ $isMoving: boolean }>`
-  width: 50px;
-  height: 50px;
-
-  position: absolute;
-  right: 13px;
-  bottom: 83px;
-  z-index: -1;
-
-  ${props =>
-    props.$isMoving
-      ? `animation: move 1s linear infinite;
-
-  @keyframes move {
-    0% {
-      right:  13px;
-    }
-    50% {
-      right: 200px;
-    }
-    100% {
-      right:  13px;
-    }
-  }`
-      : ''};
-`;

frontend/src/components/post/Post/style.ts

@@ -99,6 +99,7 @@ export const Content = styled.div<{ $isPreview: boolean }>`
 export const DetailLink = styled.button<{ $isPreview: boolean }>`
   display: flex;
   flex-direction: column;
+  text-align: left;
   gap: 10px;
 
   width: 100%;

frontend/src/styles/reset.ts

@@ -42,6 +42,7 @@ button,
 input,
 select {
   margin: 0;
+  color: black;
 }
 html {
   box-sizing: border-box;
@@ -80,7 +81,7 @@ button{
 }
 
 a{
-  color: inherit;
+  color: black;
   text-decoration: none;
 }
 `;

frontend/src/utils/post/convertTextToUrl.ts

@@ -1,29 +1,18 @@
-/**
- * https://abc.co.kr/@abc/4
- * https://votogether.com/
- * http://localhost:3000/posts/100035
- * http://votogether.com/
- * (?<!\[\[) 는 앞에 [[로 시작하는 지 여부를 확인한다
- * https?:\/\/는 http:// 혹은 https:// 로 시작하는 지 여부를 확인한다.
- * (?!\]\]) 는 뒤에 ]]로 끝나는 지 여부를 확인한다.
- * [^\s] 는 공백이 아닌 문자인지 여부를 확인한다.
- */
-const httpsOrHttpRegex = /(?<!\[\[)(https?:\/\/[^\s]+)(?!\]\])/g;
-
-/**
- * www.naver.com
- * www.tistory.com
- * (?<!\[\[) 는 앞에 [[로 시작하는 지 여부를 확인한다
- * (?<!\/)는 앞에 /로 시작하는 지 여부를 확인한다. https://www 에서 www 앞에 /가 있기에 중복되어 확인하는 것을 방지하기 위함
- * \b(w{3})\b 는 www로 시작하는 지 여부를 정확히 확인한다. w가 4개인 경우 판별하지 않음
- * [^\s] 는 공백이 아닌 문자인지 여부를 확인한다.
- * (?!\]\]) 는 뒤에 ]]로 끝나는 지 여부를 확인한다.
- */
-const wwwRegex = /(?<!\[\[)(?<!\/)\b(w{3})\b[^\s]+(?!\]\])/g;
+// linkRegex: https:// | http:// | www. 뒤에 문자+숫자+특수기호가 이어져있는 정규표현식
+const linkRegex = /(?:https?:\/\/|w{3}\.)+[a-z0-9-+&@#/%?=~_|!:,.;]*[a-z0-9-+&@#/%=~_|]/g;
+// [[ ]]를 표현하는 정규표현식
+const customLinkPattern = /\[\[([^[\]]+)\]\]/g;
 
 export const convertTextToUrl = (text: string) => {
-  const httpOrHttpsConvertedText = text.replace(httpsOrHttpRegex, url => `[[${url}]]`);
-  const wwwConvertedText = httpOrHttpsConvertedText.replace(wwwRegex, url => `[[${url}]]`);
+  //아아[[링크]]다다 = [아아, 링크, 다다];
+  const parts = text.split(customLinkPattern);
+
+  return parts
+    .map(part => {
+      //linkRegex를 포함하지 않는다면 그대로 return
+      if (!linkRegex.test(part)) return part;
 
-  return wwwConvertedText;
+      return part.replace(linkRegex, url => `[[${url}]]`);
+    })
+    .join('');
 };