[DETAIL] 상점 상세 페이지 구현 #116

D0Dam · 2023-11-07T08:30:31Z

[#56]

기존과는 디자인 시안이 바뀌어 바뀐 걸로 적용했습니다.
디자인은 아래와 같습니다.

구현 내용

imageCarousel 구현
지도 및 리뷰 컴포넌트 구현
이외의 ui 구현
NotFound 컴포넌트 구현

현재 api로는 확인하기 힘든 부분이 많아 별도의 mockData를 만들어 두었습니다. 데이터 확인이 필요하면, mockData를 활용해 주세요.

미적용 내용

북마크 등록 기능
리뷰의 전체보기 기능
url 복사 기능
사진 전체 보기 기능

미적용 내용에 대해서는 추가적인 질문과 이해가 필요해서, 그리고 한번에 PR 내용이 너무 커서 2차 PR 로 처리하겠습니다. (지금도 PR 내용이 크기도 하구요..)

구현 예시

파일이 하나도 안올라가서(크기가 넘 큽니다..) 압축해서 올립니다.

mock영상.zip

Please check if the PR fulfills these requirements

It's submitted to develop branch, not the main branch
The commit message follows our guidelines
There are no warning message when you run yarn lint
Docs updated for breaking changes

commit 776fdea Author: Minjae Kim <smallkdb@gmail.com> Date: Tue Nov 7 17:11:57 2023 +0900 [Auth] User 타입으로 인한 버그 해결 (#114) * refactor: 단어 spell typo 수정 * refactor: SNSUser 타입 재정의 * refactor: oauthType 롤백 * Merge commit '71fedc7ab9189ae649abd567336885b99af3a261' commit 71fedc7 Merge: a08ef32 12ab91b Author: 김혜준 <114041848+hyejun0228@users.noreply.github.com> Date: Mon Nov 6 16:26:56 2023 +0900 Merge pull request #115 from BCSDLab/feature/#86 [HOTFIX] Mock 데이터 삭제로 인한 에러 해결 commit 12ab91b Author: 김혜준 <alice5855@naver.com> Date: Mon Nov 6 00:57:54 2023 +0900 fix: mock data 추가 commit a08ef32 Merge: 4065df0 3767d38 Author: 김혜준 <114041848+hyejun0228@users.noreply.github.com> Date: Mon Nov 6 00:44:54 2023 +0900 Merge pull request #112 from BCSDLab/feature/#86 [SEARCH] 검색 결과 페이지 구현 commit 3767d38 Author: 김혜준 <alice5855@naver.com> Date: Mon Nov 6 00:44:32 2023 +0900 remove: mock data 삭제 commit e5e1132 Author: 김혜준 <alice5855@naver.com> Date: Sat Nov 4 02:35:12 2023 +0900 refactor: return 값 재분기 처리 commit 3f82efd Author: 김혜준 <alice5855@naver.com> Date: Sat Nov 4 02:28:00 2023 +0900 fix: interface 수정 commit 853cf94 Author: 김혜준 <alice5855@naver.com> Date: Fri Nov 3 02:36:23 2023 +0900 refactor: 훅 params 값 수정 commit ab811d5 Author: 김혜준 <alice5855@naver.com> Date: Fri Nov 3 02:00:16 2023 +0900 refactor: 타입선언 통일 commit 2be145c Author: 김혜준 <alice5855@naver.com> Date: Thu Nov 2 15:13:07 2023 +0900 fix: lint 에러 수정 commit d291ac3 Author: 김혜준 <alice5855@naver.com> Date: Thu Nov 2 15:12:01 2023 +0900 refactor: return 추가 분기처리 및 검색 UI수정 commit c419b19 Author: 김혜준 <alice5855@naver.com> Date: Thu Nov 2 14:19:05 2023 +0900 refator: enterEvent함수 변경 commit 1fc142a Author: 김혜준 <alice5855@naver.com> Date: Thu Nov 2 13:58:11 2023 +0900 fix: lint 에러 수정 commit 48f514c Author: 김혜준 <alice5855@naver.com> Date: Thu Nov 2 13:40:05 2023 +0900 refactor: return 값 재분기 처리 commit 2ba0e8c Author: 김혜준 <alice5855@naver.com> Date: Thu Nov 2 02:02:20 2023 +0900 refator: 불필요한 if 문 삭제 commit aba2f12 Author: 김혜준 <alice5855@naver.com> Date: Thu Nov 2 01:30:57 2023 +0900 refactor: 내부 이벤트함수 외부로 이동 commit 74b638b Author: 김혜준 <alice5855@naver.com> Date: Thu Nov 2 00:31:52 2023 +0900 refator: useDebounce 타입 수정 commit 5a7413e Author: 김혜준 <alice5855@naver.com> Date: Thu Nov 2 00:16:01 2023 +0900 refactor: return값 분기처리 commit 91c405f Author: 김혜준 <alice5855@naver.com> Date: Mon Oct 30 02:07:46 2023 +0900 refactor: 함수명 변경 commit b042d95 Author: 김혜준 <alice5855@naver.com> Date: Mon Oct 30 01:45:08 2023 +0900 fix: 불필요한 콘솔 삭제 commit c56736b Merge: 2e40c20 4065df0 Author: 김혜준 <alice5855@naver.com> Date: Mon Oct 30 01:41:59 2023 +0900 Merge branch 'develop' into feature/#86 commit 2e40c20 Author: 김혜준 <alice5855@naver.com> Date: Mon Oct 30 01:21:32 2023 +0900 feat: 검색 결과 페이지 구현

hyejun0228

수고하셨습니다! 코드가 깔끔해 읽기 수월 했습니다ㅎㅎ
질문 몇개 달아놓겠습니다!

hyejun0228 · 2023-11-08T05:17:39Z

src/pages/ShopDetail/components/Map/index.tsx

+      <SectionHeader
+        title="지도"
+        description={formattedAddress}
+        button={{ name: 'URL 복사', handler: () => {} }}


해당 handler 함수는 왜 빈 함수인가요?!

미적용 내용

북마크 등록 기능

리뷰의 전체보기 기능

url 복사 기능

사진 전체 보기 기능

여기에서 리뷰의 전체보기 기능 및 사진 전체 보기 기능에 해당합니다!

hyejun0228 · 2023-11-08T05:23:13Z

src/pages/ShopDetail/components/ReviewList/FriendReviewList.tsx

+        <SectionHeader
+          title="친구의 리뷰"
+          description={`총 ${totalElements}개의 리뷰`}
+          button={totalElements > size ? { name: '전체보기', handler: () => {} } : undefined}


여기두요..! 다음 PR에 기능을 추가해주려고 임시로 함수를 비어둔건가요?

위의 코멘트로 대신하겠습니다..!

hyejun0228 · 2023-11-08T05:26:17Z

src/pages/ShopDetail/components/ReviewList/MyReviewList.tsx

+                  alt={`${userReviewResponse.nickname}의 프로필`}
+                  src={userReviewResponse?.profileImage?.url}
+                />
+                <div className={styles['review-list__main__my-content']}>


className 을 review-list__main--my-content 로 변경해야할 것 같습니다!

헉 bem 구조를 헷갈렸네요! 짚어주셔서 감사합니다!
2bceb21

.eslintrc.json

src/api/review/entity.ts

src/api/shop/entity.ts

ChoiWonBeen · 2023-11-10T06:43:54Z

src/pages/Home/components/Map/components/MarkerHtml/index.tsx

-      </div>
-      <div class=${styles['bubble__name--clicked']}>
-        ${name}
+  <a href='/shop/${id}'>


혹시 ClickedMarkerHtml을 쓰는 곳에서(마커를 세팅하는 곳에서) onClick같은 핸들러를 넘겨줄 수 있지 않을까요? 넘기면 csr장점을 활용하지 못하는 a태그를 쓰는게 아니라 routing을 해줄 수 있을 것 같아요 (안됨말고)

좀 찾아보긴 했는데, onClick과 같이 핸들러를 넘겨주려면 여러모로 이쪽을 다 뜯어 고쳐야 되더라구요.
그래서 눈물을 머금고(?) 그냥 가장 쉬운 방법을... 택했습니다.

src/pages/Home/components/Map/hooks/useFilterShops.ts

src/pages/ShopDetail/components/SectionHeader/SectionHeader.module.scss

src/pages/ShopDetail/components/SectionHeader/index.tsx

ChoiWonBeen · 2023-11-10T07:09:44Z

src/pages/ShopDetail/index.tsx

+  return (
+    <>
+      <AuthTopNavigation />
+      <div className={styles.container}>스켈레톤</div>


추후 추가 예정이겠죠? 주석으로 적어두는게 좋을 것 같아용

맞슴니다! suspense 넣으면서 들어갈거에요~!

src/pages/ShopDetail/index.tsx

junghaesung79

고생하셨습니다! 궁금한 부분 몇 가지 적어 두겠습니다!

junghaesung79 · 2023-11-10T06:12:33Z

src/components/StarRating/StarRatingPreview.tsx

+        <Star
+          key={num}
+          className={styles.wrapper__star}
+          width={40}


Star로 불러온 svg에 height하고 viewBox도 있던데 width만 바꿔줘도 자동으로 비율이 조정되는 건가요??

네! 자동으로 조절이 됩니다!

junghaesung79 · 2023-11-10T06:22:48Z

src/components/StarRating/StarRatingPreview.tsx

+          key={num}
+          className={styles.wrapper__star}
+          width={40}
+          fill={rate >= num ? '#ff7f23' : '#eee'}


#eeeeee를 #eee처럼 줄여서 쓸 수 있다는 것을 처음 알았습니다! 처음에 통일성을 생각하면 #eeeeee가 낫나 생각했는데 줄여서 쓸 수 있도록 만들어진 것을 보면 #eee를 사용하는 것이 좋은 것 같습니다.

junghaesung79 · 2023-11-10T15:05:50Z

src/components/StarRating/StarRatingPreview.tsx

+    <div className={styles.starRateContainer}>
+      {[1, 2, 3, 4, 5].map((num) => (
+        <Star
+          key={num}
+          className={styles.wrapper__star}


className을 rating 하고 rating_star이라고 하면 어떨까요? 의미도 전달 되고 간결할 것 같아요!

기존에 만들어진 컴포넌트(StarRating)의 jsx와 css를 재활용해서 만들었습니다!
그래서 기존에 merge 되어있는 클래스 명이라 다시 안 바꾸어도 된다고 생각해요!

junghaesung79 · 2023-11-10T15:14:54Z

src/pages/ShopDetail/components/ImageCarousel/index.tsx

+    if (currentIndex === imageUrls.length - 3) return;
+
+    increment();


if (currentIndex !== imageUrls.length - 3) increment(); 라고 적을 수도 있나요? 한 줄로 하면 '마지막 이미지가 아니라면 1 올린다.' 이런 식으로 읽을 수 있을 것 같은데 어떻게 생각하시나요?

되도록이면 ! , !== 과 같은 부정형 연산을 피하는게 좋아요.
읽는데 부정형 표현이 많으면 그만큼 코드를 읽기가 불편해지거든요!

관련해서 클린코드를 참고해보면 좋을 것 같아요! (검색어 : 부정형 연산, 부정 조건문 등..)

과연 그렇군요! 참고하겠습니다!

junghaesung79 · 2023-11-10T15:20:36Z

src/pages/ShopDetail/components/ImageCarousel/index.tsx

+  imageUrls: string[];
+}
+
+function ImageCarousel({ imageUrls }: Props) {


컴포넌트 이름을 Carousel이라고만 하면 의미 전달이 잘 안 되려나요? 만약 괜찮다면 밑에 className도 바로 crousel이라고 할 수 있을 것 같아요!

Carousel 이라고만 하기에는 컴포넌트 자체가 이미지만을 케러셀로 보여주려고 하기 때문에 Image 라는 말을 앞에 붙여주는게 좋다고 생각해요!
만약 이미지 이외에 컴포넌트나 문자열과 같은 데이터도 케러셀로 보여줄 수 있다면 Carousel로 네이밍을 지을 것 같네요~!

junghaesung79 · 2023-11-10T16:02:55Z

src/pages/ShopDetail/index.tsx

+                <div className={styles['detail-main__rate']}>
+                  <StarRatingPreview rate={totalRating} />


컴포넌트 이름에 Rating이 들어가니까 클래스 이름도 rating이라고 해도 좋을것 같은데 어떻게 생각하시나요?

좋아요~! 통일성을 주면 좋겠네요!

junghaesung79 · 2023-11-10T16:06:25Z

src/pages/ShopDetail/index.tsx

+              <div>
+                <div className={styles['detail-main__info-name']}>기본 정보</div>
+                <div className={styles['detail-main__info']}>
+                  <span>영업시간</span>
+                  <div className={styles['line-divisor']} />
+                  <span>{formatPeriod(todayPeriod)}</span>
+                </div>
+                <div className={styles['detail-main__info']}>
+                  <span>전화번호</span>
+                  <div className={styles['line-divisor']} />
+                  <span>{formattedPhoneNumber}</span>
+                </div>
+                <div className={styles['detail-main__info']}>
+                  <span>주소</span>
+                  <div className={styles['line-divisor']} />
+                  <span>{formattedAddress}</span>
+                </div>
+              </div>
+              <button className={styles['detail-main__report']} type="button" onClick={() => {}}>
+                <InfoIcon />
+                <div>틀린 정보 신고</div>
+              </button>


이 부분도 분리하면 className 짓기에 더 편할 것 같아요:smile:

음... 따로 컴포넌트를 분리해서 얻을 수 있는 이점을 모르겠어서 분리를 안했는데, 혹시 이걸 분리한다면 얻을 수 있는 이점이 className 작명 외에 다른 부분이 있을까요?

아뇨 그 부분 말고는 이점이 없는 것 같아요. 저는 분리하면 할 수록 좋은 줄 알았는데 확실히 어떤 이점이 있나 생각해보고 분리하는 것이 맞겠네요😃

style 때문에 분리를 하는것도 코드를 읽기 편하게 하기 위한 방면으로도 분리를 하는 경우가 있긴하죠!
이건 프로젝트 규칙이나 개인 성향에 따라서 나뉠 수 있다고 생각해요! 해성님의 의견도 맞다고 생각합니다~!

D0Dam added 24 commits November 1, 2023 13:08

Merge commit '3dd27b16c21891eb16b950346806161ea3525988'

d3aa974

feat: shop 응답값 타입 정의

36a3696

refactor: 오타 수정

cb2dedb

feat: useCounter 구현

9a91cdf

feat: marker 클릭 이벤트 추가

1793744

feat: ImageCarousel 구현

22ecaac

feat: ShopDetail Page 구조 잡기

5206053

refactor: typo error 수정

11f58eb

refactor: imageCarousel css 수정

0fa5ad5

feat: StarRatingPreview 구현

6807ecd

feat: ShopDetail 에 기본 정보 ui 추가

bebc87a

refactor: 불필요한 eslin 옵션 off

ea5f354

refactor: detail 페이지 경로 수정

e7e781a

feat: fetch 로직 및 타입 설계

422a4a5

feat: 데이터 확인을 위한 mock 추가

8ffe52c

feat: not found svg 추가

b0c4c55

feat: SectionHeader 구현

1e555b1

feat: ISO 형식 날짜 변환 함수 구현

132f503

feat: Review 관련 컴포넌트 구현

2e3a487

feat: Map 구현

1b12a73

feat: NotFound 컴포넌트 구현

4c14198

feat: ShopDetail에 컴포넌트 연결 및 grid 적용

dac37e3

fix: 충돌간 에러사항 수정

0376b56

D0Dam self-assigned this Nov 7, 2023

D0Dam requested review from chaeseungyun, hyejun0228, KimKyungYun, kimeodml and LUNA-KK as code owners November 7, 2023 08:30

D0Dam requested review from 20HyeonsuLee and HAEROOL as code owners November 7, 2023 08:30

D0Dam added 3 commits November 7, 2023 17:34

Merge branch 'develop' into feature/#56

a5c0e14

fix: lint 에러 수정

906f35c

fix: lint 에러 수정

b891fd7

hyejun0228 requested changes Nov 8, 2023

View reviewed changes

refactor: bem 형식에 맞게 className 수정

2bceb21

D0Dam requested a review from hyejun0228 November 8, 2023 07:36

hyejun0228 approved these changes Nov 9, 2023

View reviewed changes

ChoiWonBeen approved these changes Nov 10, 2023

View reviewed changes

junghaesung79 approved these changes Nov 10, 2023

View reviewed changes

D0Dam added 6 commits November 14, 2023 13:33

refactor: 불확실한 타입명 및 타입 재설정

3b2915e

refactor:불필요한 타입 추론 제거

6b4b2d6

refactor: css 코드 최적화

3fb9d34

refactor: SectionHeader Button 관련 props 네이밍 변경

dd72fec

refactor: 코드 이해를 위한 주석 추가

cb74e48

refactor: 통일감을 위한 className 변경

dafe87a

D0Dam requested a review from junghaesung79 November 14, 2023 04:54

D0Dam merged commit 068ab01 into develop Nov 14, 2023
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DETAIL] 상점 상세 페이지 구현 #116

[DETAIL] 상점 상세 페이지 구현 #116

D0Dam commented Nov 7, 2023 •

edited

Loading

hyejun0228 left a comment

hyejun0228 Nov 8, 2023

D0Dam Nov 8, 2023

hyejun0228 Nov 8, 2023

D0Dam Nov 8, 2023 •

edited

Loading

hyejun0228 Nov 8, 2023

D0Dam Nov 8, 2023

ChoiWonBeen Nov 10, 2023

D0Dam Nov 10, 2023

ChoiWonBeen Nov 10, 2023

D0Dam Nov 10, 2023

junghaesung79 left a comment

junghaesung79 Nov 10, 2023

D0Dam Nov 14, 2023

junghaesung79 Nov 10, 2023

junghaesung79 Nov 10, 2023

D0Dam Nov 14, 2023

junghaesung79 Nov 10, 2023

D0Dam Nov 14, 2023 •

edited

Loading

junghaesung79 Nov 14, 2023

junghaesung79 Nov 10, 2023

D0Dam Nov 14, 2023

junghaesung79 Nov 10, 2023

D0Dam Nov 14, 2023

junghaesung79 Nov 10, 2023

D0Dam Nov 14, 2023

junghaesung79 Nov 14, 2023

D0Dam Nov 14, 2023

		if (currentIndex === imageUrls.length - 3) return;

		increment();

		<div className={styles['detail-main__rate']}>
		<StarRatingPreview rate={totalRating} />

[DETAIL] 상점 상세 페이지 구현 #116

[DETAIL] 상점 상세 페이지 구현 #116

Conversation

D0Dam commented Nov 7, 2023 • edited Loading

[#56]

구현 예시

Please check if the PR fulfills these requirements

hyejun0228 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

D0Dam Nov 8, 2023 • 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

junghaesung79 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

D0Dam Nov 14, 2023 • 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

D0Dam commented Nov 7, 2023 •

edited

Loading

D0Dam Nov 8, 2023 •

edited

Loading

D0Dam Nov 14, 2023 •

edited

Loading