필요한 내용은 정리하여
리팩토링 페이지
에 작성해두었습니다.비동기 소통 + 다음날 회의에서 얘기할 주제에 대해 작성해주세요.
7월 19일 (화)
chakra-ui를 사용하면 인라인으로 코드를 많이 작성하게 되는데 이를 방지하고자 emotion으로 감싼다.
margin, padding을 설정할 때 가능하면 [top, left]으로 작성하기
디자인 시스템 → 폴더 구조 정할 때 자세히 논의
git commit 정하기
git branch 전략
git merge 전략
대표 색상 정하기
대표 로고 정하기
배포 관련 (CI, CD)
7월 26일 (화)
뒤로가기 클릭시 빈페이지의 경우 메인페이지 말고 router.back()으로만 작동하기
SSR에 대한 구조 (Data fetching)
- server에서 fetching (빈화면 → 한번에 짠) (SEO에서 강점) (react-query의 캐싱X → 테스트 미확인)
client에서 fetching ([화면 틀 + loading] → 데이터 보여주기)
색상을 상수화해서 모아두기
- chakra-ui 커스터마이징 테마로 해결
상품 상세 페이지 헤더와 이미지 문제
7월 27일 (수)
components 폴더 내 index파일과 pages의 index가 구분이 되지 않음
- components에서는 가능한 컴포넌트로 만들고 이를 모아서 사용하는 곳은 pages에서 하는 것이 적절하지 않을까하는 생각
- 따라서 components에서는 index파일 사용이 불필요하다고 생각
- 반영 완
호석님에게 프로젝트 진행 공유를 위해 마무리 스크럼 필요하다고 생각
pages/products/index.tsx ⇒ 필요 없을 것 같아요
- /products라는 주소를 사용하지 않기 때문에 파일을 지워도 괜찮을 것 같습니다
7월 29일 (금)
스타크가 고민했던
input type=number 요소
최솟값 1000원 문제- 사용자 금액 입력은 자유롭게 하되
- 1000원 미만을 입력했을 때만 렌더링 되는 (빨간)글자를
최소금액은 1000원 입니다!
이렇게 보여주고
- 정상적으로 입력할 때는 (초록)글자를
1,234,000원
이렇게 보여주면 하는게 낫지 않을까 싶습니다
- 추가적으로 적합한 값을 입력했을 때
등록
버튼을 활성화 시키거나등록
버튼을 눌렀을 때 validation처리를 하면 좋을 것 같습니다.
사용자 경고 및 알림 → Toast 사용 (위에서 내려오는 것으로 정함)
Drawer UI 의견 결정
- 양 옆 → 레이아웃 맞출 필요 X
아래 → 레이아웃 맞추기- 레퍼런스 : 카카오프렌즈
뒤로가기 관련
- 목록 → 상세 → (뒤로가기) → 목록
- 일반적인 상황
- 빈 탭 → 상세 → (뒤로가기) → 목록
- 불가능 (검색 결과에서 진입했는지 메인에서 진입했는지 알 수 없음)
빈 탭 → 상세 → {뒤로가기 버튼 대신 홈 버튼} → 홈 {뒤로가기 불가능}- 레퍼런스 : 카카오프렌즈
- 빈 탭 → 상세 → (뒤로가기) → 빈 탭
- 레퍼런스 : 카카오헤어스타일
API 관련
- API 명세의 response에서
입찰건수
,카테고리
필요
- (메인)상품 목록 조회는 그냥 최신 거 상품 목록 조회
- 상품 상세 조회 API에서 상품 주인의 id값 필요 → 상품 주인 여부에 따른 입찰 버튼 UI 변동
7월 30일 (토)
‼️2주차 스프린트부터 commit message에
[BM-55] gitmoji 내용작성
이렇게 바꿈‼️샛별님 디자인 요청사항 매일 확인하여 최대한 반영해두기
샛별님에게 디자인 요청사항이 있는 경우 (여기)안건에다가 작성해주시면 수렴해서 매일 15시에 전달
비동기 스크럼 전환 논의 (+ 기록도 되어 좋을 듯)
Storage 논의 필요(로컬스토리지, 세션 스토리지 등) → accessToken, refreshToken
7월 31일 (일)
[디자인] 상품 상세 페이지에 희망 지역을 나타내 줄 부분 필요
[디자인] 알림페이지 필요
[디자인] 댓글 디자인 필요
[디자인] SideBar(메뉴바) 디자인 필요 → 1dep 줄여서 회원 정보 페이지에서 로그아웃 추가

백엔드 분들과 상의 필요
상품에 관련된 입찰자의 데이터 중에서
낙찰자만 남기고 지운다면-> 입찰한 상품 목록에는 입찰한(낙찰대기중) 상품 목록
- 입찰자의 데이터를 변경하지 않는다면-> 입찰한 상품 목록에는 낙찰받지 못했지만 입찰을 했던 모든 상품이 나오는 게 나을 것 같습니다.
8월 3일 (수)
(입찰한 경우) 얼마에 대해 입찰했는지를 전혀 고려하지 않았다 (디자인, UI, API 데이터 명세)
낙찰된 상품의 경우 card 컴포넌트에서
시작가
→ 낙찰가
로 바꾸고, 해당 상품 회색처리- [디자인], UI, 데이터 명세에 반영
- 레퍼런스 : 당근마켓 판매한 상품
토큰을 받는 페이지를 사용자가 임의로 작성하는 경우 어떻게 예외처리하는가
/auth?token=aaaaaaaaaaaaa
8월 4일 (목)
[디자인] 404, 500페이지 뒤로가기 버튼 추가
상품 상세 페이지 뒤로가기 버튼 색상 제어 → 보류
상품 상세 페이지 남은 시간 (0초)일 경우 처리 로직
맥스의견
나중에 0초이면 ui처리하는 로직이 있을 것 같은데, 문자열로 지정되는 것이라면
계산중입니다
같은 안내문구로 처리하는 건 어떤가요?[디자인] 회원 정보 페이지 제목
회원 정보
로 고정하는 것 → 아무것도 없는 것으로 결정‼️3번째 스프린트부터 commit message에
gitmoji 내용작성
이렇게 바꿈‼️- Husky 적용하여 자동으로 커밋 접두사로 브랜치명 추가작성됨
8월 6일 (토)
- 그냥 버그 제보 → THANKYOU
- 로그인 버튼 사라짐
(수정중..) 로그인화면 → 뒤로가기(메인) → 로그인 들어가면 사라지는 현상
8월 8일 (월)
PR 등록시 코드리뷰 우선순위 높이기 (의견제시 by stone)
- 연관 관계가 있는 작업이 있으면 대기 기간이 길어짐.
- 리뷰가 어렵다면 어프로브라도 달아서 빠르게 머지시키는게 효율적인 것 같음.
- ⇒ 죄송합니다 빠르게 리뷰달도록 하겠습니다..!
입찰 취소 기능
- 회원 정보 - 입찰 상품 목록 페이지에서 취소하도록 하는건 어떠신가요?
- 상품 상세 페이지에서 마땅한 UI가 떠오르지않아 작성합니다.
- ⇒ 카드컴포넌트 일관성 깨짐 / 상세페이지에서 처리하는 것이 나을것이라 생각함
샛별님께 로그아웃 말하기 - 로그아웃만 한 depth올리기
8월 10일 (수)
(재호 개인) 메인페이지에서 검색input onChange이벤트 억제해보기
채팅방 목록 api 문의
chatRooms?offset=${offset}&limit=${limit}
: 404 not found, 명세는 charRooms
- response data, thumbnailImg, profileImg (갱신 안된거일까요?)
- +) id 6번 기준으로 채팅방 데이터 만들어주실 수 있는지? (가능하다면)
- STOMP는 아직 못봤습니다. (죄송 ㅠ)
- 죄송해하지 마세요ㅠㅠ,,,
- 죄송금지
8월 11일 (목)
찜하기 기능 가능할까요?
8월 13일 (토)
- 로그인 토큰 인증 관련
- 재배포 하게 되면 로그인 한 순서대로 id가 1번부터(재희넴 아이디가 2개있어서 아마 3번부터..) 들어가는데 들어가는 순서대로 토큰이 배부가 된다. 즉, 회원가입(로그인?) 순서대로 토큰이 배부됨..
- 그래서 원래 4번이었던 물안경 유저가 재배포 되면서 → 새로 로그인 한 4번 유저 스톤이 되어버렸다.

- 찜하기를 구현
- > 찜하기/찜 취소하기 -> 내가 상품을 찜했는지의 여부 -> 메인페이지에서 상품마다 찜이 몇개있는지 보내주기 -> 유저의 찜한 상품 리스트 보여주기
8월 14일 (일)
메인페이지 찜 개수 UI 변경
- 우선 내가 찜했는지 안했는지는 보내주지 않고 개수만 보내주기 때문에 다음과 같이 UI 변경


수료식날 점검 받은 피드백
[질문] 프로젝트에 FE의 완성도에 대해 위와 같이 측정한 이유
- 깔끔했다
- 라이트하우스 점수가 높았다
- 코드 평가툴을 사용해서 좋았다 → 백엔드 관련인듯 → codecov
- 로딩 처리가 아쉬웠다
- 로딩 렌더링 처리는 안되어있고, 프로필 없을 때, 이미지 안뜨는 이슈, undefined, 연동이 잘 안되어있다. 버그가 많이 보인다.
- 로그인 정보가 남에게 나오는 이슈가 있어서, 글을 썼을 때 맨 밑으로 간다. → 로그인 정보가 남에게 나오는 이슈: 토큰문제, 글을 썼을 때 맨 밑: 낙찰 종류 순이기 때문에 원래 이렇지만,, 기획을 한 번 더 고민해봐야 할 것 같다
- 검색할 때 필터가 이미 끝난 것만 보기, 낙찰되지 않은 것만 걸러보기 기능이 필요한 것 같다. → 메인, 검색페이지(processed : false)에서 완료된 상품은 안보이도록 조절 → 백엔드 부탁)
- 코드 관리나 코드는 PR 단위가 조금 커보입니다. 리뷰는 조금 아쉽습니다. → PR 단위 큰건 ok, but 리뷰가 아쉽다니,, 맥스, 스타크 분발 → 아니면 최신 PR만 보고 말씀하시는 것일지도
- 바로 올린 게시물이 가장 아래 배치되어, 스크롤을 많이 내려야 하는 단점, 특정 영역에서 프로필 이미지가 깨지는 문제를 발견했습니다. → 메인, 검색 페이지에서 순서를 바꿔야하는 점, 프로필 이미지 깨지는건
프이
를 말씀하시는 것일까 아니면 image라고 뜨는 그 현상을 말씀하시는 것일까
- 나머지 부분에서는 적절한 애니메이션 처리가 인상 깊었습니다. → 나머지가 상세 페이지 말씀하는 것일까
[질문] 프로젝트에 BE의 완성도에 대해 위와 같이 측정한 이유
- 다양한 기술들 (ex 웹소켓, spring batch)을 많이 적용했다
- 테스트 커버리지가 높다
- 코드의 완성도에 있어서 도움을 주는 툴들을 많이 사용했다.
- 컨벤션 잘 지켜지고 있고, 테스트 코드도 다 깔끔하게 되어있다. 추상화 이런 거 잘 되어있다.
- 꼼꼼한 유효성 검사와 전략 패턴 사용이 좋았습니다
(자유작성) 프로젝트에 대한 총평과 피드백
- 디자인이 캐치하고 실제 사용하는 웹처럼 느껴졌다.
- 서비스의 목적에 맞게 필요한 기능들을 모두 넣었고, 실제 사용 서비스와 거의 유사한 수준의 UI
- 색 선정이 너무 강렬해서 디자인상으로 오래 이용하기가 살짝 힘들다.
- 고생 많으셨습니다. 미구현 혹은 버그가 조금 남아있어 아쉽습니다. UI는 예쁜 것 같아요. 준비하시느라 고생 많으셨습니다.
- 전체적으로 완성도가 높은 프로젝트라고 생각합니다. 디테일적인 부분을 신경쓰신다면, 미래에 더 퀄리티 높은 프로젝트가 될 것 같습니다!
- 로그인 안하면 다른 사람의 계정이 떴어요.
- 20만원을 하고 싶은데, 200만원을 실수로 입력하면 큰일이 날 것 같아요. 취소할 수 있을까요? 확인 과정이 필요해 보입니다.
- 입찰 전에는 채팅이 안되는 것 같아서 입찰 전에도 상품에 대해서 채팅을 고를 수 있었으면 좋겠다.
(선택) 프로젝트를 보고 궁금한 것의 질문을 남겨봅시다.
- 입찰을 여러번 할 수 있으면 좋을 것 같다
리팩토링
API 모듈화 수정
- api response type도 api 함수에 같이 있도록 변경
중복되는 코드 또는 컴포넌트 분리
디자인
반응형 디자인
- 모바일은 무조건 (깨짐, 밀림)없도록 만들기
색상이 적용된 svg
- siren-light.svg
SEO 관련
- 중간점검 멘토님 면담 피드백 확인??!!
렌더링 관련
무한 스크롤에서 스켈레톤 적용해보기
Suspense 알아보기
이미지 최적화
썸네일은 작은 사진인데 로딩이 생각보다 오래걸리는 것 같고ㅠ
→ 경수넴이 적용해보고 있습니담(next/image) → OKAY
스크롤 유지 기능 적용 (react-query인가에서 본것같기도한 기억이)
S3 관련
상품 등록에서 처음올리는 사진은 바로 반영이 안되는 현상
S3에서 딜레이가 조금 있는 것으로 추측
입력 폼 관련
trim으로 앞뒤 공백처리
useForm 훅에서 handleSubmit try_catch 처리 필요 (훅 호출하는 쪽에서 작성? 그런가봄봄)
로그인 관련
- 배포할 때마다 유저의 토큰이 달라지는데 그럼 유효하지 않은 토큰 정보로 로그인된 화면(Header)이 된다. 이를 막기위해 유효하지 않는 토큰의 경우 로그인된 화면(Header)으로 가는 것을 막아야한다. (getAuthUser 관련)
- 회원가입 순서에 따라 토큰이 정해지는데 이는 매 배포마다 동일하다 → 백엔드에서 처리해야할 이슈로 판단 (8월13일 안건 확인)
신고하기 관련
- 지금 나온 화면처럼 회원과 상품 신고는 별개로 구현 부탁드리겠습니다!! 유저는 상세 페이지에서 유저를 클릭 -> 유저 페이지 => 신고하기 버튼으로 신고로 구현 상품은 상세페이지에서 신고하기 버튼으로 신고
- 게시글 + 유저 신고, 채팅으로 신고 등은 그 후에 다시 기획부분으로 논의
문서 개선 및 정리
- UI 기능 명세서
- 회의록
- 안건
- Readme
- github-wiki
- github-releaseNote
입찰하기
- 엔터 버튼으로 입찰이 안됨.
- 입찰 완료 후 토스트 안내 후 입찰 금액 확인 버튼으로 UI 변화
- to-be : 입찰 완료 후 토스트 안내와 입찰 금액 확인 버튼으로 UI 바로 변화
브랜치 release를 추가해서 배포한는 곳을 release로 변경하는 것이 어떨까 슬며시 의견 내봅니담.