feat: 2차, 톡앤픽 플레이스 페이지 api 연결 및 컴포넌트 수정 #166

areumH · 2024-08-19T10:32:42Z

💡 작업 내용

TextModal 컴포넌트 수정
SummaryBox 컴포넌트에 스피너 추가
VoteBar 컴포넌트 수정
오늘의 톡픽 페이지 api 연결
메인 페이지 배너 api 연결
톡앤픽 플레이스 페이지 api 연결

💡 자세한 설명

✅ TextModal

모달 내의 닫기 버튼을 삭제하였고, 텍스트 모달에 smallText를 추가하여 크기가 작은 텍스트도 추가할 수 있도록 수정했습니다! 스토리북에 추가해두었으니 확인 부탁드립니다.

✅ SummaryBox

현재 스피너가 ui상 반시계 방향으로 돌아가는데 아직 디자인팀에게서 답변을 받지 못해 그대로 pr 올려둔 상태입니다. 추후에 수정이 필요하면 수정하겠습니다!
-> 시계 방향으로 수정 완료하였습니다!

✅ VoteBar

각 투표율 차이가 심할 때 바의 테두리를 벗어나거나 투표율 텍스트가 보이지 않던 부분을 수정해두었습니다.
수정하는 도중 기존 컴포넌트의 애니메이션을 그대로 구현하는 데에 어려움을 겪게 되어.. 부득이하게 피그마의 프로토타입 애니메이션 (바가 끝까지 이동했다가 줄어드는 플로우)을 구현하게 되었습니다.. 확인 부탁드려요..!!

✅ TodayTalkPickBanner

랜딩 페이지의 배너 클릭 시 useNavigate 함수를 사용하여 state로 해당 톡픽의 id를 오늘의 톡픽 페이지로 넘겨주도록 구현했습니다. 현재 배너에서의 데이터 확인이 어려워 임시로 id를 1로 두고 테스트 진행하였을 때 제대로 작동하는 것을 확인했습니다. 화면 녹화본 공유드립니다! (현재는 talkPick?.id로 넘겨지게 되어있습니다.)

  const onClickBanner = () => {
    navigate('/todaytalkpick', { state: { talkPickId: talkPick?.id } });
  };

✅ TalkPickPlacePage

톡앤픽 플레이스 페이지에서 선택된 페이지가 바뀔 때 스크롤이 자동으로 화면의 상단에 올라가도록 구현했습니다. 그리고 인기순/최신순이 토글될 때 첫번째 페이지로 이동되도록 하였습니다! 더 좋은 아이디어 있으시면 코멘트 부탁드립니다!!

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

🚩 후속 작업 (선택)

✅ 셀프 체크리스트

PR 제목을 형식에 맞게 작성했나요?
브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요? (master/main이 아닙니다.)
이슈는 close 했나요?
Reviewers, Labels, Projects를 등록했나요?
작업 도중 문서 수정이 필요한 경우 잘 수정했나요?
테스트는 잘 통과했나요?
불필요한 코드는 제거했나요?

closes #163

alwubin · 2024-08-20T16:06:03Z

src/styles/keyframes.ts

+  },
+});
+
+export const barStyling = (varPercentage: number) => keyframes`


keyframe을 사용해본적이 없었는데 이번 기회에 아름님이 구현하신 코드 보고 한 번 또 배워갑니다 너무 너무 수고많으셨습니당☺️

alwubin · 2024-08-20T16:08:19Z

src/types/talk-pick.ts

@@ -14,14 +14,14 @@ export type TalkPickDetail = {
  myBookmark: boolean;
  votedOption: 'A' | 'B' | null;
  writer: string;
-  lastModifiedAt: string;
+  createdAt: string;
  isUpdated: boolean;
 };

 export type TalkPickSummary = {


type 파일을 따로 만들 때의 기준이 궁금합니다! 일반적으로 컴포넌트 내에서 직접 사용하는 것과 이 폴더 내에 작성한 type을 구분하는 기준은 api의 response 여부인가요?!

네! 현재 api 연결하여 받아오는 데이터의 type들을 types 폴더 내에 정의하여 사용하고 있습니다!! 😊

오오 좋은 정보 감사합니다! api 관련 type들은 모두 폴더로 이동시켜야겠네용ㅎㅎ

alwubin · 2024-08-20T16:32:39Z

src/pages/TalkPickPlacePage/TalkPickPlacePage.tsx

-  empty: true,
-};
+  useEffect(() => {
+    window.scrollTo(0, 0);


window.scrollTo로 자동 스크롤 로직 구현하신거 아주 좋은 생각인 것 같습니다ㅎㅎ 추가적으로 스크롤 위치가 최상단 (0,0)이 아닌 TalkPickListSection 상단 부분으로 이동시키는건 어떤지 여쭙고싶습니다! 유저 입장에서 최상단으로 올라가면 어쨋든 리스트 부분으로 추가적인 스크롤이 필요하다고 생각합니당🧐

오 확실히 최상단보다 톡픽 목록 부분으로 이동되는게 사용자 입장에서 더 편할 것 같네요!!!
좋은 의견 감사합니다 코드 수정해보겠습니닷 🙌

useRef로 ref 연결하는 방법으로 시도해보았는데, 페이지가 바뀔 때마다 데이터를 새로 받아와야 해서 데이터가 렌더링이 된 이후 스크롤 이동이 가능하여 query hook에 isLoading을 추가해야 하더라구요..!
useEffect문을 사용할 경우 isLoading 값이 바뀌자마자 스크롤이 작동하여 페이지를 열자마자 TalkPickListSection으로 스크롤이 이동되는 문제가 발생합니다..🥲

이 부분은 제가 좀 더 공부해보고 추후에 이슈 파서 진행해보겠습니다!!! 🥹🙇‍♀️

혹시 documnet.querySelector()을 사용해보시는건 어떨까요?! 어제 scrollTo에 관하여 저도 검색해보다가 위치를 querySelector로 찾아와서 scrollTo로 이동시켜주는 로직을 보았거든요! 도움이 될까 싶어 링크 첨부하겠습니당😚
스크롤을 이동시키는 주문, Window.scrollTo()

alwubin

아름님 톡앤픽 플레이스 페이지 api 연결 및 컴포넌트 수정하시느라 수고많으셨습니다👏 voteBar 결국 구현된거 너무 감사드려요🙏!!

WonJuneKim

톡액픽 플레이스 관련 UI 및 api 연동 고생 많으셨습니다! 스토리북에서 애니메이션도 잘 작동하는 거 같아요(너무 이뻐요 ㅎㅎ)
쓰다보니 리뷰를 많이 남기게 되었네요.. 지금 이슈 발생한 부분에 코멘트 달아놨으니 확인 부탁드립니다. 고생 많으셨습니다!!

WonJuneKim · 2024-08-21T16:51:27Z

src/components/atoms/ToggleGroup/ToggleGroup.tsx

@@ -25,6 +25,7 @@ const ToggleGroup = ({ items, selectedValue, onClick }: ToggleGroupProps) => (
      items.map((item, idx) => (
        <button
          type="button"
+          key={item.value}


mapping 시 key 를 item의 값으로 처리하는 로직 확인했습니다 😄

WonJuneKim · 2024-08-21T16:55:46Z

src/styles/keyframes.ts

+export const rotate = keyframes({
+  '100%': {
+    transform: 'rotate(360deg)',
+  },
+});


svg 파일을 rotate 애니메이션을 통해 360도 회전 시키는 방식이군요..! 360deg 와 같이 양수로 지정해주면 시계 방향, -360 와 같이 음수로 지정해주면 반시계 방향으로 회전되는 것을 이번에 알게 되었네요 👍

WonJuneKim · 2024-08-21T17:04:25Z

src/styles/keyframes.ts

+export const barStyling = (varPercentage: number) => keyframes`
+  0% {
+    width: 0%;
+  }
+  60% {
+    width: 100%;
+  }
+  100% {
+    width: ${varPercentage}%;
+  }
+`;


애니메이션 작동 도중 100%로 채워졌다가 다시 varPercentage에 해당하는 값으로 바가 표현되는거군요! storybook에서도 잘 작동하네요 고생하셨습니다 😄 😄

WonJuneKim · 2024-08-21T17:22:07Z

src/types/pagination.ts

@@ -1,7 +1,7 @@
 export type Pageable = {
  page: number;
  size?: number;
-  sort?: string[];
+  sort?: string;


페이지네이션 변동 사항 숙지했습니다. 해당 사항 반영해서 페이지네이션 fix 하도록 하겠습니다 ㅎㅎ

WonJuneKim · 2024-08-21T17:25:18Z

src/components/atoms/VoteBar/VoteBar.tsx

-  votesStyle,
-  neutralBarStyle,
-} from './VoteBar.style';
+import * as S from './VoteBar.style';


네임 스페이스 전체를 import 하는 방식으로 저도 사용하는데 기존보다 코드가 깔끔해진거 같네요 ㅎㅎ

WonJuneKim · 2024-08-21T17:46:54Z

src/components/molecules/TopBanner/TodayTalkPickBanner/TodayTalkPickBanner.tsx

+const TodayTalkPickBanner = ({ talkPick }: TodayTalkPickBannerProps) => {
+  const navigate = useNavigate();
+
+  const onClickBanner = () => {
+    navigate('/todaytalkpick', { state: { talkPickId: talkPick?.id } });
+  };


molecules/CategoryBox 에서는 link를 쓰셨는데, 해당 컴포넌트에는 navigate가 사용되어서 각각 어떤 case 일 떄 사용을 의도하신건지 궁금합니다 ㅎㅎ
+) 직관적으로 보면 단순한 이동에는 link, id나 추가적인 params를 받아서 동적으로 이동해야하는 경우 navigate를 사용하신거 같다는 생각이 드는데 맞나욥??

단순한 페이지 이동에는 Link를 사용하고, 몇 초 후 페이지 이동, 조건에 맞을 경우 페이지 이동 등의 특별한 로직과 연관된 경우에 navigate를 사용하고 있습니다!! 👍

WonJuneKim · 2024-08-21T17:48:06Z

src/components/molecules/TopBanner/TopBanner.tsx

@@ -13,15 +13,15 @@ import {
 } from './TopBanner.style';

 export interface TopBannerProps {
-  todayTalkPick: TodayTalkPick;
+  todayTalkPick: TodayTalkPick | undefined;


todayTalkPick? : TodayTalkPick 이 아니라 없는 case에는 undefiend로 선언을 해줘야하는군요... ⭐

원준님의 코멘트 보고 한번 찾아봤는데, 받아오는 데이터가 없어도 잘 동작해야 한다면 ?:를, 데이터가 제대로 들어올 때와 undefined일 때의 처리가 다르다면 | undefined를 사용하는게 좋다고 하네요!!! 둘다 사용 가능하지만 ?:를 사용하는 쪽이 더 적합하다고 판단되어 코드 수정하려 합니다 코멘트 주셔서 감사합니다 🙇‍♀️🫢

WonJuneKim · 2024-08-21T17:49:47Z

src/components/organisms/TalkPickListSection/TalkPickListSection.tsx

 export interface TalkPickListProps {
-  talkPickList: TalkPickListPagination;
+  talkPickList: TalkPickListPagination | undefined;
+  toggleItem: ToggleGroupItem[];
+  selectedValue: string;
+  setToggleValue: React.Dispatch<React.SetStateAction<string>>;
+  selectedPage: number;
+  handlePageChange: React.Dispatch<React.SetStateAction<number>>;
 }


최종적인 api 연동이 이루어 지는 페이지에서는 types 에 props를 선언해주고 하위 organisms, molecules, atoms 에는 각각의 type을 내부에 지정해주는 걸까요??

구현하면서 해당 props 관련하여 고민을 많이 했었는데요..! 하위 컴포넌트를 미리 구현해두고 페이지 파일 내에서 데이터를 가져와 넘겨주다보니, 하위 컴포넌트 내에서 데이터 제어 (인기순/최신순 토글 등)가 필요한 경우 함수 연결이 애매하더라구요..!

아토믹 디자인 구조 상 페이지에서 데이터 연결이 이루어지기도 하고, query 함수가 연결된 컴포넌트는 스토리북에서의 확인이 어렵다고 알고있어 해당 페이지에 하위 컴포넌트 내에 필요한 값들 및 함수를 선언해주고 넘겨주는 방식을 선택했습니다 😶

WonJuneKim · 2024-08-21T17:51:42Z

src/constants/api.ts

  TALKPICK: (talkPickId: Id) => `/talks/${talkPickId}`,
  CREATE_TALKPICK: '/talks',
+  TALKPICK_LIST: '/talks',
  TODAY_TALKPICK: '/talks/today',
+  BEST_TALKPICK: '/talks/best',


/talks 와 같이 공통적으로 선언되는 엔드포인트의 경우 baseUrl로 먼저 선언해주는게 더 깔끔할 거 같습니다!

WonJuneKim · 2024-08-21T18:03:30Z

src/pages/TalkPickPlacePage/TalkPickPlacePage.tsx

+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [selectedPage]);
+
+  useEffect(() => {
+    setSelectedPage(1);
+  }, [selectedValue]);


해당 부분에 관한 의견은 아름님과 비슷합니다! 웹사이트 몇군데에서 실제로 동작을 해봤는데, 보통은 맨 위로 가는 로직이 일반적이더라구요. 다만, 저희 페이지의 경우 최상단으로 이동 시 TalkPickListSection 부분이 거의 가려지기 때문에 TalkPickListSection 위치로 이동하는 로직이 더 사용자 입장에서 편리해 보인다고 생각합니다.

저도 해당 부분 검색해봤는데, useRef를 사용하게되면 query hook에 isLoading를 추가하거나, useEffect의 의존성 배열에 isLoading의 boolean 값을 추가해야하더라구요!

useEffect문을 사용할 경우 isLoading 값이 바뀌자마자 스크롤이 작동하는 문제의 경우, TalkPickListSection 컴포넌트 내부에 useEffect를 사용하여 렌더링 시점에 스크롤 제한을 설정하는 방법이 있는거 같습니다 😄
추가로 인위적으로 setTimeout를 거는 방법이 있는거 같은데 이 방식은 사용자 경험을 의도적으로 저해하는 거 같아 추천드리지는 않습니닷!

의견 감사합니다!! 아무래도 페이지, 인기순/최신순이 바뀔 때 데이터를 새로 받아오다보니 톡픽 리스트로의 이동을 구현하려면 isLoading 추가가 필수적인 것 같아요,, 🥹

areumH added 7 commits August 19, 2024 18:33

refactor: TextModal 컴포넌트 수정 및 스토리북 적용

2dddac6

refactor: SummaryBox 컴포넌트 스피너 추가 및 스토리북 적용

090b13f

refactor: VoteBar 컴포넌트 스타일 수정

344ddbb

feat: talkpick api query hook 작성

7349846

feat: 랜딩 페이지 배너 및 오늘의 톡픽 페이지 api 연결

1def251

feat: 톡앤픽 플레이스 페이지 api 연결

7a0e590

refactor: 배너 클릭 테스트 코드 수정

7e4d532

areumH added ✔︎pull requests pull requests 코드 체크 요청 👩🏻‍💻 frontend 프론트엔드 작업 🎨 markup ✅feature labels Aug 19, 2024

areumH requested review from hsgh085, WonJuneKim and alwubin August 19, 2024 10:32

areumH self-assigned this Aug 19, 2024

areumH added 2 commits August 19, 2024 21:30

refactor: TopBanner 컴포넌트 스토리북 오류 해결

63fba5c

refactor: SummaryBox 스피너 시계 방향으로 수정

82d22ac

areumH changed the title ~~feat: 2차, 톡앤픽 플레이 페이지 api 연결 및 컴포넌트 수정~~ feat: 2차, 톡앤픽 플레이스 페이지 api 연결 및 컴포넌트 수정 Aug 20, 2024

areumH added 3 commits August 20, 2024 18:37

refactor: CategoryBoxProps 삭제 및 Link로 라우터 연결

1d2b2d9

refactor: CategoryBox 내부 Button 배치 수정

094ebc5

refactor: 톡앤픽 플레이스 링크 소문자로 수정

aa65ddb

alwubin reviewed Aug 20, 2024

View reviewed changes

WonJuneKim reviewed Aug 21, 2024

View reviewed changes

areumH added 2 commits August 22, 2024 14:06

refactor: 데이터 props 삼항연산자로 수정

cdfb8b6

refactor: TextModal 스타일 import문 수정

540e779

areumH merged commit 1033a2d into dev Aug 23, 2024
3 checks passed

areumH deleted the feat/163-talkpick-api branch September 26, 2024 14:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 2차, 톡앤픽 플레이스 페이지 api 연결 및 컴포넌트 수정 #166

feat: 2차, 톡앤픽 플레이스 페이지 api 연결 및 컴포넌트 수정 #166

areumH commented Aug 19, 2024 •

edited

Loading

alwubin Aug 20, 2024 •

edited

Loading

alwubin Aug 20, 2024

areumH Aug 21, 2024

alwubin Aug 21, 2024

alwubin Aug 20, 2024

areumH Aug 21, 2024

areumH Aug 21, 2024

alwubin Aug 21, 2024

alwubin left a comment

WonJuneKim left a comment

WonJuneKim Aug 21, 2024

WonJuneKim Aug 21, 2024

WonJuneKim Aug 21, 2024

WonJuneKim Aug 21, 2024

WonJuneKim Aug 21, 2024

WonJuneKim Aug 21, 2024

areumH Aug 22, 2024

WonJuneKim Aug 21, 2024

areumH Aug 22, 2024

WonJuneKim Aug 21, 2024

areumH Aug 22, 2024 •

edited

Loading

WonJuneKim Aug 21, 2024

WonJuneKim Aug 21, 2024

WonJuneKim Aug 21, 2024

WonJuneKim Aug 21, 2024

areumH Aug 22, 2024 •

edited

Loading

feat: 2차, 톡앤픽 플레이스 페이지 api 연결 및 컴포넌트 수정 #166

feat: 2차, 톡앤픽 플레이스 페이지 api 연결 및 컴포넌트 수정 #166

Conversation

areumH commented Aug 19, 2024 • edited Loading

💡 작업 내용

💡 자세한 설명

✅ TextModal

✅ SummaryBox

✅ VoteBar

✅ TodayTalkPickBanner

✅ TalkPickPlacePage

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

🚩 후속 작업 (선택)

✅ 셀프 체크리스트

alwubin Aug 20, 2024 • edited Loading

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

alwubin left a comment

Choose a reason for hiding this comment

WonJuneKim 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

areumH Aug 22, 2024 • edited Loading

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

areumH Aug 22, 2024 • edited Loading

Choose a reason for hiding this comment

areumH commented Aug 19, 2024 •

edited

Loading

alwubin Aug 20, 2024 •

edited

Loading

areumH Aug 22, 2024 •

edited

Loading

areumH Aug 22, 2024 •

edited

Loading