[Team-06-FE] 3주차 PR #54

qkdflrgs · 2023-09-08T02:58:18Z

[TEAM#06-FE] 3주차 PR

데이지 안녕하세요!! 벌써 반절이나 지나서 3주차가 되었네요!
이번주는 백엔드와 Oauth 로그인 구현과 각 페이지별 UI 작업을 진행했어요🙌
그리고 추가적으로 간단한 api 작업과 환경변수 설정, 유틸함수의 테스트 코드를 추가하였습니다.
저희 조 진행 속도가 빠른 편은 아니지만 아티랑 다음주부터 열심히 또 진행해볼게요! 감사합니다😀

이번 주 진행사항

공용 컴포넌트 구현
- States
- Tag
페이지 UI 구현
- 메인 페이지
- 내 계정 페이지
- 회원가입 페이지
- 콜백 페이지(Oauth 로그인)
- 상품 상세 페이지
API
- axios 설정
- 환경 변수 설정
테스트 코드
- 유틸 함수 테스트 코드 추가

진행 상황 미리보기(배포링크)

2023-09-08.5.33.50.mov

고민이나 궁금한 점 👋

[고민한 부분]

리액트 쿼리를 사용하다보니 생각보다 꽤 난이도가 있어 진도를 빠르게 나가지 못하고 있어요ㅠㅠ

[궁금한 점]

테스트 코드 작성 중 해결하지 못한 문제
util 함수 외의 동작 관련 테스팅을 해보고 싶어서 NavigationBar 클릭 했을 때 탭 안의 글자색을 통해 제대로 활성화 되는지 테스트를 해보고 싶었습니다. 기본으로 홈메뉴가 활성화 되어있는 상태라 홈메뉴 const homeButton = getByRole('button', { name: /홈화면/i }); 를 toHaveStyle로 먼저 기본 색상이 제대로 들어가 있는지 확인하려고 했는데, test 해보면 color 색상이 제대로 안뜨고 결과에 ButtonText라고 나오더라구요.. 이유를 모르겠어서 해결하지 못했네요.🥲 (이 코드가 현재 PR에 반영되어있진 않습니다)

관련 링크

- 파일 업로드 로직 리팩토링 - Error 컴포넌트 리팩토링 - home에 item, category 컴포넌트들 key값 index에서 고유한 id로 변경 - home에 item list가 비어 있는 경우 예외 처리 추가 - App에 useEffect event 추가, 삭제 callback 변경 - useScreenConfigStore에 set 수정

…toring 사소한 refactoring

* feat: 레디스를 통한 좋아요, 조회수 구현 * feat: 상품 등록, 조회 시 stat 기능 추가 * chore: 레디스 의존성, properties 추가 * chore: 상품 상세 조회 응답에 stat 추가 * feat: RedisConfig 추가 * rename: 접근제어자, 디렉토리, 클래스명, 메소드명 수정 * refactor: 메소드 분리, 메소드명 수정

damilog

리태, 아티 안녕하세요!

코드가 가독성이 좋네요! 이번 리뷰도 수월했습니다. 팀원을 배려하며 코드를 작성해주신 게 눈에 보여요👍
Oauth 로그인 구현은 어렵지 않으셨나요? 리액트 쿼리, 테스트 코드도 작성해보셨군요.
매주 새로운 시도를 하며 성장하시는 모습을 보여 저도 본받고 갑니다👏
3주차도 고생 많으셨어요!
추가로 궁금하신 사항 있으시면 코멘트 달아주세요~

[궁금한 점에 대한 답변]
버튼 중 텍스트가 '홈화면'인 버튼을 제대로 못가져오는 게 아닌가 싶은데요..
const homeButton = getByRole('button', { name: "홈화면" }) 으로 해도 잘 안되던가요?🤔

damilog · 2023-09-09T13:36:13Z

fe/src/pages/AccountPage.tsx

+
+export const AccountPage = () => {
+  const [profileImg, setProfileImg] = useState<File>();
+  const isLogin = false;


[질문]

엇..상태로 관리해야하지 않을까요? 🤔

UI 작업하면서 테스트용으로 썼어요😅 업데이트 하면서 변경하겠습니다!

damilog · 2023-09-09T13:44:31Z

fe/src/pages/AddPage.tsx

+  useEffect(() => {
+    if (hasName) return;
+    setRecommendCategories(generateRecommendCategory(category));
+    setSelectedCategory(undefined);


[제안]

값이 없음을 표현하기 위해 undefined를 할당해주신 것 같군요~
보통 비어있는 값으로 재할당 할 때는 null을 사용하는데요.
undefined와 null의 차이를 고민해보시면 좋을 것 같아요!

selectedCategory에 null을 할당 하신다면 selectedCategory 타입 정의도 다시 하셔야겠네요~
한눈에 이해되는 재밌는 예시가 있길래 가져와봤습니다🫠

비유가 쉽고 재밌네요!!😁 null과 undefined을 구분해서 잘 사용하겠습니다👍

damilog · 2023-09-09T13:47:04Z

fe/src/pages/CallbackPage.tsx

+    const URL = window.location.href;
+    const parts = URL.split('?');
+    const queryString = parts[1];


[제안]

URL API를 쓰시면 더 간단하게 작성해볼 수 있겠네요~
URL: searchParams property

damilog · 2023-09-09T13:49:30Z

fe/src/pages/HistoryPage.tsx

+];
+
+export const HistoryPage = () => {
+  const [selectedCategory, setSelectedCategory] = useState<string>('전체');


[제안]

data 값을 보아하니 string type보다 좁힐 수 있을듯 합니다~!

damilog · 2023-09-09T13:50:54Z

fe/src/components/Tag/Tag.tsx

+  onClick(): void;
+};
+
+export const Tag: React.FC<Props> = ({ title, isSelected, onClick }) => {


[제안]

Tag 라는 컴포넌트 명이 너무 일반적이라고 느껴집니다. 좀 더 구체화 하면 좋겠네요~

컴포넌트 네이밍 할 때 조금 더 구체적으로 작성하겠습니다🙌

damilog · 2023-09-09T14:19:08Z

fe/src/pages/Layout.tsx

+        <Fab>
+          <FabButton onClick={() => navigate('/add')} />
+        </Fab>


[질문]

혹시 추후 FabButton에 Add 외의 다른 요소를 구현하실 계획이실까요?
그게 아니라면 add 버튼 용으로 리팩터링해도 괜찮겠네요~

damilog · 2023-09-09T14:26:18Z

fe/src/test/displayTimeAgo.test.ts

+import displayTimeAgo from '../utils/displayTimeAgo';
+
+describe('displayTimeAgo 함수 테스트', () => {
+  it('초단위로 경과된 시간을 올바르게 표시해야 한다', () => {


[제안]

'올바르게 표시해야한다'라는 표현은 테스트 케이스를 명확히 전달하기 어려워 보이는데요.
어떤 형태의 값이 반환되어야 하는지 구체적으로 작성해보면 어떨까요?

damilog · 2023-09-09T14:27:17Z

fe/src/test/formatPrice.test.ts

@@ -0,0 +1,24 @@
+import formatPrice from '../utils/formatPrice';
+
+describe('formatPrice 함수 테스트', () => {


damilog · 2023-09-09T14:31:06Z

fe/src/pages/HistoryPage.tsx

+
+      <Content>
+        {items.length === 0 ? (
+          <EmptyMessage>판매 내역이 없습니다</EmptyMessage>


[제안]

아이템이 0개일 때 노출된다.

'판매 내역이 없습니다' or '관심 상품이 없습니다' 2가지 문구가 존재한다.

스타일이 동일하다.

위 공통점을 토대로 EmptyMessage를 공통 컴포넌트로 구현하면 좋겠네요~

저도 여기 작성하면서 History페이지와 Liked 페이지가 비슷하다고 생각되면서 작성하긴 했었네요!
한번 만들어보겠습니다!

damilog · 2023-09-09T14:54:23Z

fe/src/api/category/useCategories.tsx

+};
+
+export const usePrefetchCategoriesWithoutImages = (): void => {
+  const queryClient = useQueryClient();


[질문]

useQueryClient를 사용하셨군요~
usePrefetchCategoriesWithoutImages는 어떤 경우에 사용하실 계획이신가요?

제품 상세 페이지에서 상품 이름을 입력하면 랜덤으로 카테고리를 추천해주는 기능이 있어서, 해당 기능에서 사용하려고 했습니다

* #44 feat: 나의 지역 추가 api 구현 * #44 test: 나의 지역 추가 api 통합 테스트

- data 객체 한계층 벗겨내기

* #51 chore: redis 설정 추가 * #51 feat: 로그아웃 기능 구현 - 로그아웃 api 요청 시 redis에 엑세스토큰을 저장하고 db에서 리프레쉬토큰을 삭제합니다. * #51 chore: 테스트에 redis 설정 추가 * #51 refactor: logout 메서드를 AuthService로 이동 * #51 test: Redis 연결 테스트 * feat: logout 기능 필터 제외 * fix: claim이 추가되지 않는 문제 해결 * chore: docker 환경에 redis 컨테이너 추가 * #51 refactor: 리뷰반영 수정 * #51 refactor: 리뷰반영 수정 --------- Co-authored-by: Jeongyong Park <1239824@naver.com>

* feat: 액세스 토큰 재발급 구현 #54 * feat: 액세스 토큰 재발급 uri 화이트 리스트에 추가 #54 * test: 액세스 토큰 재발급 통합 테스트 코드 작성 #54

…e#48 docs: RestDocs 이미지 request 변경

* refactor #53: 상품 validate 처리 유저에 이관 및 ID를 객체로 받게 수정 * feat #53: 나의 동네를 선택 기능 구현 * fix #53: http status no content -> ok 수정 - no content인 경우 response body에 아무것도 전달되지 않아서 http method가 delete인 경우 http status를 no content -> ok로 수정

관심 목록 관련 API 구현 완료

* #54 refactor : 리뷰사항 반영 및 return값 수정 * #54 fix : 테스트 오류나는 부분이 있어서 수정 * #54 test : 테스트 코드 수정 * #54 refactor : 리뷰사항 반영 - 컨버터 생성 - pagination -> PaginationUtils 클래스로 변경 --------- Co-authored-by: YongHwan Kim <yonghwankim.dev@gmail.com>

-chat-list 채팅방 목록 페이지 UI

* feat: SSE notification 추가 * feat: 채팅 알림 기능 추가 * refactor: join on 조건, 안 쓰는 부분 제거 * feat: 안 읽은 전체 채팅 개수 조회 기능 추가 * fix: 컨트롤러에서 sseEmitter 반환 * refactor: 상대방이 채팅방에 접속해 있을 때는 알림을 보내지 않도록 수정

qkdflrgs and others added 13 commits September 4, 2023 11:36

feat/#67: 페이지 라우터 설정 (#68)

1db65cb

feat/#69: 필요한 page 추가 및 Layout 설정 (#70)

e1b7276

feat/#69: 메인 페이지 UI 구현 (#72)

19c8f90

feat/#71: Category 페이지 UI 구현 (#73)

42bc85b

feat/#76: axios 설정, 환경 변수 설정 (#77)

f20f12e

feat/#78: category 목록 관련 요청 추가 (#79)

e95ed5d

feat/#74: 내 계정 페이지 UI 구현 (#80)

d134784

feat/#81: 회원가입 페이지 UI 구현 (#82)

05b5193

feat/#37: ProfileImgInput 컴포넌트 구현 (#83)

84279e6

feat/#42: Tag 컴포넌트 구현 (#84)

fe8bc79

fix/#86: 글 목록이 위로 올라오는 현상 수정 (#87)

7fe2624

feat/#85: Callback 페이지 구현 (#88)

a4ab878

feat/#89: 판매내역, 관심상품 페이지 UI 작업 (#90)

3c14529

qkdflrgs changed the title ~~[team-06-FE] 3주차 PR~~ [Team-06-FE] 3주차 PR Sep 8, 2023

qkdflrgs assigned lolWK and qkdflrgs Sep 8, 2023

qkdflrgs added the review-fe label Sep 8, 2023

lolWK and others added 6 commits September 8, 2023 12:00

test/#91: 유틸 함수 테스트 코드 추가 (#92)

9ca1907

feat/#93: States 컴포넌트 구현 (#95)

d7f17d3

refactor/#94: 3주차 컴포넌트 리팩토링 (#96)

2737b96

feat/#75: 상품 상세 페이지 UI 구현 (#97)

a5e714c

fix/#98: 라우터 오류 수정 (#99)

d2e4a24

fix/#100: 상품 추가 페이지 버그 수정 (#101)

1bc6a16

sudago referenced this pull request in max2023-4th-project-01/BE-B-Cokkiri-Market Sep 8, 2023

Merge pull request #55 from max2023-4th-project-01/refactor/#54-refac…

43fc337

…toring 사소한 refactoring

qkdflrgs requested a review from damilog September 9, 2023 05:46

damilog approved these changes Sep 9, 2023

View reviewed changes

damilog merged commit c85c144 into codesquad-members-2023:team-06-fe Sep 9, 2023

tmdgusya pushed a commit that referenced this pull request Sep 10, 2023

#44 feat: 내 지역 목록 추가 (#54)

11be838

* #44 feat: 나의 지역 추가 api 구현 * #44 test: 나의 지역 추가 api 통합 테스트

youryu0212 pushed a commit that referenced this pull request Sep 10, 2023

fix: API reponse body 변경사항 반영 (#54)

fd22a49

- data 객체 한계층 벗겨내기

qkdflrgs deleted the dev-fe branch September 11, 2023 06:09

tmdgusya pushed a commit that referenced this pull request Sep 17, 2023

Merge pull request #54 from masters2023-project-06-second-hand/featur…

38a0fd8

…e#48 docs: RestDocs 이미지 request 변경

sallyjellyy pushed a commit that referenced this pull request Sep 17, 2023

Merge pull request #58 from second-hand-team-04/feature/#54-wishlist

9ef04c4

관심 목록 관련 API 구현 완료

park78951 pushed a commit that referenced this pull request Sep 24, 2023

Merge pull request #54 from masters2023-4th-project-carrot-talk/feat/#53

b82589a

-chat-list 채팅방 목록 페이지 UI

		@@ -0,0 +1,24 @@
		import formatPrice from '../utils/formatPrice';

		describe('formatPrice 함수 테스트', () => {

[Team-06-FE] 3주차 PR #54

[Team-06-FE] 3주차 PR #54

Uh oh!

Conversation

qkdflrgs commented Sep 8, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

[TEAM#06-FE] 3주차 PR

이번 주 진행사항

진행 상황 미리보기(배포링크)

고민이나 궁금한 점 👋

관련 링크

Uh oh!

damilog left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

qkdflrgs commented Sep 8, 2023 •

edited

Loading

damilog left a comment •

edited

Loading