diff --git a/.eslintrc.js b/.eslintrc.js
index 29b5289ff..65d661350 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -39,14 +39,15 @@ module.exports = {
         config: {
           resolve: {
             alias: {
+              actions: path.resolve('./src/actions'),
+              apis: path.resolve('./src/apis'),
               common: path.resolve('./src/components/common'),
-              utils: path.resolve('./src/utils'),
+              constants: path.resolve('./src/constants'),
+              contexts: path.resolve('./src/contexts'),
               graphql: path.resolve('./src/graphql'),
               hooks: path.resolve('./src/hooks'),
-              contexts: path.resolve('./src/contexts'),
-              constants: path.resolve('./src/constants'),
-              actions: path.resolve('./src/actions'),
               selectors: path.resolve('./src/selectors'),
+              utils: path.resolve('./src/utils'),
             },
           },
         },
diff --git a/jsconfig.json b/jsconfig.json
index 4d8762971..1473e8eca 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -2,14 +2,15 @@
     "compilerOptions": {
         "baseUrl": "./",
         "paths": {
+            "actions/*": ["src/actions/*"],
+            "apis/*": ["src/apis/*"],
             "common/*": ["src/components/common/*"],
-            "utils/*": ["src/utils/*"],
+            "constants/*": ["src/constants/*"],
+            "contexts/*": ["src/contexts/*"],
             "graphql/*": ["src/graphql/*"],
             "hooks/*": ["src/hooks/*"],
-            "contexts/*": ["src/contexts/*"],
-            "constants/*": ["src/constants/*"],
-            "actions/*": ["src/actions/*"],
-            "selectors/*": ["src/selectors/*"]
+            "selectors/*": ["src/selectors/*"],
+            "utils/*": ["src/utils/*"]
         }
     },
     "exclude": ["node_modules", "dist"]
diff --git a/package.json b/package.json
index d0c9dc587..6bdc092d4 100644
--- a/package.json
+++ b/package.json
@@ -23,14 +23,15 @@
   },
   "jest": {
     "moduleNameMapper": {
+      "^actions(.*)": "<rootDir>/src/actions$1",
+      "^apis(.*)": "<rootDir>/src/apis$1",
       "^common(.*)": "<rootDir>/src/components/common$1",
-      "^utils(.*)": "<rootDir>/src/utils$1",
+      "^constants(.*)": "<rootDir>/src/constants$1",
+      "^contexts(.*)": "<rootDir>/src/contexts$1",
       "^graphql(.*)": "<rootDir>/src/graphql$1",
       "^hooks(.*)": "<rootDir>/src/hooks$1",
-      "^contexts(.*)": "<rootDir>/src/contexts$1",
-      "^constants(.*)": "<rootDir>/src/constants$1",
-      "^actions(.*)": "<rootDir>/src/actions$1",
-      "^selectors(.*)": "<rootDir>/src/selectors$1"
+      "^selectors(.*)": "<rootDir>/src/selectors$1",
+      "^utils(.*)": "<rootDir>/src/utils$1"
     }
   },
   "devDependencies": {
diff --git a/src/actions/viewLog.js b/src/actions/viewLog.js
deleted file mode 100644
index 1dfb953bc..000000000
--- a/src/actions/viewLog.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { tokenSelector } from '../selectors/authSelector';
-
-export const viewSalaryWorkTimes = ({ contentIds, referrer }) => (
-  dispatch,
-  getState,
-  { api },
-) => {
-  const state = getState();
-  const token = tokenSelector(state);
-  return api.viewLog.viewSalaryWorkTimes({ token, contentIds, referrer });
-};
-
-export const viewExperiences = ({ contentIds, referrer }) => (
-  dispatch,
-  getState,
-  { api },
-) => {
-  const state = getState();
-  const token = tokenSelector(state);
-  return api.viewLog.viewExperiences({ token, contentIds, referrer });
-};
diff --git a/src/components/App/Header/Top/EmailVerificationTop.js b/src/components/App/Header/Top/EmailVerificationTop.js
index d8c50a996..9b3255b8f 100644
--- a/src/components/App/Header/Top/EmailVerificationTop.js
+++ b/src/components/App/Header/Top/EmailVerificationTop.js
@@ -4,17 +4,14 @@ import { connect } from 'react-redux';
 import cls from 'classnames';
 
 import { Wrapper } from 'common/base';
+import Modal from 'common/Modal';
 
+import { getUserName, getUserEmail } from 'selectors/authSelector';
+import { sendVerifyEmail } from 'actions/emailVerify';
 import topStyles from './Top.module.css';
 import styles from './EmailVerificationTop.module.css';
-
-import Modal from '../../../common/Modal';
 import VerifyEmailForm from '../../../EmailVerification/VerifyEmailForm';
 
-import { getUserName, getUserEmail } from '../../../../selectors/authSelector';
-
-import { sendVerifyEmail } from '../../../../actions/emailVerify';
-
 const EmailVerificationTop = ({
   isSentVerificationEmail,
   userName,
diff --git a/src/components/CampaignTimeAndSalary/CampaignTimeAndSalaryBoard/index.js b/src/components/CampaignTimeAndSalary/CampaignTimeAndSalaryBoard/index.js
index 742d5b6ac..d5f7bf814 100644
--- a/src/components/CampaignTimeAndSalary/CampaignTimeAndSalaryBoard/index.js
+++ b/src/components/CampaignTimeAndSalary/CampaignTimeAndSalaryBoard/index.js
@@ -19,17 +19,17 @@ import AboutThisJobModal from '../../TimeAndSalary/common/AboutThisJobModal';
 import timeAndSalaryBoardStyles from '../../TimeAndSalary/TimeAndSalaryBoard/TimeAndSalaryBoard.module.css';
 import timeAndSalaryBannerStyles from '../../TimeAndSalary/Banner.module.css';
 import timeAndSalaryCommonStyles from '../../TimeAndSalary/views/view.module.css';
-import fetchingStatus, { isFetched } from '../../../constants/status';
-import { MAX_ROWS_IF_HIDDEN } from '../../../constants/hideContent';
+import fetchingStatus, { isFetched } from 'constants/status';
+import { MAX_ROWS_IF_HIDDEN } from 'constants/hideContent';
 import { BasicPermissionBlock } from 'common/PermissionBlock';
 import styles from '../CampaignTimeAndSalary.module.css';
 
-import { queryCampaignInfoList } from '../../../actions/campaignInfo';
-import { queryCampaignTimeAndSalary } from '../../../actions/campaignTimeAndSalaryBoard';
-import GradientMask from '../../common/GradientMask';
+import { queryCampaignInfoList } from 'actions/campaignInfo';
+import { queryCampaignTimeAndSalary } from 'actions/campaignTimeAndSalaryBoard';
+import GradientMask from 'common/GradientMask';
 
 import DashBoardTable from '../../TimeAndSalary/common/DashBoardTable';
-import { campaignEntriesSelector } from '../../../selectors/campaignSelector';
+import { campaignEntriesSelector } from 'selectors/campaignSelector';
 
 import {
   pathSelector,
diff --git a/src/components/CampaignTimeAndSalary/NotFound.js b/src/components/CampaignTimeAndSalary/NotFound.js
index 977a7483b..fc1a79122 100644
--- a/src/components/CampaignTimeAndSalary/NotFound.js
+++ b/src/components/CampaignTimeAndSalary/NotFound.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import CommonNotFound from 'common/NotFound';
 import Redirect from 'common/routing/Redirect';
-import { queryCampaignInfoList } from '../../actions/campaignInfo';
-import { isFetched } from '../../constants/status';
+import { queryCampaignInfoList } from 'actions/campaignInfo';
+import { isFetched } from 'constants/status';
 
 class NotFound extends Component {
   static fetchData({ store: { dispatch } }) {
diff --git a/src/components/CampaignTimeAndSalary/index.js b/src/components/CampaignTimeAndSalary/index.js
index 4aa8ab44b..c8179ae15 100644
--- a/src/components/CampaignTimeAndSalary/index.js
+++ b/src/components/CampaignTimeAndSalary/index.js
@@ -16,7 +16,7 @@ import InfoSalaryModal from '../TimeAndSalary/common/InfoSalaryModal';
 import withModal from '../TimeAndSalary/common/withModal';
 import styles from './CampaignTimeAndSalary.module.css';
 
-import { queryCampaignInfoList } from '../../actions/campaignInfo';
+import { queryCampaignInfoList } from 'actions/campaignInfo';
 
 const campaignListFromEntries = campaignEntries =>
   campaignEntries
diff --git a/src/components/Company/CompanyIndexProvider.js b/src/components/Company/CompanyIndexProvider.js
index 8ad135a56..accb32991 100644
--- a/src/components/Company/CompanyIndexProvider.js
+++ b/src/components/Company/CompanyIndexProvider.js
@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import CompanyAndJobTitleIndexPage from '../CompanyAndJobTitle/IndexPage';
-import { pageType } from '../../constants/companyJobTitle';
-import { fetchCompanyNames } from '../../actions/company';
+import { pageType } from 'constants/companyJobTitle';
+import { fetchCompanyNames } from 'actions/company';
 import {
   companyNames as companyNamesSelector,
   companyNamesStatus as companyNamesStatusSelector,
-} from '../../selectors/companyAndJobTitle';
+} from 'selectors/companyAndJobTitle';
 
 const CompanyIndexProvider = () => {
   const status = useSelector(companyNamesStatusSelector);
diff --git a/src/components/Company/CompanyPageProvider.js b/src/components/Company/CompanyPageProvider.js
index 05a7e9591..4c6f2b592 100644
--- a/src/components/Company/CompanyPageProvider.js
+++ b/src/components/Company/CompanyPageProvider.js
@@ -10,11 +10,11 @@ import Overview from '../CompanyAndJobTitle/Overview';
 import InterviewExperiences from '../CompanyAndJobTitle/InterviewExperiences';
 import WorkExperiences from '../CompanyAndJobTitle/WorkExperiences';
 import CompanyJobTitleTimeAndSalary from '../CompanyAndJobTitle/TimeAndSalary';
-import NotFound from '../common/NotFound';
+import NotFound from 'common/NotFound';
 import { withPermission } from 'common/permission-context';
 
-import { tabType, pageType } from '../../constants/companyJobTitle';
-import companyActions from '../../actions/company';
+import { tabType, pageType } from 'constants/companyJobTitle';
+import companyActions from 'actions/company';
 import {
   interviewExperiences,
   workExperiences,
diff --git a/src/components/CompanyAndJobTitle/TimeAndSalary/ViewLog.js b/src/components/CompanyAndJobTitle/TimeAndSalary/ViewLog.js
index 85e45c0e9..1bd18811c 100644
--- a/src/components/CompanyAndJobTitle/TimeAndSalary/ViewLog.js
+++ b/src/components/CompanyAndJobTitle/TimeAndSalary/ViewLog.js
@@ -1,36 +1,18 @@
-import { Component } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import { useViewSalaryWorkTimes } from 'hooks/viewLog';
 
-import { viewSalaryWorkTimes } from '../../../actions/viewLog';
-
-class ViewLog extends Component {
-  componentDidMount() {
-    const { contentIds } = this.props;
+const ViewLog = ({ pageName, page, contentIds }) => {
+  // Send view to backend
+  const viewSalaryWorkTimes = useViewSalaryWorkTimes();
+  useEffect(() => {
     const referrer = window.location.href;
+    viewSalaryWorkTimes({ contentIds, referrer });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pageName, page, viewSalaryWorkTimes]);
 
-    this.props.viewSalaryWorkTimes({ contentIds, referrer });
-  }
-
-  componentDidUpdate(prevProps) {
-    const prevPageName = prevProps.pageName;
-    const prevPage = prevProps.page;
-    const pageName = this.props.pageName;
-    const page = this.props.page;
-
-    if (prevPageName !== pageName || prevPage !== page) {
-      const { contentIds } = this.props;
-      const referrer = window.location.href;
-
-      this.props.viewSalaryWorkTimes({ contentIds, referrer });
-    }
-  }
-
-  render() {
-    return null;
-  }
-}
+  return null;
+};
 
 ViewLog.propTypes = {
   // key
@@ -38,17 +20,6 @@ ViewLog.propTypes = {
   page: PropTypes.number.isRequired,
 
   contentIds: PropTypes.arrayOf(PropTypes.string).isRequired,
-
-  // method
-  viewSalaryWorkTimes: PropTypes.func.isRequired,
 };
 
-const mapStateToProps = state => ({});
-
-const mapDispatchToProps = dispatch =>
-  bindActionCreators({ viewSalaryWorkTimes }, dispatch);
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(ViewLog);
+export default ViewLog;
diff --git a/src/components/EmailVerification/VerificationPage.js b/src/components/EmailVerification/VerificationPage.js
index 8804f09c8..3fbf09f8a 100644
--- a/src/components/EmailVerification/VerificationPage.js
+++ b/src/components/EmailVerification/VerificationPage.js
@@ -9,7 +9,7 @@ import GjLogo from 'common/icons/GjLogo.svg';
 import Heading from 'common/base/Heading';
 import P from 'common/base/P';
 
-import { verifyEmail } from '../../actions/emailVerify';
+import { verifyEmail } from 'actions/emailVerify';
 
 import VerificationSuccess from './VerificationSuccess';
 import VerificationFailure from './VerificationFailure';
diff --git a/src/components/ExperienceDetail/hooks/useTrace.js b/src/components/ExperienceDetail/hooks/useTrace.js
index 45b650178..9b52c5bb5 100644
--- a/src/components/ExperienceDetail/hooks/useTrace.js
+++ b/src/components/ExperienceDetail/hooks/useTrace.js
@@ -1,28 +1,16 @@
-import { useEffect, useCallback } from 'react';
-import { useDispatch } from 'react-redux';
+import { useEffect } from 'react';
 import ReactPixel from 'react-facebook-pixel';
-import PIXEL_CONTENT_CATEGORY from '../../../constants/pixelConstants';
-import { viewExperiences as viewExperiencesAction } from '../../../actions/viewLog';
-
-const useView = experienceId => {
-  const dispatch = useDispatch();
-  const viewExperiences = useCallback(
-    ({ contentIds, referrer }) => {
-      dispatch(viewExperiencesAction({ contentIds, referrer }));
-    },
-    [dispatch],
-  );
+import PIXEL_CONTENT_CATEGORY from 'constants/pixelConstants';
+import { useViewExperiences } from 'hooks/viewLog';
 
+const useTrace = experienceId => {
+  // Send view to backend
+  const viewExperiences = useViewExperiences();
   useEffect(() => {
     const contentIds = [experienceId];
     const referrer = window.location.href;
     viewExperiences({ contentIds, referrer });
   }, [experienceId, viewExperiences]);
-};
-
-const useTrace = experienceId => {
-  // Send view to backend
-  useView(experienceId);
 
   // send Facebook Pixel 'ViewContent' event
   useEffect(() => {
diff --git a/src/components/ExperienceSearch/index.js b/src/components/ExperienceSearch/index.js
index fc3afabe5..bd620dca6 100644
--- a/src/components/ExperienceSearch/index.js
+++ b/src/components/ExperienceSearch/index.js
@@ -14,12 +14,12 @@ import Pagination from 'common/Pagination';
 import { pathnameSelector, querySelector } from 'common/routing/selectors';
 import getScale from 'utils/numberUtils';
 import { formatTitle, formatCanonicalPath } from 'utils/helmetHelper';
-import { fetchExperiences as fetchExperiencesAction } from '../../actions/experienceSearch';
-import { IMG_HOST, SITE_NAME } from '../../constants/helmetData';
-import PIXEL_CONTENT_CATEGORY from '../../constants/pixelConstants';
-import { PAGE_COUNT } from '../../constants/experienceSearch';
-import status from '../../constants/status';
-import { GA_CATEGORY, GA_ACTION } from '../../constants/gaConstants';
+import { fetchExperiences as fetchExperiencesAction } from 'actions/experienceSearch';
+import { IMG_HOST, SITE_NAME } from 'constants/helmetData';
+import PIXEL_CONTENT_CATEGORY from 'constants/pixelConstants';
+import { PAGE_COUNT } from 'constants/experienceSearch';
+import status from 'constants/status';
+import { GA_CATEGORY, GA_ACTION } from 'constants/gaConstants';
 import styles from './ExperienceSearch.module.css';
 import Searchbar from './Searchbar';
 import ExperienceBlock from './ExperienceBlock';
diff --git a/src/components/JobTitle/JobTitleIndexProvider.js b/src/components/JobTitle/JobTitleIndexProvider.js
index 912aa2f34..ce9785dce 100644
--- a/src/components/JobTitle/JobTitleIndexProvider.js
+++ b/src/components/JobTitle/JobTitleIndexProvider.js
@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import CompanyAndJobTitleIndexPage from '../CompanyAndJobTitle/IndexPage';
-import { pageType } from '../../constants/companyJobTitle';
-import { fetchJobTitles } from '../../actions/jobTitle';
+import { pageType } from 'constants/companyJobTitle';
+import { fetchJobTitles } from 'actions/jobTitle';
 import {
   jobTitlesStatus as jobTitlesStatusSelector,
   jobTitles as jobTitlesSelector,
diff --git a/src/components/JobTitle/JobTitlePageProvider.js b/src/components/JobTitle/JobTitlePageProvider.js
index a1dd26029..f012c553d 100644
--- a/src/components/JobTitle/JobTitlePageProvider.js
+++ b/src/components/JobTitle/JobTitlePageProvider.js
@@ -10,11 +10,11 @@ import Overview from '../CompanyAndJobTitle/Overview';
 import InterviewExperiences from '../CompanyAndJobTitle/InterviewExperiences';
 import WorkExperiences from '../CompanyAndJobTitle/WorkExperiences';
 import CompanyJobTitleTimeAndSalary from '../CompanyAndJobTitle/TimeAndSalary';
-import NotFound from '../common/NotFound';
+import NotFound from 'common/NotFound';
 import { withPermission } from 'common/permission-context';
 
-import { tabType, pageType } from '../../constants/companyJobTitle';
-import jobTitleActions from '../../actions/jobTitle';
+import { tabType, pageType } from 'constants/companyJobTitle';
+import jobTitleActions from 'actions/jobTitle';
 import {
   interviewExperiences,
   workExperiences,
@@ -25,7 +25,7 @@ import {
   overtimeFrequencyCount,
   status,
   jobTitle as jobTitleSelector,
-} from '../../selectors/companyAndJobTitle';
+} from 'selectors/companyAndJobTitle';
 import { paramsSelector } from 'common/routing/selectors';
 import withRouteParameter from '../ExperienceSearch/withRouteParameter';
 
diff --git a/src/components/LaborRightsMenu/index.js b/src/components/LaborRightsMenu/index.js
index a0775fcbf..bc0e9a1bb 100644
--- a/src/components/LaborRightsMenu/index.js
+++ b/src/components/LaborRightsMenu/index.js
@@ -6,8 +6,8 @@ import Columns from 'common/Columns';
 import { Section, Wrapper, Heading } from 'common/base';
 import FanPageBlock from 'common/FanPageBlock';
 import { useShareLink } from 'hooks/experiments';
-import { queryMenu } from '../../actions/laborRights';
-import { isFetching, isError, isFetched } from '../../constants/status';
+import { queryMenu } from 'actions/laborRights';
+import { isFetching, isError, isFetched } from 'constants/status';
 import LaborRightsEntry from './LaborRightsEntry';
 import StaticHelmet from 'common/StaticHelmet';
 import styles from './LaborRightsEntry.module.css';
diff --git a/src/components/LaborRightsSingle/index.js b/src/components/LaborRightsSingle/index.js
index 4a812dce7..a2788ef64 100644
--- a/src/components/LaborRightsSingle/index.js
+++ b/src/components/LaborRightsSingle/index.js
@@ -15,7 +15,7 @@ import {
   queryEntry,
   queryMenuIfUnfetched,
   queryEntryIfUnfetched,
-} from '../../actions/laborRights';
+} from 'actions/laborRights';
 import useEntry, { useNeighborEntry } from './useEntry';
 import useTracking from './useTracking';
 import Body from './Body';
diff --git a/src/components/LandingPage/index.js b/src/components/LandingPage/index.js
index cf4feec39..1bcf6a12b 100644
--- a/src/components/LandingPage/index.js
+++ b/src/components/LandingPage/index.js
@@ -7,8 +7,8 @@ import { compose, setStatic, lifecycle } from 'recompose';
 import { Section, Wrapper, Heading } from 'common/base';
 import Columns from 'common/Columns';
 import ExperienceBlock from '../ExperienceSearch/ExperienceBlock';
-import { queryPopularExperiences } from '../../actions/popularExperiences';
-import { queryMenu } from '../../actions/laborRights';
+import { queryPopularExperiences } from 'actions/popularExperiences';
+import { queryMenu } from 'actions/laborRights';
 import LaborRightsEntry from '../LaborRightsMenu/LaborRightsEntry';
 import Banner from './Banner';
 import StaticHelmet from 'common/StaticHelmet';
diff --git a/src/components/PlanPage/index.js b/src/components/PlanPage/index.js
index b560a15a3..99881007e 100644
--- a/src/components/PlanPage/index.js
+++ b/src/components/PlanPage/index.js
@@ -9,7 +9,7 @@ import { isUnfetched, isFetched } from 'utils/fetchBox';
 import Loading from 'common/Loader';
 import { subscriptionType } from 'constants/subscription';
 
-import { fetchSubscriptionPlans } from '../../actions/payment';
+import { fetchSubscriptionPlans } from 'actions/payment';
 import styles from './PlanPage.module.css';
 import CardSection from './CardSection';
 
diff --git a/src/components/ShareExperience/CampaignTimeAndSalaryForm/index.js b/src/components/ShareExperience/CampaignTimeAndSalaryForm/index.js
index 3a6016d16..42f77eba6 100644
--- a/src/components/ShareExperience/CampaignTimeAndSalaryForm/index.js
+++ b/src/components/ShareExperience/CampaignTimeAndSalaryForm/index.js
@@ -13,14 +13,14 @@ import NotFound from 'common/NotFound';
 import IconHeadingBlock from 'common/IconHeadingBlock';
 import TextInput from 'common/form/TextInput';
 import TextArea from 'common/form/TextArea';
-import fetchingStatus from '../../../constants/status';
+import fetchingStatus from 'constants/status';
 import BasicInfo from '../TimeSalaryForm/BasicInfo';
 import SalaryInfo from '../TimeSalaryForm/SalaryInfo';
 import TimeInfo from '../TimeSalaryForm/TimeInfo';
 import InputTitle from '../common/InputTitle';
 import SubmitArea from '../../../containers/ShareExperience/SubmitAreaContainer';
 import MarkdownParser from '../../LaborRightsSingle/MarkdownParser';
-import { queryCampaignInfoList } from '../../../actions/campaignInfo';
+import { queryCampaignInfoList } from 'actions/campaignInfo';
 
 import timeAndSalaryFormStyles from '../TimeSalaryForm/TimeSalaryForm.module.css';
 import styles from '../CampaignTimeAndSalaryForm/CampaignTimeAndSalaryForm.module.css';
diff --git a/src/components/ShareExperience/InterviewForm/TypeForm/index.js b/src/components/ShareExperience/InterviewForm/TypeForm/index.js
index be3e25ca4..b2f3bc3cd 100644
--- a/src/components/ShareExperience/InterviewForm/TypeForm/index.js
+++ b/src/components/ShareExperience/InterviewForm/TypeForm/index.js
@@ -28,19 +28,19 @@ import FormBuilder from 'common/FormBuilder';
 import ConfirmModal from 'common/FormBuilder/Modals/ConfirmModal';
 import Header, { CompanyJobTitleHeader } from '../../common/TypeFormHeader';
 import Footer from '../../common/TypeFormFooter';
-import { getCompaniesSearch } from '../../../../apis/companySearchApi';
-import { getJobTitlesSearch } from '../../../../apis/jobTitleSearchApi';
+import { getCompaniesSearch } from 'apis/companySearchApi';
+import { getJobTitlesSearch } from 'apis/jobTitleSearchApi';
 import {
   experienceCountSelector,
   timeAndSalaryCountSelector,
-} from '../../../../selectors/countSelector';
+} from 'selectors/countSelector';
 import {
   createInterviewExperience,
   queryExperienceCountIfUnfetched,
-} from '../../../../actions/experiences';
-import { queryTimeAndSalaryCountIfUnfetched } from '../../../../actions/timeAndSalary';
-import { GA_CATEGORY, GA_ACTION } from '../../../../constants/gaConstants';
-import PIXEL_CONTENT_CATEGORY from '../../../../constants/pixelConstants';
+} from 'actions/experiences';
+import { queryTimeAndSalaryCountIfUnfetched } from 'actions/timeAndSalary';
+import { GA_CATEGORY, GA_ACTION } from 'constants/gaConstants';
+import PIXEL_CONTENT_CATEGORY from 'constants/pixelConstants';
 import {
   DATA_KEY_COMPANY_NAME,
   DATA_KEY_JOB_TITLE,
diff --git a/src/components/TimeAndSalary/SearchScreen/SearchScreen.js b/src/components/TimeAndSalary/SearchScreen/SearchScreen.js
index 48d70e04b..f8c206020 100644
--- a/src/components/TimeAndSalary/SearchScreen/SearchScreen.js
+++ b/src/components/TimeAndSalary/SearchScreen/SearchScreen.js
@@ -10,10 +10,7 @@ import Pagination from 'common/Pagination';
 import { isFetching, isFetched, isUnfetched } from 'constants/status';
 import { pageType } from 'constants/companyJobTitle';
 import { useQuery } from 'hooks/routing';
-import {
-  queryKeyword,
-  keywordMinLength,
-} from '../../../actions/timeAndSalarySearch';
+import { queryKeyword, keywordMinLength } from 'actions/timeAndSalarySearch';
 import {
   keywordSelector,
   pageSelector,
diff --git a/src/components/TimeAndSalary/TimeAndSalaryBoard/index.js b/src/components/TimeAndSalary/TimeAndSalaryBoard/index.js
index 6e30c9416..38acaa3a8 100644
--- a/src/components/TimeAndSalary/TimeAndSalaryBoard/index.js
+++ b/src/components/TimeAndSalary/TimeAndSalaryBoard/index.js
@@ -19,11 +19,11 @@ import AboutThisJobModal from '../common/AboutThisJobModal';
 import withModal from '../common/withModal';
 import styles from './TimeAndSalaryBoard.module.css';
 import commonStyles from '../views/view.module.css';
-import { isFetching, isFetched } from '../../../constants/status';
-import { queryTimeAndSalary } from '../../../actions/timeAndSalaryBoard';
+import { isFetching, isFetched } from 'constants/status';
+import { queryTimeAndSalary } from 'actions/timeAndSalaryBoard';
 import DashBoardTable from '../common/DashBoardTable';
 import { toQsString, queryParser } from './helper';
-import { DATA_NUM_PER_PAGE } from '../../../constants/timeAndSalarSearch';
+import { DATA_NUM_PER_PAGE } from 'constants/timeAndSalarSearch';
 import renderHelmet from './helmet';
 
 const pathParameters = {
diff --git a/src/components/common/ProgressBarWithDataCount/ProgressBarWithDataCount.js b/src/components/common/ProgressBarWithDataCount/ProgressBarWithDataCount.js
index 03ca5fcd1..0ff957d92 100644
--- a/src/components/common/ProgressBarWithDataCount/ProgressBarWithDataCount.js
+++ b/src/components/common/ProgressBarWithDataCount/ProgressBarWithDataCount.js
@@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import ProgressBar from 'common/ProgressBar';
 import { goalNum } from '../../../constants/dataProgress';
-import { queryExperienceCountIfUnfetched as queryExperienceCount } from '../../../actions/experiences';
-import { experienceCountSelector } from '../../../selectors/countSelector';
+import { queryExperienceCountIfUnfetched as queryExperienceCount } from 'actions/experiences';
+import { experienceCountSelector } from 'selectors/countSelector';
 
 const ProgressBarWithDataCount = props => {
   const experienceCount = useSelector(experienceCountSelector);
diff --git a/src/components/common/facebook/FacebookWrapper.js b/src/components/common/facebook/FacebookWrapper.js
index 05728e1be..30f3bd512 100644
--- a/src/components/common/facebook/FacebookWrapper.js
+++ b/src/components/common/facebook/FacebookWrapper.js
@@ -1,42 +1,22 @@
-import React, { Component } from 'react';
+import React, { useContext, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import withFB from './withFB';
+import FacebookContext from 'contexts/FacebookContext';
 
-class FacebookWrapper extends Component {
-  constructor(props) {
-    super(props);
-    this.container = null;
-    this.handleContainer = this.handleContainer.bind(this);
-  }
+const FacebookWrapper = ({ children }) => {
+  const FB = useContext(FacebookContext);
+  const container = useRef(null);
 
-  componentDidMount() {
-    if (this.props.FB && this.container) {
-      this.props.FB.XFBML.parse(this.container);
+  useEffect(() => {
+    if (FB && container.current) {
+      FB.XFBML.parse(container.current);
     }
-  }
+  });
 
-  // 讓 FB 重新 parse children
-  componentDidUpdate() {
-    // if FB instance
-    if (this.props.FB && this.container) {
-      this.props.FB.XFBML.parse(this.container);
-    }
-  }
-
-  handleContainer(container) {
-    this.container = container;
-  }
-
-  render() {
-    const { children } = this.props;
-
-    return <div ref={this.handleContainer}>{children}</div>;
-  }
-}
+  return <div ref={container}>{children}</div>;
+};
 
 FacebookWrapper.propTypes = {
   children: PropTypes.node,
-  FB: PropTypes.object,
 };
 
-export default withFB(FacebookWrapper);
+export default FacebookWrapper;
diff --git a/src/containers/CampaignTimeAndSalary/CampaignTimeAndSalaryBoard.js b/src/containers/CampaignTimeAndSalary/CampaignTimeAndSalaryBoard.js
index 6e6847b86..40f1d2bcf 100644
--- a/src/containers/CampaignTimeAndSalary/CampaignTimeAndSalaryBoard.js
+++ b/src/containers/CampaignTimeAndSalary/CampaignTimeAndSalaryBoard.js
@@ -1,14 +1,14 @@
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import CampaignTimeAndSalaryBoard from '../../components/CampaignTimeAndSalary/CampaignTimeAndSalaryBoard';
-import { queryCampaignInfoListIfNeeded } from '../../actions/campaignInfo';
-import { queryCampaignTimeAndSalary } from '../../actions/campaignTimeAndSalaryBoard';
+import { queryCampaignInfoListIfNeeded } from 'actions/campaignInfo';
+import { queryCampaignTimeAndSalary } from 'actions/campaignTimeAndSalaryBoard';
 import {
   campaignNameSelector,
   campaignEntriesSelector,
   campaignEntriesStatusSelector,
   campaignEntriesErrorSelector,
-} from '../../selectors/campaignSelector';
+} from 'selectors/campaignSelector';
 
 const mapStateToProps = (state, { match }) => ({
   campaignName: campaignNameSelector(match),
diff --git a/src/containers/CampaignTimeAndSalary/NotFound.js b/src/containers/CampaignTimeAndSalary/NotFound.js
index 034664ce5..6c06d19a2 100644
--- a/src/containers/CampaignTimeAndSalary/NotFound.js
+++ b/src/containers/CampaignTimeAndSalary/NotFound.js
@@ -1,13 +1,13 @@
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import NotFound from '../../components/CampaignTimeAndSalary/NotFound';
-import { queryCampaignInfoListIfNeeded } from '../../actions/campaignInfo';
+import { queryCampaignInfoListIfNeeded } from 'actions/campaignInfo';
 import {
   campaignNameSelector,
   campaignEntriesSelector,
   campaignEntriesStatusSelector,
   campaignEntriesErrorSelector,
-} from '../../selectors/campaignSelector';
+} from 'selectors/campaignSelector';
 
 const mapStateToProps = (state, { match }) => ({
   campaignName: campaignNameSelector(match),
diff --git a/src/containers/CampaignTimeAndSalary/index.js b/src/containers/CampaignTimeAndSalary/index.js
index 7b914bf41..f1adaf551 100644
--- a/src/containers/CampaignTimeAndSalary/index.js
+++ b/src/containers/CampaignTimeAndSalary/index.js
@@ -1,13 +1,13 @@
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import CampaignTimeAndSalary from '../../components/CampaignTimeAndSalary';
-import { queryCampaignInfoListIfNeeded } from '../../actions/campaignInfo';
+import { queryCampaignInfoListIfNeeded } from 'actions/campaignInfo';
 import {
   campaignNameSelector,
   campaignEntriesSelector,
   campaignEntriesStatusSelector,
   campaignEntriesErrorSelector,
-} from '../../selectors/campaignSelector';
+} from 'selectors/campaignSelector';
 
 const mapStateToProps = (state, { match }) => ({
   campaignName: campaignNameSelector(match),
diff --git a/src/containers/ExperienceDetail/ReportFormContainer.js b/src/containers/ExperienceDetail/ReportFormContainer.js
index 600122420..5f90f6f4c 100644
--- a/src/containers/ExperienceDetail/ReportFormContainer.js
+++ b/src/containers/ExperienceDetail/ReportFormContainer.js
@@ -3,8 +3,8 @@ import { connect } from 'react-redux';
 
 import { withFB } from 'common/facebook';
 import ReportForm from '../../components/ExperienceDetail/ReportForm/ReportForm';
-import { loginWithFB } from '../../actions/auth';
-import { createReport } from '../../actions/reports';
+import { loginWithFB } from 'actions/auth';
+import { createReport } from 'actions/reports';
 
 const mapStateToProps = state => ({
   auth: state.auth,
diff --git a/src/containers/ExperienceDetail/index.js b/src/containers/ExperienceDetail/index.js
index 87796ef4b..0de74fe3f 100644
--- a/src/containers/ExperienceDetail/index.js
+++ b/src/containers/ExperienceDetail/index.js
@@ -2,7 +2,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
 import ExperienceDetail from '../../components/ExperienceDetail';
-import { fetchExperience } from '../../actions/experienceDetail';
+import { fetchExperience } from 'actions/experienceDetail';
 
 const mapStateToProps = state => ({
   experienceDetail: state.experienceDetail,
diff --git a/src/containers/ExperienceSearchPage.js b/src/containers/ExperienceSearchPage.js
index 9b86a4314..f0aa92ab9 100644
--- a/src/containers/ExperienceSearchPage.js
+++ b/src/containers/ExperienceSearchPage.js
@@ -3,9 +3,9 @@ import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 
 import ExperienceSearch from '../components/ExperienceSearch';
-import * as ExperienceSearchActions from '../actions/experienceSearch';
+import * as ExperienceSearchActions from 'actions/experienceSearch';
 
-import { loadingStatusSelector } from '../selectors/experienceSearchSelector';
+import { loadingStatusSelector } from 'selectors/experienceSearchSelector';
 
 const mapStateToProps = createStructuredSelector({
   experienceSearch: state => state.experienceSearch,
diff --git a/src/containers/LaborRightsMenu.js b/src/containers/LaborRightsMenu.js
index 87de0b861..718875562 100644
--- a/src/containers/LaborRightsMenu.js
+++ b/src/containers/LaborRightsMenu.js
@@ -1,11 +1,11 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { queryMenuIfUnfetched } from '../actions/laborRights';
+import { queryMenuIfUnfetched } from 'actions/laborRights';
 import {
   menuEntriesSelector,
   menuStatusSelector,
   menuErrorSelector,
-} from '../selectors/laborRightsSelector';
+} from 'selectors/laborRightsSelector';
 import LaborRightsMenu from '../components/LaborRightsMenu';
 
 const mapStateToProps = state => ({
diff --git a/src/hooks/viewLog/index.js b/src/hooks/viewLog/index.js
new file mode 100644
index 000000000..29af33ef2
--- /dev/null
+++ b/src/hooks/viewLog/index.js
@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+import { useToken } from 'hooks/auth';
+import viewLogApi from 'apis/viewLogApi';
+
+export const useViewExperiences = () => {
+  const token = useToken();
+  return useCallback(
+    ({ contentIds, referrer }) => {
+      return viewLogApi.viewExperiences({ token, contentIds, referrer });
+    },
+    [token],
+  );
+};
+
+export const useViewSalaryWorkTimes = () => {
+  const token = useToken();
+  return useCallback(
+    ({ contentIds, referrer }) => {
+      return viewLogApi.viewSalaryWorkTimes({ token, contentIds, referrer });
+    },
+    [token],
+  );
+};
diff --git a/src/razzle-plugins/alias.js b/src/razzle-plugins/alias.js
index d2e0ef659..c1a920ed8 100644
--- a/src/razzle-plugins/alias.js
+++ b/src/razzle-plugins/alias.js
@@ -8,14 +8,15 @@ module.exports = config => {
     // jsconfig.json
     // package.json
     // .flowconfig
+    actions: path.resolve('./src/actions'),
+    apis: path.resolve('./src/apis'),
     common: path.resolve('./src/components/common'),
-    utils: path.resolve('./src/utils'),
+    constants: path.resolve('./src/constants'),
+    contexts: path.resolve('./src/contexts'),
     graphql: path.resolve('./src/graphql'),
     hooks: path.resolve('./src/hooks'),
-    contexts: path.resolve('./src/contexts'),
-    constants: path.resolve('./src/constants'),
-    actions: path.resolve('./src/actions'),
     selectors: path.resolve('./src/selectors'),
+    utils: path.resolve('./src/utils'),
   };
   return config;
 };
diff --git a/src/reducers/campaignInfo.js b/src/reducers/campaignInfo.js
index 0d3f5e3fe..3e14a3180 100644
--- a/src/reducers/campaignInfo.js
+++ b/src/reducers/campaignInfo.js
@@ -2,8 +2,8 @@ import R from 'ramda';
 import { fromJS } from 'immutable';
 import createReducer from 'utils/createReducer';
 
-import { SET_LIST_DATA, SET_LIST_STATUS } from '../actions/campaignInfo';
-import fetchingStatus from '../constants/status';
+import { SET_LIST_DATA, SET_LIST_STATUS } from 'actions/campaignInfo';
+import fetchingStatus from 'constants/status';
 
 /*
  * entries: name ->
diff --git a/src/reducers/campaignTimeAndSalaryBoard.js b/src/reducers/campaignTimeAndSalaryBoard.js
index 9513525aa..32aa72668 100644
--- a/src/reducers/campaignTimeAndSalaryBoard.js
+++ b/src/reducers/campaignTimeAndSalaryBoard.js
@@ -4,8 +4,8 @@ import createReducer from 'utils/createReducer';
 import {
   SET_BOARD_DATA,
   SET_BOARD_STATUS,
-} from '../actions/campaignTimeAndSalaryBoard';
-import fetchingStatus from '../constants/status';
+} from 'actions/campaignTimeAndSalaryBoard';
+import fetchingStatus from 'constants/status';
 
 const preloadedState = fromJS({
   campaignName: '',
diff --git a/src/reducers/company.js b/src/reducers/company.js
index 392942cf7..c3aff6998 100644
--- a/src/reducers/company.js
+++ b/src/reducers/company.js
@@ -1,5 +1,5 @@
 import createReducer from 'utils/createReducer';
-import { SET_STATUS } from '../actions/company';
+import { SET_STATUS } from 'actions/company';
 
 const preloadedState = {};
 
diff --git a/src/reducers/companyIndex.js b/src/reducers/companyIndex.js
index 1436159c2..1e57a84a6 100644
--- a/src/reducers/companyIndex.js
+++ b/src/reducers/companyIndex.js
@@ -1,5 +1,5 @@
 import createReducer from 'utils/createReducer';
-import { SET_INDEX_STATUS } from '../actions/company';
+import { SET_INDEX_STATUS } from 'actions/company';
 
 const preloadedState = {};
 
diff --git a/src/reducers/experienceDetail.js b/src/reducers/experienceDetail.js
index e6ca6bcd5..caa23ae36 100644
--- a/src/reducers/experienceDetail.js
+++ b/src/reducers/experienceDetail.js
@@ -1,10 +1,10 @@
 import { fromJS } from 'immutable';
 import createReducer from 'utils/createReducer';
-import fetchingStatus from '../constants/status';
+import fetchingStatus from 'constants/status';
 import {
   SET_EXPERIENCE,
   SET_EXPERIENCE_STATUS,
-} from '../actions/experienceDetail';
+} from 'actions/experienceDetail';
 
 const preloadedState = fromJS({
   experienceStatus: fetchingStatus.UNFETCHED,
diff --git a/src/reducers/experienceSearch.js b/src/reducers/experienceSearch.js
index 4b016fc6d..20f2dc48e 100644
--- a/src/reducers/experienceSearch.js
+++ b/src/reducers/experienceSearch.js
@@ -1,12 +1,12 @@
 import { Map, fromJS } from 'immutable';
 
 import createReducer from 'utils/createReducer';
-import statusConstant from '../constants/status';
+import statusConstant from 'constants/status';
 import {
   SET_KEYWORDS,
   SET_SORT_AND_EXPERIENCES,
   SET_LOADING_STATUS,
-} from '../actions/experienceSearch';
+} from 'actions/experienceSearch';
 
 const preloadedState = Map({
   sort: 'created_at',
diff --git a/src/reducers/experiences.js b/src/reducers/experiences.js
index 2d8aef2aa..f02b64129 100644
--- a/src/reducers/experiences.js
+++ b/src/reducers/experiences.js
@@ -1,8 +1,8 @@
 import { fromJS } from 'immutable';
 import createReducer from 'utils/createReducer';
 
-import { SET_COUNT_DATA } from '../actions/experiences';
-import fetchingStatus from '../constants/status';
+import { SET_COUNT_DATA } from 'actions/experiences';
+import fetchingStatus from 'constants/status';
 
 const preloadedState = fromJS({
   count: 0,
diff --git a/src/reducers/jobTitle.js b/src/reducers/jobTitle.js
index c34f1bcfe..76df86dec 100644
--- a/src/reducers/jobTitle.js
+++ b/src/reducers/jobTitle.js
@@ -1,5 +1,5 @@
 import createReducer from 'utils/createReducer';
-import { SET_STATUS } from '../actions/jobTitle';
+import { SET_STATUS } from 'actions/jobTitle';
 
 const preloadedState = {};
 
diff --git a/src/reducers/jobTitleIndex.js b/src/reducers/jobTitleIndex.js
index d0c682734..a2b5a6fd3 100644
--- a/src/reducers/jobTitleIndex.js
+++ b/src/reducers/jobTitleIndex.js
@@ -1,5 +1,5 @@
 import createReducer from 'utils/createReducer';
-import { SET_INDEX_STATUS } from '../actions/jobTitle';
+import { SET_INDEX_STATUS } from 'actions/jobTitle';
 
 const preloadedState = {};
 
diff --git a/src/reducers/laborRights.js b/src/reducers/laborRights.js
index e29f1df16..55861dbbe 100644
--- a/src/reducers/laborRights.js
+++ b/src/reducers/laborRights.js
@@ -6,8 +6,8 @@ import {
   SET_ENTRY_QUERY_START,
   SET_ENTRY_QUERY_DONE,
   SET_ENTRY_QUERY_ERROR,
-} from '../actions/laborRights';
-import fetchingStatus from '../constants/status';
+} from 'actions/laborRights';
+import fetchingStatus from 'constants/status';
 
 // menuEntries: [{id, title, coverUrl}]
 // entries: {id: {data, status, error}}
diff --git a/src/reducers/payment.js b/src/reducers/payment.js
index efae40300..6b0ae883b 100644
--- a/src/reducers/payment.js
+++ b/src/reducers/payment.js
@@ -5,7 +5,7 @@ import {
   SET_PAYMENT_RECORD,
   SET_SUBSCRIPTION_PLANS,
   SET_MY_CURRENT_SUBSCRIPTION,
-} from '../actions/payment';
+} from 'actions/payment';
 
 const preloadedState = {
   paymentRecord: getUnfetched(),
diff --git a/src/reducers/paymentPersist.js b/src/reducers/paymentPersist.js
index e85b67882..5767d7f26 100644
--- a/src/reducers/paymentPersist.js
+++ b/src/reducers/paymentPersist.js
@@ -1,6 +1,6 @@
 import createReducer from 'utils/createReducer';
 
-import { SET_REDIRECT_URL } from '../actions/payment';
+import { SET_REDIRECT_URL } from 'actions/payment';
 
 const persistPreloadedState = {
   redirectUrl: null,
diff --git a/src/reducers/popularCompanyAverageSalary.js b/src/reducers/popularCompanyAverageSalary.js
index 952e42863..c4f389094 100644
--- a/src/reducers/popularCompanyAverageSalary.js
+++ b/src/reducers/popularCompanyAverageSalary.js
@@ -1,7 +1,7 @@
 import createReducer from 'utils/createReducer';
 
-import { SET_STATUS } from '../actions/popularCompanyAverageSalary';
-import fetchingStatus from '../constants/status';
+import { SET_STATUS } from 'actions/popularCompanyAverageSalary';
+import fetchingStatus from 'constants/status';
 
 const preloadedState = {
   data: [],
diff --git a/src/reducers/popularExperiences.js b/src/reducers/popularExperiences.js
index e28ab1fba..8b8839422 100644
--- a/src/reducers/popularExperiences.js
+++ b/src/reducers/popularExperiences.js
@@ -1,8 +1,8 @@
 import { fromJS } from 'immutable';
 import createReducer from 'utils/createReducer';
 
-import { SET_DATA, SET_STATUS } from '../actions/popularExperiences';
-import fetchingStatus from '../constants/status';
+import { SET_DATA, SET_STATUS } from 'actions/popularExperiences';
+import fetchingStatus from 'constants/status';
 
 const preloadedState = fromJS({
   data: [],
diff --git a/src/reducers/popularJobTitleSalaryDistribution.js b/src/reducers/popularJobTitleSalaryDistribution.js
index 638621d3a..0fd86e54e 100644
--- a/src/reducers/popularJobTitleSalaryDistribution.js
+++ b/src/reducers/popularJobTitleSalaryDistribution.js
@@ -1,7 +1,7 @@
 import createReducer from 'utils/createReducer';
 
-import { SET_STATUS } from '../actions/popularJobTitleSalaryDistribution';
-import fetchingStatus from '../constants/status';
+import { SET_STATUS } from 'actions/popularJobTitleSalaryDistribution';
+import fetchingStatus from 'constants/status';
 
 const preloadedState = {
   data: [],
diff --git a/src/reducers/timeAndSalary.js b/src/reducers/timeAndSalary.js
index 975b0a12e..43c51facf 100644
--- a/src/reducers/timeAndSalary.js
+++ b/src/reducers/timeAndSalary.js
@@ -1,8 +1,8 @@
 import { fromJS } from 'immutable';
 import createReducer from 'utils/createReducer';
 
-import { SET_COUNT_DATA } from '../actions/timeAndSalary';
-import fetchingStatus from '../constants/status';
+import { SET_COUNT_DATA } from 'actions/timeAndSalary';
+import fetchingStatus from 'constants/status';
 
 const preloadedState = fromJS({
   count: 0,
diff --git a/src/reducers/timeAndSalaryBoard.js b/src/reducers/timeAndSalaryBoard.js
index baa8569be..6e69017ba 100644
--- a/src/reducers/timeAndSalaryBoard.js
+++ b/src/reducers/timeAndSalaryBoard.js
@@ -6,8 +6,8 @@ import {
   SET_BOARD_STATUS,
   SET_BOARD_EXTREME_DATA,
   SET_BOARD_EXTREME_STATUS,
-} from '../actions/timeAndSalaryBoard';
-import fetchingStatus from '../constants/status';
+} from 'actions/timeAndSalaryBoard';
+import fetchingStatus from 'constants/status';
 
 const preloadedState = fromJS({
   data: [],
diff --git a/src/reducers/timeAndSalaryCompany.js b/src/reducers/timeAndSalaryCompany.js
index c17fe2b2e..6191fa256 100644
--- a/src/reducers/timeAndSalaryCompany.js
+++ b/src/reducers/timeAndSalaryCompany.js
@@ -4,8 +4,8 @@ import createReducer from 'utils/createReducer';
 import {
   SET_COMPANY_DATA,
   SET_COMPANY_STATUS,
-} from '../actions/timeAndSalaryCompany';
-import fetchingStatus from '../constants/status';
+} from 'actions/timeAndSalaryCompany';
+import fetchingStatus from 'constants/status';
 
 const preloadedState = fromJS({
   companyName: null,
diff --git a/src/reducers/timeAndSalaryJobTitle.js b/src/reducers/timeAndSalaryJobTitle.js
index a617d17ed..926b4a45f 100644
--- a/src/reducers/timeAndSalaryJobTitle.js
+++ b/src/reducers/timeAndSalaryJobTitle.js
@@ -4,8 +4,8 @@ import createReducer from 'utils/createReducer';
 import {
   SET_JOB_TITLE_DATA,
   SET_JOB_TITLE_STATUS,
-} from '../actions/timeAndSalaryJobTitle';
-import fetchingStatus from '../constants/status';
+} from 'actions/timeAndSalaryJobTitle';
+import fetchingStatus from 'constants/status';
 
 const preloadedState = fromJS({
   jobTitle: null,
diff --git a/src/reducers/timeAndSalarySearch.js b/src/reducers/timeAndSalarySearch.js
index 2e4465313..58bcaca21 100644
--- a/src/reducers/timeAndSalarySearch.js
+++ b/src/reducers/timeAndSalarySearch.js
@@ -4,8 +4,8 @@ import createReducer from 'utils/createReducer';
 import {
   SET_SEARCH_DATA,
   SET_SEARCH_STATUS,
-} from '../actions/timeAndSalarySearch';
-import fetchingStatus from '../constants/status';
+} from 'actions/timeAndSalarySearch';
+import fetchingStatus from 'constants/status';
 
 const preloadedState = fromJS({
   keyword: null,
diff --git a/src/reducers/toastNotification.js b/src/reducers/toastNotification.js
index 8d3ddc836..ade0debf8 100644
--- a/src/reducers/toastNotification.js
+++ b/src/reducers/toastNotification.js
@@ -2,7 +2,7 @@ import { propEq, reject } from 'ramda';
 
 import createReducer from 'utils/createReducer';
 
-import { PUSH, REMOVE } from '../actions/toastNotification';
+import { PUSH, REMOVE } from 'actions/toastNotification';
 
 const preloadedState = {
   notifications: [],
diff --git a/src/utils/createReducer.js b/src/utils/createReducer.js
index 4627d7e73..993402654 100644
--- a/src/utils/createReducer.js
+++ b/src/utils/createReducer.js
@@ -1,4 +1,4 @@
-import { LOG_OUT } from '../actions/auth';
+import { LOG_OUT } from 'actions/auth';
 
 const createReducer = (
   initialState,