16조 "Contap" Frontend

Team

• Frontend : 김동우, 한우석, 이아영 (REACT)
• Backend : 오준석, 이승준, 김혜림 (SPRING)
  
  
  

컨탭!(Contap!)

-contact와 tap의 합성어로, 개발자, 디자이너들이 자신에 대한 정보나 프로젝트들을
카드모양(앞면: 프로필 사진 및 해쉬태그 뒷면: 사진 및 짧은 글)으로 만들고 등록한다.
이후 관심있는 카드는 검색 및 클릭을 통해 뒷면으로 상세 정보를 확인 할 수 있으며,
이 사람이 좋은 개발자 인 것 같으면 탭을 해 친해질 수 있도록 하는 사이트!

1. 용어정리

   카드 덱: 앞면인 카드가 여러 개 있을 때 부르는 용어

   카드 리스트: 카드의 앞면(프로필 뷰) 뒷면(상세페이지 뷰)를 통틀어 부르는 용어

   카드: 카드의 뒷면(상세페이지 뷰) 한칸과 더 상세페이지를 통들어 부르는 용어

2. 우리가 관리해야할 state가 무엇일까?

• 애플리케이션이 동작하기 위한 핵심 데이터(App State)
  • 애플리케이션이 무엇을 지금 하고있는지 나타내는 데이터(UI State)

const store = {
  user : userReducer(state, action),
  cards : cardsReducer(state, action),
	taps : tapsReducer(state, action)
	
   
};

// in userReducer, initialState
const initialUserState = {
	email : email <String>,
	userName : userName <String>,
};

// in cardsReducer, initialState
const initialCardsState = {
	byId : {},
	allIds : [],
	myCard : {}, 
... 
};

//in tapsReducer, initialState
const initialTapsState = {
	byId : {},
	allIds : [],	
}

// tap 판별 기준
{
	keyID : id
	tapping: {
	user1: false,
	},
{
}
//록 

1. 우리가 관리해야할 Action은 무엇일까?

• ACTIONTYPE은 다음의 형식을 준수합니다: domain/eventName
  • domain: 액션이 일어난 카테고리
  • eventName: 액션을 구체적으로 묘사하는 것.

    (ex) 유저가 로그인을 함
    export const LOGIN = 'user/LOGIN';

1. Action에 따라 진행되는 reducer의 로직은 어떻게 되는 것일까?

   1. User

      export const SIGN_UP = 'user/SIGN_UP';
      export const WITHDRAWAL = 'user/WITHDRAWAL';
      export const LOG_IN = 'user/LOG_IN';
      export const LOG_OUT = 'user/LOG_OUT';

   2. Cards

      //cards
      // 카드 앞, 뒷면 CRUD
      // 카드 앞면의 리스트 로드, main page view(cards front view)
      export const LOAD_CARD_FRONT = 'cards/LOAD_CARD_FRONT ';
      // 카드 뒷면의 정보 로드
      export const LOAD_CARD_BACK = 'cards/LOAD_CARD_BACK ';
      // 카드 앞, 뒷면 CREATE
      export const CREATE_CARD = 'cards/CREATE_CARD ';
      // cardListId로 delete (카드 뭉치 삭제)
      export const DELETE_CARD = 'cards/DELETE_CARD ';
      // 카드 앞, 뒷면 UPDATE
      export const UPDATE_CARD = 'cards/UPDATE_CARD ';
      
      //search
      export const  = 'posts/ADD_COMMENT';
      export const MODIFY_COMMENT = 'posts/MODIFY_COMMENT';
      export const REMOVE_COMMENT = 'posts/REMOVE_COMMENT';
      //메인 페이지 에서 최초 1회 API 콜 발생
      //태그 선택 후 검색을 했을 때 API 콜 1회 발생, 
      //검색 시작 - 완료 과정에서는 목록을 갱신하지 않음

   3. Taps

      //taps
      //tap한 목록, tap받은 목록(미정)
      export const GET_TAPPING = 'taps/GET_TAPPING';
      export const GET_TAPPED = 'taps/GET_TAPPED';

2. UI는 업데이트 된 state를 기반으로 어떻게 화면을 그려줄 것일까?

pages

• 로그인 페이지
• 메인 페이지
• 알람 페이지
• 더 상세 페이지
• 마이 페이지
• 개인정보 설정 페이지

Components

• Card (Modal)
• Header
• Searchbar(콤보박스 + 검색창)
• Modal
• InfinityScroll(미정)

Elements

• Grid
• Input(시간 남으면 리팩토링)
• Button
• Text
• Image

Library

1. react-router-dom
2. react-redux
3. redux
4. redux-thunk
5. redux-logger
6. history@4.10.1
7. connected-react-router@6.8.0
8. styled-components
9. immer
10. lodash
11. axios

npm install redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0

라이브러리 추가

Commit rules

[add] : add 내역 [신토불이]

• add : asset, dependency 추가 하는 경우 (이미지 파일)

• feat : 새로운 기능 추가, view 포함

• edit : 코드를 수정한 경우 (fix가 아님)

• fix : 버그 수정

• docs : 문서 수정 (readme)

• style : css style code 수정

• refactor : 코드 리팩토링

• PR : pull request

• chore : 빌드 업무 수정, 패키지 매니저 수정

• 제일 앞에 (커밋하는 사람 이름) 붙이기

• 커밋은 컴포넌트 단위로 진행합니다.

• 컴포넌트가 완료되면 푸시를 하고 말씀을 해주세요.

• 모든 푸시는 하고나서 모두에게 말을 하고 다음으로 진행합니다.

• 각자 브랜치를 파서 작업을 진행합니다.

• merge는 본인이 눌러도 되지만(권한만 설정함) 가능하면 다른사람이 누르도록 합니다.

컨탭!(Contap!)
-contact와 tap의 합성어로, 개발자, 디자이너들이 자신에 대한 정보나 프로젝트들을
카드모양(앞면: 프로필 사진 및 해쉬태그 뒷면: 사진 및 짧은 글)으로 만들고 등록한다.
이후 관심있는 카드는 검색 및 클릭을 통해 뒷면으로 상세 정보를 확인 할 수 있으며,
이 사람이 좋은 개발자 인 것 같으면 탭을 해 친해질 수 있도록 하는 사이트!

내가 push :개인 branch에 push를 함 -> PR 요청 -> merge -> 다른 팀원이 master branch에서 pull

팀원이 push :PR요청 확인 -> merge -> (작업중인 내용이 있다면 stash) ->master branch로 이동하여 pull -> 개인 branch로 이동 -> 개인 branch에 master merge -> stash apply