Giter VIP home page Giter VIP logo

macc-teamid-tdaa's Introduction

트다 TDAA

트다(TDAA)_깃헙 리드미 이미지

'트다'는 함께 여행간 사람들과의 같은 공간, 같은 경험에서 느꼈던 감정과 기억을 '공유'하는 것을 도와주는 iOS Application 입니다.



📱 Features

1. 공동 편집

- '트다' 공동 편집 기능을 제공합니다. 함께 여행간 사람들을 초대해 같이 여행 다이어리를 남겨보세요.
- 간편한 작성 도구 (위치, 사진, 스티커, 텍스트 추가 기능)

2. 여행 스탬프 콜렉션

- 내가 다녀온 여행지를 지도 상에서 모아봅니다. 방문한 여행지의 핀을 모아보세요.
- TDAA의 지도는 전세계를 지원합니다.

3. 사진 앨범

- 다이어리 작성에 사용된 모든 이미지들을 모아봅니다.
- 공동편집자들이 업로드한 사진을 공유받을 수 있습니다.


🖼 Screenshot

ScreenShot


🛠 Development

Tech Skills

UIKit MVVM MapKit

Libraries

RxSwift RxDataSources Firebase Kingfisher SnapKit

Environment

스크린샷 2021-11-19 오후 3 52 02 스크린샷 2021-11-19 오후 3 52 02

Project Structure

MacC-GoldenRatio (TDAA)
    |
    ├── Resources
    │       ├── Assets.xcassets       
    │       ├── Base.lproj
    │       ├── Fonts
    │       ├── AppDelegate.swift        
    │       └── SceneDelegate.swift    
    │
    ├── Sources                    
    │       ├── Presenter
    |       │       ├── HomeScene
    |       |       │       ├── Model
    |       |       │       ├── View 
    |       |       │       ├── ViewController 
    |       |       │       └── ViewModel  
    |       │       ├── SignInScene
    |       │       ├── DiaryDaysScene
    |       │       ├── DiaryConfigScene   
    |       │       ├── PageScene
    |       │       ├── UserScene  
    |       │       └── Common   
    |       |
    │       ├── Model         # Common Models for Data & Objects
    │       ├── Classe        # Common Class for components
    │       ├── Network       # Networking Related Classes	
    │       └── Extensions    # Type Extension Files
    │
    └── Info.plist

👥 Authors

PM Design Developer Developer Developer
@San @Lau @Cali @Hatchling @Drogba
산 라우 칼리 해츨링 드록바

🔀 Git

1. 기본적인 작업 프로세스

  • Issue 생성: Assignees 할당, Label 할당
  • Branch 작성: Branch의 종류에 맞는 형태로 이름 지정
  • Pull Request: Issue의 TODO에서 제시되었던 모든 작업을 마친 후 PR 신청
  • 최소 2명 이상의 Reviewer의 Approve 후 Merge 가능

2. Phase: Issue

  • Issue 생성 규칙

  • 구현해야하는 요소들: 해결해야하는 문제에 대해 간략 서술

  • 구현 방안: 위의 요소들의 실제 구현 시의 세부 사항 및 방법을 작성한다

3. Phase: Branch

  • Branch 관리
    • Main Branch
    • Dev Branch: For Development
    • View Branch: Development Branch 중에서도 View 단위로 관리하기 위한 Branch들
  • 개발 이외의 Branch는 언제든지 추가될 여지 존재
  • Branch 생성 규칙
    • Default: 작업태그/이슈번호-Name
    • ex) feat/#50-HomeView

4. Phase: Pull Request

  • PR(Pull Request) 규칙
    • PR 템플릿 활용, 작업 사항, 스크린샷, To Reviewers 등 활용
    • Default: [작업태그]이슈번호 작업 사항 축약
    • ex) [Feat]#50 회원가입 뷰 추가
  • 작업태그 일괄
    • Feat : 새로운 기능 추가 / 일부 코드 추가 / 일부 코드 수정
    • Fix : 버그 수정
    • Refactor : 코드 리팩토링
    • Design : 디자인 수정

5. Phase: Code Review

  • 코드 리뷰 리소스 관리
    • Pn룰 (코멘트 강조): p1 ~ p5 코멘트 활용
    • D-n룰 (리뷰 우선순위 선정): 리뷰 기간 및 우선순위 선정에 따른 태스크 관리

macc-teamid-tdaa's People

Contributors

dorodong96 avatar idrogba avatar lau0505 avatar woo0dev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

macc-teamid-tdaa's Issues

[Feat] 이미지 디스크 캐시 구현

구현해야하는 요소들

  • 이미지 디스크 캐시

TODO

  • 이미지 캐시 기능 구현

비고 및 한계

  • 현재 메모리 캐시만 구현되어 있음. -> Filemanager를 사용하여 디스크 캐시 추가

[Build] Meta pixel 연결

구현해야하는 요소들

  • 메타 픽셀 광고에 필요한 픽셀과 xcode 연결

TODO

  • 패키지 설치
  • info plist 파일 구성
  • AppDelegate, SceneDelegate 연결
  • 앱 이벤트 추가

[Feat] PageView 페이지 추가 기능

구현해야하는 요소들

  • Page 추가 기능 구현
  • 여러 Page간 이동 구현
  • Page Thumbnail 이미지 반영

TODO

  • Page 추가 기능 구현
  • 여러 Page간 이동 구현
  • Page Thumbnail 이미지 반영

[Refactor] DiaryConfigView 리팩토링

구현해야하는 요소들

  • DiaryConfig 화면 컬렉션뷰 대신 스택뷰로 교체
  • 기존 MVC 패턴에서 MVVM 패턴으로 리팩토링

할 일 목록

  • #107
  • RxSwift를 활용한 MVVM 패턴 적용

[Feat] 다이어리 화면 구현 (기존 MyDiaryPages)

구현해야하는 요소들

  • Custom Segmented Control
  • 일차, 날짜, 사진을 담은 CollectionViewCell 구현
  • Firebase에서 해당 일차의 사진을 랜덤하게 가져와서 viewDidLoad(혹은 viewWillAppear?)마다 띄우기
  • Cell을 각 row로 담은 CollectionView 구현
    ++ 여유가 생기면 초대코드 복사 방법 변경하기

스크린샷1 스크린샷2
스크린샷1 스크린샷2

TODO

  • CollectionViewCell ViewModel 구현
  • CollectionViewCell View 구현
  • UICollectionView 구현
  • UICollectionView ViewModel 구현
  • Custom Segmented Control 구현
  • 랜덤하게 item의 image 타입 데이터를 띄워주기
  • Segmented Control에서 앨범 및 지도 뷰 띄우기

비고 및 한계

  • RxSwift + MVVM 적용 예정
  • 추후 시간에 따른 사진 전환 효과를 고려하여 CollectionView 채택
  • 디폴트 이미지에 대한 픽스 필요

[Feat] SignInView 구현

구현해야하는 요소들

  • Apple ID SignIn 버튼 구현
  • 로그인 기능 구현

구현 예시


TODO

  • Firebase Auth Configuration 하기
  • Apple ID SignIn 버튼 UI 구현하기
  • Apple ID SignIn 기능 구현
  • Firebase에 계정 정상 등록 여부 확인

비고 및 한계

  • 버튼 포함 상세 UI는 Hi-Fi 디자인이 나오는대로 추가 및 수정

[Feat] MapView 수정 및 리팩토링

구현해야하는 요소들

  • MapViewController 제거
  • MapView 분리
  • Clustering 제거
  • Annotation 수정
  • Annotation Event 추가
  • ViewModel 및 Model 수정

스크린샷1 스크린샷2

비고 및 한계

  • 이 작업 후에는 @Dorodong96 의 화면과 합치기 전에는 따로 확인이 어려울 수 있습니다.

[Faet] QA 수정사항 반영

구현해야하는 요소들

  • 로딩 인디케이터 구현
  • 앨범 타이틀 크기 조절
  • 앨범 페이징 수정
  • Data Fetch 타이밍 수정
  • 앨범 백그라운드 뷰 수정
  • 토스트 메세지 추가
  • 지도 어노테이션 이미지 변경
  • collectionBackgroundView 폰트 수정
  • 타이틀 색상 적용

구현 예시

앨범화면 지도화면

TODO

  • 로딩 인디케이터 구현
  • 앨범 타이틀 크기 조절
  • 앨범 페이징 수정
  • Data Fetch 타이밍 수정
  • 앨범 백그라운드 뷰 수정
  • 토스트 메세지 추가
  • 지도 어노테이션 이미지 변경
  • collectionBackgroundView 폰트 수정
  • 타이틀 색상 적용

비고 및 한계

[Feat] 텍스트 추가 기능 구현

구현해야하는 요소들

  • 텍스트 입력 뷰
  • 텍스트 스티커 추가 기능

TODO

  • 텍스트 입력 뷰 구현
  • 텍스트 라벨 스티커로 추가 기능 구현

[Feat] 스티커 도구 기능 구현

구현해야하는 요소들

  • 스티커 모음. 하프 모달.
  • 스티커 추가 기능 구현.

TODO

  • 스티커 하프 모달 구현
  • 스티커 선택, 추가 기능 구현

[Feat] 22.10.16 PR Merge 이후 작업 예정 사항

TODO

  • 토스트 팝업 띄우기 (다이어리 작성/수정 확인 버튼, 초대코드 복사 완료)
  • 다크모드 대응 - 다크모드를 아예 없애기? 각각의 컬러 대응하기?
  • 다이어리 수정 이후 타이틀 변경

비고 및 한계

-다크모드 대응의 경우, 앱에서 아예 막는 방법은 어떤가요? 추후에 다크모드가 있는 버전 제작을 고려한다면 지금 다크모드가 지원되지 않게 막고 이후 다크모드에 맞는 디자인으로 다시 다시 변경하는 것도 생각해 볼 수 있을 것 같습니다!

[Feat] Calendar 기간 설정 구현

구현해야하는 요소들

  • Calendar 기간 설정 구현
  • Calendar 설정된 기간 버튼에 표시
  • 여행 기간 계산
  • (추가예상) 공휴일, 요일별 색상 반영

구현 예시

디자인 확정 후 업데이트 예정


TODO

  • Calendar 기간 설정 구현 - 출발일, 도착일
  • Calendar 설정된 기간 버튼에 표시

비고 및 한계

[Feat] MyHomeView

구현해야하는 요소들

  • Home 버튼 메뉴 활성화 상태일 때 버튼 이미지 변경
  • CollectionView BackgroundView Text Color 변경
  • 탭 전환 시 로딩 인디케이터 제거
  • HomeViewModel 리스너 적용
  • CollectionView Cell Size 조절

[Feat] MyAlbumsView

구현해야하는 요소들

  • 여행 별 ScrollView (horizontal)
  • CollectionView
  • Unit Test

구현 예시


TODO

  • 다이어리의 타이틀을 활용해 여행 별 앨범 구현하기 (horizontal scroll view)
  • Firebase Storage에 있는 다이어리 별 사진을 가져와 CollectionView로 구현하기
  • Class와 Function을 Unit Test를 활용하여 오류를 체크하고 성능 체크하기

비고 및 한계

  • 다이어리 작성 기능 완료 전까지는 더미데이터 활용하여 작업 예정

[Add] 에셋에 추가할 요소

구현해야하는 요소들

  • 탭 바 아이콘
  • 앱 캐릭터 (긴팔,반팔 ver.)
  • 플러스 버튼
  • 앱 배경 이미지
  • 다이어리 속지 이미지
  • 다이어리 표지 이미지 10장
  • 스티커 예시 (일단 최소 1장...)

구현 예시


TODO

  • 탭 바 아이콘 픽스하기
  • 앱 캐릭터 (긴팔,반팔 ver.) 픽스하기
  • + 버튼 픽스하기
  • 앱 배경 이미지 픽스
  • 다이어리 속지 이미지 픽스
  • 다이어리 표지 이미지 컬러시트 10장 픽스하기
  • 스티커 예시 픽스하기

비고 및 한계

  • 항시 업데이트 해두고 있으니 전체적으로 디자인 패턴이 궁금하시다면 피그마 내 "디자인 시스템 가이드" 페이지를 참고해 주심 됩니다.
  • 오늘 내 작업한 디자인들은 내일 산 및 개발 팀원들과 다같이 확인 및 회의 후 픽스 짓기

[Feat] AlbumView 수정 및 리팩토링

구현해야하는 요소들

  • TabBar 제거
  • AlbumCollectionView 분리
  • AlbumViewController 제거
  • CollectionView를 세그먼트컨트롤에서 활용할 수 있도록 리팩토링
  • ViewModel 및 Model 리팩토링


비고 및 한계

  • 이 작업 후에는 @Dorodong96 의 화면과 합치기 전에는 따로 확인이 어려울 수 있습니다.

[Feat] Image 데이터 로컬 캐싱 처리

구현해야하는 요소들

  • Image Manager 클래스
    -( 파베 Storage에서 다루는 미디어 데이터를 앱이 메모리에 올라가 있는 동안 관리해줄 미디어 관리 클래스)

TODO

  • 클래스 생성 및 기능 설정
  • pageViewController에게 적용하기

[Fix] 에셋 커스텀 컬러 수정 및 스탬프 이미지 추가

구현해야하는 요소들

  • 에셋 커스텀 컬러 이름 최종 수정
  • 지도 화면에 나오는 스탬프 이미지 최종 픽스

구현 예시


TODO

  • 커스텀 컬러 에셋 이름 수정하기
  • 픽스된 스탬프 이미지 에셋 추가하기

비고 및 한계

  • 커스텀 컬러 총 5가지. (피그마 디자인 시스템 가이드 -> 컬러 스타일스 프레임 참고하시면 됩니다.)

[Refactor] MyHomeView

구현해야하는 요소들

  • MyHomeView CollectionView를 별도 View로 만들어 VC와 분리하기
  • RxSwift 활용하여 MVVM으로 리팩토링

[design] 에셋에 추가 수정 요소들

구현해야하는 요소들

  • 앱 로고 컬러 수정
  • 로그인 화면에 나오는 앱 로고 컬러 수정
  • 다이어리 표지 핑크,브라운 컬러 수정

TODO

  • 앱 로고 컬러 수정하기
  • 로그인 화면에 나오는 앱 로고 컬러 수정하기
  • 다이어리 표지 핑크,브라운 컬러 수정

비고 및 한계

[Feat] MyPlacesView 구현

구현해야하는 요소들

  • MapView 구현
  • Marker 구현
  • Unit Test

구현 예시


TODO

  • MapKit을 활용하여 MapView 구현
  • 다이어리의 Location을 바탕으로 Marker 추가 및 겹치는 Marker는 하나로 통합하여 개수 보여주기
  • Class와 Function을 Unit Test를 활용하여 오류를 체크하고 성능 체크하기

비고 및 한계

  • 다이어리 추가 기능 작업 완료 전까지는 더미데이터를 활용할 예정입니다.

[Feat] 동시 편집 적용

구현해야하는 요소들

  • 네트워킹 메서드 수정
  • 네트워킹 시점 고려하여 PageViewController에 반영

TODO

  • 네트워킹 메서드 수정
  • PageViewController에 반영

[Feat] MyDiariesView 구현

구현해야하는 요소들

  • TabBar 구현
  • CollectionView 구현
  • ActionSheets 구현
  • 초대 코드로 다이어리 추가
  • Unit Test

구현 예시


TODO

  • MyDiariesView LargeTitle 추가 하기
  • TabBar 추가 하기 (MyDiariesView, MyPlacesView, AddButton, MyAlbumsView, ProfileView)
  • CollectionView를 활용하여 다이어리 표시하기 (다이어리 제목과 다이어리에 참여중인 사람들의 프로필 사진 보여주기)
  • ActionSheets 구현 하기 (CreateDiaryAction, CreateDiaryForInvitationCodeAction)
  • Class와 Function을 Unit Test를 활용하여 오류를 체크하고 성능 체크하기

비고 및 한계

  • 다이어리 디자인이 아직 나오지 않아 CollectionView 디자인 작업은 추후 작업 예정

[Feat] MyDiaryPagesView 구현

구현해야하는 요소들

  • 글 페이지 구현
  • Action Sheet 구현
  • 초대 코드 생성 및 클립보드 복사
  • 다이어리 수정 기능
  • 다이어리 나가기 기능

구현 예시

다이어리 화면 다이어리 메뉴 화면 다이어리 수정 화면
다이어리 화면 다이어리 화면2 다이어리 수정 화면

TODO

  • 글 페이지 UI 구현 (CollectionView + ScrollViewDelegate)
  • ActionSheet 구현 (초대 코드 생성, 다이어리 수정)
  • 다이어리 생성이 아닌 수정할 내용을 담은 뷰 구현 (Title 변경)
  • 기존 다이어리 내용 Firebase에서 불러오기
  • 수정된 다이어리 내용 Firebase에 업로드
  • 다이어리 나가기 구현 (Firebase Extension - Delete User Data)
  • 다이어리 생성에서 저장된 diaryUUID활용, 초대코드 생성
  • 초대 코드 클립보드 복사 (UIPasteboard)

비고 및 한계

  • 상세 디자인은 아직 고려하지 않고 컴포넌트 기능 구현 위주
  • 다이어리 페이지 내용은 더미데이터 활용 (썸네일)

[Refactor] StickerView의 리팩터링 제안

제안 이유

  • StickerView는 다이어리의 콘텐츠를 구성하는 핵심 요소로서 이미지, Map, Text 외에도 다양한 미디어들을 포함하게 됨
  • 현재는 Map과 Image가 섞여있는 형태

제안

  • Enum을 도입해서 StickerView를 각 포맷에 맞게 특화시킬 수 있도록 함
  • 더 나아가서, StickerView와 StickerData를 분리시키는 것을 권장. 이 경우 Enum은 StickerData 영역에 있음.

TODO

  • 00하기

[Feat] AlbumView

구현해야하는 요소들

  • Album 미선택 앨범 타이틀 색상 변경

구현 예시

[Feat] 지도 Annotation 수정

구현해야하는 요소들

  • 단일 Annotation일 경우 다이어리 이름 보여주기
  • ClusterAnnotation일 경우 첫번째 다이어리 이름 보여주기

[Fix] 페이지 썸네일 화면 수정

구현해야하는 요소들

  • 부자연스러운 스크롤 개선
  • 다이어리 날짜 추가 (UI관련 사전 논의 필요)
  • 썸네일 업데이트 속도 개선

[Feat] DiaryConfigView 기능 추가 (컬러 선택, 사진 선택)

구현해야하는 요소들

  • 컬러 선택 collection view 추가
  • image picker 추가
  • 선택하는 사진의 사이즈 조절 custom 기능 구현

구현 예시

디자인 픽스 후 추가


TODO

  • 컬러 선택 collection view 추가
  • image picker 추가
  • 완료 버튼 누르면 사진 데이터 업로드 (FireStorage)
  • 사진 데이터 다운로드 (String URL 사용)
  • 다운로드한 사진 데이터 수정 화면에서 띄우기
  • ActionSheet 추가

비고 및 한계

  • 아직 정확한 배치가 나오지 않아 디자인 확정 후 UI구현

[Fix] HIFI 반영하여 수정

구현해야하는 요소들

  • 페이지에서 지도 라벨 색깔 수정
  • 네비게이션 바 타이틀 수정
  • 마이페이지 타이틀 컬러 수정
  • 지도 스티커 라벨 수정
  • 스티커 피커 X 수정

TODO

  • 페이지에서 지도 라벨 색깔 수정
  • 네비게이션 바 타이틀 수정
  • 마이페이지 타이틀 컬러 수정
  • 지도 스티커 라벨 수정
  • 스티커 피커 X 수정

비고 및 한계

[Feat] DiaryCreationView 구현

구현해야하는 요소들

  • 다이어리 생성 뷰 UI 구현
  • MapKit연동 SearchBar 구현
  • Calendar Picker 구현

구현 예시

다이어리 추가 여행지 선택 여행 기간 선택
다이어리 추가 화면 다이어리 추가 화면_여행지 검색 다이어리 추가 화면_날짜 선택

TODO

  • CollectionView를 활용해 컴포넌트 및 구별 구현 (DiaryConfiguration)
  • TextField, Picker 등의 작성 항목 초기화 버튼 구현
  • 상단 Title 및 Button 구현
  • MapKit의 Placemark and Local Search 활용해 자동완성 SearchBar 구현 (PlaceSearch)
  • 작성 내용 Firebase에 저장 기능 구현

비고 및 한계

  • 추후 디자인 수정 가능성이 높기 때문에 컴포넌트 구성은 CollectionView 채택
  • 캘린더 디자인에 따라 보여줄 요소가 다를 수 있음
  • 다이어리 수정과 뷰 구분 여부에 대한 고민 필요

[Add] Add Assets for Halloween

구현해야하는 요소들

  • 할로윈 행사 한정 할로윈 스티커 에셋 추가하기

TODO

  • 할로윈 스티커 에셋 추가하기

비고 및 한계

[Fix] 로그인 화면 수정 사항

구현해야하는 요소들

  • 미니 사이즈 기기에서 앱 타이틀이 잘리는 현상 수정 (다른 기기도 추가 확인)
  • 메인화면에서 슬라이드 제스처로 페이지가 전환되는 현상 수정

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.