[UI/YAF-82] 미션 메인 UI를 구현합니다.

[MoonsuKang]

Related issue 🛠

closed #51

어떤 변경사항이 있었나요?

• 🐞 BugFix Something isn't working
• 🎨 Design Markup & styling
• 📃 Docs Documentation writing and editing (README.md, etc.)
• ✨ Feature Feature
• 🔨 Refactor Code refactoring
• ⚙️ Setting Development environment setup
• ✅ Test Test related (Junit, etc.)

CheckPoint ✅

PR이 다음 요구 사항을 충족하는지 확인하세요.

• PR 컨벤션에 맞게 작성했습니다. (필수)
• merge할 브랜치의 위치를 확인해 주세요(main❌/develop⭕) (필수)
• Approve된 PR은 assigner가 머지하고, 수정 요청이 온 경우 수정 후 다시 push를 합니다. (필수)
• BugFix의 경우, 버그의 원인을 파악하였습니다. (선택)

Work Description ✏️

• 미션 메인 UI 구현
• enableEdgeToEdge 적용

Uncompleted Tasks 😅

• Task1

To Reviewers 📢

새벽 2시까지 짱구를 굴린 enableEdgeToEdge 구조를 일단 올렸습니다.
SystemUiController 이제 deprecated 됨

[DongChyeon]

어제 저희 능지 이슈가 있었습니다...!
실제로는 enableToEdge() 가 동작하는 상태였습니다.
다만, 동작하지 않는 것처럼 보이던 이유는

@Composable
fun OnboardingScreen(
    currentStep: Int,
    totalSteps: Int,
    isButtonEnabled: Boolean,
    onNextClick: () -> Unit,
    onBackClick: (() -> Unit)?,
    buttonLabel: String,
    showTopAppBar: Boolean = true,
    showTopAppBarActions: Boolean = true,
    content: @Composable () -> Unit,
) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(OrbitTheme.colors.gray_900)
            .statusBarsPadding()
            .navigationBarsPadding()
            .imePadding(),
    ) {
       // ...
    }
}

온보딩 화면을 보면은 statusBarsPadding(), navigationBarsPadding() 이 설정되어 있는 것을 알 수 있습니다

enableToEdge()를 통해서 FullScreen으로 만들어놓고, 다시 무마를 하고 있던 거였지요!!

[DongChyeon]

[p3]

Pixel 폰이 아닌 갤럭시일 경우, navigationBarsPadding() 추가 필요합니다.

Scaffold(
        modifier = modifier.fillMaxSize(),
        bottomBar = {
            OrbitBottomNavigationBar(
                visible = false,
                currentTab = navigator.currentTab,
                entries = TopLevelDestination.entries.toImmutableList(),
                onClickItem = navigator::navigateToTopLevelDestination,
            )
        },
        contentColor = OrbitTheme.colors.gray_900,
    ) {
        NavHost(
            navController = navigator.navController,
            startDestination = navigator.startDestination,
            modifier = Modifier
                .fillMaxSize()
                .navigationBarsPadding(),
        ) {
             // ...
        }
    }
}

[MoonsuKang]

navigationBarsPadding ->

디자인 상으로 시스템바 까지 screen 영역을 가지고 있어서 넣지 않았는데 혹시 그러면 screen단에서 전체화면의 비율로 bottom의 spacer를 처리했는데 이것도 수정을 할까요?

[DongChyeon]

넵넵!!

[DongChyeon]

고생하셨습니다