이벤트 코드 삭제 및 UI 버그 수정 (#817)

* feat: (#816) 이벤트 코드 삭제 * fix: (#816) 파이어폭스에서 게시글 카테고리 및 제목이 중앙정렬되는 문제 해결 * fix: (#816) 사파리에서 지원되지 않는 정규표현식 수정 - 불특정 사파리에서 Invalid regular expression: Invalid group specifier name 오류 - WebKit 기반의 브라우저에서 정규표현식의 lookbehind를 지원하지 않음 - 해당 로직 수정 * test: 첨부링크 형식 변환 유틸함수 테스트 코드 추가 - []가 삼중인 경우 가장 안쪽 [[]]를 링크태그 변환 * fix: (#816) 파이어폭스에서 알림 툴팁 UI 오류 해결 * fix: (#816) IOS 15버전의 버튼/링크 태그 글씨색 파란색으로 표시 오류 수정 * refactor: (#816) 불필요한 코드 삭제
woowacourse-teams · Oct 25, 2023 · d77dbdb · d77dbdb
1 parent b7b4892
commit d77dbdb
Show file tree

Hide file tree

Showing 13 changed files with 27 additions and 135 deletions.
diff --git a/frontend/__test__/convertTextToUrl.test.ts b/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/ 피카츄',

diff --git a/frontend/src/assets/dangseon-yo.png b/frontend/src/assets/dangseon-yo.png
diff --git a/frontend/src/assets/dangseon.png b/frontend/src/assets/dangseon.png
diff --git a/frontend/src/components/AlarmContainer/style.ts b/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;
 `;
 

diff --git a/frontend/src/components/common/LogoButton/index.tsx b/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>
  );
 }
diff --git a/frontend/src/components/common/ToolTip/style.ts b/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`

diff --git a/frontend/src/components/common/UpButton/index.tsx b/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>
  );
 }
diff --git a/frontend/src/components/common/UpButton/style.ts b/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;
- }
- }`
- : ''};
-`;
diff --git a/frontend/src/components/post/Post/style.ts b/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%;

diff --git a/frontend/src/pages/EventMascot/index.tsx b/frontend/src/pages/EventMascot/index.tsx
diff --git a/frontend/src/pages/EventMascot/style.ts b/frontend/src/pages/EventMascot/style.ts
diff --git a/frontend/src/styles/reset.ts b/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;
 }
 `;
diff --git a/frontend/src/utils/post/convertTextToUrl.ts b/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('');
 };