Skip to content

Commit 49aae87

Browse files
authored
refactor: 마이페이지에서 발생한 이슈들 수정 (#289)
* refactor: 단일회원 조회 api는 더이상 memberId를 보내지 않습니다. * refactor: 수정된 api에 맞춰 커스텀 훅과 해당 훅의 사용법을 수정합니다. * refactor: 마이페이지가 중앙 정렬되며 오버플로우가 발생하지 않습니다. * refactor: css 선언 방식을 객체 스타일링으로 수정합니다. * refactor: 클릭 이벤트가 존재하는 컴포넌트에 cursor 옵션을 추가합니다. * refactor: 컴포넌트 내부 인터페이스를 재사용이 용이한 네이밍으로 수정합니다. * refactor: 댓글과 투표에 해당 하는 인터페이스의 종속성을 컴포넌트와 분리합니다. * refactor: 독립된 인터페이스를 커스텀 훅에 반영합니다. * refactor: 컴포넌트의 스타일링을 객체 스타일링 방식으로 수정합니다. * feat: 랜덤 이미지를 위한 이미지 파일을 추가합니다. * feat: 컴포넌트에 이미지가 없을 때 랜덤 이미지를 출력합니다. * refactor: 이미지 컨테이너에 border을 삭제합니다. * refactor: 북마크 클릭 이벤트 처리를 위한 인터페이스를 추가하고 적용합니다. * feat: 로그인 여부를 판단하는 유틸리티 함수를 추가합니다. * feat: 변경된 api의 엔드 포인트를 반영합니다. * move: 사용하지 않는 import문을 제거합니다. * refactor: 이미지가 undefined로 이루어진 객체로 전송될 때에의 케이스도 반영합니다. * feat: 범용적으로 사용가능한 북마크 추가, 제거 훅을 구현합니다. * feat: 범용적으로 사용가능한 북마크 인터페이스를 생성합니다. * refactor: 북마크 추가, 삭제 훅의 반환 타입을 구체적으로 명시합니다. * refactor: 불필요한 async 선언을 제거합니다. * bug: mutation 객체 생성 시 onMutate가 인식되지 않는 문제 * feat: 랜딩페이지 전용 북마크 래퍼를 생성합니다. * feat: 북마크 래퍼를 랜딩페이지에 적용합니다. * refactor: 컴포넌트의 북마크 부분을 별도의 이벤트 처리를 하도록 props를 추가합니다. * feat: 인터페이스의 구조를 api response에 맞게 수정합니다. * refactor: 단일 회원 조회가 더 이상 memberId를 필요로 하지 않습니다. * refactor: writerId가 내 아이디와 동일하면 북마크 아이콘을 표시하지 않습니다. * refactor: 비회원이 북마크 클릭 시 로직을 추가합니다. * refactor: useMemo의 의존성에 member 객체 전체가 아닌 member의 id를 사용해 명시합니다. * refactor: 콜백 함수의 의존성 배열에 외부 상태의 값을 추가합니다. * refactor: 훅의 선언 시점을 수정합니다. * refactor: import문의 선언 순서를 그룹화 합니다. * refactor: 불변 함수를 의존성 배열에서 제거합니다. * refactor: 북마크 실패 시 mutation을 오버라이딩합니다. * refactor: 북마크 래퍼 훅에서 불필요한 액션을 제거합니다. * refactor: api 응답 인터페이스를 api response에 맞게 수정합니다. * refactor: api 인터페이스와 ui 인터페이스를 분리합니다. * refactor: ui의 props가 되는 인터페이스를 공통 인터페이스로 분리합니다. * refactor: 무한 스크롤 훅이 2개의 제네릭을 매개변수로 받도록 수정합니다. (ts docs를 포함) * feat: api response data를 ui 인터페이스로 변환하는 유틸리티 함수를 구현합니다. * feat: 커스텀 훅에서 api 에서 ui 인터페이스의 변환을 캡슐화합니다. * feat: 톡픽 관련 데이터 변환 유틸리티 함수를 추가합니다. * feat: 톡픽 관련 인터페이스를 추가합니다. * refactor: 커스텀 훅의 데이터 변환 로직을 캡슐화합니다. * refactor: ui 관련 데이터 객체를 컴포넌트 외부로 이전합니다. * feat: 마이페이지 밸런스게임 데이터 변환 로직을 유틸리티 함수로 추가합니다. * refactor: 밸런스게임 마이페이지 커스텀 훅은 데이터 변환 로직을 캡슐화 합니다. * move: 더 이상 사용하지 않는 북마크 훅을 삭제합니다. * feat: 마이페이지에서 사용되는 북마크 래퍼 훅을 항목 별로 구현합니다. * refactor: 실제 북마크를 사용하는 인터페이스만 공용 인터페이스에 선언 후 ts.docs를 수정합니다. * refactor: 컴포넌트가 북마크 클릭 이벤트 핸들러를 전달 받을 수 있는 props를 추가합니다. * refactor: 마이페이지 랜더링 로직을 수정하고, 북마크 핸들러를 추가합니다. * refactor: 북마크 클릭 이벤트 처리를 옵셔널 체이닝 방식으로 수정합니다. * refactor: 스타일링 방식을 객체 리터럴 방식으로 수정하고 cursor 속성을 추가합니다. * typo: 중첩 선택자 전에 줄바꿈 처리를 합니다. * refactor: mutate 객체를 오버라이딩 해 error시 토스트 모달 처리를 합니다. * feat: 토스트 모달을 위한 스타일을 추가합니다. * feat: 메모이제이션 처리를 통해 랜덤 이미지가 재랜더링 시 다시 호출되지 않도록 합니다. * refactor: 사이드바 클릭 시 네비게이션 로직을 절대 경로로 수정합니다. * fix: 톡픽 북마크 시 톡픽 북마크 api를 연동합니다. * feat: 컴포넌트의 인터페이스 속성을 추가합니다. * fix: 실제 반환 받는 데이터의 이름을 정정합니다. * refactor: 내가 저장한 톡픽 커스텀 훅이 InfiniteData 형태를 반환하도록 수정합니다. * refactor: 톡픽 북마크 삭제 커스텀 훅이 InfiniteData를 제어하고, 쿼리 무효화를 하지 않습니다. * refactor: 톡픽 북마크 추가 커스텀 훅이 InfiniteData를 제어하도록 수정합니다. * refactor: 무한 데이터의 데이터 가공 과정을 페이지 컴포넌트에서 처리합니다. * refactor: 밸런스 게임 훅이 무한 데이터를 반환하도록 수정합니다. * refactor: 북마크 래핑 훅이 무한 데이터를 다루고, 해당 데이터를 반환합니다. * feat: 북마크 이벤트 핸들러에 onSuccess 시 토스트 메시지 로직을 오버라이딩합니다. * refactor: 스켈레톤 개수를 예상되는 데이터의 결과 상수로 처리합니다. * refactor: 공통된 북마크 핸들러를 제너릭 타입으로 처리합니다. * feat: 북마크 토스트 모달에 필요한 메시지를 상수화합니다. * feat: 토스트 모달의 메시지를 상수화하여 적용합니다. * refactor: 커스텀 훅이 isLoading과 isError도 반환하도록 추가합니다. * move: 같은 동작을 하는 서로 다른 커스텀 훅을 단일화합니다. * move: 더이상 사용하지 않는 인터페이스를 제거합니다. * refactor: 사이드 바의 데이터를 불러오는 훅을 재구성 후 적용합니다. * refactor: 서브 태그에 대한 조건부 렌더링을 추가합니다. * fix: 머지 과정에서 중복된 코드를 수정합니다. * fix: 논리 연산자를 널 병합 연산자로 수정합니다. * refactor: 데이터 패칭 훅의 반환되는 데이터 명을 통일합니다. * refactor: 마이페이지 내부의 라우팅을 분할하고 중첩 라우트를 적용합니다. * refactor: 옵션 세트의 enum을 소문자로 통일합니다. * refactor: 마이페이지 관리 훅을 useLocation을 이용한 중첩 라우팅 기준으로 처리합니다. * refactor: Outlet을 이용하여 마이페이지 랜더링 처리를 분할합니다. * feat: 톡픽 스켈레톤 개수를 상수화 처리합니다. * feat: 밸런스 게임 북마크 로직을 래퍼 훅으로 생성합니다. * refactor: 톡픽 하위 컴포넌트를 분할합니다. * refactor: 밸런스게임 하위 컴포넌트를 분할합니다. * feat: redux toolkit의 immer 기능을 사용하기 위해 eslint에 예외 규칙을 추가합니다. * feat: 토스트 모달 상태를 전역 상태로 수정합니다. * feat: redux에 toastReducer를 주입합니다. * Revert "feat: redux에 toastReducer를 주입합니다." This reverts commit 964c697. * feat: redux에 toastReducer를 주입합니다. * feat: 토스트 모달 컨테이너의 공통 스타일을 설정합니다. * feat: 토스트 모달을 사용하는 래퍼 컴포넌트를 구현합니다. * refactor: 톡픽 컴포넌트가 전역 상태로 토스트 모달을 관리하도록 수정합니다. * refactor: 밸런스게임용 공통 북마크 훅이 전역 상태를 참조하도록 수정합니다. * refactor: 마이페이지에서 토스트 모달 컨테이너를 직접호출하는 방식으로 수정합니다. * typo: 오탈자를 수정합니다. * typo: 마이페이지에서 사용되는 훅들의 네이밍을 통일합니다. * move: 사용하지 않는 스타일 코드를 삭제합니다. * refactor: flatmap을 ui 단에서 처리하도록 커스텀 훅을 수정합니다. * refactor: 마이페이지 밸런스게임 컴포넌트의 랜더링 방식을 변경합니다. * feat: 마이페이지 밸런스 게임 란의 무한 스크롤을 추상화한 컴포넌트를 생성합니다. * refactor: 추상화된 마이페이지 무한 스크롤 컴포넌트를 각 페이지에 반영합니다. * move: 사용하지 않는 스타일링을 삭제합니다. * refactor: 마이페이지 톡픽의 데이터 패칭 훅이 공통적으로 무한데이터를 반환하도록 수정합니다. * refactor: 수정한 커스텀 훅을 각 페이지 컴포넌트에 반영합니다. * feat: 마이페이지 톡픽의 무한 스크롤 기능이 추상화된 컴포넌트를 구현합니다. * refactor: 톡픽 렌더링 로직을 추상화된 무한 스크롤 컴포넌트를 사용해 처리합니다. * refactor: 랜딩 페이지 북마크 훅의 공통 로직을 추출합니다. * refactor: 랜딩 페이지 북마크 훅에 대한 래퍼 훅을 사용합니다. * refactor: 북마크 타입을 유니온 타입에서 단일 타입으로 수정합니다. * refactor: 랜딩 페이지 북마크 훅의 중복되는 부분을 공통 함수로 처리합니다. * feat: 마이페이지 북마크의 공통 요소를 하나의 훅으로 추출합니다. * refactor: 기존 커스텀 훅을 마이페이지 북마크를 다루는 래퍼 훅으로 처리합니다. * feat: 마이페이지 톡픽 북마크를 다루는 공통 부분을 하나의 훅으로 선언합니다. * refactor: 마이페이지 톡픽 북마크를 다루는 기존 훅들을 래퍼 훅으로 수정합니다. * refactor: promise all을 이용해 각 배열의 요소를 동시에 호출합니다. * refactor: 북마크 처리 훅의 중복 로직을 개선합니다. * refactor: 기존 컴포넌트 내부에 선언된 북마크 로직을 훅으로 분리 후 사용합니다.
1 parent 536986c commit 49aae87

79 files changed

Lines changed: 1843 additions & 912 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.eslintrc.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,10 @@
7171
"htmlFor"
7272
]
7373
}
74-
]
74+
],
75+
"no-param-reassign": ["error", {
76+
"props": true,
77+
"ignorePropertyModificationsFor": ["state"]
78+
}]
7579
}
7680
}

src/App.tsx

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,15 @@ import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
77
import MyPage from '@/pages/MyPage/MyPage';
88
import SearchGamePage from '@/pages/SearchResultsPage/SearchGamePage';
99
import SearchTalkPickPage from '@/pages/SearchResultsPage/SearchTalkPickPage';
10+
import BalanceGameLayout from '@/pages/MyPage/BalanceGameLayout';
11+
import TalkPickLayout from '@/pages/MyPage/TalkPickLayout';
12+
import TalkPickBookmarks from '@/pages/MyPage/TalkPick/TalkPickBookmarks';
13+
import TalkPickWritten from '@/pages/MyPage/TalkPick/TalkPickWritten';
14+
import BalanceGameVotes from '@/pages/MyPage/BalanceGame/BalanceGameVotes';
15+
import BalanceGameBookmarks from '@/pages/MyPage/BalanceGame/BalanceGameBookmarks';
16+
import TalkPickVotes from '@/pages/MyPage/TalkPick/TalkPickVotes';
17+
import TalkPickComments from '@/pages/MyPage/TalkPick/TalkPickComments';
18+
import BalanceGameWritten from '@/pages/MyPage/BalanceGame/BalanceGameWritten';
1019
import BalanceGameEditPage from '@/pages/BalanceGameEditPage/BalanceGameEditPage';
1120
import ProtectedRoutes from './components/Routes/ProtectedRoutes';
1221
import { PATH } from './constants/path';
@@ -96,7 +105,20 @@ const App: React.FC = () => {
96105

97106
<Route element={<ProtectedRoutes isLoggedIn={isLoggedIn} />}>
98107
<Route path={PATH.MYPAGE} element={<LayoutNoFooter />}>
99-
<Route index element={<MyPage />} />
108+
<Route element={<MyPage />}>
109+
<Route path="talkpick" element={<TalkPickLayout />}>
110+
<Route path="bookmarks" element={<TalkPickBookmarks />} />
111+
<Route path="written" element={<TalkPickWritten />} />
112+
<Route path="votes" element={<TalkPickVotes />} />
113+
<Route path="comments" element={<TalkPickComments />} />
114+
</Route>
115+
<Route path="balancegame" element={<BalanceGameLayout />}>
116+
<Route path="bookmarks" element={<BalanceGameBookmarks />} />
117+
<Route path="votes" element={<BalanceGameVotes />} />
118+
<Route path="written" element={<BalanceGameWritten />} />
119+
</Route>
120+
<Route index element={<TalkPickBookmarks />} />
121+
</Route>
100122
</Route>
101123
<Route path="/" element={<Layout />}>
102124
<Route path={PATH.CREATE.TALK_PICK} element={<CreatePostPage />} />

src/api/mypages.ts

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,8 @@ import {
66
MyComment,
77
MyVote,
88
MyWritten,
9-
SideBar,
109
} from '@/types/mypages';
1110
import { END_POINT } from '@/constants/api';
12-
import { Id } from '@/types/api';
1311
import { axiosInstance } from './interceptor';
1412

1513
export const getMyWritten = async (page: number, size: number) => {
@@ -60,8 +58,3 @@ export const getGameBookmark = async (page: number, size: number) => {
6058
);
6159
return data;
6260
};
63-
64-
export const getMyInfo = async (memberId: Id): Promise<SideBar> => {
65-
const { data } = await axiosInstance.get<SideBar>(`/members/${memberId}`);
66-
return data;
67-
};
2.88 KB
Loading
3.57 KB
Loading
2.35 KB
Loading
3.11 KB
Loading
2.77 KB
Loading
2.65 KB
Loading

src/assets/index.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,12 @@ export { default as MobileGameBannerFirst } from './images/mo-game-banner-first.
126126
export { default as MobileGameBannerSecond } from './images/mo-game-banner-second.png';
127127
export { default as RedCheckIcon } from './svg/red-check-icon.svg';
128128
export { default as BlueCheckIcon } from './svg/blue-check-icon.svg';
129+
export { default as RandomBlackFrame } from './images/random-black-frame.png';
130+
export { default as RandomBlueFrame } from './images/random-blue-frame.png';
131+
export { default as RandomGreenFrame } from './images/random-green-frame.png';
132+
export { default as RandomPinkFrame } from './images/random-pink-frame.png';
133+
export { default as RandomPurpleFrame } from './images/random-purple-frame.png';
134+
export { default as RandomTealFrame } from './images/random-teal-frame.png';
129135
export { default as StatusNotRequired } from './svg/status-not-required.svg';
130136
export { default as StatusFail } from './svg/status-fail.svg';
131137
export { default as SadEmoji } from './svg/sad-emoji.svg';

0 commit comments

Comments
 (0)