refactor: (#703) 홈에서도 링크에 접속 가능하도록 수정

웹 접근성을 위해 link로 들어가는 태그를 button으로 하여 스페이스바로 진입 가능하도록 함
woowacourse-teams · Oct 5, 2023 · 5d4a21b · 5d4a21b
1 parent 8e68b23
commit 5d4a21b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/frontend/src/components/post/Post/index.tsx b/frontend/src/components/post/Post/index.tsx
@@ -1,4 +1,5 @@
 import { memo, useContext, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { PostInfo } from '@type/post';
 
@@ -30,6 +31,7 @@ interface PostProps {
 }
 
 export default memo(function Post({ postInfo, isPreview }: PostProps) {
+  const navigate = useNavigate();
   const {
     postId,
     category,
@@ -112,8 +114,14 @@ export default memo(function Post({ postInfo, isPreview }: PostProps) {
   return (
     <S.Container as={isPreview ? 'li' : 'div'}>
       <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
@@ -164,7 +172,7 @@ export default memo(function Post({ postInfo, isPreview }: PostProps) {
           aria-label={`내용: ${content}`}
           $isPreview={isPreview}
         >
-          {convertTextToElement(content, !isPreview)}
+          {convertTextToElement(content)}
         </S.Content>
         {!isPreview && imageUrl && <S.Image src={imageUrl} alt={'본문에 포함된 이미지'} />}
       </S.DetailLink>

diff --git a/frontend/src/components/post/Post/style.ts b/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';
@@ -91,10 +89,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`

diff --git a/frontend/src/utils/post/convertTextToElement.tsx b/frontend/src/utils/post/convertTextToElement.tsx
@@ -1,22 +1,23 @@
+import { MouseEvent } from 'react';
+
 import { convertTextToUrl } from './convertTextToUrl';
 
-export const convertTextToElement = (text: string, isLinkEnabled = true) => {
+export const convertTextToElement = (text: string) => {
   const convertedUrlText = convertTextToUrl(text);
   const linkPattern = /\[\[([^[\]]+)\]\]/g;
 
   const parts = convertedUrlText.split(linkPattern);
 
-  if (!isLinkEnabled) {
-    return parts.join('');
-  }
-
   const elementList = parts.map((part, index) => {
     if (index % 2 === 1) {
       // 링크
       const linkText = part;
       const linkUrl = linkText.startsWith('http' || 'https') ? linkText : `https://${linkText}`;
       return (
         <a
+          onClick={(event: MouseEvent<HTMLAnchorElement>) => {
+            event.stopPropagation();
+          }}
           key={index}
           href={linkUrl}
           target="_blank"