Today I Did
- 팀명 / 프로젝트명 정하기
- git flow 학습하기
- Github Wiki 뼈대 작성
- Github Issues, Milestones, Projects 사용법 익히기
- 프로토타입 작성
팀명 / 프로젝트명 정하기
임시로 지었던 팀명인 해피코딩에서 CodeMat.zip으로 정했다. 다양한 의견들이 나왔는데 다들 너무 참신하고 웃겼다. ㅋㅋㅋ 그 중에서 투표로 1등한 CodeMat.zip!! 일명 코드맛집 ㅎㅎ 😋
프로젝트명도 원래는 Curturian, 즉 문화인(?)이란 뜻이었는데 뮤지컬에만 한정적인 정보 페이지를 만들기로 했기 때문에 Musical 관련 프로젝트명을 생각했다. 팀원분들이 logomaker와 namelix 사이트를 찾아와서, 저 사이트들에 Musical 단어를 입력 후 나온 단어 중 마음에 드는 것들 몇가지를 추려 투표로 정했다. 1등은.. 두구두구두구 CMUSICAL !!
알파벳 C를 읽으면 See라는 단어와 비슷해서 읽혀서 '뮤지컬을 보다' 대략 이런 뜻이다. 아주 우리 프로젝트와 찰떡이라 마음에 쏙 든다.
git flow 학습하기
깃 브랜치 관리를 팀원들과 같이한 적이 있는데 그 덕분인지 git flow 학습하기가 수월했다. 어느정도 이해는 갔지만 역시 코딩은 뭐다? 실전이다. 대략적인 흐름은 다음과 같다.
- 기본 셋팅 (팀장이 진행한다.)
- upstream에 있는 기본 셋팅된 레퍼지토리를 fork 후 clone해서 local에 받아온다.
- dev 브랜치 생성 -> feature(기능)별로 브랜치 생성 + origin에 dev push(백업용)
- 열심히 작업 후 origin에 feature(기능) 브랜치 push
- feature 브랜치를 upstream에 존재하는 dev 브랜치에 Pull Request
- 팀원들과 코드리뷰 후 merge
- 최신화된 (merge된) dev를 다시 local로 pull
- 3번부터 다시 반복 !!
Github Wiki 뼈대 작성하기
일단 참고하라고 준 예시대로 작성해보았다. 필요해보이는 page를 먼저 생성하고, 먼저 중점적으로 본 건 Team Rule이다. 혼자서 작업하는 프로젝트가 아닌 팀 프로젝트기 때문에 규칙이 너무나도 중요하다.. Commit 내용, 변수명, 폴더/파일명, node/npm 버전 통합 등등 세세하게 정했다.
Github Issues, Milestone, Projects 사용법 익히기
와 너무 어렵다. 깃 허브에 익숙하지 않는 나로썬 너무 어렵다. ㅜㅜ 나만 그런건 아니겠지..? 팀원분들과 하나씩 차근차근 연습해보면서 익혔는데 한 60%정도 익힌 느낌? 앞으로 계속 쓰다보면 익혀지겠지.. Milestones가 큰 단위라면 Issues(Task Card)는 작은 단위이다. Projects는 전체적인 진행상황을 보기 위해 작성한다. 대략적인 흐름은 다음과 같다.
- Milestone 작성
ex) Main Page 구현 ... - Milestone에 맞는 Issues 작성
ex) Main Page의 css 구현, Main Page의 상태(state) 관리 ... - Projects에 작성한 Issues 보여주기
Prototype 그려보기
Miro로 큰 기능들 위주로 그려봤다.
- Main
- 첫 화면에서 뮤지컬 정보들을 어떤 순으로 정렬해서 보여줄 것인가? -> 랭킹 top 4 & 랜덤 정렬
- 로그인을 하지않아도 search 가능 - Search
- 모달창으로 띄워짐
- radio button을 통한 세부적인 서치 가능
- 돋보기 아이콘 클릭시 메인 화면에서 필터링된 뮤지컬 정보 출력 - Navigator
- 로그인 안했을 땐 search, login 보여주고 로그인 했을 땐 search, mypage 보여줌
- mypage에 마우스 오버했을 때 즐겨찾기 / 내 정보 / 로그아웃 보여줌
- 로그아웃 클릭 시 로그아웃됨 - Mypage - list
내가 좋아요한 뮤지컬 목록 보여줌 - Mypage - info
- 사용자 정보 보여줌
- 사용자 정보 수정 가능
- 회원 탈퇴 가능 - Contents
- 메인 화면에서 썸네일 클릭하면 contents 정보 페이지 전환
- 뮤지컬 포스터 사진, 뮤지컬 정보, 댓글 보여짐 - Comment
- 댓글 쓴 사람의 이름, 쓴 날짜, 좋아요 갯수 표시
- 내가 댓글을 한 번도 안썼으면댓글쓰기버튼 존재
-댓글쓰기버튼 클릭 시 입력할 수 있는 input text창 나타나고입력버튼 클릭 시 댓글 작성 완료
- 내가 쓴 댓글은 다른 사람이 쓴 댓글과 색깔로 구분 + 수정, 삭제 가능
- 좋아요 없는 댓글은 하트 옆에 아무것도 없고 좋아요가 있는 댓글은 하트 옆에 하트의 갯수 표시(+css)
- 하트 한 번 더 클릭 시 좋아요 취소
