diff --git a/apps/wiki/components/(modal)/Merge/index.tsx b/apps/wiki/components/(modal)/Merge/index.tsx
new file mode 100644
index 0000000..08f6ff5
--- /dev/null
+++ b/apps/wiki/components/(modal)/Merge/index.tsx
@@ -0,0 +1,12 @@
+import ResolverContainer from "@/components/Resolver";
+import * as styles from "../style.css";
+
+const Merge = ({ title, contents }: { title: string; contents: string }) => {
+  return (
+    <div className={styles.background}>
+      <ResolverContainer title={title} contents={contents} />
+    </div>
+  );
+};
+
+export default Merge;
diff --git a/apps/wiki/components/Container/index.tsx b/apps/wiki/components/Container/index.tsx
index f83f9e2..c8a36d5 100644
--- a/apps/wiki/components/Container/index.tsx
+++ b/apps/wiki/components/Container/index.tsx
@@ -16,11 +16,11 @@ interface Props extends PropsWithChildren {
   title: string;
   docsType: string;
   lastModifiedAt?: Date;
-  docsDetail?: boolean;
+  isDocsDetail?: boolean;
   id?: number;
 }
 
-const Container = ({ docsType, title, lastModifiedAt, docsDetail, id, children }: Props) => {
+const Container = ({ docsType, title, lastModifiedAt, isDocsDetail, id, children }: Props) => {
   const { mutate } = useDeleteDocsMutation();
   const { formatDate } = useDate();
   const { isAdmin, user, isLoggedIn } = useUser();
@@ -59,11 +59,11 @@ const Container = ({ docsType, title, lastModifiedAt, docsDetail, id, children }
       <hgroup className={styles.hgroup}>
         <div className={styles.titleBox}>
           <h1 className={styles.title}>부마위키:{title}</h1>
-          {docsDetail && lastModifiedAt && (
+          {isDocsDetail && (
             <span className={styles.lastModifiedAt}>최근 편집 · {formatDate(lastModifiedAt)}</span>
           )}
         </div>
-        {docsDetail && (
+        {isDocsDetail && (
           <div className={styles.utilityBox}>
             <button onClick={handleDocsEditClick} className={styles.editButton}>
               문서 편집
diff --git a/apps/wiki/components/Editor/Editor.tsx b/apps/wiki/components/Editor/Editor.tsx
index a714618..597ff41 100644
--- a/apps/wiki/components/Editor/Editor.tsx
+++ b/apps/wiki/components/Editor/Editor.tsx
@@ -18,204 +18,225 @@ import DragDropUpload from "../DragDropUpload";
 import PasteUpload from "../PasteUpload";
 import FrameEditor from "../FrameEditor";
 import FrameEncoder from "../FrameEncoder";
+import Merge from "../(modal)/Merge";
 import * as styles from "./style.css";
 import DocsExample from "./DocsExample";
+import { ERROR } from "@/constants";
 
 interface EditorProps {
   contents?: string;
   title?: string;
   docsType?: string;
+  version?: number;
   mode: EditorType.EDIT | EditorType.CREATE;
 }
 
-const Editor = memo(({ contents = "", title = "", docsType = "", mode }: EditorProps) => {
-  const { mutateAsync: create } = useCreateDocsMutation();
-  const { mutateAsync: upload } = useUploadImageMutation();
-  const { mutateAsync: update } = useUpdateDocsMutation();
-  const queryClient = useQueryClient();
-  const { getValidYearList } = useDate();
-  const { openToast, openConfirm } = useModal();
-  const router = useRouter();
-  const [cursorPosition, setCursorPosition] = useState(0);
-  const [isChanged, setIsChanged] = useState(false);
-  const [docs, setDocs] = useState({
-    enroll: 0,
-    title,
-    contents: contents.replaceAll("<br>", "\n"),
-    docsType,
-  });
-  const isFrame = docs.docsType === "FRAME";
+const Editor = memo(
+  ({ contents = "", title = "", docsType = "", version = 0, mode }: EditorProps) => {
+    const { mutateAsync: create } = useCreateDocsMutation();
+    const { mutateAsync: upload } = useUploadImageMutation();
+    const { mutateAsync: update } = useUpdateDocsMutation();
+    const queryClient = useQueryClient();
+    const { getValidYearList } = useDate();
+    const { openToast, openConfirm } = useModal();
+    const router = useRouter();
+    const [cursorPosition, setCursorPosition] = useState(0);
+    const [isChanged, setIsChanged] = useState(false);
+    const { openModal } = useModal();
+    const [docs, setDocs] = useState({
+      enroll: 0,
+      title,
+      contents: contents.replaceAll("<br>", "\n"),
+      docsType,
+      version,
+    });
+    const isFrame = docs.docsType === "FRAME";
 
-  const uploadImage = async (file: File) => {
-    if (!file) return;
-    const { url } = await upload(file);
-    setIsChanged((prev) => !prev);
-    const position = isFrame && cursorPosition === 0 ? 26 : cursorPosition;
-    const beforeContent = docs.contents.substring(0, position);
-    const imageTag = `<사진 {200px}>${url}</사진>`;
-    const afterContent = docs.contents.substring(position, docs.contents.length);
-    setDocs({ ...docs, contents: `${beforeContent}${imageTag}${afterContent}` });
-  };
+    const uploadImage = async (file: File) => {
+      if (!file) return;
+      const { url } = await upload(file);
+      setIsChanged((prev) => !prev);
+      const position = isFrame && cursorPosition === 0 ? 26 : cursorPosition;
+      const beforeContent = docs.contents.substring(0, position);
+      const imageTag = `<사진 {200px}>${url}</사진>`;
+      const afterContent = docs.contents.substring(position, docs.contents.length);
+      setDocs({ ...docs, contents: `${beforeContent}${imageTag}${afterContent}` });
+    };
 
-  const handleDragDropUpload = useCallback((file: File) => uploadImage(file), [uploadImage]);
+    const handleDragDropUpload = useCallback((file: File) => uploadImage(file), [uploadImage]);
 
-  const handleOpenConfirm = () => {
-    if (contents !== docs.contents.trim()) {
-      openConfirm({
-        content: "변경 사항을 삭제하시겠습니까?",
-        onConfirm: () => {
-          setDocs((prev) => ({ ...prev, contents }));
-          setIsChanged((prev) => !prev);
-        },
-      });
-    }
-  };
+    const handleOpenConfirm = () => {
+      if (contents !== docs.contents.trim()) {
+        openConfirm({
+          content: "변경 사항을 삭제하시겠습니까?",
+          onConfirm: () => {
+            setDocs((prev) => ({ ...prev, contents }));
+            setIsChanged((prev) => !prev);
+          },
+        });
+      }
+    };
 
-  const handleCreateDocsClick = async () => {
-    if (!docs.title.trim()) return openToast("제목을 입력해주세요!");
-    if (!docs.enroll) return openToast("문서 연도를 선택해주세요!");
-    if (!docs.docsType) return openToast("문서 분류를 선택해주세요!");
-    if (!docs.contents.trim()) return openToast("내용을 입력해주세요!");
+    const handleCreateDocsClick = async () => {
+      if (!docs.title.trim()) return openToast("제목을 입력해주세요!");
+      if (!docs.enroll) return openToast("문서 연도를 선택해주세요!");
+      if (!docs.docsType) return openToast("문서 분류를 선택해주세요!");
+      if (!docs.contents.trim()) return openToast("내용을 입력해주세요!");
 
-    const invalidCharacters = ["#", "?", "/", "\\", "%"];
-    const isInvalidTitle = invalidCharacters.some((char) => docs.title.includes(char));
-    if (isInvalidTitle)
-      return openToast(`문서명에는 ${invalidCharacters.join(" ")} 기호를 넣을 수 없습니다.`);
+      const invalidCharacters = ["#", "?", "/", "\\", "%"];
+      const isInvalidTitle = invalidCharacters.some((char) => docs.title.includes(char));
+      if (isInvalidTitle)
+        return openToast(`문서명에는 ${invalidCharacters.join(" ")} 기호를 넣을 수 없습니다.`);
 
-    await create(docs, {
-      onSuccess: () => {
-        queryClient.invalidateQueries(docsQuery.list(docs.docsType.toLowerCase()));
-        queryClient.invalidateQueries(docsQuery.lastModified(0));
-        openToast("문서가 생성되었습니다!");
-        router.push(`/docs/${docs.title}`);
-      },
-      onError: (err) => {
-        if (err instanceof AxiosError) openToast(err.response?.data.message);
-      },
-    });
-  };
+      await create(docs, {
+        onSuccess: () => {
+          queryClient.invalidateQueries(docsQuery.list(docs.docsType.toLowerCase()));
+          queryClient.invalidateQueries(docsQuery.lastModified(0));
+          openToast("문서가 생성되었습니다!");
+          router.push(`/docs/${docs.title}`);
+        },
+        onError: (err) => {
+          if (err instanceof AxiosError) openToast(err.response?.data.message);
+        },
+      });
+    };
 
-  const handleEditDocsClick = async () => {
-    if (contents === docs.contents.trim()) return openToast("변경된 사항이 없습니다!");
+    const openConflict = () => {
+      openModal({
+        component: <Merge title={title} contents={docs.contents} />,
+      });
+    };
 
-    await update(docs, {
-      onSuccess: () => {
-        openToast("문서가 수정되었습니다!");
-        queryClient.invalidateQueries(docsQuery.title(encodeURI(docs.title)));
-        queryClient.invalidateQueries(docsQuery.lastModified(0));
-        router.push(`/docs/${docs.title}`);
-      },
-      onError: (err) => {
-        if (err instanceof AxiosError) openToast(err.response?.data.message);
-      },
-    });
-  };
+    const handleEditDocsClick = async () => {
+      if (contents === docs.contents.trim()) return openToast("변경된 사항이 없습니다!");
 
-  const setDocsType = (selectedDocsType: string) => {
-    if (isFrame) setDocs((prev) => ({ ...prev, contents: "" }));
-    setDocs((prev) => ({ ...prev, docsType: selectedDocsType }));
-  };
+      await update(docs, {
+        onSuccess: () => {
+          openToast("문서가 수정되었습니다!");
+          queryClient.invalidateQueries(docsQuery.title(encodeURI(docs.title)));
+          queryClient.invalidateQueries(docsQuery.lastModified(0));
+          router.push(`/docs/${docs.title}`);
+        },
+        onError: (err) => {
+          if (err instanceof AxiosError) {
+            if (err.response?.data.code === ERROR.DOCS_400_2) openConflict();
+            openToast(err.response?.data.message);
+          }
+        },
+      });
+    };
 
-  return (
-    <>
-      <main className={styles.container}>
-        <section className={styles.editorBox}>
-          <input
-            onChange={({ target: { value } }) => setDocs((prev) => ({ ...prev, title: value }))}
-            value={docs.title}
-            placeholder="제목을 입력해주세요"
-            className={styles.titleInput}
-            disabled={mode === EditorType.EDIT}
-          />
-          {mode === EditorType.EDIT ? (
-            <button onClick={handleOpenConfirm} className={styles.undoBtn}>
-              되돌리기
-            </button>
-          ) : (
-            (function SelectEnrollAndDocsTypeComponent() {
-              return (
-                <>
-                  <section className={styles.enrollList}>
-                    {getValidYearList().map((year) => (
-                      <span
-                        key={year}
-                        onClick={() => setDocs((prev) => ({ ...prev, enroll: year }))}
-                      >
-                        &nbsp;<b className={styles.year[String(year === docs.enroll)]}>{year}</b> |
-                      </span>
-                    ))}
-                  </section>
-                  <section className={styles.docsTypeList}>
-                    {[
-                      "ACCIDENT",
-                      "TEACHER",
-                      "MAJOR_TEACHER",
-                      "MENTOR_TEACHER",
-                      "CLUB",
-                      "FREE_CLUB",
-                      "FRAME",
-                    ].map((type) => (
-                      <button
-                        onClick={() => setDocsType(type)}
-                        key={type}
-                        className={styles.docsType[String(type === docs.docsType)]}
-                      >
-                        {CLASSIFY[type]}
-                      </button>
-                    ))}
-                  </section>
-                </>
-              );
-            })()
-          )}
-          {isFrame ? (
-            <FrameEditor
-              mode={mode}
-              docs={docs}
-              setDocs={setDocs}
-              setCursorPosition={setCursorPosition}
-              isChanged={isChanged}
-            />
-          ) : (
-            <textarea
-              onKeyDown={(e) => setCursorPosition((e.target as HTMLTextAreaElement).selectionStart)}
-              onChange={(e) => setDocs((prev) => ({ ...prev, contents: autoClosingTag(e) }))}
-              value={docs.contents}
-              placeholder="문서 내용을 입력해주세요. 사진 또는 동영상을 넣으려면 파일을 드래그&드롭하세요."
-              className={styles.textarea}
+    const setDocsType = (selectedDocsType: string) => {
+      if (isFrame) setDocs((prev) => ({ ...prev, contents: "" }));
+      setDocs((prev) => ({ ...prev, docsType: selectedDocsType }));
+    };
+
+    return (
+      <>
+        <main className={styles.container}>
+          <section className={styles.editorBox}>
+            <input
+              onChange={({ target: { value } }) => setDocs((prev) => ({ ...prev, title: value }))}
+              value={docs.title}
+              placeholder="제목을 입력해주세요"
+              className={styles.titleInput}
+              disabled={mode === EditorType.EDIT}
             />
-          )}
-        </section>
-        <section className={styles.previewBox}>
-          <h1 className={styles.previewTitle}>{docs.title}</h1>
-          {docs.docsType && (
-            <div className={styles.classifyBox}>
-              분류 : <span className={styles.classify}>{CLASSIFY[docs.docsType]}</span>
-            </div>
-          )}
+            {mode === EditorType.EDIT ? (
+              <button onClick={handleOpenConfirm} className={styles.undoBtn}>
+                되돌리기
+              </button>
+            ) : (
+              (function SelectEnrollAndDocsTypeComponent() {
+                return (
+                  <>
+                    <section className={styles.enrollList}>
+                      {getValidYearList().map((year) => (
+                        <span
+                          key={year}
+                          onClick={() => setDocs((prev) => ({ ...prev, enroll: year }))}
+                        >
+                          &nbsp;<b className={styles.year[String(year === docs.enroll)]}>{year}</b>{" "}
+                          |
+                        </span>
+                      ))}
+                    </section>
+                    <section className={styles.docsTypeList}>
+                      {[
+                        "ACCIDENT",
+                        "TEACHER",
+                        "MAJOR_TEACHER",
+                        "MENTOR_TEACHER",
+                        "CLUB",
+                        "FREE_CLUB",
+                        "FRAME",
+                      ].map((type) => (
+                        <button
+                          onClick={() => setDocsType(type)}
+                          key={type}
+                          className={styles.docsType[String(type === docs.docsType)]}
+                        >
+                          {CLASSIFY[type]}
+                        </button>
+                      ))}
+                    </section>
+                  </>
+                );
+              })()
+            )}
+            {isFrame ? (
+              <FrameEditor
+                mode={mode}
+                docs={docs}
+                setDocs={setDocs}
+                setCursorPosition={setCursorPosition}
+                isChanged={isChanged}
+              />
+            ) : (
+              <textarea
+                onKeyDown={(e) =>
+                  setCursorPosition((e.target as HTMLTextAreaElement).selectionStart)
+                }
+                onChange={(e) => setDocs((prev) => ({ ...prev, contents: autoClosingTag(e) }))}
+                value={docs.contents}
+                placeholder="문서 내용을 입력해주세요. 사진 또는 동영상을 넣으려면 파일을 드래그&드롭하세요."
+                className={styles.textarea}
+              />
+            )}
+          </section>
+          <section className={styles.previewBox}>
+            <h1 className={styles.previewTitle}>{docs.title}</h1>
+            {docs.docsType && (
+              <div className={styles.classifyBox}>
+                분류 : <span className={styles.classify}>{CLASSIFY[docs.docsType]}</span>
+              </div>
+            )}
+            {createElement(
+              "section",
+              {
+                class: styles.preview,
+                dangerouslySetInnerHTML: isFrame
+                  ? null
+                  : { __html: documentCompiler(docs.contents) },
+              },
+              isFrame ? <FrameEncoder {...docs} mode="WRITE" /> : null,
+            )}
+          </section>
           {createElement(
-            "section",
+            "button",
             {
-              class: styles.preview,
-              dangerouslySetInnerHTML: isFrame ? null : { __html: documentCompiler(docs.contents) },
+              class: styles.writeButton,
+              onClick: mode === EditorType.EDIT ? handleEditDocsClick : handleCreateDocsClick,
             },
-            isFrame ? <FrameEncoder {...docs} mode="WRITE" /> : null,
+            mode === EditorType.EDIT ? "편집하기" : "생성하기",
           )}
-        </section>
-        {createElement(
-          "button",
-          {
-            class: styles.writeButton,
-            onClick: mode === EditorType.EDIT ? handleEditDocsClick : handleCreateDocsClick,
-          },
-          mode === EditorType.EDIT ? "편집하기" : "생성하기",
-        )}
-        <DocsExample />
-      </main>
-      <DragDropUpload onUpload={handleDragDropUpload} />
-      <PasteUpload onUpload={handleDragDropUpload} />
-    </>
-  );
-});
+          <DocsExample />
+        </main>
+        <DragDropUpload onUpload={handleDragDropUpload} />
+        <PasteUpload onUpload={handleDragDropUpload} />
+      </>
+    );
+  },
+);
 
 export default Editor;
diff --git a/apps/wiki/components/Editor/index.tsx b/apps/wiki/components/Editor/index.tsx
index a2dd7e2..7655a57 100644
--- a/apps/wiki/components/Editor/index.tsx
+++ b/apps/wiki/components/Editor/index.tsx
@@ -14,7 +14,7 @@ const EditorContainer: FC<EditMode | CreateMode> = ({ title, mode }) => {
     ...docsQuery.title(title as string),
     enabled: mode === EditorType.EDIT,
   });
-  const docs = isSuccess ? data : { title: "", contents: "", docsType: "" };
+  const docs = isSuccess ? data : { title: "", contents: "", docsType: "", version: 0 };
 
   return <Editor {...docs} mode={mode} />;
 };
diff --git a/apps/wiki/components/FrameEditor/index.tsx b/apps/wiki/components/FrameEditor/index.tsx
index 0f1712c..2bf22b0 100644
--- a/apps/wiki/components/FrameEditor/index.tsx
+++ b/apps/wiki/components/FrameEditor/index.tsx
@@ -22,6 +22,7 @@ const FrameEditor = ({
       title: string;
       contents: string;
       docsType: string;
+      version: number;
     }>
   >;
   setCursorPosition: Dispatch<SetStateAction<number>>;
diff --git a/apps/wiki/components/Resolver/index.tsx b/apps/wiki/components/Resolver/index.tsx
new file mode 100644
index 0000000..876e7cf
--- /dev/null
+++ b/apps/wiki/components/Resolver/index.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { docsQuery } from "@/services/docs/docs.query";
+import getQueryClient from "@/app/getQueryClient";
+import Resolver from "./resolver";
+
+const ResolverContainer = ({ title, contents }: { title: string; contents: string }) => {
+  const queryClient = getQueryClient();
+  queryClient.prefetchQuery(docsQuery.conflicted({ title, contents }));
+
+  return <Resolver title={title} contents={contents} />;
+};
+
+export default ResolverContainer;
diff --git a/apps/wiki/components/Resolver/resolver.tsx b/apps/wiki/components/Resolver/resolver.tsx
new file mode 100644
index 0000000..6160132
--- /dev/null
+++ b/apps/wiki/components/Resolver/resolver.tsx
@@ -0,0 +1,459 @@
+"use client";
+
+import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { docsQuery } from "@/services/docs/docs.query";
+import { useMergeDocsMutation } from "@/services/docs/docs.mutation";
+import { toast } from "react-toastify";
+import { useRouter } from "next/navigation";
+import { AxiosError } from "axios";
+import useModal from "@/hooks/useModal";
+import Toastify from "../Toastify";
+import * as styles from "./style.css";
+
+interface LineObject {
+  index?: number;
+  operation: string;
+  subOperation?: string;
+  text: string;
+}
+
+interface RangeType {
+  start: number;
+  end: number;
+}
+
+interface PropsType {
+  title: string;
+  contents: string;
+}
+
+const Resolver = ({ title, contents }: PropsType) => {
+  const { mutateAsync: merge } = useMergeDocsMutation();
+  const { data } = useSuspenseQuery(docsQuery.conflicted({ title, contents }));
+  const [arr1, setArr1] = useState(spliting(data.diff1));
+  const [arr2, setArr2] = useState(spliting(data.diff2));
+  const [std, setStd] = useState(spliting(data.originalDocsContent));
+  const [backUp, setBakcUp] = useState({ arr1, std, arr2 });
+
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  const { closeModal } = useModal();
+
+  useEffect(() => {
+    return () => {
+      standardization();
+    };
+  }, []);
+
+  function spliting(arr: LineObject[] | string) {
+    let result: LineObject[] = [];
+    let start = 0;
+    const str =
+      typeof arr === "object"
+        ? arr
+            .map((obj: LineObject) => {
+              if (obj.operation === "INSERT") return `[diff]${obj.text}[/diff]`;
+              if (obj.operation === "DELETE") return `[delete]${obj.text}[/delete]`;
+              return obj.text;
+            })
+            .join("")
+        : arr;
+
+    for (let i = 0; i < str.length; i += 1) {
+      if (str[i] === "\n") {
+        const range = str.substring(start, i + 1);
+        if (range.includes("[/delete]") && range.includes("[diff]")) {
+          result.push({
+            operation: "DELETE",
+            text: `${range.replace(/\[diff\].+?\[\/diff\]/gs, "").replace(/\[diff\].+/gs, "")}`,
+          });
+          result.push({
+            operation: "DIFFERENT",
+            subOperation: "CHANGE",
+            text: `[change]${range.replace(/\[delete\].+?\[\/delete\]/gs, "").replace(/.+\[\/delete\]/gs, "")}`,
+          });
+        } else {
+          result.push({
+            operation: "EQUAL",
+            text: `${range}`,
+          });
+        }
+
+        start = i + 1;
+      }
+
+      if (str.slice(start, str.length).indexOf("\n") === -1) {
+        result.push({ operation: "EQUAL", text: str.substring(start, str.length) });
+        break;
+      }
+    }
+
+    result.forEach((i, index) => {
+      if (
+        (i.text.includes("[delete]") && i.text.includes("[/delete]")) ||
+        (i.text.includes("[delete]") && result[index + 1]?.text.startsWith("[/delete]")) ||
+        (result[index - 1]?.text.endsWith("[delete]\n") && i.text.includes("[/delete]"))
+      ) {
+        i.operation = "DELETE";
+        return;
+      }
+      if (
+        i.text.includes("[delete]") &&
+        !i.text.includes("[/delete]") &&
+        (!i.text.endsWith("[delete]\n") || i.text.length < 12)
+      ) {
+        i.operation = "DELETE1";
+        return;
+      }
+      if (
+        (!i.text.includes("[delete]") && i.text.slice(9).includes("[/delete]")) ||
+        (i.text.slice(9).includes("[/delete]") &&
+          !result[index - 1]?.text.endsWith("[delete]\n")) ||
+        result[index + 1]?.text.startsWith("[/delete]") ||
+        (!result[index - 1]?.text.endsWith("[delete]\n") &&
+          (i.text.endsWith("[/delete]\n") || i.text.endsWith("[/delete]")))
+      ) {
+        i.operation = "DELETE2";
+      }
+    });
+
+    // del체크
+    const delRange: RangeType[] = [];
+    for (let i = 0; i < result.length; i += 1) {
+      if (result[i].operation === "DELETE1") {
+        delRange.push({ start: i, end: 0 });
+      }
+      if (result[i].operation === "DELETE2") {
+        if (delRange.findIndex((item) => item.end === 0) !== -1)
+          delRange[delRange.findIndex((item) => item.end === 0)].end = i;
+      }
+    }
+
+    result.forEach((item, index) => {
+      delRange.forEach((range) => {
+        if (index >= range.start && index <= range.end) {
+          item.text = "";
+          item.operation = "DELETES";
+        }
+      });
+    });
+
+    result.forEach((i, index) => {
+      if (
+        (((i.text.includes("[diff]") && i.text.includes("[/diff]")) ||
+          (i.text.includes("[diff]") && result[index + 1]?.text.startsWith("[/diff]"))) &&
+          !i.text.includes("[diff][/diff]")) ||
+        (result[index - 1]?.text.endsWith("[diff]\n") && i.text.includes("[/diff]"))
+      ) {
+        i.operation = "DIFFERENT";
+        return;
+      }
+      if (
+        (i.text.includes("[diff]") &&
+          !i.text.includes("[/diff]") &&
+          !i.text.endsWith("[diff]\n")) ||
+        (i.text.startsWith("[diff]") && !i.text.includes("[/diff]")) ||
+        (i.text.includes("[diff]") &&
+          i.text.includes("[change]") &&
+          !i.text.includes("[/diff]") &&
+          !result[index + 1]?.text.startsWith("[/diff]")) ||
+        (result[index - 1]?.text.endsWith("[diff]\n") &&
+          result[index - 1]?.operation !== "DIFFERENT1" &&
+          !i.text.includes("[/diff]"))
+      ) {
+        i.operation = "DIFFERENT1";
+        return;
+      }
+      if (
+        (!i.text.includes("[diff]") && result[index + 1]?.text.startsWith("[/diff]")) ||
+        (!i.text.includes("[diff]") && !i.text.startsWith("[/diff]") && i.text.includes("[/diff]"))
+      ) {
+        i.operation = "DIFFERENT2";
+      }
+    });
+
+    // diff체크
+
+    const diffRange: RangeType[] = [];
+    for (let i = 0; i < result.length; i += 1) {
+      if (result[i].operation === "DIFFERENT1") {
+        diffRange.push({ start: i, end: 0 });
+      }
+      if (result[i].operation === "DIFFERENT2") {
+        if (diffRange.findIndex((item) => item.end === 0) !== -1)
+          diffRange[diffRange.findIndex((item) => item.end === 0)].end = i;
+      }
+    }
+
+    result.forEach((item, index) => {
+      diffRange.forEach((range) => {
+        if (range.end - range.start === 1) return;
+        if (index >= range.start && index <= range.end) {
+          item.operation = "DIFFERENTS";
+          return;
+        }
+        if (index > range.start && index < range.end) {
+          item.operation = "DIFFERENTS";
+        }
+      });
+    });
+
+    result = result.filter((i) => i.text !== "[change][diff]\n");
+
+    return result;
+  }
+
+  const count = () => {
+    let countA = 0;
+    let countB = 0;
+    arr1.forEach((i) => {
+      if (
+        ["DIFFERENT", "DIFFERENTS", "DIFFERENT2", "DIFFERENT2"].includes(i.operation) &&
+        !i.text.includes("[change]")
+      )
+        countA += 1;
+    });
+
+    arr2.forEach((i) => {
+      if (
+        ["DIFFERENT", "DIFFERENTS", "DIFFERENT2", "DIFFERENT2"].includes(i.operation) &&
+        !i.text.includes("[change]")
+      )
+        countB += 1;
+    });
+
+    return { firstArr: countA, secondArr: countB };
+  };
+
+  const comparing = (pram1: LineObject, pram2: LineObject, pram3: LineObject) => {
+    const a1 = {
+      operation: pram1?.operation ?? "UNDEFINED",
+      text: pram1?.text.replace("\n", "").replace(/\[diff\].+?\[\/diff\]/gs, "") ?? "UNDEFINED",
+    };
+    const a2 = {
+      operation: pram2?.operation ?? "UNDEFINED",
+      text: pram2?.text.replaceAll("\n", "") ?? "UNDEFINED",
+    };
+    const a3 = {
+      operation: pram3?.operation ?? "UNDEFINED",
+      text: pram3?.text.replace("\n", "").replace(/\[diff\].+?\[\/diff\]/gs, "") ?? "UNDEFINED",
+    };
+
+    if (
+      ((a1.operation === "DIFFERENT" && a1.text.includes(a2.text) && a2.text !== "") ||
+        a1.operation === "EQUAL") &&
+      ((a3.operation === "DIFFERENT" && a3.text.includes(a2.text) && a2.text !== "") ||
+        a3.operation === "EQUAL")
+    ) {
+      return { insert: "none" };
+    }
+    if (
+      (["DIFFERENT", "DIFFERENTS", "DIFFERENT1", "DIFFERENT2"].includes(a1.operation) &&
+        (["DELETE", "DELETES", "EQUAL"].includes(a3.operation) ||
+          (a3.operation === "DIFFERENT" && a3.text.includes(a2.text === "" ? "SPACE" : a2.text))) &&
+        !(a1.operation === "DIFFERENT" && a1.text.includes(a2.text === "" ? "SPACE" : a2.text)) &&
+        !["DELETE", "DELETE1", "DELETE2", "DELETES"].includes(a1.operation)) ||
+      (a1.text.includes("[change]") && !a3.text.includes("[change]")) ||
+      (a1.operation !== "UNDEFINED" && a3.operation === "UNDEFINED")
+    ) {
+      return { insert: "first" };
+    }
+    if (
+      (["DIFFERENT", "DIFFERENTS", "DIFFERENT1", "DIFFERENT2"].includes(a3.operation) &&
+        (["DELETE", "DELETES", "EQUAL"].includes(a1.operation) ||
+          (a1.operation === "DIFFERENT" && a1.text.includes(a2.text))) &&
+        !(a3.operation === "DIFFERENT" && a3.text.includes(a2.text))) ||
+      (a3.text.includes("[change]") && !a1.text.includes("[change]")) ||
+      (a1.operation === "UNDEFINED" && a3.operation !== "UNDEFINED")
+    ) {
+      return { insert: "third" };
+    }
+    if (
+      (["DIFFERENT", "DIFFERENTS", "DIFFERENT1", "DIFFERENT2"].includes(a1.operation) &&
+        ["DIFFERENT", "DIFFERENTS", "DIFFERENT1", "DIFFERENT2"].includes(a3.operation)) ||
+      (a1.text.includes("[change]") && a3.text.includes("[change]"))
+    ) {
+      return { insert: "both" };
+    }
+
+    return { insert: "undefined" };
+  };
+
+  const standardization = () => {
+    const newStd = [...std];
+    const newArr1 = [...arr1];
+    const newArr2 = [...arr2];
+    const counted = count();
+
+    const longer = arr1.length > arr2.length ? arr1.length : arr2.length;
+    const len = longer + counted.firstArr + counted.secondArr;
+
+    for (let index = 0; index < len; index += 1) {
+      if (!(newArr1[index]?.operation === "EQUAL" && newArr2[index]?.operation === "EQUAL")) {
+        const result = comparing(newArr1[index], newStd[index], newArr2[index]);
+        if (result.insert === "first") {
+          newStd.splice(index, 0, { operation: "EMPTY", text: "EMPTY" });
+          newArr2.splice(index, 0, { operation: "EMPTY", text: "EMPTY" });
+        }
+        if (result.insert === "third") {
+          newStd.splice(index, 0, { operation: "EMPTY", text: "EMPTY" });
+          newArr1.splice(index, 0, { operation: "EMPTY", text: "EMPTY" });
+        }
+        if (result.insert === "both") {
+          newStd.splice(index, 0, { operation: "EMPTY", text: "EMPTY" });
+        }
+      }
+
+      if (newArr1[index]) {
+        newArr1[index].text = newArr1[index]?.text
+          .replaceAll("[diff]", "")
+          .replaceAll("[/diff]", "")
+          .replaceAll("[change]", "")
+          .replace(/\[delete\].+?\[\/delete\]/gs, "")
+          .replace(/\[delete\].+?/gs, "")
+          .replace(/.+?\[\/delete\]/gs, "")
+          .replace("[delete]", "")
+          .replace("[/delete]", "");
+      }
+      if (newArr2[index])
+        newArr2[index].text = newArr2[index]?.text
+          .replaceAll("[diff]", "")
+          .replaceAll("[/diff]", "")
+          .replaceAll("[change]", "")
+          .replace(/\[delete\].+?\[\/delete\]/gs, "")
+          .replace(/\[delete\].+/gs, "")
+          .replace(/.+\[\/delete\]/gs, "")
+          .replace("[delete]", "")
+          .replace("[/delete]", "");
+    }
+
+    setStd(newStd);
+    setArr1(newArr1);
+    setArr2(newArr2);
+    setBakcUp({ arr1: newArr1, std: newStd, arr2: newArr2 });
+  };
+
+  const onClickSelectLine = (index: number, obj: LineObject) => {
+    const newStd = [...std];
+    newStd[index] = obj;
+    setStd(newStd);
+  };
+
+  const rollBack = () => {
+    setArr1(backUp.arr1);
+    setStd(backUp.std);
+    setArr2(backUp.arr2);
+  };
+
+  const onClickJoinArr = async () => {
+    const str = std
+      .map((obj: LineObject, index) => {
+        if (
+          obj.operation !== "EMPTY" &&
+          !(
+            ["DELETE", "DELETES"].includes(obj.operation) &&
+            !(obj.text === "") &&
+            std[index + 1]?.subOperation === "CHANGE"
+          )
+        )
+          return obj.text;
+        return "";
+      })
+      .join("");
+
+    try {
+      await merge({ title, contents: str, version: data.lastVersion });
+      toast(<Toastify content="출동이 해소되었습니다!" />);
+      queryClient.invalidateQueries(docsQuery.title(encodeURI(title)));
+      queryClient.invalidateQueries(docsQuery.lastModified(0));
+      router.push(`/docs/${title}`);
+      closeModal();
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        toast(<Toastify content={err.response?.data.message} />);
+      }
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.titleBox}>
+        <div className={styles.titleBar}>
+          <p className={styles.title}>충돌이 발생한 문서: {title}</p>
+          <button onClick={() => rollBack()} className={styles.rollBackButton}>
+            되돌리기
+          </button>
+        </div>
+        <div className={styles.notice}>
+          <p>
+            한 명 이상의 사용자가 문서를 동시에 수정하여 충돌이 발생하였습니다. <br />
+            화살표를 클릭하여 문서에 적용시킬 영역을 선택해주세요.
+          </p>
+        </div>
+      </div>
+      <div className={styles.comparingBox}>
+        <div className={styles.docsList}>
+          {["First", "Original", "Second"].map((item) => (
+            <div key={item} className={styles.docsItem}>
+              {item}
+            </div>
+          ))}
+        </div>
+        <div className={styles.changeList}>
+          <div className={styles.changeItem}>
+            {arr1.map((i, index) => (
+              <div key={index} className={styles.item[i.operation]}>
+                <p className={styles.text}>
+                  {i.text === "\n" || i.text === " " || i.text === " \n" ? <br /> : i.text}
+                </p>
+                {!(std[index] === i) && i.operation !== "EQUAL" && i.operation !== "EMPTY" && (
+                  <div className={styles.select} onClick={() => onClickSelectLine(index, i)}>
+                    →
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+          <div className={styles.changeItem}>
+            {std.map((i, index) => (
+              <div key={index} className={styles.item[i.operation]}>
+                <p className={styles.text}>
+                  {i.text === "\n" || i.text === " " || i.text === "" || i.text === " \n" ? (
+                    <br />
+                  ) : (
+                    i.text
+                  )}
+                </p>
+              </div>
+            ))}
+          </div>
+          <div className={styles.changeItem}>
+            {arr2.map((i, index) => (
+              <div key={index} className={styles.item[i.operation]}>
+                {!(std[index] === i) && i.operation !== "EQUAL" && i.operation !== "EMPTY" && (
+                  <div className={styles.select} onClick={() => onClickSelectLine(index, i)}>
+                    ←
+                  </div>
+                )}
+                <p className={styles.text}>
+                  {i.text === "\n" || i.text === " " || i.text === "" || i.text === " \n" ? (
+                    <br />
+                  ) : (
+                    i.text
+                  )}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <button onClick={() => onClickJoinArr()} className={styles.writeButton}>
+        병합하기
+      </button>
+    </div>
+  );
+};
+
+export default Resolver;
diff --git a/apps/wiki/components/Resolver/style.css.ts b/apps/wiki/components/Resolver/style.css.ts
new file mode 100644
index 0000000..66ff69c
--- /dev/null
+++ b/apps/wiki/components/Resolver/style.css.ts
@@ -0,0 +1,152 @@
+import { flex, font, theme } from "@buma/style";
+import { ComplexStyleRule, style, styleVariants } from "@vanilla-extract/css";
+
+export const container = style({
+  left: "0",
+  top: "0",
+  backgroundColor: theme.background,
+  position: "fixed",
+  zIndex: "100",
+  width: "100vw",
+  height: "100vh",
+  ...flex.COLUMN_CENTER,
+});
+
+export const titleBox = style({
+  width: "90%",
+  height: "15%",
+  backgroundColor: theme.white,
+  borderRight: `2px solid ${theme.gray}`,
+  borderLeft: `2px solid ${theme.gray}`,
+
+  ...flex.COLUMN_CENTER,
+});
+
+export const titleBar = style({
+  width: "95%",
+
+  ...flex.BETWEEN,
+});
+
+export const title = style({
+  color: theme.primary,
+  ...font.H1,
+});
+
+export const notice = style({
+  width: "95%",
+  color: theme.red,
+});
+
+export const comparingBox = style({
+  width: "90%",
+  height: "85%",
+
+  borderRight: `2px solid ${theme.gray}`,
+  borderLeft: `2px solid ${theme.gray}`,
+  ...flex.COLUMN_CENTER,
+});
+
+export const docsList = style({
+  width: "100%",
+  height: "3rem",
+  ...flex.FLEX,
+});
+
+export const docsItem = style({
+  width: "33.33%",
+  height: "100%",
+  backgroundColor: theme.primary,
+  color: theme.white,
+
+  ...flex.CENTER,
+});
+
+export const docsItemText = style({
+  width: "100%",
+  height: "1rem",
+  textAlign: "center",
+  backgroundColor: theme.red,
+});
+
+export const changeList = style({
+  width: "100%",
+  height: "100%",
+  backgroundColor: theme.white,
+  overflowY: "scroll",
+
+  "::-webkit-scrollbar": {
+    display: "none",
+  },
+
+  ...flex.CENTER,
+});
+
+export const changeItem = style({
+  height: "100%",
+  width: "33.33%",
+
+  ...flex.COLUMN_VERTICAL,
+});
+
+export const itemBase = style({
+  whiteSpace: "nowrap",
+  width: "100%",
+
+  ...flex.FLEX,
+});
+
+export const select = style({
+  width: "10%",
+  height: "100%",
+  textAlign: "center",
+  cursor: "pointer",
+});
+
+export const text = style({
+  width: "100%",
+  height: "1.5rem",
+  overflowX: "auto",
+
+  "::-webkit-scrollbar": {
+    display: "none",
+  },
+});
+
+export const item = styleVariants<Record<string, ComplexStyleRule>>({
+  DIFFERENTS: [itemBase, { background: theme.insert }],
+  DIFFERENT1: [itemBase, { background: theme.insert }],
+  DIFFERENT2: [itemBase, { background: theme.insert }],
+  DIFFERENT: [itemBase, { background: theme.insert }],
+  DELETE1: [itemBase, { background: theme.delete }],
+  DELETE2: [itemBase, { background: theme.delete }],
+  DELETE: [itemBase, { background: theme.delete }],
+  DELETES: [itemBase, { background: theme.delete }],
+  EMPTY: [itemBase, { backgroundColor: theme.empty }],
+  EQUAL: [itemBase, { background: theme.white }],
+  INSERT: [itemBase, { background: theme.insert }],
+  UNDEFINED: [itemBase, { backgroundColor: theme.empty }],
+});
+
+export const str = style({
+  ...flex.COLUMN_VERTICAL,
+});
+
+export const writeButton = style({
+  position: "fixed",
+  right: "5%",
+  bottom: "8%",
+  padding: "8px 16px",
+  background: theme.primary,
+  color: theme.white,
+  borderRadius: "4px",
+  ...font.H6,
+});
+
+export const rollBackButton = style({
+  padding: "8px 16px",
+  background: theme.primary,
+  color: theme.white,
+  borderRadius: "4px",
+  ...font.H6,
+});
diff --git a/apps/wiki/constants/error.constant.ts b/apps/wiki/constants/error.constant.ts
index 8c3377c..9dc97ce 100644
--- a/apps/wiki/constants/error.constant.ts
+++ b/apps/wiki/constants/error.constant.ts
@@ -1,5 +1,7 @@
 const ERROR = {
   IMG_400_1: "IMG-400-1",
+  DOCS_400_1: "DOCS-400-1",
+  DOCS_400_2: "DOCS-400-2",
   DOCS_404_1: "DOCS-404-1",
   DOCS_404_2: "DOCS-404-2",
   DOCS_403_1: "DOCS-403-1",
diff --git a/apps/wiki/services/auth/auth.api.ts b/apps/wiki/services/auth/auth.api.ts
index a42a5e6..380d00b 100644
--- a/apps/wiki/services/auth/auth.api.ts
+++ b/apps/wiki/services/auth/auth.api.ts
@@ -3,8 +3,8 @@ import { refreshToken } from "@/apis/header";
 import { TOKEN } from "@/constants";
 import { Storage } from "@/storage";
 
-export const refresh = async () => {
-  const { data } = await http.put("/auth/refresh/access", null, refreshToken());
+export const refresh = async (accessToken: string) => {
+  const { data } = await http.put("/auth/refresh/access", { accessToken });
   Storage.setItem(TOKEN.ACCESS, data.accessToken);
   return data.accessToken;
 };
diff --git a/apps/wiki/services/auth/auth.mutation.ts b/apps/wiki/services/auth/auth.mutation.ts
index bcb9808..055388f 100644
--- a/apps/wiki/services/auth/auth.mutation.ts
+++ b/apps/wiki/services/auth/auth.mutation.ts
@@ -7,8 +7,8 @@ export const useLoginMutation = () => {
   return useMutation({
     mutationFn: requestLogin,
     onSuccess: ({ accessToken, refreshToken }) => {
-      Storage.setItem(TOKEN.ACCESS, accessToken);
-      Storage.setItem(TOKEN.REFRESH, refreshToken);
+      Storage.setItem(TOKEN.ACCESS, `Bearer ${accessToken}`);
+      Storage.setItem(TOKEN.REFRESH, `Bearer ${refreshToken}`);
       window.history.go(-2);
     },
   });
diff --git a/apps/wiki/services/docs/docs.api.ts b/apps/wiki/services/docs/docs.api.ts
index 1510f77..f34177f 100644
--- a/apps/wiki/services/docs/docs.api.ts
+++ b/apps/wiki/services/docs/docs.api.ts
@@ -26,6 +26,32 @@ export const getLastModifiedDocsList = async (page: number) => {
   return data;
 };
 
+export const getConflictByTitle = async ({
+  title,
+  contents,
+}: {
+  title: string;
+  contents: string;
+}) => {
+  const { data } = await http.post(`/docs/merge/${title}`, { contents });
+
+  return data;
+};
+
+export const requestMergeDocs = async ({
+  title,
+  contents,
+  version,
+}: {
+  title: string;
+  contents: string;
+  version: number;
+}) => {
+  const { data } = await http.put(`/docs/merge/${title}`, { contents, version }, authorization());
+
+  return data;
+};
+
 export const requestCreateDocs = async (docs: CreateDocsType) => {
   const { data } = await http.post("/docs", docs, authorization());
   return data;
@@ -34,11 +60,17 @@ export const requestCreateDocs = async (docs: CreateDocsType) => {
 export const requestUpdateDocs = async ({
   title,
   contents,
+  version,
 }: {
   title: string;
   contents: string;
+  version: number;
 }) => {
-  const { data } = await http.put(`/docs/update/${title}`, { contents }, authorization());
+  const { data } = await http.put(
+    `/docs/${title}`,
+    { contents, updatingVersion: version },
+    authorization(),
+  );
   return data;
 };
 
diff --git a/apps/wiki/services/docs/docs.mutation.ts b/apps/wiki/services/docs/docs.mutation.ts
index 162101d..851919e 100644
--- a/apps/wiki/services/docs/docs.mutation.ts
+++ b/apps/wiki/services/docs/docs.mutation.ts
@@ -2,6 +2,7 @@ import { useMutation } from "@tanstack/react-query";
 import {
   requestCreateDocs,
   requestDeleteDocs,
+  requestMergeDocs,
   requestUpdateDocs,
   requestUploadImage,
 } from "./docs.api";
@@ -29,3 +30,9 @@ export const useUploadImageMutation = () => {
     mutationFn: requestUploadImage,
   });
 };
+
+export const useMergeDocsMutation = () => {
+  return useMutation({
+    mutationFn: requestMergeDocs,
+  });
+};
diff --git a/apps/wiki/services/docs/docs.query.ts b/apps/wiki/services/docs/docs.query.ts
index c919853..ca1c0f2 100644
--- a/apps/wiki/services/docs/docs.query.ts
+++ b/apps/wiki/services/docs/docs.query.ts
@@ -1,6 +1,7 @@
 import { queryOptions } from "@tanstack/react-query";
 import { DocsListItemType, DocsItemType, DocsListType } from "@/types";
 import {
+  getConflictByTitle,
   getDocsByKeyword,
   getDocsByTitle,
   getDocsListByClassify,
@@ -32,4 +33,9 @@ export const docsQuery = {
       queryKey: ["query.lastModifiedAt", page],
       queryFn: () => getLastModifiedDocsList(page),
     }),
+  conflicted: <Params extends { title: string; contents: string }>({ title, contents }: Params) =>
+    queryOptions({
+      queryKey: ["query.conflicted", title],
+      queryFn: () => getConflictByTitle({ title, contents }),
+    }),
 };
diff --git a/apps/wiki/services/like/like.api.ts b/apps/wiki/services/like/like.api.ts
index 6306564..c54b668 100644
--- a/apps/wiki/services/like/like.api.ts
+++ b/apps/wiki/services/like/like.api.ts
@@ -2,7 +2,7 @@ import { http } from "@/apis";
 import { authorization } from "@/apis/header";
 
 export const getDocsLikeCount = async (title: string) => {
-  const { data } = await http.get(`/docs/thumbs/up/get/${title}`);
+  const { data } = await http.get(`/thumbs/up/get/${title}`);
   return data;
 };
 
diff --git a/packages/style/src/theme.ts b/packages/style/src/theme.ts
index 1be2749..cb5fad8 100644
--- a/packages/style/src/theme.ts
+++ b/packages/style/src/theme.ts
@@ -13,6 +13,7 @@ const theme = {
   insert: "#CCFFD8",
   delete: "#FFD7D5",
   equal: "#F6F8FA",
+  empty: "#e6e6e6",
   cover: "#ececec50",
   line: "#f0f0f0",
   preview: "#F6FAFD",