diff --git a/frontend/src/components/InputBox.tsx b/frontend/src/components/InputBox.tsx index 44a207f0d..e1b4470ce 100644 --- a/frontend/src/components/InputBox.tsx +++ b/frontend/src/components/InputBox.tsx @@ -6,6 +6,7 @@ interface Props extends React.HTMLProps { handleInputTextState: (e: React.ChangeEvent) => void; fontSize?: string | number; fontWeight?: string | number; + autoFocus?: boolean; } const InputBox = ({ @@ -16,11 +17,17 @@ const InputBox = ({ height, fontSize, fontWeight, + autoFocus, handleInputTextState, }: Props) => { return ( - + {maxLength && ( {inputTextState.length ?? 0} / {maxLength} diff --git a/frontend/src/components/SelectSupportModal.tsx b/frontend/src/components/SelectSupportModal.tsx index 503befa93..c991b25f0 100644 --- a/frontend/src/components/SelectSupportModal.tsx +++ b/frontend/src/components/SelectSupportModal.tsx @@ -23,11 +23,11 @@ const SelectSupportModal = ({ closeModal, handleSelectButton }: Props) => { 서포터를 선택해 주세요 ✅ 선택한 서포터가 확인 후 리뷰를 진행합니다. - - + + 프론트엔드 - + 백엔드 @@ -54,7 +54,7 @@ const S = { gap: 20px; `, - TitleContainer: styled.div` + TitleContainer: styled.header` display: flex; flex-direction: column; gap: 15px; @@ -62,12 +62,12 @@ const S = { margin: 20px 0 53px 20px; `, - Title: styled.p` + Title: styled.h1` font-size: 36px; font-weight: 700; `, - TitleDescription: styled.div` + TitleDescription: styled.h2` margin-left: 5px; font-size: 18px; diff --git a/frontend/src/components/SupporterSelect/SupporterSelectItem/SupporterSelectItem.tsx b/frontend/src/components/SupporterSelect/SupporterSelectItem/SupporterSelectItem.tsx index 7191b433a..6be197f6d 100644 --- a/frontend/src/components/SupporterSelect/SupporterSelectItem/SupporterSelectItem.tsx +++ b/frontend/src/components/SupporterSelect/SupporterSelectItem/SupporterSelectItem.tsx @@ -37,25 +37,25 @@ const SupporterSelectItem = ({ }; return ( - + - {name} - {company} + {name} + {company} - {technicalTags.map((tag) => ( - + {technicalTags.map((tag, index) => ( + ))} - 완료한 리뷰 - {reviewCount} + 완료한 리뷰 + {reviewCount} - + github @@ -66,6 +66,7 @@ const SupporterSelectItem = ({ fontSize="12px" fontWeight={700} onClick={handleSelectedSupporter} + ariaLabel={`${name} 선택하기`} > 선택하기 diff --git a/frontend/src/components/common/Avatar.tsx b/frontend/src/components/common/Avatar.tsx index 3ea3a0ab5..9ec0f0d31 100644 --- a/frontend/src/components/common/Avatar.tsx +++ b/frontend/src/components/common/Avatar.tsx @@ -8,7 +8,7 @@ interface Props extends React.HTMLProps { const Avatar = ({ imageUrl, width, height }: Props) => { return ( - + ); }; diff --git a/frontend/src/components/common/Button.tsx b/frontend/src/components/common/Button.tsx index fb94574c1..e7b81b4de 100644 --- a/frontend/src/components/common/Button.tsx +++ b/frontend/src/components/common/Button.tsx @@ -7,9 +7,10 @@ interface Props extends React.HTMLProps { fontSize?: string | number; fontWeight?: number; type?: 'button' | 'submit' | 'reset'; + ariaLabel?: string; } -const Button = ({ colorTheme, children, width, height, type, fontSize, fontWeight, onClick }: Props) => { +const Button = ({ colorTheme, children, width, height, type, fontSize, fontWeight, onClick, ariaLabel }: Props) => { return ( {children} diff --git a/frontend/src/components/common/Modal.tsx b/frontend/src/components/common/Modal.tsx index 2558f933d..05f527898 100644 --- a/frontend/src/components/common/Modal.tsx +++ b/frontend/src/components/common/Modal.tsx @@ -9,7 +9,7 @@ interface Props extends React.HTMLProps { const Modal = ({ children, closeModal, width, height }: Props) => { return createPortal( - + {children} diff --git a/frontend/src/layout/Header.tsx b/frontend/src/layout/Header.tsx index 39a489b02..fa230036f 100644 --- a/frontend/src/layout/Header.tsx +++ b/frontend/src/layout/Header.tsx @@ -9,7 +9,7 @@ const Header = () => { return ( - + { @@ -28,7 +28,7 @@ const Header = () => { export default Header; const S = { - HeaderWrapper: styled.div` + HeaderWrapper: styled.header` display: flex; justify-content: center; diff --git a/frontend/src/layout/Layout.tsx b/frontend/src/layout/Layout.tsx index 20072c244..2d1657278 100644 --- a/frontend/src/layout/Layout.tsx +++ b/frontend/src/layout/Layout.tsx @@ -24,7 +24,7 @@ const S = { align-items: center; `, - ChildrenWrapper: styled.div` + ChildrenWrapper: styled.article` width: 1200px; margin-bottom: 80px; diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx index 81821cfba..8dcad1c24 100644 --- a/frontend/src/pages/MainPage.tsx +++ b/frontend/src/pages/MainPage.tsx @@ -27,7 +27,7 @@ const MainPage = () => { */} - @@ -41,10 +41,10 @@ const MainPage = () => { export default MainPage; const S = { - TitleWrapper: styled.div` + TitleWrapper: styled.header` margin: 72px 0 53px 0; `, - Title: styled.p` + Title: styled.h1` font-size: 36px; font-weight: 700; `, diff --git a/frontend/src/pages/RunnerPostCreatePage.tsx b/frontend/src/pages/RunnerPostCreatePage.tsx index 38c0be3ab..6aaa4006a 100644 --- a/frontend/src/pages/RunnerPostCreatePage.tsx +++ b/frontend/src/pages/RunnerPostCreatePage.tsx @@ -162,6 +162,7 @@ const RunnerPostCreatePage = () => { fontSize="38px" fontWeight="700" placeholder="제목을 입력해주세요" + autoFocus={true} /> diff --git a/frontend/src/pages/RunnerPostDetailPage.tsx b/frontend/src/pages/RunnerPostDetailPage.tsx index f149cc674..e4fb3b630 100644 --- a/frontend/src/pages/RunnerPostDetailPage.tsx +++ b/frontend/src/pages/RunnerPostDetailPage.tsx @@ -214,7 +214,7 @@ const S = { gap: 10px; `, - PostTitle: styled.div` + PostTitle: styled.h1` font-size: 38px; font-weight: 700; `,