Public view image 조회,수정 개선 및 myPage 추가 #141

wodnd0131 · 2024-06-16T16:48:17Z

주요 기능

리뷰 수정 시 이미지 등록
(단, 현재 백앤드 방침에 따라, 이미지는 전체 수정만 가능합니다.)
리뷰 등록 시 loading svg 출력하여 이미지 깨짐 방지
고객의 '나의 리뷰 관리'에 대한 my Page 추가
디자인 개선

hello-mansoo

내일 오후 2시 정도에 머지 후 배포 에정이니 코드 리뷰 사항 중 고칠 수 있는 부분은 최대한 고쳐 주시고 테스트 많이 돌려주세요 데모 과정에서 문제 발생하지 않도록..!

그리고 준서님 PR에서 봤던 리뷰 사항과 동일한 부분이 보이는 것 같은데 git branch 가 어디서 뻗어 나온 걸까요...??

hello-mansoo · 2024-06-16T19:30:04Z

apps/web/src/app/mypage/[productID]/connected-page.tsx


-import CloseButton from '@/components/close-button';
-import MyReviewList from '@/components/review/my-list';
+import CloseButton from '@/components/custom-button';


Q. Custom Button이라는 파일 안에서 Close Button이랑 다른 버튼도 관리하는 건가요...? 일단 디렉토리가 세분화 되더라도 명확하게 의존성이 이해되도록 웬만하면 컴포넌트 이름과 파일 이름을 맞춰 주세요!

디자인 시스템에서 쓰는 방식처럼 컴포넌트들을 모아둘 index 파일을 만들고 거기서 export {} 이런 식으로 하는 방법도 있습니다

hello-mansoo · 2024-06-16T19:30:44Z

apps/web/src/app/mypage/[productID]/connected-page.tsx

-import CloseButton from '@/components/close-button';
-import MyReviewList from '@/components/review/my-list';
+import CloseButton from '@/components/custom-button';
+import MyReviewListOnProduct from '@/components/review/my-review/my-review-list';


my-review/list -> 이렇게 이미 my-review 라는 바운더리로 묶인 후에 안에서 구분되는 행위로 디렉토리 네임을 간소화 할 수 있지 않을까요..?!

hello-mansoo · 2024-06-16T19:31:54Z

apps/web/src/app/reviews/[reviewID]/connected-page.tsx

+        <div className="flex flex-col p-4">
+          <div className="flex gap-0.5 m-2 items-center w-fit">
+            <Star
+              setStar={() => {}}


Star의 setStar가 Read 목적일 때는 쓰일 일이 거의 없는 것 같은데 향후 optional props로 개선해야겠네요

hello-mansoo · 2024-06-16T19:33:34Z

apps/web/src/app/reviews/[reviewID]/edit/page.tsx

+  }, [reviewDetailQuery.data]);
+
+  useEffect(() => {
+    const textarea = document.querySelector('textarea');


textarea가 문서 상에서 여러 개가 될 확률은 없나요? 웬만하면 혹시나 하는 상황이 발생하지 않게 명확하게 scope를 selector로 정의해주거나 id, class 등을 활용해주세요! 여러 개를 선택해야 하는 상황이면 querySelectorAll을 사용해주시고...

useRef로 ref로 연결하는 걸 권장합니다!

hello-mansoo · 2024-06-16T19:34:20Z

apps/web/src/app/reviews/[reviewID]/edit/page.tsx

+          placeholder="리뷰를 작성해주세요. 10자 이상 작성해주세요!"
+          ref={textareaRef}
+          rows={6}
+          value={content}
+        />
+        <div className="absolute right-1 bottom-0 pr-4 text-gray-400">{content.length}/2000</div>
+      </div>
+      <div
+        className="flex flex-row-reverse pr-4"
+        hidden={content.length >= 10 || content.length === 0}
+      >
+        <div className="text-gray-500">*10자 이상 입력하시면 댓글 등록이 가능합니다!</div>


전체적으로 안내 문구에 느낌표 제거해주세요~

hello-mansoo · 2024-06-16T19:35:47Z

apps/web/src/components/custom-button.tsx

@@ -0,0 +1,27 @@
+import tw, { styled } from 'twin.macro';
+
+import ClosingSvg from '@/assests/icon/icon-closing.svg';


ClosingIcon 등으로 파일 타입보다 명확하게 네이밍 하는 게 좋습니다

hello-mansoo · 2024-06-16T19:36:11Z

apps/web/src/components/custom-button.tsx

+  ${tw`m-2 p-2`}
+  border: 2px solid ${({ isActive }) => (isActive ? '#5C6BC0' : '#9E9E9E')};
+  background-color: ${({ isActive }) => (isActive ? '#1E88E5' : '#BEBEBE')};
+  color: white;


color는 브라우저마다 white, red 등의 hex 값이 다를 수 있기 때문에 명확하게 #fffff 로 해 주세요

hello-mansoo · 2024-06-16T19:37:18Z

apps/web/src/components/review/item.tsx

+              ImageUrls.map((imageUrl: string, index: number) => (
+                <div
+                  className="my-5"
+                  key={index}


index도 좋지만 key에는 난수 라이브러리를 활용해 난수를 넣기도 합니다.
향후 참고해주세요

hello-mansoo · 2024-06-16T19:38:31Z

apps/web/src/components/review/my-review/my-review-list.tsx

+          filters={[
+            {
+              value: 'ALL',
+              label: '전체',
+            },
+            {
+              value: 'IMAGE_VIDEO',
+              label: '포토/동영상',
+            },
+            {
+              value: 'GENERAL',
+              label: '일반',


이런 부분은 constant로 관리하는 게 좋습니다. 특히 shop-admin에서도 동일하게 쓰이는 필터일 확률이 크니 theme 등의 모노레포 패키지에 관리할 필요가 있는지 개발 과정에서 고려해주세요

hello-mansoo · 2024-06-16T19:39:22Z

apps/web/src/models/api-type.ts


+export interface RetrieveMyReviewListRequest {
+  mallId: string;
+  memberId: string | undefined;


undefined면 memberId?: string으로 해 주세요

sonarqubecloud · 2024-06-17T07:16:37Z

Quality Gate failed

Failed conditions
29.4% Duplication on New Code (required ≤ 10%)

See analysis details on SonarCloud

wodnd0131 · 2024-06-17T07:26:29Z

어제 기준 devlop 브랜치입니다!
준서님 pr에서 파생시킨건 아니라 머지할게 좀 있을 거 같습니다..
너무 늦게 확인해서, 당장 반영 가능한 피드백 우선처리했습니다.
(리뷰에 이모지 달린 건 당장은 보류된 것입니다).

…image # Conflicts: # apps/web/src/app/mypage/[productID]/connected-page.tsx # apps/web/src/app/products/[productID]/reviews/connected-page.tsx # apps/web/src/app/reviews/[reviewID]/connected-page.tsx # apps/web/src/components/review/board-style-item.tsx # apps/web/src/components/review/list.tsx # apps/web/src/components/review/my-review/infinite-list.tsx # apps/web/src/components/review/my-review/list.tsx

wodnd0131 · 2024-06-17T11:32:31Z

메인에 배포된 준서님 코드에 빌드 에러만 수정한 pr입니다

JunseoHo and others added 30 commits June 5, 2024 19:34

feat : review like display

cc26155

feat : ThumbUpIcon

427bb2e

feat : Review Like Button Type

c089147

feat : Review User Like Function

48e2bb7

delete : temp code

ef461b1

feat : Review Like Function

a68a6f5

feat : ChatStyleReview

f404c59

feat : layout-style.ts

9c9c770

feat : layout design conditions

5115a4c

feat : card layout

b80c49c

fix : layout for review item

18c7b16

feat:reviewDetail image 조회

9f41940

feat:이미지 조회 개선

3ae1d93

refactor:custom-button 컴포넌트 정리

1591421

refactor:custom-button interface

295790a

feat: 리뷰 수정 시 이미지 등록

4574625

feat:이미지 조회 시 폴백 처리

7469d65

refactor:조회 재시도 횟수 조정

b568369

refactor:asset 정리

f7c4414

refactor:css조정

f9bf911

feat:mypage 선언

27bcf2b

feat: my page 컴포넌트 생성

46b86a5

refactor:my-review 컴포넌트 분리

accddbf

feat:mypage api 선언

61ed5ba

feat:mypage api 연결

d64016b

refactor: my page 디자인 수정

e7d6300

refactor: 삭제 모달 디자인 수정

9f0f576

feat:reply 수정 버튼 개선

d13bc84

refactor: api-type 위치 수정 및 import 정리

539b385

refactor:svg 정리

93b0653

wodnd0131 added 2 commits June 17, 2024 01:32

refactor:미사용 import 제거

9dab811

refactor:css개선

24bb055

wodnd0131 changed the title ~~Public view image 조회,수정 개선 myPage 개선~~ Public view image 조회,수정 개선 및 myPage 추가 Jun 16, 2024

hello-mansoo approved these changes Jun 16, 2024

View reviewed changes

JunseoHo and others added 9 commits June 17, 2024 10:30

fix: PR Review

531bb89

fix: reply overrap

b933d2b

delete: temp code line

53a22b8

fix: delete modal

045675a

refactor: list component 파일 명칭 정리

a2f4c22

refactor:custombutton 세분화

0c2696c

rafactor:star 컴포넌트 optional props 적용

272ed26

refactor: 네이밍 등 피드백 세부 사항 반영

1ec4a84

refactor: icon-loading 재정렬

b8a0971

wodnd0131 added 6 commits June 17, 2024 16:28

feat:constant filter,order 선언

692a07b

merge:layout-design

260bbe4

fix:빌드에러

74c55f6

fix:빌드에러수정

840b7b2

refactor:alert 문제 수정

45744c4

		@@ -0,0 +1,27 @@
		import tw, { styled } from 'twin.macro';

		import ClosingSvg from '@/assests/icon/icon-closing.svg';

Public view image 조회,수정 개선 및 myPage 추가 #141

Are you sure you want to change the base?

Public view image 조회,수정 개선 및 myPage 추가 #141

Uh oh!

Conversation

wodnd0131 commented Jun 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hello-mansoo left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Jun 17, 2024

Quality Gate failed

Uh oh!

wodnd0131 commented Jun 17, 2024

Uh oh!

wodnd0131 commented Jun 17, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

wodnd0131 commented Jun 16, 2024 •

edited

Loading