refactor: 마이페이지 url 분리 리펙토링 (#224)

* refactor: Sidebar organisms 컴포넌트의 인터페이스가 특정 컴포넌트에 귀속되지 않도록 수정

* refactor: isLoading 유무에 따른 스타일링 단순화

* typo: 태그 네이밍을 직관적으로 수정

* refactor: OptionBar가 내부 상태가 아닌 외부로 부터 상태를 주입 받도록 수정

* fix: OptionBar의 width 선언

* fix: 콘솔 로그 대신 스토리북 내부 action으로 동작이 감지되도록 수정

* fix: padding 값을 반영한 width 값 재설정

* fix: jsx 환경을 위한 react 주입

* refactor: mypage의 상태를 url로 판단할 수 있도록 처리

* refactor: optionSets 가 label와 value를 가지도록 수정

* refactor: 옵션 선택 시 value 를 감지하도록 수정

* refactor: selectGroup이 항상 두개의 아이템 배열을 받도록 수정

* refactor: optionBar에서 selectGroupItems이 항상 종속되도록 수정

* refactor: 마이페이지 내 url이 상태를 반영하도록 수정

* refactor: switch 옵션에 default case 추가

* refactor: 수정된 옵션 네이밍에 따라 조건부 랜더링

* refactor: 메모이제이션 의존성 배열을 알맞게 재선언

* refactor: 마이페이지 내부 인터페이스를 명시적으로 선언

* refactor: api 호출 시 인터페이스의 반환 타입을 명시

* refactor: 내 정보를 불러올 때 필요한 정보만 호출하도록 수정

* refactor: type narrowing 으로 사이드바의 로딩 값 처리

* move: 사용하지 않는 주석 제거

* fix: 북마크 아이콘의 기본 색을 primary color로 지정

* refactor: MyContentBox가 클릭 이벤트를 받도록 수정

* refactor: 인터페이스 종속성 제거

* refactor: 데이터 분류를 메모이제이션으로 처리

* refactor: InfoBox에 클릭 props 주입

* refactor: InfoList에서 navigate 처리를 하도록 수정

* refactor: InfoList의 인터페이스 종속성 제거

* refactor: 그룹핑 로직을 메모이제이션 처리

* move: 사용하지 않는 import문, 옵션 삭제

* refactor: 수정된 컴포넌트를 storybook에 반영

* refactor: ContentsButton에 onclick props 주입

* refactor: MyBalanceGameList의 인터페이스 종속성 분리

* refactor: gameId에 따라 해당하는 게임으로 네비게이션 처리

* refactor: 데이터 처리를 메모이제이션

* refactor: 수정된 ContentsButton에 영향을 받는 BalanceGameList에 navigation 처리

* refactor: toggleGroup에서 사용하는 기본 아이템 value 값 수정

* refactor: 수정된 value 값으로 상태 주입

* refactor: 메모이제이션으로 불필요한 리랜더링 최적화

* refactor: GameItem 타입의 종속성 제거

* refactor: ContentsButton 클릭 시 네비게이션 로직 추가

* refactor: ContentsButton의 인터페이스에 맞게 데이터 재배치

* refactor: 수정된 SearchGameList 스토리북 반영

* test: 테스트를 위한 임시 쿼리 로딩 값 설정

* feat: 키보드와 스크린 리더 사용자 접근성 향상을 위한 태그 변경 및 클릭 이벤트 개선

* refactor: option state 처리 시 안정성 검증 추가

* refactor: 시멘틱 태그 변경을 통한 접근성 향상

* refactor: 분류 및 매핑을 구조 분해 할당으로 처리

* refactor: MyContentList 날짜 분류 및 매핑을 구조 분해 할당으로 처리

* refactor: InfoList 날짜 분류 및 매핑을 구조 분해 할당으로 처리

* refactor: 스토리북 내부에 선언된 중복 샘플 데이터 제거

* feat: url 유효성 검사 함수 추가

* refactor: 초기 url에 유효성 검사 로직 추가

* refactor: 타입 가드 도입을 통해 타입 안전성 향상

* refactor: selectGroup의 접근성 향상을 위한 aria-label 추가

* refactor: button 속성에 키보드 접근성 추가

* refactor: MyContentBox 컴포넌트에 on click을 위한 접근성 개선

* refactor: 초기 selected 상태 안전성 검증 추가

* refactor: 강제로 변환한 div 컴포넌트 롤백 및 클릭 시 필요한 요구사항 추가

* refactor: selectGroup을 구조분해 할당으로 처리

* refactor: selectGroup에 제너릭 타입 추가

* refactor: OptionBar 타입 캐스팅 제거

* refactor: 스토리북 테스트 데이터의 상수 분리

* refactor: 게임 id가 유효하지 않을 경우 alert를 출력하도록 처리

* refactor: 스토리북 내부 매핑 시 구조분해 할당 적용

* refactor: 정렬 필드를 쉼표를 사용하지 않고, 객체 형태로 표현

* refactor: toggleGroup 정렬 필드에 따라 연관된 로직 수정

* refactor: 스토리북에 MemoryRouter 추가

* refactor: GameItem에 해당하는 인터페이스 설정 변경

* refactor: 잘못 설정된 sort 설정 변경

* refactor: 부모 요소의 width를 자식 width에서 오버플로우 되지 않게 수정

* refactor: useEffect를 사용하여 selectedOption이 변경될 떄 내부 selected 상태를 동기화

* refactor: 옵션 전환 시 url 핸들링 로직 변경

* feat: 디버깅용 로딩 상태 제거

* refactor: 랜더링 할 요소가 없을 시 null 로 반환하도록 수정

* refactor: data가 올바르게 들어오지 않았을 때의 기본값 설정

* refactor: 구조분해 할당과 스프레드 연산자로 내 정보 관련 최적화

* refactor: void 연산자를 이용해 promise가 의도적으로 무시된다는 것을 명시

* fix: 잘못 선언된 변수명 수정

* fix: 잘못 선언된 토글 아이템 value 수정

* fix: 이전 값에 속했던 fileId 변경

* move: 불필요한 태그 삭제

* refactor: 논리 연산자를 null 병합 연산자로 치환

* refactor: 데이터 전환 시 논리 연산자를 null 병합 연산자로 치환

* refactor: 상태 관리 시 논리 연산자를 null 병합 연산자로 치환

* fix: 잘못 병합된 상태 수정

* move: 불필요한 시멘틱 태그 role 제거

* fix: 정렬 대분류(인기순, 최신순)의 이름을 fileId에서 field로 변경

* refactor: 반복되는 공통 타입, 인터페이스를 외부로 분리

* refactor: 분리된 공통 인터페이스를 import해서 사용하도록 변경

* refactor: 복잡한 분기를 가진 스타일 처리를 컴포넌트 외부 함수화

* refactor: 클릭가능한 스타일링 컴포넌트의 태그를 button으로 수정

* refactor: 에러메시지 상수화

* refactor: onClick을 자식 컴포넌트로 전달하는 함수를 useCallback 처리

* refactor: url 상태관리를 커스텀 훅에서 수행하도록 변경

* feat: 경로 상수를 절대 경로로 변경

* feat: 사이드바에서 역할에 맞는 네비게이션 설정

src/api/mypages.ts

@@ -62,6 +62,6 @@ export const getGameBookmark = async (page: number, size: number) => {
 };
 
 export const getMyInfo = async (memberId: Id): Promise<SideBar> => {
-  const response = await axiosInstance.get(`/members/${memberId}`);
-  return response.data;
+  const { data } = await axiosInstance.get<SideBar>(`/members/${memberId}`);
+  return data;
 };

src/components/atoms/SelectGroup/SelectGroup.style.ts

@@ -7,7 +7,7 @@ export const selectGroupStyling = css({
   alignItems: 'center',
   backgroundColor: 'transparent',
   padding: '4px',
-  width: '100%',
+  width: '912px',
   justifyContent: 'space-between',
   position: 'relative',
 });

src/components/atoms/SelectGroup/SelectGroup.tsx

@@ -1,34 +1,39 @@
 import React from 'react';
 import * as S from './SelectGroup.style';
 
-export type SelectGroupItem = {
+export type SelectGroupItem<T> = {
   label: string;
-  value: string;
+  value: T;
 };
 
-export interface SelectGroupProps {
-  items: SelectGroupItem[];
-  selectedValue?: string;
-  onSelect?: (value: string) => void;
+export interface SelectGroupProps<T> {
+  items: [SelectGroupItem<T>, SelectGroupItem<T>];
+  selectedValue?: T;
+  onSelect?: (value: T) => void;
 }
-const SelectGroup = ({ items, selectedValue, onSelect }: SelectGroupProps) => (
-  <div css={S.selectGroupStyling}>
-    {Array.isArray(items) &&
-      items.length === 2 &&
-      items.map((item) => (
-        <button
-          key={item.value}
-          type="button"
-          css={[
-            S.selectGroupItemStyling,
-            S.itemRadius,
-            item.value === selectedValue && S.selectedStyling,
-          ]}
-          onClick={() => onSelect?.(item.value)}
-        >
-          {item.label}
-        </button>
-      ))}
+
+const SelectGroup = <T,>({
+  items,
+  selectedValue,
+  onSelect,
+}: SelectGroupProps<T>) => (
+  <div css={S.selectGroupStyling} aria-label="옵션 선택">
+    {items.map(({ label, value }) => (
+      <button
+        key={String(value)}
+        type="button"
+        css={[
+          S.selectGroupItemStyling,
+          S.itemRadius,
+          value === selectedValue && S.selectedStyling,
+        ]}
+        onClick={() => onSelect?.(value)}
+        aria-pressed={value === selectedValue}
+        aria-label={`${label} 선택`}
+      >
+        {label}
+      </button>
+    ))}
     <div css={S.bottomBarStyling} />
   </div>
 );

src/components/atoms/ToggleGroup/ToggleGroup.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ToggleGroupItem, ToggleGroupProps } from '@/types/toggle';
 import {
   selectedStyling,
   firstItemRadius,
@@ -7,22 +8,21 @@ import {
   toggleButtonItemStyling,
 } from './ToggleGroup.style';
 
-export type ToggleGroupItem = {
-  label: string;
-  value: string;
-};
-
-export interface ToggleGroupProps {
-  items?: ToggleGroupItem[];
-  selectedValue?: string;
-  onClick?: (value: string) => void;
-}
-
 const defaultItems: ToggleGroupItem[] = [
-  { label: '인기순', value: 'views' },
-  { label: '최신순', value: 'createdAt' },
+  { label: '인기순', value: { field: 'views', order: 'desc' } },
+  { label: '최신순', value: { field: 'createdAt', order: 'desc' } },
 ];
 
+const isSelected = (
+  selectedValue: { field: string; order: 'asc' | 'desc' } | undefined,
+  value: { field: string; order: 'asc' | 'desc' },
+): boolean => {
+  if (!selectedValue) return false;
+  return (
+    selectedValue.field === value.field && selectedValue.order === value.order
+  );
+};
+
 const ToggleGroup = ({
   items = defaultItems,
   selectedValue,
@@ -31,18 +31,18 @@ const ToggleGroup = ({
   <div css={toggleButtonStyling}>
     {Array.isArray(items) &&
       items.length === 2 &&
-      items.map((item, idx) => (
+      items.map(({ label, value }, idx) => (
         <button
           type="button"
-          key={item.value}
+          key={`${value.field},${value.order}`}
           css={[
             toggleButtonItemStyling,
             idx === 0 ? firstItemRadius : secondItemRadius,
-            item.value === selectedValue && selectedStyling,
+            isSelected(selectedValue, value) && selectedStyling,
           ]}
-          onClick={() => onClick?.(item.value)}
+          onClick={() => onClick?.(value)}
         >
-          {item.label}
+          {label}
         </button>
       ))}
   </div>

src/components/molecules/ActionBox/ActionBox.tsx

@@ -1,12 +1,19 @@
 import React, { useState } from 'react';
 import ActionButton from '@/components/atoms/ActionButton/ActionButton';
+import { useNavigate } from 'react-router-dom';
+import { PATH } from '@/constants/path';
 import { actionBoxContainer } from './ActionBox.style';
 
 const ActionBox = () => {
+  const navigate = useNavigate();
   const [activeButton, setActiveButton] = useState('activity');
 
   const handleButtonClick = (buttonType: string) => {
     setActiveButton(buttonType);
+
+    if (buttonType === 'edit') {
+      navigate(PATH.CHANGE.PROFILE);
+    }
   };
 
   return (

src/components/molecules/ContentsButton/ContentsButton.style.ts

@@ -30,6 +30,7 @@ const sizeStyles = {
 };
 
 export const cardWrapper = (size: SizeType) => css`
+  all: unset;
   width: ${sizeStyles[size].width};
   height: ${sizeStyles[size].height};
   border-radius: 20px;
@@ -57,6 +58,11 @@ export const cardWrapper = (size: SizeType) => css`
       transform: scale(1.05);
     }
   }
+
+  &:focus-visible {
+    outline: 1px solid ${color.BK};
+    outline-offset: 1px;
+  }
 `;
 
 export const imageContainer = (size: SizeType) => css`

src/components/molecules/ContentsButton/ContentsButton.tsx

@@ -4,7 +4,7 @@ import Bookmark, { BookmarkProps } from '@/components/atoms/Bookmark/Bookmark';
 import { highlightText } from '@/utils/highlightText';
 import * as S from './ContentsButton.style';
 
-export interface ContentsButtonProps extends ComponentPropsWithRef<'div'> {
+export interface ContentsButtonProps extends ComponentPropsWithRef<'button'> {
   title: string;
   mainTag: string;
   subTag: string;
@@ -13,6 +13,7 @@ export interface ContentsButtonProps extends ComponentPropsWithRef<'div'> {
   showBookmark?: boolean;
   size?: 'large' | 'medium' | 'small';
   keyword?: string;
+  onClick: () => void;
 }
 
 const ContentsButton = ({
@@ -24,10 +25,16 @@ const ContentsButton = ({
   keyword,
   bookmarked = false,
   showBookmark = true,
+  onClick,
   ...attributes
 }: ContentsButtonProps) => {
   return (
-    <div css={S.cardWrapper(size)} {...attributes}>
+    <button
+      type="button"
+      css={S.cardWrapper(size)}
+      onClick={onClick}
+      {...attributes}
+    >
       <div css={S.imageContainer(size)}>
         <div css={S.imageWrapper}>
           <img src={images[0]} alt="option A" css={S.image} />
@@ -50,7 +57,7 @@ const ContentsButton = ({
           <Bookmark bookmarked={bookmarked} css={S.bookmarkWrapper} />
         )}
       </div>
-    </div>
+    </button>
   );
 };
 

src/components/molecules/InfoBox/InfoBox.style.ts

@@ -3,6 +3,7 @@ import color from '@/styles/color';
 import typo from '@/styles/typo';
 
 export const infoContainer = css`
+  all: unset;
   display: flex;
   width: 904px;
   height: 84px;
@@ -15,6 +16,11 @@ export const infoContainer = css`
   border-radius: 15px;
   background-color: ${color.WT};
   box-sizing: border-box;
+
+  &:focus-visible {
+    outline: 1px solid ${color.BK};
+    outline-offset: 1px;
+  }
 `;
 
 export const textContainer = css`
@@ -33,6 +39,7 @@ export const titleLabel = css`
   ${typo.Main.Medium_16};
   color: ${color.BK};
   margin: 0;
+  text-align: left;
 `;
 
 export const subtitleWrapper = css`

src/components/molecules/InfoBox/InfoBox.tsx

@@ -8,16 +8,18 @@ export interface InfoBoxProps {
   commentContent: string;
   commentCount: number;
   bookmarks: number;
+  onClick: () => void;
 }
 const InfoBox = ({
   title,
   prefix,
   commentContent,
   commentCount,
   bookmarks,
+  onClick,
 }: InfoBoxProps) => {
   return (
-    <div css={S.infoContainer}>
+    <button type="button" css={S.infoContainer} onClick={onClick}>
       <div css={S.textContainer}>
         <p css={S.titleLabel}>{title}</p>
         <p css={S.subtitleWrapper}>
@@ -27,7 +29,7 @@ const InfoBox = ({
       </div>
       <InfoLabel label="톡댓톡" count={commentCount} />
       <InfoLabel label="저장" count={bookmarks} />
-    </div>
+    </button>
   );
 };
 

src/components/molecules/MyContentBox/MyContentBox.style.ts

@@ -3,6 +3,7 @@ import color from '@/styles/color';
 import typo from '@/styles/typo';
 
 export const infoContainer = css`
+  all: unset;
   display: flex;
   width: 904px;
   height: 61px;
@@ -15,6 +16,11 @@ export const infoContainer = css`
   border-radius: 15px;
   background-color: ${color.WT};
   box-sizing: border-box;
+
+  &:focus-visible {
+    outline: 1px solid ${color.BK};
+    outline-offset: 1px;
+  }
 `;
 
 export const textContainer = css`
@@ -33,6 +39,7 @@ export const titleLabel = css`
   ${typo.Main.Medium_16};
   color: ${color.BK};
   margin: 0;
+  text-align: left;
 `;
 
 export const bookmarkWrapper = css`

src/components/molecules/MyContentBox/MyContentBox.tsx

@@ -9,16 +9,18 @@ export interface MyContentBoxProps {
   bookmarks: number;
   showBookmark?: boolean;
   bookmarked?: BookmarkProps['bookmarked'];
+  onClick: () => void;
 }
 const MyContentBox = ({
   title,
   commentCount,
   bookmarks,
   showBookmark = false,
   bookmarked = false,
+  onClick,
 }: MyContentBoxProps) => {
   return (
-    <div css={S.infoContainer}>
+    <button type="button" css={S.infoContainer} onClick={onClick}>
       <div css={S.textContainer}>
         <p css={S.titleLabel}>{title}</p>
       </div>
@@ -27,7 +29,7 @@ const MyContentBox = ({
       {showBookmark && (
         <Bookmark bookmarked={bookmarked} css={S.bookmarkWrapper} />
       )}
-    </div>
+    </button>
   );
 };