Skip to content

[iOS] 작업 진행 사항

shingha1124 edited this page Apr 11, 2022 · 3 revisions

TODO List


  • 단계별로 미션을 해결하고 리뷰를 받고나면 readme.md 파일에 주요 작업 내용(바뀐 화면 이미지, 핵심 기능 설명)과 완성 날짜시간을 기록한다.
  • 실행한 화면을 캡처해서 readme.md 파일에 포함한다.

작업내역

시작날짜 번호 내용 비고
2022.04.11 Step10 테이블 셀의 드래그 앤 드롭 구현
2022.04.11 Step9 컬럼 테이블 셀의 trailingSwipeAction구현
2022.04.09 Step8 테스트 네트워크 리펙토링
2022.04.08 Step7 서브메뉴 테스트 네트워크 연결
2022.04.07 Step6 서브메뉴 기능구현
2022.04.06 Step5 네트워크 테스트를 사용한 UI 연결
2022.04.05 Step4 네트워크 테스트를 위한 MockSession구현
2022.04.05 Step3 새로운 카드 등록 팝업 구현
2022.04.05 Step2 메인화면 기능 구현
2022.04.04 Step1 메인화면 레이아웃 구성

[Step10] 테이블 셀의 드래그 앤 드롭 구현

체크리스트

  • 해당 기능을 구현하기 위해 R&D
  • 테이블 뷰에서 제공하는 Drag&Drop 기능 학습
  • 드래그를 위한 NSItemProvider 모델 제작
  • 뷰끼리 Drag&Drop 기능 테스트
  • 테스트 네트워크 연동

핵심기능

  • 각 컬럼의 카드를 Drag&Drop하여 원하는 컬럼으로 이동 할 수 있다

결과화면

Simulator Screen Recording - iPad Pro (12 9-inch) (5th generation) - 2022-04-11 at 17 54 18


[Step9] 컬럼 테이블 셀의 trailingSwipeAction구현

체크리스트

  • 해당 기능을 구현하기 위해 R&D
  • 테이블 뷰에서 제공하는 trailingSwipeAction 학습
  • 테이블 뷰의 구현 방식변경
    • 기존 row만 사용하는 방식에서 section을 사용
  • 스와이프 액션 기능 구현 및 버튼 추가
  • 버튼 이벤트 연결 및 테스트 네트워크 연결

핵심기능

  • 셀을 왼쪽으로 스와이프하여 메뉴를 보고 선택 할 수 있다

결과화면

Simulator Screen Recording - iPad Pro (12 9-inch) (5th generation) - 2022-04-11 at 17 53 09


[Step8] 테스트 네트워크 리펙토링

체크리스트

  • 테스트 네트워크에 사용할 Database 정의

  • API요청을 보내고, 테스트 네트워크를 통해 DB 갱신 및 응답

  • 응답값에 따라 클라이언트가 처리되도록 작업

  • 실제서버 - 테스트 변경 시 간단한 수정만으로 스위칭되도록 작업

    //request(.loadColumns, isSucccess: true) - 테스트 네트워크 성공
    //request(.loadColumns, isSucccess: false) - 테스트 네트워크 실패
    //request(.loadColumns) - 실제 네트워크 적용
    func loadColumns() -> AnyPublisher<ApiResult<[Column], SessionError>, Never> {
      request(.loadColumns, isSucccess: true)
      .map { $0.decode([Column].self) }
      .eraseToAnyPublisher()
    }

핵심기능

  • 실제 서버통신과 같은 API를 호출하여 원하는 결과값을 얻을 수 있다
    • 성공 & 실패 시 원하는 값이나 원하는 실패처리로 테스트 가능
  • 서버가 아직 준비중인 상태에서도 서로의 Model만 정의되어 있으면 테스트를 할 수 있다

결과화면

Simulator Screen Recording - iPad Pro (12 9-inch) (5th generation) - 2022-04-10 at 19 20 13


[Step7] 서브메뉴 테스트 네트워크 연결

체크리스트

  • ContentMenu 구현
    • 완료한 일로 이동 테스트 네트워크 구현
    • 수정하기 테스트 네트워크 구현
    • 삭제하기 테스트 네트워크 구현
    • 새카드 추가하기 테스트 네트워크 구현

핵심기능

  • 테스트 네트워크를 통해 각 컬럼에 새로운 카드를 추가 할 수 있다
  • 테스트 네트워크를 통해 선택한 카드를 완료됨으로 이동할 수 있다
  • 테스트 네트워크를 통해 선택한 카드를 수정, 삭제 할 수 있다

[Step6] 서브메뉴 기능구현

체크리스트

  • ContentMenu 구현
    • 완료한 일로 이동
    • 수정하기
    • 삭제하기
    • 새카드 추가하기

핵심기능

  • 각 컬럼에 새로운 카드를 추가 할 수 있다
  • 선택한 카드를 완료됨으로 이동할 수 있다
  • 선택한 카드를 수정, 삭제 할 수 있다

[Step5] 네트워크 테스트를 사용한 UI 연결

체크리스트

  • 네트워크 테스트 시 사용할 데이터 모델 정의

    //테스트 네트워크에서 사용할 카드 데이터 모델
    class MockCard: Decodable, CustomStringConvertible, Equatable {
        let id: Int
        public private(set) var title: String
        public private(set) var content: String
        let author_system: String
        public private(set) var column_name: MockColumnType
        public private(set) var order_id: Int
    }
    //테스트 네트워크에서 사용 할 클라이언트 데이터 모델
    struct ClientColumn: Encodable {
        let type: MockColumnType
        let cards: [ClientCard]
    }
    
    struct ClientCard: Encodable {
        let id: Int
        let title: String
        let content: String
        let caption: String
    }
  • 임의로 생성한 데이터 모델을 사용하여 MockSession을 통해 네트워크 통신 테스트

  • 모델과 View의 연결

핵심기능

  • 임의로 생성한 데이터모델을 사용하여, 실제 UI와 연결하여 결과를 볼 수 있다

결과화면

Simulator Screen Shot - iPad Pro (12 9-inch) (5th generation) - 2022-04-06 at 15 43 34

[Step4] 네트워크 테스트를 위한 MockSession구현

체크리스트

  • 서버가 준비 되기 전 네트워크 테스트를 위한 MockSession 구현
  • URLSessionProtocol을 준비하고, 채택하여 사용
  • 테스트 시, 임의로 성공과 실패를 결정 할 수 있고, 원하는 데이터를 받아 실제 네트워크 통신하듯이 사용가능

핵심기능

  • 실제 서버와 연결 전 서버없이 테스트를 할 수 있다

[Step3] 새로운 카드 등록 팝업 구현

체크리스트

  • 새로운 카드 등록 팝업 구현
  • 팝업 ViewController 구현
  • 내부 UI 제작
  • 팝업UI 기능 구현
    • 문자입력
    • 확인/취소 버튼
    • 종료 후 데이터 처리

핵심기능

  • +버튼을 누르면 팝업이 뜨고, 내용입력 후 등록, 입력된 데이터를 원하는 곳으로 전달

결과화면

Simulator Screen Recording - iPad Pro (12 9-inch) (5th generation) - 2022-04-06 at 09 59 19


[Step2] 메인화면 기능구현

체크리스트

  • ColumnViewController

    • 테이블 뷰를 사용하여 CardView 출력
    • Card 갯수 출력
    • UI 이벤트 연결
  • CardView

    • 타이틀, 내용, 캡션 출력
  • 요구사항에 맞게끔 UI의 간격이나, 기능을 구현

핵심기능

  • 메인화면에 필요한 UI가 임의로 동작하게끔 구현

결과화면

Simulator Screen Recording - iPad Pro (12 9-inch) (5th generation) - 2022-04-06 at 09 54 24


[Step1] 메인화면 레이아웃 구성

체크리스트

  • 메인화면 레이어 정리
    • 상단 타이틀 바
    • ColumnViewController 제작
    • CardView 제작