[#26] 누적 리포트 레이아웃 #29

JitHoon · 2024-01-13T08:51:47Z

close #26

Description

누적 리포트 차트 레이아웃
누적 똑똑현황 레이아웃
연도 별 숫자 정보 레이아웃

유의할 점 및 ETC (Optional)

전체 스크롤이 아닌 부분 스크롤로 레이아웃이 변경되었습니다.
해당 PR merge 이후 각 페이지마다 레이아웃 이상없는지 확인 부탁드립니다.

스크린샷 (Optional)

vercel · 2024-01-13T08:51:54Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
cool-peace	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 15, 2024 9:57am
cool-peace-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 15, 2024 9:57am

…nto feature/#26

turkey-kim

고생많으셨습니다.
천천히 훑어보면서 리뷰 남기겠습니다!

turkey-kim · 2024-01-13T19:19:38Z

src/components/Report/RightSection/TotallReport/index.tsx

+    // 방법 1: 렌더링마다 새 객체 하지 않도록 React-Query에서 OnSuccess에서 변환 -> 순서 보장 X
+      const InfoArray = Object.values(TotallReportData);
+      const InfoArray = Object.entries(strObj);
+
+    // 방법 2: 클라이언트에서 변경하는 것보다 처음부터 순서가 보장되도록 배열로 달라고 요청하기
+    // 멘토링 질문 : 이럴경우 백에서 배열로 넘겨주는 것이 비즈니스 요청사항이 수정되었을 때 유지 보수 측면에서 좋은지
+
+  */
+
+  // HACK: 순서가 보장된 배열로 받기
+  // HACK: key 값이 변경되어 에러가 발생했을 때 대응하기 (에러 바운더리)
+  const TotallReportData = [
+    ['coupon_total_sales', '80600000'],
+    ['coupon_use_sales', '10000000'],
+    ['coupon_total_used_count', '3843201'],
+    ['coupon_total_download_count', '400000']
+  ];
+


저도 메인페이지에서 같은 부분이 있어서 어떻게 처리할지 고민이였는데,
이렇게 배열로 바꿔서 map함수 돌릴 수 있는 형태로 변환시켜주는거는 생각도 못했네요
많이 배우고 갑니다.

그리고 저도 이 방법 생각해보고 있는데,
하드코딩같지만 map함수를 쓰지 않는 것도 방법이라 생각합니다.

이유는 우선 저희가 표처럼 다량의 데이터를 받아야하는 것이 아니고, (3-4개)
메인페이지인 해당 섹션의 특성 상 보여줄 데이터가 추가될 가능성도 적기 때문입니다.
또한 이럴 경우, 클라이언트에서 데이터를 재가공하거나
서버에서의 응답방식을 바꿀 필요가 없는 것도 장점 중 하나라 생각합니다.

짧은 생각이지만, 편의를 위해 방법2의 경우로 데이터를 받아야한다면
data = [111111111(원), 2222222(원), 3333333(회), 44444444(개)]
이런 식으로 순서가 보장된 배열데이터가 될 것 같습니다.

그런데 이렇게 될 경우, 지훈님이 생각하시는 것처럼 유지보수 측면에서 좋을까 싶습니다.
멘토링 때 여쭤보면 좋을 것 같아요!

좋은 의견 감사합니다! 이 부분 배울게 많은 부분인 것 같아서,
지금 적어주신 특희님 의견과 제가 코드 작성하면서 고려했던 부분 정리해서 멘토링 때 한 번 질문해 보겠습니다!

이런 논의 넘 좋습니다!

https://velog.io/@lilyoh/js-object-%EC%9A%94%EC%86%8C%EC%97%90-%EC%A0%91%EA%B7%BC%ED%95%98%EA%B3%A0-%EC%88%9C%ED%9A%8C%ED%95%98%EA%B8%B0

지훈님 여기 레퍼런스 보시면, 배열을 순환해서 사용할 수 있는 예시 있습니다.
저도 일부 컴포넌트에서는 이렇게 적용해봤습니다

const DummyData = { first_coupon_title: '재방문고객 20%할인', second_coupon_title: '첫방문고객 15000', third_coupon_title: '모든고객 10000' }; // 키값을 추출해서 배열로 반환 const dataKeys = Object.keys(DummyData) as (keyof typeof DummyData)[]; // 컴포넌트 내에서 dataKeys를 map으로 순회하며 DummyData 렌더링 <div> {dataKeys.map(item => ( <div>{DummyData[item]}</div> ))} </div>

dabin-Hailey

수고하셨습니다~!!

dabin-Hailey · 2024-01-14T08:52:53Z

src/components/Report/LeftSection/Graph/index.tsx

+  padding: 20px 0;
+
+  display: flex;
+  flex-direction: row;


flex-direction: row;
기본값은 제거해도 원하는대로 동작할 것같습니다!

ㅋㅋㅋㅋ 다빈님 코드에 제가 리뷰 했던 것 같은데 내로남불 해버렸네요 ㅎㅎ

ㅋㅋ.. 이거보다 생각난건데, 저희가 한 컴포넌트 내에서 많이 섞어쓰다보니 row 명시해주는 것도 코더입장에서는 나쁘지 않을 수 있을 것 같아요 (리뷰 보면서 지금은 안쓰고 있는 중이긴 합니다)

dabin-Hailey · 2024-01-14T08:54:56Z

src/components/Report/LeftSection/Graph/index.tsx

+  font-weight: 700;
+`;
+
+const Notice = styled.p`


Notice만 p태그를 사용한 이유가 궁금합니다!

<p>프로모션 적용 이후 예약 현황을 알려드립니다.{' '}<span>(23.12.29 업데이트)</span></p>

Notice 문장안에 span 문장을 따로 스타일링해주어야 해서 p 태그를 사용하였습니다!

고생 많으셨습니다 ! 저도 한 텍스트 안에서 따로 스타일링 해줘야 하는 부분있어서 컴포넌트 분리해서 사용했는데, 그렇게하니까 가로로 화면 크기를 줄였을 때, 레이아웃이 깨지는 문제가 있었는데 p 태그로 해결했습니다 ! 많이 배우고 갑니다 !

dabin-Hailey · 2024-01-14T08:59:55Z

src/components/Report/LeftSection/YearReport/index.tsx

+import { YearReportProps } from '@/types/report';
+import styled from '@emotion/styled';
+
+import { renderCouponAmount, renderCouponText } from '@utils/index';


import styled from '@emotion/styled'; import { YearReportProps } from '@/types/report'; import { renderCouponAmount, renderCouponText } from '@utils/index';

순서로 변경해주시면 좋을 것같습니다!

dabin-Hailey · 2024-01-14T09:01:21Z

src/components/Report/LeftSection/YearReport/index.tsx

+  background-color: #f2f4f5;
+`;
+
+const Text = styled.div`


Text가 텍스트로서의 의미로만 작동한다면 p태그, 제목으로서의 의미로 작동한다면 h1~h6태그를 사용하면 어떤 목적의 태그인지 보다 명확하게 파악할 수 있을 것같습니다!

dabin-Hailey · 2024-01-14T09:14:37Z

src/components/Report/RightSection/TotallReport/index.tsx

+  font-weight: 700;
+`;
+
+const Amount = styled.span<{ $index: number }>`


타입 분리해주시면 좋을 것같습니다!

dabin-Hailey · 2024-01-14T09:20:56Z

src/components/Report/RightSection/TotallReport/index.tsx

+  justify-content: center;
+  align-items: center;
+
+  color: ${props => (props.$index === 0 ? '#FF3478' : '#022c79')};


props.$index가 0일 때와 0이 아닐 때를 기준으로 나눠야한다면
props.$index 자체를 boolean으로 평가하는 방법을 사용해도 좋을 것같습니다!

(1) color: ${props => (!props.$index ? '#FF3478' : '#022c79')}; (2) color: ${props => (props.$index ? '#022c79' : '#FF3478')};

감사합니다! props 이름도 $isfirstamount 로 변경하였습니다!

turkey-kim · 2024-01-14T09:51:14Z

src/components/Report/RightSection/TotallReport/index.tsx

+  );
+};
+
+export default TotallReport;


TotallReport 오타인것 같습니다 ㅎ..

turkey-kim · 2024-01-14T09:53:14Z

src/pages/Report/index.tsx

+const Report = () => {
+  return (
+    // HACK: 로딩 화면 구현 (Suspense) // 로딩 감싸는 기준 정하기
+    <Container>
+      <LeftSection />
+      <RightSection />
+    </Container>
+  );
+};


코드를 깔끔하게 잘 분리해주시는 것 같습니다👍👍

turkey-kim · 2024-01-14T09:55:35Z

src/components/Report/LeftSection/Graph/index.tsx

+        <Title>누적 리포트</Title>
+        <Notice>
+          프로모션 적용 이후 예약 현황을 알려드립니다.{' '}
+          <span>(23.12.29 업데이트)</span>


이 부분 지난달 마지막일자 반환하는 함수 만들어뒀는데, 같이 쓰면 좋을 것 같습니다
제 PR올릴 때 utils에 calculation.ts 파일 만들어 올려놓겠습니다.

ovoxiix

수고하셨습니다!
혹시 대시보드와 누적 리포트에서 레이아웃이 통일되지 않는 건 어쩔 수 없는 부분인가요?

ovoxiix · 2024-01-15T07:38:09Z

src/components/Report/LeftSection/Graph/index.tsx

+          프로모션 적용 이후 예약 현황을 알려드립니다.{' '}
+          <span>(23.12.29 업데이트)</span>


문장 끝에 공백을 명시적으로 넣는 것보다는 <span>의 margin 속성으로 스타일을 분리하는 것이 더 좋을 것 같습니다.

ovoxiix · 2024-01-15T07:56:50Z

src/components/common/Layout/Sidebar/Navigation/Coupon/index.tsx

-      $isSidebarOpen={isSidebarOpen}
-      $isToggleOpen={isToggleOpen}
-      $userPath={userPath}
+      end
+      $issidebaropen={isSidebarOpen}
+      $istoggleopen={isToggleOpen}
+      $userpath={userPath}


콘솔 에러 때문에 다 소문자로 바꾸신건가요?
저는 에러가 없어서 다 카멜케이스로 작성했는데,, 컨벤션 통일을 위해 다 소문자로 작성해야 할까요?

카멜케이스로 다시 바꿔보겠습니다!

ovoxiix · 2024-01-15T08:06:05Z

src/components/common/Layout/Sidebar/Navigation/CostumeNavLink/index.tsx

+
+import { CostumeNavLinkProps } from '@/types/layout';
+
+const CostumeNavLink = ({


여기서는 costume보다는 custom이 더 적절해보입니다!

ovoxiix · 2024-01-15T08:14:42Z

src/components/common/Layout/Sidebar/Navigation/Coupon/index.tsx

-  cursor: ${props => (props.$isSidebarOpen ? 'default' : 'pointer')};
+
+  ${props => (props.$issidebaropen ? 'cursor: default;' : 'cursor: pointer;')};


저도 이런 경우 cursor: ${props => (props.$isSidebarOpen ? 'default' : 'pointer')};와 동일한 방식으로 코드를 작성하고 있었는데, 수정하신 방식대로 작성하는 게 더 좋은 방법인가요?

아 아닙니다..! warning 해결하느라 css 객체를 썼었는데 다시 바꿀 때 같이 못 바꾼 것 같습니다.

…nto feature/#26

ovoxiix

수고하셨습니다!

ovoxiix · 2024-01-15T08:46:18Z

src/components/Report/RightSection/Catchphrase/index.tsx

+        <Text>
+          {' '}
+          {'연도별 쿠폰 사용 현황을'}


아까 말씀드린 것처럼 공백보다는 따로 스타일을 적용하는 게 더 좋을 것 같습니다.

ovoxiix · 2024-01-15T08:48:11Z

src/components/Report/RightSection/index.tsx

  align-self: flex-start;

-  background-color: white;
+  gap: 30px;


이 부분은 개행이 필요없어보입니다.

jiohjung98 · 2024-01-15T09:10:42Z

src/components/Report/LeftSection/Graph/index.tsx

+  font-weight: 700;
+`;
+
+const Notice = styled.p`


고생 많으셨습니다 ! 저도 한 텍스트 안에서 따로 스타일링 해줘야 하는 부분있어서 컴포넌트 분리해서 사용했는데, 그렇게하니까 가로로 화면 크기를 줄였을 때, 레이아웃이 깨지는 문제가 있었는데 p 태그로 해결했습니다 ! 많이 배우고 갑니다 !

JitHoon added 11 commits January 13, 2024 17:19

remove: pages .gitkeep 삭제

f09d825

feat: 누적 리포트 페이지 컴포넌트 생성

8b206ed

feat: 누적 리포트 좌우 section 컴포넌트 구분

e285d7e

feat: 누적 데이터 페이지 좌우 컴포넌트 분리

190d780

feat: 누적 리포트 오른쪽 컴포넌트 레이아웃 작업

5ae9ea5

feat: 누적 리포트 오른쪽 컴포넌트 Mock 데이터 레이아웃 배치

919b87d

feat: 누적 리포트 왼쪽 컴포넌트 그래프 레이아웃 작업

4aa584c

feat: 누적 리포트 왼쪽 컴포넌트 연도별 쿠폰 리포트 레이아웃 작업

6d17423

feat: 누적 리포트 데이터 정제 유틸리티 함수 작성

62fe7ba

modify: 전체 스크롤 삭제, 사이드바 및 헤더 제외 영역 스크롤 생성

bc9e9ec

feat: 누적 리포트 페이지 타입 분리

9acdd99

JitHoon added modify 버그 외 사소한 수정 design 스타일 labels Jan 13, 2024

JitHoon requested review from turkey-kim, jinjoo-jung, jiohjung98, dabin-Hailey and ovoxiix January 13, 2024 08:51

JitHoon self-assigned this Jan 13, 2024

Merge branch 'dev' of https://github.com/CoolPeace-yanolza/frontend i…

e171dd4

…nto feature/#26

vercel bot deployed to Preview – cool-peace January 13, 2024 16:54 View deployment

vercel bot deployed to Preview – cool-peace-dev January 13, 2024 16:54 View deployment

turkey-kim reviewed Jan 13, 2024

View reviewed changes

turkey-kim approved these changes Jan 13, 2024

View reviewed changes

dabin-Hailey approved these changes Jan 14, 2024

View reviewed changes

turkey-kim reviewed Jan 14, 2024

View reviewed changes

JitHoon added 3 commits January 14, 2024 20:06

move: layout 컴포넌트 타입 합치기

d4c9f3b

fix: CostumeNavLink로 NavLink와 emotion-styled props 함께 사용하기

7ec2b87

modify: total 오타 수정

dead41e

modify: import 및 타입 컨벤션 통일

6ddc08c

vercel bot deployed to Preview – cool-peace January 14, 2024 11:32 View deployment

vercel bot deployed to Preview – cool-peace-dev January 14, 2024 11:32 View deployment

ovoxiix approved these changes Jan 15, 2024

View reviewed changes

JitHoon added 4 commits January 15, 2024 17:28

feat: Catchphrase 컴포넌트 추가

70c90e6

Merge branch 'dev' of https://github.com/CoolPeace-yanolza/frontend i…

7169497

…nto feature/#26

modify: CustomNavLink 오타 수정

074c6d8

modify: 불필요한 cursor 삭제

ef1e2c8

vercel bot deployed to Preview – cool-peace-dev January 15, 2024 08:41 View deployment

vercel bot deployed to Preview – cool-peace January 15, 2024 08:42 View deployment

ovoxiix approved these changes Jan 15, 2024

View reviewed changes

modify: emotion props 변수 파스칼 케이스로 변경

d3b76e0

jiohjung98 approved these changes Jan 15, 2024

View reviewed changes

vercel bot deployed to Preview – cool-peace-dev January 15, 2024 09:23 View deployment

vercel bot deployed to Preview – cool-peace January 15, 2024 09:23 View deployment

modify: 불필요한 공백 및 개행 지우기

976ba7f

vercel bot deployed to Preview – cool-peace January 15, 2024 09:57 View deployment

vercel bot deployed to Preview – cool-peace-dev January 15, 2024 09:57 View deployment

JitHoon merged commit e1ebad0 into dev Jan 15, 2024
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#26] 누적 리포트 레이아웃 #29

[#26] 누적 리포트 레이아웃 #29

JitHoon commented Jan 13, 2024

vercel bot commented Jan 13, 2024 •

edited

Loading

turkey-kim left a comment

turkey-kim Jan 13, 2024 •

edited

Loading

JitHoon Jan 14, 2024

turkey-kim Jan 15, 2024 •

edited

Loading

dabin-Hailey left a comment

dabin-Hailey Jan 14, 2024

JitHoon Jan 14, 2024

turkey-kim Jan 14, 2024 •

edited

Loading

dabin-Hailey Jan 14, 2024

JitHoon Jan 14, 2024

jiohjung98 Jan 15, 2024

dabin-Hailey Jan 14, 2024

dabin-Hailey Jan 14, 2024

dabin-Hailey Jan 14, 2024

dabin-Hailey Jan 14, 2024

JitHoon Jan 14, 2024 •

edited

Loading

turkey-kim Jan 14, 2024

turkey-kim Jan 14, 2024

turkey-kim Jan 14, 2024

ovoxiix left a comment

ovoxiix Jan 15, 2024

ovoxiix Jan 15, 2024

JitHoon Jan 15, 2024

ovoxiix Jan 15, 2024

ovoxiix Jan 15, 2024

JitHoon Jan 15, 2024

ovoxiix left a comment

ovoxiix Jan 15, 2024

ovoxiix Jan 15, 2024

jiohjung98 Jan 15, 2024

		프로모션 적용 이후 예약 현황을 알려드립니다.{' '}
		<span>(23.12.29 업데이트)</span>


		import { CostumeNavLinkProps } from '@/types/layout';

		const CostumeNavLink = ({

		cursor: ${props => (props.$isSidebarOpen ? 'default' : 'pointer')};

		${props => (props.$issidebaropen ? 'cursor: default;' : 'cursor: pointer;')};

[#26] 누적 리포트 레이아웃 #29

[#26] 누적 리포트 레이아웃 #29

Conversation

JitHoon commented Jan 13, 2024

Description

유의할 점 및 ETC (Optional)

스크린샷 (Optional)

vercel bot commented Jan 13, 2024 • edited Loading

turkey-kim left a comment

Choose a reason for hiding this comment

turkey-kim Jan 13, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

turkey-kim Jan 15, 2024 • edited Loading

Choose a reason for hiding this comment

dabin-Hailey left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

turkey-kim Jan 14, 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

JitHoon Jan 14, 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

ovoxiix 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

ovoxiix 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

vercel bot commented Jan 13, 2024 •

edited

Loading

turkey-kim Jan 13, 2024 •

edited

Loading

turkey-kim Jan 15, 2024 •

edited

Loading

turkey-kim Jan 14, 2024 •

edited

Loading

JitHoon Jan 14, 2024 •

edited

Loading