Project Fake Search #2 목업 페이지 구현 및 redux 설정

시작하며

개인 프로젝트이기 때문에 모든 목업페이지를 혼자서 만들어야했지만 필요한 페이지 수가 적고 이전 프로젝트를 통해서 CSS에 대한 이해가 어느정도 높아져서 생각보다 빠르게 진행할 수 있었다. 반응형을 고려하면서 width를 설정하고 탭메뉴, 모달 등 state가 필요한 부분은 구현하면서 목업 페이지를 만들었다.

목업페이지

메인

설정 페이지

검색페이지

redux 설정

로그인 리듀서

//loginReducer
const loginReducer = (
  state = {
    isLogin: false,
    oauth: '',
    id: 'default',
    siteName: 'FAKESEARCH',
    themeColor: '#2260FF',
  },
  action
) => {
  switch (action.type) {
    case LOGIN:
      return {
        ...state,
        ...action.payload,
      };
    case LOGOUT:
      return {
        ...state,
        isLogin: false,
        oauth: '',
        id: 'default',
        siteName: 'FAKESEARCH',
        themeColor: '#2260FF',
      };
    default:
      return state;
  }
};

로그인 리듀서를 설정한 중요한 이유는 themeColor(테마 색상)인데 사용자가 설정한 색상에 따라서 메인, 설정, 검색 페이지의 색상이 변경되기 때문에 state 대신에 리듀서를 별도로 만들어서 관리하기로 하였다.

//Main.js
			...
import { useSelector } from 'react-redux';
			...
export default function Main() {
			...
  const { siteName, themeColor } = useSelector(
    (state) => state.loginReducer
  );
			...
  return (
			...
          <div
            className='logo'
            style={{ color: themeColor }}
            onClick={() => {}}
          >
            {siteName}
          </div>
			...
  );
}

이런 형태로 themeColor을 가져와 색상을 설정하는 형태로 코드를 작성하였다.

섹션별 리듀서 설정

//profileReducer
const profileReducer = (
  state = {
    type: 'profile',
    order: 1,
    view: 0,
    job: '',
    profileImg:'',
    name: '',
    info: [{title:'',content:''}],
    subinfo: [],
  },
  action
) => {
  switch (action.type) {
    case CHANGEPROFILE:
      return {
        ...state,
        ...action.payload
      };
    case RESETPROFILE:
      return {
        ...state,
        type: 'profile',
        order: 1,
        view: 0,
        job: '',
        profileImg:'',
        name: '',
        info: [{title:'',content:''}],
        subinfo: [],
      };

    default:
      return state;
  }
};

//newsReducer
const newsReducer = (
  state = {
    type: 'news',
    view: 0,
    order: 2,
    content: [{title:'', content: '', datetime: '', reporter:'', img:''}],
  },
  action
) => {
  switch (action.type) {
    case CHANGENEWS:
      return {
        ...state,
        ...action.payload
      };
    case RESETNEWS:
      return {
        ...state,
        type: 'news',
        view: 0,
        order: 2,
        content: [{title:'', content: '', datetime: '', reporter:'', img:''}],
      };

    default:
      return state;
  }
};

//imageReducer
const imageReducer = (
  state = {
    type: 'image',
    view: 0,
    order: 3,
    content: {img1:'',img2:'',img3:'',img4:''}
  },
  action
) => {
  switch (action.type) {
    case CHANGEIMAGE:
      return {
        ...state,
        ...action.payload
      };
    case RESETIMAGE:
      return {
        ...state,
        type: 'image',
        view: 0,
        order: 3,
        content: {img1:'',img2:'',img3:'',img4:''}
      };

    default:
      return state;
  }
};

//musicReducer
const musicReducer = (
  state = {
    type: 'music',
    view: 0,
    album: '',
    info: '',
    date: '',
    order: 4,
    title: '',
    artist: ''
  },
  action
) => {
  switch (action.type) {
    case CHANGEMUSIC:
      return {
        ...state,
        ...action.payload
      };
    case RESETMUSIC:
      return {
        ...state,
        type: 'music',
        view: 0,
        album: '',
        info: '',
        date: '',
        order: '4',
        title: '',
        artist: ''
      };

    default:
      return state;
  }
};

검색 페이지 설정에서 사용하는 섹션별 정보들을 각각 리듀서로 설정해주었다. 검색 페이지 내에서 섹션별로 컴포넌트를 분리할 예정이고 객체 형태로 저장되는 값들이 많아서 리덕스로 관리해주는 것이 편리할 것이라고 판단하였고, action은 loginReducer와 마찬가지고 값 변경과 리셋 두가지로 설정하였다.

마치며

현재 프로젝트를 끝내고 정리하면서 블로깅을 하기 때문에 실제 개발 순서와는 차이가 있다. 처음에 메인과 설정 페이지의 목업과 기능 구현을 마치고 이후에 검색 페이지를 구현하였다. 우선 검색 페이지를 설정하는 부분이 구현이 완료되어야 실제로 데이터를 서버에서 받아서 보여지는 검색 페이지를 구현하는 것이 편하다고 생각했다.