꾸준하고 간편한 프로젝트 회고 기록 장려 서비스, PUZZLING 🧩

팀과 함께 나만의 회고를 작성하며 퍼즐을 완성하고, 그 과정에서 시각적 성취감과 회고의 동기부여를 이끌어내는 서비스 퍼즐링

🫶 PUZZLING iOS Developers


권 정	김민주	심규보	천성우
kj9470	frohsch	PecanPiePOS	cjs1399

💻 Development Environment

📖 Using Library

라이브러리	사용 목적	Management Tool
Moya	서버 통신	SPM
SnapKit	UI Layout	SPM
Then	UI 선언	SPM
Lottie	스플래쉬 화면	SPM

📝 Code Convention

💦 네이밍

💧클래스, 구조체

UpperCamelCase 사용

// - example

struct MyTicketResponseDTO {
}

class UserInfo {
}

💧함수

lowerCamelCase 사용하고 동사로 시작

// - example

private func setDataBind() {
}

💧뷰 전환

pop, push, present, dismiss
동사 + To + 목적지 뷰 (다음에 보일 뷰)
dismiss는 dismiss + 현재 뷰

// - example pop, push, present

popToFirstViewController()
pushToFirstViewController()
presentToFirstViewController()

dismissFirstViewController()

💧register

// - example

registerXib()
registerCell()

💧서버 통신

서비스함수명 + WithAPI

// - example

fetchListWithAPI()

requestListWithAPI()

fetch는 무조건 성공

request는 실패할 수도 있는 요청

💧애니메이션

동사원형 + 목적어 + WithAnimation

showButtonsWithAnimation()

💧델리게이트

delegate 메서드는 프로토콜명으로 네임스페이스를 구분

좋은 예:

protocol UserCellDelegate {
  func userCellDidSetProfileImage(_ cell: UserCell)
  func userCell(_ cell: UserCell, didTapFollowButtonWith user: User)
}

protocol UITableViewDelegate {
	func tableview( ....) 
	func tableview...
}

protocol JunhoViewDelegate {
	func junhoViewTouched()
	func junhoViewScrolled()
}

Delegate 앞쪽에 있는 단어를 중심으로 메서드 네이밍하기

나쁜 예:

protocol UserCellDelegate {
	// userCellDidSetProfileImage() 가 옳음
  func didSetProfileImage()
  func followPressed(user: User)

  // `UserCell`이라는 클래스가 존재할 경우 컴파일 에러 발생  (userCell 로 해주자)
  func UserCell(_ cell: UserCell, didTapFollowButtonWith user: User)
}

함수 이름 앞에는 되도록이면 get 을 붙이지 않습니다.

💧변수, 상수

lowerCamelCase 사용

let userName: String

💧열거형

각 case 에는 lowerCamelCase 사용

enum UserType {
	case viewDeveloper
	case serverDeveloper
}

💧약어

약어로 시작하는 경우 소문자로 표기, 그 외에는 항상 대문자

// 좋은 예:
let userID: Int?
let html: String?
let websiteURL: URL?
let urlString: String?

// 나쁜 예:
let userId: Int?
let HTML: String?
let websiteUrl: NSURL?
let URLString: String?

💧기타 네이밍

setUI() : @IBOutlet 속성 설정
setLayout() : 레이아웃 관련 코드
setDataBind() : 배열 항목 세팅. 컬렉션뷰 에서 리스트 초기 세팅할때
setAddTarget() : addtarget 모음
setDelegate() : delegate, datasource 모음
setCollectionView() : 컬렉션뷰 관련 세팅
setTableView() : 테이블뷰 관련 세팅
initCell() : 셀 데이터 초기화
registerXib() : 셀 xib 등록.
setNotification() : NotificationCenter addObserver 모음

헷갈린다? set을 쓰세요 ^^

💦코드 레이아웃

💧들여쓰기 및 띄어쓰기

들여쓰기에는 탭(tab) 대신 4개의 space를 사용합니다.
콜론(:)을 쓸 때에는 콜론의 오른쪽에만 공백을 둡니다.

let names: [String: String]?

let name: String
연산자 오버로딩 함수 정의에서는 연산자와 괄호 사이에 한 칸 띄어씁니다.

func ** (lhs: Int, rhs: Int)

💧줄바꿈

함수를 호출하는 코드가 최대 길이를 초과하는 경우에는 파라미터 이름을 기준으로 줄바꿈합니다. 파라미터가 3개 이상이면 줄바꿈하도록!!

단, 파라미터에 클로저가 2개 이상 존재하는 경우에는 무조건 내려쓰기합니다.
```
UIView.animate(
  withDuration: 0.25,
  animations: {
    // doSomething()
  },
  completion: { finished in
    // doSomething()
  }
)
```

if let 구문이 길 경우에는 줄바꿈하고 한 칸 들여씁니다.

if let user = self.veryLongFunctionNameWhichReturnsOptionalUser(),
  let name = user.veryLongFunctionNameWhichReturnsOptionalName(),
  user.gender == .female {
  // ...
}

guard let 구문이 길 경우에는 줄바꿈하고 한 칸 들여씁니다. else는 마지막 줄에 붙여쓰기

guard let user = self.veryLongFunctionNameWhichReturnsOptionalUser(),
  let name = user.veryLongFunctionNameWhichReturnsOptionalName(),
  user.gender == .female else { return }

guard let self = self 
else { return } (X)

guard let self = self else { return } (O)

else 구문이 길 시 줄바꿈

💧빈 줄

클래스 선언 다음에 , extension 다음에 한 줄 띄어주기
빈 줄에는 공백이 포함되지 않도록 합니다. ( 띄어쓰기 쓸데없이 넣지 말기 )
모든 파일은 빈 줄로 끝나도록 합니다. ( 끝에 엔터 하나 넣기)

MARK 구문 위와 아래에는 공백이 필요합니다.

// MARK: Layout

override func layoutSubviews() {
  // doSomething()
}

// MARK: Actions

override func menuButtonDidTap() {
  // doSomething()
}

💧임포트

모듈 임포트는 알파벳 순으로 정렬합니다. 내장 프레임워크를 먼저 임포트하고, 빈 줄로 구분하여 서드파티 프레임워크를 임포트합니다.

import UIKit

import Moya
import SnapKit
import SwiftyColor
import Then

import UIKit

import SwiftyColor
import SwiftyImage
import JunhoKit
import Then
import URLNavigator

💦클로저

파라미터와 리턴 타입이 없는 Closure 정의시에는 () -> Void를 사용합니다.

좋은 예:
```
let completionBlock: (() -> Void)?
```
나쁜 예:

let completionBlock: (() -> ())? let completionBlock: ((Void) -> (Void))?

Closure 정의시 파라미터에는 괄호를 사용하지 않습니다.

좋은 예:

{ operation, responseObject in
  // doSomething()
}

나쁜 예:

{ (operation, responseObject) in
  // doSomething()
}

Closure 정의시 가능한 경우 타입 정의를 생략합니다.

좋은 예:

...,
completion: { finished in
  // doSomething()
}

나쁜 예:

...,
completion: { (finished: Bool) -> Void in
  // doSomething()
}

completion: { data -> Void in
  // doSomething()
} (X)

Closure 호출시 또다른 유일한 Closure를 마지막 파라미터로 받는 경우, 파라미터 이름을 생략합니다.

좋은 예:

UIView.animate(withDuration: 0.5) {
  // doSomething()
}

나쁜 예:

UIView.animate(withDuration: 0.5, animations: { () -> Void in
  // doSomething()
})

💦주석

코드는 가능하면 자체적으로 문서가 되어야 하므로, 코드와 함께 있는 인라인(inline) 주석은 피한다.

💧MARK 주석

// MARK: - UI Components

// MARK: - View Life Cycle

// MARK: - Initializer

// MARK: - Properties  -> setUI

// MARK: - Layout Helper  -> setLayout

// MARK: - Methods     -> registerXib, assignDelegate 등

// MARK: - @objc Methods

// MARK: Actions       -> ex) MenuButtonDidTap

// MARK: - Network
> 네트워크 목적을 가진 함수들

// MARK: - Properties

// MARK: - @IBOutlet Properties

// MARK: - @IBAction Properties

// MARK: - View Life Cycle

// MARK: - Methods
> setUI, registerXib, assignDelegate 등

// MARK: - @objc Methods

// MARK: - Network
> 네트워크 목적을 가진 함수들

💧퀵헬프 주석

커스텀 메서드, 프로토콜, 클래스의 경우에 퀵헬프 주석 달기

/// (서머리 부분)
/// (디스크립션 부분)
class MyClass {
    let myProperty: Int

    init(myProperty: Int) {
        self.myProperty = myProperty
    }
}

/**summary
(서머리 부분)
> (디스크립션 부분)

- parameters:
    - property: 프로퍼티
- throws: 오류가 발생하면 customError의 한 케이스를 throw
- returns: "\\(name)는 ~" String
*/
func printProperty(property: Int) {
        print(property)
    }

참고 :

💦프로그래밍 권장사항

💧Type Annotation 사용

좋은 예:

let name: String = "철수"
let height: Float = "10.0"

나쁜 예:

let name = "철수"
let height = "10.0"

💧UICollectionViewDelegate, UICollectionViewDatsource 등 시스템 프로토콜

프로토콜을 적용할 때에는 extension을 만들어서 관련된 메서드를 모아둡니다.

좋은 예:

final class MyViewController: UIViewController {
  // ...
}

// MARK: - UITableViewDataSource

extension MyViewController: UITableViewDataSource {
  // ...
}

// MARK: - UITableViewDelegate

extension MyViewController: UITableViewDelegate {
  // ...
}

나쁜 예:

final class MyViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
  // ...
}

// 프로토콜 여러개를 한곳에 몰아서 때려넣지 말자!

💦기타규칙

self 는 최대한 사용을 지양 → **알잘딱깔센 self…**
viewDidLoad() 에서는 함수호출만
delegate 지정, UI관련 설정 등등 모두 함수와 역할에 따라서 extension 으로 빼기
필요없는 주석 및 Mark 구문들 제거
deinit{} 모든 뷰컨에서 활성화
guard let 으로 unwrapping 할 시, nil 가능성이 높은 경우에는 else{} 안에 print() 해서 디버깅하기 쉽게 만들기

return 사용시 두 줄 이상 코드가 있을 시, 한 줄 띄고 return 사용

func fetchFalse() -> Bool {
		return false
} (O)

func isDataValid(data: Data?) -> Bool {
		guard let data else { return false }
		
		return true
} (O)

func isDataValid(data: Data?) -> Bool {
		guard let data else {
				return false 
		}
		return true
} (X)

강제 언래핑 금지 (!)

🐈 Git & GitHub Strategy

🐱 Git Flow

  1. 작업 폴더를 만들고 
	git init
	git remote add upstream [레포 주소]
	git remote add origin [레포 주소]

2. local main 에서 upstream을 풀 받고, origin develop 에 올려준다
	git switch main
	git pull upstream develop
	git push origin develop -> 안 됨.?
3. 레포에 이슈를 생성한다.  ( 이슈 템플릿에 맞춰서 )
	"[Prefix] 작업 목표"
	자기 라벨 + Prefix 라벨 선택
	ex) [Design] Weather View 디자인
	4. 이슈 번호 만들어진걸 확인하고 로컬에 feature/#이슈번호 브랜치를 판다
	git switch -c [브랜치명]
5. 작업 하기
	git add
	git commit
6. 충돌 해결 후 PR 올리기
	git pull upstream develop
		충돌이 났다면 크라켄으로 해결해주자!!
	git push origin [작업 브랜치명]
	코드리뷰 해쥬기
	approve 최소 한 명으로 제한 걸어놨음!!
7. 머지하기
8. 내 노트북의 작업공간으로 돌아오기
	git checkout develop (main)
	다시 2번부터 진행

🐱 Issue Template

## 🧩 이슈 요약
<!-- 이유에 대해 설명해주세요. -->
- 프로젝트 초기 세팅

## ✅ 체크 리스트
<!-- 해야 할 일을 적어주세요. -->
- [ ] 프로젝트 초기 세팅

🐱 Pull Request Template

## 💭 작업 배경
<!-- 아래 리스트를 지우고, 작업하게 된 배경을 적어주세요. -->
 - 작업 내용 1
 - 작업 내용 2

## 🌤️ PR POINT
<!-- 작업 내용 및 덧붙이고 싶은 내용이 있다면! -->

## 📸 스크린샷
<!-- 작업한 화면이 있다면 스크린 샷으로 첨부해주세요. -->

|    구현 내용    |   스크린샷   |
| :-------------: | :----------: |
| GIF | <img src = "" width ="250">|

## 🌈 관련 이슈
<!-- 작업한 이슈번호를 # 뒤에 붙여주세요. 수고했습니다~* -->
- Resolved: #

🐱 Commit Convention & Template

[Prefix] #이슈번호 - 작업내용


#   [Feat]      : 새로운 기능 구현
#   [Fix]       : 버그, 오류 해결, 코드 수정
#   [Design]    : just 화면. 레이아웃 조정
#   [Merge]     : 머지, 충돌 해결
#   [Refactor]  : 프로덕션 코드 리팩토링
#   [Comment]   : 필요한 주석 추가 및 변경
#   [Docs]      : README나 WIKI 등의 문서 개정
#   [Chore]     : 빌드 태스트 업데이트, 패키지 매니저를 설정하는 경우(프로덕션 코드 변경 X)
#   [Setting]   : 초기 세팅
#   [Rename]    : 파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우
#   [Remove]    : 파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우

#   [커밋 타입]   : 설명!!

# Commit Example!!
# [Feat]#1 - ~~기능 추가!

📂 Folder Architecture

프로젝트 폴더 구조

├── 📁 Application
│   ├── AppDelegate.swift
│   ├── SceneDelegate.swift
│   └── Info.plist
├── 📁 Data
│   ├── 📁 Data
│   └── 📁 DTO
├── 📁 Network
│   ├── 📁 APIService
│   └── 📁 Foundation
├── 📁 Presentation
│   ├── 📁 Common
│   └── 📁 Home
│       ├── 📁 Cell
│       ├── 📁 ViewController
│       └── 📁 View
├── 📁 Resource
│   ├── 📁 Font
│   └── 📁 AssetCatalog
│       ├── Image.xcassets
│       └── Color.xcassets
└── 📁 Util
    ├── 📁 Extension
    ├── 📁 Literals
    └── 📁 StyleGuide
        └── FontLevel

🌷 역할 분담

🐸 정

프로젝트 등록 뷰

텍스트필드가 반복되는 뷰이기 때문에 커스텀 뷰를 만들어서 switch 문으로 분기처리를 해 주고 재활용했습니다.
텍스트필드를 입력하는 중 특수문자나 이모지가 입력되었을 시 경고 메시지를 출력하기 위해 textField delegate에 있는 함수를 사용해 텍스트필드 입력 시작, 입력 도중, 입력 끝 부분에 세부적으로 하나하나 함수를 넣어 글자를 감지해 처리해주었습니다.
또한 데이트피커를 사용해 날짜를 입력할 수 있도록 하고 컬렉션뷰를 이용해 회고 주기를 입력할 수 있도록 하였습니다.
모든 컴포넌트에 값이 입력된 경우 notification center를 통해 뷰컨의 버튼을 활성화 할 수 있도록 했습니다.

초대코드 입력 뷰

프로젝트 등록 뷰에서 사용한 커스텀 뷰를 활용했습니다.
서버통신을 이용해 발급받은 초대코드를 입력하고 초대코드가 유효하지 않은 경우 경고 메세지를 띄우도록 구현했습니다

😼 민주

마이페이지 내 프로젝트 리스트 조회 뷰

UITableView를 사용해서 전체 리스트가 나타나게 했습니다.
TableView에 헤더를 만들어 닉네임이 나타나게 했습니다.
프로젝트 시작 날짜를 받아와 D-Day를 계산해 넣었습니다. 음수일 때, 0일 때를 분기처리 했습니다. 음수일 때는 D-로 표시되게 하고, 양수일 때는 D+로 표시되게 했습니다. 0일 때를 따로 분기처리해서 프로젝트가 시작한 날짜를 +1일이 되게 만들었습니다.

마이페이지 회고 리스트 조회 뷰

UICollectionView를 만들어서 전체 리스트가 나타나게 했습니다. 상단에 프로젝트를 선택할 수 있는 버튼을 만들었습니다.
UICollectionViewDelegate를 사용해서 CollectionView의 셀을 선택하면 다음 뷰로 넘어가도록 만들었습니다.
상단 버튼에 BottomSheet를 연결해서 프로젝트를 선택하도록 만들었습니다. 선택한 프로젝트에 맞춰 네비게이션의 title이 변경되게 했습니다.

마이페이지 회고 상세조회 뷰

FSCalendar로 상단 캘린더를 구현했습니다. 회고 주기일 때는 검정색으로 날짜가 나오고 회고 주기가 아닐 때는 회색으로 표시되고, 선택이 안됩니다.
회고가 입력된 날은 하늘색 선택이 되게 하고 유저가 클릭한 날짜는 파란색으로 선택되게 만들었습니다.
회고 내용을 UICollectionView로 만들었습니다. 회고 내용의 사이즈에 맞게 셀의 높이가 조정되도록 만들었습니다.

팀원 회고 상황 조회 뷰

FSCalendar로 상단 캘린더를 구현했습니다. 회고 주기일 때는 검정색으로 날짜가 나오고, 회고 주기가 아닐 때는 회색으로 표시되고, 선택이 안됩니다.
회고를 아무도 진행하지 않았으면 검정색 글씨만 나오고, 회고를 진행한 인원이 한 명이라도 있으면 하늘색 동그라미로 표시됩니다.
UITableView로 하단 회고 진행 여부를 확인할 수 있는 뷰를 만들었습니다. 회고를 진행한 사람이 없으면 “회고를 진행해야 해요” 부분만 나오고, 반대로 모두가 회고를 진행했으면 “회고를 진행했어요” 부분만 나옵니다.

🦊 규보

홈 뷰 공통 사항:

공통 View 를 만들어, 두 개의 대시뷰에 대응하려 했습니다.
네트워크를 받아, 모든 뷰에 뿌렸습니다.
데이터에 대한 로직을 홈 뷰에서 작성했습니다.
알림 토스트뷰를 애니메이션을 통해 구현했습니다.
개인 대시뷰
- 오늘 날짜의 퍼즐은 점프를 합니다. 사용자에게 앱의 생동감을 부여합니다.
- 액션 플랜 뷰를 CollectionView 로 구현합니다.
- 데이터 로직을 통해 ”회고 작성하기” 버튼을 활성/비활성화합니다.
팀 대시뷰
- 랭킹뷰를 구현합니다.
- 팀원이 3명 이하인 경우, TableView 는 사용하지 않습니다.
- 데이터의 크기에 따라 ScrollView 의 높이를 조절합니다.
프로젝트 변경 바텀시트 뷰
- 프로젝트 Id 를 다시 홈뷰로 보내면서 새롭게 통신을 잇습니다.

🐰 성우

제가 맡은 부분은 회고의 템플릿을 선택할 수 있고, 선택한 템플릿에 회고를 작성하여 저장하는 기능을 맡았습니다. 각각의 옵션들은 하나의 UIView로 구현했고, 옵션을 선택하면UIViewController에서 case 별로 화면이 업데이트 되도록 하였습니다. 하나의 View에서 작성 된 회고는 TextView에 입력이 되며 입력에 따른 화면 처리는 UITextViewDelegate로 처리했습니다.

💭 트러블 슈팅

📄 정

📄 민주

📄 규보

📄 성우

frohsch / Puzzling_iOS

꾸준하고 간편한 프로젝트 회고 기록 장려 서비스, PUZZLING 🧩

🫶 PUZZLING iOS Developers

💻 Development Environment

📖 Using Library

📝 Code Convention

💧클래스, 구조체

💧함수

💧뷰 전환

💧register

💧서버 통신

💧애니메이션

💧델리게이트

💧변수, 상수

💧열거형

💧약어

💧기타 네이밍

💧들여쓰기 및 띄어쓰기

💧줄바꿈

💧빈 줄

💧임포트

💧MARK 주석

💧퀵헬프 주석

💧Type Annotation 사용

💧UICollectionViewDelegate, UICollectionViewDatsource 등 시스템 프로토콜

🐈 Git & GitHub Strategy

📂 Folder Architecture

🌷 역할 분담

💭 트러블 슈팅

About

Languages