lightHouse 웹 접근성 93점을 98점으로 올렸음

frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/ProgressBar/index.tsx

@@ -10,7 +10,7 @@ interface ProgressBarProps {
 export default function ProgressBar({ percent, isSelected }: ProgressBarProps) {
  return (
  <S.Container>
- <S.Bar progress={percent} $isSelected={isSelected} />
+ <S.Bar $progress={percent} $isSelected={isSelected} />
  </S.Container>
  );
 }

frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/ProgressBar/style.ts

@@ -8,10 +8,10 @@ export const Container = styled.div`
  background-color: rgba(0, 0, 0, 0.15);
 `;
 
-export const Bar = styled.div<{ progress: number; $isSelected: boolean }>`
+export const Bar = styled.div<{ $progress: number; $isSelected: boolean }>`
  border-radius: 4px;
 
- width: ${({ progress }) => `${progress}%`};
+ width: ${({ $progress }) => `${$progress}%`};
  height: 8px;
 
  background-color: ${({ $isSelected }) => ($isSelected ? 'var(--primary-color)' : '#9F9F9F')};

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

@@ -1,4 +1,4 @@
-import { memo, useContext, useEffect } from 'react';
+import { ForwardedRef, forwardRef, memo, useContext, useEffect } from 'react';
 
 import { PostInfo } from '@type/post';
 
@@ -29,7 +29,10 @@ interface PostProps {
  isPreview: boolean;
 }
 
-export default memo(function Post({ postInfo, isPreview }: PostProps) {
+const Post = forwardRef(function Post(
+ { postInfo, isPreview }: PostProps,
+ ref: ForwardedRef<HTMLLIElement>
+) {
  const {
  postId,
  category,
@@ -110,7 +113,7 @@ export default memo(function Post({ postInfo, isPreview }: PostProps) {
  const isPreviewTabIndex = isPreview ? undefined : 0;
 
  return (
- <S.Container as={isPreview ? 'li' : 'div'}>
+ <S.Container as={isPreview ? 'li' : 'div'} ref={ref} $isPreview={isPreview}>
  <S.DetailLink
  as={isPreview ? '' : 'main'}
  to={isPreview ? `${PATH.POST}/${postId}` : '#'}
@@ -195,3 +198,5 @@ export default memo(function Post({ postInfo, isPreview }: PostProps) {
  </S.Container>
  );
 });
+
+export default memo(Post);

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

@@ -4,7 +4,7 @@ import { styled } from 'styled-components';
 
 import { theme } from '@styles/theme';
 
-export const Container = styled.li`
+export const Container = styled.li<{ $isPreview: boolean }>`
  width: 100%;
 
  position: relative;
@@ -13,6 +13,9 @@ export const Container = styled.li`
  letter-spacing: 0.5px;
  line-height: 1.5;
 
+ padding-bottom: ${({ $isPreview }) => $isPreview && '30px'};
+ border-bottom: ${({ $isPreview }) => $isPreview && '1px solid rgba(0, 0, 0, 0.1)'};
+
  @media (min-width: ${theme.breakpoint.sm}) {
  font: var(--text-caption);
  }

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

@@ -102,23 +102,18 @@ export default function PostList() {
  <React.Fragment key={pageIndex}>
  {postListInfo.postList.map((post, index) => {
  if (index === 7) {
- return (
- <div key={post.postId} ref={targetRef}>
- <Post isPreview={true} postInfo={post} />
- </div>
- );
+ return <Post key={post.postId} ref={targetRef} isPreview={true} postInfo={post} />;
  }
 
  return <Post key={post.postId} isPreview={true} postInfo={post} />;
  })}
- <S.HiddenButton
- onClick={focusTopContent}
- aria-label="스크롤 맨 위로가기"
- ></S.HiddenButton>
- <S.HiddenLink
- aria-label="게시글 작성 페이지로 이동"
- to={PATH.POST_WRITE}
- ></S.HiddenLink>
+ <li key={`${pageIndex}UserButton`}>
+ <S.HiddenButton
+ onClick={focusTopContent}
+ aria-label="스크롤 맨 위로가기"
+ ></S.HiddenButton>
+ <S.HiddenLink aria-label="게시글 작성 페이지로 이동" to={PATH.POST_WRITE} />
+ </li>
  </React.Fragment>
  ))}
  {isFetchingNextPage && <Skeleton isLarge={false} />}

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

@@ -29,16 +29,6 @@ export const PostListContainer = styled.ul`
  gap: 30px;
 
  padding: 30px 20px;
-
- > div > li {
- padding-bottom: 30px;
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
- }
-
- > li {
- padding-bottom: 30px;
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
- }
 `;
 
 export const SelectWrapper = styled.div`
@@ -61,3 +51,8 @@ export const HiddenButton = styled.button`
 export const HiddenLink = styled(Link)`
  position: absolute;
 `;
+
+export const HiddenList = styled.li`
+ padding-bottom: none;
+ border-bottom: none;
+`;