diff --git a/.DS_Store b/.DS_Store
index 54d714d..d44848d 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/src/Loading.js b/src/Loading.js
index 884747c..9f90ebb 100644
--- a/src/Loading.js
+++ b/src/Loading.js
@@ -1,6 +1,6 @@
 import spinnerPath from './images/spinner.svg';
 import { useRecoilValue } from 'recoil';
-import { loadingState } from './index.js';
+import { loadingState } from './atom.js';
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
diff --git a/src/SearchBox/components/SearchableList.js b/src/SearchBox/components/SearchableList.js
index e84af80..5de6cd6 100644
--- a/src/SearchBox/components/SearchableList.js
+++ b/src/SearchBox/components/SearchableList.js
@@ -1,8 +1,8 @@
 import { getFileContent, getFileList } from '../utils/api.js';
 import { splitCodeToSolutions } from '../utils/format.js';
 import { useState } from 'react';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { solutionState, loadingState, solutionNoState } from '../../index.js';
+import { useSetRecoilState } from 'recoil';
+import { solutionState, loadingState, solutionNoState } from '../../atom.js';
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
@@ -77,7 +77,7 @@ const FileListContainer = styled.div`
 // `;
 
 export default function SearchableList() {
-  let [fileListHTML, changeState] = useState('');
+  const [fileListHTML, setFileListHTML] = useState('');
   const setSolutionInfo = useSetRecoilState(solutionState);
   const setLoadingState = useSetRecoilState(loadingState);
   const setSolutionNo = useSetRecoilState(solutionNoState);
@@ -89,8 +89,8 @@ export default function SearchableList() {
       fileList[level] = await getFileList(level);
       delete fileList[level][0];
     }
-    changeState(
-      (fileListHTML = POSSIBLE_LEVELS.map(
+    setFileListHTML(
+      POSSIBLE_LEVELS.map(
         level => `
       <ul class= "file-list ${`level-${level}`}">
       <div class="levelTitle">[level ${level}]</div>
@@ -103,7 +103,7 @@ export default function SearchableList() {
           )
           .join('')}
       </ul>`,
-      ).join('')),
+      ).join(''),
     );
     setLoadingState(false);
   })();
diff --git a/src/SearchResult/SearchResult.js b/src/SearchResult/SearchResult.js
index 09fc20f..a6d064d 100644
--- a/src/SearchResult/SearchResult.js
+++ b/src/SearchResult/SearchResult.js
@@ -1,8 +1,8 @@
 import { formattedFileName } from './utils/format.js';
 import { copyText } from './utils/copyText.js';
 import { useEffect, useState } from 'react';
-import { useRecoilState, useSetRecoilState, useRecoilValue } from 'recoil';
-import { solutionState, solutionNoState } from '../index.js';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { solutionState, solutionNoState } from '../atom.js';
 import styled from 'styled-components';
 
 const SearchResultDiv = styled.div`
@@ -131,10 +131,9 @@ const IsCopied = styled.div`
 `;
 
 export default function SearchResult() {
-  const [{ fileName, solution }] = useRecoilState(solutionState);
-  const solutionNo = useRecoilValue(solutionNoState);
-  const setSolutionNo = useSetRecoilState(solutionNoState);
-  let [copyMessage, changeCopyMessage] = useState();
+  const { fileName, solution } = useRecoilValue(solutionState);
+  const [solutionNo, setSolutionNo] = useRecoilState(solutionNoState);
+  const [copyMessage, changeCopyMessage] = useState();
   const [prev, setPrev] = useState(false);
   const [next, setNext] = useState(false);
 
@@ -146,17 +145,17 @@ export default function SearchResult() {
   function copyCode(e) {
     const src = e.target.previousElementSibling;
     copyText(src);
-    changeCopyMessage((copyMessage = ' 📋 클립보드에 복사됨!'));
+    changeCopyMessage(' 📋 클립보드에 복사됨!');
     setTimeout(() => {
-      changeCopyMessage((copyMessage = ''));
+      changeCopyMessage('');
     }, 1000);
   }
 
   function showdifferentSolution(e) {
     if (e.target.innerHTML === '이전 해설' && solutionNo > 0)
-      setSolutionNo(no => no - 1);
+      setSolutionNo(solutionNo - 1);
     if (e.target.innerHTML === '다음 해설' && solutionNo < solution.length - 1)
-      setSolutionNo(no => no + 1);
+      setSolutionNo(solutionNo + 1);
   }
 
   return (
diff --git a/src/atom.js b/src/atom.js
new file mode 100644
index 0000000..5138d4f
--- /dev/null
+++ b/src/atom.js
@@ -0,0 +1,20 @@
+import { atom } from 'recoil';
+
+export const solutionState = atom({
+  key: 'solutionState',
+  default: {
+    level: 1,
+    fileName: '',
+    solution: [],
+  },
+});
+
+export const solutionNoState = atom({
+  key: 'solutionNoState',
+  default: 0,
+});
+
+export const loadingState = atom({
+  key: 'loadingState',
+  default: true,
+});
diff --git a/src/index.js b/src/index.js
index c4a9d04..9795e39 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,32 +1,13 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { RecoilRoot, atom } from "recoil";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RecoilRoot } from 'recoil';
+import App from './App';
 
-export const solutionState = atom({
-  key: "solutionState",
-  default: {
-    level: 1,
-    fileName: "",
-    solution: [],
-  },
-});
-
-export const solutionNoState = atom({
-  key: "solutionNoState",
-  default: 0,
-});
-
-export const loadingState = atom({
-  key: "loadingState",
-  default: true,
-});
-
-const root = ReactDOM.createRoot(document.getElementById("root"));
+const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <RecoilRoot>
       <App />
     </RecoilRoot>
-  </React.StrictMode>
+  </React.StrictMode>,
 );