미라클 모닝으로 시작하는 당신의 의미있는 아침, meaning iOS

🌱 서비스 소개

프로젝트 진행기간 : 2020년 12월 26일 ~ 2021년 01월 15일

기상 시간이 달라진다면, 당신도 변할 수 있습니다.

'내'가 눈 뜨는 시간이 아닌, '해'가 뜨는 시간부터 하루를 시작하는 미라클 모닝.

미닝을 통해 미라클 모닝에 도전하며 당신만의 의미있는 아침을 만들어 나가보세요.

일찍 일어나는 습관으로 하루를 길게 보내면, 성장의 발판을 마련할 수 있습니다.

미닝과 함께 체계적인 계획을 세우고 이를 규칙적으로 실천하면서 성취감을 얻어보세요.

성장지향적인 그룹원들과 목표를 공유한다면 우리는 함께, 더 멀리 갈 수 있습니다.

SETTING

🐕 개발 환경

➕ 사용 라이브러리

📏 Coding Convention

🐱 How We Use Git

🗂 Foldering

💻 meaning
 ┣ 🗂 Global
 ┃ ┣ 🗂 Extension
 ┃ ┃ ┗ 📑 Fonts+Extension.swift
 ┃ ┣ 🗂 Model
 ┃ ┃ ┗ 📑 GenericResponse.swift
 ┃ ┗ 🗂 Service
 ┃ ┃ ┗ 📑NetworkResult.swift
 ┣ 🗂 Screen
 ┃ ┣ 🗂 Home
 ┃ ┃ ┣ 🗂 Cell
 ┃ ┃ ┃ ┗ 📑 CardListCell.swift
 ┃ ┃ ┣ 🗂 Storyboard
 ┃ ┃ ┃ ┗ 📑 Home.storyboard
 ┃ ┃ ┗ 🗂 ViewController
 ┃ ┃ ┃ ┗ 📑 HomeVC.swift
 ┃ ┗ 🗂 Login
 ┃ ┃ ┣ 🗂 Storyboard
 ┃ ┃ ┃ ┗ 📑 Login.storyboard
 ┃ ┃ ┗ 🗂 ViewController
 ┃ ┃ ┃ ┗ 📑 LoginVC.swift
 ┗ 🗂 Support
 ┃ ┣ 🗂 Font
 ┃ ┣ 🗂 Assets.xcassets
 ┃ ┣ 📑 LaunchScreen.storyboard
 ┃ ┣ 📑 AppDelegate.swift
 ┃ ┣ 📑 SceneDelegate.swift
 ┃ ┗ 📑 Info.plist
 ┗ 🗂 meaning.xcodeproj

📱 Screen 단위

Service

🗓 WORKFLOW

👷 실행화면

📱 Splash, Login 화면

📱 온보딩 화면

📱 홈 - 캘린더 - 미션 화면

📱 홈-캘린더-미션완료 후 화면

📱 타임스탬프 화면

📱 4개 미션 화면

📱 마이피드 - 마이피드 상세보기 화면

📱 그룹 목록 화면

📱 그룹 상세보기-가입 화면

📱 그룹생성 화면

📱 그룹 피드-피드 상세보기-그룹 설정 화면

🛠 기능명세서

🎉 새롭게 도전해본 기능

👀 민희

1. Moya가 Moya?

1. 새로운 앱을 쓰기 힘들게 만든다.
2. 앱을 유지하기 어렵게 만든다.
3. unit 테스트를 하기 어렵게 만든다.

😳 Moya 그래서 어떻게 사용해요?

2.AVFoundation 이용해서 TimeStamp Camera 구현하기

import UIKit
import AVFoundation
class TimeStampVC: UIViewController {
 // MARK: Variable Part
 
 var captureSession: AVCaptureSession!
 // 실시간 캡쳐를 위한 세션
 var stillImageOutput: AVCapturePhotoOutput!
 // 캡쳐한 이미지를 출력
 var videoPreviewLayer: AVCaptureVideoPreviewLayer!
 // 캡쳐된 비디오를 표시해주는 Layer
 var timeStampImage: UIImage?
 var rootView: String?
 // MARK: Life Cycle Part
 
 override func viewDidLoad() {
 super.viewDidLoad()
 setCameraView()
 }
 override func viewWillDisappear(_ animated: Bool) {
 super.viewWillDisappear(animated)
 self.captureSession.stopRunning()
 }
 
 override func viewDidAppear(_ animated: Bool) {
 setCaptureSession()
 }
}
// MARK: Extension
extension TimeStampVC {
 
// MARK: Function
 
 func setupLivePreview() {
 videoPreviewLayer = AVCaptureVideoPreviewLayer(session: captureSession)
 // captureSession를 사용해 캡쳐한 비디오를 표시해줌
 
 videoPreviewLayer.videoGravity = .resizeAspectFill
 // videoGravity: 콘텐츠를 표시하는 방법 -> resizeAspectFill: 비율을 유지하면서 채우기
 videoPreviewLayer.connection?.videoOrientation = .portrait
 // portrait - 세로, landscape - 가로모드
 cameraView.layer.addSublayer(videoPreviewLayer)
 // cameraView의 위치에 videoPreviewLayer를 띄움
 }
 
 func setCaptureSession() {
 captureSession = AVCaptureSession()
 captureSession.sessionPreset = .high
 // 캡쳐 화질은 high로 설정
 
 // default video 장치를 찾는다
 guard let backCamera = AVCaptureDevice.default(for: AVMediaType.video)
 else {
 print("Unable to access back camera!")
 return
 }
 do {
 // 찾은 video 장치를 캡쳐 장치에 넣음
 let input = try AVCaptureDeviceInput(device: backCamera)
 stillImageOutput = AVCapturePhotoOutput()
 // 주어진 세션을 캡쳐에 사용할 수 있는지 + 세션에 추가할 수 있는지 먼저 파악한다
 if captureSession.canAddInput(input) && captureSession.canAddOutput(stillImageOutput) {
 // 주어진 입력을 추가한다
 captureSession.addInput(input)
 // 주어진 출력 추가
 captureSession.addOutput(stillImageOutput)
 setupLivePreview()
 }
 }
 catch let error {
 print(error.localizedDescription)
 }
 
 // startRunning는 시간이 걸릴 수 있는 호출이므로 main queue가 방해되지 않게 serial queue에서 실행해준다
 DispatchQueue.global(qos: .userInitiated).async {
 // 세션 실행 시작
 self.captureSession.startRunning()
 // 콜백 클로저를 통해 세션실행이 시작하는 작업이 끝난다면
 // cameraView에 AVCaptureVideoPreviewLayer를 띄우게 만든다
 DispatchQueue.main.async {
 self.videoPreviewLayer.frame = self.cameraView.bounds
 }
 }
 }
}

// MARK: IBAction
 
 @IBAction func shootingButtonDidTap(_ sender: Any) {
 // 카메라 촬영 버튼 클릭 시 Action
 
 let settings = AVCapturePhotoSettings(format: [AVVideoCodecKey: AVVideoCodecType.jpeg])
 // jpeg 파일 형식으로 format
 stillImageOutput.capturePhoto(with: settings, delegate: self)
 // AVCapturePhotoCaptureDelegate 위임
 }
extension TimeStampVC: AVCapturePhotoCaptureDelegate {
 func photoOutput(_ output: AVCapturePhotoOutput, didFinishProcessingPhoto photo: AVCapturePhoto, error: Error?) {
 
 guard let imageData = photo.fileDataRepresentation()
 else { return }
 
 let image = UIImage(data: imageData)
 timeStampImage = image?.cropToBounds(width: Double(cameraView.layer.frame.width), height: Double(cameraView.layer.frame.width))
 // cropToBounds 라는 Extesnion을 통해 정방형 크기로 크롭해주었다.
 
 guard let checkVC = self.storyboard?.instantiateViewController(identifier: "PhotoCheckVC") as? PhotoCheckVC else {
 return
 }
 
 // 다음 뷰로 이미지를 넘겨주었다.
 checkVC.photoImage = timeStampImage
 
 
 self.navigationController?.pushViewController(checkVC, animated: true)
 }
}

import UIKit
extension UIImage {
 func cropToBounds(width: Double, height: Double) -> UIImage {
 // 이미지를 원하는 크기로 잘라줍니다
 let cgimage = self.cgImage!
 let contextImage: UIImage = UIImage(cgImage: cgimage)
 let contextSize: CGSize = contextImage.size
 var posX: CGFloat = 0.0
 var posY: CGFloat = 0.0
 var cgwidth: CGFloat = CGFloat(width)
 var cgheight: CGFloat = CGFloat(height)
 // width와 height 중 더 큰 길이를 중심으로 자른다.
 if contextSize.width > contextSize.height {
 posX = ((contextSize.width - contextSize.height) / 2)
 posY = 0
 cgwidth = contextSize.height
 cgheight = contextSize.height
 } else {
 posX = 0
 posY = ((contextSize.height - contextSize.width) / 2)
 cgwidth = contextSize.width
 cgheight = contextSize.width
 }
 let rect: CGRect = CGRect(x: posX, y: posY, width: cgwidth, height: cgheight)
 // rect를 이용해서 bitmap 이미지를 생성한다.
 let imageRef: CGImage = cgimage.cropping(to: rect)!
 // imageRef 이미지를 기반으로 새 이미지를 만든 후, 원래 방향으로 다시 돌려준다.
 let image: UIImage = UIImage(cgImage: imageRef, scale: self.scale, orientation: self.imageOrientation)
 return image
 }
}

Timer.scheduledTimer(timeInterval: 1.0, target: self, selector: #selector(nowTimeLabel), userInfo: nil, repeats: true)
@objc func nowTimeLabel() {
 // 현재 시간을 기반으로 time과 날짜를 label에 넣어줌
		stampTimeLabel.text = Date().datePickerToString().recordTime()
		stampDateLabel.text = Date().datePickerToString().recordDate() + " (\(Date().weekDay()))"
}

3. CollectionView Animation

let customLayout = AnimationFlowLayout()
missonCardCollectionView.collectionViewLayout = customLayout
// 원하는 CollectionView에 선언해서 사용합니다. 

import UIKit
class AnimationFlowLayout: UICollectionViewFlowLayout {
 // 셀이 열의 흐름(세로, 가로)에 따라 이동 할 때 보여지는 것을 담당한다
 
 // MARK: Variable Part
 
 private var firstTime: Bool = false
 // 초기 한번만 설정되기 위해 변수를 선언
 
 override func prepare() {
 super.prepare()
 guard !firstTime else { return }
 
 guard let collectionView = self.collectionView else {
 return
 }
 
 let collectionViewSize = collectionView.bounds
 itemSize = CGSize(width: collectionViewSize.width-50*2, height: 100)
 // itemSize - 셀의 기본 크기
 
 let xInset = (collectionViewSize.width-itemSize.width) / 2 - 50
 self.sectionInset = UIEdgeInsets(top: 0, left: xInset, bottom: 0, right: xInset)
 // sectionInset - 섹션간의 여백
 
 scrollDirection = .horizontal
 // 가로 스크롤에 사용할 것이라는 걸 알려준다
 
 minimumLineSpacing = 10 - (itemSize.width - itemSize.width*0.7)/2
 // minimumLineSpacing - 행 사이에 사용할 최소 간격
 // 셀이 작아지면 더 멀리 있게 보이기 때문에 붙여주기 위해서 사용
 
 firstTime = true
 // 한번 설정을 했으면 다시 선언되지 않기 위해 바꿔준다
 }
 
 override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
 // 레이아웃 변경이 필요한지 묻는 함수
 return true
 }
 
}

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
 // 레이아웃 요소를 가져와서 조정하는 함수
 let superAttributes = super.layoutAttributesForElements(in: rect)
 
 superAttributes?.forEach { attributes in
 guard let collectionView = self.collectionView else { return }
 
 let collectionViewCenter = collectionView.frame.size.width / 2
 // collectionVIewCenter - 컬렉션 뷰의 중앙값으로 변하지 않는 고정 값
 let offsetX = collectionView.contentOffset.x
 // offsetX - 사용자가 스크롤할 때 기준점으로부터 이동한 거리(x축)
 let center = attributes.center.x - offsetX
 // center - 각 셀들의 중앙값
 // 기본 center값은 처음에 collectionView가 로드될 때 값이므로 여기서 offsetX 빼줘서 동적으로 계산한다
 
 let maxDistance = self.itemSize.width + self.minimumLineSpacing
 // maxDistance - 아이템 중앙과 아이템 중앙 사이의 거리
 let dis = min(abs(collectionViewCenter-center), maxDistance)
 // 현재 CollectionView의 가운데에서 cell의 가운데 값을 빼서 가운데 0을 기준으로 1까지 계산하기 위해 계산하는 값
 
 let ratio = (maxDistance - dis)/maxDistance
 // 비율을 구해서 애니메이션을 주기 위한 값
 let scale = ratio * (1-0.7) + 0.7
 
 attributes.transform = CGAffineTransform(scaleX: scale, y: scale)
 // scale에서 identify로 커지는 애니메이션을 준다
 }
 
 return superAttributes
 }

👀 민승

1. Login Animation 구현

👀 세은

1. UIRefreshControl

lazy var refreshControl: UIRefreshControl = {
 // Add the refresh control to your UIScrollView object.
 let refreshControl = UIRefreshControl()
 refreshControl.addTarget(self, action: #selector(handleRefresh(_:)), for: UIControl.Event.valueChanged)
 refreshControl.tintColor = UIColor.meaningNavy
 
 return refreshControl
 }()

groupTableView.addSubview(self.refreshControl)

//새로고침 함수
@objc func handleRefresh(_ refreshControl: UIRefreshControl) {
	//새로고침 시 갱신되어야 할 내용
 groupList(token: UserDefaults.standard.string(forKey: "accesstoken")!)
 checkMyGroup(UserDefaults.standard.string(forKey: "accesstoken")!)
 //당겨서 새로고침 종료
 refreshControl.endRefreshing()
 }

2. Custom TabBar

 var cameraButton: UIButton = {
	//버튼의 객체 생성
 let button = UIButton()
	//버튼에 이미지를 넣어줍니다.
 button.setBackgroundImage(UIImage(named:"navItemCamera"), for: .normal)
	//생성한 버튼의 이벤트를 지정해줍니다.
 button.addTarget(self, action: #selector(TabBarVC.buttonClicked(sender:)), for: .touchUpInside)
 return button
 }()

func setTabBar() {
 //탭바 설정
 let homeStoryboard = UIStoryboard.init(name: "Home", bundle: nil)
 
 guard let homeVC = homeStoryboard.instantiateViewController(identifier: "HomeNavigationController") as? HomeNavigationController else {
 return
 }
 
 let groupStoryboard = UIStoryboard.init(name: "GroupList", bundle: nil)
 guard let groupVC = groupStoryboard.instantiateViewController(identifier: "GroupListNavigationController") as? GroupListNavigationController else {
 return
 }
 //탭바 아이템 이미지 인셋 조정
 homeVC.tabBarItem.imageInsets = UIEdgeInsets(top: 0, left: -20, bottom: -5, right: 0)
 homeVC.tabBarItem.image = UIImage(named: "tabBarHomeIcInactive")
 homeVC.tabBarItem.selectedImage = UIImage(named: "tabBarHomeIcActive")
 homeVC.title = ""
 
 groupVC.tabBarItem.imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: -5, right: -20)
 groupVC.tabBarItem.image = UIImage(named: "tabBarGroupIcInactive")
 groupVC.tabBarItem.selectedImage = UIImage(named: "tabBarGroupIcActive")
 groupVC.title = ""
 
 setViewControllers([homeVC, groupVC], animated: true)
}

func setTabBar() {
	//카메라 버튼의 크기와 위치를 선정해줍니다.
 let width: CGFloat = 70/375 * self.view.frame.width
 let height: CGFloat = 70/375 * self.view.frame.width
 
 let posX: CGFloat = self.view.frame.width/2 - width/2
 let posY: CGFloat = -32
 
 cameraButton.frame = CGRect(x: posX, y: posY, width: width, height: height)
 
	//만들어준 카메라 버튼을 탭바에 추가해줍니다.
 tabBar.addSubview(self.cameraButton)
}
				

📚 Meaning Extension

1. Toast Alert Extension

// MARK: Toast Alert Extension
 // 사용법: showToast(message : "원하는 메세지 내용", font: UIFont.spoqaRegular(size: 15), width: 188, bottomY: 181)
 
 func showToast(message : String, font: UIFont, width: Int, bottomY: Int) {
 let guide = view.safeAreaInsets.bottom
 let y = self.view.frame.size.height-guide
 
	//토스트 라벨의 크기와 위치를 선정해줍니다.
 let toastLabel = UILabel(
 frame: CGRect( x: self.view.frame.size.width/2 - CGFloat(width)/2,
 y: y-CGFloat(bottomY),
 width: CGFloat(width),
 height: 30
 )
 )
 
 toastLabel.backgroundColor = UIColor.gray4
 toastLabel.textColor = UIColor.gray6
 toastLabel.font = font
 toastLabel.textAlignment = .center
 toastLabel.text = message
 toastLabel.alpha = 1.0
 toastLabel.layer.cornerRadius = 6
 toastLabel.clipsToBounds = true
	//뷰에 토스트 라벨을 추가시켜줍니다.
 self.view.addSubview(toastLabel)
	//애니메이션을 설정해줍니다.
 UIView.animate(withDuration: 3.0, delay: 0.1, options: .curveEaseOut, animations: {
 toastLabel.alpha = 0.0
 }, completion: {(isCompleted) in
 toastLabel.removeFromSuperview()
 })
 }

2. timeAgoSince Extension

var createTime = "2021年01月13日 14:00:00"
createTime.StringToDate().timeAgoSince()
// 1. createTime을 StringToDate를 통해 String타입에서 Date 타입으로 바꿔줌
// 2. timeAgoSince를 통해 이 시간이 현재 시간을 기준으로 얼마전인지 구해주기

func components(_ unitFlags: NSCalendar.Unit, 
 from startingDateComp: DateComponents, 
 to resultDateComp: DateComponents, 
 options: NSCalendar.Options = []) -> DateComponents

func timeAgoSince() -> String {
		 //유저의 캘린더에서 현재시점을 가져옵니다.
 let calendar = Calendar.current
						//date를 string으로 바꾸고, string타입을 date타입으로 바꿔줍니다.
 let now = Date().datePickerToString().stringToDate()
						//연도, 월, 일 및 시간과 같은 달력 단위를 식별해서 넣어줍니다.
 let unitFlags: NSCalendar.Unit = [.second, .minute, .hour, .day, .weekOfYear, .month, .year]
						
						//게시물 작성날짜와 현재 날짜의 차이를 날짜 구성 요소로 반환합니다.
 let components = (calendar as NSCalendar).components(unitFlags, from: self, to: now, options: [])
 if let year = components.year, year >= 1 {
 return "\(year)년 전"
 }
 
 if let month = components.month, month >= 1 {
 return "\(month)달 전"
 }
 
 if let week = components.weekOfYear, week >= 1 {
 return "\(week)주 전"
 }
 
 if let day = components.day, day >= 1 {
 return "\(day)일 전"
 }
 
 if let hour = components.hour, hour >= 1 {
 return "\(hour)시간 전"
 }
 
 if let minute = components.minute, minute >= 1 {
 return "\(minute)분 전"
 }
 
 if let second = components.second, second >= 3 {
 return "\(second)초 전"
 }
 
 return "지금"
 }

👉 About Us