모달
처음에는 모달을 어떻게 띄울지 막막했다.
하지만 해서 안되는건 없었다!!
조금 시간이 걸리긴 했지만 결국 모달을 완성했다.
여기에 useModal 훅을 만드는 과정을 적어놨다.
여러가지 방법중 외부에 포탈을 만들어 모달을 렌더링하는 방법을 사용했다.
그런데 애니메이션이 없으니 밋밋하고, useModal 사용방법이 까다로웠다.
그래서 useModal훅의 더 간단하게 리팩토링하고 애니메이션도 추가할 수 있게 만들었다.
여기서 그 과정을 볼 수 있는데 과연 보는사람이 있을지 궁금하다.
또 서론이 너무 길어지는것같아 여기까지만 하겠다.
이번 프로젝트에서 모달이 꽤 자주쓰인다. 정확한 명칭이 모달인지 모르겠으나
아래처럼 뜨는 창이 중복으로 최대 3개까지 겹쳐진다.
이제 모달은 완벽하게 만들었다.
모달이 열리면 해당하는 년도, 월로 이동까지 자동으로 된다.
사실 날짜를 선택하는 컴포넌트를 만들기 위해 모달부터 만들었다.
날짜를 선택하는 컴포넌트는 4개 페이지중에 3개 페이지에서 쓰이는 중요한 컴포넌트기 떄문이다.
이번 프로젝트도 상태관리를 redux-toolkit을 사용했는데 다음 프로젝트는
recoil이나 react-query같은 상태관리툴을 써보고싶다.
날짜 선택
우선 완성된걸 보면 아래와같다.
모달에서 선택을 하거나 양쪽 버튼으로 선택을 하면 store에 저장된 상태를 관리해줬다.
그러고 그 상태를 다시 불러와서 X월이라고 표시를 해줬다.
날짜를 언제부터 언제까지 보여줄지 꽤 고민을 했었다.
그중 가장 좋은 방법은 선택한 날짜, 제일 처음 쓰여진 가계부의 날짜 사이를 보여주는거였다.
그래서 redux로 이 둘을 관리해 주었다.
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
// 서버에서 불러올 년도, 월
export interface TLoadDate {
month: number;
year: number;
}
interface TAccountBook {
selectDate: TLoadDate; // 선택한 년, 월
firstDate: TLoadDate; // 가계부에 등록된 첫번쨰 영수증의 년, 월
}
const initialAccountBookState: TAccountBook = {
selectDate: {
month: 1,
year: 2022,
},
firstDate: {
month: 1,
year: 2020,
},
};
const accountBookSlice = createSlice({
name: 'accountBookSlice',
initialState: initialAccountBookState,
reducers: {
changeSelectDateOneMonthAction(
state: TAccountBook,
action: PayloadAction<1 | -1>,
) {
const sum = state.selectDate.month + action.payload;
if (sum === 13) {
state.selectDate.year += 1;
state.selectDate.month = 1;
} else if (sum === 0) {
state.selectDate.year -= 1;
state.selectDate.month = 12;
} else {
state.selectDate.month += action.payload;
}
},
// 서버에서 불러올 월년을 변경
changeSelectDateAction(
state: TAccountBook,
action: PayloadAction<TLoadDate>,
) {
state.selectDate = action.payload;
},
changeFirstDateAction(
state: TAccountBook,
action: PayloadAction<TLoadDate>,
) {
state.firstDate = action.payload;
},
},
});
export const {
changeSelectDateAction,
changeFirstDateAction,
changeSelectDateOneMonthAction,
} = accountBookSlice.actions;
export default accountBookSlice.reducer;redux에서 위처럼 년도 혹은 월을 변경할 수 있게 해줬다.
그래서 사용자가 선택을 하면 store의 상태가 변경되게 된다.
문제가 됐던곳
// modal.tsx
<Container>
<Header />
<Body />
</Container>//modal.style.ts
export const Container = styled.div``;
export const Header = styled.div``;
export const Body = styled.div``;이런식으로 사용하고 있다.
처음에는 Container에 overflow-y: auto속성을 줬더니 스크롤바가 Header까지 생겼다.
그래서 Body에만 위의 속성을 줬더니 아래부분이 조금 잘렸다.
거의 한시간 넘게 씨름하다가 생각난 방법은
Header의 height만큼 Body의 padding-bottom을 추가하는것이다.
이렇게해서 결국 해결하긴 했는데 더 좋은 방법이 있는지 찾아봐야겠다.
남은일
가계부앱이니 이제 가계부에서 가장 중요한 달력을 만들어야한다.
라이브러리 없이 만들 생각인데 어떻게 만들지 조금 생각을 해봐야겠다.
끗.
