게시글 작성 시 본문 링크 삽입을 하지 않더라도 사용자에게 링크 클릭이 가능하도록 변경 (#706)

* feat: (#703) https | http | www을 판별하는 정규 표현식 구현

* test: (#703) 링크가 포함된 문자를 입력했을 때 문자에서 링크는 [[]]로 감싸서 반환하는 함수 테스트 및 정규표현식 수정

* feat: (#703) 게시글 작성 시 [[ ]] 를 따로 해주지 않고, 렌더링 시 링크에 [[]]로 감싸지도록 적용

* refactor: (#703) 게시글 작성, 댓글 작성 시 링크 넣기 버튼 삭제

* feat: (#703) 링크를 지원할 지 여부를 매개변수로 추가하여 홈에서는 링크를 span으로 렌더되도록 구현

* refactor: (#703) isLinkEnabled early return으로 코드 가독성 향상

* refactor: (#703) 홈에서도 링크에 접속 가능하도록 수정
웹 접근성을 위해 link로 들어가는 태그를 button으로 하여 스페이스바로 진입 가능하도록 함

frontend/__test__/convertTextToUrl.test.ts

@@ -0,0 +1,36 @@
+import { convertTextToUrl } from '@utils/post/convertTextToUrl';
+
+test.each([
+ ['www.naver.com 이걸 어째', '[[www.naver.com]] 이걸 어째'],
+ [
+ '반갑다 https://github.com/woowacourse-teams/2023-votogether/issues/703 임',
+ '반갑다 [[https://github.com/woowacourse-teams/2023-votogether/issues/703]] 임',
+ ],
+ ['안녕 wwwww.naver.com', '안녕 wwwww.naver.com'],
+ ['http://localhost:3000/ 피카츄', '[[http://localhost:3000/]] 피카츄'],
+ [
+ 'http://localhost:3000/http://localhost:3000/ 피카츄',
+ '[[http://localhost:3000/http://localhost:3000/]] 피카츄',
+ ],
+ ['www.naver.com', '[[www.naver.com]]'],
+ ['[[www.naver.com]] www.naver.com', '[[www.naver.com]] [[www.naver.com]]'],
+ [
+ '[[http://localhost:3000/]] http://localhost:3000/',
+ '[[http://localhost:3000/]] [[http://localhost:3000/]]',
+ ],
+ [
+ '[[https://votogether.com/ranking]] https://www.naver.com/',
+ '[[https://votogether.com/ranking]] [[https://www.naver.com/]]',
+ ],
+ [
+ 'www.naver.com www.naver.com www.naver.com https://www.npmjs.com/package/dotenv-webpack',
+ '[[www.naver.com]] [[www.naver.com]] [[www.naver.com]] [[https://www.npmjs.com/package/dotenv-webpack]]',
+ ],
+])(
+ 'convertTextToUrl 함수에서 링크가 포함된 문자를 입력했을 때 문자에서 링크는 [[]]로 감싸서 반환한다.',
+ (word, expectedWord) => {
+ const result = convertTextToUrl(word);
+
+ expect(result).toBe(expectedWord);
+ }
+);

frontend/src/components/PostForm/index.tsx

@@ -101,11 +101,7 @@ export default function PostForm({ data, mutate, isSubmitting }: PostFormProps)
  };
 
  const { text: writingTitle, handleTextChange: handleTitleChange } = useText(title ?? '');
- const {
- text: writingContent,
- handleTextChange: handleContentChange,
- addText: addContent,
- } = useText(content ?? '');
+ const { text: writingContent, handleTextChange: handleContentChange } = useText(content ?? '');
  const multiSelectHook = useMultiSelect(categoryIds ?? [], POST_CATEGORY.MAX_AMOUNT);
 
  const handleDeadlineButtonClick = (option: DeadlineOptionInfo) => {
@@ -128,10 +124,6 @@ export default function PostForm({ data, mutate, isSubmitting }: PostFormProps)
  }
  };
 
- const handleInsertContentLink = () => {
- addContent('[[이 괄호 안에 링크를 작성해주세요]] ');
- };
-
  const handlePostFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  const formData = new FormData();
@@ -223,11 +215,6 @@ export default function PostForm({ data, mutate, isSubmitting }: PostFormProps)
  onPaste={handlePasteImage}
  required
  />
- <S.ContentLinkButtonWrapper>
- <S.Button onClick={handleInsertContentLink} type="button">
- 본문에 링크 넣기
- </S.Button>
- </S.ContentLinkButtonWrapper>
  <S.ContentImagePartWrapper $hasImage={!!contentImageHook.contentImage}>
  <ContentImagePart size="lg" contentImageHook={contentImageHook} />
  </S.ContentImagePartWrapper>

frontend/src/components/comment/CommentList/CommentTextForm/index.tsx

@@ -26,12 +26,7 @@ export default function CommentTextForm({
  initialComment,
  handleCancelClick,
 }: CommentTextFormProps) {
- const {
- text: content,
- handleTextChange,
- resetText,
- addText: addContent,
- } = useText(initialComment.content);
+ const { text: content, handleTextChange, resetText } = useText(initialComment.content);
  const { isToastOpen, openToast, toastMessage } = useToast();
 
  const params = useParams() as { postId: string };
@@ -111,16 +106,6 @@ export default function CommentTextForm({
  </SquareButton>
  </S.ButtonWrapper>
  )}
- <S.ButtonWrapper>
- <SquareButton
- aria-label="댓글에 링크 넣기"
- onClick={() => addContent('[[괄호 안에 링크 작성]] ')}
- theme="blank"
- type="button"
- >
- 링크 넣기
- </SquareButton>
- </S.ButtonWrapper>
  <S.ButtonWrapper>
  <SquareButton
  aria-label="댓글 저장"

frontend/src/components/post/Post/index.tsx

@@ -1,4 +1,5 @@
 import { ForwardedRef, forwardRef, memo, useContext, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { PostInfo } from '@type/post';
 
@@ -33,6 +34,7 @@ const Post = forwardRef(function Post(
  { postInfo, isPreview }: PostProps,
  ref: ForwardedRef<HTMLLIElement>
 ) {
+ const navigate = useNavigate();
  const {
  postId,
  category,
@@ -115,8 +117,14 @@ const Post = forwardRef(function Post(
  return (
  <S.Container as={isPreview ? 'li' : 'div'} ref={ref} $isPreview={isPreview}>
  <S.DetailLink
+ role={isPreview ? 'link' : 'none'}
+ tabIndex={0}
  as={isPreview ? '' : 'main'}
- to={isPreview ? `${PATH.POST}/${postId}` : '#'}
+ onClick={() => {
+ if (!isPreview) return;
+
+ navigate(`${PATH.POST}/${postId}`);
+ }}
  $isPreview={isPreview}
  aria-describedby={
  isPreview

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

@@ -1,5 +1,3 @@
-import { Link } from 'react-router-dom';
-
 import { styled } from 'styled-components';
 
 import { theme } from '@styles/theme';
@@ -83,6 +81,7 @@ export const Content = styled.div<{ $isPreview: boolean }>`
  text-overflow: ellipsis;
  word-break: break-word;
  white-space: pre-wrap;
+ text-align: start;
 
  overflow: hidden;
 
@@ -94,10 +93,12 @@ export const Content = styled.div<{ $isPreview: boolean }>`
  }
 `;
 
-export const DetailLink = styled(Link)<{ $isPreview: boolean }>`
+export const DetailLink = styled.button<{ $isPreview: boolean }>`
  display: flex;
  flex-direction: column;
  gap: 10px;
+
+ cursor: ${({ $isPreview }) => $isPreview && 'pointer'};
 `;
 
 export const Image = styled.img`

frontend/src/hooks/useText.ts

@@ -26,9 +26,5 @@ export const useText = (originalText: string) => {
  setText('');
  };
 
- const addText = (newTextToAdd: string) => {
- setText(text + newTextToAdd);
- };
-
- return { text, setText, handleTextChange, resetText, addText };
+ return { text, setText, handleTextChange, resetText };
 };

frontend/src/utils/post/convertTextToElement.tsx

@@ -1,7 +1,12 @@
+import { MouseEvent } from 'react';
+
+import { convertTextToUrl } from './convertTextToUrl';
+
 export const convertTextToElement = (text: string) => {
+ const convertedUrlText = convertTextToUrl(text);
  const linkPattern = /\[\[([^[\]]+)\]\]/g;
 
- const parts = text.split(linkPattern);
+ const parts = convertedUrlText.split(linkPattern);
 
  const elementList = parts.map((part, index) => {
  if (index % 2 === 1) {
@@ -10,6 +15,9 @@ export const convertTextToElement = (text: string) => {
  const linkUrl = linkText.startsWith('http' || 'https') ? linkText : `https://${linkText}`;
  return (
  <a
+ onClick={(event: MouseEvent<HTMLAnchorElement>) => {
+ event.stopPropagation();
+ }}
  key={index}
  href={linkUrl}
  target="_blank"
@@ -22,7 +30,7 @@ export const convertTextToElement = (text: string) => {
  }
 
  // 링크가 아닌 문자열
- return <span>{part}</span>;
+ return <span key={index}>{part}</span>;
  });
 
  return elementList;

frontend/src/utils/post/convertTextToUrl.ts

@@ -0,0 +1,29 @@
+/**
+ * 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;
+
+export const convertTextToUrl = (text: string) => {
+ const httpOrHttpsConvertedText = text.replace(httpsOrHttpRegex, url => `[[${url}]]`);
+ const wwwConvertedText = httpOrHttpsConvertedText.replace(wwwRegex, url => `[[${url}]]`);
+
+ return wwwConvertedText;
+};