아토피 정보 통합 서비스 Weato 💊 의 프론트엔드 개발 기록입니다.
데모 사이트
메인 홈 메인 배너, 이주의 아토레터와 가장 많은 스크랩을 보여줘요. 뉴스레터 홈 새로 발행된 순서대로 뉴스레터를 보여줘요.
뉴스레터를 6개의 태그 별로 분류해서 모아 볼 수도 있어요. 뉴스레터 - 상세 발행된 뉴스레터를 웹으로 볼 수 있는 상세 페이지에요.
마음에 드는 경우 좋아요, 또는 마이페이지에 스크랩할 수 있어요. 커뮤니티 홈 (비회원) 비회원의 경우 회원 가입 혹은 로그인을 유도하는 내용을 소개해요. 소셜 로그인 연결 네이버 아이디를 통해 Weato에 간편하게 로그인할 수 있어요. 검색 모달 발행된 모든 뉴스레터 및 게시글에 대해서 키워드 검색이 가능해요.
사용한 기술 스택 | |
---|---|
마크업 및 구조 | |
스타일링 | |
상태 관리 도구 | |
빌드 도구 | |
라이브러리 관리 | |
배포 |
🔗 Gitflow 협업 방식
main
브랜치는 배포가 필요한 작업 발생 시에만 pushdevelop
브랜치에 개발 단위 적용- 개발하려는 기능을 나누어
feature/작업
브랜치에서 작업 후 Pull Request하는 방식 사용 - 개발 진행 중 세부적인 사항들에 대해서는 프론트 팀 내부 회의를 간단하게 거쳐 빠르게 결정하기
🔗 Udacity Git Commit Message Style Guide를 참고
Gitmoji | Header | 설명 | |
---|---|---|---|
✨ | :sparkle: |
feat: | 새로운 기능에 대한 커밋 |
🐛 | :bug: |
fix: | 버그 수정에 대한 커밋 |
👷 | :construction_worker: |
build: | 빌드 관련 파일 수정에 대한 커밋 |
🔨 | :hammer: |
chore: | 그 외 자잘한 수정에 대한 커밋 (기타 변경 사항) |
💚 | :green_heart: |
ci: | CI 관련 설정 수정에 대한 커밋 |
📝 | :memo: |
docs: | 문서 수정에 대한 커밋 |
💄 | :lipstick: |
style: | ui 스타일에 관한 커밋 |
🎨 | :art: |
refactor: | 코드 리팩토링에 대한 커밋 |
✅ | :white_check_mark: |
test: | 테스트 코드 수정에 대한 커밋 |
🎉 | :tada: |
init: | 프로젝트 시작에 대한 커밋 |
🔖 | :bookmark: |
release: | 릴리즈에 대한 커밋 |
➕ | :heavy_plus_sign: |
plus: | 의존성 추가에 대한 커밋 |
➖ | :heavy_minus_sign: |
minus: | 의존성 제거에 대한 커밋 |
PR 제목 - 분류: 작업 내용
# 작업 내용
작업 내용을 요약해서 한 줄로 적어주세요.
# 작업 목록
- 작업 내용을
- 하나 하나 리스트로 나누어
- 작은 단위로 적어주세요.
# 연결된 이슈
특정 이슈를 해결한 작업이라면 이슈 번호를 명시해 주세요.
- Typescript 제외하고 프로젝트 세팅 뒤집어 엎기
- 협업 Convention 정리
- 디렉토리 구조 및 컴포넌트 분리
- 라우팅 기초 설정
- Vercel 배포 연결
- 네비게이션 및 컴포넌트 스타일링
- 뉴스레터 페이지 레이아웃 및 스타일링
- 커뮤니티 페이지 레이아웃 및 스타일링
- 도메인 배포 연결
- 검색 페이지 레이아웃 및 스타일링
- 회원가입 페이지 스타일링
- 백엔드 API 일부(소셜 로그인) 연동 작업
- 해커톤 (07-23)
- 백엔드 API 연동 작업
- QA 및 디버깅
- 빌드 및 렌더링 최적화
- 데모데이 (08-05)
- 뉴스레터 및 커뮤니티 서비스 정식 런칭 (1달)
- 모바일 랜딩페이지 작업
- 뉴스레터 및 커뮤니티 서비스 단축 운영 (2주)
- 기획 - 박재민, 박성호
- 디자인 - 정주연, 조아라
- 프론트엔드 - 최어진
- 백엔드 - 백지훈