목차

이슈 #1: Next.js에서 Redux-Saga 설정

1. 이슈 상황

항목 내용
발생 환경 Next.js 프로젝트에서 Redux-Saga 미들웨어 설정 시
증상 Redux 스토어 설정, Saga 미들웨어 연결, 환경별 DevTools 분기 필요
영향 범위 전체 앱 상태 관리

2. 해결 방안 후보

방안 장점 단점
A. next-redux-wrapper 사용 Next.js 공식 권장 패턴, 설정 간편 추가 라이브러리
B. 직접 Provider 설정 라이브러리 의존성 없음 보일러플레이트 증가
C. Redux Toolkit 간결한 코드, 공식 권장 기존 Saga 패턴 수정 필요

3. 선택한 해결법

선택: A안 (next-redux-wrapper)

// store/configureStore.js
import { createWrapper } from "next-redux-wrapper";
import { createStore, applyMiddleware, compose } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import createSagaMiddleware from "@redux-saga/core";
import rootSaga from "../sagas";
import rootReducer from "../reducers";

// 커스텀 로거 미들웨어 (개발 환경 전용)
const loggerMidleware = () => (next) => (action) => {
  if (process.env.NEXT_PUBLIC_ENV === "development") {
    console.log(action);
  }
  next(action);
  return;
};

const configureStore = () => {
  const sagaMiddleware = createSagaMiddleware();
  const middlewares = [sagaMiddleware, loggerMidleware];

  // 환경별 DevTools 분기
  const enhancer =
    process.env.NEXT_PUBLIC_ENV === "production"
      ? compose(applyMiddleware(...middlewares))
      : composeWithDevTools(applyMiddleware(...middlewares));

  const store = createStore(rootReducer, enhancer);
  store.sagaTask = sagaMiddleware.run(rootSaga);

  return store;
};

const wrapper = createWrapper(configureStore, {
  debug: process.env.NEXT_PUBLIC_ENV === "development",
});

export default wrapper;

_app.js에서 적용:

// pages/_app.js
import wrapper from "../store/configureStore";

const App = ({ Component }) => {
  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <title>한국가이던스</title>
      </Head>
      <Component />
    </>
  );
};

export default wrapper.withRedux(App);

4. 선택 이유

관점 이유
Next.js 통합 next-redux-wrapper로 Next.js 앱에 Redux 간편 연결
환경별 분기 개발 환경에서만 DevTools, 로거 활성화
미들웨어 확장 Saga + 커스텀 로거 순차 적용
디버깅 개발 환경에서 모든 액션 콘솔 로깅

이슈 #2: 반응형 DatePicker 구현

1. 이슈 상황

항목 내용
발생 환경 예약 날짜 선택 UI
증상 데스크톱에서는 달력 전체 표시, 모바일에서는 팝업 형태가 적합
영향 범위 예약 날짜 선택 페이지

2. 해결 방안 후보