[ 📚 Library ] 라이브러리 리팩토링 #155

pinktopaz · 2023-02-09T13:58:25Z

🔥 Related Issues

resolved #145

💜 작업 내용 + 🔥 트러블슈팅

~ 서버통신 useSWRInfinite 적용 (가로, 세로 모두)

// ✅ 세로 무한스크롤 (useGetAllVoteInfo.tsx)
const getKey = (prevLastDate: number, allVoteInfo: AxiosResponse<EndedVoteInfo>) => {
  if (prevLastDate === 0) return `/vote/library/scroll/all?flag=${prevLastDate}`;
  if (allVoteInfo) return `/vote/library/scroll/all?flag=${allVoteInfo.data.dates[allVoteInfo.data.dates.length - 1]}`;
  return null;
};

export const useGetAllVoteInfo = () => {
  const { data, isLoading, error, size, setSize } = useSWRInfinite<AxiosResponse<EndedVoteInfo>>(
    getKey,
    picmeGetFetcher,
    {
      errorRetryCount: 3,
    },
  );

  const parseResultList = data?.map((item) => item.data.dates).flat();

  return {
    allVoteInfoList: { dateList: parseResultList ? parseResultList : [] },
    isLoading,
    isError: error,
    size,
    setSize,
  };
};

→ 처음에는 SWR만 적용했었는데, 서버 통신 결과가 종종 null로 와서 화면에 투표가 렌더링되지 않았습니다.
@Happhee 덕분에 useSWRInfinite를 적용했고, 해당 문제를 해결했습니다.
userSWRInfinite에 포함된 함수 getKey는 현재 페이지의 인덱스와 이전 페이지의 데이터를 받기 때문에 첫 호출과 이후 호출, 그리고 마지막 호출에 대한 분기처리가 가능합니다.

~ 가로, 세로 스크롤 서버 통신 변경사항 반영

 const { data, isLoading, error, size, setSize } = useSWRInfinite<AxiosResponse<VoteInfo[]>>(
    (idx: number, monthlyVoteInfo: AxiosResponse<VoteInfo[]>) => {
      if (idx === 0) return `/vote/library/scroll/month?flag=${0}&date=${date}`;
      if (monthlyVoteInfo.data[0])
        return `/vote/library/scroll/month?flag=${
          monthlyVoteInfo.data[monthlyVoteInfo.data.length - 1].id
        }&date=${date}`;
      return null;
    },

→ 기존 : 세로 API를 호출했을 때 기본적으로 가로 무한스크롤의 초기 데이터 5개가 세팅이 되고, 그 다음부터 새로 가로 무한스크롤 API를 호출하는 형식
→ 현재 : 세로 API에서 초기 데이터 5개를 보내주지 않고 날짜만 전달해주고, 가로 무한스크롤 API에서 처음에는 flag=0를 보내서 초기데이터 5개를 받아오는 형식

SWR을 적용하기 전에는 세로 무한스크롤 컴포넌트에서 date를 props로 넘겨주어 가로 무한스크롤 API의 인자로 넣어주었는데, SWR을 적용하니 props로 넘겨준 정보를 사용하는 것이 어려워져서 어떻게 날짜를 인자로 넣어줄 수 있을지 고민했습니다.
→ @Happhee 의 도움으로 해당 구조가 데이터 패칭 로직 상 자연스럽지 않다는 판단이 들어 서버에 수정 요청하여 해결했습니다!

~ Empty View 추가

<StEmptyView>
  <div>
    <IcEmptyLibrary />
    <p>아직 마감된 투표가 없어요!</p>
  </div>
</StEmptyView>

~ 라이브러리 아이템간 간격 버그 해결

:first-child {
    margin-left: 2rem;
  }
  :last-child {
    margin-left: 0; // ✅ div로 감싸고 있는 구조라 이걸 넣어주지 않으면 왼쪽에 마진이 생겨서 넣어주었습니다!
    margin-right: 2rem;
  }

→ 부모컴포넌트인 MonthVoting.tsx에서 자식 선택자로 간격을 조정하려고 계속 시도했는데, 그냥 자식 컴포넌트인 EndedVoting.tsx에서 아래와 같이 처리해주니 간격이 깔끔하게 맞더라구요!

✅ PR Point

1️⃣ SWR을 적용하면서 가로 무한스크롤 아이템들을 state로 관리하지 않게 되었어요!
그래서 투표 삭제 후 새로고침을 발생시켜서 삭제 후 데이터가 다시 쭉 렌더링되도록 처리했는데 이게 최선인지 아직 잘 모르겠어서 한 번 봐주시면 좋을 것 같아요!

const handleConfirmModal = (id: string) => {
    handleDeleteVote(id);
    setIsShowing((prev) => !prev);
    window.location.reload();
  };

2️⃣ 코드를 최대한 정리한다고 했는데 아직 최대한 clean한지 잘 모르겠어서 한 번 봐주시면 감사하겠습니다 🙏🏻

3️⃣ SWR 호출 이슈

→ 상단 사진이 세로 스크롤을 처음 호출하고 그 결과를 콘솔에 찍었을 때인데요, 보시는 것처럼 호출이 복수로 이루어지고 있습니다.
SWR 공식 레포지토리에 이슈로 올라온 글 [SWRInfinte bug]: repeated api calls for initial page index 을 보니 useSWRInfinite 자체의 문제인 것 같기도 한데, 아직 완전히 해결방법은 찾지 못했습니다!😭

👀 스크린샷

2023-02-09.10.11.13.mov

Hotfix/143

netlify · 2023-02-09T13:58:30Z

✅ Deploy Preview for deluxe-otter-55aa15 ready!

Name	Link
🔨 Latest commit	`7a88827`
🔍 Latest deploy log	https://app.netlify.com/sites/deluxe-otter-55aa15/deploys/63e4fc0471bb1e0008ae1928
😎 Deploy Preview	https://deploy-preview-155--deluxe-otter-55aa15.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Happhee

떵경이 서버와의 소통도 이번에 한번더 성장하게 된 계기가 아닐가 싶어! 글구 저거 콘솔 많이찍히는거 나도 계속 찾아보고 이따유!! 혹시모 찾게 데면 공유 부탁해!!

저게 보니까 swr에서 키가 유일한 키가 아니면? 반복호출한다는데 useSWRInfinite에서 이 현상이 생각보다 다들 많이 나타나더라구! 차근차근 알아보자! 고생해써 !!

Happhee · 2023-02-09T14:39:14Z

src/lib/hooks/useGetAllVoteInfo.tsx

+const getKey = (prevLastDate: number, allVoteInfo: AxiosResponse<EndedVoteInfo>) => {
+  if (prevLastDate === 0) return `/vote/library/scroll/all?flag=${prevLastDate}`;
+  if (allVoteInfo) return `/vote/library/scroll/all?flag=${allVoteInfo.data.dates[allVoteInfo.data.dates.length - 1]}`;
+  return null;


넘 조쿠요!

Happhee · 2023-02-09T14:40:25Z

src/lib/hooks/useGetMonthlyLibraryInfo.tsx

@@ -7,15 +7,12 @@ import { picmeGetFetcher } from '../axios';
 export const useGetMonthlyLibraryInfo = (date: number) => {
  const { data, isLoading, error, size, setSize } = useSWRInfinite<AxiosResponse<VoteInfo[]>>(
    (idx: number, monthlyVoteInfo: AxiosResponse<VoteInfo[]>) => {
-      // date 받으려고 따로 getKey 선언한걸 뺐어!!!!
      if (idx === 0) return `/vote/library/scroll/month?flag=${0}&date=${date}`;


Suggested change

if (idx === 0) return `/vote/library/scroll/month?flag=${0}&date=${date}`;

if (!idx ) return `/vote/library/scroll/month?flag=0&date=${date}`;

이케 하면 데는거 아닌가?!

우웅! 맞다! 더 깔끔하네! 바꿨어요오

Happhee · 2023-02-09T14:41:35Z

src/pages/Library.tsx

@@ -45,15 +44,15 @@ const Library = () => {
          navigate('/home');
        }}
      />
-      {allVoteInfoList.list.length !== 0 ? (
+      {allVoteInfoList.dateList.length !== 0 ? (


Suggested change

{allVoteInfoList.dateList.length !== 0 ? (

{ allVoteInfoList.dateList.length ? (

로 쓰면 될것같아용~!

반영해떠! 고마어!!!

Brokyeom · 2023-02-10T13:34:43Z

src/pages/Library.tsx

+        <StEmptyView>
+          <div>
+            <IcEmptyLibrary />
+            <p>아직 마감된 투표가 없어요!</p>
+          </div>
+        </StEmptyView>


여기서 시맨틱 태그에 바로 스타일을 적용해도 될거같은데 하위에 div 를 줘서 구성한 이유가 있을까?

아이콘이랑 텍스트를 한 덩어리로 취급하고 싶었나봐...!
근데 시루 말대로 하는게 더 깔끔할 것 같아서 그렇게 바꿔서 적용했어! 고마어!!

Brokyeom · 2023-02-10T13:37:35Z

src/lib/api/voting.ts

@@ -37,7 +37,7 @@ export const getCurrentVoteDatailData = async (voteid: string | undefined) => {

 export const getCurrentVoteData = async (resCursorId: number) => {
  try {
-    const data = await client.get<AxiosResponse<VoteResultData>>(`vote/getCurrentVote/${resCursorId}`);
+    const data = await client.get<AxiosResponse<VoteResultData>>(`vote/list/${resCursorId}`);


여기 인자 이름 resCursorId 가 디벨롭에서는 cursorId 여서 나도 머지컨플릭트 해결할 때 cursorId 로 해서 머지했는데 어떤 이름이 더 적합할까? 통일해야할듯!

요거 내가 리팩토링한 부분인데 SWR로 적용하면서 이 함수는 없어졌어!! ㅎㅎ

요거 내가 리팩토링한 부분인데 SWR로 적용하면서 이 함수는 없어졌어!! ㅎㅎ

아하 굿 ㅎ

Brokyeom · 2023-02-10T13:39:28Z

src/components/Library/EndedVoting.tsx

          <StVotingTitle>{voteData.title}</StVotingTitle>
          <StVotingDate>
-            {time1}월 {time2}일
+            {createdMonth}월 {createdDate}일


명확한 네이밍 굿~

Brokyeom · 2023-02-10T13:40:11Z

src/components/Library/EndedVoting.tsx

  const handleModal = (prev: boolean) => {
    setIsShowing((prev) => !prev);
  };

-  const handleMoveResult = () => {
+  const handleGoToResult = () => {


기능에 대해서 더 명확하게 알아보게 하려는 의도가 좋군요~!

Brokyeom · 2023-02-10T13:41:50Z

야무진 리팩토링 굿! SWR의 페이지네이션 기능 활용에 대해서 한번 더 배우게 되네
함수 네이밍 등 디테일한 부분까지 좀더 알아보기 쉬운 코드를 짜려는 노력이 보여서 좋다!! 고생했어~!~

iamphj3

떵경이 가로세로 무한스크롤 리팩토링까지 폼 미쳤다... useSWRInfinite까지 쓸 수 있는 우리,,,, 짱이야,,,,

iamphj3 · 2023-02-10T13:27:58Z

src/components/Library/MonthVoting.tsx

+  const handleDeleteVote = (id: string) => {
+    deleteVote(id);
  };


setState와 같이 변경된 데이터를 업데이트하기 위해서는, mutate 함수를 이용하면 된다.
mutate함수가 호출되면 해당 상태를 즉시 fetch하고 데이터를 갱신한다.

라구 합니둥!! 그리구 axios 서버통신 부분인 것 같은데 async, await 넣어줘야 할거같아용!

Suggested change

const handleDeleteVote = (id: string) => {

deleteVote(id);

};

const handleDeleteVote = async (id: string) => {

await deleteVote(id);

return mutate();

};

꼬마어!! mutate SWR 때문에 실컷 공부해놓고 적용을 못했네!ㅠㅠ 덕분에 이제 잘 쓸 수 있겠다 반영해떠!!!

iamphj3 · 2023-02-10T13:32:32Z

src/lib/hooks/useGetMonthlyLibraryInfo.tsx

+import { picmeGetFetcher } from '../axios';
+
+export const useGetMonthlyLibraryInfo = (date: number) => {
+  const { data, isLoading, error, size, setSize } = useSWRInfinite<AxiosResponse<VoteInfo[]>>(


1️⃣ SWR을 적용하면서 가로 무한스크롤 아이템들을 state로 관리하지 않게 되었어요!
그래서 투표 삭제 후 새로고침을 발생시켜서 삭제 후 데이터가 다시 쭉 렌더링되도록 처리했는데 이게 최선인지 아직 잘 모르겠어서 한 번 봐주시면 좋을 것 같아요!

-> 찾아보니까 SWR로 상태관리를 하려면 mutate를 사용하면 된다구 하네!
성경이 브랜치 내 로컬에서 받아서 작업해봤는데 새로고침 하지 않고도 삭제한 거 화면에 바로 반영되는거 확인돼서 suggestion으로 수정한 부분 달아놓을게!!

요거 참고했어! 3. SWR로 상태관리가 가능할까?

Suggested change

const { data, isLoading, error, size, setSize } = useSWRInfinite<AxiosResponse<VoteInfo[]>>(

const { data, isLoading, error, size, setSize, mutate } = useSWRInfinite<AxiosResponse<VoteInfo[]>>(

iamphj3 · 2023-02-10T13:32:51Z

src/lib/hooks/useGetMonthlyLibraryInfo.tsx

+    setSize,
+  };


Suggested change

setSize,

};

setSize,

mutate,

};

iamphj3 · 2023-02-10T13:34:44Z

src/components/Library/EndedVoting.tsx

+  const createdAtStr = voteData.createdAt.toString();
+  const createdMonth = createdAtStr.slice(5, 6) === '0' ? createdAtStr.slice(6, 7) : createdAtStr.slice(5, 7);
+  const createdDate = createdAtStr.slice(8, 9) === '0' ? createdAtStr.slice(9, 10) : createdAtStr.slice(8, 10);


옹 훨씬 명확해졌당 굿~!!

iamphj3 · 2023-02-10T13:38:10Z

src/components/Library/EndedVoting.tsx

    handleDeleteVote(id);
    setIsShowing((prev) => !prev);
+    window.location.reload();


Suggested change

window.location.reload();

iamphj3 · 2023-02-10T14:05:13Z

src/components/Library/EndedVoting.tsx

+  :first-child {
+    margin-left: 2rem;
+  }
+  :last-child {
+    margin-left: 0;
+    margin-right: 2rem;
+  }


요렇게 해버리면 라이브러리에 항목이 1개밖에 없을 때 :last-child가 적용이 되어서, margin-left가 0이 된다 ㅜㅜ!
나도 궁금해서 수정해봤는데 해결한거같아서 suggestion으로 달아볼게!! 밑에 MonthVoting.tsx에도 하나 더 있엉!!!

Suggested change

:first-child {

margin-left: 2rem;

}

:last-child {

margin-left: 0;

margin-right: 2rem;

}

margin-right: 1.521rem;

:last-child {

margin-right: 2rem;

}

데이터 하나일 때를 테스트를 못해봤었구나 내가!! 쭈아

margin-right: 1.521rem;

이거는 gap에서 이 역할을 하고 있어서 뺐어! 이것까지 넣으면 사이 간격이 더 길어져서ㅠㅠ
고마어 현지 똑똑이~

iamphj3 · 2023-02-10T14:07:24Z

src/components/Library/MonthVoting.tsx


  width: 100%;
  margin-top: 1.7rem;


요렇게 하면 마진 이슈 해결되는거같아!!!

Suggested change

width: 100%;

margin-top: 1.7rem;

display: flex;

width: 100%;

padding-left: 2rem;

margin-top: 1.7rem;

flex,margin은 위에 있어서 padding만 적용해써! 고마어!

netlify · 2023-02-10T17:33:51Z

✅ Deploy Preview for snazzy-seahorse-7d3184 ready!

Name	Link
🔨 Latest commit	`8fb84ff`
🔍 Latest deploy log	https://app.netlify.com/sites/snazzy-seahorse-7d3184/deploys/63e916cd2fca410007e834e5
😎 Deploy Preview	https://deploy-preview-155--snazzy-seahorse-7d3184.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

woogisea

수고했으요~~

woogisea · 2023-02-12T02:58:49Z

src/components/Library/EndedVoting.tsx

-          <StVotingPic src={voteData.url} onClick={handleMoveResult} />
+          <StVotingPic src={voteData.url} onClick={handleGoToResult} />


요기 alt 태그 필요없나요??? img태그에 onClick이벤트를 적용한거라면 cursor : pointer css를 통해 마우스 커서 모양을 변경해서 클릭을 할 수 있다는 정보를 줘도 좋을 거 같습니다~

woogisea · 2023-02-12T03:03:03Z

src/lib/hooks/useGetMonthlyLibraryInfo.tsx

+    },
+  );
+
+  const parseResultList = data?.map((item) => item.data).flat();


flat 요소는 처음 봤는데 유용하군,,

Happhee and others added 23 commits February 6, 2023 16:08

fix : 메이커 투표 리스트 가져오는 서버 경로 수정

6fac867

fix : 플레이어 투표 조회 서버 경로 수정

27c88c4

fix : 경로 수정

5667036

Merge pull request #144 from Pic-me-Pic-me/hotfix/143

a1361f0

Hotfix/143

chore : id string으로 타입 변경

0a7bd08

feat : 라이브러리 세로 스크롤 SWR 적용

762c521

feat : 라이브러리 가로 스크롤 SWR 적용

5b01fca

fix : 가로스크롤 아이템 간격 이슈 해결

038676d

chore :불필요한 코드 정리

579c75e

chore : empty 뷰 추가

9dfc9e4

chore : SWR 적용중

258a0b7

chore : 불필요한 코드 정리

1535713

chore : 아이콘 추가

ecd83c7

feat : 세로스크롤 SWRInfinite 적용

5201948

fix : props 변경

9e80646

fix : date 사용을 위한 구조 변경

86b6012

fix : props 삭제

350abf3

feat : 투표 삭제 후 새로고침 되도록 처리

90be5b8

feat : 세로 무한스크롤 서버 구조 변경 적용

52b33ab

chore : JSON 구조 변경에 따른 인터페이스 변경

389070a

feat : 가로 무한스크롤 서버 변경사항 적용

cbb714c

chore : 불필요한 코드 정리

4deeabb

chore : 변수명 변경 적용

7a88827

pinktopaz added the 📚 library label Feb 9, 2023

pinktopaz requested review from woogisea, iamphj3, Happhee and Brokyeom February 9, 2023 13:58

pinktopaz self-assigned this Feb 9, 2023

pinktopaz changed the title ~~Refactor/145~~ [ 📚 Library ] 라이브러리 리팩토링 Feb 9, 2023

pinktopaz changed the base branch from master to develop February 9, 2023 14:16

Happhee reviewed Feb 9, 2023

View reviewed changes

Brokyeom reviewed Feb 10, 2023

View reviewed changes

iamphj3 reviewed Feb 10, 2023

View reviewed changes

feat : 새로고침하지 않고 삭제된 데이터 업데이트 위해 mutate 반영

b92a84a

pinktopaz added 3 commits February 11, 2023 02:57

fix : 아이템이 한 개만 있을 때 간격 이슈 해결

2f96a8a

chore : 불필요한 코드 삭제

e1984ba

chore : 코드리뷰 반영

fc2af1f

woogisea reviewed Feb 12, 2023

View reviewed changes

pinktopaz added 2 commits February 13, 2023 00:04

chore : 세로 스크롤 mutate 추가

8bbb400

feat : 아이템 하나만 있는 경우 삭제했을 때 세로 간격 이슈 해결

8fb84ff

pinktopaz merged commit ce49191 into develop Feb 12, 2023

Happhee deleted the refactor/145 branch March 22, 2023 12:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ 📚 Library ] 라이브러리 리팩토링 #155

[ 📚 Library ] 라이브러리 리팩토링 #155

pinktopaz commented Feb 9, 2023 •

edited

netlify bot commented Feb 9, 2023 •

edited

Happhee left a comment

Happhee Feb 9, 2023

Happhee Feb 9, 2023

pinktopaz Feb 10, 2023

Happhee Feb 9, 2023

pinktopaz Feb 10, 2023

Brokyeom Feb 10, 2023

pinktopaz Feb 10, 2023 •

edited

Brokyeom Feb 10, 2023

iamphj3 Feb 10, 2023

Brokyeom Feb 10, 2023 •

edited

Brokyeom Feb 10, 2023

Brokyeom Feb 10, 2023

Brokyeom commented Feb 10, 2023 •

edited

iamphj3 left a comment

iamphj3 Feb 10, 2023

pinktopaz Feb 10, 2023

iamphj3 Feb 10, 2023

iamphj3 Feb 10, 2023

iamphj3 Feb 10, 2023

iamphj3 Feb 10, 2023

iamphj3 Feb 10, 2023

pinktopaz Feb 10, 2023 •

edited

iamphj3 Feb 10, 2023

pinktopaz Feb 10, 2023

netlify bot commented Feb 10, 2023 •

edited

woogisea left a comment

woogisea Feb 12, 2023

woogisea Feb 12, 2023

	if (idx === 0) return `/vote/library/scroll/month?flag=${0}&date=${date}`;
	if (!idx ) return `/vote/library/scroll/month?flag=0&date=${date}`;

	{allVoteInfoList.dateList.length !== 0 ? (
	{ allVoteInfoList.dateList.length ? (

-  const handleDeleteVote = (id: string) => {
-    deleteVote(id);
-  };
+  const handleDeleteVote = async (id: string) => {
+    await deleteVote(id);
+    return mutate();
+  };

	const { data, isLoading, error, size, setSize } = useSWRInfinite<AxiosResponse<VoteInfo[]>>(
	const { data, isLoading, error, size, setSize, mutate } = useSWRInfinite<AxiosResponse<VoteInfo[]>>(

		<StVotingPic src={voteData.url} onClick={handleMoveResult} />
		<StVotingPic src={voteData.url} onClick={handleGoToResult} />

[ 📚 Library ] 라이브러리 리팩토링 #155

[ 📚 Library ] 라이브러리 리팩토링 #155

Conversation

pinktopaz commented Feb 9, 2023 • edited

🔥 Related Issues

💜 작업 내용 + 🔥 트러블슈팅

✅ PR Point

👀 스크린샷

netlify bot commented Feb 9, 2023 • edited

✅ Deploy Preview for deluxe-otter-55aa15 ready!

Happhee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pinktopaz Feb 10, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Brokyeom Feb 10, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Brokyeom commented Feb 10, 2023 • edited

iamphj3 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pinktopaz Feb 10, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Feb 10, 2023 • edited

✅ Deploy Preview for snazzy-seahorse-7d3184 ready!

woogisea left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pinktopaz commented Feb 9, 2023 •

edited

netlify bot commented Feb 9, 2023 •

edited

pinktopaz Feb 10, 2023 •

edited

Brokyeom Feb 10, 2023 •

edited

Brokyeom commented Feb 10, 2023 •

edited

pinktopaz Feb 10, 2023 •

edited

netlify bot commented Feb 10, 2023 •

edited