Merge pull request #129 from kdt-8-4/performanceimprove

[Fix] #82 tabIndex, ARIA 속성 적용, #7 피드페이지 top 카테고리 코드 개선
kdt-8-4 · Apr 16, 2024 · c66741d · c66741d
2 parents d392844 + 00d571f
commit c66741d
Show file tree

Hide file tree

Showing 20 changed files with 254 additions and 121 deletions.
diff --git a/weatherfit_refactoring/src/Components/Atoms/Box/BoxStore.tsx b/weatherfit_refactoring/src/Components/Atoms/Box/BoxStore.tsx
@@ -13,40 +13,54 @@ interface Props {
   style?: string
   onClickFunction?: () => void
   children?: React.ReactNode
+  tabIndex?: number
+  ariaLabel?: string
 }
 
 export default function BoxStore({
   boxStyle,
   children,
   onClickFunction,
   style,
+  tabIndex,
+  ariaLabel,
 }: Props) {
   const selectButton = (): React.ReactNode => {
     switch (boxStyle) {
       case BoxStyle.BOX_WHITE:
         return (
           <button
-            className={`${style} bg-white border border-black rounded-2xl `}>
+            className={`${style} bg-white border border-black rounded-2xl `}
+            tabIndex={tabIndex}
+            aria-label={ariaLabel}>
             {children}
           </button>
         )
       case BoxStyle.BOX_YELLOW:
         return (
-          <div className={`${style} bg-yellow-200 border-black rounded-2xl `}>
+          <div
+            className={`${style} bg-yellow-200 border-black rounded-2xl `}
+            tabIndex={tabIndex}
+            aria-label={ariaLabel}>
             {children}
           </div>
         )
       case BoxStyle.BOX_BLUE:
         return (
           <div
             className={`${style} bg-blue-300 rounded-2xl`}
-            onClick={onClickFunction}>
+            onClick={onClickFunction}
+            tabIndex={tabIndex}
+            aria-label={ariaLabel}>
             {children}
           </div>
         )
       case BoxStyle.BOX_IMAGE:
         return (
-          <div className="border rounded-2xl w-32 h-48 bg-stone-200 flex hover:bg-stone-300 relative  flex-shrink-0">
+          <div
+            className="border rounded-2xl w-32 h-48 bg-stone-200 flex hover:bg-stone-300 relative  flex-shrink-0"
+            tabIndex={tabIndex}
+            aria-label={ariaLabel}>
             {children}
           </div>
         )

diff --git a/weatherfit_refactoring/src/Components/Atoms/Button/ButtonStore.tsx b/weatherfit_refactoring/src/Components/Atoms/Button/ButtonStore.tsx
@@ -27,6 +27,7 @@ interface Props {
   children?: React.ReactNode
   btnType?: 'button' | 'reset' | 'submit' | undefined
   tabindex?: number
+  ariaLabel?: string
 }
 
 export default function ButtonStore({
@@ -36,6 +37,7 @@ export default function ButtonStore({
   style,
   btnType,
   tabindex,
+  ariaLabel,
 }: Props) {
   const selectButton = (): React.ReactNode => {
     switch (buttonStyle) {
@@ -70,7 +72,8 @@ export default function ButtonStore({
         return (
           <button
             className={`${style} bg-white border border-black rounded-2xl `}
-            onClick={onClickFunction}>
+            onClick={onClickFunction}
+            aria-label={ariaLabel}>
             {children}
           </button>
         )

diff --git a/weatherfit_refactoring/src/Components/Atoms/Icon/IconStore.tsx b/weatherfit_refactoring/src/Components/Atoms/Icon/IconStore.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image'
+import { KeyboardEventHandler } from 'react'
 
 export enum IconStyle {
   MY_PROFILE = 'MY_PROFILE',
@@ -28,15 +29,19 @@ interface Props {
   size?: number
   style?: string
   onClickFunction?: () => void
+  onKeyDown?: KeyboardEventHandler<HTMLDivElement>
   tabindex?: number
+  ariaLabel?: string
 }
 
 export default function IconStore({
   iconStyle,
   size,
   style,
   onClickFunction,
+  onKeyDown,
   tabindex,
+  ariaLabel,
 }: Props) {
   const selectIcon = (): React.ReactNode => {
     switch (iconStyle) {
@@ -109,6 +114,7 @@ export default function IconStore({
             height={size}
             className={`${style}`}
             onClick={onClickFunction}
+            aria-label={ariaLabel}
           />
         )
       case IconStyle.UNLIKE:
@@ -120,6 +126,7 @@ export default function IconStore({
             height={size}
             className={`${style}`}
             onClick={onClickFunction}
+            aria-label={ariaLabel}
           />
         )
       case IconStyle.LIKE:
@@ -131,6 +138,7 @@ export default function IconStore({
             height={size}
             className={`${style}`}
             onClick={onClickFunction}
+            aria-label={ariaLabel}
           />
         )
       case IconStyle.TOGGLE:
@@ -162,6 +170,9 @@ export default function IconStore({
             height={size}
             className={`${style}`}
             onClick={onClickFunction}
+            tabIndex={tabindex}
+            aria-label={ariaLabel}
+            onKeyDown={onKeyDown}
           />
         )
       case IconStyle.PREV2:
@@ -173,6 +184,9 @@ export default function IconStore({
             height={size}
             className={`${style}`}
             onClick={onClickFunction}
+            tabIndex={tabindex}
+            aria-label={ariaLabel}
+            onKeyDown={onKeyDown}
           />
         )
       case IconStyle.NEXT:
@@ -184,6 +198,8 @@ export default function IconStore({
             height={size}
             className={`${style}`}
             onClick={onClickFunction}
+            tabIndex={tabindex}
+            aria-label={ariaLabel}
           />
         )
       case IconStyle.SETTING:
@@ -195,6 +211,8 @@ export default function IconStore({
             height={size}
             className={`${style}`}
             onClick={onClickFunction}
+            tabIndex={tabindex}
+            aria-label={ariaLabel}
           />
         )
       case IconStyle.ETC:
@@ -206,6 +224,8 @@ export default function IconStore({
             height={size}
             className={`${style}`}
             onClick={onClickFunction}
+            tabIndex={tabindex}
+            aria-label={ariaLabel}
           />
         )
       case IconStyle.HIGHEST:
@@ -237,7 +257,9 @@ export default function IconStore({
             height={size}
             className={`${style}`}
             onClick={onClickFunction}
+            onKeyDown={onKeyDown}
             tabIndex={tabindex}
+            aria-label={ariaLabel}
           />
         )
       case IconStyle.SEARCH_FILL:
@@ -250,6 +272,7 @@ export default function IconStore({
             className={`${style}`}
             onClick={onClickFunction}
             tabIndex={tabindex}
+            aria-label={ariaLabel}
           />
         )
       default:

diff --git a/weatherfit_refactoring/src/Components/Atoms/Input/InputStore.tsx b/weatherfit_refactoring/src/Components/Atoms/Input/InputStore.tsx
@@ -24,6 +24,7 @@ interface Props {
   onBlur?: FocusEventHandler<HTMLDivElement>
   onKeyDown?: KeyboardEventHandler<HTMLDivElement>
   tabindex?: number
+  ariaLabel?: string
 }
 
 export default function InputStore({
@@ -36,6 +37,7 @@ export default function InputStore({
   onKeyDown,
   value,
   tabindex,
+  ariaLabel,
 }: Props) {
   const selectInput = (): React.ReactNode => {
     switch (inputStyle) {
@@ -50,6 +52,7 @@ export default function InputStore({
             className={`border rounded-lg bg-white border-gray-500 p-1 ${style}`}
             placeholder={placeholderContents}
             tabIndex={tabindex}
+            aria-label={ariaLabel}
           />
         )
       case InputStyle.INPUT_SEARCH:
@@ -61,6 +64,7 @@ export default function InputStore({
             className={`rounded-lg bg-white border-gray-500 p-1 ${style}`}
             placeholder={placeholderContents}
             tabIndex={tabindex}
+            aria-label={ariaLabel}
           />
         )
       case InputStyle.INPUT_IMAGE:

diff --git a/weatherfit_refactoring/src/Components/Atoms/Text/TextStore.tsx b/weatherfit_refactoring/src/Components/Atoms/Text/TextStore.tsx
@@ -8,17 +8,46 @@ interface Props {
   textStyle: TextStyle
   style?: string
   children?: React.ReactNode
+  tabIndex?: number
+  ariaLabel?: string
 }
 
-export default function TextStore({ textStyle, style, children }: Props) {
+export default function TextStore({
+  textStyle,
+  style,
+  children,
+  tabIndex,
+  ariaLabel,
+}: Props) {
   const selectText = (): React.ReactNode => {
     switch (textStyle) {
       case TextStyle.GMARKET_TEXT:
-        return <p className={`${style} font-gmarketsans`}>{children}</p>
+        return (
+          <p
+            className={`${style} font-gmarketsans`}
+            tabIndex={tabIndex}
+            aria-label={ariaLabel}>
+            {children}
+          </p>
+        )
       case TextStyle.NANUM_TEXT:
-        return <p className={`${style} font-NanumSquareRound`}>{children}</p>
+        return (
+          <p
+            className={`${style} font-NanumSquareRound`}
+            tabIndex={tabIndex}
+            aria-label={ariaLabel}>
+            {children}
+          </p>
+        )
       case TextStyle.CAFE_TEXT:
-        return <p className={`${style} font-Cafe24SsurroundAir`}>{children}</p>
+        return (
+          <p
+            className={`${style} font-Cafe24SsurroundAir`}
+            tabIndex={tabIndex}
+            aria-label={ariaLabel}>
+            {children}
+          </p>
+        )
     }
   }
 

diff --git a/weatherfit_refactoring/src/Components/Molecules/FeedCategory.tsx b/weatherfit_refactoring/src/Components/Molecules/FeedCategory.tsx
@@ -18,7 +18,6 @@ export default function FeedCategory() {
   }
 
   return (
-
     <section>
       <div
         onClick={tabBooleanControl}
@@ -28,7 +27,8 @@ export default function FeedCategory() {
             <ButtonStore
               buttonStyle={ButtonStyle.CATEGORY_BTN}
               key={val.id}
-              style="h-[30px] p-1 m-1 flex whitespace-nowrap">
+              style="h-[30px] p-1 m-1 flex whitespace-nowrap"
+              ariaLabel={`${val.title} 카테고리 검색을 원하시면 엔터 키를 눌러주세요.`}>
               {val.title}
               <IconStore iconStyle={IconStyle.TOGGLE2} size={20} />
             </ButtonStore>
@@ -37,6 +37,5 @@ export default function FeedCategory() {
       </div>
       {categoryControl && <FeedCategorySelect />}
     </section>
-
   )
 }
diff --git a/weatherfit_refactoring/src/Components/Molecules/bar/NavBar.tsx b/weatherfit_refactoring/src/Components/Molecules/bar/NavBar.tsx
@@ -5,11 +5,33 @@ export default function NavBar() {
     <footer>
       <nav
         className="absolute bottom-[15px] mx-[2.5%] flex justify-around items-center bg-white w-[93%] h-[52px] border border-black rounded-[30px] z-10 py-[5px]"
-        style={{ boxShadow: '7px 7px 1px' }}>
-        <NavBarBox iconStyle="HOME" title="홈" url="/" />
-        <NavBarBox iconStyle="SEARCH" title="구경" url="/feed" />
-        <NavBarBox iconStyle="UPLOAD" title="업로드" url="/upload" />
-        <NavBarBox iconStyle="MY_PROFILE" title="마이페이지" url="/mypage" />
+        style={{ boxShadow: '7px 7px 1px' }}
+        tabIndex={0}
+        aria-label="네브바 입니다. 아래에서 원하는 페이지로 이동할 수 있습니다.">
+        <NavBarBox
+          iconStyle="HOME"
+          title="홈"
+          url="/"
+          ariaLabel="홈으로 이동"
+        />
+        <NavBarBox
+          iconStyle="SEARCH"
+          title="구경"
+          url="/feed"
+          ariaLabel="피드 페이지로 이동"
+        />
+        <NavBarBox
+          iconStyle="UPLOAD"
+          title="업로드"
+          url="/upload"
+          ariaLabel="업로드 페이지로 이동, 로그인 후 이용 가능"
+        />
+        <NavBarBox
+          iconStyle="MY_PROFILE"
+          title="마이페이지"
+          url="/mypage"
+          ariaLabel="마이 페이지로 이동, 로그인 후 이용 가능"
+        />
       </nav>
     </footer>
   )

diff --git a/weatherfit_refactoring/src/Components/Molecules/bar/NavBarBox.tsx b/weatherfit_refactoring/src/Components/Molecules/bar/NavBarBox.tsx
@@ -9,9 +9,10 @@ interface Props {
   iconStyle: keyof typeof IconStyle
   title: string
   url: string
+  ariaLabel?: string
 }
 
-export default function NavBarBox({ iconStyle, title, url }: Props) {
+export default function NavBarBox({ iconStyle, title, url, ariaLabel }: Props) {
   const router = useRouter()
   const pathname = usePathname()
   const [isActive, setIsActive] = useState<boolean>(false)
@@ -28,7 +29,10 @@ export default function NavBarBox({ iconStyle, title, url }: Props) {
     : 'text-[11px] mt-[3px]'
 
   return (
-    <Link href={url} className="flex flex-col items-center cursor-pointer">
+    <Link
+      href={url}
+      className="flex flex-col items-center cursor-pointer"
+      aria-label={ariaLabel}>
       <IconStore iconStyle={activeIconStyle} size={22} />
       <TextStore textStyle={TextStyle.CAFE_TEXT} style={activeTextStyle}>
         {title}

diff --git a/weatherfit_refactoring/src/Components/Molecules/header/Header.tsx b/weatherfit_refactoring/src/Components/Molecules/header/Header.tsx
@@ -35,11 +35,20 @@ export default function Header({
         size={20}
         style="ml-[10px] cursor-pointer"
         onClickFunction={() => window.history.back()}
+        onKeyDown={(e: React.KeyboardEvent<HTMLImageElement>) => {
+          if (e.key === 'Enter') {
+            window.history.back()
+          }
+        }}
+        tabindex={0}
+        ariaLabel="이전 페이지로 이동합니다."
       />
       <BoxStore
         boxStyle={BoxStyle.BOX_BLUE}
         style={`absolute left-1/2 transform -translate-x-1/2 px-2 h-[30px] font-neurimboGothic text-[22px] pb-[7px] shadow-[7px_7px_1px] flex items-center ${title === '옷늘날씨' ? 'cursor-pointer' : ''}`}
-        onClickFunction={onClickToMain}>
+        onClickFunction={onClickToMain}
+        tabIndex={0}
+        ariaLabel="로고입니다.">
         {title}
       </BoxStore>
       {buttonStyleCase ? (