HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
프로그래머스 프론트엔드 데브코스 2기
프로그래머스 프론트엔드 데브코스 2기
/
🐢
달리팀
/
🏆
비드마켓 - 사이코
/
📌
안건
📌

안건

💡
필요한 내용은 정리하여 리팩토링 페이지에 작성해두었습니다.
📌
비동기 소통 + 다음날 회의에서 얘기할 주제에 대해 작성해주세요.
 
7월 19일 (화)
chakra-ui를 사용하면 인라인으로 코드를 많이 작성하게 되는데 이를 방지하고자 emotion으로 감싼다.
margin, padding을 설정할 때 가능하면 [top, left]으로 작성하기
디자인 시스템 → 폴더 구조 정할 때 자세히 논의
git commit 정하기
git branch 전략
git merge 전략
대표 색상 정하기
  • 🔗로고 색깔 선택하기
대표 로고 정하기
배포 관련 (CI, CD)
 
7월 26일 (화)
뒤로가기 클릭시 빈페이지의 경우 메인페이지 말고 router.back()으로만 작동하기
SSR에 대한 구조 (Data fetching)
  1. server에서 fetching (빈화면 → 한번에 짠) (SEO에서 강점) (react-query의 캐싱X → 테스트 미확인)
  1. 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 줄여서 회원 정보 페이지에서 로그아웃 추가
notion image
백엔드 분들과 상의 필요
상품에 관련된 입찰자의 데이터 중에서
  • 낙찰자만 남기고 지운다면-> 입찰한 상품 목록에는 입찰한(낙찰대기중) 상품 목록
  • 입찰자의 데이터를 변경하지 않는다면-> 입찰한 상품 목록에는 낙찰받지 못했지만 입찰을 했던 모든 상품이 나오는 게 나을 것 같습니다.
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일 (토)
  • 로그인 토큰 인증 관련
    • notion image
    • 재배포 하게 되면 로그인 한 순서대로 id가 1번부터(재희넴 아이디가 2개있어서 아마 3번부터..) 들어가는데 들어가는 순서대로 토큰이 배부가 된다. 즉, 회원가입(로그인?) 순서대로 토큰이 배부됨..
    • 그래서 원래 4번이었던 물안경 유저가 재배포 되면서 → 새로 로그인 한 4번 유저 스톤이 되어버렸다.
  • 찜하기를 구현
    • > 찜하기/찜 취소하기 -> 내가 상품을 찜했는지의 여부 -> 메인페이지에서 상품마다 찜이 몇개있는지 보내주기 -> 유저의 찜한 상품 리스트 보여주기
8월 14일 (일)
메인페이지 찜 개수 UI 변경
  • 우선 내가 찜했는지 안했는지는 보내주지 않고 개수만 보내주기 때문에 다음과 같이 UI 변경
notion image
notion image
 

 

수료식날 점검 받은 피드백

[질문] 프로젝트에 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로 변경하는 것이 어떨까 슬며시 의견 내봅니담.