[Feat] 호흡 세션 뷰 구현

🔥 작업한 내용

BreathingIntroView에 fade-in 애니메이션 추가:
- VStack 전체에 opacity를 적용하여, 뷰가 처음 나타날 때 부드럽게 fade-in 애니메이션을 실행하도록 설정
- onAppear에서 1초 동안 애니메이션 후 자동으로 BreathingMainView로 라우팅
BreathingOutroView에서 페이드 아웃 후 MainView로 라우팅:
- BreathingOutroView가 1초 후 점차 사라지면서 MainView로 돌아가도록 설정
- 라우터를 통해 BreathingOutroView에서 MainView로의 원활한 전환을 구현
타이머 기반 호흡 세션 구현:
- 타이머를 사용하여 호흡 세션에 맞춰 각 단계별로 호흡을 안내하는 동작을 추가
- 각 호흡 단계에 맞춰 동그라미 색상 변화: 첫 번째 숨을 들이마시면 첫 번째 동그라미가 검정색, 두 번째 숨을 들이마시면 두 번째 동그라미가 검정색 등
- 호흡 세션 종료 후 자동으로 BreathingOutroView로 전환되도록 설정

⭐️ PR Point

타이머와 호흡 세션 관리: 타이머 기반으로 동작을 정확하게 구현했는지, 또는 더 나은 방법이 있을지 피드백을 받고 싶습니다.
애니메이션 최적화: fade-in 애니메이션의 뷰 분리가 필요한지 궁금합니다.
현재 호흡 세션 시작은 MainView에서 IntroView overlay fade-in을 통해 이루어지고, 종료는 호흡 세션 종료 후 OutroView 이동 이후 MainView overlay fade-out 단계로 진행됩니다.
뷰 분리 없이 MainView 내에서 IntroView overlay 방식이 아닌, 뷰 분리를 통해 뷰 자체의 opacity를 조절하여 overlay fade-in을 구현할 수 있는지에 대한 피드백을 부탁드립니다!

🔧 TODO

호흡 세션 상태 관리: 타이머와 호흡 세션을 관리할 BreathingSessionManager 클래스를 구현하여 호흡 단계 및 타이머를 관리할 수 있도록 해야 합니다. 앞으로의 watch 구현 및 모듈화를 위해 호흡 타이머와 각 단계를 관리하는 클래스가 필요합니다.
타이머와 호흡 단계가 정확히 맞춰져야 하며, 애니메이션이 원활하게 진행되는지 확인 중입니다.
호흡이 끝난 후 BreathingOutroView로의 전환이 자연스러운지 추가 테스트가 필요합니다.

🗺️ 라우터 매니저 쉽게 쓰기!

1. `SphaView` Enum에 뷰 추가하기

SphaView는 앱 내에서 사용할 뷰를 정의. 원하는 뷰를 추가한 후, view(for:) 메서드에서 해당 뷰를 처리하는 로직을 작성해야 합니다.

예를 들어, ExampleView를 추가하고 싶다면, 아래와 같이 SphaView와 view(for:) 메서드를 수정합니다:


enum SphaView: Hashable {
  case mainView
  case breathingIntroView
  case breathingMainView
  case exampleView // 새로운 뷰 추가
}

@ViewBuilder func view(for route: SphaView) -> some View {
  switch route {
  case .mainView:
      MainView()
  case .breathingIntroView:
      BreathingIntroView()
  case .breathingMainView:
      BreathingMainView()
  case .exampleView: // 추가된 뷰 처리
      ExampleView()
  }
}

2. 뷰 전환 트리거

뷰 전환은 RouterManager 클래스에서 제공하는 push(view:) 메서드를 사용하여 처리합니다. 이 메서드는 주어진 뷰를 네비게이션 스택에 추가하여 해당 뷰로 화면을 전환시킵니다.

뷰 전환 트리거를 통해 뷰가 전환되도록 할 수 있습니다.

예시) 버튼을 클릭하여 ExampleView 로 전환

Button("Start Breathing Example") {
    router.push(view: .exampleView) // 버튼 클릭 시 ExampleView로 전환
}

3. backToMain

backToMain() 메서드는 RouterManager에서 모든 뷰를 초기화하고, mainView로 돌아가는 함수입니다. 이 메서드를 호출하면, 현재 뷰를 모두 팝한 후 메인 화면으로 돌아갑니다. 예시) 1초 뒤 MainView 로 전환 DispatchQueue.main.asyncAfter(deadline: .now() + 1) { router.backToMain() }

push(view:): 주어진 뷰를 네비게이션 스택에 추가하고 화면에 전환하기
pop(): 현재 화면을 스택에서 제거하고 이전 화면으로 돌아가기
backToMain(): 모든 뷰를 초기화하고 메인 화면으로 돌아가기

📸 스크린샷

	iOS 호흡 인트로 페이드인 효과	iOS 호흡 타이머 및 카운팅 구현 및 페이드 아웃
commit id	0c5ab69	77e5a08, 0962147, 2821c4d
이미지

🚨 관련 이슈

Resolved: #6

DeveloperAcademy-POSTECH / 2024-MacC-A7-92NMS