습관에 요일을 붙였습니다

Fecit에는 습관 기능이 있습니다. 매일 반복할 일을 타임라인에 등록해 두면, 매일 아침 자동으로 할 일이 생성됩니다. 기상, 운동, 독서 같은 것들이요.

그런데 매일 같은 루틴만 반복하는 사람은 별로 없더라고요. 월수금에는 운동을 하고, 화목에는 영어 공부를 하고, 토요일에는 청소를 합니다. 요일별로 다른 루틴이 필요했습니다.

Daily와 Weekly

기존의 습관은 Daily였습니다. 매일 같은 시간에 같은 일을 반복합니다. 여기에 Weekly를 추가했습니다. 요일을 지정해서, 그 요일에만 반복되는 루틴입니다.

화면 상단에 Daily / Weekly 탭을 넣었습니다. 처음에는 모달로 만들었는데, 눌러서 선택하고 닫는 과정이 번거롭더라고요. 그냥 탭으로 바꿨습니다. 한 번의 탭이면 충분한 걸 두 번의 탭으로 만들 이유가 없으니까요.

요일 탭

Weekly를 선택하면 요일 탭이 나타납니다. ALL, 월, 화, 수, 목, 금, 토, 일. 요일을 누르면 그 요일의 타임라인만 보입니다.

단일 요일 뷰는 Daily와 거의 같습니다. 24시간 타임라인에 블록이 놓여 있고, 롱프레스로 새 루틴을 만들고, 드래그로 시간을 옮기고, 가장자리를 잡아서 늘리거나 줄입니다. 다른 점은 여기서 만든 루틴에 요일이 자동으로 붙는다는 것뿐입니다.

전체 보기

ALL 탭을 누르면 한 주 전체가 한 화면에 나옵니다. 7개의 요일이 컬럼으로 나란히 서 있고, 각 컬럼에 그 요일의 루틴이 블록으로 표시됩니다.

좁은 화면에 7개의 컬럼을 넣으니 블록이 작아질 수밖에 없습니다. 별 아이콘과 시간 텍스트를 숨기고, 제목만 작은 글씨로 남겼습니다. 좁아도 “이 시간대에 뭐가 있구나” 정도는 알 수 있어야 하니까요.

드래그로 요일 변경

ALL 뷰에서 블록을 가로로 드래그하면 다른 요일로 옮길 수 있습니다. 수요일의 운동을 목요일로 끌어다 놓으면 목요일 루틴이 됩니다.

세로 드래그는 시간 변경이고, 가로 드래그는 요일 변경입니다. 동시에 둘 다 됩니다. 대각선으로 끌면 시간도 바뀌고 요일도 바뀝니다.

기존 타임라인 블록 컴포넌트에 가로 드래그 기능을 추가했습니다. enableHorizontalDrag 플래그로 제어하는데, 켜져 있으면 X축 이동도 추적합니다. 드래그가 끝나면 X 이동 거리를 컬럼 너비로 나눠서 몇 칸 이동했는지 계산합니다.

Daily 루틴이 배경에 보입니다

주간 습관에서는 Daily 루틴이 반투명한 배경으로 깔립니다. 매일 반복되는 기본 루틴이 어디에 있는지 보이면서, 그 위에 요일별 루틴을 배치할 수 있습니다.

배경은 터치를 먹으면 안 됩니다. 배경 블록 위에서 롱프레스해도 새 루틴을 만들 수 있어야 하니까요. pointerEvents="none"으로 터치 이벤트가 배경을 관통하게 했습니다. 작은 설정이지만 빠지면 불편합니다.

삽질들

처음에 요일 정보를 전달하는 데서 꽤 헤맸습니다. 롱프레스로 새 루틴을 만들 때, 어떤 요일을 눌렀는지 등록 화면에 알려줘야 합니다.

Jotai atom으로 전달하려고 했는데, 등록 화면에서 값이 안 읽혔습니다. route params도 안 됐습니다. 결국 atom을 직접 API 호출 시점에 읽는 방식으로 해결했습니다. 원인을 정확히 파악하지 못한 채 우회한 부분이라 찝찝하지만, 동작은 합니다.

서버 쪽도 손을 봐야 했습니다. 처음에 day 필드가 배열(list[int])로 정의되어 있었는데, DB 모델은 단일 enum을 기대하고 있었습니다. 등록 API에서 422 에러가 나서 한참 헤맸는데, 타입 불일치가 원인이었습니다. 서버와 클라이언트 양쪽의 day 필드를 단일 값으로 통일하고 나서야 해결됐습니다.

이름도 바꿨습니다

“하루습관”이라는 이름이 Daily에만 맞는 이름이 되어버렸습니다. Weekly가 생겼으니 그냥 “습관”으로 바꿨습니다. 영어도 “Daily Routine”에서 “Routine”으로요. 범위가 넓어졌으니 이름도 넓어져야 합니다.

다음은

습관은 결국 시간표입니다. 언제 무엇을 할 것인가. Daily는 매일의 시간표이고, Weekly는 한 주의 시간표입니다.

다음에는 습관의 달성률을 추적하는 기능을 고민하고 있습니다. 등록만 하고 안 하면 의미가 없으니까요. 오늘 몇 개를 했고, 이번 주에 몇 개를 했는지. 그 숫자가 쌓이면 습관이 됩니다.