12/27 TIL | 쉼표 작업 일지 #12. 심기일전✊

🔙 이전 시리즈

12/23 TIL | 쉼표 작업 일지 #11. 일단은 동작하게 만들기!

---

작업 회고

좌) 웹 / 우) 모바일

1. 하단 내비게이션 바(BottomNav)

메인 페이지와 프로그램 페이지 하단에 계속 존재할 하단 내비게이션 바를 마크업하고 스타일링하였다. 해당 페이지에서는 아이콘과 글씨의 색이 쉼표의 시그니처 색상으로 active된다. 기존 디자인에서는 원래 '예약'이 아니라 '스토리'라는 메뉴가 존재했는데, MVP 구현 범위 내에서는 스토리 기능은 제외되기도 했고, 쉼표 어플에서 가장 중요한 기능은 프로그램 예약이다 보니 내 예약 현황을 바로 확인할 수 있게 메뉴를 수정하였다.

2. Layout 재사용성 있게 만들기

처음에 만들었던 Layout은 이렇게 children을 받아서 보여주는 형식이었고, Layout의 스타일링을 모바일 화면으로만 되어있게끔 만들었었다. 페이지마다 헤더가 있는 경우, 하단 내비게이션이 있는 경우가 매번 다르기 때문에 Header가 필요한 경우에는 해당 페이지에서만 Header를 넣어서 Layout의 children으로 만들어주고, BottomNav도 그렇게 만들어주고 이런 형식이었는데,

// Layout.jsx
export default function Layout({ children }) {
  return (
    <Container>
      <Wrapper>
        {children}
      </Wrapper>
    </Container>
  );
}

// 사용하는 쪽 HomePage.jsx
import Layout from '../../layouts/Layout';

export default function HomePage() {
  return (
    <Layout>
      {/* 컴포넌트들.. */}
    </Layout>
  );
}

금요일 홀맨님의 팁을 듣고, 고친 Layout은 header와 bottomNav를 props로 넘겨주는 경우 출력, 아닌 경우에는 보이지 않게 처리를 하였다! 훨씬 높아진 재사용성!

export default function Layout({ children, header, bottomNav }) {
  return (
    <Container>
      <Wrapper>
        {header && <Header />}
        {children}
        {bottomNav && <BottomNav />}
      </Wrapper>
    </Container>
  );
}

3. 2주차 스프린트 촘촘하게 재작성

감기에 걸려..🤧 지난 3일 간 작업을 아예 진행하지 못하는 바람에 지난주 스프린트를 고대로 이번 주 스프린트에 가져오게 되었다..😅 어제 작성한 주간 회고에서도 언급했지만, 1주차 스프린트의 세부 태스크 중 '프론트 로직 구현'과 같은 모호한 작업 목록 전면 수정해서 보다 더 상세하게 작성하였다.

작업하면서도 계속 '이거는 서버를 어떻게 구현하지?' 등의 생각들로 안 그래도 느린 속도가 더 느려지는 상황이 많이 있었는데, 홀맨님이 그러지 말고 우선 프론트를 목데이터로 후딱 완성하고, 그에 필요한 내용들을 어느 정도 눈에 보이게끔 구체화한 후에 백엔드 작업을 시작하라는 팁을 주셨다.

그래서 이번 주 스프린트의 진짜 진짜 최소한의 목표(이건 무조건 완성해야 함)는 카테고리 페이지와 프로그램 상세 페이지 마크업으로 잡았고, 빨리빨리 움직여서 목요일까지 프론트 완성하고, 금요일부터 주말까지는 백엔드 작업을 해야겠다는 데일리 목표치도 어느 정도 가닥이 잡혔다.

2주차 스프린트