ISSUE

• Type:

1. Error Handling
2. Enhancement
3. Add new feature

• Detail:

1. 현재상황 :

• 곳곳에 중복 코드 제거 필요
• 불필요한 주석 제거 필요
• app.js 모달 분기 코드 모듈화 필요
• import 모듈화 (app.js, store .. etc) 필요
• profile 메소드명 규칙에 맞게 수정 필요
• validation 변수명 규칙에 맞게 수정 필요
• 이미지 파일명(png, gif) 규칙에 맞게 수정 필요
• package.json dependency/devdependency 정리 필요
• 콘솔창 warning 해결 필요

2. 작업방향 :

• 위 사항들 수정 예정
• 추가 발견 사항들은 수정 후 PR시 메세지로 기록 예정이니 확인후 리뷰 부탁드립니다

Work

1. 곳곳에 중복 코드 제거 필요
2. 불필요한 주석 제거 필요
3. app.js 모달 분기 코드 모듈화 필요
4. import 모듈화 (app.js, store .. etc) 필요
5. profile 메소드명 규칙에 맞게 수정 필요
6. validation 변수명 규칙에 맞게 수정 필요
7. 이미지 파일명(png, gif) 규칙에 맞게 수정 필요
8. package.json dependency/devdependency 정리 필요
9. 콘솔창 warning 해결 필요

ISSUE

• Type:

1. Error Handling
2. Enhancement
3. Add new feature

• Detail:

1. 현재상황 :

• component/signUpModal.js의 인풋 부분이 입력이 안되는 버그 발생

2. 작업방향 :

• useEffect 의존성배열 안 message를 제거하면 문제가 해결될 것이라 예상

Work

1. useEffect수정

오늘은 어떻게 프로젝트에 기여했나요?

• collect 페이지 프로토타입을 작성하기 시작했다.
• 카테고리 박스 프로토타입을 완성했다.

오늘의 프로젝트에서 힘든 점은 무엇인가요?

• gulp의 scss컴파일링
• 클래스네임 정하기가 너무 어렵다.
• 그리드 레이아웃에 대해 더 공부가 필요했다.

내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

• 사이드바 완성
• 콜레션부분 무한스크롤
• 반응형 기능 시작하기

ISSUE

• Group: client
• Type: feature
• Detail: collect CRUD

TODO

1. 북마크 CRUD

Estimated time

Pick one

3h

Labels

• Estimated time: E: 3h
• Group : client
• Sprint: Sprint 1
• Urgency: High

어떤 에러인가요?

• 모달 활성화가 되었을 때 배경에 투명도 css를 추가해서 화면의 위계를 명확히 설정해줄 필요가 있어보인다.
• 모달 활성화가 되었을 때 뒷 배경의 요소가 클릭되지 않도록 리팩토링을 하는 것이 좋겠다.

에러 핸들링 방법

• 핸들링 방법 추가 작성 예정

에러 핸들링을 위해 참고한 레퍼런스 링크

https://codepen.io/bastianalbers/pen/PWBYvz

ISSUE

• Group: client
• Type: proto, mockup
• Detail: 콜렉트페이지 목업만들기 (반응형 이전까지 구현)

TODO

1. 기본 목업 구성
2. 레이아웃 가이드라인에 맞게 배치

Estimated time

Pick one

4h

Labels

• Estimated time: E: 4h
• Group : client
• Sprint:
• Urgency: High

ISSUE

• Group: client
• Type: feature
• Detail: 로딩페이지, 에러페이지

TODO

1. 로딩페이지
2. 에러페이지

Estimated time

Pick one

3h

Labels

• Estimated time: E: 2h
• Group : client
• Sprint: Sprint 3
• Urgency: High

ISSUE

• Group: client
• Type: feature
• Detail: 카테고리박스 크기조절, 리액트-셀렉트 모듈적용, 반응형 구현

TODO

1. 카테고리박스 크기조절 aspect-ratio 고정비율 3/4
2. 리액트-셀렉트 모듈로 카테고리 입력 태그 만들기
3. 반응형 시작

Estimated time

Pick one

4h

Labels

• Estimated time: E: 4h 그 이상
• Group : client
• Sprint: Sprint 1
• Urgency: High

ISSUE

• Type:

1. Error Handling
2. Enhancement
3. Add new feature

• Detail:

1. 현재상황 :

• Recollect 버튼을 클릭하면 읽지않은 북마크를 확인 할 수 있다 (visitCount === 0)
• 읽지않은 북마크를 클릭하면 visitCount 값이 1증가하지만, Recollect view안에서는 해당 북마크가 그대로 남아있는 문제가 있다

function Recollect() {
  const { bookmarks } = useSelector(
    (state) => state.bookmarkReducer.userBookmarks
  );
  const { unreadBookmarks } = useSelector((state) => state.recollectReducer);
  const dispatch = useDispatch();
  const accessToken = localStorage.getItem("accessToken");

  useEffect(() => {
    if (accessToken) {
      dispatch(recollect(bookmarks));
    }
  }, [bookmarks]);

  return (
    ... 생략
  );
}

2. 작업방향 :

• useEffect를 사용하여 상태를 동기화시킨다

ISSUE

• Group: client
• Type: feature
• Detail: actions from client redux

TODO

1. Nav, Footer 컴포넌트 제작 및 반응형 적용 (햄버거 토글, 정렬)
2. react-router link 각 페이지로 라우팅
3. Footer 팀원 깃헙 링크, 피드백 메일 전송 링크, 외부(sns) 공유 링크 첨부, 여유되면 total visit 구현 시도해보기

Estimated time

3h

Labels

• Estimated time: E: 3h
• Group : client
• Sprint: Sprint1
• Urgency: High

팀원 중 한 분이 작성해주세요.
Keep, Problem 항목에 대해서 매주 정기적인 날에 회고를 진행하여 기록하고, 그것을 기반으로 Try (Action Items) 이슈를 생성해주세요.

Keep (유지할 항목)

• 팀원들간 정보를 잘 정리하여 공유하여 필요한 부분을 효율적으로 공부할 수 있었다
• 진행상황을 바로 공유하는 것
• 마지막까지 열심히 하려는 의지

Problem (문제라고 생각하는 항목)

• Redux reducer를 여러개로 나누었다가 상태관리의 불편함을 느꼈다 (현업에서 어떻게 사용하는지 궁금합니다)
• Refresh을 이용해서 Access토큰 재발급에 대해 생각하지 못했다
• Error-handling을 제대로 기록하지 못하고 있다

Try (Action Items)

• 효율적으로 상태관리 할수 있는 방법을 적극적으로 서칭해보기
• 마지막까지 완성도 높이기
• 더워도 지치지 않기!

ISSUE

• Group: client
• Type: feature
• Detail: 프로필 페이지

TODO

1. 유저네임, 비밀번호 변경 및 회원탈퇴

Estimated time

Pick one

3h

Labels

• Estimated time: E: 3h
• Group : client
• Sprint: Sprint 1
• Urgency: High

오늘은 어떻게 프로젝트에 기여했나요?

• explore 컴포넌트 재사용을 위한 css 리팩토링, 반응형 구현 완료 --> 랜딩페이지 최종 완료.
• 리덕스 도입과정에서 팀원과 충분한 협의를 거쳐 ducks 패턴으로 작성하기로 함

오늘의 프로젝트에서 힘든 점은 무엇인가요?

• 모든 디바이스에 최적화된 css 반응형 구현은 어려운 것 같다. 팀원이 제작한 컴포넌트를 랜딩페이지에서 재사용하려고 최대한 노력했는데, 아주 완벽하지는 않다.
• 태블릿 디바이스 max-width만 잡고 구현해도 다른 부분들은 큰 문제가 없었는데, explore 섹션에서는 글자가 넘치고 고정비율 박스사이즈가 너무 급격하게 변하는 문제가 생겼다. 결국 모바일사이즈일때 태블릿 사이즈에 영향을 받지 않도록 태블릿의 min-width까지 추가로 제한해줘서 어느정도 해결을 했다.
• flex로 펼쳐놓은 박스4개를 2개씩 2열로 바꿔주기 위해서 display:block, float:left 속성을 사용했는데, 이미 작성되어있는 컴포넌트 jsx 구조를 바꾸지 않기 위함이었다. 컴포넌트를 무조건 재사용하는 것이 효율적인 건 아닌 것 같다는 생각이 들었다. 그래도 이번 경험을 통해서 클래스명을 props로 전달해주는 방법, css 속성 덮어쓰고 초기화 하는 방법 등을 공부할 수 있었다.

내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

• nav 바 islogin 여부에 따른 메뉴라우팅 수정
• profile page 서버인터랙션 구현 - 리덕스: 리듀서,액션함수 작성
• collect page 북마크 get요청, 무한스크롤 구현

ISSUE

• Group: client
• Type: feature
• Detail: actions from client redux

TODO

1. Profile 페이지 비밀번호변경,회원탈퇴 모달 제작 후 로직 구현(redux)
2. Profile 페이지 유저네임변경 로직 구현(redux)
3. company,gitRepo 추가/수정 로직 구현 (input태그 활성/비활성 분기로직포함)
4. favorite 북마크 get 요청/filtering 로직 구현(redux)
5. Nav바 isLogin여부에 따른 렌더링(login/logout/profile) 라우팅 수정

Estimated time

4h

Labels

• Estimated time: E: 4h
• Group : client
• Sprint: Sprint2
• Urgency: High

ISSUE

• Group: client
• Type: feature
• Detail: 랜딩페이지 구현

TODO

1. react-reveal 활용한 스크롤 반응형 랜딩 페이지

Estimated time

Pick one

3h

Labels

• Estimated time: E: 3h
• Group : client
• Sprint: Sprint 1
• Urgency: High

ISSUE

• Type:

1. Error Handling
2. Enhancement
3. Add new feature

• Detail:

1. 현재상황 :

• 오늘 회의에서 modules 디렉토리의 파일의 코드의 양이 방대해졌고, 그 결과 알아보기 어려운 상황에 처해있다는 공통된 의견 파악함
• ducks 패턴에서 벗어나 액션과 리듀서를 분리하고 액션함수는 관심사 분리하기로 함

2. 작업방향 :

• 각 기능별 파일 분리를 할 예정입니다.

Work

1. modules/bookmark.js 파일 기능별 분리
2. modules/category.js 파일 기능별 분리
3. moudles/dragBookmark.js 파일 기능별 분리
4. moudles/notification.js 파일 기능별 분리
5. moudles/sign.js 파일 기능별 분리

ISSUE

• Group: sr
• Type: sr
• Detail: sr

TODO

1. 모든 페이지 목업 제작

Estimated time

Pick one

3h

Labels

• Estimated time: E: 3h
• Group : client, server
• Sprint: Sprint 0
• Urgency: High

팀원 중 한 분이 작성해주세요.
Keep, Problem 항목에 대해서 매주 정기적인 날에 회고를 진행하여 기록하고, 그것을 기반으로 Try (Action Items) 이슈를 생성해주세요.

Keep (유지할 항목)

• 효율적인 분업
• 일정 규칙 지키기
• 태스크 우선순위 결정

Problem (문제라고 생각하는 항목)

• 1시부터 5시 사이 휴식시간이 있었으면 좋겠다
• 토이를 열심히 풀지 못했다
• 데브로그를 작성하지 않은 멤버들이 있다

Try (Action Items)

• 1~5시 사이 휴식시간 갖기
• 데브로그, 이슈카드 잘 작성하기
• 체력관리 열심히 하기

팀원 중 한 분이 작성해주세요.
Keep, Problem 항목에 대해서 매주 정기적인 날에 회고를 진행하여 기록하고, 그것을 기반으로 Try (Action Items) 이슈를 생성해주세요.

Keep (유지할 항목)

• API 서버배포가 먼저 진행된 덕분에, 클라이언트에서 로직테스트가 편리해졌음
• 서로 진행상황 공유를 주기적으로 한 것
• 자율적인 분위기 너무좋아요!

Problem (문제라고 생각하는 항목)

• 리덕스 난이도가 높다
• 중간배포를 하지 못했다
• 토이를 신경쓰지 못했다

Try (Action Items)

• 리액트 훅스, 리덕스 추가적으로 공부하기
• 중간배포하기
• 밀린 토이풀기

오늘은 어떻게 프로젝트에 기여했나요?

• hooks를 이용한 드래그앤 드롭을 구현했다.

오늘의 프로젝트에서 힘든 점은 무엇인가요?

• useRef를 처음 사용했는데 이해하기 힘들었다.

내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

1. 북마크 작성정보 전송 액션, 리듀서
2. 북마크 수정, 삭제 정보 전송 액션, 리듀서
3. 북마크 카테고리 정보 조회 액션, 리듀서

ISSUE

• Group: client
• Type: feature,
• Detail: recollect component완성

TODO

1. recollect component 완성, 반응형 적용
2. bookmark 추가 토스트 (북마크가 추가되었습니다.)
3. 시간이 된다면 콜렉트 페이지 테블릿 모드일때 북마크 그리드 다시 고쳐보기

Estimated time

Pick one

3h

Labels

• Estimated time: E: 3h
• Group : client
• Sprint: Sprint 1
• Urgency: High

팀원 중 한 분이 작성해주세요.
Keep, Problem 항목에 대해서 매주 정기적인 날에 회고를 진행하여 기록하고, 그것을 기반으로 Try (Action Items) 이슈를 생성해주세요.

Keep (유지할 항목)

• 공부시간 충분히 가지고 있는 것
• 서로 모르는 부분에 대해서 질문하고 함께 알아보는 것
• 열정, 책임감

Problem (문제라고 생각하는 항목)

• 갈수록 코드가 꼬이고 있다
• 토이를 잘 못풀고 있다
• 스케쥴(D-day)을 정하고 지킬 필요가 있다

Try (Action Items)

• 리팩토링 필요하다
• 토이에 더 신경쓰여야 할 것 같다
• 스케쥴(D-day)을 정하고 지켜야겠다

팀원 중 한 분이 작성해주세요.
Keep, Problem 항목에 대해서 매주 정기적인 날에 회고를 진행하여 기록하고, 그것을 기반으로 Try (Action Items) 이슈를 생성해주세요.

Keep (유지할 항목)

• 시간에 쫒기지않고 사전에 분업량을 조절한 것
• 필요한 모듈 공부해서 적용한 것
• 현업에서도 사용할만한 스택을 적용한 것

Problem (문제라고 생각하는 항목)

• redux 복습이 미흡했어서, 적용하는데 어려움을 느낌
• 체력관리를 제대로 하지 못한것
• 토이를 신경쓰지 못한 것

Try (Action Items)

• redux공부를 꼼꼼하게 합시다
• 체력관리 열심히하기 (잠 충분히 자기)
• 각자 작성한 코드를 이해하고 넘어가기

오늘은 어떻게 프로젝트에 기여했나요?

• 반응형 페이지 시작했다.
• 카테고리박스 그리드를 재정렬했다.
• 리액트 셀렉트 라이브러리에 대해서 공부했다.

오늘의 프로젝트에서 힘든 점은 무엇인가요?

• 카테고리박스 그리드와 알람, 검색이 들어있는 요소의 라인을 맞추는게 힘들었다.
• 이 둘에 각각 다른 열 개수를 가진 그리드를 적용해 해결했다.

&__nav {
    display: grid;
    grid-template-columns: 1fr 30px 1fr 30px 1fr 30px 1fr;
    height: 70px;
  }
/*알람과 검색이 들어가는 부분*/

&__alarm {
    grid-column-start: 1;
    grid-column-end: 6;
}

&__search {
    grid-column-start: 7;
    grid-column-end: 8;
}

/*북마크 카테고리박스 들이 들어가는 부분*/
&__bookmarks {
   display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 30px;
}

내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

1. 반응형 모바일 페이지에 들어가는 요소를 만들 것이다.
2. 리콜렉트 컴포넌트를 만들 것이다.
3. 드래그앤 드롭 구현을 공부해 볼 것이다.

오늘은 어떻게 프로젝트에 기여했나요?

• 랜딩페이지 laptop 기준 사이즈 프로토타입 구현 (scss 활용, react-reveal 활용 스크롤애니메이션 구현)
• ScrollToTop 컴포넌트 구현 (모든 페이지에서 쓸 수 있도록 app.js 에 라우팅)
• react-router 사용시 a 태그를 사용하지 않고, Link to 로 페이지 리다이렉트를 해주니, 온클릭메소드 없이도 라우팅이 가능했다. 공식문서, 블로그 열심히 찾아봄.
• gulp 컴파일러 소스맵 적용이 안돼서 답답했지만, stackoverflow 보면서 시도해보다가 성공했다. 브라우저 콘솔에서도 css 뜯어볼 수 있게되어서 편해졌다. gulp api문서와 사용법을 더 익혀야겠다.

오늘의 프로젝트에서 힘든 점은 무엇인가요?

• scss 문법과 BEM 규칙에 따라 클래스명을 정하는데에 아직 익숙하지가 않다.
• 구현은 성공했지만, ScrollToTop 컴포넌트 스크롤Y 500이 되었을 때부터 버튼이 보이도록 함수를 작성하는 과정이 충분히 이해가 되지 않았다. 다시 공부해볼 것
• 반응형 구현하는데에 시간이 너무 걸리고, 손목이 아프다. 효율적인 방법은 없을까?

내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

• 반드시 tablet, mobile 반응형 구현 완성 목표. desktop 사이즈도 어느정도는 손봐야할 것 같다.
• 랜딩페이지에 들어갈 이미지 일러스트 제작해야한다.. 시간이 부족해서 큰일
• 서버인터랙션이 필요한 컴포넌트 구현에 참여하고싶다. 팀원들과 상의해서 역할분담을 다시 해볼 것.

오늘은 어떻게 프로젝트에 기여했나요?

• 팀원의 도움을 받아 getBookmark 액션함수, 받아온 북마크데이터를 카테고리별로 모아주는 reducebookmark 유틸함수와 리듀서를 작성했다.
• 프로필페이지에 수정버튼을 눌렀을때만 input 이 활성화되고, 유저네임,직장정보,깃헙주소 수정을 한 뒤에 다시 버튼을 누르면 patch 요청을 보내도록 했다.
• 프로필페이지 정보 get 요청 액션함수,리듀서를 작성했다.
• 리액트 userEffect, useRef 사용법에 대해서 조금 더 알게 되었다.
• 디바운스, 쓰로틀링에 대해서 알게되었고, 조금 더 공부가 필요하다. 이후 무한스크롤 구현에도 알아야할 내용이라고 생각한다.

오늘의 프로젝트에서 힘든 점은 무엇인가요?

• input 에 onChange 이벤트함수를 넣었을 때, 콘솔로 찍어보니 input에 입력한 내용이 한글자한글자 바뀌는 매순간마다 이벤트가 발생하고 렌더링되는 것을 보았고, 엄청난 렌더링 횟수를 줄이는 방법을 구글링해서 해결했다. 결국 useRef 를 활용했다. 하지만, 아직 useRef.current 객체에 대한 정확한 공부가 필요해보인다.
• e.target , 클릭한 타겟 엘리먼트가 아니라 다른 엘리먼트를 찾아 그곳의 어트리뷰트를 변경해주는 방법을 찾느라 오래걸렸다. 그리고, 아이콘컴포넌트를 약간 다른 위치에서 클릭하면 e.target 이 하위 엘리먼트를 클릭하는 경우가 생겨서 원하는 버튼엘리먼트의 어트리뷰트에 접근할 수가 없었다. 그래서 알게 된 게, e.currentTarget. 그리고 이 타겟 객체에 어트리뷰트를 찾을 때는 getAttribute('어트리뷰트이름')으로 찾는다는 걸 알게 됐다. 그냥 .어트리뷰트로 찾으려니까 자꾸 undefined가 나와서 시간을 너무 소비했다.

내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

• 겟북마크, 겟프로필, 패치유저네임,패치컴패니, 패치깃레포 서버싱크 완료하기
• 패치 패스워드, 딜리트어카운트 구현하기
• 무한스크롤 로직짜기
• 프로필페이지 favorite recollect 띄울 로직 짜기

어떤 에러인가요?

• 팀원이 제작한 profileList 컴포넌트를 랜딩에 mapped component로 붙이려고하니, react-reveal cascade가 적용 안됨.
• userInfoLists(유저더미데이터)에서 4명의 유저까지만 랜딩에 표시하기로 했기 때문에, 배열에서 4개까지만 slice()로 복사해준 뒤, 복사한 배열에서 map()으로 ExploreProfileList를 뿌려주려고 했으나, react-reveal의 Pulse 컴포넌트와 props인 cascade가 기존과 다르게 적용이 안되는 문제가 있었음.

에러 핸들링 방법

• stackoverflow, 깃헙이슈 등 구글링을 해보니, 비슷한 문제를 겪는 사람들이 있었음.
• 그중에서 react-reveal 프롭스를 매핑될 하위 컴포넌트 요소(mapped component)에도 전달해주어야한다는 stackoverflow 답변을 보고 아래와 같이 수정후 cascade 적용이 잘 되는 것을 확인.
• 전달해준 react-reveal props가 어떤 형태인지 더 공부해봐야 함. 이후 공부내용 devlog에 작성예정.
• 아직 ExploreProfile, ExploreProfileList 컴포넌트가 완성이 덜 되어서, 랜딩과 Explore 페이지 모두에서 같은 react-reveal 효과를 적용시킬지는 팀원과 다시 상의 필요. 현재는 랜딩에만 적용시켜둔 상태.

//Landing.js
            <Pulse left cascade delay={1000}>
                {userInfoLists.slice(0, 4).map((userInfo) => (
                  <ExploreProfileList key={userInfo.id} />
                ))}
              </div>
            </Pulse>

//ExploreProfileList.js
function ExploreProfileList(props) {
  //console.log('props:' ,props);
  return (
    // react-reveal 'Pulse cascade'적용을 위한 props 전달 //
      <div className="searchProfile" {...props}> 
        .//..생략
      </div>

에러 핸들링을 위해 참고한 레퍼런스 링크

• rnosov/react-reveal#37
• https://stackoverflow.com/questions/56280066/react-reveal-not-working-for-array-of-data

ISSUE

• Group: client
• Type: proto
• Detail: Explore page proto 만들기 (SCSS 적용)

TODO

1. [o] Explore page _ Laptop
2. [o] Explore page _ Tablet
3. [o] Explore page _ Mobile

Estimated time

최소 3h

Labels

• Estimated time: E: 3h
• Group : client
• Sprint: Sprint 1
• Urgency: High

오늘은 어떻게 프로젝트에 기여했나요?

• 프론트 포지션 팀원들과 각자 맡은 기능 구현 코드를 처음 합쳤다 . 에러 투성이여서 다시 에러 핸들링을 함.
• 프로필 get 유저네임,회사,깃레포 patch 요청 구현함. 그런데 아직 버튼 눌렀을 때 화면에서 인풋값이 바로 갱신되지 않는 문제가 있음.
• 로그인시에 달리 보이는 Nav바 분기는 완료함.

오늘의 프로젝트에서 힘든 점은 무엇인가요?

• 요청 보낼때 useref.current.value 가 undefined가 됐음. current객체 문제거나 비동기 요청 문제인거 같은데 시간이 촉박해서 일단 다시 e.target 값으로 넘겨준게 아쉽다. 렌더가 너무 많이 되어서 이걸 꼭 다시 해결하면 좋겠다.
• 새로고침했을 때 initstate가 깜빡이다 보이는 현상이 있음 . 해결법 찾아야 함.
• 엑세스토큰이 있는 경우에만 프로필 엔드포인트로 접근 가능하게 해야하는데, 아직 정확한 방법을 찾지 못했다. <Routeif/ > 혹은 분기를 다시 고민해봐야함.
• 리덕스 스토어에 있는 initstate, 컴포넌트에서 useState 로 선언하는 state의 차이점과 활용 방안에 대한 공부가 부족하다.

내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

• 기본적인 기능 구현(비번변경, 탈퇴)이 각자 완료되면 우선 코드를 합치고 중간 배포를 해보는게 좋겠다
• 속도를 좀 더 내서 작업할 것,
• 무한스크롤 구현 시도 꼭!
• 자잘한 뷰 에러 핸들링이나 UX를 고려한 분기나 toast 구현에 신경쓸 것

ISSUE

• Group: client
• Type: feature
• Detail: Navigation컴포넌트-Explore, Modal컴포넌트 연결

TODO

1. Navaigation 컴포넌트의 Explore, Login 버튼 클릭시 각 컴포넌트 호출
2. Explore 컴포넌트 리팩토링
3. Modal 컴포넌트 리팩토링

Estimated time

3h

Labels

• Estimated time: E: 3h
• Group : client
• Sprint: Sprint 1
• Urgency: High

오늘은 어떻게 프로젝트에 기여했나요?

• 태블릿,모바일 사이즈 반응형 css 구현 (모바일은 아예 박스 순서와 구성이 달라져서 어떻게 해야하나 막막했는데 팀원이 준 힌트를 바탕으로 구현에 성공했다. display:none 속성과 flex order 를 이용했다.)
• 랜딩페이지에 들어갈 일러스트를 제작했다. 무료템플릿소스를 활용하는 것보다 훨씬 보기 좋아진 것 같다.

오늘의 프로젝트에서 힘든 점은 무엇인가요?

• scss 중첩이 점점 많아진다. 리팩토링을 꼭 다시 할 수 있으면 좋겠다.
• 모든 기기에 대응할 수 있는 반응형 css 작성, 컴포넌트 분리,재사용에 대한 공부를 더 해야겠다. 리액트 스타일 컴포넌트의 효용성은 얼마나 되는지 궁금.
• 이미지 사이즈 비율을 고정하는 방법을 찾느라 시간을 오래썼다.
  방법 :

1. height 대신 padding %를 활용한다.
2. aspect-ratio 활용. background-image 일때 사용할 수 있다.

내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

• 모든 페이지에서 사용될 Nav, Footer 컴포넌트 제작, 모바일 반응형 Nav 햄버거 토글버튼 전환 공부 후 적용
• 리액트훅, 리덕스 개념 다시 복습후 서버인터랙션 구현시 적용

오늘은 어떻게 프로젝트에 기여했나요?

• 로그인, 회원가입, 회원탈퇴, 비밀번호찾기 모달창 구현
• 각 모달창에 맞는 유효성검사 적용

오늘의 프로젝트에서 힘든 점은 무엇인가요?

• 여러 모달들을 하나의 컴포넌트안에서 처리하다보니 코드가 지저분해졌다

내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
[ ] Nav바 버튼과 생성한 모달컴포넌트 연결하기
[ ] 리팩토링이 시급하다!

ISSUE

• Group: client
• Type: feature
• Detail: 북마크 작성 리듀서 ,액션

TODO

1. 리액트 셀렉트 모듈 공부 - 카테고리를 선택했을 때 그 정보를 상태에 업데이트 하는 방법
2. 인풋태그 입력시 상태에 업데이트 방법
3. 인풋태그 글자 수 제한
4. 작성시 동작하는 thunk 작성

Estimated time

Pick one

3h

Labels

• Estimated time: E: 3h
• Group : client
• Sprint: Sprint 2
• Urgency: High

ISSUE

• Group: client
• Type: feature
• Detail: 콜렉트 모바일 완성, 리콜렉트 완성

TODO

1. 모바일 하단 버튼, 팝업
2. 콜렉트 페이지 nav (알람, 검색) 반응형 다시 정리

Estimated time

Pick one

4h

Labels

• Estimated time: E: 3h
• Group : client
• Sprint: Sprint 1
• Urgency: High

ISSUE

• Group: client, server
• Type: feature
• Detail: fix actions from client redux

TODO

1. 로그인
2. 회원가입
3. 비밀번호 찾기

Estimated time

3h

Labels

• Estimated time: E: 3h
• Group : client
• Sprint: Sprint 1
• Urgency: High

ISSUE

• Group: client
• Type: feature
• Detail: actions from client

TODO

1. Profile 페이지 구현, 반응형 대응
2. Nav 바 로그인시 Login- Profile 메뉴로 분기하기

Estimated time

3h

Labels

• Estimated time: E: 3h
• Group : client
• Sprint: Sprint1
• Urgency: High

ISSUE

• Type:

1. Error Handling
2. Enhancement
3. Add new feature

• Detail:

1. 현재상황 :

• action creator function 중 guest 모드 기능을 위한 함수의 코드가 가독성이 떨어지는 상황

2. 작업방향 :

• 중복되는 코드를 줄여 가독성을 높이는 방향으로 코드 수정

Work

1. actions 디렉토리의 각 파일에 있는 guest기능 함수 수정

ISSUE

• Group: client
• Type: feature,
• Detail: recollect component완성

TODO

1. recollect component 완성, 반응형 적용
2. bookmark 추가 토스트 (북마크가 추가되었습니다.)
3. 시간이 된다면 콜렉트 페이지 테블릿 모드일때 북마크 그리드 다시 고쳐보기

Estimated time

Pick one

3h

Labels

• Estimated time: E: 3h
• Group : client
• Sprint: Sprint 1
• Urgency: High

오늘은 어떻게 프로젝트에 기여했나요?

• Explore페이지 목업을 거의 완성하였다

오늘의 프로젝트에서 힘든 점은 무엇인가요?

• 전체너비에 비율을 적용한 반응형 대응 (모바일과 테블릿은 완료했으나, 랩탑과 데스크탑은 비율적용을 못함)

내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
[ ] 랩탑 데스크탑 비율에 따른 반응형 대응 구현
[ ] 각페이지별 모달 구현하기
[ ] 모달 공부하기

ISSUE

• Type:

1. Error Handling
2. Enhancement
3. Add new feature

• Detail:

1. 현재상황

• Redux 모듈을 기능별로 분리한 상태 ( action과 reducer함수를 하나의 파일에 넣는 redux-ducks패턴 사용 )
• 코드 양이 늘어나면서 알아보기가 힘들어지는 문제 발생

2. 작업방향

• ducks패턴에서 벗어나 액션과 리듀서함수를 분리하여 코드를 보다 알아보기 쉽게 리팩토링할 예정

Work

1. modules/getAccessToken 파일
2. modules/getExplore 파일
3. modules/getRecollect 파일
4. modules/visitCount 파일

ISSUE

• Group: client
• Type: feature
• Detail: actions from client

TODO

1. 랜딩페이지 laptop 기준 기본CSS 구현
2. 랜딩페이지 tablet, mobile 반응형CSS 구현
3. react-reveal 라이브러리 활용, 스크롤 애니메이션 구현
4. 로고, 세부이미지 png 제작, 파비콘 설정

Estimated time

4h

Labels

• Estimated time: E: 4h
• Group : client
• Sprint: Sprint1
• Urgency: High

ISSUE

• Group: client
• Type: feature
• Detail: actions from client

TODO

1. scroll 이벤트 공부
2. 리액트 훅 : useCallback, useRef 공부 후 기능 구현에 적용

Estimated time

3h

Labels

• Estimated time: E: 3h
• Group : client
• Sprint: Sprint2
• Urgency: High

이번주는 어떻게 프로젝트에 기여했나요?

• 기초 프로젝트 기획 : 지난 프로젝트의 경험을 바탕으로 새로운 스택을 추가하기로 결정했다. (react-hook, redux, scss/부분적css라이브러리)
• 기능 리스트업 (bare, advanced, nightmare)
• miro, figma 툴을 활용한 플로우차트/디자인 목업 제작 : UX를 고려한 기능 플로우를 만들기 위해 노력했고, px 단위까지 목업을 그렸다.
• API 문서 작성 : 팀원들 모두 지난 프로젝트때보다 좀 더 통일성있고 꼼꼼하게 작성하려고 노력했다.

이번주 프로젝트에서 힘든 점은 무엇인가요?

• 모든 페이지/컴포넌트의 디자인 목업을 제작해야했는데 예상했던 것보다 훨씬 많은 부분을 세심히 신경써서 다듬어야했다.
• 북마크CRUD + 알림 이라는 kick 기능을 위한 기술,구현방법을 아직 익히지 못한 상태로 기획을 진행해야해서 막연했다.
• 하고싶고 해야할 것은 많은데 언제나 시간과 체력이 부족하다.

주말에는 프로젝트에 기여하기 위해 무엇을 해야 하나요?

• 상태관리를 잘하기 위해 react-hook, redux 공부
• 디자인 목업대로 잘 구현하기 위해 scss, 반응형 구현 공부
• 랜딩페이지에 들어갈 이미지 제작, 로딩페이지 애니메이션 제작
• node mailer, web notification API 알아보기

팀원 중 한 분이 작성해주세요.
Keep, Problem 항목에 대해서 매주 정기적인 날에 회고를 진행하여 기록하고, 그것을 기반으로 Try (Action Items) 이슈를 생성해주세요.

Keep (유지할 항목)

• 각자 맡은 부분이 아니여도, 다같이 에러핸들링한것
• 무리하게 스케줄링하지 않은 점
• 새로운 기술을 공부하는 것에 대한 두려움이 줄었다
• 구현에 필요한 기술을 잘 찾고, 활용하려고 시도한 것

Problem (문제라고 생각하는 항목)

• React-hook을 아직도 제대로 이해하지 못한 것 (useEffect부분)
• custom-hook, useCallback 등 새로운 hook응용을 공부하고 시도해보지 않은 점
• advanced까지 전부 완료하지 못한것

Try (Action Items)

• React-hook에 대해서 깊은 공부가 필요하다
• Front-end팀에서 Back-end코드에 대한 이해가 필요하다
• 발표준비 제대로 하기 !
• 남은시간 잘 분배해서 완성도 높이기! (CSS마무리)

ISSUE

• Group: client
• Type: feature
• Detail: Unread-Bookmark, Search 기능구현하기

TODO

1. Recollect배너 클릭 이벤트 발생시 렌더링되는 Recollect 컴포넌트에 (Unread Bookmark만)
2. Search창에 검색하고 검색버튼 클릭시 일치하는 북마크 출력

• 검색어와 일치하는 카테고리 (해당 카테고리에 있는 모든 북마크)
• 검색어와 일치하는 북마크 (카테고리 안에 일치하는 북마크만)

Estimated time

Pick one

5h

Labels

• Estimated time: E: 5h
• Group : client
• Sprint: Sprint 2
• Urgency: High

ISSUE

• Group: client
• Type: feature
• Detail: 리콜렉트 모달

TODO

1. 읽지않은 북마크 모달

Estimated time

3h

Labels

• Estimated time: E: 3h
• Group : client
• Sprint: Sprint 1
• Urgency: High

ISSUE

• Group: client
• Type: feature,
• Detail: recollect component완성

TODO

1. recollect component 완성, 반응형 적용
2. bookmark 추가 토스트 (북마크가 추가되었습니다.)
3. 시간이 된다면 콜렉트 페이지 테블릿 모드일때 북마크 그리드 다시 고쳐보기

Estimated time

Pick one

3h

Labels

• Estimated time: E: 3h
• Group : client
• Sprint: Sprint 1
• Urgency: High

팀원 중 한 분이 작성해주세요.
Keep, Problem 항목에 대해서 매주 정기적인 날에 회고를 진행하여 기록하고, 그것을 기반으로 Try (Action Items) 이슈를 생성해주세요.

Keep (유지할 항목)

• 초기 환경세팅을 탄탄하게 해놓은것
• 효율적인 회의를 위해 노력하는 것 (안건, 소통 등)
• 일정규칙 잘 지키는 것

Problem (문제라고 생각하는 항목)

• 개발속도가 더디다고 느껴짐
• 공부와 프로젝트를 분리한것
• 토이에 신경쓰지 못한것

Try (Action Items)

• 프로젝트 진행과 연관된 공부를 함께 가져가기
• 토이를 열심히 풀자
• 마음 편하게 열심히 꼼꼼히 개발하기

오늘은 어떻게 프로젝트에 기여했나요?

• Explore Carousel 구현

오늘의 프로젝트에서 힘든 점은 무엇인가요?

• 라이브러리를 커스터마이징 하는과정에서 시간소요가 많이 되었다. (특히 CSS부분)
• 서버와 연동시 완벽하게 작동될지 모르겠다. 에러발생시 추가적인 서치와 공부가 필요할 것 같다

내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
[ ] unread Bookmark 메소드 구현
[ ] collect_search기능 구현
[ ] forgot-pwd (node-mailer)공부하기

ISSUE

• Group: client
• Type: feature
• Detail: Login, Sign-Up, ForgotPWD, Explore 등 각 페이지에 필요한 Pop-Up 모달 만들 예정

TODO

1. 구글링 및 이전 프로젝트 PopUp 참고하며 공부하기
2. 각 페이지 별 Pop-up 모달 만들기
3. 모달 창 반응형 대응

Estimated time

3h

Labels

• Estimated time: E: 3h
• Group : client
• Sprint: Sprint 1
• Urgency: High,