WITH TFT 프로젝트#6: 새로운 경험을 위한 UI 디자인과 기능 개선

WITH TFT 깃헙링크

어느정도 방향은 잡혀서 블로그 정리 하려고 합니다

컨셉은 Black & White 느낌으로 UI틀을 잡았고 그리고 게시글 작성을 기존 TextField로 하는게 아닌 버튼 식으로 잡아서 조금더 색다른 경험을 주려고 했다..

adove,figma,zeplin 디자이너가 그립습니다. 혼자 하려니 진짜 너어어어어무 힘드네 그래도 어찌어찌 게시글 틀은 완성했다아~

그래도 어떤식으로 이어갔는지 말해보자면

child: state.status == HomeCategory.wriTing
                      ? InkWell(
                          onTap: () {
                            context.read<HomeBloc>().add(const SelectedCategory(
                                category: HomeCategory.findTeam));
                          },
                          child: Center(
                              child: Text(
                            '글쓰기 닫기',
                            style: const TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.bold,
                              color: Colors.black,
                            ),
                          )),
                        )
                      : Row(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: [
                            categoryButton(
                              context,
                              '동료찾기',
                              const SelectedCategory(
                                  category: HomeCategory.findTeam),
                              state.status,
                            ),
                            categoryButton(
                              context,
                              '시너지',
                              const SelectedCategory(
                                  category: HomeCategory.synergyHelper),
                              state.status,
                            ),
                            categoryButton(
                              context,
                              '프로필',
                              const SelectedCategory(
                                  category: HomeCategory.profile),
                              state.status,
                            ),
                          ],
                        ),
                ),
              ),
              SizedBox(height: 20),
              if (state.status == HomeCategory.findTeam) const FindTeamView(),
              if (state.status == HomeCategory.synergyHelper)
                const SynergyHelperView(),
              if (state.status == HomeCategory.profile) const MyProfileView(),
              if (state.status == HomeCategory.wriTing) const WritingView(),
            ],
          ),

동료 구하기, 시너지 ,프로필, 글쓰기 모드 카테고리는 그대로고 밑에 content UI만 변하도록 코드를 작성했다

이부분에서 if 대신 switch 으로 대처 할 수 있지만 저는 가독성이 이런식으로 if처리하는게 더 좋다고 생각하여 if문 으로 작성

버튼이 많아서 widget으로 빼서 관리 해주려고 home 폴더 안에 widget을 빼서 관리해주고

그중 음 categoryButton만 보여드리자면

Widget categoryButton(BuildContext context, String category, HomeEvent event,
    HomeCategory currentStatus) {
  HomeCategory categoryEnum;
  switch (category) {
    case '동료찾기':
      categoryEnum = HomeCategory.findTeam;
      break;
    case '시너지':
      categoryEnum = HomeCategory.synergyHelper;
      break;
    case '프로필':
      categoryEnum = HomeCategory.profile;
      break;
    default:
      categoryEnum = HomeCategory.findTeam;
  }

  bool isSelected = categoryEnum == currentStatus;
  return GestureDetector(
    onTap: () {
      context.read<HomeBloc>().add(event);
    },
    child: Container(
      padding: EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        color: isSelected ? Colors.black : Colors.transparent,
        borderRadius: BorderRadius.all(
          Radius.circular(15.0),
        ),
      ),
      child: Text(
        category,
        style: TextStyle(
          fontWeight: FontWeight.bold,
          color: isSelected ? Colors.white : Colors.black,
        ),
      ),
    ),
  );
}

이런식으로 사용

			categoryButton(
                              context,
                              '동료찾기',
                              const SelectedCategory(
                                  category: HomeCategory.findTeam),
                              state.status,
                            ),

그래도 더 깔끔하고 좋은 방법을 계속 생각해 봤지만 계속 여기에 매달리다간 앞으로 못 나아갈꺼 같아서 이정도만 작성

정말 UI/UX 을 어떤식으로 나아가지 조금더 깔금하고 보기 좋은 코드는 어떻게 할까 고민을 하면서 하니까 진짜 시간이 너무 많이 들어가네요

조금더 고민했던 코드를 보여 드리고 싶지만 막상 작성하려고 하니 생각이 안나네요ㅠㅠ
이 다음번은 시너지 카테고리 프로필 카테고리를 UI를 그려야 하지만 백엔드 코드를 한번 잡아보고 싶어서 이 다음은 node.js,mongdb,express 이용해서 벡엔드 코드를 공부하면서 작업하려고 합니다 시작도 안했는데 너무 무섭네용

저는 집 요정이기 때문에 밖을 잘 안나가서 몰랐지만 누나가 춥다고 나가지 말라고 해서 추우면 얼마나 춥다고 하면서 카페로 나왔는데 진짜 춥네요. 감기 조심해야겠네요.. 주절주절 마무리 하겠습니다,!