Main Project ~ 05/07

코드스테이츠 부트캠프

Main Project ~ 05/07

als982001 2023. 5. 4. 09:52

1. 프로젝트 목표

이번 프로젝트는 저번 프리프로젝트와는 다르게 정해진 주제가 없다. 그렇기에 팀원들과의 조율을 통해 적절한 주제를 선정해야 한다. 처음 우리 팀의 목표는 이커머스 서비스였다. 그리고 단순한 '이커머스 서비스'는 너무 두루뭉실한 주제이기에 명확한 목표를 선정해야 했다. 그리고 팀원들과의 회의를 통해, 우리 팀의 목표는 '에어캠프(Aircamp)'라는 이름의, '캠핑공간을 중심으로, 판매자는 공간을 등록하고 구매자는 해당 공간을 예약하고 결제할 수 있는 웹 서비스'로 선정하였다. 우선, 캠핑공간을 대여하는 서비스를 개발한 후, 시간적 여유가 된다면 운동장 등, 다른 공간도 대여할 수 있게 할 것이다.

2. 사용자 요구사항 정의서

본격적인 개발을 시작하기 전, 무슨 기능들이 필요할지 미리 정해야 개발이 수월해진다. 그렇기에 사용자 요구사항 정의서를 작성해야 했다. 다음은 우리 팀이 작성한 사용자 요구사항 정의서이다.

3. 화면 정의서

또한 본격적인 개발을 시작하기 전, 유저 플로우와 화면 정의서를 작성할 필요가 있다. 그런데 본인을 포함한 프론트엔드 팀원 중, 다자인을 할 수 있는 사람이 없기에 화면 정의서에서 필요한 화면은 본 팀이 참고할 사이트인 서울특별시 공공서비스 예약 서비스를 캡쳐하여 이용하였다.

3-1. User Flow

3-2. 화면 정의서

3-3. 피그마

피그마를 이용해 대략적인 구성을 해 보았다. 이 때까지 디자인이 명확히 정해지지 않았기에 컴포넌트들의 대략적인 위치 위주로 구성되어 있다. 최하단의 링크를 통해, 각 항목들을 자세히 볼 수 있다.

4. 페이지 디자인 진행 상황

4-1. Main (~/)

이 페이지는 메인화면으로, 상품으로 등록된 캠핑장들을 보여준다. 아직 최종 완성본도 아니고, 실제 데이터도 아니기에 디자인은 수정될 수 있으나, 현재와 같은 느낌으로 갈 예정이다. 이런 디자인을 위해 팀원들끼리 회의를 진행했었다. 그리고 회의를 통해 두 가지를 결정했다. 우선은 헤더이다. 헤더는 간단하고 깔끔한 디자인을 참고하였다. 그리고 각 캠핑장을 보여줄 카드 역시 css 템플릿을 모아둔 사이트를 참고하였다. 이 때, 헤더와 카드 코드를 작성할 때 그대로 배끼는 것을 지양하고 최대한 이해한 후 작성하려 노력했다.

4-2. Login (~/login)

로그인과 회원가입 페이지 역시 템플릿을 참고하였다. 많은 곳에서 디자인을 참고하였는데, 이는 팀에서 디자이너 역할을 맡아줄 정도로 디자인에 자신있는 사람도 없거니와 이미 성공한 디자인을 따라 하는 것이 더 안정적이라 생각했기 때문이다.

5. 기능 진행 상황

5-1. 다크모드

왼쪽 아래에 토글 버튼이 하나 있는데, 이 버튼을 누르는 것으로 다크 모드, 라이트 모드 전환이 가능하다. 다크 모드의 상태는 props를 이용하여 전달할 수 있다. 하지만 이럴 경우에는 코드가 너무 지저분해질 가능성이 있기에 redux를 이용하였다. Redux를 통해 현재 모드를 저장한 후, 모드 상태를 알아야 할 곳에서 useSelector를 이용하여 확인할 수 있다. 아래는 다크 모드 관련된 코드들이다.

// 1. 다크 모드 Reducer
const modeReducer = (state = false, action) => {
  switch (action.type) {
    case DARK:
      return true;
    case LIGHT:
      return false;
    case MODE:
      return action.payload.mode;
    default:
      return state;
  }
};

// 2. useSelector, useDispatch를 이용한 모드 확인과 변경
const isDark = useSelector((state) => state.modeReducer);
const dispatch = useDispatch();

const handleModeChange = () => {
	dispatch(handleMode(!isDark));
};

5-2. 로그인/로그아웃 상태 저장

로그인 상태에 따라 헤더의 오른쪽 위와 헤더 가운데의 메뉴 버튼들이 바뀐다. 로그인/로그아웃 상태와 유저 정보 역서 redux를 이용하여 전역적으로 관리한다. 아직 API 명세서가 완성되지 않았기에 정확한 로그인/로그아웃은 구현하지 않았고, ID가 "aaa", 비밀번호가 "111"일 경우에만 로그인이 되도록 임시적으로 처리하였다. 그런데 그냥 redux만 이용할 경우, 새로고침을 하거나 끄고 다시 키는 경우에는 저장되어 있던 state가 날아가버린다. 그렇기에 redux-persist를 이용하여 local storage에 state를 저장할 수 있고, 유저 정보가 사라지지 않게 되었다. 이 관련 코드는 다음과 같다.

// 1. 유저 Reducer
const userReducer = (state = { login: false, userInfo: null }, action) => {
  switch (action.type) {
    case LOGIN:
      return { login: true, userInfo: action.payload.userInfo };
    case LOGOUT:
      return { login: false, userInfo: null };
    default:
      return state;
  }
};

// 2. react-persist 이용
const persistConfig = {
  key: "root", // localStorage key
  storage, // localStorage
  whitelist: ["userReducer", "modeReducer"], // target (reducer name)
};
const rootReducer = combineReducers({ userReducer, modeReducer });
export default persistReducer(persistConfig, rootReducer);

// 3. store와 persistor
export const store = createStore(rootReducer);
export const persistor = persistStore(store);

6. 추후 계획

5월 2일 화요일, 멘토링 시간을 가졌었다. 이 때, 로그인 기능을 우선적으로 완성해보라고 멘토분이 말씀하셨다. 그렇기에 로그인 기능 구현을 최우선으로 생각하고 있다. 이 외에는 5월 8일 팀원간의 회의를 통해 정확히 결정할 것이다.

참고 사이트

- 서울특별시 공공서비스 예약

https://yeyak.seoul.go.kr/web/search/selectPageListDetailSearchImg.do?code=T500&dCode=T502

- 헤더 참고

https://github.com/shadeed/headers-css

- 카드 참고

https://uiverse.io/aadium/soft-firefox-58#

- 로그인/회원가입 참고

- redux-persist

https://jmjjjmj.tistory.com/92