[Redux] /basis/drone 네이밍 규칙 적용

src/containers/basis/dron/BasisDronContainer.js

@@ -14,10 +14,10 @@ export const BasisDronContainer = props => {
   const history = useHistory();
 
   // 현재 활성화한 그룹 정보
-  const { selectGroup } = useSelector(state => state.dronState);
+  const { selectGroup } = useSelector(state => state.droneState);
 
   // 기체 목록, 총 기체 수
-  const { droneList, droneTotal } = useSelector(state => state.dronState);
+  const { droneList, droneTotal } = useSelector(state => state.droneState);
 
   // 유저 정보
   const { user } = useSelector(state => state.authState, shallowEqual);

src/containers/basis/dron/BasisDronDetailContainer.js

@@ -21,7 +21,7 @@ export const BasisDronDetailContainer = props => {
   const { joinList, groupList } = useSelector(state => state.groupState);
 
   // 기체 상세정보, 선택한 기체정보
-  const { droneDetail, selectData } = useSelector(state => state.dronState);
+  const { droneDetail, selectData } = useSelector(state => state.droneState);
 
   // 유저 정보
   const { user } = useSelector(state => state.authState);
@@ -202,7 +202,7 @@ export const BasisDronDetailContainer = props => {
 
   // 이미지 저장
   const saveFileAPI = async file => {
-    const fileName = await droneAPI.fileUpload(file);
+    const fileName = await droneAPI.uploadFile(file);
     setImageUrl(fileName);
     setImg(IMG_PATH + fileName);
   };

src/containers/basis/dron/BasisIdntfContainer.js

@@ -14,7 +14,7 @@ export const BasisIdntfContainer = props => {
 
   // 식별장치 목록, 기체 상세정보
   const { idntfList, droneDetail, isRefreshIdntf } = useSelector(
-    state => state.dronState
+    state => state.droneState
   );
   // 유저 정보
   const { user } = useSelector(state => state.authState);

src/modules/_sample/actions/index.ts

@@ -23,7 +23,7 @@ import { createAsyncAction, ActionType, createAction } from 'typesafe-actions';
  */
 
 // 드론 목록
-const GET_DRONE_LIST_RQUEST = 'sample/GET_DRONE_LIST_RQUEST';
+const GET_DRONE_LIST_REQUEST = 'sample/GET_DRONE_LIST_REQUEST';
 const GET_DRONE_LIST_SUCCESS = 'sample/GET_DRONE_LIST_SUCCESS';
 const GET_DRONE_LIST_FAILURE = 'sample/GET_DRONE_LIST_FAILURE';
 
@@ -37,7 +37,7 @@ const HISTORY_LIST_REQUEST = 'sample/HISTORY_LIST_REQUEST';
 const HISTORY_LOG_REQUEST = 'sample/HISTORY_LOG_REQUEST';
 
 export const getDroneList = createAsyncAction(
-  GET_DRONE_LIST_RQUEST,
+  GET_DRONE_LIST_REQUEST,
   GET_DRONE_LIST_SUCCESS,
   GET_DRONE_LIST_FAILURE
 )();

src/modules/_sample/models/index.ts

@@ -1,20 +1,22 @@
 /**
- * interface는 파스칼케이스를 사용하여 작성하고 시작할 때 약자인 'I'를 붙여준다.
+ * 모든 interface는 파스칼케이스를 사용하여 작성한다.
+ * Rq, Rs interface의 경우 Action명 + Rq or Rs를 붙여준다.
+ *
  * 초기값의 경우 변수명을 initialState로 작성한다.
  * 초기값의 interface는 State로 끝나도록 작성한다.
  */
 
-export const initialState: ISampleState = {
+export const initialState: SampleState = {
   droneList: undefined,
   droneCount: 0
 };
 
-export interface ISampleState {
-  droneList: IDroneDetail[] | undefined;
+export interface SampleState {
+  droneList: Drone[] | undefined;
   droneCount: number | 0;
 }
 
-export interface IDroneDetail {
+export interface Drone {
   groupId: string;
   arcrftSno: number;
   arcrftHght: number;
@@ -23,3 +25,5 @@ export interface IDroneDetail {
   arcrftTypeCd: string;
   arcrftWdth: number;
 }
+
+export interface UpdateDroneRq {}

src/modules/_sample/reducers/index.ts

@@ -1,14 +1,14 @@
 import { createReducer } from 'typesafe-actions';
 import produce from 'immer';
 
-import { ISampleState, initialState } from '../models';
+import { SampleState, initialState } from '../models';
 import * as Actions from '../actions';
 
 /**
  * Reducer 함수는 카멜케이스를 사용하여 작성한다.
  */
 
-export const sampleReducer = createReducer<ISampleState, Actions.SampleActions>(
+export const sampleReducer = createReducer<SampleState, Actions.SampleActions>(
   initialState
 ).handleAction(Actions.getDroneList.success, (state, action) =>
   produce(state, draft => {})

src/modules/basis/drone/actions/index.ts

@@ -1,7 +1,7 @@
 import { AxiosError } from 'axios';
 import { createAsyncAction, ActionType, createAction } from 'typesafe-actions';
 
-import { IDroneDetail, SelectData, IdntfData, IIdntfUpdateRq } from '../models';
+import { Drone, SelectData, Idntf, UpdateIdntfRq } from '../models';
 
 // 드론 목록 조회
 const GET_DRONE_LIST_REQUEST = 'basis/drone/GET_DRONE_LIST_REQUEST';
@@ -57,25 +57,25 @@ export const getDroneList = createAsyncAction(
   GET_DRONE_LIST_REQUEST,
   GET_DRONE_LIST_SUCCESS,
   GET_DRONE_LIST_FAILURE
-)<string, { data: IDroneDetail[]; total: number }, AxiosError>();
+)<string, { data: Drone[]; total: number }, AxiosError>();
 
 export const getDroneDetail = createAsyncAction(
   GET_DRONE_DETAIL_REQUEST,
   GET_DRONE_DETAIL_SUCCESS,
   GET_DRONE_DETAIL_FAILURE
-)<number, IDroneDetail, AxiosError>();
+)<number, Drone, AxiosError>();
 
 export const createDrone = createAsyncAction(
   CREATE_DRONE_REQUEST,
   CREATE_DRONE_SUCCESS,
   CREATE_DRONE_FAILURE
-)<IDroneDetail, string, AxiosError>();
+)<Drone, string, AxiosError>();
 
 export const updateDrone = createAsyncAction(
   UPDATE_DRONE_REQUEST,
   UPDATE_DRONE_SUCCESS,
   UPDATE_DRONE_FAILURE
-)<IDroneDetail, String, AxiosError>();
+)<Drone, String, AxiosError>();
 
 export const deleteDrone = createAsyncAction(
   DELETE_DRONE_REQUEST,
@@ -87,20 +87,20 @@ export const getIdntfList = createAsyncAction(
   GET_IDNTF_LIST_REQUEST,
   GET_IDNTF_LIST_SUCCESS,
   GET_IDNTF_LIST_FAILURE
-)<number, { data: IdntfData[]; count: number }, AxiosError>();
+)<number, { data: Idntf[]; count: number }, AxiosError>();
 
 export const createIdntf = createAsyncAction(
   CREATE_IDNTF_REQUEST,
   CREATE_IDNTF_SUCCESS,
   CREATE_IDNTF_FAILURE
-)<{ mode: string; data: IdntfData[]; arcrftSno: number }, string, AxiosError>();
+)<{ mode: string; data: Idntf[]; arcrftSno: number }, string, AxiosError>();
 
 export const updateIdntf = createAsyncAction(
   UPDATE_IDNTF_REQUEST,
   UPDATE_IDNTF_SUCCESS,
   UPDATE_IDNTF_FAILURE
 )<
-  { mode: string; data: IIdntfUpdateRq[]; arcrftSno: number },
+  { mode: string; data: UpdateIdntfRq[]; arcrftSno: number },
   string,
   AxiosError
 >();

src/modules/basis/drone/apis/index.ts

@@ -1,10 +1,10 @@
 import axios from '../../../utils/customAxiosUtil';
 import qs from 'qs';
-import { IDroneDetail } from '../models';
+import { Drone } from '../models';
 
 export const droneAPI = {
   // 드론 목록
-  droneList: async (data: string) => {
+  getDroneList: async (data: string) => {
     const queryString = qs.stringify(data, {
       addQueryPrefix: true,
       arrayFormat: 'repeat'
@@ -12,31 +12,31 @@ export const droneAPI = {
     return await axios.get(`api/bas/dron/list${queryString}`);
   },
   // 드론 상세
-  droneDetail: async (id: number) => {
+  getDroneDetail: async (id: number) => {
     return await axios.get(`api/bas/dron/detail/${id}`);
   },
   // 드론 생성
-  droneCreate: async (data: IDroneDetail) => {
+  createDrone: async (data: Drone) => {
     return await axios.post('api/bas/dron/create', data);
   },
   // 드론 수정
-  droneUpdate: async (data: IDroneDetail) => {
+  updateDrone: async (data: Drone) => {
     return await axios.put('api/bas/dron/update', data);
   },
   // 드론 삭제
-  droneDelete: async (id: number) => {
+  deleteDrone: async (id: number) => {
     return await axios.delete(`api/bas/dron/delete/${id}`);
   },
   // 식별장치 목록
-  idntfList: async (id: number) => {
+  getIdntfList: async (id: number) => {
     return await axios.get(`api/bas/dron/idntf/list/${id}`);
   },
   // 식별장치 생성
-  idntfCreate: async (item: { data: any[]; arcrftSno: number }) => {
+  createIdntf: async (item: { data: any[]; arcrftSno: number }) => {
     return await axios.post('api/bas/dron/idntf/create', item);
   },
   // 식별장치 수정
-  idntfUpdate: async (item: { data: any[]; arcrftSno: number }) => {
+  updateIdntf: async (item: { data: any[]; arcrftSno: number }) => {
     return await axios.put(`/api/bas/dron/idntf/update/${item.arcrftSno}`, {
       idntfNum: item.data[0].idntfNum,
       ownerNm: item.data[0].ownerNm,
@@ -44,11 +44,11 @@ export const droneAPI = {
     });
   },
   // 식별장치 삭제
-  idntfDelete: async (id: string) => {
+  deleteIdntf: async (id: string) => {
     return await axios.delete(`api/bas/dron/idntf/delete/${id}`);
   },
   // 드론 이미지 업로드
-  fileUpload: async (file: any) => {
+  uploadFile: async (file: any) => {
     let form = new FormData();
     form.append('file', file);
     return await axios.post('api/file/upload', form);

src/modules/basis/drone/models/index.ts

@@ -1,4 +1,4 @@
-export const initialState: IDroneState = {
+export const initialState: DroneState = {
   droneList: undefined,
   droneTotal: 0,
   droneDetail: undefined,
@@ -11,12 +11,12 @@ export const initialState: IDroneState = {
   page: 1
 };
 
-export interface IDroneState {
-  droneList: IDroneDetail[] | undefined;
+export interface DroneState {
+  droneList: Drone[] | undefined;
   droneTotal: number | 0;
-  droneDetail: IDroneDetail | undefined;
+  droneDetail: Drone | undefined;
 
-  idntfList: IdntfData[] | undefined;
+  idntfList: Idntf[] | undefined;
   idntfCount: number | 0;
 
   selectGroup: SelectData | undefined;
@@ -29,7 +29,7 @@ export interface SelectData {
   groupNm: string;
 }
 
-export interface IDroneDetail {
+export interface Drone {
   groupId: string;
   arcrftSno: number;
   arcrftHght: number;
@@ -61,7 +61,7 @@ export interface IDroneDetail {
   file: FileList;
 }
 
-export interface IdntfData {
+export interface Idntf {
   idntfNum: string;
   newIdntfNum: string;
   isSave: boolean;
@@ -70,7 +70,7 @@ export interface IdntfData {
   cstmrSno: number;
 }
 
-export interface IIdntfUpdateRq {
+export interface UpdateIdntfRq {
   idntfNum: string;
   ownerNm: string;
   hpno: string;

src/modules/basis/drone/reducers/index.ts

@@ -2,9 +2,9 @@ import { createReducer } from 'typesafe-actions';
 import produce from 'immer';
 
 import * as Actions from '../actions';
-import { IDroneState, initialState } from '../models';
+import { DroneState, initialState } from '../models';
 
-export const dronReducer = createReducer<IDroneState, Actions.DronAction>(
+export const droneReducer = createReducer<DroneState, Actions.DronAction>(
   initialState
 )
   .handleAction(Actions.getDroneList.success, (state, action) =>
@@ -22,12 +22,6 @@ export const dronReducer = createReducer<IDroneState, Actions.DronAction>(
       draft.idntfCount = count;
     })
   )
-  .handleAction(Actions.selectGroup, (state, action) =>
-    produce(state, draft => {
-      const selectData = action.payload;
-      draft.selectGroup = selectData;
-    })
-  )
   .handleAction(Actions.createIdntf.success, (state, action) =>
     produce(state, draft => {
       draft.isRefreshIdntf = true;
@@ -38,6 +32,13 @@ export const dronReducer = createReducer<IDroneState, Actions.DronAction>(
       draft.isRefreshIdntf = true;
     })
   )
+  .handleAction(Actions.getDroneDetail.success, (state, action) =>
+    produce(state, draft => {
+      const data = action.payload;
+      draft.droneDetail = data;
+    })
+  )
+
   .handleAction(Actions.resetIdntf, (state, action) =>
     produce(state, draft => {
       draft.droneDetail = undefined;
@@ -46,9 +47,9 @@ export const dronReducer = createReducer<IDroneState, Actions.DronAction>(
       draft.idntfCount = 0;
     })
   )
-  .handleAction(Actions.getDroneDetail.success, (state, action) =>
+  .handleAction(Actions.selectGroup, (state, action) =>
     produce(state, draft => {
-      const data = action.payload;
-      draft.droneDetail = data;
+      const selectData = action.payload;
+      draft.selectGroup = selectData;
     })
   );

src/modules/basis/drone/sagas/index.ts

@@ -10,10 +10,12 @@ import * as MessageActions from '../../../comn/message/actions/comnMessageAction
 import * as Actions from '../actions';
 import * as Apis from '../apis';
 
-function* listSaga(action: ActionType<typeof Actions.getDroneList.request>) {
+function* getDroneListSaga(
+  action: ActionType<typeof Actions.getDroneList.request>
+) {
   try {
     const params = action.payload;
-    const res = yield call(Apis.droneAPI.droneList, params);
+    const res = yield call(Apis.droneAPI.getDroneList, params);
     const {
       data: { items, total },
       errorCode
@@ -43,12 +45,12 @@ function* listSaga(action: ActionType<typeof Actions.getDroneList.request>) {
   }
 }
 
-function* listIdntfSaga(
+function* getIdntfListSaga(
   action: ActionType<typeof Actions.getIdntfList.request>
 ) {
   try {
     const params = action.payload;
-    const res = yield call(Apis.droneAPI.idntfList, params);
+    const res = yield call(Apis.droneAPI.getIdntfList, params);
     const { data, count, errorCode, errorMessage } = res;
 
     if (errorCode) {
@@ -85,12 +87,12 @@ function* listIdntfSaga(
   }
 }
 
-function* detailSaga(
+function* getDroneDetailSaga(
   action: ActionType<typeof Actions.getDroneDetail.request>
 ) {
   try {
     const id = action.payload;
-    const res = yield call(Apis.droneAPI.droneDetail, id);
+    const res = yield call(Apis.droneAPI.getDroneDetail, id);
 
     const { data } = res;
     yield put(Actions.getDroneDetail.success(data));
@@ -99,11 +101,13 @@ function* detailSaga(
   }
 }
 
-function* createSaga(action: ActionType<typeof Actions.createDrone.request>) {
+function* createDroneSaga(
+  action: ActionType<typeof Actions.createDrone.request>
+) {
   try {
     const detail = action.payload;
 
-    const res = yield call(Apis.droneAPI.droneCreate, detail);
+    const res = yield call(Apis.droneAPI.createDrone, detail);
 
     const { data } = res;
 
@@ -150,12 +154,12 @@ function* createIdntfSaga(
     const detail = action.payload;
     let res;
     if (detail.mode === 'update') {
-      res = yield call(Apis.droneAPI.idntfUpdate, {
+      res = yield call(Apis.droneAPI.updateIdntf, {
         data: detail.data,
         arcrftSno: detail.arcrftSno
       });
     } else {
-      res = yield call(Apis.droneAPI.idntfCreate, {
+      res = yield call(Apis.droneAPI.createIdntf, {
         data: detail.data,
         arcrftSno: detail.arcrftSno
       });
@@ -200,10 +204,12 @@ function* createIdntfSaga(
   }
 }
 
-function* updateSaga(action: ActionType<typeof Actions.updateDrone.request>) {
+function* updateDroneSaga(
+  action: ActionType<typeof Actions.updateDrone.request>
+) {
   try {
     const detail = action.payload;
-    const res = yield call(Apis.droneAPI.droneUpdate, detail);
+    const res = yield call(Apis.droneAPI.updateDrone, detail);
     console.log(res, '---res');
 
     const { data } = res;
@@ -244,10 +250,12 @@ function* updateSaga(action: ActionType<typeof Actions.updateDrone.request>) {
   }
 }
 
-function* deleteSaga(action: ActionType<typeof Actions.deleteDrone.request>) {
+function* deleteDroneSaga(
+  action: ActionType<typeof Actions.deleteDrone.request>
+) {
   try {
     const id = action.payload;
-    const res = yield call(Apis.droneAPI.droneDelete, id);
+    const res = yield call(Apis.droneAPI.deleteDrone, id);
 
     const { data } = res;
 
@@ -281,7 +289,7 @@ function* deleteIdntfSaga(
 ) {
   try {
     const id = action.payload;
-    const res = yield call(Apis.droneAPI.idntfDelete, id);
+    const res = yield call(Apis.droneAPI.deleteIdntf, id);
 
     const { data } = res;
 
@@ -311,13 +319,13 @@ function* deleteIdntfSaga(
   }
 }
 
-export function* dronSaga() {
-  yield takeEvery(Actions.getDroneList.request, listSaga);
-  yield takeEvery(Actions.getDroneDetail.request, detailSaga);
-  yield takeEvery(Actions.createDrone.request, createSaga);
-  yield takeEvery(Actions.updateDrone.request, updateSaga);
-  yield takeEvery(Actions.deleteDrone.request, deleteSaga);
-  yield takeEvery(Actions.getIdntfList.request, listIdntfSaga);
+export function* droneSaga() {
+  yield takeEvery(Actions.getDroneList.request, getDroneListSaga);
+  yield takeEvery(Actions.getDroneDetail.request, getDroneDetailSaga);
+  yield takeEvery(Actions.createDrone.request, createDroneSaga);
+  yield takeEvery(Actions.updateDrone.request, updateDroneSaga);
+  yield takeEvery(Actions.deleteDrone.request, deleteDroneSaga);
+  yield takeEvery(Actions.getIdntfList.request, getIdntfListSaga);
   yield takeEvery(Actions.createIdntf.request, createIdntfSaga);
   yield takeEvery(Actions.deleteIdntf.request, deleteIdntfSaga);
 }

src/redux/reducers/rootReducer.ts

@@ -23,7 +23,7 @@ import {
   analysisSimulatorSaga,
   analysisSimulatorReducer
 } from '../../modules/analysis/simulation';
-import { dronSaga, dronReducer } from '../../modules/basis/drone';
+import { droneSaga, droneReducer } from '../../modules/basis/drone';
 import { basGroupSaga, groupReducer } from '../../modules/basis/group';
 import { messageReducer } from '../../modules/comn/message';
 import {
@@ -50,7 +50,7 @@ export function* saga() {
   yield all([fork(accountSaga)]);
   yield all([fork(authSaga)]);
   yield all([fork(basGroupSaga)]);
-  yield all([fork(dronSaga)]);
+  yield all([fork(droneSaga)]);
   yield all([fork(analysisSimulatorSaga)]);
   yield all([fork(findSaga)]);
   yield all([fork(laancSaga)]);
@@ -68,7 +68,7 @@ const rootReducer = combineReducers({
   mainDashState: mainDahReducer,
   messageState: messageReducer,
   groupState: groupReducer,
-  dronState: dronReducer,
+  droneState: droneReducer,
   authState: authReducer,
   accountState: accountReducer,
   UserPageState: mypageReducer,