breaking-dope / breaking-frontend Goto Github PK

상세 내용

• js sdk를 이용하여 로그인을 구현한다
• 처음 로그인하는 사용자면 회원가입 창으로 이동한다

상세 내용

• hr 를 이용한 Line 컴포넌트를 개발한다

버그 발생 내용

Pages 폴더를 pages로 변경했는데 Pages가 계속 남아있는 현상이 발생했습니다.

버그 발생 트리거

수정 후 기대 사항

상세 내용

• Header 컴포넌트에 프로필 토글 컴포넌트를 추가한다.
• 토글 아이콘 클릭 시 보여지고 focus out 되면 사라지도록 구현한다.
• 유저 이미지 클릭 시에도 토글이 작동하도록 한다.

버그 발생 내용

Pages 폴더를 로컬에서 pages로 바꾸고 커밋을 해도 대문자로 인식하고 있습니다. git mv 명령어로 폴더이름을 변경하여 해결할 예정입니다.

버그 발생 트리거

수정 후 기대 사항

Pages -> pages로 폴더 이름 변경

상세 내용

• 헤더와 컨텐츠를 담는 Layout 컴포넌트를 구현

버그 발생 내용

버그 발생 트리거

스토리북 canvas에서는 정상 작동하지만 docs나 컴포넌트 로드시에 svg파일이 정상적으로 보이지 않습니다.

수정 후 기대 사항

스토리북 canvas 처럼 보여져야 한다.

버그 발생 내용

Storybook에서는 jsconfig.js로 설정 했던 절대경로가 적용이 되지 않고 있습니다.
컴포넌트 안의 파일들을 절대경로로 바꾸고 Storybook을 실행했을 때 경로 인식을 못하는 상황이 발생했습니다.

버그 발생 트리거

수정 후 기대 사항

버그 발생 내용

• ProfileImage에서 이미지가 뭉개져서 나오는 현상 수정 (object-fit 설정으로 해결가능)
• filter absolute로 인한 겹쳐짐 문제 해결

상세 내용

• 개발 환경에서 테스트를 할수 있도록 환경을 구축한다

상세 내용

• subComponent를 없애고 feed 컴포넌트 하나로 합친다
• props 데이터는 객체로 받는다

버그 발생 내용

UserImage 컴포넌트에서 default profile image 시 padding이 붙어 사진이 올바르지 않게 나오는 문제가 있습니다.

기존에 있던 디폴트 프로필 이미지를 변경하면서 생긴 문제이므로 style을 수정해야합니다.

또, UserImage의 명칭을 ProfileImage로 수정하는 작업도 같이 진행합니다.

버그 발생 트리거

수정 후 기대 사항

상세 내용

• tab클릭시에 보이는 카드를 다르게 한다
• 제보글 정렬 필터를 클릭시에 필터 focus가 달라진다

상세 내용

• CRA를 이용하여 React 개발 환경을 초기화 한다.

상세 내용

• UX flow를 작성한다
• UI/UX를 디자인한다

상세 내용

• 카카오 로그인 토큰 전송
• 구글 로그인 토큰 전성
• 전송 결과에 따른 예외처리

상세 내용

• z-index를 상수화하여 관리하기 편하게 작성
• Line 컴포넌트 색상 theme으로 수정

상세 내용

• storybook에 올려놓는다.

상세 내용

• 활성화된 탭에 border-bottom 스타일을 준다.
• 중앙 정렬되도록 구현한다.

상세 내용

• 크기조절이 있어야한다.
• src가 없으면 자동으로 기본 이미지를 띄운다

상세 내용

• 필터를 클릭할 시 드롭다운된다.

상세 내용

• 에러 코드를 확인하여 상황에 맞게 메시지 처리
• 유효성 검사도 클라이언트에서 처리하는 것이 아닌 백엔드에서 처리함
• POST 요청에서 GET 요청의 pathparam으로 바꾸기

상세 내용

• tab 클릭시에 feed가 알맞게 정렬이 된다
• filter 클릭시에 feed가 알맞게 정렬이 된다
• 프로필 페이지 클릭시에 프로필 페이지로 이동한다

버그 발생 내용

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
부모 컴포넌트에서 자식 컴포넌트의 DOM 요소를 접근할 때는 forwardRef를 사용하여 접근해야한다고 합니다.
참조 링크 : https://sambalim.tistory.com/151

버그 발생 트리거

Input 컴포넌트에 useRef 훅을 ref로 할당하고 접근하려 할 때 에러가 발생했습니다.

상세 내용

• 아이콘은 svg파일로 프로젝트에 직접 넣어서 사용한다.
• Input story를 만든다.
• Button story를 만든다.
• Header story를 만든다.

상세 내용

• 프로필 수정 페이지는 회원가입 페이지 UI를 따라간다.
• 기존 유저의 데이터를 인풋에 입력해둔다.
• 탈퇴 기능을 추가한다.

상세 내용

• 재사용 가능한 토글 컴포넌트를 구현한다.

상세 내용

• 카카오 로그인기능을 백엔드에서 적용이 되는지 테스트해본다
• 구글 로그인기능을 백엔드에서 적용이 되는지 테스트해본다
• 인가코드를 이용하여 받은 결과물을 백엔드에 넘겨준다

버그 발생 내용

• Button 컴포넌트 color proptype에 dark와 danger 추가
• Line 컴포넌트 width, height proptype을 string으로 변경
• UserImage 컴포넌트이름을 ProfileImage로 수정 후 paddingCss 제거
• Layout 컴포넌트에 isLogin prop 추가
• Input 컴포넌트에 아이콘 onclick prop 추가

상세 내용

• 클릭시에 토글처럼 위의 div가 덮어 씌워진다.
• 컴포넌트상에 밀림이나 덮어씌워진 효과가 제거되는 기대를 할 수 있다.

상세 내용

• #7

상세 내용

• 처음 로그인하는 사용자면 회원가입 창으로 이동한다

버그 발생 내용

멀쩡해 보이지만 실제로는 버튼이 더 커서 누를수 있는 범위가 많습니다.

버그 발생 트리거

로그인 페이지 UI를 구현하는 도중에 버튼값이 커지는 현상을 확인했습니다

수정 후 기대 사항

img 크기에 맞는 버튼 넓이가 되어야 합니다.

상세 내용

• theme을 이용하여 컴포넌트 스타일을 수정한다.

상세 내용

• 로그인한 유저는 요청보낼 때 디폴트로 header에 access token을 넣어 전송하도록 세팅

상세 내용

• 페이지를 만들어서 UI 상관없이 회원가입 로직을 만든다.

상세 내용

• 판매, 판매완료, 단독 라벨을 구현한다.

상세 내용

• storybook에 등록한다
• App store Google Play 두가지 버튼을 만든다

상세 내용

• Button 컴포넌트에 selected prop을 받아와서 버튼이 선택되었다는 표시로 background-color를 변경함.

상세 내용

• 유저 페이지에서 팔로워 또는 팔로우를 클릭했을 때 Modal을 띄운다.
• 데이터를 받아와서 Modal 안에 FollowCard를 추가한다.

상세 내용

• modal에 들어가는 scroll bar UI를 생성한다

버그 발생 내용

Header에 z-index 설정을 하지 않아서 컨텐츠들과 겹치는 현상이 생겼습니다.

상세 내용

• GlobalStyle 설정
• ThemeProvider로 theme 설정

상세 내용

• storybook에 등록
• 기본이미지 사진 생각하기
• 더보기 클릭시에 dropdown 보이기
• 아이콘 클릭시에 아이콘 변화

상세 내용

• 팔로우, 팔로워를 조회할 때 모달이 띄워지도록 한다.
• 우측 상단에 x버튼을 달아놓는다.

상세 내용

• 기존에 임시로 만들었던 프로필 스타일드 컴포넌트를 profileImage 컴포넌트를 사용한다.
• 프로필 수정 페이지 로직도 회원가입 로직과 거의 유사하기 때문에 컴포넌트로 분리

상세 내용

• storybook에 등록을 한다

상세 내용

• 소셜 로그인 아이콘을 이용한다.
  #5
• 모바일 다운로드 아이콘을 이용한다 i
  #6
• 상단 Header를 이용한다
  #4

상세 내용

• 코드 컨벤션 정리
• Backlog 정리

상세 내용

• 유저의 프로필 사진과 닉네임, 상태메시지를 보여준다.
• 본인의 페이지라면 삭제 버튼이 우측에 보여지도록 props를 받아 설정한다.