diff --git a/frontend/sweet-red-beans/.prettierrc b/frontend/sweet-red-beans/.prettierrc
new file mode 100644
index 0000000..d2387cf
--- /dev/null
+++ b/frontend/sweet-red-beans/.prettierrc
@@ -0,0 +1,7 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true,
+    "bracketSameLine": true
+}
\ No newline at end of file
diff --git a/frontend/sweet-red-beans/src/components/Comment/Comment.js b/frontend/sweet-red-beans/src/components/Comment/Comment.js
index 7731e81..dcb2307 100644
--- a/frontend/sweet-red-beans/src/components/Comment/Comment.js
+++ b/frontend/sweet-red-beans/src/components/Comment/Comment.js
@@ -1,86 +1,89 @@
-import React, { useEffect, useState } from "react";
-import axios from "axios";
-import { useNavigate } from "react-router";
-import { useSelector } from "react-redux";
-import style from "../../css/Comment/Comment.module.css";
-import { parseDate } from "../../parseDate/parseDate";
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { useNavigate } from 'react-router';
+import { useSelector } from 'react-redux';
+import style from '../../css/Comment/Comment.module.css';
+import { parseDate } from '../../parseDate/parseDate';
 
-const Comment = ({comment}) => {
-    console.log("댓글 렌더");
+const Comment = ({ comment }) => {
+    console.log('댓글 렌더');
     const navigation = useNavigate();
 
     //const userid = useSelector(state => state.user.user_id);
 
     const useConfirm = (message = null, onConfirm, onCancel) => {
-        if (!onConfirm || typeof onConfirm !== "function") {
+        if (!onConfirm || typeof onConfirm !== 'function') {
             return;
         }
-        if (onCancel && typeof onCancel !== "function") {
+        if (onCancel && typeof onCancel !== 'function') {
             return;
         }
-        
+
         const confirmAction = () => {
             if (window.confirm(message)) {
-            onConfirm();
+                onConfirm();
             } else {
-            onCancel();
+                onCancel();
             }
         };
-        
+
         return confirmAction;
     };
 
     //삭제버튼 눌렀을 때
     const deleteConfirm = () => {
-        axios.delete('http://localhost:8080/information-share/comment',{
-        withCredentials: true,
-        data: {
-                    user_id : "1",
+        axios
+            .delete('http://localhost:8080/information-share/comment', {
+                withCredentials: true,
+                data: {
+                    user_id: '1',
                     comment_id: comment.comment_id,
+                },
+            })
+            .then((response) => {
+                if (response.data.result) {
+                    alert('삭제되었습니다.');
+                    //현재 페이지 리렌더
+                    navigation(0);
+                } else {
+                    alert('삭제에 실패했습니다.');
                 }
-        })
-        .then(response => {
-            if(response.data.result){
-                alert("삭제되었습니다.")
-                //현재 페이지 리렌더
-                navigation(0)
-            }
-            else {
-                alert("삭제에 실패했습니다.")
-            }
-        })
-        .catch(error => console.log(error));
-    }
+            })
+            .catch((error) => console.log(error));
+    };
 
-    const cancelConfirm = () => console.log("삭제 취소")
+    const cancelConfirm = () => console.log('삭제 취소');
 
     const deleteClick = useConfirm(
-        "삭제하시겠습니까?",
+        '삭제하시겠습니까?',
         deleteConfirm,
         cancelConfirm
     );
 
     return (
         <>
-        <div className={style.comment}>
-            <div className={style.topBar}>
-                
-                <div>{comment.user_status === "정지" || comment.user_status === "탈퇴" ? "(알수없음)" : comment.comment_nickname}</div>
-                <div>{parseDate(comment.comment_written_date)}</div>
-            </div>
-            
-            <div className={style.contentArea}>
-                <div>{comment.comment_content}</div>
-                <div>
-                    {comment.is_mine ? <button onClick={deleteClick}>삭제</button> : null}
+            <div className={style.comment}>
+                <div className={style.topBar}>
+                    <div>
+                        {comment.user_status === '정지' ||
+                        comment.user_status === '탈퇴'
+                            ? '(알수없음)'
+                            : comment.comment_nickname}
+                    </div>
+                    <div>{parseDate(comment.comment_written_date)}</div>
+                </div>
+
+                <div className={style.contentArea}>
+                    <div>{comment.comment_content}</div>
+                    <div>
+                        {comment.is_mine ? (
+                            <button onClick={deleteClick}>삭제</button>
+                        ) : null}
+                    </div>
                 </div>
             </div>
-            
-        </div>
-        
-        
         </>
     );
-}
+};
 
-export default Comment;
\ No newline at end of file
+export default Comment;
diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMDetail.js b/frontend/sweet-red-beans/src/components/DMPage/DMDetail.js
index 71b4f8a..d0540fd 100644
--- a/frontend/sweet-red-beans/src/components/DMPage/DMDetail.js
+++ b/frontend/sweet-red-beans/src/components/DMPage/DMDetail.js
@@ -1,28 +1,34 @@
-import React, {useState, useCallback, useEffect, useMemo, useRef} from "react";
+import React, {
+    useState,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+} from 'react';
 import * as StompJs from '@stomp/stompjs';
-import SockJS from "sockjs-client";
+import SockJS from 'sockjs-client';
 import SockJsClient from 'react-stomp';
-import Stomp from "stompjs";
-import axios from "axios";
-import Modal from "../../components/Modals/TransactionModal";
-import style from "../../css/DMPage/DMDetail.module.css";
-import { useDispatch, useSelector } from "react-redux";
-import { SELECTED_DM } from "../../actions/types";
-import { parseDate } from "../../parseDate/parseDate";
-import { Cookies } from "react-cookie";
-import { useNavigate } from "react-router";
-import user from "../../img/user.png";
+import Stomp from 'stompjs';
+import axios from 'axios';
+import Modal from '../../components/Modals/TransactionModal';
+import style from '../../css/DMPage/DMDetail.module.css';
+import { useDispatch, useSelector } from 'react-redux';
+import { SELECTED_DM } from '../../actions/types';
+import { parseDate } from '../../parseDate/parseDate';
+import { Cookies } from 'react-cookie';
+import { useNavigate } from 'react-router';
+import user from '../../img/user.png';
 
 let stompClient = null;
 
 //props를 selectedRoom으로 바꾸고 roomId는 selectedRoom.chat_room_id으로 바꾸기
 //transaction_id 값 바꾸기
-const DMDetail = ({selectedRoom}) => {
+const DMDetail = ({ selectedRoom }) => {
     const navigation = useNavigate();
 
     const [modalOpen, setModalOpen] = useState(false);
 
-    const [reportContent, setReportContent] = useState("");
+    const [reportContent, setReportContent] = useState('');
     //거래완료되면 true
     //초기값 selectedRoom.is_complete로 설정하기
     const [complete, setComplete] = useState(selectedRoom.is_complete);
@@ -30,8 +36,7 @@ const DMDetail = ({selectedRoom}) => {
     const [imgFile, setImgFile] = useState(null);
     const [imgBase64, setImgBase64] = useState(null);
 
-    const [myNickname, setMyNickname] = useState("");
-
+    const [myNickname, setMyNickname] = useState('');
 
     const openModal = () => {
         setModalOpen(true);
@@ -40,307 +45,393 @@ const DMDetail = ({selectedRoom}) => {
         setModalOpen(false);
     };
 
-
     //대화 내용, 상대방 것 포함
     const [contents, setContents] = useState([]);
-    const [username, setUsername] = useState("");
+    const [username, setUsername] = useState('');
     //내가 보낸 메시지 내용
-    const [message, setMessage] = useState("");
+    const [message, setMessage] = useState('');
 
     let socket = new SockJS('http://localhost:8080/ws-stomp');
     let stompClient = Stomp.over(socket);
-    
+
     useEffect(() => {
-        axios.get('http://localhost:8080/mypage',{
-        withCredentials: true ,
-        })
-        .then(response => {
-            setMyNickname(response.data.user.nickname);
-        })
-        .catch(e => console.log(e))
-    }, [])
+        axios
+            .get('http://localhost:8080/mypage', {
+                withCredentials: true,
+            })
+            .then((response) => {
+                setMyNickname(response.data.user.nickname);
+            })
+            .catch((e) => console.log(e));
+    }, []);
 
     useEffect(() => {
         console.log(myNickname);
-    }, [myNickname])
+    }, [myNickname]);
 
     //전송 버튼 눌렀을 때
     const sendClick = () => {
-
         // if(!cookies.get("login")) {
         //     alert("로그인을 먼저 해주세요");
         //     navigation('/')
         // }
         sendMessage(message);
         //서버에서 받아올 때처럼 비슷한 형식으로 넣어주기 위해
-        setMessage("");
-    }
+        setMessage('');
+    };
 
     const sendMessage = (message) => {
         const fd = new FormData();
 
-        if(imgFile === null){
-            if(message !== ""){
-                stompClient.send("/pub/chat/message", {}, JSON.stringify({
-                    content : message,
-                    chat_room_id: selectedRoom.chat_room_id,
-                }));
+        if (imgFile === null) {
+            if (message !== '') {
+                stompClient.send(
+                    '/pub/chat/message',
+                    {},
+                    JSON.stringify({
+                        content: message,
+                        chat_room_id: selectedRoom.chat_room_id,
+                    })
+                );
             }
-
         } else {
-            stompClient.send("/pub/chat/message", {}, JSON.stringify({
-                content : message,
-                chat_room_id: selectedRoom.chat_room_id,
-                image_url:imgBase64,
-            }));
+            stompClient.send(
+                '/pub/chat/message',
+                {},
+                JSON.stringify({
+                    content: message,
+                    chat_room_id: selectedRoom.chat_room_id,
+                    image_url: imgBase64,
+                })
+            );
             setImgBase64(null);
             setImgFile(null);
         }
-        
-    }
+    };
 
     useEffect(() => {
         console.log(imgBase64);
-    }, [imgBase64])
+    }, [imgBase64]);
 
     useEffect(() => {
         console.log(contents);
-    }, [contents])
+    }, [contents]);
 
-    const addMessage = (message) =>{
+    const addMessage = (message) => {
         //상대에게 받아온 메시지를 추가함
-        setContents(prev=>[...prev, message]);
+        setContents((prev) => [...prev, message]);
     };
 
-    const onChange = useCallback(
-        (e) => {
-            setMessage(e.target.value);
-        }, []
-    )
+    const onChange = useCallback((e) => {
+        setMessage(e.target.value);
+    }, []);
 
     //이제까지 메시지 내역 조회
     useEffect(() => {
         console.log(selectedRoom);
         setContents([]);
-        setMessage("");
-        if(selectedRoom !== undefined){
-            axios.get("http://localhost:8080/direct-message/detail", {
-                withCredentials: true,
-                params:{
-                    room_id: selectedRoom.chat_room_id,
-                }
-            })
-            .then(response => {
-                //setMList(response.data.message.map(item => item.message_content));
-                setContents(response.data.message);
-            })
-            .catch(error => console.log(error))
+        setMessage('');
+        if (selectedRoom !== undefined) {
+            axios
+                .get('http://localhost:8080/direct-message/detail', {
+                    withCredentials: true,
+                    params: {
+                        room_id: selectedRoom.chat_room_id,
+                    },
+                })
+                .then((response) => {
+                    //setMList(response.data.message.map(item => item.message_content));
+                    setContents(response.data.message);
+                })
+                .catch((error) => console.log(error));
         }
 
         stompClient.connect({}, () => {
-            stompClient.subscribe('/sub/chat/room/' + selectedRoom.chat_room_id, (data) => {
-                console.log(JSON.parse(data.body));
-                const newMessage = JSON.parse(data.body);
-                addMessage(newMessage);
-            })
+            stompClient.subscribe(
+                '/sub/chat/room/' + selectedRoom.chat_room_id,
+                (data) => {
+                    console.log(JSON.parse(data.body));
+                    const newMessage = JSON.parse(data.body);
+                    addMessage(newMessage);
+                }
+            );
         });
-        setComplete(selectedRoom.is_complete)
-        
+        setComplete(selectedRoom.is_complete);
+
         return () => {
-            if(stompClient != null) {
+            if (stompClient != null) {
                 stompClient.disconnect();
             }
-        }
-    }, [selectedRoom])
+        };
+    }, [selectedRoom]);
 
     //신뢰도 +1 주는 버튼
     const reliabilityPlusClick = () => {
         //신뢰도 1 주기
-        if(complete === false) {
-            alert("거래완료를 해야 신뢰도를 줄 수 있습니다");
-        }
-
-        else {
+        if (complete === false) {
+            alert('거래완료를 해야 신뢰도를 줄 수 있습니다');
+        } else {
             const body = {
-                user_id: selectedRoom.not_mine_id
-            }
-            axios.post('http://localhost:8080/direct-message/reliability', body, { withCredentials: true })
-            .then(response => {
-                if(response.data.result){
-                    alert("상대방의 신뢰도가 올랐습니다.")
-                }
-                else {
-                    alert("신뢰도를 올리는 데 실패했습니다.")
-                }
-            })
-            .catch(error => console.log(error));
+                user_id: selectedRoom.not_mine_id,
+            };
+            axios
+                .post(
+                    'http://localhost:8080/direct-message/reliability',
+                    body,
+                    { withCredentials: true }
+                )
+                .then((response) => {
+                    if (response.data.result) {
+                        alert('상대방의 신뢰도가 올랐습니다.');
+                    } else {
+                        alert('신뢰도를 올리는 데 실패했습니다.');
+                    }
+                })
+                .catch((error) => console.log(error));
         }
-        
-    }
+    };
 
     //신고 내용
     const reportContentChange = (e) => {
         setReportContent(e.target.value);
-    }
+    };
 
     //신고 확인 버튼 눌렀을 때
     const reportConfirm = () => {
         const body = {
-            user_id : "1",
-            transaction_id : selectedRoom.transaction_id,
-            report_content : reportContent,
-        }
-        axios.post('http://localhost:8080/direct-message/report', body, { withCredentials: true })
-        .then(response => {
-            if(response.data.result){
-                alert("신고되었습니다.")
-                setReportContent("");
-                setModalOpen(false);
-            }
-            else {
-                alert("신고에 실패했습니다.")
-            }
-        })
-        .catch(error => console.log(error));
-    }
+            user_id: '1',
+            transaction_id: selectedRoom.transaction_id,
+            report_content: reportContent,
+        };
+        axios
+            .post('http://localhost:8080/direct-message/report', body, {
+                withCredentials: true,
+            })
+            .then((response) => {
+                if (response.data.result) {
+                    alert('신고되었습니다.');
+                    setReportContent('');
+                    setModalOpen(false);
+                } else {
+                    alert('신고에 실패했습니다.');
+                }
+            })
+            .catch((error) => console.log(error));
+    };
 
     //삭제 취소 버튼 눌렀을 때
     const cancelConfirm = (e) => {
-        console.log("신고 취소");
-    }
+        console.log('신고 취소');
+    };
 
     //모달창에서 신고하기 버튼 눌렀을 때
     const reportClick = (e) => {
         e.preventDefault();
-        if(reportContent === ""){
-            alert("신고 내용을 입력해주세요");
-        }
-        else {
-            if (window.confirm("정말 신고하시겠습니까?")) {
+        if (reportContent === '') {
+            alert('신고 내용을 입력해주세요');
+        } else {
+            if (window.confirm('정말 신고하시겠습니까?')) {
                 reportConfirm();
             } else {
                 cancelConfirm();
             }
         }
-    }
+    };
 
     //거래완료 버튼 눌렀을 때
     const completeClick = () => {
         const body = {
             transaction_id: selectedRoom.transaction_id,
-        }
-        axios.post('http://localhost:8080/direct-message/transaction-complete', body, { withCredentials: true })
-        .then(response => {
-            if(response.data.result){
-                setComplete(true);
-            }
-            else {
-                alert("거래완료에 실패했습니다.")
-            }
-        })
-        .catch(error => console.log(error));
-        
-    }
+        };
+        axios
+            .post(
+                'http://localhost:8080/direct-message/transaction-complete',
+                body,
+                { withCredentials: true }
+            )
+            .then((response) => {
+                if (response.data.result) {
+                    setComplete(true);
+                } else {
+                    alert('거래완료에 실패했습니다.');
+                }
+            })
+            .catch((error) => console.log(error));
+    };
 
     useEffect(() => {
-        let messagebox = document.querySelector("#messagebox");
+        let messagebox = document.querySelector('#messagebox');
         messagebox.scrollTop = messagebox.scrollHeight;
-    }, [contents, imgBase64])
+    }, [contents, imgBase64]);
 
     const handleChangeFile = (e) => {
         setImgFile(e.target.files);
-    }
+    };
 
     const previewCancelClick = () => {
         setImgFile(null);
         setImgBase64(null);
-    }
+    };
 
     useEffect(() => {
-        if(!imgFile) return false;
+        if (!imgFile) return false;
 
         const reader = new FileReader();
         reader.onloadend = () => {
             setImgBase64(reader.result);
-        }
+        };
         reader.readAsDataURL(imgFile[0]);
-
-    }, [imgFile])
+    }, [imgFile]);
 
     return (
         <>
-        <Modal open={modalOpen} close={closeModal} header="신고하기">
-        <form className={style.modal}>
-            <div>신고사유를 적어주세요</div>
-            <div>
-                <textarea value={reportContent} onChange={reportContentChange}></textarea>
-            </div>
-            <button onClick={reportClick}>신고하기</button>
-        </form>
-        </Modal>
-        
-        <div className={style.chatcontainer}>
-            <div className={style.topBar}></div>
-            <div className={style.notMyArea}>
-                <img src={selectedRoom.user_status === "정지" || selectedRoom.user_status === "탈퇴" ? user : selectedRoom.not_mine_profile_url}/>
-                <div>{selectedRoom.user_status === "정지" || selectedRoom.user_status === "탈퇴" ? "(알수없음)" : selectedRoom.not_mine_nickname}</div>
-                <div>{selectedRoom.not_mine_reliability}</div>
-                <div>
-                    <button onClick={reliabilityPlusClick}>신뢰도 주기</button>
-                    <button onClick={completeClick}>거래완료</button>
-                    <button onClick={openModal}>신고하기</button>
-                </div>
-            </div>
-            {useMemo(() => 
-
-            <div id="messagebox" className={!complete ? style.messagebox : style.messagebox2}>
-                {contents.map((message, index) => (
-                    <div key={index} className={message.nickname===myNickname ? style.myMessage : style.notMyMessage}> 
-                        {message.image_url===null || message.image_url===""
-                        ? 
-                        <>
-                        <div>{message.nickname===myNickname ? parseDate(message.written_date) : null}</div>
-                        <div>{message.content}</div>
-                        <div>{!(message.nickname===myNickname) ? parseDate(message.written_date) : null}</div>
-                        </>
-                        :
-                        <>
-                        <div>{message.nickname===myNickname ? parseDate(message.written_date) : null}</div>
-                        <div>
-                            <div>{message.content}</div>
-                            <div><img src={message.image_url}/></div>
-                        </div>
-                        <div>{!(message.nickname===myNickname) ? parseDate(message.written_date) : null}</div>
-                        </>
+            <Modal open={modalOpen} close={closeModal} header="신고하기">
+                <form className={style.modal}>
+                    <div>신고사유를 적어주세요</div>
+                    <div>
+                        <textarea
+                            value={reportContent}
+                            onChange={reportContentChange}
+                        ></textarea>
+                    </div>
+                    <button onClick={reportClick}>신고하기</button>
+                </form>
+            </Modal>
+
+            <div className={style.chatcontainer}>
+                <div className={style.topBar}></div>
+                <div className={style.notMyArea}>
+                    <img
+                        src={
+                            selectedRoom.user_status === '정지' ||
+                            selectedRoom.user_status === '탈퇴'
+                                ? user
+                                : selectedRoom.not_mine_profile_url
                         }
+                    />
+                    <div>
+                        {selectedRoom.user_status === '정지' ||
+                        selectedRoom.user_status === '탈퇴'
+                            ? '(알수없음)'
+                            : selectedRoom.not_mine_nickname}
+                    </div>
+                    <div>{selectedRoom.not_mine_reliability}</div>
+                    <div>
+                        <button onClick={reliabilityPlusClick}>
+                            신뢰도 주기
+                        </button>
+                        <button onClick={completeClick}>거래완료</button>
+                        <button onClick={openModal}>신고하기</button>
                     </div>
-                    
-                ))}
-                <div className={style.preview}>
-                {imgBase64 !== null ?
-                <div>
-                    <img src={imgBase64}/>
-                    <button onClick={previewCancelClick}></button>
                 </div>
-                : null}
+                {useMemo(
+                    () => (
+                        <div
+                            id="messagebox"
+                            className={
+                                !complete ? style.messagebox : style.messagebox2
+                            }
+                        >
+                            {contents.map((message, index) => (
+                                <div
+                                    key={index}
+                                    className={
+                                        message.nickname === myNickname
+                                            ? style.myMessage
+                                            : style.notMyMessage
+                                    }
+                                >
+                                    {message.image_url === null ||
+                                    message.image_url === '' ? (
+                                        <>
+                                            <div>
+                                                {message.nickname === myNickname
+                                                    ? parseDate(
+                                                          message.written_date
+                                                      )
+                                                    : null}
+                                            </div>
+                                            <div>{message.content}</div>
+                                            <div>
+                                                {!(
+                                                    message.nickname ===
+                                                    myNickname
+                                                )
+                                                    ? parseDate(
+                                                          message.written_date
+                                                      )
+                                                    : null}
+                                            </div>
+                                        </>
+                                    ) : (
+                                        <>
+                                            <div>
+                                                {message.nickname === myNickname
+                                                    ? parseDate(
+                                                          message.written_date
+                                                      )
+                                                    : null}
+                                            </div>
+                                            <div>
+                                                <div>{message.content}</div>
+                                                <div>
+                                                    <img
+                                                        src={message.image_url}
+                                                    />
+                                                </div>
+                                            </div>
+                                            <div>
+                                                {!(
+                                                    message.nickname ===
+                                                    myNickname
+                                                )
+                                                    ? parseDate(
+                                                          message.written_date
+                                                      )
+                                                    : null}
+                                            </div>
+                                        </>
+                                    )}
+                                </div>
+                            ))}
+                            <div className={style.preview}>
+                                {imgBase64 !== null ? (
+                                    <div>
+                                        <img src={imgBase64} />
+                                        <button
+                                            onClick={previewCancelClick}
+                                        ></button>
+                                    </div>
+                                ) : null}
+                            </div>
+                        </div>
+                    ),
+                    [contents, imgBase64, myNickname]
+                )}
+
+                {complete ? (
+                    <div className={style.complete}>거래가 완료되었습니다.</div>
+                ) : null}
+
+                <div className={style.writeArea}>
+                    <label htmlFor="upload_file"></label>
+                    <input
+                        type="file"
+                        onChange={handleChangeFile}
+                        id="upload_file"
+                        style={{ display: 'none' }}
+                    />
+                    <input
+                        type="text"
+                        value={message}
+                        onChange={onChange}
+                        name={message}
+                    />
+                    <button onClick={sendClick}></button>
                 </div>
-                
-            </div>
-            , [contents, imgBase64, myNickname])}
-
-
-            {complete ? <div className={style.complete}>거래가 완료되었습니다.</div> : null}
-            
-            <div className={style.writeArea}>
-                <label htmlFor="upload_file"></label>
-                <input type="file" onChange={handleChangeFile} id="upload_file" style={{display:"none"}}/>
-                <input type="text" value={message} onChange={onChange} name={message}/>
-                <button onClick={sendClick}></button>
             </div>
-        </div>
-        
         </>
     );
-}
+};
 
-export default DMDetail;
\ No newline at end of file
+export default DMDetail;
diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMList.js b/frontend/sweet-red-beans/src/components/DMPage/DMList.js
index 428f5ab..ace2449 100644
--- a/frontend/sweet-red-beans/src/components/DMPage/DMList.js
+++ b/frontend/sweet-red-beans/src/components/DMPage/DMList.js
@@ -1,21 +1,25 @@
-import React, { useCallback, useState, useEffect } from "react";
-import axios from "axios";
-import DMListThumbnail from "./DMListThumbnail";
-import DMDetail from "./DMDetail";
-import { useDispatch, useSelector } from "react-redux";
-import { SELECTED_DM } from "../../actions/types";
-import { useNavigate } from "react-router";
-import style from "../../css/DMPage/DMList.module.css";
+import React, { useCallback, useState, useEffect } from 'react';
+import axios from 'axios';
+import DMListThumbnail from './DMListThumbnail';
+import DMDetail from './DMDetail';
+import { useDispatch, useSelector } from 'react-redux';
+import { SELECTED_DM } from '../../actions/types';
+import { useNavigate } from 'react-router';
+import style from '../../css/DMPage/DMList.module.css';
 
-const DMList = ({DMlist, DMListClick}) => {
+const DMList = ({ DMlist, DMListClick }) => {
     console.log(DMlist);
     return (
         <>
-        <div className={style.DMListContainer}>
-            {DMlist.map((item, index) => <div key={index} onClick={e => DMListClick(item, e)}><DMListThumbnail dm={item}/></div>)}
-        </div>
+            <div className={style.DMListContainer}>
+                {DMlist.map((item, index) => (
+                    <div key={index} onClick={(e) => DMListClick(item, e)}>
+                        <DMListThumbnail dm={item} />
+                    </div>
+                ))}
+            </div>
         </>
     );
-}
+};
 
-export default DMList;
\ No newline at end of file
+export default DMList;
diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMListThumbnail.js b/frontend/sweet-red-beans/src/components/DMPage/DMListThumbnail.js
index 4a0397a..fff1b9b 100644
--- a/frontend/sweet-red-beans/src/components/DMPage/DMListThumbnail.js
+++ b/frontend/sweet-red-beans/src/components/DMPage/DMListThumbnail.js
@@ -1,55 +1,67 @@
-import React, { useEffect, useState } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import { useNavigate } from "react-router";
-import style from "../../css/DMPage/DMListThumbnail.module.css";
-import { parseDate } from "../../parseDate/parseDate";
-import user from "../../img/user.png";
+import React, { useEffect, useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router';
+import style from '../../css/DMPage/DMListThumbnail.module.css';
+import { parseDate } from '../../parseDate/parseDate';
+import user from '../../img/user.png';
 
-const DMListThumbnail = ({dm}) => {
+const DMListThumbnail = ({ dm }) => {
     //const cookies = Cookies();
     const dispatch = useDispatch();
     const navigation = useNavigate();
     const [currentRoom, setCurrentRoom] = useState(false);
-    const selectedRoomId = useSelector(s => {
+    const selectedRoomId = useSelector((s) => {
         if (s === undefined) {
             return null;
-        }
-        else {
+        } else {
             return s.selectedRoomId;
         }
-    })
+    });
 
     useEffect(() => {
         console.log(dm);
-        if(selectedRoomId !== null) {
+        if (selectedRoomId !== null) {
             if (dm.chat_room_id === selectedRoomId) {
-                console.log("a의 번호: ", selectedRoomId);
-                console.log("같음 : ", dm.chat_room_id);
+                console.log('a의 번호: ', selectedRoomId);
+                console.log('같음 : ', dm.chat_room_id);
                 setCurrentRoom(true);
-            }
-            else {
+            } else {
                 setCurrentRoom(false);
             }
         }
-    }, [selectedRoomId])
-    
+    }, [selectedRoomId]);
+
     return (
         <>
-        <div className={currentRoom ? style.currentThumbnail : style.thumbnail}>
+            <div
+                className={
+                    currentRoom ? style.currentThumbnail : style.thumbnail
+                }
+            >
+                <img
+                    src={
+                        dm.user_status === '정지' || dm.user_status === '탈퇴'
+                            ? user
+                            : dm.not_mine_profile_url
+                    }
+                />
 
-            <img src={dm.user_status === "정지" || dm.user_status === "탈퇴" ? user : dm.not_mine_profile_url}/>
-            
-            <div className={style.contentArea}>
-                <div>{dm.user_status === "정지" || dm.user_status === "탈퇴" ? "(알수없음)" : dm.not_mine_nickname}</div>
-                <div>{dm.recent_message}</div>
-            </div>
-            <div>
-                {dm.recent_message_date === null ? "" : parseDate(dm.recent_message_date)}
+                <div className={style.contentArea}>
+                    <div>
+                        {dm.user_status === '정지' || dm.user_status === '탈퇴'
+                            ? '(알수없음)'
+                            : dm.not_mine_nickname}
+                    </div>
+                    <div>{dm.recent_message}</div>
+                </div>
+                <div>
+                    {dm.recent_message_date === null
+                        ? ''
+                        : parseDate(dm.recent_message_date)}
+                </div>
             </div>
-        </div>
-        
         </>
-    )
-}
+    );
+};
 
-export default DMListThumbnail
\ No newline at end of file
+export default DMListThumbnail;
diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMPage.js b/frontend/sweet-red-beans/src/components/DMPage/DMPage.js
index 22cb5c5..1f95d52 100644
--- a/frontend/sweet-red-beans/src/components/DMPage/DMPage.js
+++ b/frontend/sweet-red-beans/src/components/DMPage/DMPage.js
@@ -1,16 +1,16 @@
-import React, {useRef, useState, useEffect, useMemo} from "react";
-import { useDispatch, useSelector } from "react-redux";
-import DMList from "./DMList";
-import DMDetail from "./DMDetail";
+import React, { useRef, useState, useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import DMList from './DMList';
+import DMDetail from './DMDetail';
 import * as StompJs from '@stomp/stompjs';
-import SockJS from "sockjs-client";
+import SockJS from 'sockjs-client';
 import SockJsClient from 'react-stomp';
-import Stomp from "stompjs";
-import axios from "axios";
-import store from "../../store";
-import { useNavigate } from "react-router";
-import style from "../../css/DMPage/DMPage.module.css";
-import { SELECTED_DM } from "../../actions/types";
+import Stomp from 'stompjs';
+import axios from 'axios';
+import store from '../../store';
+import { useNavigate } from 'react-router';
+import style from '../../css/DMPage/DMPage.module.css';
+import { SELECTED_DM } from '../../actions/types';
 
 const DMPage = () => {
     const dispatch = useDispatch();
@@ -22,56 +22,54 @@ const DMPage = () => {
 
     useEffect(() => {
         //DM 목록 조회
-        axios.get('http://localhost:8080/direct-message',{
-            withCredentials: true,
-        })
-        .then(response => {
-            setDMList(response.data.room_id)
-            setRenderError(false);
-        })
-        .catch(error => {
-            setRenderError(true);
-            alert("로그인을 먼저 해주세요");
-            navigation('/');
-        });
+        axios
+            .get('http://localhost:8080/direct-message', {
+                withCredentials: true,
+            })
+            .then((response) => {
+                setDMList(response.data.room_id);
+                setRenderError(false);
+            })
+            .catch((error) => {
+                setRenderError(true);
+                alert('로그인을 먼저 해주세요');
+                navigation('/');
+            });
 
         return () => {
             dispatch({
                 type: SELECTED_DM,
                 payload: null,
-            })
-        }
-    }, [])
+            });
+        };
+    }, []);
 
     const DMListClick = (selectedRoom, e) => {
         dispatch({
             type: SELECTED_DM,
             payload: selectedRoom.chat_room_id,
-        })
+        });
         setSelectedRoomId(selectedRoom);
-    }
+    };
 
-    return(
-        <>
-        {!renderError ? 
+    return (
         <>
-            <div className={style.dmpage}>
-                <div>
-                    <DMList DMlist={DMlist} DMListClick={DMListClick}/>
-                </div>
-                <div>
-                    {
-                    selectedRoomId !== null ? <DMDetail selectedRoom={selectedRoomId}/> : null
-                    }
-                </div>
-                
-            </div>
-        </>
-            : null}
+            {!renderError ? (
+                <>
+                    <div className={style.dmpage}>
+                        <div>
+                            <DMList DMlist={DMlist} DMListClick={DMListClick} />
+                        </div>
+                        <div>
+                            {selectedRoomId !== null ? (
+                                <DMDetail selectedRoom={selectedRoomId} />
+                            ) : null}
+                        </div>
+                    </div>
+                </>
+            ) : null}
         </>
-        
-        
     );
-}
+};
 
-export default DMPage;
\ No newline at end of file
+export default DMPage;
diff --git a/frontend/sweet-red-beans/src/components/EventPage/EventDetailPage.js b/frontend/sweet-red-beans/src/components/EventPage/EventDetailPage.js
index 8c1829e..8fbb652 100644
--- a/frontend/sweet-red-beans/src/components/EventPage/EventDetailPage.js
+++ b/frontend/sweet-red-beans/src/components/EventPage/EventDetailPage.js
@@ -1,114 +1,132 @@
-import React, {useState, useEffect} from "react";
-import { useParams } from "react-router";
-import { useDispatch, useSelector } from "react-redux";
-import events from "../../actions/event_action";
-import axios from "axios";
-import style from "../../css/EventPage/EventDetailPage.module.css";
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router';
+import { useDispatch, useSelector } from 'react-redux';
+import events from '../../actions/event_action';
+import axios from 'axios';
+import style from '../../css/EventPage/EventDetailPage.module.css';
 
 const EventDetailPage = () => {
-    const {id} = useParams();
+    const { id } = useParams();
 
     const [thisEvent, setThisEvent] = useState(null);
     const [thisEventIsHere, setThisEventIsHere] = useState(false);
 
-    const [title, setTitle] = useState("");
-    const [cinemaName, setCinemaName] = useState("");
+    const [title, setTitle] = useState('');
+    const [cinemaName, setCinemaName] = useState('');
     const [imageUrl, setImageUrl] = useState([]);
-    const [linkUrl, setLinkUrl] = useState("");
-    const [startDate, setStartDate] = useState("");
-    const [endDate, setEndDate] = useState("");
+    const [linkUrl, setLinkUrl] = useState('');
+    const [startDate, setStartDate] = useState('');
+    const [endDate, setEndDate] = useState('');
     const [likeCount, setLikeCount] = useState(0);
 
     //좋아요 상태 변경용
     const [status, setStatus] = useState(false);
-    
 
-
-    useEffect(()=>{
-        axios.get('http://localhost:8080/events/detail', {
-            withCredentials: true,
-            params: {
-                event_id: id,
-            }
-        })
-        .then(response => {
-            setThisEvent(response.data);
-            setStatus(response.data.is_like);
-            setTitle(response.data.title);
-            setCinemaName(response.data.cinema_name);
-            setImageUrl(response.data.detail_image_url);
-            setLinkUrl(response.data.link_url);
-            setStartDate(response.data.start_date);
-            setEndDate(response.data.end_date);
-            setLikeCount(response.data.like_count);
-            console.log(response.data);
-        })
-        .catch(error => console.log(error));
-
-    }, [])
+    useEffect(() => {
+        axios
+            .get('http://localhost:8080/events/detail', {
+                withCredentials: true,
+                params: {
+                    event_id: id,
+                },
+            })
+            .then((response) => {
+                setThisEvent(response.data);
+                setStatus(response.data.is_like);
+                setTitle(response.data.title);
+                setCinemaName(response.data.cinema_name);
+                setImageUrl(response.data.detail_image_url);
+                setLinkUrl(response.data.link_url);
+                setStartDate(response.data.start_date);
+                setEndDate(response.data.end_date);
+                setLikeCount(response.data.like_count);
+                console.log(response.data);
+            })
+            .catch((error) => console.log(error));
+    }, []);
 
     const likeClick = () => {
         const body = {
             event_id: thisEvent.event_id,
-        }
-        axios.post('http://localhost:8080/events/like', body, { withCredentials: true })
-        .then(response => {
-            console.log(response.data);
-            if(response.data.result){
-                if(status){
-                    setStatus(false);
-                    setLikeCount(likeCount-1);
+        };
+        axios
+            .post('http://localhost:8080/events/like', body, {
+                withCredentials: true,
+            })
+            .then((response) => {
+                console.log(response.data);
+                if (response.data.result) {
+                    if (status) {
+                        setStatus(false);
+                        setLikeCount(likeCount - 1);
+                    } else {
+                        setStatus(true);
+                        setLikeCount(likeCount + 1);
+                    }
+                } else {
+                    alert('좋아요에 실패했습니다.');
                 }
-                else {
-                    setStatus(true);
-                    setLikeCount(likeCount+1);
+            })
+            .catch((error) => {
+                if (error.response.status === 401) {
+                    alert('로그인을 먼저 해주세요');
                 }
-            }
-            else {
-                alert("좋아요에 실패했습니다.")
-            }
-        })
-        .catch(error => {
-            if(error.response.status === 401){
-                alert("로그인을 먼저 해주세요");
-            }
-        });
-    }
+            });
+    };
 
-    useEffect(()=>{
-        console.log(thisEvent)
+    useEffect(() => {
+        console.log(thisEvent);
         setThisEventIsHere(true);
-    }, [thisEvent])
+    }, [thisEvent]);
 
     return (
         <>
-        {thisEventIsHere ? 
-            <div className={style.whiteBox}>
-            <div className={style.titleBox}>
-                <div>{title}</div>
-                <div>{startDate} ~ {endDate}</div>
-            </div>
-            <div className={style.cinemaBox}>
-                <div>{cinemaName}</div>
-                <div className={style.likeBox}>
-                    <div>{status? <button onClick={likeClick} className={style.likeOnButton}></button> : <button onClick={likeClick} className={style.likeOffButton}></button>}</div>
-                    <div>{likeCount}</div>
+            {thisEventIsHere ? (
+                <div className={style.whiteBox}>
+                    <div className={style.titleBox}>
+                        <div>{title}</div>
+                        <div>
+                            {startDate} ~ {endDate}
+                        </div>
+                    </div>
+                    <div className={style.cinemaBox}>
+                        <div>{cinemaName}</div>
+                        <div className={style.likeBox}>
+                            <div>
+                                {status ? (
+                                    <button
+                                        onClick={likeClick}
+                                        className={style.likeOnButton}
+                                    ></button>
+                                ) : (
+                                    <button
+                                        onClick={likeClick}
+                                        className={style.likeOffButton}
+                                    ></button>
+                                )}
+                            </div>
+                            <div>{likeCount}</div>
+                        </div>
+                    </div>
+
+                    <div>
+                        {imageUrl.map((item, index) => (
+                            <img
+                                className={style.imageBox}
+                                key={index}
+                                src={item}
+                            />
+                        ))}
+                    </div>
+                    <div className={style.linkBox}>
+                        <button onClick={() => window.open(linkUrl, '_blank')}>
+                            자세히 보러 가기
+                        </button>
+                    </div>
                 </div>
-            </div>
-            
-            <div>
-                {   
-                    imageUrl.map((item, index) => <img  className={style.imageBox} key={index} src={item}/>)
-                }
-            </div>
-            <div className={style.linkBox}>
-                <button onClick={() => window.open(linkUrl, '_blank')}>자세히 보러 가기</button>
-            </div>
-            </div>
-        : null}
-        
+            ) : null}
         </>
     );
-}
+};
 
-export default EventDetailPage;
\ No newline at end of file
+export default EventDetailPage;
diff --git a/frontend/sweet-red-beans/src/components/EventPage/EventMovieThumbnail.js b/frontend/sweet-red-beans/src/components/EventPage/EventMovieThumbnail.js
index 34aff24..b2c8e1c 100644
--- a/frontend/sweet-red-beans/src/components/EventPage/EventMovieThumbnail.js
+++ b/frontend/sweet-red-beans/src/components/EventPage/EventMovieThumbnail.js
@@ -1,58 +1,74 @@
-import React, {useState, useEffect} from "react";
-import {Link} from "react-router-dom";
-import axios from "axios";
-import style from "../../css/EventPage/EventMovieThumbnail.module.css";
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+import style from '../../css/EventPage/EventMovieThumbnail.module.css';
 
-const EventMovieThumbnail = ({event}) => {
+const EventMovieThumbnail = ({ event }) => {
     //좋아요 상태 변경용
     const [status, setStatus] = useState(event.is_like);
 
     const likeClick = () => {
         const body = {
             event_id: event.event_id,
-        }
-        axios.post('http://localhost:8080/events/like', body, { withCredentials: true })
-        .then(response => {
-            console.log(response.data);
-            if(response.data.result){
-                if(status){
-                    setStatus(false);
+        };
+        axios
+            .post('http://localhost:8080/events/like', body, {
+                withCredentials: true,
+            })
+            .then((response) => {
+                console.log(response.data);
+                if (response.data.result) {
+                    if (status) {
+                        setStatus(false);
+                    } else {
+                        setStatus(true);
+                    }
+                } else {
+                    alert('좋아요에 실패했습니다.');
                 }
-                else {
-                    setStatus(true);
+            })
+            .catch((error) => {
+                if (error.response.status === 401) {
+                    alert('로그인을 먼저 해주세요');
                 }
-            }
-            else {
-                alert("좋아요에 실패했습니다.");
-            }
-        })
-        .catch(error => {
-            if(error.response.status === 401){
-                alert("로그인을 먼저 해주세요");
-            }
-        });
-    }
+            });
+    };
 
     useEffect(() => {
-        if(status === undefined) {
+        if (status === undefined) {
             setStatus(true);
         }
-    }, [status])
+    }, [status]);
 
-    return(
+    return (
         <>
-        <div className={style.container}>
-            <Link to = {`/event/${event.event_id}`} style={{ textDecoration: 'none' }} className={style.thumbnailArea}>
-                <img src={event.thumbnail_url}/>
-                <div>{event.title}</div>
-                <div>{event.start_date} ~ {event.end_date}</div>
-            </Link>
+            <div className={style.container}>
+                <Link
+                    to={`/event/${event.event_id}`}
+                    style={{ textDecoration: 'none' }}
+                    className={style.thumbnailArea}
+                >
+                    <img src={event.thumbnail_url} />
+                    <div>{event.title}</div>
+                    <div>
+                        {event.start_date} ~ {event.end_date}
+                    </div>
+                </Link>
 
-            {status? <button onClick={likeClick} className={style.likeOnButton}></button> : <button onClick={likeClick} className={style.likeOffButton}></button>}
-        </div>
-        
+                {status ? (
+                    <button
+                        onClick={likeClick}
+                        className={style.likeOnButton}
+                    ></button>
+                ) : (
+                    <button
+                        onClick={likeClick}
+                        className={style.likeOffButton}
+                    ></button>
+                )}
+            </div>
         </>
     );
-}
+};
 
-export default EventMovieThumbnail;
\ No newline at end of file
+export default EventMovieThumbnail;
diff --git a/frontend/sweet-red-beans/src/components/EventPage/EventPage.js b/frontend/sweet-red-beans/src/components/EventPage/EventPage.js
index a8055af..28a0595 100644
--- a/frontend/sweet-red-beans/src/components/EventPage/EventPage.js
+++ b/frontend/sweet-red-beans/src/components/EventPage/EventPage.js
@@ -1,153 +1,189 @@
-import React, {useCallback, useEffect, useState, useMemo} from "react";
-import { Routes, Route } from "react-router";
-import { Link } from "react-router-dom";
-import EventDetailPage from "./EventDetailPage";
-import { useNavigate } from "react-router";
-import Events from "./Events";
-import { useDispatch, useSelector, shallowEqual } from "react-redux";
-import events from "../../actions/event_action";
-import { EVENT_ISEND, EVENT_SORT, EVENTS } from "../../actions/types";
-import axios from "axios";
-import style from "../../css/EventPage/EventPage.module.css";
+import React, { useCallback, useEffect, useState, useMemo } from 'react';
+import { Routes, Route } from 'react-router';
+import { Link } from 'react-router-dom';
+import EventDetailPage from './EventDetailPage';
+import { useNavigate } from 'react-router';
+import Events from './Events';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import events from '../../actions/event_action';
+import { EVENT_ISEND, EVENT_SORT, EVENTS } from '../../actions/types';
+import axios from 'axios';
+import style from '../../css/EventPage/EventPage.module.css';
 
 const EventPage = () => {
-    
     let navigation = useNavigate();
     const dispatch = useDispatch();
 
-    const [events, setEvents] = useState([]); 
+    const [events, setEvents] = useState([]);
     const [eventIsHere, setEventIsHere] = useState(false);
     //검색 단어, 처음에 없음
-    const [search, setSearch] = useState("");
+    const [search, setSearch] = useState('');
     //검색했던 단어들 저장
     const [searchWords, setSearchWords] = useState([]);
     //진행중이면 false
     const [isEnd, setIsEnd] = useState(false);
-    const selectList = ["전체", "CGV", "롯데시네마", "메가박스", "씨네큐"];
+    const selectList = ['전체', 'CGV', '롯데시네마', '메가박스', '씨네큐'];
     //선택된 시네마 이름, 처음엔 영화관
-    const [selected, setSelected] = useState("전체");
+    const [selected, setSelected] = useState('전체');
     //선택했던 시네마 이름들 저장
     const [selecteds, setSelecteds] = useState([]);
     //최신순(recent) or 관심도순(interest)
-    const [sort, setSort] = useState("최신순");
+    const [sort, setSort] = useState('최신순');
 
     //검색
     const searchChange = (e) => {
         setSearch(e.target.value);
-    }
-    
+    };
+
     //검색 버튼 눌렀을 때 다시 서버 요청
     const searchClick = () => {
         setSearchWords([...searchWords, search]);
         setSelecteds([...selecteds, selected]);
-    }
+    };
 
     //진행 중 클릭했을 때 다시 서버 요청
     const ongoingClick = () => {
         setIsEnd(false);
         dispatch({
-            type:EVENT_ISEND,
+            type: EVENT_ISEND,
             payload: false,
-        })
-    }
+        });
+    };
 
     //진행 완료 클릭했을 때 다시 서버 요청
     const doneClick = () => {
         setIsEnd(true);
         dispatch({
-            type:EVENT_ISEND,
+            type: EVENT_ISEND,
             payload: true,
-        })
-    }
+        });
+    };
 
     //최신순 클릭했을 때 다시 서버 요청
     const recentClick = () => {
-        setSort("최신순");
+        setSort('최신순');
         dispatch({
-            type:EVENT_SORT,
-            payload:"최신순",
-        })
-    }
+            type: EVENT_SORT,
+            payload: '최신순',
+        });
+    };
 
     //관심도순 클릭했을 때 다시 서버 요청
-    const interestClick = () =>{
-        setSort("관심도순");
+    const interestClick = () => {
+        setSort('관심도순');
         dispatch({
-            type:EVENT_SORT,
-            payload:"관심도순",
-        })
-    }
+            type: EVENT_SORT,
+            payload: '관심도순',
+        });
+    };
 
     //영화관 필터 바뀌었을 때
     const selectChange = (e) => {
         setSelected(e.target.value);
-    }
-
+    };
 
-    useEffect(()=>{
+    useEffect(() => {
         // //처음에 기본으로 진행 중인 이벤트로 보여줌
         // dispatch({
         //     type:EVENT_ISEND,
         //     payload:false,
         // })
-        
         // //처음에 기본으로 최신순으로 보여줌
         // dispatch({
         //     type:EVENT_SORT,
         //     payload:sort,
         // })
+    }, []);
 
-
-    }, [])
-
-    useEffect(()=> {
+    useEffect(() => {
         // dispatch({
         //     type:EVENTS,
         //     events:events,
         // });
-        setEventIsHere(true)
-    },[events])
+        setEventIsHere(true);
+    }, [events]);
 
-    return(
+    return (
         <>
-        <div className={style.whiteBox}>
-            <div className={style.topBar}>
-                <div className={style.datefilter}>
-                    <button onClick={ongoingClick} className={isEnd?style.notSelected:style.selected}>진행 중</button>
-                    <button onClick={doneClick} className={!isEnd?style.notSelected:style.selected}>진행 완료</button>
-                </div>
-                <div id="align" className={style.filter}>
-                    <button onClick={recentClick} className={sort==="최신순"?style.selected:style.notSelected}>최신순</button>
-                    <button onClick={interestClick} className={sort==="관심도순"?style.selected:style.notSelected}>관심도순</button>
+            <div className={style.whiteBox}>
+                <div className={style.topBar}>
+                    <div className={style.datefilter}>
+                        <button
+                            onClick={ongoingClick}
+                            className={
+                                isEnd ? style.notSelected : style.selected
+                            }
+                        >
+                            진행 중
+                        </button>
+                        <button
+                            onClick={doneClick}
+                            className={
+                                !isEnd ? style.notSelected : style.selected
+                            }
+                        >
+                            진행 완료
+                        </button>
+                    </div>
+                    <div id="align" className={style.filter}>
+                        <button
+                            onClick={recentClick}
+                            className={
+                                sort === '최신순'
+                                    ? style.selected
+                                    : style.notSelected
+                            }
+                        >
+                            최신순
+                        </button>
+                        <button
+                            onClick={interestClick}
+                            className={
+                                sort === '관심도순'
+                                    ? style.selected
+                                    : style.notSelected
+                            }
+                        >
+                            관심도순
+                        </button>
+                    </div>
+                    <div className={style.cinemafilter}>
+                        <select onChange={selectChange} value={selected}>
+                            {selectList.map((item) => (
+                                <option value={item} key={item}>
+                                    {item}
+                                </option>
+                            ))}
+                        </select>
+                        <span className={style.filterArrow}></span>
+                    </div>
+
+                    <div className={style.search}>
+                        <input
+                            type="text"
+                            placeholder="검색"
+                            onChange={searchChange}
+                            value={search}
+                        ></input>
+                        <div className={style.underline}></div>
+                        <button
+                            id="searchButton"
+                            onClick={searchClick}
+                        ></button>
+                    </div>
                 </div>
-                <div className={style.cinemafilter}>
-                    <select onChange={selectChange} value={selected}>
-                        {selectList.map((item) => (
-                            <option value={item} key={item}>{item}</option>
-                        ))}
-                    </select>
-                    <span className={style.filterArrow}></span>
-                </div>
-                
 
-                <div className={style.search}>
-                    <input type="text" placeholder="검색" onChange={searchChange} value={search}></input>
-                    <div className={style.underline}></div>
-                    <button id="searchButton" onClick={searchClick}></button>
-                </div>
+                {
+                    <Events
+                        sort={sort}
+                        isEnd={isEnd}
+                        search_word={searchWords}
+                        cinema_name={selecteds}
+                    />
+                }
             </div>
-            
-
-
-            {
-            <Events sort={sort} isEnd={isEnd} search_word={searchWords} cinema_name={selecteds}/>
-            }
-        
-        </div>
-        
         </>
-        
     );
-}
+};
 
-export default EventPage;
\ No newline at end of file
+export default EventPage;
diff --git a/frontend/sweet-red-beans/src/components/EventPage/Events.js b/frontend/sweet-red-beans/src/components/EventPage/Events.js
index 665b85d..de735b6 100644
--- a/frontend/sweet-red-beans/src/components/EventPage/Events.js
+++ b/frontend/sweet-red-beans/src/components/EventPage/Events.js
@@ -1,87 +1,89 @@
-import React, {useState, useEffect} from "react";
-import { Routes, Route } from "react-router";
-import { Link } from "react-router-dom";
-import EventDetailPage from "./EventDetailPage";
-import { useNavigate } from "react-router";
-import EventPage from "./EventPage";
-import EventMovieThumbnail from "./EventMovieThumbnail";
-import { useSelector } from "react-redux";
-import axios from "axios";
-import style from "../../css/EventPage/Events.module.css";
-import Pagination from "../Pagination/Pagination";
+import React, { useState, useEffect } from 'react';
+import { Routes, Route } from 'react-router';
+import { Link } from 'react-router-dom';
+import EventDetailPage from './EventDetailPage';
+import { useNavigate } from 'react-router';
+import EventPage from './EventPage';
+import EventMovieThumbnail from './EventMovieThumbnail';
+import { useSelector } from 'react-redux';
+import axios from 'axios';
+import style from '../../css/EventPage/Events.module.css';
+import Pagination from '../Pagination/Pagination';
 
-const Events = ({sort, isEnd, search_word, cinema_name}) => {
+const Events = ({ sort, isEnd, search_word, cinema_name }) => {
     const [limit, setLimit] = useState(12);
     const [page, setPage] = useState(1);
     const offset = (page - 1) * limit;
 
-    const [events, setEvents] = useState([]); 
-    useEffect(()=> {
-        const body = 
-        {
+    const [events, setEvents] = useState([]);
+    useEffect(() => {
+        const body = {
             withCredentials: true,
-            params:{
+            params: {
                 sort_criteria: sort,
                 is_end: isEnd,
-            }
-        }
-        
-        //처음에 진행 중, 최신순으로 요청
-        axios.get('http://localhost:8080/events/search',body)
-        .then(response => setEvents(response.data))
-        .catch(error => console.log(error));
-
+            },
+        };
 
-    },[])
+        //처음에 진행 중, 최신순으로 요청
+        axios
+            .get('http://localhost:8080/events/search', body)
+            .then((response) => setEvents(response.data))
+            .catch((error) => console.log(error));
+    }, []);
 
-    useEffect(()=> {
-        console.log("!!!!!!!!!!!!!!!!!!");
-        let body = {}
-        if(cinema_name[cinema_name.length-1] === "전체"){
+    useEffect(() => {
+        console.log('!!!!!!!!!!!!!!!!!!');
+        let body = {};
+        if (cinema_name[cinema_name.length - 1] === '전체') {
             body = {
                 withCredentials: true,
                 params: {
                     sort_criteria: sort,
                     is_end: isEnd,
-                    search_word: search_word[search_word.length-1],
-                }
-            }
+                    search_word: search_word[search_word.length - 1],
+                },
+            };
         } else {
             body = {
                 withCredentials: true,
                 params: {
-                    cinema_name: cinema_name[cinema_name.length-1],
+                    cinema_name: cinema_name[cinema_name.length - 1],
                     sort_criteria: sort,
                     is_end: isEnd,
-                    search_word: search_word[search_word.length-1],
-                }
-            }
+                    search_word: search_word[search_word.length - 1],
+                },
+            };
         }
-        axios.get('http://localhost:8080/events/search',body)
-        .then(response => {
-            setEvents(response.data)
-            console.log(response.data);
-        })
-        .catch(error => console.log(error));
-
-    },[sort, isEnd, search_word, cinema_name])
-
+        axios
+            .get('http://localhost:8080/events/search', body)
+            .then((response) => {
+                setEvents(response.data);
+                console.log(response.data);
+            })
+            .catch((error) => console.log(error));
+    }, [sort, isEnd, search_word, cinema_name]);
 
-    return(
+    return (
         <>
-        <div className={style.events}>
-        {events.slice(offset, offset+limit).map((item) => <div key={item.event_id}><EventMovieThumbnail event={item}/></div>)}
-        </div>
+            <div className={style.events}>
+                {events.slice(offset, offset + limit).map((item) => (
+                    <div key={item.event_id}>
+                        <EventMovieThumbnail event={item} />
+                    </div>
+                ))}
+            </div>
 
-        <footer className={style.footer}>
-            <Pagination total={events.length}
-            limit={limit}
-            page={page}
-            setPage={setPage}/>
-        </footer>
-    
+            <footer className={style.footer}>
+                <Pagination
+                    total={events.length}
+                    limit={limit}
+                    page={page}
+                    setPage={setPage}
+                />
+            </footer>
         </>
     );
-}
+};
 
-export default Events;
\ No newline at end of file
+export default Events;
diff --git a/frontend/sweet-red-beans/src/components/Footer/Footer.js b/frontend/sweet-red-beans/src/components/Footer/Footer.js
index 26000a7..fc5c3dd 100644
--- a/frontend/sweet-red-beans/src/components/Footer/Footer.js
+++ b/frontend/sweet-red-beans/src/components/Footer/Footer.js
@@ -1,57 +1,54 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import style from "../../css/Footer/Footer.module.css";
-import { ReactComponent as Github } from "../../img/github.svg";
-import { ReactComponent as Mail} from "../../img/maildotru.svg";
-import { SWEET_RED_BEANS_GITHUB, MEMBER_GITHUB, EMAIL } from "../../url/url";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import style from '../../css/Footer/Footer.module.css';
+import { ReactComponent as Github } from '../../img/github.svg';
+import { ReactComponent as Mail } from '../../img/maildotru.svg';
+import { SWEET_RED_BEANS_GITHUB, MEMBER_GITHUB, EMAIL } from '../../url/url';
 
 const Footer = () => {
-    const members = ["김민지", "이다은", "이지영", "조현정"];
+    const members = ['김민지', '이다은', '이지영', '조현정'];
     const [copy, setCopy] = useState(false);
     const [notCopy, setNotCopy] = useState(false);
-    
 
     const githubClick = useCallback(() => {
         window.open(SWEET_RED_BEANS_GITHUB);
-        }
-    )
+    });
 
     useEffect(() => {
         console.log(copy);
-    }, [copy])
+    }, [copy]);
 
     const mailClick = useCallback(() => {
-        
         //email.classList.toggle("active")
         // setTimeout(() => {addClass()} ,200)
 
         setCopy(true);
         setTimeout(() => {
             setCopy(false);
-        }, 2000)
-        
+        }, 2000);
+
         if (navigator.clipboard) {
             // (IE는 사용 못하고, 크롬은 66버전 이상일때 사용 가능합니다.)
             navigator.clipboard
-              .writeText(EMAIL)
-              .then(() => {
-                console.log("클립보드에 복사되었습니다.");
-              })
-              .catch(() => {
-                setNotCopy(true);
-              });
-          } else {
+                .writeText(EMAIL)
+                .then(() => {
+                    console.log('클립보드에 복사되었습니다.');
+                })
+                .catch(() => {
+                    setNotCopy(true);
+                });
+        } else {
             // 흐름 2.
-            if (!document.queryCommandSupported("copy")) {
-                setNotCopy(true)
+            if (!document.queryCommandSupported('copy')) {
+                setNotCopy(true);
             }
-      
+
             // 흐름 3.
-            const textarea = document.createElement("textarea");
+            const textarea = document.createElement('textarea');
             textarea.value = EMAIL;
             textarea.style.top = 0;
             textarea.style.left = 0;
-            textarea.style.position = "fixed";
-      
+            textarea.style.position = 'fixed';
+
             // 흐름 4.
             document.body.appendChild(textarea);
             // focus() -> 사파리 브라우저 서포팅
@@ -59,44 +56,55 @@ const Footer = () => {
             // select() -> 사용자가 입력한 내용을 영역을 설정할 때 필요
             textarea.select();
             // 흐름 5.
-            document.execCommand("copy");
+            document.execCommand('copy');
             // 흐름 6.
             document.body.removeChild(textarea);
-            console.log("클립보드에 복사되었습니다.2");
-          }
-    })
+            console.log('클립보드에 복사되었습니다.2');
+        }
+    });
 
     const memberClick = (index) => {
         window.open(MEMBER_GITHUB[index]);
-    }
+    };
 
     return (
         <>
-        <footer className={style.footer}>
+            <footer className={style.footer}>
+                <div className={style.github} onClick={githubClick}>
+                    <Github />
+                </div>
 
-            <div className={style.github} onClick={githubClick}><Github/></div>
-            
-            <div className={copy ? style.mailArea : style.mailArea} onClick={mailClick}>
-                <div className={copy ? `${style.message} ${style.active}` : style.message}>
-                    {EMAIL}
-                    <div>
-                    {notCopy ? "복사 실패!" : "복사!"}
+                <div
+                    className={copy ? style.mailArea : style.mailArea}
+                    onClick={mailClick}
+                >
+                    <div
+                        className={
+                            copy
+                                ? `${style.message} ${style.active}`
+                                : style.message
+                        }
+                    >
+                        {EMAIL}
+                        <div>{notCopy ? '복사 실패!' : '복사!'}</div>
+                    </div>
+                    <div className={style.mail}>
+                        <Mail />
                     </div>
-                    
-                </div>
-                <div className={style.mail}>
-                    <Mail/>
                 </div>
-            </div>
 
-            <div className={style.team}>스윗레드빈즈</div>
+                <div className={style.team}>스윗레드빈즈</div>
 
-            <div className={style.member}>
-                {members.map((member, index) => <button key={index} onClick={() => memberClick(index)}>{member}</button>)}
-            </div>
-        </footer>
+                <div className={style.member}>
+                    {members.map((member, index) => (
+                        <button key={index} onClick={() => memberClick(index)}>
+                            {member}
+                        </button>
+                    ))}
+                </div>
+            </footer>
         </>
     );
-}
+};
 
-export default Footer
\ No newline at end of file
+export default Footer;
diff --git a/frontend/sweet-red-beans/src/components/InformationShares/InformationShareDetailPage.js b/frontend/sweet-red-beans/src/components/InformationShares/InformationShareDetailPage.js
index 4c2c8ae..b89b419 100644
--- a/frontend/sweet-red-beans/src/components/InformationShares/InformationShareDetailPage.js
+++ b/frontend/sweet-red-beans/src/components/InformationShares/InformationShareDetailPage.js
@@ -1,174 +1,197 @@
-import React, {useEffect, useMemo, useState}from "react";
-import { Link, unstable_HistoryRouter } from "react-router-dom";
-import Comment from "../Comment/Comment";
-import { useParams } from "react-router";
-import { useSelector } from "react-redux";
-import axios from "axios";
-import { useNavigate } from "react-router";
-import style from "../../css/InformationSharePage/InformationShareDetailPage.module.css";
-import { parseDate } from "../../parseDate/parseDate";
+import React, { useEffect, useMemo, useState } from 'react';
+import { Link, unstable_HistoryRouter } from 'react-router-dom';
+import Comment from '../Comment/Comment';
+import { useParams } from 'react-router';
+import { useSelector } from 'react-redux';
+import axios from 'axios';
+import { useNavigate } from 'react-router';
+import style from '../../css/InformationSharePage/InformationShareDetailPage.module.css';
+import { parseDate } from '../../parseDate/parseDate';
 
 const InformationShareDetailPage = () => {
-    
     let navigation = useNavigate();
-    const {postid} = useParams();
+    const { postid } = useParams();
     //const userid = useSelector(state => state.user.user_id);
     const [detailInfo, setDetailInfo] = useState({});
     const [comments, setComments] = useState([]);
     const [commentsIsHere, setCommentsIsHere] = useState(false);
 
-    const[commentContent, setCommentContent] = useState("");
+    const [commentContent, setCommentContent] = useState('');
 
     //처음 조회
-    useEffect(()=>{
+    useEffect(() => {
         document.documentElement.scrollTop = 0;
 
-        axios.get('http://localhost:8080/information-share/detail',{
-        withCredentials: true,
-        params: {
-                    post_id : postid,
-                    user_id : "1",
-                }
-        })
-        .then(response => {
-            setDetailInfo(response.data); 
-            setComments(response.data.comment)
-        })
-        .catch(error => console.log(error));
-
-    },[])
+        axios
+            .get('http://localhost:8080/information-share/detail', {
+                withCredentials: true,
+                params: {
+                    post_id: postid,
+                    user_id: '1',
+                },
+            })
+            .then((response) => {
+                setDetailInfo(response.data);
+                setComments(response.data.comment);
+            })
+            .catch((error) => console.log(error));
+    }, []);
 
-    useEffect(()=>{
+    useEffect(() => {
         setCommentsIsHere(true);
-    }, [comments])
+    }, [comments]);
 
     const useConfirm = (message = null, onConfirm, onCancel) => {
-        if (!onConfirm || typeof onConfirm !== "function") {
+        if (!onConfirm || typeof onConfirm !== 'function') {
             return;
         }
-        if (onCancel && typeof onCancel !== "function") {
+        if (onCancel && typeof onCancel !== 'function') {
             return;
         }
-        
+
         const confirmAction = () => {
             if (window.confirm(message)) {
-            onConfirm();
+                onConfirm();
             } else {
-            onCancel();
+                onCancel();
             }
         };
-        
+
         return confirmAction;
     };
 
     //삭제버튼 눌렀을 때
     const deleteConfirm = () => {
-        axios.delete('http://localhost:8080/information-share/detail',{
-        withCredentials: true,
-        data: {
-                    post_id : postid,
-                    user_id : "1",
+        axios
+            .delete('http://localhost:8080/information-share/detail', {
+                withCredentials: true,
+                data: {
+                    post_id: postid,
+                    user_id: '1',
+                },
+            })
+            .then((response) => {
+                if (response.data.result) {
+                    alert('삭제되었습니다.');
+                    //이전 페이지로 이동
+                    navigation(-1);
+                } else {
+                    alert('삭제에 실패했습니다.');
                 }
-        })
-        .then(response => {
-            if(response.data.result){
-                alert("삭제되었습니다.")
-                //이전 페이지로 이동
-                navigation(-1)
-            }
-            else {
-                alert("삭제에 실패했습니다.")
-            }
-        })
-        .catch(error => console.log(error));
-        
-    }
+            })
+            .catch((error) => console.log(error));
+    };
 
-    const cancelConfirm = () => console.log("삭제 취소")
+    const cancelConfirm = () => console.log('삭제 취소');
 
     const deleteClick = useConfirm(
-        "삭제하시겠습니까?",
+        '삭제하시겠습니까?',
         deleteConfirm,
         cancelConfirm
     );
 
     const commentContentChange = (e) => {
         setCommentContent(e.target.value);
-    }
+    };
 
     //댓글쓰기 버튼 눌렀을 때
     const commentAddClick = () => {
-        if(commentContent !== "") {
-            setCommentContent("");
+        if (commentContent !== '') {
+            setCommentContent('');
             const body = {
-                user_id: "1",
+                user_id: '1',
                 content: commentContent,
                 post_id: postid,
-            }
-    
-            axios.post('http://localhost:8080/information-share/comment', body, { withCredentials: true })
-            .then(response => {
-                if(response.data.result){
-                    console.log("댓글 작성됨");
-                    navigation(0)
-                }
-                else{
-                    alert("댓글 작성에 실패했습니다.");
-                }
-            })
-            .catch(error => {
-                if(error.response.status === 401){
-                    alert("로그인을 먼저 해주세요");
-                }
-            });
+            };
+
+            axios
+                .post('http://localhost:8080/information-share/comment', body, {
+                    withCredentials: true,
+                })
+                .then((response) => {
+                    if (response.data.result) {
+                        console.log('댓글 작성됨');
+                        navigation(0);
+                    } else {
+                        alert('댓글 작성에 실패했습니다.');
+                    }
+                })
+                .catch((error) => {
+                    if (error.response.status === 401) {
+                        alert('로그인을 먼저 해주세요');
+                    }
+                });
         }
-    }
+    };
 
-    return(
+    return (
         <>
-        <div className={style.whiteBox}>
-            <div className={style.detailArea}>
-                <div className={style.titleArea}>
-                    <div>{detailInfo.title}</div>
-                    <div>{detailInfo.cinema_name} &gt; {detailInfo.cinema_area} &gt; {detailInfo.cinema_branch}</div>
-                </div>
+            <div className={style.whiteBox}>
+                <div className={style.detailArea}>
+                    <div className={style.titleArea}>
+                        <div>{detailInfo.title}</div>
+                        <div>
+                            {detailInfo.cinema_name} &gt;{' '}
+                            {detailInfo.cinema_area} &gt;{' '}
+                            {detailInfo.cinema_branch}
+                        </div>
+                    </div>
 
-                <div className={style.topBar}>
-                    <div>{detailInfo.user_status === "정지" || detailInfo.user_status === "탈퇴" ? "(알수없음)" : detailInfo.nickname}</div>
-                    <div>{parseDate(detailInfo.written_date)}</div>
-                    <div>{detailInfo.views}</div>
-                </div>
+                    <div className={style.topBar}>
+                        <div>
+                            {detailInfo.user_status === '정지' ||
+                            detailInfo.user_status === '탈퇴'
+                                ? '(알수없음)'
+                                : detailInfo.nickname}
+                        </div>
+                        <div>{parseDate(detailInfo.written_date)}</div>
+                        <div>{detailInfo.views}</div>
+                    </div>
 
-                <div className={style.contentArea}>
-                    <div>{detailInfo.image_url !== "" ? <img src={detailInfo.image_url}/> : null}</div>
-                    <div>{detailInfo.content}</div>
-                    <div>
-                        {detailInfo.is_mine ? <button onClick={deleteClick}>삭제</button> : null}
+                    <div className={style.contentArea}>
+                        <div>
+                            {detailInfo.image_url !== '' ? (
+                                <img src={detailInfo.image_url} />
+                            ) : null}
+                        </div>
+                        <div>{detailInfo.content}</div>
+                        <div>
+                            {detailInfo.is_mine ? (
+                                <button onClick={deleteClick}>삭제</button>
+                            ) : null}
+                        </div>
                     </div>
-                </div>
-                
-                <div className={style.commentArea}>
-                    <div>댓글</div>
-                    
-                    {commentsIsHere ? (
-                    comments.map((item, index) => <div key={index}><Comment comment={item}/></div>)
-                    ) : null}
-                    <div className={style.commentWriteArea}>
-                        <input type="textarea" placeholder="댓글 쓰기" value={commentContent} onChange={commentContentChange}/>
-                        <button onClick={commentAddClick}></button>
+
+                    <div className={style.commentArea}>
+                        <div>댓글</div>
+
+                        {commentsIsHere
+                            ? comments.map((item, index) => (
+                                  <div key={index}>
+                                      <Comment comment={item} />
+                                  </div>
+                              ))
+                            : null}
+                        <div className={style.commentWriteArea}>
+                            <input
+                                type="textarea"
+                                placeholder="댓글 쓰기"
+                                value={commentContent}
+                                onChange={commentContentChange}
+                            />
+                            <button onClick={commentAddClick}></button>
+                        </div>
                     </div>
-                    
+                </div>
+
+                <div className={style.preButton}>
+                    <Link to={`/informationShare`}>
+                        <button>목록으로 돌아가기</button>
+                    </Link>
                 </div>
             </div>
-        
-            <div className={style.preButton}>
-                <Link to={`/informationShare`}>
-                <button>목록으로 돌아가기</button>
-                </Link>
-            </div>
-        </div>
         </>
     );
-}
+};
 
-export default InformationShareDetailPage;
\ No newline at end of file
+export default InformationShareDetailPage;
diff --git a/frontend/sweet-red-beans/src/components/InformationShares/InformationSharePage.js b/frontend/sweet-red-beans/src/components/InformationShares/InformationSharePage.js
index 931e845..341e1d5 100644
--- a/frontend/sweet-red-beans/src/components/InformationShares/InformationSharePage.js
+++ b/frontend/sweet-red-beans/src/components/InformationShares/InformationSharePage.js
@@ -1,197 +1,245 @@
-import React, { useEffect, useState, useMemo, useCallback } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import { CGVarea, CGV0, CGV1, CGV2, CGV3, CGV4, CGV5, CGV6, CGV7, CGV8 } from "../../cinemas/CGVcinemas";
-import { LCarea, LC0, LC1, LC2, LC3, LC4, LC5, LC6, LC7 } from "../../cinemas/LCcinemas";
-import { MBarea, MB0, MB1, MB2, MB3, MB4, MB5, MB6 } from "../../cinemas/MBcinemas";
-import { CQarea, CQ0, CQ1, CQ2, CQ3, CQ4 } from "../../cinemas/CQcinemas";
-import InformationShares from "./InformationShares";
-import { Link } from "react-router-dom";
-import { INFO } from "../../actions/types";
-import axios from "axios";
-import style from "../../css/InformationSharePage/InformationSharePage.module.css";
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import {
+    CGVarea,
+    CGV0,
+    CGV1,
+    CGV2,
+    CGV3,
+    CGV4,
+    CGV5,
+    CGV6,
+    CGV7,
+    CGV8,
+} from '../../cinemas/CGVcinemas';
+import {
+    LCarea,
+    LC0,
+    LC1,
+    LC2,
+    LC3,
+    LC4,
+    LC5,
+    LC6,
+    LC7,
+} from '../../cinemas/LCcinemas';
+import {
+    MBarea,
+    MB0,
+    MB1,
+    MB2,
+    MB3,
+    MB4,
+    MB5,
+    MB6,
+} from '../../cinemas/MBcinemas';
+import { CQarea, CQ0, CQ1, CQ2, CQ3, CQ4 } from '../../cinemas/CQcinemas';
+import InformationShares from './InformationShares';
+import { Link } from 'react-router-dom';
+import { INFO } from '../../actions/types';
+import axios from 'axios';
+import style from '../../css/InformationSharePage/InformationSharePage.module.css';
 
 const InformationSharePage = () => {
     const dispatch = useDispatch();
 
-    const cinemaNames = ["전체", "CGV", "롯데시네마", "메가박스", "씨네큐"];
+    const cinemaNames = ['전체', 'CGV', '롯데시네마', '메가박스', '씨네큐'];
     const CGVarray = [CGV0, CGV1, CGV2, CGV3, CGV4, CGV5, CGV6, CGV7, CGV8];
     const LCarray = [LC0, LC1, LC2, LC3, LC4, LC5, LC6, LC7];
     const MBarray = [MB0, MB1, MB2, MB3, MB4, MB5, MB6];
     const CQarray = [CQ0, CQ1, CQ2, CQ3, CQ4];
 
     //필터에서 선택한 영화사, 지역, 지점 이름
-    const [cinemaName, setCinemaName] = useState("전체");
-    const [cinemaArea, setCinemaArea] = useState("지역");
-    const [cinemaBranch, setCinemaBranch] = useState("지점");
+    const [cinemaName, setCinemaName] = useState('전체');
+    const [cinemaArea, setCinemaArea] = useState('지역');
+    const [cinemaBranch, setCinemaBranch] = useState('지점');
     //필터에서 선택하면 true로 바뀜
     const [cinemaNameSelected, setCinemaNameSelected] = useState(false);
     const [cinemaAreaSelected, setCinemaAreaSelected] = useState(false);
-    const [cinemaBranchSelected, setCinemaBranchSelected] = useState(false); 
+    const [cinemaBranchSelected, setCinemaBranchSelected] = useState(false);
     //보여줄 array
     const [cinemaAreas, setCinemaAreas] = useState([]);
     const [array, setArray] = useState([]);
     const [cinemaBranches, setCinemaBranches] = useState([]);
     //이제까지 검색한 것
     const [searchWords, setSearchWords] = useState([]);
-    
+
     //search
-    const [search, setSearch] = useState("");
+    const [search, setSearch] = useState('');
 
-    const sorts = ["제목+내용", "제목", "내용", "작성자"];
-    const [sort, setSort] = useState("제목+내용");
+    const sorts = ['제목+내용', '제목', '내용', '작성자'];
+    const [sort, setSort] = useState('제목+내용');
 
     useEffect(() => {
         document.documentElement.scrollTop = 0;
-    }, [])
+    }, []);
 
     //영화관을 선택했을 때
     const cinemaNameChange = (e) => {
-        if(e.target.value === "전체"){
-            setCinemaName("전체");
-            setCinemaArea("지역")
-            setCinemaBranch("지점")
+        if (e.target.value === '전체') {
+            setCinemaName('전체');
+            setCinemaArea('지역');
+            setCinemaBranch('지점');
             setCinemaNameSelected(false);
             setCinemaAreaSelected(false);
             setCinemaBranchSelected(false);
-        }
-        else {
+        } else {
             const selected = e.target.value;
             setCinemaName(selected);
-            if(selected === "CGV"){
+            if (selected === 'CGV') {
                 setCinemaAreas(CGVarea);
                 setCinemaAreaSelected(false);
-                setCinemaArea("지역")
-                setCinemaBranch("지점")
+                setCinemaArea('지역');
+                setCinemaBranch('지점');
                 setArray(CGVarray);
-            } else if (selected === "롯데시네마"){
+            } else if (selected === '롯데시네마') {
                 setCinemaAreas(LCarea);
                 setCinemaAreaSelected(false);
-                setCinemaArea("지역")
-                setCinemaBranch("지점")
+                setCinemaArea('지역');
+                setCinemaBranch('지점');
                 setArray(LCarray);
-            } else if (selected === "메가박스"){
+            } else if (selected === '메가박스') {
                 setCinemaAreas(MBarea);
                 setCinemaAreaSelected(false);
-                setCinemaBranch("지점")
-                setCinemaArea("지역")
+                setCinemaBranch('지점');
+                setCinemaArea('지역');
                 setArray(MBarray);
-            } else if (selected === "씨네큐"){
+            } else if (selected === '씨네큐') {
                 setCinemaAreas(CQarea);
                 setCinemaAreaSelected(false);
-                setCinemaArea("지역")
-                setCinemaBranch("지점")
+                setCinemaArea('지역');
+                setCinemaBranch('지점');
                 setArray(CQarray);
             }
             setCinemaNameSelected(true);
         }
-    }
+    };
 
     //지역을 선택했을 때
     const cinemaAreaChange = (e) => {
-        if(e.target.value === "지역"){
-            setCinemaArea("지역")
-            setCinemaBranch("지점")
+        if (e.target.value === '지역') {
+            setCinemaArea('지역');
+            setCinemaBranch('지점');
             setCinemaAreaSelected(false);
             setCinemaBranchSelected(false);
-        }
-        else {
+        } else {
             setCinemaArea(e.target.value);
-            setCinemaBranch("지점")
+            setCinemaBranch('지점');
             setCinemaAreaSelected(true);
             //선택한 지역에 따라 해당 지역에 있는 지점들 리스트로 지정해줌
-            setCinemaBranches(array[cinemaAreas.indexOf(e.target.value)-1]);
+            setCinemaBranches(array[cinemaAreas.indexOf(e.target.value) - 1]);
         }
-    }
+    };
 
     //지점 선택했을 때
     const cinemaBranchChange = (e) => {
-        if(e.target.value === "지점"){
-            setCinemaBranch("지점")
-        }
-        else {
+        if (e.target.value === '지점') {
+            setCinemaBranch('지점');
+        } else {
             setCinemaBranch(e.target.value);
             setCinemaBranchSelected(true);
         }
-    }
+    };
 
     const sortChange = (e) => {
         setSort(e.target.value);
-    }
+    };
 
-    const searchChange = useCallback((e) => {
-        setSearch(e.target.value);
-    },[search]);
+    const searchChange = useCallback(
+        (e) => {
+            setSearch(e.target.value);
+        },
+        [search]
+    );
 
     //검색 버튼 클릭했을 때
     const searchClick = () => {
         setSearchWords([...searchWords, search]);
-    }
+    };
 
-    return(
+    return (
         <>
-        <div className={style.whiteBox}>
-            <div className={style.filterArea}>
-                <div className={style.filter}>
-                    <select onChange={cinemaNameChange} value={cinemaName}>
-                        {cinemaNames.map((item) => (
-                            <option value={item} key={item}>{item}</option>
-                        ))}
-                    </select>
-                    <span className={style.filterArrow}></span>
-                </div>
-                
-                {
-                    cinemaNameSelected ? 
+            <div className={style.whiteBox}>
+                <div className={style.filterArea}>
                     <div className={style.filter}>
-                        <select onChange={cinemaAreaChange} value={cinemaArea}>
-                        {cinemaAreas.map((item) => (
-                            <option value={item} key={item}>{item}</option>
-                        ))}
-                        </select> 
+                        <select onChange={cinemaNameChange} value={cinemaName}>
+                            {cinemaNames.map((item) => (
+                                <option value={item} key={item}>
+                                    {item}
+                                </option>
+                            ))}
+                        </select>
                         <span className={style.filterArrow}></span>
                     </div>
-                : null
-                }
 
-                {
-                    cinemaAreaSelected ? 
+                    {cinemaNameSelected ? (
+                        <div className={style.filter}>
+                            <select
+                                onChange={cinemaAreaChange}
+                                value={cinemaArea}
+                            >
+                                {cinemaAreas.map((item) => (
+                                    <option value={item} key={item}>
+                                        {item}
+                                    </option>
+                                ))}
+                            </select>
+                            <span className={style.filterArrow}></span>
+                        </div>
+                    ) : null}
+
+                    {cinemaAreaSelected ? (
+                        <div className={style.filter}>
+                            <select
+                                onChange={cinemaBranchChange}
+                                value={cinemaBranch}
+                            >
+                                {cinemaBranches.map((item) => (
+                                    <option value={item} key={item}>
+                                        {item}
+                                    </option>
+                                ))}
+                            </select>
+                            <span className={style.filterArrow}></span>
+                        </div>
+                    ) : null}
+
                     <div className={style.filter}>
-                        <select onChange={cinemaBranchChange} value={cinemaBranch}>
-                        {cinemaBranches.map((item) => (
-                            <option value={item} key={item}>{item}</option>
-                        ))}
+                        <select onChange={sortChange} value={sort}>
+                            {sorts.map((item) => (
+                                <option value={item} key={item}>
+                                    {item}
+                                </option>
+                            ))}
                         </select>
                         <span className={style.filterArrow}></span>
                     </div>
-                : null
-                }
-
-                <div className={style.filter}>
-                    <select onChange={sortChange} value={sort}>
-                        {sorts.map((item) => (
-                            <option value={item} key={item}>{item}</option>
-                        ))}
-                    </select>
-                    <span className={style.filterArrow}></span>
-                </div>
 
-                <div className={style.search}>
-                    <input type="text" placeholder="검색" onChange={searchChange} value={search} size="5"></input>
-                    <div className={style.underline}></div>
-                    <button id="searchButton" onClick={searchClick}></button>
+                    <div className={style.search}>
+                        <input
+                            type="text"
+                            placeholder="검색"
+                            onChange={searchChange}
+                            value={search}
+                            size="5"
+                        ></input>
+                        <div className={style.underline}></div>
+                        <button
+                            id="searchButton"
+                            onClick={searchClick}
+                        ></button>
+                    </div>
                 </div>
+                <InformationShares
+                    searchWords={searchWords}
+                    sort={sort}
+                    cinemaName={cinemaName}
+                    cinemaArea={cinemaArea}
+                    cinemaBranch={cinemaBranch}
+                />
             </div>
-            <InformationShares 
-            searchWords={searchWords} 
-            sort={sort} 
-            cinemaName={cinemaName} 
-            cinemaArea={cinemaArea} 
-            cinemaBranch={cinemaBranch}/>
-
-        </div>
-        
         </>
     );
-}
+};
 
-export default InformationSharePage;
\ No newline at end of file
+export default InformationSharePage;
diff --git a/frontend/sweet-red-beans/src/components/InformationShares/InformationShareWritePage.js b/frontend/sweet-red-beans/src/components/InformationShares/InformationShareWritePage.js
index 8749770..5c0c8df 100644
--- a/frontend/sweet-red-beans/src/components/InformationShares/InformationShareWritePage.js
+++ b/frontend/sweet-red-beans/src/components/InformationShares/InformationShareWritePage.js
@@ -1,39 +1,69 @@
-import React, { useEffect, useState } from "react";
-import { CGVarea, CGV0, CGV1, CGV2, CGV3, CGV4, CGV5, CGV6, CGV7, CGV8 } from "../../cinemas/CGVcinemas";
-import { LCarea, LC0, LC1, LC2, LC3, LC4, LC5, LC6, LC7 } from "../../cinemas/LCcinemas";
-import { MBarea, MB0, MB1, MB2, MB3, MB4, MB5, MB6 } from "../../cinemas/MBcinemas";
-import { CQarea, CQ0, CQ1, CQ2, CQ3, CQ4 } from "../../cinemas/CQcinemas";
-import { Link } from "react-router-dom";
-import axios from "axios";
-import { useNavigate } from "react-router";
-import { useSelector } from "react-redux";
-import style from "../../css/InformationSharePage/InformationShareWritePage.module.css";
+import React, { useEffect, useState } from 'react';
+import {
+    CGVarea,
+    CGV0,
+    CGV1,
+    CGV2,
+    CGV3,
+    CGV4,
+    CGV5,
+    CGV6,
+    CGV7,
+    CGV8,
+} from '../../cinemas/CGVcinemas';
+import {
+    LCarea,
+    LC0,
+    LC1,
+    LC2,
+    LC3,
+    LC4,
+    LC5,
+    LC6,
+    LC7,
+} from '../../cinemas/LCcinemas';
+import {
+    MBarea,
+    MB0,
+    MB1,
+    MB2,
+    MB3,
+    MB4,
+    MB5,
+    MB6,
+} from '../../cinemas/MBcinemas';
+import { CQarea, CQ0, CQ1, CQ2, CQ3, CQ4 } from '../../cinemas/CQcinemas';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+import { useNavigate } from 'react-router';
+import { useSelector } from 'react-redux';
+import style from '../../css/InformationSharePage/InformationShareWritePage.module.css';
 
 const InformationShareWritePage = () => {
     let navigation = useNavigate();
     //사용자가 작성한 글 서버에 넘기기
-    console.log("정보공유 작성 페이지 렌더");
-    const cinemaNames = ["영화관", "CGV", "롯데시네마", "메가박스", "씨네큐"];
+    console.log('정보공유 작성 페이지 렌더');
+    const cinemaNames = ['영화관', 'CGV', '롯데시네마', '메가박스', '씨네큐'];
     const CGVarray = [CGV0, CGV1, CGV2, CGV3, CGV4, CGV5, CGV6, CGV7, CGV8];
     const LCarray = [LC0, LC1, LC2, LC3, LC4, LC5, LC6, LC7];
     const MBarray = [MB0, MB1, MB2, MB3, MB4, MB5, MB6];
     const CQarray = [CQ0, CQ1, CQ2, CQ3, CQ4];
 
     //필터에서 선택한 영화사, 지역, 지점 이름
-    const [cinemaName, setCinemaName] = useState("영화관");
-    const [cinemaArea, setCinemaArea] = useState("지역");
-    const [cinemaBranch, setCinemaBranch] = useState("지점");
+    const [cinemaName, setCinemaName] = useState('영화관');
+    const [cinemaArea, setCinemaArea] = useState('지역');
+    const [cinemaBranch, setCinemaBranch] = useState('지점');
     //필터에서 선택하면 true로 바뀜
     const [cinemaNameSelected, setCinemaNameSelected] = useState(false);
     const [cinemaAreaSelected, setCinemaAreaSelected] = useState(false);
-    const [cinemaBranchSelected, setCinemaBranchSelected] = useState(false); 
+    const [cinemaBranchSelected, setCinemaBranchSelected] = useState(false);
     //보여줄 array
     const [cinemaAreas, setCinemaAreas] = useState([]);
     const [array, setArray] = useState([]);
     const [cinemaBranches, setCinemaBranches] = useState([]);
 
-    const [title, setTitle] = useState("");
-    const [content, setContent] = useState("");
+    const [title, setTitle] = useState('');
+    const [content, setContent] = useState('');
 
     //사진 첨부
     const [imgFile, setImgFile] = useState(null);
@@ -41,243 +71,264 @@ const InformationShareWritePage = () => {
 
     useEffect(() => {
         document.documentElement.scrollTop = 0;
-    }, [])
+    }, []);
 
     const cinemaNameChange = (e) => {
-        if(e.target.value === "영화관"){
+        if (e.target.value === '영화관') {
             setCinemaNameSelected(false);
             setCinemaAreaSelected(false);
             setCinemaBranchSelected(false);
-        }
-        else {
+        } else {
             const selected = e.target.value;
             setCinemaName(selected);
-            if(selected === "CGV"){
+            if (selected === 'CGV') {
                 setCinemaAreas(CGVarea);
                 setCinemaAreaSelected(false);
                 setCinemaBranchSelected(false);
-                setCinemaArea("지역")
-                setCinemaBranch("지점")
+                setCinemaArea('지역');
+                setCinemaBranch('지점');
                 setArray(CGVarray);
-            } else if (selected === "롯데시네마"){
+            } else if (selected === '롯데시네마') {
                 setCinemaAreas(LCarea);
                 setCinemaAreaSelected(false);
                 setCinemaBranchSelected(false);
-                setCinemaArea("지역")
-                setCinemaBranch("지점")
+                setCinemaArea('지역');
+                setCinemaBranch('지점');
                 setArray(LCarray);
-            } else if (selected === "메가박스"){
+            } else if (selected === '메가박스') {
                 setCinemaAreas(MBarea);
                 setCinemaAreaSelected(false);
                 setCinemaBranchSelected(false);
-                setCinemaArea("지역")
-                setCinemaBranch("지점")
+                setCinemaArea('지역');
+                setCinemaBranch('지점');
                 setArray(MBarray);
-            } else if (selected === "씨네큐"){
+            } else if (selected === '씨네큐') {
                 setCinemaAreas(CQarea);
                 setCinemaAreaSelected(false);
                 setCinemaBranchSelected(false);
-                setCinemaArea("지역")
-                setCinemaBranch("지점")
+                setCinemaArea('지역');
+                setCinemaBranch('지점');
                 setArray(CQarray);
             }
             setCinemaNameSelected(true);
         }
-    }
+    };
 
     const cinemaAreaChange = (e) => {
-        if(e.target.value === "지역"){
+        if (e.target.value === '지역') {
             setCinemaAreaSelected(false);
             setCinemaBranchSelected(false);
-            setCinemaBranch("지점")
-        }
-        else {
+            setCinemaBranch('지점');
+        } else {
             setCinemaArea(e.target.value);
             setCinemaBranchSelected(false);
             setCinemaAreaSelected(true);
-            setCinemaBranch("지점")
-            setCinemaBranches(array[cinemaAreas.indexOf(e.target.value)-1]);
+            setCinemaBranch('지점');
+            setCinemaBranches(array[cinemaAreas.indexOf(e.target.value) - 1]);
         }
-    }
+    };
 
     const cinemaBranchChange = (e) => {
         setCinemaBranch(e.target.value);
         setCinemaBranchSelected(true);
-    }
+    };
 
     const contentChange = (e) => {
         // const a = content.replace("\n", <br/>)
         // console.log(a);
         setContent(e.target.value);
-    }
+    };
 
     //const userId = useSelector(state => state.user.user_id);
 
     //글쓰기 버튼 눌렀을 때
     const writeClick = () => {
-        if (title === "" || content === ""){
-            alert("내용을 입력해주세요.");
-        }
-        else if (cinemaName === "영화관" || cinemaArea === "지역" || cinemaBranch === "지점"){
-            alert("지점까지 선택해주세요.")
-        }
-        else {
+        if (title === '' || content === '') {
+            alert('내용을 입력해주세요.');
+        } else if (
+            cinemaName === '영화관' ||
+            cinemaArea === '지역' ||
+            cinemaBranch === '지점'
+        ) {
+            alert('지점까지 선택해주세요.');
+        } else {
             const fd = new FormData();
 
-            
-
             //이미지 파일 없을 때
-            if(imgFile === null){
-                fd.append("user_id", "1");
-                fd.append("title", title);
-                fd.append("cinema_name", cinemaName);
-                fd.append("cinema_area", cinemaArea);
-                fd.append("cinema_branch", cinemaBranch);
-                fd.append("content", content);
+            if (imgFile === null) {
+                fd.append('user_id', '1');
+                fd.append('title', title);
+                fd.append('cinema_name', cinemaName);
+                fd.append('cinema_area', cinemaArea);
+                fd.append('cinema_branch', cinemaBranch);
+                fd.append('content', content);
 
-                axios.post('http://localhost:8080/information-share/write', fd, {
-                    withCredentials: true,
-                    headers: {
-                        "Content-Type": `multipart/form-data; `,
-                    }
-                })
-                .then(response => {
-                    if(response.data.result) {
-                        alert("게시글이 성공적으로 작성되었습니다.");
-                        navigation('/informationShare');
-                    }
-                    else {
-                        alert("게시글 작성을 실패했습니다.")
-                    }
-                })
-                .catch(error => {
-                    if(error.response.status === 401){
-                      alert("로그인을 먼저 해주세요");
-                    }
-                });
+                axios
+                    .post('http://localhost:8080/information-share/write', fd, {
+                        withCredentials: true,
+                        headers: {
+                            'Content-Type': `multipart/form-data; `,
+                        },
+                    })
+                    .then((response) => {
+                        if (response.data.result) {
+                            alert('게시글이 성공적으로 작성되었습니다.');
+                            navigation('/informationShare');
+                        } else {
+                            alert('게시글 작성을 실패했습니다.');
+                        }
+                    })
+                    .catch((error) => {
+                        if (error.response.status === 401) {
+                            alert('로그인을 먼저 해주세요');
+                        }
+                    });
             }
             //이미지 파일 있을 때
             else {
-                fd.append("image_url", imgFile[0])
-                fd.append("user_id", "1");
-                fd.append("title", title);
-                fd.append("cinema_name", cinemaName);
-                fd.append("cinema_area", cinemaArea);
-                fd.append("cinema_branch", cinemaBranch);
-                fd.append("content", content);
+                fd.append('image_url', imgFile[0]);
+                fd.append('user_id', '1');
+                fd.append('title', title);
+                fd.append('cinema_name', cinemaName);
+                fd.append('cinema_area', cinemaArea);
+                fd.append('cinema_branch', cinemaBranch);
+                fd.append('content', content);
 
-                axios.post('http://localhost:8080/information-share/write', fd, {
-                    withCredentials: true,
-                    headers: {
-                        "Content-Type": `multipart/form-data; `,
-                    }
-                })
-                .then(response => {
-                    if(response.data.result) {
-                        alert("게시글이 성공적으로 작성되었습니다.");
-                        navigation('/informationShare');
-                    }
-                    else {
-                        alert("게시글 작성을 실패했습니다.")
-                    }
-                })
-                .catch(error => {
-                    if(error.response.status === 401){
-                        alert("로그인을 먼저 해주세요");
-                    }
-                });
+                axios
+                    .post('http://localhost:8080/information-share/write', fd, {
+                        withCredentials: true,
+                        headers: {
+                            'Content-Type': `multipart/form-data; `,
+                        },
+                    })
+                    .then((response) => {
+                        if (response.data.result) {
+                            alert('게시글이 성공적으로 작성되었습니다.');
+                            navigation('/informationShare');
+                        } else {
+                            alert('게시글 작성을 실패했습니다.');
+                        }
+                    })
+                    .catch((error) => {
+                        if (error.response.status === 401) {
+                            alert('로그인을 먼저 해주세요');
+                        }
+                    });
             }
         }
-    }
+    };
 
     const titleChange = (e) => {
         setTitle(e.target.value);
-    }
+    };
 
     const handleChangeFile = (e) => {
-        console.log(e.target.files)
+        console.log(e.target.files);
         setImgFile(e.target.files);
-    }
+    };
 
     useEffect(() => {
-        if(!imgFile) return false;
+        if (!imgFile) return false;
 
         const reader = new FileReader();
         reader.onloadend = () => {
             setImgBase64(reader.result);
-        }
+        };
         reader.readAsDataURL(imgFile[0]);
-
-    }, [imgFile])
+    }, [imgFile]);
 
     const previewCancelClick = () => {
         setImgFile(null);
         setImgBase64(null);
-    }
+    };
 
-    return(
+    return (
         <>
-        <div className={style.whiteBox}>
-            <div className={style.titleArea}>
-                <input type="text" value={title} onChange={titleChange} placeholder="제목" maxLength="50"/>
-                <div className={style.filterArea}>
-                    <div className={style.filter}>
-                        <select onChange={cinemaNameChange} value={cinemaName}>
-                            {cinemaNames.map((item) => (
-                                <option value={item} key={item}>{item}</option>
-                            ))}
-                        </select>
-                        <span className={style.filterArrow}></span>
-                    </div>
-
-                    {
-                        cinemaNameSelected ? 
-                        <div className={style.filter}>
-                            <select onChange={cinemaAreaChange} value={cinemaArea}>
-                            {cinemaAreas.map((item) => (
-                                <option value={item} key={item}>{item}</option>
-                            ))}
-                            </select> 
-                            <span className={style.filterArrow}></span>
-                        </div>
-                    : null
-                    }
-
-                    {
-                        cinemaAreaSelected ? 
+            <div className={style.whiteBox}>
+                <div className={style.titleArea}>
+                    <input
+                        type="text"
+                        value={title}
+                        onChange={titleChange}
+                        placeholder="제목"
+                        maxLength="50"
+                    />
+                    <div className={style.filterArea}>
                         <div className={style.filter}>
-                            <select onChange={cinemaBranchChange} value={cinemaBranch}>
-                            {cinemaBranches.map((item) => (
-                                <option value={item} key={item}>{item}</option>
-                            ))}
+                            <select
+                                onChange={cinemaNameChange}
+                                value={cinemaName}
+                            >
+                                {cinemaNames.map((item) => (
+                                    <option value={item} key={item}>
+                                        {item}
+                                    </option>
+                                ))}
                             </select>
                             <span className={style.filterArrow}></span>
                         </div>
-                    : null
-                    }
+
+                        {cinemaNameSelected ? (
+                            <div className={style.filter}>
+                                <select
+                                    onChange={cinemaAreaChange}
+                                    value={cinemaArea}
+                                >
+                                    {cinemaAreas.map((item) => (
+                                        <option value={item} key={item}>
+                                            {item}
+                                        </option>
+                                    ))}
+                                </select>
+                                <span className={style.filterArrow}></span>
+                            </div>
+                        ) : null}
+
+                        {cinemaAreaSelected ? (
+                            <div className={style.filter}>
+                                <select
+                                    onChange={cinemaBranchChange}
+                                    value={cinemaBranch}
+                                >
+                                    {cinemaBranches.map((item) => (
+                                        <option value={item} key={item}>
+                                            {item}
+                                        </option>
+                                    ))}
+                                </select>
+                                <span className={style.filterArrow}></span>
+                            </div>
+                        ) : null}
+                    </div>
                 </div>
-            </div>
-            
-            <div className={style.contentArea}>
-                <textarea onChange={contentChange} value={content} placeholder="내용을 입력해주세요"/>
-            </div>
 
-            <div className={style.buttonArea}>
-                <label htmlFor="upload_file"></label>
-                <input type="file" onChange={handleChangeFile} id="upload_file" style={{display:"none"}}/>
-                {imgBase64 !== null ?
-                <div>
-                    <img src={imgBase64}/>
-                    <button onClick={previewCancelClick}></button>
+                <div className={style.contentArea}>
+                    <textarea
+                        onChange={contentChange}
+                        value={content}
+                        placeholder="내용을 입력해주세요"
+                    />
                 </div>
-                : null}
-                <button onClick={writeClick}>글쓰기</button>
-            </div>
 
-            
-        </div>
+                <div className={style.buttonArea}>
+                    <label htmlFor="upload_file"></label>
+                    <input
+                        type="file"
+                        onChange={handleChangeFile}
+                        id="upload_file"
+                        style={{ display: 'none' }}
+                    />
+                    {imgBase64 !== null ? (
+                        <div>
+                            <img src={imgBase64} />
+                            <button onClick={previewCancelClick}></button>
+                        </div>
+                    ) : null}
+                    <button onClick={writeClick}>글쓰기</button>
+                </div>
+            </div>
         </>
     );
-}
+};
 
-export default InformationShareWritePage;
\ No newline at end of file
+export default InformationShareWritePage;
diff --git a/frontend/sweet-red-beans/src/components/InformationShares/InformationShares.js b/frontend/sweet-red-beans/src/components/InformationShares/InformationShares.js
index 05d8ad0..8c898a8 100644
--- a/frontend/sweet-red-beans/src/components/InformationShares/InformationShares.js
+++ b/frontend/sweet-red-beans/src/components/InformationShares/InformationShares.js
@@ -1,94 +1,105 @@
-import React, {useEffect, useState} from "react";
-import { Link } from "react-router-dom";
-import Pagination from "../Pagination/Pagination";
-import style from "../../css/InformationSharePage/InformationShares.module.css"
-import { useSelector } from "react-redux";
-import axios from "axios";
-import { parseDate } from "../../parseDate/parseDate";
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import Pagination from '../Pagination/Pagination';
+import style from '../../css/InformationSharePage/InformationShares.module.css';
+import { useSelector } from 'react-redux';
+import axios from 'axios';
+import { parseDate } from '../../parseDate/parseDate';
 
-const InformationShares = ({searchWords, sort, cinemaName, cinemaArea, cinemaBranch}) => {
+const InformationShares = ({
+    searchWords,
+    sort,
+    cinemaName,
+    cinemaArea,
+    cinemaBranch,
+}) => {
     const [infos, setInfos] = useState([]);
     const [limit, setLimit] = useState(15);
     const [page, setPage] = useState(1);
     const offset = (page - 1) * limit;
 
-    useEffect(()=>{
+    useEffect(() => {
         //처음에 최신순으로 요청
         console.log(searchWords, sort, cinemaName, cinemaArea, cinemaBranch);
-        axios.get('http://localhost:8080/information-share/search',{
-        withCredentials: true,
-        params: {
-                    search_word : "",
+        axios
+            .get('http://localhost:8080/information-share/search', {
+                withCredentials: true,
+                params: {
+                    search_word: '',
                     sort_name: sort,
-                }
-        })
-        .then(response => setInfos(response.data))
-        .catch(error => console.log(error));
+                },
+            })
+            .then((response) => setInfos(response.data))
+            .catch((error) => console.log(error));
 
         return () => {
-            setInfos([])
-        }
-    }, [])
+            setInfos([]);
+        };
+    }, []);
 
-    useEffect(()=>{
+    useEffect(() => {
         console.log(searchWords, sort, cinemaName, cinemaArea, cinemaBranch);
-        let searchWord = ""
-        if(searchWords.length!==0) {
-            searchWord = searchWords[searchWords.length-1]
+        let searchWord = '';
+        if (searchWords.length !== 0) {
+            searchWord = searchWords[searchWords.length - 1];
             console.log(searchWord);
         }
-        if(cinemaName === "전체"){
-            axios.get('http://localhost:8080/information-share/search',{
-            withCredentials: true,
-            params: {
-                        search_word : searchWord,
+        if (cinemaName === '전체') {
+            axios
+                .get('http://localhost:8080/information-share/search', {
+                    withCredentials: true,
+                    params: {
+                        search_word: searchWord,
                         sort_name: sort,
-                    }
-            })
-            .then(response => setInfos(response.data))
-            .catch(error => console.log(error));
-        } else if(cinemaArea === "지역"){
-            axios.get('http://localhost:8080/information-share/search',{
-            withCredentials: true,
-            params: {
-                        search_word : searchWord,
-                        cinema_name : cinemaName,
+                    },
+                })
+                .then((response) => setInfos(response.data))
+                .catch((error) => console.log(error));
+        } else if (cinemaArea === '지역') {
+            axios
+                .get('http://localhost:8080/information-share/search', {
+                    withCredentials: true,
+                    params: {
+                        search_word: searchWord,
+                        cinema_name: cinemaName,
                         sort_name: sort,
-                    }
-            })
-            .then(response => setInfos(response.data))
-            .catch(error => console.log(error));
-        } else if(cinemaBranch === "지점"){
-            axios.get('http://localhost:8080/information-share/search',{
-            withCredentials: true,
-            params: {
-                        search_word : searchWord,
-                        cinema_name : cinemaName,
-                        cinema_area : cinemaArea,
+                    },
+                })
+                .then((response) => setInfos(response.data))
+                .catch((error) => console.log(error));
+        } else if (cinemaBranch === '지점') {
+            axios
+                .get('http://localhost:8080/information-share/search', {
+                    withCredentials: true,
+                    params: {
+                        search_word: searchWord,
+                        cinema_name: cinemaName,
+                        cinema_area: cinemaArea,
                         sort_name: sort,
-                    }
-            })
-            .then(response => setInfos(response.data))
-            .catch(error => console.log(error));
+                    },
+                })
+                .then((response) => setInfos(response.data))
+                .catch((error) => console.log(error));
         } else {
-            axios.get('http://localhost:8080/information-share/search',{
-            withCredentials: true,
-            params: {
-                        search_word : searchWord,
-                        cinema_name : cinemaName,
-                        cinema_area : cinemaArea,
+            axios
+                .get('http://localhost:8080/information-share/search', {
+                    withCredentials: true,
+                    params: {
+                        search_word: searchWord,
+                        cinema_name: cinemaName,
+                        cinema_area: cinemaArea,
                         cinema_branch: cinemaBranch,
                         sort_name: sort,
-                    }
-            })
-            .then(response => setInfos(response.data))
-            .catch(error => console.log(error));
+                    },
+                })
+                .then((response) => setInfos(response.data))
+                .catch((error) => console.log(error));
         }
-    },[searchWords])
+    }, [searchWords]);
 
     return (
-    <div className={style.layout}>
-        {/* <label>
+        <div className={style.layout}>
+            {/* <label>
             페이지 당 표시할 게시물 수:&nbsp;
             <select
             type="number"
@@ -102,43 +113,52 @@ const InformationShares = ({searchWords, sort, cinemaName, cinemaArea, cinemaBra
             <option value="100">100</option>
             </select>
         </label> */}
-        
-        <div className={style.infoBox}>
-            <div className={style.topBar}>
-                <div>제목</div>
-                <div>글쓴이</div>
-                <div>작성시간</div>
-                <div>조회수</div>
+
+            <div className={style.infoBox}>
+                <div className={style.topBar}>
+                    <div>제목</div>
+                    <div>글쓴이</div>
+                    <div>작성시간</div>
+                    <div>조회수</div>
+                </div>
+                <main>
+                    {infos.slice(offset, offset + limit).map((item, index) => (
+                        <article key={index}>
+                            <Link
+                                to={`/informationShare/${item.post_id}`}
+                                style={{ textDecoration: 'none' }}
+                            >
+                                <div>{item.title}</div>
+                            </Link>
+                            <div>
+                                {item.user_status === '정지' ||
+                                item.user_status === '탈퇴'
+                                    ? '(알수없음)'
+                                    : item.nickname}
+                            </div>
+                            <div>{parseDate(item.written_date)}</div>
+                            <div>{item.view}</div>
+                        </article>
+                    ))}
+                </main>
             </div>
-            <main>
-                {infos.slice(offset, offset + limit).map((item, index) => (
-                <article key={index}>
-                <Link to={`/informationShare/${item.post_id}`} style={{textDecoration:"none"}}>
-                <div>{item.title}</div>
+
+            <div className={style.writeButtonArea}>
+                <Link to={`/informationShareWrite`}>
+                    <button>글쓰기</button>
                 </Link>
-                <div>{item.user_status === "정지" || item.user_status === "탈퇴" ? "(알수없음)" : item.nickname}</div>
-                <div>{parseDate(item.written_date)}</div>
-                <div>{item.view}</div>
-                
-                </article>
-            ))}
-            </main>
-        </div>
-        
-        <div className={style.writeButtonArea}>
-            <Link to={`/informationShareWrite`}>
-            <button>글쓰기</button>
-            </Link>
-        </div>
+            </div>
 
-        <footer>
-            <Pagination total={infos.length}
-            limit={limit}
-            page={page}
-            setPage={setPage}/>
-        </footer>
-    </div>
+            <footer>
+                <Pagination
+                    total={infos.length}
+                    limit={limit}
+                    page={page}
+                    setPage={setPage}
+                />
+            </footer>
+        </div>
     );
-}
+};
 
-export default InformationShares;
\ No newline at end of file
+export default InformationShares;
diff --git a/frontend/sweet-red-beans/src/components/MainContent/MainContent.js b/frontend/sweet-red-beans/src/components/MainContent/MainContent.js
index 0b3e14d..1ad3285 100644
--- a/frontend/sweet-red-beans/src/components/MainContent/MainContent.js
+++ b/frontend/sweet-red-beans/src/components/MainContent/MainContent.js
@@ -1,52 +1,70 @@
-import React from "react";
-import SignUp from "../SignUp/SignUp";
-import MainPage from "../MainPage/MainPage";
-import {Route, Routes} from "react-router-dom";
-import EventDetailPage from "../EventPage/EventDetailPage";
-import EventPage from "../EventPage/EventPage";
-import TopBar from "../TopBar/TopBar";
-import InformationSharePage from "../InformationShares/InformationSharePage";
-import InformationShareWritePage from "../InformationShares/InformationShareWritePage";
-import InformationShareDetailPage from "../InformationShares/InformationShareDetailPage";
-import TransactionPage from "../TransactionPage/TransactionPage";
-import DMPage from "../DMPage/DMPage";
-import MyPageAdmin from "../MyPage/MyPageAdmin";
-import MyPageNormal from "../MyPage/MyPageNormal";
-import KakaoLogin from "../TopBar/KakaoLogin";
-import GoogleLogin from "../TopBar/GoogleLogin";
-import MyEvents from "../MyPage/MyPageDetail/MyEvents";
-import MyTransactions from "../MyPage/MyPageDetail/MyTransactions";
-import MyLikeTransactions from "../MyPage/MyPageDetail/MyLikeTransactions";
-import MyPosts from "../MyPage/MyPageDetail/MyPosts";
-import MyComments from "../MyPage/MyPageDetail/MyComments";
+import React from 'react';
+import SignUp from '../SignUp/SignUp';
+import MainPage from '../MainPage/MainPage';
+import { Route, Routes } from 'react-router-dom';
+import EventDetailPage from '../EventPage/EventDetailPage';
+import EventPage from '../EventPage/EventPage';
+import TopBar from '../TopBar/TopBar';
+import InformationSharePage from '../InformationShares/InformationSharePage';
+import InformationShareWritePage from '../InformationShares/InformationShareWritePage';
+import InformationShareDetailPage from '../InformationShares/InformationShareDetailPage';
+import TransactionPage from '../TransactionPage/TransactionPage';
+import DMPage from '../DMPage/DMPage';
+import MyPageAdmin from '../MyPage/MyPageAdmin';
+import MyPageNormal from '../MyPage/MyPageNormal';
+import KakaoLogin from '../TopBar/KakaoLogin';
+import GoogleLogin from '../TopBar/GoogleLogin';
+import MyEvents from '../MyPage/MyPageDetail/MyEvents';
+import MyTransactions from '../MyPage/MyPageDetail/MyTransactions';
+import MyLikeTransactions from '../MyPage/MyPageDetail/MyLikeTransactions';
+import MyPosts from '../MyPage/MyPageDetail/MyPosts';
+import MyComments from '../MyPage/MyPageDetail/MyComments';
 
 const MainContent = () => {
     return (
         <>
-        <TopBar/>
-        <Routes>
-          <Route path="/" element={<MainPage/>}/>
-          <Route path="/signup" element={<SignUp/>}/>
-          <Route path="/event/*" element={<EventPage/>}/>
-          <Route path="/event/:id" element={<EventDetailPage/>}/>
-          <Route path="/informationShare/*" element={<InformationSharePage/>}/>
-          <Route path="/informationShareWrite" element={<InformationShareWritePage/>}/>
-          <Route path="/informationShare/:postid" element={<InformationShareDetailPage/>}/>
-          <Route path="/transaction/*" element={<TransactionPage/>}/>
-          <Route path="/DM" element={<DMPage/>}/>
-          <Route path="/mypage" element={<MyPageNormal/>}>
-            <Route path="myevents" element={<MyEvents/>}/>
-            <Route path="mytransactions" element={<MyTransactions/>}/>
-            <Route path="myliketransactions" element={<MyLikeTransactions/>}/>
-            <Route path="myposts" element={<MyPosts/>}/>
-            <Route path="mycomments" element={<MyComments/>}/>
-          </Route>
-          <Route path="/adminpage" element={<MyPageAdmin/>}/>
-          <Route path="/signin/oauth2/code/kakao" element={<KakaoLogin/>}/>
-          <Route path="/signin/auth/google/callback" element={<GoogleLogin/>}/>
-        </Routes>
+            <TopBar />
+            <Routes>
+                <Route path="/" element={<MainPage />} />
+                <Route path="/signup" element={<SignUp />} />
+                <Route path="/event/*" element={<EventPage />} />
+                <Route path="/event/:id" element={<EventDetailPage />} />
+                <Route
+                    path="/informationShare/*"
+                    element={<InformationSharePage />}
+                />
+                <Route
+                    path="/informationShareWrite"
+                    element={<InformationShareWritePage />}
+                />
+                <Route
+                    path="/informationShare/:postid"
+                    element={<InformationShareDetailPage />}
+                />
+                <Route path="/transaction/*" element={<TransactionPage />} />
+                <Route path="/DM" element={<DMPage />} />
+                <Route path="/mypage" element={<MyPageNormal />}>
+                    <Route path="myevents" element={<MyEvents />} />
+                    <Route path="mytransactions" element={<MyTransactions />} />
+                    <Route
+                        path="myliketransactions"
+                        element={<MyLikeTransactions />}
+                    />
+                    <Route path="myposts" element={<MyPosts />} />
+                    <Route path="mycomments" element={<MyComments />} />
+                </Route>
+                <Route path="/adminpage" element={<MyPageAdmin />} />
+                <Route
+                    path="/signin/oauth2/code/kakao"
+                    element={<KakaoLogin />}
+                />
+                <Route
+                    path="/signin/auth/google/callback"
+                    element={<GoogleLogin />}
+                />
+            </Routes>
         </>
     );
-}
+};
 
-export default MainContent;
\ No newline at end of file
+export default MainContent;
diff --git a/frontend/sweet-red-beans/src/components/MainPage/MainMovieEvents.js b/frontend/sweet-red-beans/src/components/MainPage/MainMovieEvents.js
index c733f83..eb75b67 100644
--- a/frontend/sweet-red-beans/src/components/MainPage/MainMovieEvents.js
+++ b/frontend/sweet-red-beans/src/components/MainPage/MainMovieEvents.js
@@ -1,52 +1,53 @@
-import React, { useEffect, useState } from "react";
-import axios from "axios";
-import mainEvents from "../../actions/main_action";
-import { useDispatch, useSelector } from "react-redux";
-import { MAIN_CINEMA_EVENTS } from "../../actions/types";
-import style from "../../css/MainPage/MainMovieEvents.module.css"
-import Slider from "react-slick";
-import "../../css/slick/slick.css"
-import "../../css/slick/slick-theme.css"
-import Test from "./Test";
-import EventMovieThumbnail from "../EventPage/EventMovieThumbnail";
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import mainEvents from '../../actions/main_action';
+import { useDispatch, useSelector } from 'react-redux';
+import { MAIN_CINEMA_EVENTS } from '../../actions/types';
+import style from '../../css/MainPage/MainMovieEvents.module.css';
+import Slider from 'react-slick';
+import '../../css/slick/slick.css';
+import '../../css/slick/slick-theme.css';
+import Test from './Test';
+import EventMovieThumbnail from '../EventPage/EventMovieThumbnail';
 
-
-const MainMovieEvents = ({cinemaName}) => {
+const MainMovieEvents = ({ cinemaName }) => {
     const dispatch = useDispatch();
     const [events, setEvents] = useState([]);
     const [thisEvents, setThisEvents] = useState([]);
     const filterMovieList = [];
 
-    useEffect(()=>
-    {
-        
-        axios.get('http://localhost:8080/main/event-limit', {withCredentials: true})
-        .then(response => {
-            setEvents(response.data);
-        });
-    } 
-    , []);
+    useEffect(() => {
+        axios
+            .get('http://localhost:8080/main/event-limit', {
+                withCredentials: true,
+            })
+            .then((response) => {
+                setEvents(response.data);
+            });
+    }, []);
 
-    useEffect(()=>{
+    useEffect(() => {
         console.log(events);
         events.map((item, index) => {
-            if(item.cinema_name === cinemaName){
-                filterMovieList.push(item)
+            if (item.cinema_name === cinemaName) {
+                filterMovieList.push(item);
             }
-        })
+        });
         setThisEvents(filterMovieList);
         dispatch({
             type: MAIN_CINEMA_EVENTS,
-            mainCinemaEvents: {cinemaName:cinemaName, mainCinemaEvents: filterMovieList},
-        })
-    }, [events])
+            mainCinemaEvents: {
+                cinemaName: cinemaName,
+                mainCinemaEvents: filterMovieList,
+            },
+        });
+    }, [events]);
 
-    useEffect(() => {
-    }, [thisEvents])
+    useEffect(() => {}, [thisEvents]);
 
-    const settings = { 
+    const settings = {
         dots: false,
-        arrows:true,
+        arrows: true,
         infinite: true,
         speed: 500,
         slidesToShow: 3,
@@ -54,32 +55,27 @@ const MainMovieEvents = ({cinemaName}) => {
     };
     return (
         <>
-        <div className={style.cinemaName}>
-            {cinemaName}
-            <div className={style.underline}></div>
-        </div>
-        <div className={style.movieThumbnails}>
-        
-        {
-            thisEvents!==[] ? 
-            <Slider {...settings}> 
-
-            {
-                thisEvents.map((item, index) => <div key={index}><EventMovieThumbnail event={item}/></div>)
-            //thisEvents!==[] ? thisEvents.map((item, index) => <div key={index}><MovieThumbnail thisEvent={item}/></div>) : null
-            //test.map((item, index) => <div>{item}</div>)
-            }
-        
-            </Slider>
-        : null
-        }
-        
-        </div>
-
-        
+            <div className={style.cinemaName}>
+                {cinemaName}
+                <div className={style.underline}></div>
+            </div>
+            <div className={style.movieThumbnails}>
+                {thisEvents !== [] ? (
+                    <Slider {...settings}>
+                        {
+                            thisEvents.map((item, index) => (
+                                <div key={index}>
+                                    <EventMovieThumbnail event={item} />
+                                </div>
+                            ))
+                            //thisEvents!==[] ? thisEvents.map((item, index) => <div key={index}><MovieThumbnail thisEvent={item}/></div>) : null
+                            //test.map((item, index) => <div>{item}</div>)
+                        }
+                    </Slider>
+                ) : null}
+            </div>
         </>
-        
     );
-}
+};
 
-export default MainMovieEvents;
\ No newline at end of file
+export default MainMovieEvents;
diff --git a/frontend/sweet-red-beans/src/components/MainPage/MainPage.js b/frontend/sweet-red-beans/src/components/MainPage/MainPage.js
index dd67d32..cc5c7c8 100644
--- a/frontend/sweet-red-beans/src/components/MainPage/MainPage.js
+++ b/frontend/sweet-red-beans/src/components/MainPage/MainPage.js
@@ -1,20 +1,24 @@
-import React, { useState, useEffect } from "react";
-import MainMovieEvents from "./MainMovieEvents";
-import { useDispatch } from "react-redux";
-import { CINEMA_NAMES } from "../../actions/types";
-import axios from "axios";
-import mainEvents from "../../actions/main_action";
-import {MAIN_EVENTS} from "../../actions/types";
-import style from "../../css/MainPage/MainPage.module.css";
-import MainPosts from "./MainPosts";
-import { Link } from "react-router-dom";
-import { useNavigate } from "react-router";
-
+import React, { useState, useEffect } from 'react';
+import MainMovieEvents from './MainMovieEvents';
+import { useDispatch } from 'react-redux';
+import { CINEMA_NAMES } from '../../actions/types';
+import axios from 'axios';
+import mainEvents from '../../actions/main_action';
+import { MAIN_EVENTS } from '../../actions/types';
+import style from '../../css/MainPage/MainPage.module.css';
+import MainPosts from './MainPosts';
+import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 const MainPage = () => {
-    const [cinemaNames, setCinemaNames] = useState(["CGV", "롯데시네마", "메가박스", "씨네큐"]);
+    const [cinemaNames, setCinemaNames] = useState([
+        'CGV',
+        '롯데시네마',
+        '메가박스',
+        '씨네큐',
+    ]);
     const dispatch = useDispatch();
-    const [mainVideo, setMainVideo] = useState("");
+    const [mainVideo, setMainVideo] = useState('');
     const navigation = useNavigate();
 
     dispatch({
@@ -23,42 +27,42 @@ const MainPage = () => {
     });
 
     useEffect(() => {
-        axios.get("http://localhost:8080/main/video", {
-            withCredentials: true,
-        })
-        .then(response => {
-            setMainVideo(response.data.src)
-        })
-        .catch(error => console.log(error))
+        axios
+            .get('http://localhost:8080/main/video', {
+                withCredentials: true,
+            })
+            .then((response) => {
+                setMainVideo(response.data.src);
+            })
+            .catch((error) => console.log(error));
         return () => {
-            setMainVideo("");
-        }
-    }, [])
+            setMainVideo('');
+        };
+    }, []);
 
     const arrowClick = () => {
         navigation('/event');
-    }
-
+    };
 
-    return(
+    return (
         <>
-        <div className={style.videoArea}>
-            <video src={mainVideo} className={style.video} controls></video>
-        </div>
-        <div className={style.mainText}>
-            EVENTS
-            <div className={style.arrow} onClick={arrowClick}></div>
-        </div>
-        {cinemaNames.map((item, index) => <div key={index} className={style.movieThumbnail}><MainMovieEvents cinemaName={item}/></div>)}
+            <div className={style.videoArea}>
+                <video src={mainVideo} className={style.video} controls></video>
+            </div>
+            <div className={style.mainText}>
+                EVENTS
+                <div className={style.arrow} onClick={arrowClick}></div>
+            </div>
+            {cinemaNames.map((item, index) => (
+                <div key={index} className={style.movieThumbnail}>
+                    <MainMovieEvents cinemaName={item} />
+                </div>
+            ))}
 
-        <div className={style.mainText}>
-            TODAY'S POSTS
-        </div>
-        <MainPosts/>
-        
+            <div className={style.mainText}>TODAY'S POSTS</div>
+            <MainPosts />
         </>
-    )
-
-}
+    );
+};
 
-export default MainPage;
\ No newline at end of file
+export default MainPage;
diff --git a/frontend/sweet-red-beans/src/components/MainPage/MainPosts.js b/frontend/sweet-red-beans/src/components/MainPage/MainPosts.js
index 63ae748..858e4bf 100644
--- a/frontend/sweet-red-beans/src/components/MainPage/MainPosts.js
+++ b/frontend/sweet-red-beans/src/components/MainPage/MainPosts.js
@@ -1,56 +1,60 @@
-import React, { useEffect, useState } from "react";
-import axios from "axios";
-import style from "../../css/MainPage/MainPosts.module.css";
-import { Link } from "react-router-dom";
-import { useNavigate } from "react-router";
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import style from '../../css/MainPage/MainPosts.module.css';
+import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 const MainPosts = () => {
     const navigation = useNavigate();
     const [dailyPosts, setDailyPosts] = useState([]);
-    
+
     useEffect(() => {
-        axios.get("http://localhost:8080/main/daily-community", {
-            withCredentials: true,
-            params: {
-                community_category:"정보공유",
-            }
-        })
-        .then(response => {
-            console.log(response.data);
-            setDailyPosts(response.data);
-        })
-        .catch(error => console.log(error))
-    }, [])
+        axios
+            .get('http://localhost:8080/main/daily-community', {
+                withCredentials: true,
+                params: {
+                    community_category: '정보공유',
+                },
+            })
+            .then((response) => {
+                console.log(response.data);
+                setDailyPosts(response.data);
+            })
+            .catch((error) => console.log(error));
+    }, []);
 
     const writeClick = () => {
-        navigation('/informationShare')
-    }
+        navigation('/informationShare');
+    };
 
     return (
         <>
-        <div className={style.posts}>
-            {dailyPosts.length !== 0 ? 
-                <ul>
-                {dailyPosts.map((item, index) => (
-                    <Link to={`/informationShare/${item.post_id}`} style={{textDecoration:"none"}} key={index}>
-                        <li>
-                            <div className={style.title}>{item.title}</div>
-                        </li>
-                    </Link>
-                ))}
-                </ul>
-                :
-                <div className={style.nullMessage}>
-                    <div>지금 당장 글 쓰러 가기</div>
-                    <div className={style.arrow} onClick={writeClick}></div>
-                    <div>내 통장처럼 비어버린 오늘의 글...</div>
-                </div>
-            }
-            
-        </div>
-        
+            <div className={style.posts}>
+                {dailyPosts.length !== 0 ? (
+                    <ul>
+                        {dailyPosts.map((item, index) => (
+                            <Link
+                                to={`/informationShare/${item.post_id}`}
+                                style={{ textDecoration: 'none' }}
+                                key={index}>
+                                <li>
+                                    <div className={style.title}>
+                                        {item.title}
+                                    </div>
+                                </li>
+                            </Link>
+                        ))}
+                    </ul>
+                ) : (
+                    <div className={style.nullMessage}>
+                        <div>지금 당장 글 쓰러 가기</div>
+                        <div className={style.arrow} onClick={writeClick}></div>
+                        <div>내 통장처럼 비어버린 오늘의 글...</div>
+                    </div>
+                )}
+            </div>
         </>
-    )
-}
+    );
+};
 
-export default MainPosts;
\ No newline at end of file
+export default MainPosts;
diff --git a/frontend/sweet-red-beans/src/components/MainPage/Test.js b/frontend/sweet-red-beans/src/components/MainPage/Test.js
index 2f7f89c..ef4682e 100644
--- a/frontend/sweet-red-beans/src/components/MainPage/Test.js
+++ b/frontend/sweet-red-beans/src/components/MainPage/Test.js
@@ -1,24 +1,17 @@
-import React, {Fragment, useEffect, useState} from "react";
-import { Link, Outlet } from "react-router-dom";
-import { useSelector, useDispatch } from "react-redux";
-import { MAIN_CINEMA_EVENTS } from "../../actions/types";
-import { Route, Routes } from "react-router";
-import MainPage from "./MainPage";
-import axios from "axios";
-import style from "../../css/MainPage/MovieThumbnail.module.css";
+import React, { Fragment, useEffect, useState } from 'react';
+import { Link, Outlet } from 'react-router-dom';
+import { useSelector, useDispatch } from 'react-redux';
+import { MAIN_CINEMA_EVENTS } from '../../actions/types';
+import { Route, Routes } from 'react-router';
+import MainPage from './MainPage';
+import axios from 'axios';
+import style from '../../css/MainPage/MovieThumbnail.module.css';
 
 //props랑 {cinemaName}이 똑같아야 함
-const Test = ({thisEvent}) => {
+const Test = ({ thisEvent }) => {
     //좋아요 상태 변경용
 
-    return(
+    return <div>{thisEvent.title}</div>;
+};
 
-        <div>
-        {thisEvent.title}
-        </div>
-        
-
-    );
-}
-
-export default Test;
\ No newline at end of file
+export default Test;
diff --git a/frontend/sweet-red-beans/src/components/Modals/Modal.js b/frontend/sweet-red-beans/src/components/Modals/Modal.js
index 3baff48..9abdac6 100644
--- a/frontend/sweet-red-beans/src/components/Modals/Modal.js
+++ b/frontend/sweet-red-beans/src/components/Modals/Modal.js
@@ -2,30 +2,31 @@ import React from 'react';
 import style from '../../css/Modal/modal.module.css';
 
 const Modal = (props) => {
-  // 열기, 닫기, 모달 헤더 텍스트를 부모로부터 받아옴
-  const { open, close, header } = props;
+    // 열기, 닫기, 모달 헤더 텍스트를 부모로부터 받아옴
+    const { open, close, header } = props;
 
-  return (
-    // 모달이 열릴때 openModal 클래스가 생성된다.
-    <div className={open ? `${style.openModal} ${style.modal}` : style.modal}>
-      {open ? (
-        <section>
-            <div className={style.buttonArea}>
-              <button onClick={close}></button>
-            </div>
-            <header>
-              {header}
-            </header>
-          <main>{props.children}</main>
-          {/* <footer>
+    return (
+        // 모달이 열릴때 openModal 클래스가 생성된다.
+        <div
+            className={
+                open ? `${style.openModal} ${style.modal}` : style.modal
+            }>
+            {open ? (
+                <section>
+                    <div className={style.buttonArea}>
+                        <button onClick={close}></button>
+                    </div>
+                    <header>{header}</header>
+                    <main>{props.children}</main>
+                    {/* <footer>
             <button className="close" onClick={close}>
               close
             </button>
           </footer> */}
-        </section>
-      ) : null}
-    </div>
-  );
+                </section>
+            ) : null}
+        </div>
+    );
 };
 
-export default Modal;
\ No newline at end of file
+export default Modal;
diff --git a/frontend/sweet-red-beans/src/components/Modals/TransactionModal.js b/frontend/sweet-red-beans/src/components/Modals/TransactionModal.js
index b21c991..ec6b68e 100644
--- a/frontend/sweet-red-beans/src/components/Modals/TransactionModal.js
+++ b/frontend/sweet-red-beans/src/components/Modals/TransactionModal.js
@@ -2,24 +2,25 @@ import React from 'react';
 import style from '../../css/Modal/TransactionWriteModal.module.css';
 
 const TransactionWriteModal = (props) => {
-  // 열기, 닫기, 모달 헤더 텍스트를 부모로부터 받아옴
-  const { open, close, header } = props;
+    // 열기, 닫기, 모달 헤더 텍스트를 부모로부터 받아옴
+    const { open, close, header } = props;
 
-  return (
-    // 모달이 열릴때 openModal 클래스가 생성된다.
-    <div className={open ? `${style.openModal} ${style.modal}` : style.modal}>
-      {open ? (
-        <section>
-            <div className={style.buttonArea}>
-              <button onClick={close}>
-
-              </button>
-            </div>
-          <main>{props.children}</main>
-        </section>
-      ) : null}
-    </div>
-  );
+    return (
+        // 모달이 열릴때 openModal 클래스가 생성된다.
+        <div
+            className={
+                open ? `${style.openModal} ${style.modal}` : style.modal
+            }>
+            {open ? (
+                <section>
+                    <div className={style.buttonArea}>
+                        <button onClick={close}></button>
+                    </div>
+                    <main>{props.children}</main>
+                </section>
+            ) : null}
+        </div>
+    );
 };
 
-export default TransactionWriteModal;
\ No newline at end of file
+export default TransactionWriteModal;
diff --git a/frontend/sweet-red-beans/src/components/MyPage/MyPageAdmin.js b/frontend/sweet-red-beans/src/components/MyPage/MyPageAdmin.js
index b924132..b72a593 100644
--- a/frontend/sweet-red-beans/src/components/MyPage/MyPageAdmin.js
+++ b/frontend/sweet-red-beans/src/components/MyPage/MyPageAdmin.js
@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from "react";
-import Report from "../Report/Report";
-import axios from "axios";
-import Pagination from "../Pagination/Pagination";
-import style from "../../css/MyPage/MyPageAdmin.module.css";
-import { Cookies } from "react-cookie";
-import { useNavigate } from "react-router";
+import React, { useEffect, useState } from 'react';
+import Report from '../Report/Report';
+import axios from 'axios';
+import Pagination from '../Pagination/Pagination';
+import style from '../../css/MyPage/MyPageAdmin.module.css';
+import { Cookies } from 'react-cookie';
+import { useNavigate } from 'react-router';
 
 const MyPageAdmin = () => {
     const cookies = new Cookies();
@@ -18,64 +18,67 @@ const MyPageAdmin = () => {
     const offset = (page - 1) * limit;
 
     useEffect(() => {
-        if (cookies.get("user")){
-            if (cookies.get("user").authority === "일반"){
-                alert("접근할 수 없습니다.")
-                navigation('/')
-                return
+        if (cookies.get('user')) {
+            if (cookies.get('user').authority === '일반') {
+                alert('접근할 수 없습니다.');
+                navigation('/');
+                return;
+            } else {
+                axios
+                    .get('http://localhost:8080/manager/report', {
+                        withCredentials: true,
+                    })
+                    .then((response) => {
+                        setReports(response.data.reports);
+                    })
+                    .catch((error) => console.log(error));
             }
-            else {
-                axios.get('http://localhost:8080/manager/report', {withCredentials: true})
-                .then(response => {
-                    
-                    setReports(response.data.reports);
-                })
-                .catch(error => console.log(error))
-            }
-        }
-        else {
-            alert("접근할 수 없습니다.")
-            navigation('/')
-            return
+        } else {
+            alert('접근할 수 없습니다.');
+            navigation('/');
+            return;
         }
-        
-    }, [])
+    }, []);
 
     useEffect(() => {
         setReportIsHere(true);
-    }, [reports])
-    
+    }, [reports]);
+
     return (
         <>
-        <div className={style.layout}>
-            <div className={style.reportBox}>
-                <div className={style.topBar}>
-                    <div>승인여부</div>
-                    <div>신고자</div>
-                    <div>신고 받은 사람</div>
-                    <div>신고한 시간</div>
+            <div className={style.layout}>
+                <div className={style.reportBox}>
+                    <div className={style.topBar}>
+                        <div>승인여부</div>
+                        <div>신고자</div>
+                        <div>신고 받은 사람</div>
+                        <div>신고한 시간</div>
+                    </div>
+                    <main>
+                        {reportIsHere
+                            ? reports
+                                  .slice(offset, offset + limit)
+                                  .map((item, index) => (
+                                      <article key={index}>
+                                          <Report report={item} />
+                                      </article>
+                                  ))
+                            : null}
+                    </main>
                 </div>
-                <main>
-                {reportIsHere ? reports.slice(offset, offset + limit).map((item, index) => (
-                    <article key={index}>
-                        <Report report={item}/>
-                    </article>
-                )) : null}
-                </main>
+                <footer>
+                    {reports !== undefined ? (
+                        <Pagination
+                            total={reports.length}
+                            limit={limit}
+                            page={page}
+                            setPage={setPage}
+                        />
+                    ) : null}
+                </footer>
             </div>
-            <footer>
-                {reports !== undefined ? 
-                <Pagination total={reports.length}
-                limit={limit}
-                page={page}
-                setPage={setPage}/>
-                : null
-                }
-            </footer>
-        </div>
-
         </>
-    )
-}
+    );
+};
 
-export default MyPageAdmin;
\ No newline at end of file
+export default MyPageAdmin;
diff --git a/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail.js b/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail.js
index 73a963e..052fb13 100644
--- a/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail.js
+++ b/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail.js
@@ -1,25 +1,26 @@
-import React, { useEffect } from "react";
-import MyEvents from "./MyPageDetail/MyEvents";
-import MyTransactions from "./MyPageDetail/MyTransactions";
-import MyLikeTransactions from "./MyPageDetail/MyLikeTransactions";
-import MyPosts from "./MyPageDetail/MyPosts";
-import MyComments from "./MyPageDetail/MyComments";
-import { Outlet, useParams } from "react-router";
-import {Route, Routes} from "react-router-dom";
+import React, { useEffect } from 'react';
+import MyEvents from './MyPageDetail/MyEvents';
+import MyTransactions from './MyPageDetail/MyTransactions';
+import MyLikeTransactions from './MyPageDetail/MyLikeTransactions';
+import MyPosts from './MyPageDetail/MyPosts';
+import MyComments from './MyPageDetail/MyComments';
+import { Outlet, useParams } from 'react-router';
+import { Route, Routes } from 'react-router-dom';
 
-const MyPageDetail = ({myMenu}) => {
-    const {id} = useParams();
-    const myComponents = [<MyEvents/>, <MyTransactions/>, <MyLikeTransactions/>, <MyPosts/>, <MyComments/>]
+const MyPageDetail = ({ myMenu }) => {
+    const { id } = useParams();
+    const myComponents = [
+        <MyEvents />,
+        <MyTransactions />,
+        <MyLikeTransactions />,
+        <MyPosts />,
+        <MyComments />,
+    ];
 
     useEffect(() => {
         console.log(id);
-    }, [id])
-    return (
-        <>
-        
-        {/* {myComponents[myMenu]} */}
-        </>
-    )
-}
+    }, [id]);
+    return <>{/* {myComponents[myMenu]} */}</>;
+};
 
-export default MyPageDetail;
\ No newline at end of file
+export default MyPageDetail;
diff --git a/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyComments.js b/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyComments.js
index 43368f6..d1364d8 100644
--- a/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyComments.js
+++ b/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyComments.js
@@ -1,60 +1,64 @@
-import React, { useEffect, useState } from "react";
-import store from "../../../store";
-import Pagination from "../../Pagination/Pagination";
-import { useSelector } from "react-redux";
-import style from "../../../css/MyPage/MyPageDetail/MyComments.module.css";
-import { useNavigate } from "react-router";
-import { parseDate } from "../../../parseDate/parseDate";
+import React, { useEffect, useState } from 'react';
+import store from '../../../store';
+import Pagination from '../../Pagination/Pagination';
+import { useSelector } from 'react-redux';
+import style from '../../../css/MyPage/MyPageDetail/MyComments.module.css';
+import { useNavigate } from 'react-router';
+import { parseDate } from '../../../parseDate/parseDate';
 
 const MyComments = () => {
     const navigation = useNavigate();
-    const myComments = useSelector(s => {
-        if(s !== undefined) {
-            return s.mypageComments
+    const myComments = useSelector((s) => {
+        if (s !== undefined) {
+            return s.mypageComments;
         }
-    })
+    });
     const [limit, setLimit] = useState(10);
     const [page, setPage] = useState(1);
     const offset = (page - 1) * limit;
 
-
     useEffect(() => {
-        console.log("내 댓글들 : ", myComments);
-        ;
-        console.log(new Date("2022-02-21T22:29:34.564").getFullYear());
-    }, [myComments])
+        console.log('내 댓글들 : ', myComments);
+        console.log(new Date('2022-02-21T22:29:34.564').getFullYear());
+    }, [myComments]);
 
     const postClick = (postid, e) => {
-        navigation('/informationShare/'+postid);
-    }
+        navigation('/informationShare/' + postid);
+    };
 
     return (
         <>
-        <div className={style.layout}>
-            <div className={style.topBar}>
-                <div>댓글 내용</div>
-                <div>작성시간</div>
+            <div className={style.layout}>
+                <div className={style.topBar}>
+                    <div>댓글 내용</div>
+                    <div>작성시간</div>
+                </div>
+                {myComments !== undefined
+                    ? myComments
+                          .slice(offset, offset + limit)
+                          .map((item, index) => (
+                              <article
+                                  key={index}
+                                  onClick={(e) => postClick(item.post_id, e)}>
+                                  <div>{item.comment_content}</div>
+                                  <div>{parseDate(item.written_date)}</div>
+                              </article>
+                          ))
+                    : null}
             </div>
-            {myComments !== undefined ? myComments.slice(offset, offset + limit).map((item, index) => (
-                <article key={index} onClick={e => postClick(item.post_id, e)}>
-                    <div>{item.comment_content}</div>
-                    <div>{parseDate(item.written_date)}</div>
-                </article>
-            )) : null}
-        </div>
-        
 
-        <footer className={style.footer}>
-            {myComments !== undefined ? 
-            <Pagination total={myComments.length}
-            limit={limit}
-            page={page}
-            setPage={setPage}/>
-            : null
-            }
-        </footer>
+            <footer className={style.footer}>
+                {myComments !== undefined ? (
+                    <Pagination
+                        total={myComments.length}
+                        limit={limit}
+                        page={page}
+                        setPage={setPage}
+                    />
+                ) : null}
+            </footer>
         </>
-    )
-}
+    );
+};
 
-export default MyComments;
\ No newline at end of file
+export default MyComments;
diff --git a/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyEvents.js b/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyEvents.js
index 2411ddd..3035422 100644
--- a/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyEvents.js
+++ b/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyEvents.js
@@ -1,60 +1,64 @@
-import React, { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
-import { Link } from "react-router-dom";
-import { useParams } from "react-router";
-import store from "../../../store";
-import Pagination from "../../Pagination/Pagination";
-import { useNavigate } from "react-router";
-import style from "../../../css/MyPage/MyPageDetail/MyEvents.module.css";
-import EventMovieThumbnail from "../../EventPage/EventMovieThumbnail";
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { useParams } from 'react-router';
+import store from '../../../store';
+import Pagination from '../../Pagination/Pagination';
+import { useNavigate } from 'react-router';
+import style from '../../../css/MyPage/MyPageDetail/MyEvents.module.css';
+import EventMovieThumbnail from '../../EventPage/EventMovieThumbnail';
 
 const MyEvents = () => {
     const navigation = useNavigate();
-    
-    const myEvents = useSelector(s => {
-        if(s !== undefined) {
-            return s.mypageEvents
+
+    const myEvents = useSelector((s) => {
+        if (s !== undefined) {
+            return s.mypageEvents;
         }
-    })
+    });
 
     const [limit, setLimit] = useState(12);
     const [page, setPage] = useState(1);
     const offset = (page - 1) * limit;
 
     useEffect(() => {
-        console.log("내 이벤트들 : ", myEvents);
-    }, [myEvents])
+        console.log('내 이벤트들 : ', myEvents);
+    }, [myEvents]);
 
     const eventClick = (eventid, e) => {
-        navigation('/event/'+eventid);
-    }
+        navigation('/event/' + eventid);
+    };
 
     useEffect(() => {
         console.log(myEvents);
-    }, [])
+    }, []);
 
     return (
         <>
-        <div className={style.container}>
-            {myEvents !== undefined ? myEvents.slice(offset, offset + limit).map((item, index) => (
-                <article key={index}>
-                    <EventMovieThumbnail event={item}/>
-                </article>
-            )) : null}
-        </div>
-        
-
-        <footer className={style.footer}>
-            {myEvents !== undefined ? 
-            <Pagination total={myEvents.length}
-            limit={limit}
-            page={page}
-            setPage={setPage}/>
-            : null
-            }
-        </footer>
+            <div className={style.container}>
+                {myEvents !== undefined
+                    ? myEvents
+                          .slice(offset, offset + limit)
+                          .map((item, index) => (
+                              <article key={index}>
+                                  <EventMovieThumbnail event={item} />
+                              </article>
+                          ))
+                    : null}
+            </div>
+
+            <footer className={style.footer}>
+                {myEvents !== undefined ? (
+                    <Pagination
+                        total={myEvents.length}
+                        limit={limit}
+                        page={page}
+                        setPage={setPage}
+                    />
+                ) : null}
+            </footer>
         </>
-    )
-}
+    );
+};
 
-export default MyEvents;
\ No newline at end of file
+export default MyEvents;
diff --git a/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyLikeTransactions.js b/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyLikeTransactions.js
index 1ea9f5d..0a0d184 100644
--- a/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyLikeTransactions.js
+++ b/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyLikeTransactions.js
@@ -1,47 +1,51 @@
-import React, { useEffect, useState } from "react";
-import store from "../../../store";
-import TransactionDetail from "../../TransactionPage/TransactionDetail";
-import Pagination from "../../Pagination/Pagination";
-import { useSelector } from "react-redux";
-import style from "../../../css/MyPage/MyPageDetail/MyLikeTransactions.module.css";
+import React, { useEffect, useState } from 'react';
+import store from '../../../store';
+import TransactionDetail from '../../TransactionPage/TransactionDetail';
+import Pagination from '../../Pagination/Pagination';
+import { useSelector } from 'react-redux';
+import style from '../../../css/MyPage/MyPageDetail/MyLikeTransactions.module.css';
 
 const MyLikeTransactions = () => {
-    const myLikeTransactions = useSelector(s => {
-        if(s !== undefined) {
-            return s.mypageLikeTransactions
+    const myLikeTransactions = useSelector((s) => {
+        if (s !== undefined) {
+            return s.mypageLikeTransactions;
         }
-    })
+    });
 
     const [limit, setLimit] = useState(10);
     const [page, setPage] = useState(1);
     const offset = (page - 1) * limit;
 
     useEffect(() => {
-        console.log("내가 좋아요 한 거래들 : ", myLikeTransactions);
-    }, [myLikeTransactions])
+        console.log('내가 좋아요 한 거래들 : ', myLikeTransactions);
+    }, [myLikeTransactions]);
 
     return (
         <>
-        <div className={style.container}>
-        {myLikeTransactions !== undefined ? myLikeTransactions.slice(offset, offset + limit).map((item, index) => (
-            <article key={index}>
-            <TransactionDetail transaction={item}/>
-            </article>
-        )) : null}
-        </div>
-        
+            <div className={style.container}>
+                {myLikeTransactions !== undefined
+                    ? myLikeTransactions
+                          .slice(offset, offset + limit)
+                          .map((item, index) => (
+                              <article key={index}>
+                                  <TransactionDetail transaction={item} />
+                              </article>
+                          ))
+                    : null}
+            </div>
 
-        <footer className={style.footer}>
-            {myLikeTransactions !== undefined ? 
-            <Pagination total={myLikeTransactions.length}
-            limit={limit}
-            page={page}
-            setPage={setPage}/>
-            : null
-            }
-        </footer>
+            <footer className={style.footer}>
+                {myLikeTransactions !== undefined ? (
+                    <Pagination
+                        total={myLikeTransactions.length}
+                        limit={limit}
+                        page={page}
+                        setPage={setPage}
+                    />
+                ) : null}
+            </footer>
         </>
-    )
-}
+    );
+};
 
-export default MyLikeTransactions;
\ No newline at end of file
+export default MyLikeTransactions;
diff --git a/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyPosts.js b/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyPosts.js
index 0ad44f2..a4af080 100644
--- a/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyPosts.js
+++ b/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyPosts.js
@@ -1,60 +1,67 @@
-import React, { useEffect, useState } from "react";
-import store from "../../../store";
-import Pagination from "../../Pagination/Pagination";
-import { useNavigate } from "react-router";
-import { useSelector } from "react-redux";
-import style from "../../../css/MyPage/MyPageDetail/MyPosts.module.css";
-import { parseDate } from "../../../parseDate/parseDate";
+import React, { useEffect, useState } from 'react';
+import store from '../../../store';
+import Pagination from '../../Pagination/Pagination';
+import { useNavigate } from 'react-router';
+import { useSelector } from 'react-redux';
+import style from '../../../css/MyPage/MyPageDetail/MyPosts.module.css';
+import { parseDate } from '../../../parseDate/parseDate';
 
 const MyPosts = () => {
     const navigation = useNavigate();
-    
-    const myPosts = useSelector(s => {
-        if(s !== undefined) {
-            return s.mypagePosts
+
+    const myPosts = useSelector((s) => {
+        if (s !== undefined) {
+            return s.mypagePosts;
         }
-    })
+    });
 
     const [limit, setLimit] = useState(15);
     const [page, setPage] = useState(1);
     const offset = (page - 1) * limit;
 
     useEffect(() => {
-        console.log("내가 쓴 글들 : ", myPosts);
-    }, [myPosts])
+        console.log('내가 쓴 글들 : ', myPosts);
+    }, [myPosts]);
 
     const postClick = (postid, e) => {
-        navigation('/informationShare/'+postid);
-    }
+        navigation('/informationShare/' + postid);
+    };
 
     return (
         <>
-        <div className={style.layout}>
-            <div className={style.topBar}>
+            <div className={style.layout}>
+                <div className={style.topBar}>
                     <div>제목</div>
                     <div>카테고리</div>
                     <div>작성시간</div>
+                </div>
+                {myPosts !== undefined
+                    ? myPosts
+                          .slice(offset, offset + limit)
+                          .map((item, index) => (
+                              <article
+                                  key={index}
+                                  onClick={(e) => postClick(item.post_id, e)}>
+                                  <div>{item.title}</div>
+                                  <div>{item.category}</div>
+                                  <div>{parseDate(item.written_date)}</div>
+                              </article>
+                          ))
+                    : null}
             </div>
-            {myPosts !== undefined ? myPosts.slice(offset, offset + limit).map((item, index) => (
-                <article key={index} onClick={e => postClick(item.post_id, e)}>
-                    <div>{item.title}</div>
-                    <div>{item.category}</div>
-                    <div>{parseDate(item.written_date)}</div>
-                </article>
-            )) : null}
-        </div>
-
-        <footer className={style.footer}>
-            {myPosts !== undefined ? 
-            <Pagination total={myPosts.length}
-            limit={limit}
-            page={page}
-            setPage={setPage}/>
-            : null
-            }
-        </footer>
+
+            <footer className={style.footer}>
+                {myPosts !== undefined ? (
+                    <Pagination
+                        total={myPosts.length}
+                        limit={limit}
+                        page={page}
+                        setPage={setPage}
+                    />
+                ) : null}
+            </footer>
         </>
-    )
-}
+    );
+};
 
-export default MyPosts;
\ No newline at end of file
+export default MyPosts;
diff --git a/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyTransactions.js b/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyTransactions.js
index b85732d..12a32e0 100644
--- a/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyTransactions.js
+++ b/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyTransactions.js
@@ -1,47 +1,51 @@
-import React, { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
-import store from "../../../store";
-import TransactionDetail from "../../TransactionPage/TransactionDetail";
-import Pagination from "../../Pagination/Pagination";
-import style from "../../../css/MyPage/MyPageDetail/MyTransactions.module.css";
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import store from '../../../store';
+import TransactionDetail from '../../TransactionPage/TransactionDetail';
+import Pagination from '../../Pagination/Pagination';
+import style from '../../../css/MyPage/MyPageDetail/MyTransactions.module.css';
 
 const MyTransactions = () => {
-    const myTransactions = useSelector(s => {
-        if(s !== undefined) {
-            return s.mypageTransactions
+    const myTransactions = useSelector((s) => {
+        if (s !== undefined) {
+            return s.mypageTransactions;
         }
-    })
+    });
 
     const [limit, setLimit] = useState(3);
     const [page, setPage] = useState(1);
     const offset = (page - 1) * limit;
 
     useEffect(() => {
-        console.log("내가 쓴 거래들 : ", myTransactions);
-    }, [myTransactions])
+        console.log('내가 쓴 거래들 : ', myTransactions);
+    }, [myTransactions]);
 
     return (
         <>
-        <div className={style.container}>
-        {myTransactions !== undefined ? myTransactions.slice(offset, offset + limit).map((item, index) => (
-            <article key={index}>
-            <TransactionDetail transaction={item}/>
-            </article>
-        )) : null}
-        </div>
-        
+            <div className={style.container}>
+                {myTransactions !== undefined
+                    ? myTransactions
+                          .slice(offset, offset + limit)
+                          .map((item, index) => (
+                              <article key={index}>
+                                  <TransactionDetail transaction={item} />
+                              </article>
+                          ))
+                    : null}
+            </div>
 
-        <footer className={style.footer}>
-            {myTransactions !== undefined ? 
-            <Pagination total={myTransactions.length}
-            limit={limit}
-            page={page}
-            setPage={setPage}/>
-            : null
-            }
-        </footer>
+            <footer className={style.footer}>
+                {myTransactions !== undefined ? (
+                    <Pagination
+                        total={myTransactions.length}
+                        limit={limit}
+                        page={page}
+                        setPage={setPage}
+                    />
+                ) : null}
+            </footer>
         </>
-    )
-}
+    );
+};
 
-export default MyTransactions;
\ No newline at end of file
+export default MyTransactions;
diff --git a/frontend/sweet-red-beans/src/components/MyPage/MyPageNormal.js b/frontend/sweet-red-beans/src/components/MyPage/MyPageNormal.js
index 1609507..e842240 100644
--- a/frontend/sweet-red-beans/src/components/MyPage/MyPageNormal.js
+++ b/frontend/sweet-red-beans/src/components/MyPage/MyPageNormal.js
@@ -1,26 +1,33 @@
-import React, { useEffect, useState, useRef } from "react";
-import MyPageDetail from "./MyPageDetail";
-import axios from "axios";
-import { useDispatch } from "react-redux";
-import { MYPAGE_USER, MYPAGE_TRANSACTIONS, MYPAGE_COMMENTS, MYPAGE_EVENTS, MYPAGE_POSTS, MYPAGE_LIKE_TRANSACTIONS } from "../../actions/types";
-import style from "../../css/MyPage/MyPageNormal.module.css";
-import { Outlet, useNavigate } from "react-router";
-import {Route, Routes} from "react-router-dom";
-import MyEvents from "./MyPageDetail/MyEvents";
-import {Link} from "react-router-dom";
+import React, { useEffect, useState, useRef } from 'react';
+import MyPageDetail from './MyPageDetail';
+import axios from 'axios';
+import { useDispatch } from 'react-redux';
+import {
+    MYPAGE_USER,
+    MYPAGE_TRANSACTIONS,
+    MYPAGE_COMMENTS,
+    MYPAGE_EVENTS,
+    MYPAGE_POSTS,
+    MYPAGE_LIKE_TRANSACTIONS,
+} from '../../actions/types';
+import style from '../../css/MyPage/MyPageNormal.module.css';
+import { Outlet, useNavigate } from 'react-router';
+import { Route, Routes } from 'react-router-dom';
+import MyEvents from './MyPageDetail/MyEvents';
+import { Link } from 'react-router-dom';
 
 const MyPageNomal = () => {
     //서버에서 받아온 정보들 저장하기
-    const [profileImage, setProfileImage] = useState("");
-    const [nickname, setNickname] = useState("");
-    const [reliability, setReliability] = useState("");
+    const [profileImage, setProfileImage] = useState('');
+    const [nickname, setNickname] = useState('');
+    const [reliability, setReliability] = useState('');
 
     //프로필 수정
     const [hide, setHide] = useState(true);
     //이미지 불러오기
     const [imgFile, setImgFile] = useState(null);
     //닉네임 변경용
-    const [nicknameModify, setNicknameModify] = useState("");
+    const [nicknameModify, setNicknameModify] = useState('');
 
     const [preImage, setPreImage] = useState(null);
 
@@ -35,315 +42,349 @@ const MyPageNomal = () => {
     const navigation = useNavigate();
 
     useEffect(() => {
-        axios.get('http://localhost:8080/mypage',{
-        withCredentials: true ,
-        })
-        .then(response => {
-            setNickname(response.data.user.nickname);
-            setNicknameModify(response.data.user.nickname);
-            setProfileImage(response.data.user.profile_url);
-            console.log(response.data.user.profile_url);
-            setReliability(response.data.user.reliability);
-            dispatch({
-                type:MYPAGE_USER,
-                payload:response.data.user
-            })
-            dispatch({
-                type:MYPAGE_TRANSACTIONS,
-                payload:response.data.writeTransaction
-            })
-            dispatch({
-                type:MYPAGE_COMMENTS,
-                payload:response.data.comment
-            })
-            dispatch({
-                type:MYPAGE_EVENTS,
-                payload:response.data.likeEvent
-            })
-            dispatch({
-                type:MYPAGE_POSTS,
-                payload:response.data.content
+        axios
+            .get('http://localhost:8080/mypage', {
+                withCredentials: true,
             })
-            dispatch({
-                type:MYPAGE_LIKE_TRANSACTIONS,
-                payload:response.data.likeTransaction
+            .then((response) => {
+                setNickname(response.data.user.nickname);
+                setNicknameModify(response.data.user.nickname);
+                setProfileImage(response.data.user.profile_url);
+                console.log(response.data.user.profile_url);
+                setReliability(response.data.user.reliability);
+                dispatch({
+                    type: MYPAGE_USER,
+                    payload: response.data.user,
+                });
+                dispatch({
+                    type: MYPAGE_TRANSACTIONS,
+                    payload: response.data.writeTransaction,
+                });
+                dispatch({
+                    type: MYPAGE_COMMENTS,
+                    payload: response.data.comment,
+                });
+                dispatch({
+                    type: MYPAGE_EVENTS,
+                    payload: response.data.likeEvent,
+                });
+                dispatch({
+                    type: MYPAGE_POSTS,
+                    payload: response.data.content,
+                });
+                dispatch({
+                    type: MYPAGE_LIKE_TRANSACTIONS,
+                    payload: response.data.likeTransaction,
+                });
+                setRenderError(false);
             })
-            setRenderError(false);
-        })
-        .catch(error => {
-            if(error.response.status === 401){
-                alert("로그인을 먼저 해주세요");
-                setRenderError(true);
-                navigation('/');
-            }
-        });
-    }, [])
+            .catch((error) => {
+                if (error.response.status === 401) {
+                    alert('로그인을 먼저 해주세요');
+                    setRenderError(true);
+                    navigation('/');
+                }
+            });
+    }, []);
 
     //메뉴 선택
     const myListClick = (index, e) => {
-        navigation('/mypage/'+index)
-    }
+        navigation('/mypage/' + index);
+    };
 
     //프로필 변경 버튼 눌렀을 때
     const profileChangeClick = () => {
         setHide(false);
         setNicknameCheck(false);
         setNicknameError(false);
-    }
+    };
 
     //프로필 변경 취소 버튼 눌렀을 때
     const profileCancelClick = () => {
         setHide(true);
-    }
+    };
 
     //프로필 변경 완료 버튼 눌렀을 때
     const profileCompleteClick = () => {
-
-        
         const fd = new FormData();
 
         //프로필 사진 바뀌었을 때
-        if(imgFile!==null){
-            fd.append("file", imgFile[0])
-            fd.append("user_id", "1")
-            axios.patch('http://localhost:8080/mypage/profile', fd, {
-                withCredentials: true,
-                headers: {
-                    "Content-Type": `multipart/form-data; `,
-                }
-            })
-            .then((response) => {
-                if(response.data){
-                    setImgFile(null);
-                }
-            })
-            .catch((error) => {
-                console.log(error);
-            })
+        if (imgFile !== null) {
+            fd.append('file', imgFile[0]);
+            fd.append('user_id', '1');
+            axios
+                .patch('http://localhost:8080/mypage/profile', fd, {
+                    withCredentials: true,
+                    headers: {
+                        'Content-Type': `multipart/form-data; `,
+                    },
+                })
+                .then((response) => {
+                    if (response.data) {
+                        setImgFile(null);
+                    }
+                })
+                .catch((error) => {
+                    console.log(error);
+                });
             setHide(true);
         }
 
         //닉네임 바뀌었을 때
-        if (nickname !== nicknameModify){
-            
-            if(!nicknameCheck){
-                console.log("체크 안함");
-                alert("중복체크를 해주세요")
+        if (nickname !== nicknameModify) {
+            if (!nicknameCheck) {
+                console.log('체크 안함');
+                alert('중복체크를 해주세요');
                 return setNicknameError(true);
-            }
-            else {
-                axios.patch('http://localhost:8080/mypage/nickname', 
-                {
-                    nickname: nicknameModify,
-                }, { withCredentials: true })
-                .then((response) => {
-                if(response.data){
-                    console.log("닉네임 변경됨");
-                    //닉네임 변경되면 변경된 닉네임으로 바꿔줌
-                    setNickname(nicknameModify);
-                }
-                })
-                .catch((error) => {
-                    console.log(error);
-                })
+            } else {
+                axios
+                    .patch(
+                        'http://localhost:8080/mypage/nickname',
+                        {
+                            nickname: nicknameModify,
+                        },
+                        { withCredentials: true }
+                    )
+                    .then((response) => {
+                        if (response.data) {
+                            console.log('닉네임 변경됨');
+                            //닉네임 변경되면 변경된 닉네임으로 바꿔줌
+                            setNickname(nicknameModify);
+                        }
+                    })
+                    .catch((error) => {
+                        console.log(error);
+                    });
                 setHide(true);
             }
         }
 
-        navigation(0)
-    }
-    
+        navigation(0);
+    };
 
     const handleChangeFile = (e) => {
         setImgFile(e.target.files);
-    }
+    };
 
     useEffect(() => {
         preview();
         return () => preview();
-    })
+    });
 
     const preview = () => {
-        if(!imgFile) return false;
+        if (!imgFile) return false;
 
         const imgEl = document.querySelector('.preview');
         const reader = new FileReader();
-        reader.onloadend = () => {(
+        reader.onloadend = () => {
             //imgEl.style.backgroundImage = `url(${reader.result})`
-            setPreImage(reader.result)
-        )
-        //setProfileImage(reader.result);
-        
-    }
+            setPreImage(reader.result);
+            //setProfileImage(reader.result);
+        };
         reader.readAsDataURL(imgFile[0]);
-        
-    }
+    };
     const nicknameModifyChange = (e) => {
         setNicknameModify(e.target.value);
-    }
+    };
 
-    useEffect(() => {
-    }, [profileImage])
+    useEffect(() => {}, [profileImage]);
 
     useEffect(() => {
         console.log(nicknameCheck);
-    }, [nicknameCheck])
+    }, [nicknameCheck]);
 
     //중복확인 버튼 누를 때
     const nicknameModifyClick = () => {
         //바뀌었을 때
-        if(nickname !== nicknameModify) {
-            const userNickname = {nickname: nicknameModify};
-            axios.post('http://localhost:8080/mypage/duplicate-check', userNickname, { withCredentials: true })
-            .then(response => {
-                const data = response.data
-                if(data.result === false){
-                    alert("사용할 수 있는 닉네임입니다.");
-                    setNicknameCheck(true);
-                    setNicknameError(false);
-                }
-                else{
-                    alert("사용할 수 없는 닉네임입니다.");
-                }
-            })
-        }
-        else {
+        if (nickname !== nicknameModify) {
+            const userNickname = { nickname: nicknameModify };
+            axios
+                .post(
+                    'http://localhost:8080/mypage/duplicate-check',
+                    userNickname,
+                    { withCredentials: true }
+                )
+                .then((response) => {
+                    const data = response.data;
+                    if (data.result === false) {
+                        alert('사용할 수 있는 닉네임입니다.');
+                        setNicknameCheck(true);
+                        setNicknameError(false);
+                    } else {
+                        alert('사용할 수 없는 닉네임입니다.');
+                    }
+                });
+        } else {
             //바뀌지 않았으면 닉네임 중복 체크 안 해도 됨
             setNicknameCheck(true);
             setNicknameError(false);
         }
-    }
+    };
 
     const useConfirm = (message = null, onConfirm, onCancel) => {
-        if (!onConfirm || typeof onConfirm !== "function") {
+        if (!onConfirm || typeof onConfirm !== 'function') {
             return;
         }
-        if (onCancel && typeof onCancel !== "function") {
+        if (onCancel && typeof onCancel !== 'function') {
             return;
         }
-        
+
         const confirmAction = () => {
             if (window.confirm(message)) {
-            onConfirm();
+                onConfirm();
             } else {
-            onCancel();
+                onCancel();
             }
         };
-        
+
         return confirmAction;
     };
 
     //삭제버튼 눌렀을 때
     const deleteConfirm = () => {
-        axios.delete('http://localhost:8080/mypage/withdrawal',{
-        withCredentials: true,
-        data: {
-                    
-            }
-        })
-        .then(response => {
-            if(response.data.result){
-                alert("탈퇴 되었습니다.")
-                //이전 페이지로 이동
-                navigation('/')
-            }
-            else {
-                alert("탈퇴에 실패했습니다.")
-            }
-        })
-        .catch(error => console.log(error));
-        
-    }
+        axios
+            .delete('http://localhost:8080/mypage/withdrawal', {
+                withCredentials: true,
+                data: {},
+            })
+            .then((response) => {
+                if (response.data.result) {
+                    alert('탈퇴 되었습니다.');
+                    //이전 페이지로 이동
+                    navigation('/');
+                } else {
+                    alert('탈퇴에 실패했습니다.');
+                }
+            })
+            .catch((error) => console.log(error));
+    };
 
-    const cancelConfirm = () => console.log("탈퇴 취소")
+    const cancelConfirm = () => console.log('탈퇴 취소');
 
     const quitClick = useConfirm(
-        "정말 탈퇴하시겠습니까?",
+        '정말 탈퇴하시겠습니까?',
         deleteConfirm,
         cancelConfirm
     );
 
     return (
         <>
-        {!renderError ? 
-        <>
-            <div className={style.profileWhiteBox}>
-            {hide? 
-            <div className={style.profileBox}>
-                <div>
-                    <img src={profileImage}/>
-                </div>
-                <div>{nickname}</div>
-                <div>
-                    <button onClick={profileChangeClick}>프로필 수정하기</button>
-                </div>
-
-                <div>{reliability}</div>
-            </div>
-            : null}
-
-            {
-                !hide?
-                <div className={style.profileChangeBox}>
-                    {preImage !== null ?
-                    <img src={preImage}/>
-                    : <img src={profileImage}/>}
-                    <label htmlFor="upload_file"></label>
-                    <input type="file" onChange={handleChangeFile} id="upload_file" style={{display:"none"}}/>
-
-                    <div className={style.nicknameChangeArea} id="nicknameChangeArea">
-                        <input type="text" placeholder="닉네임" onChange={nicknameModifyChange} value={nicknameModify} maxLength="15"/>
-                        <div></div>
+            {!renderError ? (
+                <>
+                    <div className={style.profileWhiteBox}>
+                        {hide ? (
+                            <div className={style.profileBox}>
+                                <div>
+                                    <img src={profileImage} />
+                                </div>
+                                <div>{nickname}</div>
+                                <div>
+                                    <button onClick={profileChangeClick}>
+                                        프로필 수정하기
+                                    </button>
+                                </div>
+
+                                <div>{reliability}</div>
+                            </div>
+                        ) : null}
+
+                        {!hide ? (
+                            <div className={style.profileChangeBox}>
+                                {preImage !== null ? (
+                                    <img src={preImage} />
+                                ) : (
+                                    <img src={profileImage} />
+                                )}
+                                <label htmlFor="upload_file"></label>
+                                <input
+                                    type="file"
+                                    onChange={handleChangeFile}
+                                    id="upload_file"
+                                    style={{ display: 'none' }}
+                                />
+
+                                <div
+                                    className={style.nicknameChangeArea}
+                                    id="nicknameChangeArea">
+                                    <input
+                                        type="text"
+                                        placeholder="닉네임"
+                                        onChange={nicknameModifyChange}
+                                        value={nicknameModify}
+                                        maxLength="15"
+                                    />
+                                    <div></div>
+                                </div>
+
+                                <button
+                                    onClick={nicknameModifyClick}
+                                    className={style.nicknameDupButton}>
+                                    중복 확인하기
+                                </button>
+                                {nicknameError && (
+                                    <div className={style.nicknameDupText}>
+                                        닉네임 중복확인해주세요
+                                    </div>
+                                )}
+                                <button
+                                    onClick={profileCompleteClick}
+                                    className={style.completeButton}>
+                                    완료
+                                </button>
+                                <button
+                                    onClick={profileCancelClick}
+                                    className={style.cancelButton}>
+                                    취소
+                                </button>
+                            </div>
+                        ) : null}
                     </div>
 
-                    <button onClick={nicknameModifyClick} className={style.nicknameDupButton}>중복 확인하기</button>
-                    {nicknameError && <div className={style.nicknameDupText}>닉네임 중복확인해주세요</div>}
-                    <button onClick={profileCompleteClick} className={style.completeButton}>완료</button>
-                    <button onClick={profileCancelClick} className={style.cancelButton}>취소</button>
-                </div>
-
-                : null
-            }
-        </div>
-
-        <div className={style.detailMenuArea}>
-            <nav>
-                <ul>
-                    <li onClick={(e) => myListClick('myevents', e)}>
-                        <button></button>
-                        <div>관심있는 이벤트</div>
-                    </li>
-                    <li onClick={(e) => myListClick('mytransactions', e)}>
-                        <button></button>
-                        <div>내가 쓴 거래</div>
-                    </li>
-                    <li onClick={(e) => myListClick('myliketransactions', e)}>
-                        <button></button>
-                        <div>내가 좋아요 한 거래</div>
-                    </li>
-                    <li onClick={(e) => myListClick('myposts', e)}>
-                        <button></button>
-                        <div>내가 쓴 글</div>
-                    </li>
-                    <li onClick={(e) => myListClick('mycomments', e)}>
-                        <button></button>
-                        <div>내가 쓴 댓글</div>
-                    </li>
-                </ul>
-            </nav>
-
-        </div>
-        <div className={style.detail}>
-            <Outlet/>
-        </div>
-        <div className={style.quitArea}>
-            <button onClick={quitClick}>탈퇴하기</button>
-        </div>
-
-        </> : null}
-        
+                    <div className={style.detailMenuArea}>
+                        <nav>
+                            <ul>
+                                <li onClick={(e) => myListClick('myevents', e)}>
+                                    <button></button>
+                                    <div>관심있는 이벤트</div>
+                                </li>
+                                <li
+                                    onClick={(e) =>
+                                        myListClick('mytransactions', e)
+                                    }>
+                                    <button></button>
+                                    <div>내가 쓴 거래</div>
+                                </li>
+                                <li
+                                    onClick={(e) =>
+                                        myListClick('myliketransactions', e)
+                                    }>
+                                    <button></button>
+                                    <div>내가 좋아요 한 거래</div>
+                                </li>
+                                <li onClick={(e) => myListClick('myposts', e)}>
+                                    <button></button>
+                                    <div>내가 쓴 글</div>
+                                </li>
+                                <li
+                                    onClick={(e) =>
+                                        myListClick('mycomments', e)
+                                    }>
+                                    <button></button>
+                                    <div>내가 쓴 댓글</div>
+                                </li>
+                            </ul>
+                        </nav>
+                    </div>
+                    <div className={style.detail}>
+                        <Outlet />
+                    </div>
+                    <div className={style.quitArea}>
+                        <button onClick={quitClick}>탈퇴하기</button>
+                    </div>
+                </>
+            ) : null}
         </>
-    )
-}
+    );
+};
 
-export default MyPageNomal;
\ No newline at end of file
+export default MyPageNomal;
diff --git a/frontend/sweet-red-beans/src/components/Pagination/Pagination.js b/frontend/sweet-red-beans/src/components/Pagination/Pagination.js
index c259dc7..7042ca7 100644
--- a/frontend/sweet-red-beans/src/components/Pagination/Pagination.js
+++ b/frontend/sweet-red-beans/src/components/Pagination/Pagination.js
@@ -1,35 +1,38 @@
-import React from "react";
-import style from "../../css/Pagination.module.css"
+import React from 'react';
+import style from '../../css/Pagination.module.css';
 
 function Pagination({ total, limit, page, setPage }) {
     //페이지 수를 만들음, 12개면 2개, 25개면 3개
     const numPages = Math.ceil(total / limit);
-  
-    return (
-      <>
-        <nav className={style.nav}>
-          {/*이전버튼(<), page가 1이면 안 보이게 함*/}
-          <button onClick={() => setPage(page - 1)} disabled={page === 1} className={style.button}>
 
-          </button>
-          {/*Array(numPages)하면 numPages길이의 빈 배열을 만듦 -> fill로 배열을 undefined로 채워줌*/}
-          {Array(numPages)
-            .fill()
-            .map((_, i) => (
-              <button
-                className={style.pageButton}
-                key={i + 1}
-                onClick={() => setPage(i + 1)}
-                aria-current={page === i + 1 ? "page" : null}>
-                {i + 1}
-              </button>
-            ))}
-          {/*다음버튼(>), page가 마지막 페이지이면 안 보이게 함*/}
-          <button onClick={() => setPage(page + 1)} disabled={page === numPages} className={style.button}>
-          </button>
-        </nav>
-      </>
+    return (
+        <>
+            <nav className={style.nav}>
+                {/*이전버튼(<), page가 1이면 안 보이게 함*/}
+                <button
+                    onClick={() => setPage(page - 1)}
+                    disabled={page === 1}
+                    className={style.button}></button>
+                {/*Array(numPages)하면 numPages길이의 빈 배열을 만듦 -> fill로 배열을 undefined로 채워줌*/}
+                {Array(numPages)
+                    .fill()
+                    .map((_, i) => (
+                        <button
+                            className={style.pageButton}
+                            key={i + 1}
+                            onClick={() => setPage(i + 1)}
+                            aria-current={page === i + 1 ? 'page' : null}>
+                            {i + 1}
+                        </button>
+                    ))}
+                {/*다음버튼(>), page가 마지막 페이지이면 안 보이게 함*/}
+                <button
+                    onClick={() => setPage(page + 1)}
+                    disabled={page === numPages}
+                    className={style.button}></button>
+            </nav>
+        </>
     );
 }
 
-export default Pagination;
\ No newline at end of file
+export default Pagination;
diff --git a/frontend/sweet-red-beans/src/components/Report/Report.js b/frontend/sweet-red-beans/src/components/Report/Report.js
index 3bee4e3..277078e 100644
--- a/frontend/sweet-red-beans/src/components/Report/Report.js
+++ b/frontend/sweet-red-beans/src/components/Report/Report.js
@@ -1,17 +1,17 @@
-import axios from "axios";
-import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router";
-import style from "../../css/Report/Report.module.css";
-import Modal from "../Modals/Modal";
-import { parseDate } from "../../parseDate/parseDate";
+import axios from 'axios';
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
+import style from '../../css/Report/Report.module.css';
+import Modal from '../Modals/Modal';
+import { parseDate } from '../../parseDate/parseDate';
 
-const Report = ({report}) => {
+const Report = ({ report }) => {
     const navigation = useNavigate();
     const [modalOpen, setModalOpen] = useState(false);
-    const [content, setContent] = useState("");
-    const [date, setDate] = useState("");
-    const [nickname, setNickname] = useState("");
-    const [reportedNickname, setReportedNickname] = useState("");
+    const [content, setContent] = useState('');
+    const [date, setDate] = useState('');
+    const [nickname, setNickname] = useState('');
+    const [reportedNickname, setReportedNickname] = useState('');
     const [isComplete, setIsComplete] = useState(false);
 
     const openModal = () => {
@@ -23,80 +23,86 @@ const Report = ({report}) => {
 
     useEffect(() => {
         setContent(report.report_content);
-        setDate(report.written_date)
+        setDate(report.written_date);
         setNickname(report.nickname);
-        setReportedNickname(report.reported_nickname)
+        setReportedNickname(report.reported_nickname);
         setIsComplete(report.is_complete);
         console.log(report);
-    }, [report])
+    }, [report]);
 
     const useConfirm = (message = null, onConfirm, onCancel) => {
-        if (!onConfirm || typeof onConfirm !== "function") {
+        if (!onConfirm || typeof onConfirm !== 'function') {
             return;
         }
-        if (onCancel && typeof onCancel !== "function") {
+        if (onCancel && typeof onCancel !== 'function') {
             return;
         }
-        
+
         const confirmAction = () => {
             if (window.confirm(message)) {
-            onConfirm();
+                onConfirm();
             } else {
-            onCancel();
+                onCancel();
             }
         };
-        
+
         return confirmAction;
     };
 
     const confirm = () => {
-        axios.patch('http://localhost:8080/manager/report', {
-            user_id:report.reported_user_id
-        },
-        {withCredentials: true}
-        )
-        .then((response) => {
-        if(response.data){
-            console.log(response.data)
-        }
-        })
-        .catch((error) => {
-            console.log(error);
-        })
+        axios
+            .patch(
+                'http://localhost:8080/manager/report',
+                {
+                    user_id: report.reported_user_id,
+                },
+                { withCredentials: true }
+            )
+            .then((response) => {
+                if (response.data) {
+                    console.log(response.data);
+                }
+            })
+            .catch((error) => {
+                console.log(error);
+            });
         closeModal();
         navigation(0);
-    }
+    };
 
-    const cancelConfirm = () => console.log("승인 취소")
+    const cancelConfirm = () => console.log('승인 취소');
 
     const reportAcceptClick = useConfirm(
-        isComplete? "승인을 취소하시겠습니까?" : "승인하시겠습니까?",
+        isComplete ? '승인을 취소하시겠습니까?' : '승인하시겠습니까?',
         confirm,
         cancelConfirm
     );
 
     return (
         <>
-        <Modal open={modalOpen} close={closeModal}>
-            <form className={style.modal}>
-                <div className={style.topArea}>
-                    <div>신고자 : {nickname}</div>
-                    <div>{parseDate(date)}</div>
+            <Modal open={modalOpen} close={closeModal}>
+                <form className={style.modal}>
+                    <div className={style.topArea}>
+                        <div>신고자 : {nickname}</div>
+                        <div>{parseDate(date)}</div>
+                    </div>
+                    <div>신고 받은 사람 : {reportedNickname}</div>
+                    <div>{content}</div>
+                    <button onClick={reportAcceptClick}>
+                        {isComplete ? '승인취소' : '승인하기'}
+                    </button>
+                </form>
+            </Modal>
+            <div className={style.main} onClick={openModal}>
+                <div className={isComplete ? style.complete : style.incomplete}>
+                    {isComplete ? '승인' : '미승인'}
                 </div>
-                <div>신고 받은 사람 : {reportedNickname}</div>
-                <div>{content}</div>
-                <button onClick={reportAcceptClick}>{isComplete ? "승인취소" : "승인하기"}</button>
-            </form>
-        </Modal>
-        <div className={style.main} onClick={openModal}>
-            <div className={isComplete ? style.complete : style.incomplete}>{isComplete ? "승인" : "미승인"}</div>
-            <div>{nickname}</div>
-            <div>{reportedNickname}</div>
-            <div>{parseDate(date)}</div>
-        </div>
-
+                <div>{nickname}</div>
+                <div>{reportedNickname}</div>
+                <div>{parseDate(date)}</div>
+            </div>
         </>
-    )
-}
+    );
+};
 
-export default Report;
\ No newline at end of file
+export default Report;
diff --git a/frontend/sweet-red-beans/src/components/SignUp/SignUp.js b/frontend/sweet-red-beans/src/components/SignUp/SignUp.js
index 26d5132..745f334 100644
--- a/frontend/sweet-red-beans/src/components/SignUp/SignUp.js
+++ b/frontend/sweet-red-beans/src/components/SignUp/SignUp.js
@@ -1,20 +1,19 @@
-import React, {useState, useCallback} from "react";
-import axios from "axios";
-import {useNavigate} from "react-router-dom";
-import style from "../../css/SignUp/SignUp.module.css";
+import React, { useState, useCallback } from 'react';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+import style from '../../css/SignUp/SignUp.module.css';
 
 const SignUp = () => {
-
     const navigation = useNavigate();
 
     //const dispatch = useDispatch();
 
-    const [email, setEmail] = useState("");
-    const [password, setPassword] = useState("");
-    const [passwordCheck, setPasswordCheck] = useState("");
-    const [nickname, setNickname] = useState("");
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [passwordCheck, setPasswordCheck] = useState('');
+    const [nickname, setNickname] = useState('');
     //패스워드 안 맞을 때 false
-    const [passwordError,setPasswordError] = useState(false);
+    const [passwordError, setPasswordError] = useState(false);
     //이메일 중복 확인이 성공적으로 됐을 때 true
     const [emailCheck, setEmailCheck] = useState(false);
     //닉네임 중복 확인이 성공적으로 됐을 때 true
@@ -24,38 +23,38 @@ const SignUp = () => {
     //비밀번호가 형식에 안 맞으면 true
     const [passwordFormError, setPasswordFormError] = useState(false);
     //이메일 중복 확인 안 됐을 때 false
-    const [emailError ,setEmailError] = useState(false);
+    const [emailError, setEmailError] = useState(false);
     //닉네임 중복 확인 안 됐을 때 false
     const [nicknameError, setNicknameError] = useState(false);
     //이메일 형식에 맞지 않을 때 false
     const [emailForm, setEmailForm] = useState(false);
 
-    const onChangePasswordChk = useCallback((e) => {
-        //비밀번호를 입력할때마다 password 를 검증하는 함수
-        setPasswordError(e.target.value !== password);
-        setPasswordCheck(e.target.value);
-        //password state를 사용하기때문에 password를 넣어준다
-    },[password, passwordCheck]);
+    const onChangePasswordChk = useCallback(
+        (e) => {
+            //비밀번호를 입력할때마다 password 를 검증하는 함수
+            setPasswordError(e.target.value !== password);
+            setPasswordCheck(e.target.value);
+            //password state를 사용하기때문에 password를 넣어준다
+        },
+        [password, passwordCheck]
+    );
 
-    
     //닉네임 변경됐을 때
     const onChange = (e) => {
-        if (e.target.id === "nickname"){
+        if (e.target.id === 'nickname') {
             setNickname(e.target.value);
         }
-    }
+    };
 
     const onEmailChange = (e) => {
         setEmail(e.target.value);
-        if (e.target.value !== "" && e.target.value.search('@') !== -1){
+        if (e.target.value !== '' && e.target.value.search('@') !== -1) {
             console.log(emailForm);
             setEmailForm(true);
-        }
-        else {
+        } else {
             setEmailForm(false);
         }
-        
-    }
+    };
 
     const onPasswordChange = (e) => {
         setPassword(e.target.value);
@@ -64,169 +63,247 @@ const SignUp = () => {
         let num = /[0-9]/;
         let al = /[a-zA-Z]/;
         let char = /[~!@#$%^&*()_+|<>?:{}]/;
-        if (e.target.value.length>=8 && num.test(e.target.value) && al.test(e.target.value) && char.test(e.target.value)){
+        if (
+            e.target.value.length >= 8 &&
+            num.test(e.target.value) &&
+            al.test(e.target.value) &&
+            char.test(e.target.value)
+        ) {
             setPasswordForm(true);
             setPasswordFormError(false);
-            console.log("올바른 비밀번호");
-        }
-        else {
+            console.log('올바른 비밀번호');
+        } else {
             setPasswordForm(false);
         }
-    }
+    };
 
     //가입하기 버튼
     const onClick = (e) => {
         e.preventDefault();
         //비밀번호, 비밀번호 확인이 안 같으면 회원가입 안 됨
-        if(password !== passwordCheck){
+        if (password !== passwordCheck) {
             return setPasswordError(true);
         }
 
         //이메일 중복 확인 안 하면 회원가입 안 됨
-        if(!emailCheck){
+        if (!emailCheck) {
             return setEmailError(true);
         }
 
         //닉네임 중복 체크 안 하면 회원가입 안 됨
-        if(!nicknameCheck){
+        if (!nicknameCheck) {
             return setNicknameError(true);
         }
 
         //비밀번호를 입력하지 않으면 회원가입 안 됨
-        if(!passwordForm){
+        if (!passwordForm) {
             return setPasswordFormError(true);
         }
 
         let body = {
-            email : email,
-            password : password,
-            nickname : nickname,
-        }
-        
+            email: email,
+            password: password,
+            nickname: nickname,
+        };
+
         // if(emailDup === false || nicknameDup === false){
         //     console.log("로그인 안 됨");
         // }
 
-        axios.post('http://localhost:8080/signup', body)
-        .then(response => {
-            if (response.data.result){
-                alert("회원가입되었습니다!");
-                navigation('/')}
-            else {
-                alert("회원가입할 수 없습니다.");
-            }
-        })
-        .catch(error => console.log(error));
-        
-    }
+        axios
+            .post('http://localhost:8080/signup', body)
+            .then((response) => {
+                if (response.data.result) {
+                    alert('회원가입되었습니다!');
+                    navigation('/');
+                } else {
+                    alert('회원가입할 수 없습니다.');
+                }
+            })
+            .catch((error) => console.log(error));
+    };
 
     //이메일 중복확인 버튼 눌렀을 때
     const clickEmailCheck = (e) => {
         e.preventDefault();
         //이메일 형식에 맞아야 체크했다고 봄
-        if (emailForm){
-            
-            console.log("성공적");
-            const userEmail = {email : email}
-            axios.post('http://localhost:8080/signup/duplicate-check', userEmail)
-                .then(response => {
+        if (emailForm) {
+            console.log('성공적');
+            const userEmail = { email: email };
+            axios
+                .post('http://localhost:8080/signup/duplicate-check', userEmail)
+                .then((response) => {
                     console.log(response.data);
-                    const data = response.data
-                    if(data.result === false){
+                    const data = response.data;
+                    if (data.result === false) {
                         setEmailCheck(true);
                         setEmailError(false);
-                        alert("사용할 수 있는 이메일입니다.");
-                    }
-                    else {
-                        alert("사용할 수 없습니다.");
+                        alert('사용할 수 있는 이메일입니다.');
+                    } else {
+                        alert('사용할 수 없습니다.');
                     }
                 })
-                .catch(error => {
+                .catch((error) => {
                     console.log(error);
-                })
+                });
         }
         //이메일 형식에 안 맞을 때
         else {
-            console.log("실패");
+            console.log('실패');
         }
-        
-    }
+    };
 
     const clickNicknameCheck = (e) => {
         e.preventDefault();
         //닉네임이 있어야 체크했다고 봄
-        if (nickname !== ""){
-            
-            const userNickname = {nickname: nickname};
-            axios.post('http://localhost:8080/signup/duplicate-check', userNickname)
-            .then(response => {
-                const data = response.data
-                if(data.result === false){
-                    alert("사용할 수 있는 닉네임입니다.");
-                    setNicknameCheck(true);
-                    setNicknameError(false);
-                }
-                else{
-                    alert("사용할 수 없는 닉네임입니다.");
-                }
-            })
-        }
-        else {
-            console.log("안됨");
+        if (nickname !== '') {
+            const userNickname = { nickname: nickname };
+            axios
+                .post(
+                    'http://localhost:8080/signup/duplicate-check',
+                    userNickname
+                )
+                .then((response) => {
+                    const data = response.data;
+                    if (data.result === false) {
+                        alert('사용할 수 있는 닉네임입니다.');
+                        setNicknameCheck(true);
+                        setNicknameError(false);
+                    } else {
+                        alert('사용할 수 없는 닉네임입니다.');
+                    }
+                });
+        } else {
+            console.log('안됨');
         }
-        
-    }
+    };
 
     return (
         <>
-        <form className={style.whiteBox}>
-            <div className={style.signupArea}>
-            <div className={style.signUpText}>회원가입</div>
-
-            <div className={style.inputArea}>
-                <label>
-                    <div>이메일</div>
-                    <input className={style.dupInputText} id="email" type="email" placeholder="example@naver.com" onChange={onEmailChange} value={email} maxLength="100"/>
-                    <button className={style.dupChkButton} id="emailCheck" onClick={clickEmailCheck}>중복 확인하기</button>
-                </label>
-                {email === "" ? <div className={style.errormessage}>* 이메일을 입력해주세요</div> : null}
-                {!emailForm && <div className={style.errormessage}>* 이메일 형식이 아닙니다</div>}
-            </div>
-
-            <div className={style.inputArea}>
-                <label>
-                    <div>비밀 번호</div>
-                    <input className={style.inputText} id="password" type="password" placeholder="********" onChange={onPasswordChange} value={password}/>
-                </label>
-                {!passwordForm && <div className={style.errormessage}>* 8자 이상, 특수문자, 숫자 포함</div>}
-            </div>
-
-            <div className={style.inputArea}>
-                <label>
-                <div>비밀번호 확인</div>
-                <input className={style.inputText} id="passwordCheck" type="password" placeholder="********" onChange={onChangePasswordChk} value={passwordCheck}/>
-                </label>
-                {passwordError && <div className={style.errormessage}>* 비밀번호가 일치하지 않습니다</div>}
-            </div>
-
-            <div className={style.inputArea}>
-                <label>
-                <div>닉네임</div>
-                <input className={style.dupInputText} id="nickname" type="text" placeholder="닉네임" onChange={onChange} value={nickname} maxLength="15"/>
-                <button className={style.dupChkButton} id="nicknameCheck" onClick={clickNicknameCheck}>중복 확인하기</button>
-                </label>
-                {nickname === "" ? <div className={style.errormessage}>* 닉네임을 입력해주세요</div> : null}
-            </div>
-
-            <button className={style.joinButton} type="submit" onClick={onClick}>가입하기</button>
-            {emailError && <div className={style.errormessage}>이메일 중복확인해주세요</div>}
-            {nicknameError && <div className={style.errormessage}>닉네임 중복확인해주세요</div>}
-            {passwordFormError && <div className={style.errormessage}>비밀번호 양식을 확인해주세요</div>}
-            </div>
-        </form>
+            <form className={style.whiteBox}>
+                <div className={style.signupArea}>
+                    <div className={style.signUpText}>회원가입</div>
+
+                    <div className={style.inputArea}>
+                        <label>
+                            <div>이메일</div>
+                            <input
+                                className={style.dupInputText}
+                                id="email"
+                                type="email"
+                                placeholder="example@naver.com"
+                                onChange={onEmailChange}
+                                value={email}
+                                maxLength="100"
+                            />
+                            <button
+                                className={style.dupChkButton}
+                                id="emailCheck"
+                                onClick={clickEmailCheck}>
+                                중복 확인하기
+                            </button>
+                        </label>
+                        {email === '' ? (
+                            <div className={style.errormessage}>
+                                * 이메일을 입력해주세요
+                            </div>
+                        ) : null}
+                        {!emailForm && (
+                            <div className={style.errormessage}>
+                                * 이메일 형식이 아닙니다
+                            </div>
+                        )}
+                    </div>
+
+                    <div className={style.inputArea}>
+                        <label>
+                            <div>비밀 번호</div>
+                            <input
+                                className={style.inputText}
+                                id="password"
+                                type="password"
+                                placeholder="********"
+                                onChange={onPasswordChange}
+                                value={password}
+                            />
+                        </label>
+                        {!passwordForm && (
+                            <div className={style.errormessage}>
+                                * 8자 이상, 특수문자, 숫자 포함
+                            </div>
+                        )}
+                    </div>
+
+                    <div className={style.inputArea}>
+                        <label>
+                            <div>비밀번호 확인</div>
+                            <input
+                                className={style.inputText}
+                                id="passwordCheck"
+                                type="password"
+                                placeholder="********"
+                                onChange={onChangePasswordChk}
+                                value={passwordCheck}
+                            />
+                        </label>
+                        {passwordError && (
+                            <div className={style.errormessage}>
+                                * 비밀번호가 일치하지 않습니다
+                            </div>
+                        )}
+                    </div>
+
+                    <div className={style.inputArea}>
+                        <label>
+                            <div>닉네임</div>
+                            <input
+                                className={style.dupInputText}
+                                id="nickname"
+                                type="text"
+                                placeholder="닉네임"
+                                onChange={onChange}
+                                value={nickname}
+                                maxLength="15"
+                            />
+                            <button
+                                className={style.dupChkButton}
+                                id="nicknameCheck"
+                                onClick={clickNicknameCheck}>
+                                중복 확인하기
+                            </button>
+                        </label>
+                        {nickname === '' ? (
+                            <div className={style.errormessage}>
+                                * 닉네임을 입력해주세요
+                            </div>
+                        ) : null}
+                    </div>
+
+                    <button
+                        className={style.joinButton}
+                        type="submit"
+                        onClick={onClick}>
+                        가입하기
+                    </button>
+                    {emailError && (
+                        <div className={style.errormessage}>
+                            이메일 중복확인해주세요
+                        </div>
+                    )}
+                    {nicknameError && (
+                        <div className={style.errormessage}>
+                            닉네임 중복확인해주세요
+                        </div>
+                    )}
+                    {passwordFormError && (
+                        <div className={style.errormessage}>
+                            비밀번호 양식을 확인해주세요
+                        </div>
+                    )}
+                </div>
+            </form>
         </>
-        
-    )
-}
+    );
+};
 
-export default SignUp;
\ No newline at end of file
+export default SignUp;
diff --git a/frontend/sweet-red-beans/src/components/TopBar/GoogleLogin.js b/frontend/sweet-red-beans/src/components/TopBar/GoogleLogin.js
index 64c01e3..3f4b09c 100644
--- a/frontend/sweet-red-beans/src/components/TopBar/GoogleLogin.js
+++ b/frontend/sweet-red-beans/src/components/TopBar/GoogleLogin.js
@@ -1,38 +1,41 @@
-import React, { useEffect } from "react";
-import { useNavigate } from "react-router";
-import axios from "axios"
-import { Cookies } from "react-cookie";
-import { Link } from "react-router-dom";
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router';
+import axios from 'axios';
+import { Cookies } from 'react-cookie';
+import { Link } from 'react-router-dom';
 
 const GoogleLogin = () => {
     let navigation = useNavigate();
-    let code = new URL(window.location.href).searchParams.get("code");
+    let code = new URL(window.location.href).searchParams.get('code');
     const cookies = new Cookies();
 
-    useEffect(
-        async () => {
-            const data = await axios.get('http://localhost:8080/signin/auth/google/callback', {
-                withCredentials : true,
+    useEffect(async () => {
+        const data = await axios.get(
+            'http://localhost:8080/signin/auth/google/callback',
+            {
+                withCredentials: true,
                 params: {
-                    code:code,
-                }
-            });
+                    code: code,
+                },
+            }
+        );
 
-            const data2 = await axios.post('http://localhost:8080/signin', data.data, { withCredentials: true})
+        const data2 = await axios.post(
+            'http://localhost:8080/signin',
+            data.data,
+            { withCredentials: true }
+        );
 
-            if(data2.data.result) {
-                const date = new Date();
-                date.setMinutes(date.getMinutes() + 30);
-                cookies.set("login", true);
-                navigation(0)
-            }
-             navigation('/')
-    })
+        if (data2.data.result) {
+            const date = new Date();
+            date.setMinutes(date.getMinutes() + 30);
+            cookies.set('login', true);
+            navigation(0);
+        }
+        navigation('/');
+    });
 
-    return (
-        <>
-        </>
-    )
-}
+    return <></>;
+};
 
-export default GoogleLogin;
\ No newline at end of file
+export default GoogleLogin;
diff --git a/frontend/sweet-red-beans/src/components/TopBar/KakaoLogin.js b/frontend/sweet-red-beans/src/components/TopBar/KakaoLogin.js
index be5571f..dcf4c84 100644
--- a/frontend/sweet-red-beans/src/components/TopBar/KakaoLogin.js
+++ b/frontend/sweet-red-beans/src/components/TopBar/KakaoLogin.js
@@ -1,40 +1,40 @@
-import React, { useEffect } from "react";
-import { useNavigate } from "react-router";
-import axios from "axios"
-import { Cookies } from "react-cookie";
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router';
+import axios from 'axios';
+import { Cookies } from 'react-cookie';
 
 const KakaoLogin = () => {
     let navigation = useNavigate();
-    let code = new URL(window.location.href).searchParams.get("code");
+    let code = new URL(window.location.href).searchParams.get('code');
     const cookies = new Cookies();
 
-
-    useEffect(
-        async () => {
-            const data = await axios.get('http://localhost:8080/signin/oauth2/code/kakao', {
-                withCredentials : true,
+    useEffect(async () => {
+        const data = await axios.get(
+            'http://localhost:8080/signin/oauth2/code/kakao',
+            {
+                withCredentials: true,
                 params: {
-                    code:code,
-                }
-            });
+                    code: code,
+                },
+            }
+        );
 
-            const data2 = await axios.post('http://localhost:8080/signin', data.data, { withCredentials: true})
+        const data2 = await axios.post(
+            'http://localhost:8080/signin',
+            data.data,
+            { withCredentials: true }
+        );
 
-            if(data2.data.result) {
-                const date = new Date();
-                date.setMinutes(date.getMinutes() + 30);
-                cookies.set("login", true);
-                navigation(0)
-                
-            }
-            navigation('/')
-        
-    }, [])
+        if (data2.data.result) {
+            const date = new Date();
+            date.setMinutes(date.getMinutes() + 30);
+            cookies.set('login', true);
+            navigation(0);
+        }
+        navigation('/');
+    }, []);
 
-    return (
-        <>
-        </>
-    )
-}
+    return <></>;
+};
 
-export default KakaoLogin;
\ No newline at end of file
+export default KakaoLogin;
diff --git a/frontend/sweet-red-beans/src/components/TopBar/LogIn.js b/frontend/sweet-red-beans/src/components/TopBar/LogIn.js
index f3f7b34..371afac 100644
--- a/frontend/sweet-red-beans/src/components/TopBar/LogIn.js
+++ b/frontend/sweet-red-beans/src/components/TopBar/LogIn.js
@@ -1,150 +1,205 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from 'react';
 import Modal from '../Modals/Modal';
-import { useNavigate } from "react-router";
-import axios from "axios";
-import { useDispatch, useSelector } from "react-redux";
-import login from "../../actions/user_action";
-import { LOGIN_USER } from "../../actions/types";
-import style from "../../css/TopBar/LogIn.module.css";
-import { getCookie, setCookie } from "../../Cookie";
-import { Cookies } from "react-cookie";
-import { Link } from "react-router-dom";
-import { KAKAO_AUTH_URL, GOOGLE_AUTH_URL } from "../../url/url";
-
-const LogIn = () =>{
-  const navigation = useNavigate();
-  const dispatch = useDispatch();
-
-  const [modalOpen, setModalOpen] = useState(false);
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [loginError, setLoginError] = useState(false);
-
-  const cookies = new Cookies();
-
-  const openModal = () => {
-    setModalOpen(true);
-  };
-  const closeModal = () => {
-    setModalOpen(false);
-  };
-
-  const SignupClick = () => {
-    navigation('/signup');
-    setModalOpen(false);
-  }
-
-  const emailChange = (e) => {
-    setEmail(e.target.value);
-  }
-
-  const passwordChange = (e) => {
-    setPassword(e.target.value)
-  }
-
-  const LoginClick = (e) => {
-    e.preventDefault();
-    if (email === "" || password === ""){
-      return setLoginError(true);
-    }
-    else{
-      setLoginError(false);
-    }
-
-    const body = {
-      email: email,
-      password: password,
-      method: "일반",
+import { useNavigate } from 'react-router';
+import axios from 'axios';
+import { useDispatch, useSelector } from 'react-redux';
+import login from '../../actions/user_action';
+import { LOGIN_USER } from '../../actions/types';
+import style from '../../css/TopBar/LogIn.module.css';
+import { getCookie, setCookie } from '../../Cookie';
+import { Cookies } from 'react-cookie';
+import { Link } from 'react-router-dom';
+import { KAKAO_AUTH_URL, GOOGLE_AUTH_URL } from '../../url/url';
+
+const LogIn = () => {
+    const navigation = useNavigate();
+    const dispatch = useDispatch();
+
+    const [modalOpen, setModalOpen] = useState(false);
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [loginError, setLoginError] = useState(false);
+
+    const cookies = new Cookies();
+
+    const openModal = () => {
+        setModalOpen(true);
     };
-
-    axios.post('http://localhost:8080/signin', body, { withCredentials: true })
-    .then(response => {
-      if(!response.data.status) {
-        alert("정지된 상태입니다. 관리자에게 문의해주세요.");
+    const closeModal = () => {
         setModalOpen(false);
-      }
-      else if(response.data.result){
-        // dispatch({
-        //   type: LOGIN_USER,
-        //   user: response.data,
-        // })
-
-        const date = new Date();
-        date.setMinutes(date.getMinutes() + 30);
-        cookies.set("login", true, {expires: date});
-        cookies.set("user", {
-          authority:response.data.authority,
-          porfileImage:response.data.image_url,
-          nickname:response.data.nickname,
-        }, {expires:date});
+    };
 
+    const SignupClick = () => {
+        navigation('/signup');
         setModalOpen(false);
-        navigation(0)
-
-        
-      } else {
-        alert("이메일과 비밀번호를 확인해주세요.");
-      }
-    })
-    .catch(error => console.log(error));
-
-  }
-
-  const KakaoLoginClick = (e) => {
-    window.open(KAKAO_AUTH_URL, "_self");
-  }
-
-  const logoutClick = () => {
-    axios.post('http://localhost:8080/users/logout', {}, { withCredentials: true })
-    .then(response => {
-      if(response.data.result){
-        cookies.remove("login")
-        cookies.remove("user")
-        navigation(0)
-      } else {
-        alert("로그아웃에 실패했습니다.");
-      }
-    })
-    .catch(error => console.log(error));
-  }
-
-  const googleLoginClick = () => {
-    window.open(GOOGLE_AUTH_URL, "_self");
-  }
-
-  return (
-      <>
-      <div className={style.loginArea}>
-      {cookies.get('login') ? <button onClick={logoutClick} className={style.loginButton}>로그아웃</button> 
-      : <button onClick={openModal} className={style.loginButton}>로그인</button>}
-      </div>
-
-      <Modal open={modalOpen} close={closeModal} header="로그인">
-        <form>
-          <div className={style.emailArea}>
-          <input type="text" placeholder="example@naver.com" onChange={emailChange} value={email} className={style.inputText}/>
-          {email === "" ? <div className={style.errormessage}>*이메일을 입력해주세요</div> : null}
-          </div>
-
-          <div className={style.passwordArea}>
-          <input type="password" placeholder="********" onChange={passwordChange} value={password} className={style.inputText}/>
-          {password === "" ? <div className={style.errormessage}>*비밀번호를 입력해주세요</div> : null}
-          </div>
-          
-          <button onClick={LoginClick} className={style.innerloginButton}>로그인</button>
-          {loginError && <div className={style.errormessage}>*이메일과 비밀번호를 입력해주세요</div>}
-        </form>
-
-        <button id="signup" onClick={SignupClick} className={style.signupButton}>회원가입</button>
-        <div>
-        <button onClick={KakaoLoginClick} className={style.kakaologinButton}>카카오로 로그인</button>
-        </div>
-        <div>
-        <button onClick={googleLoginClick} className={style.googleloginButton}>구글로 로그인</button>
-        </div>
-      </Modal>
-      </>
-  );
-}
-
-export default LogIn;
\ No newline at end of file
+    };
+
+    const emailChange = (e) => {
+        setEmail(e.target.value);
+    };
+
+    const passwordChange = (e) => {
+        setPassword(e.target.value);
+    };
+
+    const LoginClick = (e) => {
+        e.preventDefault();
+        if (email === '' || password === '') {
+            return setLoginError(true);
+        } else {
+            setLoginError(false);
+        }
+
+        const body = {
+            email: email,
+            password: password,
+            method: '일반',
+        };
+
+        axios
+            .post('http://localhost:8080/signin', body, {
+                withCredentials: true,
+            })
+            .then((response) => {
+                if (!response.data.status) {
+                    alert('정지된 상태입니다. 관리자에게 문의해주세요.');
+                    setModalOpen(false);
+                } else if (response.data.result) {
+                    // dispatch({
+                    //   type: LOGIN_USER,
+                    //   user: response.data,
+                    // })
+
+                    const date = new Date();
+                    date.setMinutes(date.getMinutes() + 30);
+                    cookies.set('login', true, { expires: date });
+                    cookies.set(
+                        'user',
+                        {
+                            authority: response.data.authority,
+                            porfileImage: response.data.image_url,
+                            nickname: response.data.nickname,
+                        },
+                        { expires: date }
+                    );
+
+                    setModalOpen(false);
+                    navigation(0);
+                } else {
+                    alert('이메일과 비밀번호를 확인해주세요.');
+                }
+            })
+            .catch((error) => console.log(error));
+    };
+
+    const KakaoLoginClick = (e) => {
+        window.open(KAKAO_AUTH_URL, '_self');
+    };
+
+    const logoutClick = () => {
+        axios
+            .post(
+                'http://localhost:8080/users/logout',
+                {},
+                { withCredentials: true }
+            )
+            .then((response) => {
+                if (response.data.result) {
+                    cookies.remove('login');
+                    cookies.remove('user');
+                    navigation(0);
+                } else {
+                    alert('로그아웃에 실패했습니다.');
+                }
+            })
+            .catch((error) => console.log(error));
+    };
+
+    const googleLoginClick = () => {
+        window.open(GOOGLE_AUTH_URL, '_self');
+    };
+
+    return (
+        <>
+            <div className={style.loginArea}>
+                {cookies.get('login') ? (
+                    <button onClick={logoutClick} className={style.loginButton}>
+                        로그아웃
+                    </button>
+                ) : (
+                    <button onClick={openModal} className={style.loginButton}>
+                        로그인
+                    </button>
+                )}
+            </div>
+
+            <Modal open={modalOpen} close={closeModal} header="로그인">
+                <form>
+                    <div className={style.emailArea}>
+                        <input
+                            type="text"
+                            placeholder="example@naver.com"
+                            onChange={emailChange}
+                            value={email}
+                            className={style.inputText}
+                        />
+                        {email === '' ? (
+                            <div className={style.errormessage}>
+                                *이메일을 입력해주세요
+                            </div>
+                        ) : null}
+                    </div>
+
+                    <div className={style.passwordArea}>
+                        <input
+                            type="password"
+                            placeholder="********"
+                            onChange={passwordChange}
+                            value={password}
+                            className={style.inputText}
+                        />
+                        {password === '' ? (
+                            <div className={style.errormessage}>
+                                *비밀번호를 입력해주세요
+                            </div>
+                        ) : null}
+                    </div>
+
+                    <button
+                        onClick={LoginClick}
+                        className={style.innerloginButton}>
+                        로그인
+                    </button>
+                    {loginError && (
+                        <div className={style.errormessage}>
+                            *이메일과 비밀번호를 입력해주세요
+                        </div>
+                    )}
+                </form>
+
+                <button
+                    id="signup"
+                    onClick={SignupClick}
+                    className={style.signupButton}>
+                    회원가입
+                </button>
+                <div>
+                    <button
+                        onClick={KakaoLoginClick}
+                        className={style.kakaologinButton}>
+                        카카오로 로그인
+                    </button>
+                </div>
+                <div>
+                    <button
+                        onClick={googleLoginClick}
+                        className={style.googleloginButton}>
+                        구글로 로그인
+                    </button>
+                </div>
+            </Modal>
+        </>
+    );
+};
+
+export default LogIn;
diff --git a/frontend/sweet-red-beans/src/components/TopBar/NavigationBar.js b/frontend/sweet-red-beans/src/components/TopBar/NavigationBar.js
index cf03c07..0bbbd4a 100644
--- a/frontend/sweet-red-beans/src/components/TopBar/NavigationBar.js
+++ b/frontend/sweet-red-beans/src/components/TopBar/NavigationBar.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useReducer, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { Link } from "react-router-dom";
-import style from "../../css/TopBar/NavigationBar.module.css";
-import { useNavigate } from "react-router";
-import { Cookies } from "react-cookie";
+import React, { useEffect, useReducer, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+import style from '../../css/TopBar/NavigationBar.module.css';
+import { useNavigate } from 'react-router';
+import { Cookies } from 'react-cookie';
 
 const NavigationBar = () => {
     const cookies = new Cookies();
@@ -13,68 +13,75 @@ const NavigationBar = () => {
 
     const onMouseEnter = () => {
         setHide(false);
-    }
+    };
 
     const onMouseLeave = () => {
         setHide(true);
-    }
+    };
 
     const eventClick = () => {
         navigation('/event');
-    }
+    };
 
     const transactionClick = () => {
         navigation('/transaction');
-    }
+    };
 
     const imformationShareClick = () => {
         navigation('/informationShare');
-    }
+    };
 
     const DMClick = () => {
-        if(cookies.get("login")) {
+        if (cookies.get('login')) {
             navigation('/DM');
+        } else {
+            alert('로그인을 먼저 해주세요');
         }
-        else {
-            alert("로그인을 먼저 해주세요");
-        }
-    }
+    };
 
     const mypageClick = () => {
-        if(cookies.get("login")) {
-            const authority = cookies.get("user").authority
-            if(authority === "일반") {
+        if (cookies.get('login')) {
+            const authority = cookies.get('user').authority;
+            if (authority === '일반') {
                 navigation('/mypage/myevents');
-            }
-            else if(authority === "관리자") {
+            } else if (authority === '관리자') {
                 navigation('/adminpage');
             }
-            
+        } else {
+            alert('로그인을 먼저 해주세요');
         }
-        else {
-            alert("로그인을 먼저 해주세요");
-        }
-        
-    }
-
+    };
 
     return (
         <>
-        <nav>
-        <ul className={style.mainMenu}>
-            <li><div onClick={eventClick}>이벤트</div></li>
-            <li><div onClick={transactionClick}>대리구매</div></li>
-            <li><div onClick={imformationShareClick}>커뮤니티</div>
-                <ul className={style.subMenu}>
-                    <li><div onClick={imformationShareClick}>정보공유</div></li>
+            <nav>
+                <ul className={style.mainMenu}>
+                    <li>
+                        <div onClick={eventClick}>이벤트</div>
+                    </li>
+                    <li>
+                        <div onClick={transactionClick}>대리구매</div>
+                    </li>
+                    <li>
+                        <div onClick={imformationShareClick}>커뮤니티</div>
+                        <ul className={style.subMenu}>
+                            <li>
+                                <div onClick={imformationShareClick}>
+                                    정보공유
+                                </div>
+                            </li>
+                        </ul>
+                    </li>
+                    <li>
+                        <div onClick={DMClick}>개인메시지</div>
+                    </li>
+                    <li>
+                        <div onClick={mypageClick}>마이페이지</div>
+                    </li>
                 </ul>
-            </li>
-            <li><div onClick={DMClick}>개인메시지</div></li>
-            <li><div onClick={mypageClick}>마이페이지</div></li>
-        </ul>
-        </nav>
+            </nav>
         </>
     );
-}
+};
 
-export default NavigationBar;
\ No newline at end of file
+export default NavigationBar;
diff --git a/frontend/sweet-red-beans/src/components/TopBar/TopBar.js b/frontend/sweet-red-beans/src/components/TopBar/TopBar.js
index fcc4b81..653caa8 100644
--- a/frontend/sweet-red-beans/src/components/TopBar/TopBar.js
+++ b/frontend/sweet-red-beans/src/components/TopBar/TopBar.js
@@ -1,35 +1,33 @@
-import React, {Fragment} from "react";
-import LogIn from "./LogIn";
-import NavigationBar from "./NavigationBar";
-import {useNavigate} from "react-router-dom";
-import style from "../../css/TopBar/TopBar.module.css"
-import { getCookie } from "../../Cookie";
-import { useSelector } from "react-redux";
+import React, { Fragment } from 'react';
+import LogIn from './LogIn';
+import NavigationBar from './NavigationBar';
+import { useNavigate } from 'react-router-dom';
+import style from '../../css/TopBar/TopBar.module.css';
+import { getCookie } from '../../Cookie';
+import { useSelector } from 'react-redux';
 
 const TopBar = () => {
-
     let navigation = useNavigate();
 
     const titleClick = () => {
         navigation('/');
-    }
+    };
 
     return (
         <>
-        <div className={style.container}>
-            <div className={style.title}>
-                <button onClick={titleClick}>타이틀</button>
-            </div>
-            <div className={style.navigationBar}>
-                <NavigationBar/>
-            </div>
-            <div className={style.loginArea}>
-                <LogIn/>
+            <div className={style.container}>
+                <div className={style.title}>
+                    <button onClick={titleClick}>타이틀</button>
+                </div>
+                <div className={style.navigationBar}>
+                    <NavigationBar />
+                </div>
+                <div className={style.loginArea}>
+                    <LogIn />
+                </div>
             </div>
-        </div>
         </>
     );
-    
-}
+};
 
-export default TopBar;
\ No newline at end of file
+export default TopBar;
diff --git a/frontend/sweet-red-beans/src/components/TransactionPage/TransactionDetail.js b/frontend/sweet-red-beans/src/components/TransactionPage/TransactionDetail.js
index 149affe..b6597f9 100644
--- a/frontend/sweet-red-beans/src/components/TransactionPage/TransactionDetail.js
+++ b/frontend/sweet-red-beans/src/components/TransactionPage/TransactionDetail.js
@@ -1,22 +1,22 @@
-import React, { useEffect, useMemo, useState } from "react";
-import axios from "axios";
-import { useNavigate } from "react-router";
-import { useDispatch } from "react-redux";
-import { DM_CREATE } from "../../actions/types";
-import style from "../../css/TransactionPage/TransactionDetail.module.css";
-import Modal from "../Modals/TransactionModal";
-import Switch from "react-switch";
-import { parseDate } from "../../parseDate/parseDate";
-import user from "../../img/user.png";
+import React, { useEffect, useMemo, useState } from 'react';
+import axios from 'axios';
+import { useNavigate } from 'react-router';
+import { useDispatch } from 'react-redux';
+import { DM_CREATE } from '../../actions/types';
+import style from '../../css/TransactionPage/TransactionDetail.module.css';
+import Modal from '../Modals/TransactionModal';
+import Switch from 'react-switch';
+import { parseDate } from '../../parseDate/parseDate';
+import user from '../../img/user.png';
 
-const TransactionDetail = ({transaction}) => {
+const TransactionDetail = ({ transaction }) => {
     const dispatch = useDispatch();
     const navigation = useNavigate();
-    const [status, setStatus] = useState("");
+    const [status, setStatus] = useState('');
     const [likeStatus, setLikeStatus] = useState(false);
     const [loading, setLoading] = useState(false);
     const [modalOpen, setModalOpen] = useState(false);
-    const [reportContent, setReportContent] = useState("");
+    const [reportContent, setReportContent] = useState('');
     const [profileImage, setProfileImage] = useState(null);
     const [nickname, setNickname] = useState();
 
@@ -24,135 +24,140 @@ const TransactionDetail = ({transaction}) => {
         const body = {
             transaction_id: transaction.transaction_id,
             status: status,
-        }
-        axios.post('http://localhost:8080/transactions/change-status', body , { withCredentials: true })
-        .then(response => {
-            console.log(response.data);
-            if(response.data.result){
-                if(status==="진행중"){
-                    setStatus("마감");
-                }
-                else {
-                    setStatus("진행중");
+        };
+        axios
+            .post('http://localhost:8080/transactions/change-status', body, {
+                withCredentials: true,
+            })
+            .then((response) => {
+                console.log(response.data);
+                if (response.data.result) {
+                    if (status === '진행중') {
+                        setStatus('마감');
+                    } else {
+                        setStatus('진행중');
+                    }
                 }
-            }
-        })
-        .catch(error => console.log(error))
-    }
+            })
+            .catch((error) => console.log(error));
+    };
 
     const useConfirm = (message = null, onConfirm, onCancel) => {
-        if (!onConfirm || typeof onConfirm !== "function") {
+        if (!onConfirm || typeof onConfirm !== 'function') {
             return;
         }
-        if (onCancel && typeof onCancel !== "function") {
+        if (onCancel && typeof onCancel !== 'function') {
             return;
         }
-        
+
         const confirmAction = () => {
             if (window.confirm(message)) {
-            onConfirm();
+                onConfirm();
             } else {
-            onCancel();
+                onCancel();
             }
         };
-        
+
         return confirmAction;
     };
 
     //삭제버튼 삭제 눌렀을 때
     const deleteConfirm = () => {
-        axios.delete('http://localhost:8080/transactions',{
-        data: {
-            user_id: "1",
-            transaction_id:transaction.transaction_id,
-        },
-        withCredentials: true
-        })
-        .then(response => {
-            if(response.data.result){
-                navigation(0);
-                alert("삭제되었습니다.")
-            }
-            else {
-                alert("삭제에 실패했습니다.")
-            }
-        })
-        .catch(error => console.log(error));
-    }
+        axios
+            .delete('http://localhost:8080/transactions', {
+                data: {
+                    user_id: '1',
+                    transaction_id: transaction.transaction_id,
+                },
+                withCredentials: true,
+            })
+            .then((response) => {
+                if (response.data.result) {
+                    navigation(0);
+                    alert('삭제되었습니다.');
+                } else {
+                    alert('삭제에 실패했습니다.');
+                }
+            })
+            .catch((error) => console.log(error));
+    };
 
     //삭제 취소 버튼 눌렀을 때
-    const cancelConfirm = () => console.log("취소")
+    const cancelConfirm = () => console.log('취소');
 
     //삭제 버튼 클릭했을 때
     const deleteClick = useConfirm(
-        "삭제하시겠습니까?",
+        '삭제하시겠습니까?',
         deleteConfirm,
         cancelConfirm
     );
 
     const DMClick = () => {
-
         const body = {
-            user_id : "1",
-            transaction_id : transaction.transaction_id,
-        }
-        axios.post('http://localhost:8080/direct-message', body, { withCredentials: true })
-        .then(response => {
-            dispatch({
-                type:DM_CREATE,
-                DMCreate: response.data,
+            user_id: '1',
+            transaction_id: transaction.transaction_id,
+        };
+        axios
+            .post('http://localhost:8080/direct-message', body, {
+                withCredentials: true,
             })
-            navigation('/DM')
-            return
-        })
-        .catch(error => {
-            if(error.response.status === 401){
-                alert("로그인을 먼저 해주세요");
-            }
-        })
-
-    }
+            .then((response) => {
+                dispatch({
+                    type: DM_CREATE,
+                    DMCreate: response.data,
+                });
+                navigation('/DM');
+                return;
+            })
+            .catch((error) => {
+                if (error.response.status === 401) {
+                    alert('로그인을 먼저 해주세요');
+                }
+            });
+    };
 
     //좋아요 눌렀을 때
     const likeClick = () => {
         const body = {
             transaction_id: transaction.transaction_id,
-        }
-        axios.post('http://localhost:8080/transactions/like', body, { withCredentials: true })
-        .then(response => {
-            console.log(response.data);
-            if(response.data.result){
-                if(status){
-                    setLikeStatus(false);
+        };
+        axios
+            .post('http://localhost:8080/transactions/like', body, {
+                withCredentials: true,
+            })
+            .then((response) => {
+                console.log(response.data);
+                if (response.data.result) {
+                    if (status) {
+                        setLikeStatus(false);
+                    } else {
+                        setLikeStatus(true);
+                    }
+                } else {
+                    alert('좋아요 변경에 실패했습니다.');
                 }
-                else {
-                    setLikeStatus(true);
+            })
+            .catch((error) => {
+                if (error.response.status === 401) {
+                    alert('로그인을 먼저 해주세요');
                 }
-            }
-            else {
-                alert("좋아요 변경에 실패했습니다.")
-            }
-        })
-        .catch(error => {
-            if(error.response.status === 401){
-                alert("로그인을 먼저 해주세요");
-            }
-        });
-    }
+            });
+    };
 
     useEffect(() => {
-        setStatus(transaction.status)
+        setStatus(transaction.status);
         setLikeStatus(transaction.is_like);
-        if(transaction.user_status === "정지" || transaction.user_status === "탈퇴") {
-            setNickname("(알수없음)");
+        if (
+            transaction.user_status === '정지' ||
+            transaction.user_status === '탈퇴'
+        ) {
+            setNickname('(알수없음)');
             setProfileImage(user);
-        }
-        else {
+        } else {
             setNickname(transaction.nickname);
             setProfileImage(transaction.profile_url);
         }
-        
-    },[transaction])
+    }, [transaction]);
 
     const openModal = () => {
         setModalOpen(true);
@@ -163,140 +168,159 @@ const TransactionDetail = ({transaction}) => {
 
     const reportContentChange = (e) => {
         setReportContent(e.target.value);
-    }
+    };
 
     //신고 확인 버튼 눌렀을 때
     const reportConfirm = () => {
         const body = {
-            user_id : "1",
-            transaction_id : transaction.transaction_id,
-            report_content : reportContent,
-        }
-        axios.post('http://localhost:8080/transactions/report', body)
-        .then(response => {
-            if(response.data.result){
-                alert("신고되었습니다.")
-                setReportContent("");
-                setModalOpen(false);
-            }
-            else {
-                alert("신고에 실패했습니다.")
-            }
-        })
-        .catch(error => {
-            if(error.response.status === 401){
-                alert("로그인을 먼저 해주세요");
-            }
-        });
-    }
+            user_id: '1',
+            transaction_id: transaction.transaction_id,
+            report_content: reportContent,
+        };
+        axios
+            .post('http://localhost:8080/transactions/report', body)
+            .then((response) => {
+                if (response.data.result) {
+                    alert('신고되었습니다.');
+                    setReportContent('');
+                    setModalOpen(false);
+                } else {
+                    alert('신고에 실패했습니다.');
+                }
+            })
+            .catch((error) => {
+                if (error.response.status === 401) {
+                    alert('로그인을 먼저 해주세요');
+                }
+            });
+    };
 
     //모달창에서 신고하기 버튼 눌렀을 때
     const reportClick = (e) => {
         e.preventDefault();
-        if(reportContent === ""){
-            alert("신고 내용을 입력해주세요");
-        }
-        else {
-            if (window.confirm("정말 신고하시겠습니까?")) {
+        if (reportContent === '') {
+            alert('신고 내용을 입력해주세요');
+        } else {
+            if (window.confirm('정말 신고하시겠습니까?')) {
                 reportConfirm();
             } else {
                 cancelConfirm();
             }
         }
-    }
+    };
 
-    const statusClick = (checked) =>{
+    const statusClick = (checked) => {
         console.log(checked);
-        if(!checked){
-            serverReqStatus()
-            setStatus("마감");
-        }
-        else{
-            serverReqStatus()
-            setStatus("진행중");
+        if (!checked) {
+            serverReqStatus();
+            setStatus('마감');
+        } else {
+            serverReqStatus();
+            setStatus('진행중');
         }
-    }
+    };
 
-    return(
+    return (
         <>
-        <Modal open={modalOpen} close={closeModal} header="신고하기">
-        <form className={style.modal}>
-            <div>신고사유를 적어주세요</div>
-            <div>
-                <textarea value={reportContent} onChange={reportContentChange}></textarea>
-            </div>
-            <button onClick={reportClick}>신고하기</button>
-        </form>
-        </Modal>
-
-        <div className={style.transactionBox}>
-
-            <div className={style.profileArea}>
-                <img src={profileImage}/>
-                <div className={style.nickname}>{nickname}</div>
-                <div className={style.reliabilityArea}>{transaction.reliability}</div>
-            </div>
+            <Modal open={modalOpen} close={closeModal} header="신고하기">
+                <form className={style.modal}>
+                    <div>신고사유를 적어주세요</div>
+                    <div>
+                        <textarea
+                            value={reportContent}
+                            onChange={reportContentChange}></textarea>
+                    </div>
+                    <button onClick={reportClick}>신고하기</button>
+                </form>
+            </Modal>
 
-            <div className={style.statusArea}>
-            {
-                transaction.is_mine
-                ? 
-                // <div onClick={statusClick} className={status==='진행중'?style.proceedingButton : style.doneButton}>
-                //     <div>{status==='진행중'? "진행중" : "마감"}</div>
-                // </div>
-                <label className={style.statusButton}>
-                    <Switch
-                        onChange={statusClick}
-                        checked={status==="진행중"?true:false}
-                        onColor="#F32222"
-                        offColor="#C4C4C4"
-                        width={85}
-                        height={30}
-                        handleDiameter={22}
-                        uncheckedIcon={
-                            <div className={style.doneButton}>마감</div>
-                        }
-                        checkedIcon={
-                            <div className={style.proceedingButton}>진행중</div>
-                        }
-                    />
-                </label>
-                :
-                <div className={status === '진행중' ? style.proceeding : style.done}>
-                {status === '진행중' ? <div>진행중</div> : <div>마감</div>}
+            <div className={style.transactionBox}>
+                <div className={style.profileArea}>
+                    <img src={profileImage} />
+                    <div className={style.nickname}>{nickname}</div>
+                    <div className={style.reliabilityArea}>
+                        {transaction.reliability}
+                    </div>
                 </div>
-            }
-            </div>
-            
-            <div className={style.content}>
-                {transaction.content}
-            </div>
 
-            <div className={style.bottomArea}>
-                <div>
-                    {transaction.is_mine ? 
-                        <div className={style.deleteArea}>
-                            <button onClick={deleteClick}></button>
+                <div className={style.statusArea}>
+                    {transaction.is_mine ? (
+                        // <div onClick={statusClick} className={status==='진행중'?style.proceedingButton : style.doneButton}>
+                        //     <div>{status==='진행중'? "진행중" : "마감"}</div>
+                        // </div>
+                        <label className={style.statusButton}>
+                            <Switch
+                                onChange={statusClick}
+                                checked={status === '진행중' ? true : false}
+                                onColor="#F32222"
+                                offColor="#C4C4C4"
+                                width={85}
+                                height={30}
+                                handleDiameter={22}
+                                uncheckedIcon={
+                                    <div className={style.doneButton}>마감</div>
+                                }
+                                checkedIcon={
+                                    <div className={style.proceedingButton}>
+                                        진행중
+                                    </div>
+                                }
+                            />
+                        </label>
+                    ) : (
+                        <div
+                            className={
+                                status === '진행중'
+                                    ? style.proceeding
+                                    : style.done
+                            }>
+                            {status === '진행중' ? (
+                                <div>진행중</div>
+                            ) : (
+                                <div>마감</div>
+                            )}
                         </div>
-                    : 
-                    <div className={style.notMineButtonArea}>
-                        <button onClick={openModal}></button>
-                        {status === '진행중' ? <button onClick={DMClick}></button> :
-                        <button disabled={true}></button>}
-                        {likeStatus? <button onClick={likeClick} className={style.likeOnButton}></button> : <button onClick={likeClick} className={style.likeOffButton}></button>}
-                    </div>}
+                    )}
                 </div>
 
-                <div className={style.date}>
-                {parseDate(transaction.written_date)}
-                </div>
-            </div>
+                <div className={style.content}>{transaction.content}</div>
 
-        </div>
+                <div className={style.bottomArea}>
+                    <div>
+                        {transaction.is_mine ? (
+                            <div className={style.deleteArea}>
+                                <button onClick={deleteClick}></button>
+                            </div>
+                        ) : (
+                            <div className={style.notMineButtonArea}>
+                                <button onClick={openModal}></button>
+                                {status === '진행중' ? (
+                                    <button onClick={DMClick}></button>
+                                ) : (
+                                    <button disabled={true}></button>
+                                )}
+                                {likeStatus ? (
+                                    <button
+                                        onClick={likeClick}
+                                        className={style.likeOnButton}></button>
+                                ) : (
+                                    <button
+                                        onClick={likeClick}
+                                        className={
+                                            style.likeOffButton
+                                        }></button>
+                                )}
+                            </div>
+                        )}
+                    </div>
 
-        
+                    <div className={style.date}>
+                        {parseDate(transaction.written_date)}
+                    </div>
+                </div>
+            </div>
         </>
     );
-}
+};
 
-export default TransactionDetail;
\ No newline at end of file
+export default TransactionDetail;
diff --git a/frontend/sweet-red-beans/src/components/TransactionPage/TransactionPage.js b/frontend/sweet-red-beans/src/components/TransactionPage/TransactionPage.js
index b351416..34bf8a2 100644
--- a/frontend/sweet-red-beans/src/components/TransactionPage/TransactionPage.js
+++ b/frontend/sweet-red-beans/src/components/TransactionPage/TransactionPage.js
@@ -1,13 +1,13 @@
-import React, { useState, useEffect, useMemo, useRef } from "react";
-import Transactions from "./Transactions";
-import style from "../../css/TransactionPage/TransactionPage.module.css";
-import axios from "axios";
-import TransactionWriteModal from "../Modals/TransactionModal";
-import { getCookie } from "../../Cookie";
-import { useNavigate } from "react-router";
-import { useSelector } from "react-redux";
-import userImage from "../../img/user.png";
-import { Cookies } from "react-cookie";
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import Transactions from './Transactions';
+import style from '../../css/TransactionPage/TransactionPage.module.css';
+import axios from 'axios';
+import TransactionWriteModal from '../Modals/TransactionModal';
+import { getCookie } from '../../Cookie';
+import { useNavigate } from 'react-router';
+import { useSelector } from 'react-redux';
+import userImage from '../../img/user.png';
+import { Cookies } from 'react-cookie';
 
 const TransactionPage = () => {
     const cookies = new Cookies();
@@ -16,310 +16,358 @@ const TransactionPage = () => {
     const [modalOpen, setModalOpen] = useState(false);
     const [transactions, setTransactions] = useState([]);
     const [transactionIsHere, setTransactionIsHere] = useState(false);
-    const [search, setSearch] = useState("");
+    const [search, setSearch] = useState('');
     const [searchWords, setSearchWords] = useState([]);
     //처음엔 전체로 보여줌, true이면 진행 중만 보여줌
     const [isProceed, setIsProceed] = useState(false);
     //검색 필터
-    const [searchSort, setSearchSort] = useState("글내용");
+    const [searchSort, setSearchSort] = useState('글내용');
     // 스크롤값을 저장하기 위한 상태
     const [ScrollY, setScrollY] = useState(0);
     const [BtnStatus, setBtnStatus] = useState(false);
     //내용
-    const [content, setContent] = useState("");
+    const [content, setContent] = useState('');
 
     const [start, setStart] = useState(0);
     const [end, setEnd] = useState(30);
 
     //내 프로필
-    const [nickname, setNickname] = useState("");
-    const [profileImage, setProfileImage] = useState("");
+    const [nickname, setNickname] = useState('');
+    const [profileImage, setProfileImage] = useState('');
 
     const [fetching, setFetching] = useState(false);
 
     const serverReq = () => {
-      axios.get('http://localhost:8080/transactions/search',{ 
-          withCredentials: true,
-          params: {
-                    user_id: "1",
+        axios
+            .get('http://localhost:8080/transactions/search', {
+                withCredentials: true,
+                params: {
+                    user_id: '1',
                     is_proceed: isProceed,
                     search_word: search,
-                    sort_criteria : "최신순",
-                    search_criteria : searchSort,
+                    sort_criteria: '최신순',
+                    search_criteria: searchSort,
                     start: 0,
                     end: 29,
-                  }
-        }
-      )
-      .then(response => {
-        setTransactions(response.data)
-        setStart(0);
-        setEnd(29);
-      })
-      .catch(error => console.log(error));
-  }
+                },
+            })
+            .then((response) => {
+                setTransactions(response.data);
+                setStart(0);
+                setEnd(29);
+            })
+            .catch((error) => console.log(error));
+    };
 
     const searchChange = (e) => {
         setSearch(e.target.value);
-    }
+    };
 
     //검색버튼 눌렀을 때
     const searchClick = () => {
         setSearchWords([...searchWords, search]);
-    }
+    };
 
     //전체보기 눌렀을 때
     const allClick = () => {
         setIsProceed(false);
-        console.log("전체 보기");
-    }
+        console.log('전체 보기');
+    };
 
     //진행중만 보기 눌렀을 때
     const proceedClick = () => {
         setIsProceed(true);
-        console.log("진행 중만 보기");
-    }
+        console.log('진행 중만 보기');
+    };
 
     //글내용 or 작성자 변경했을 때
     const searchSortChange = (e) => {
         setSearchSort(e.target.value);
-    }
+    };
 
     //내용 변경됐을 때
     const contentChange = (e) => {
         setContent(e.target.value);
-    }
+    };
 
     //글쓰기 버튼 클릭했을 때
     const writeClick = () => {
-      if(content === "") {
-        return
-      }
-      else {
-        const body = {
-          content: content,
-        }
-  
-        axios.post('http://localhost:8080/transactions/write', body, { withCredentials: true })
-        .then(response => {
-          if(response.data){
-            axios.get('http://localhost:8080/transactions/search',{ 
-            withCredentials: true,
-            params: {
-                      is_proceed: isProceed,
-                      search_word: search,
-                      sort_criteria : "최신순",
-                      search_criteria : searchSort,
-                      start: 0,
-                      end: 30,
+        if (content === '') {
+            return;
+        } else {
+            const body = {
+                content: content,
+            };
+
+            axios
+                .post('http://localhost:8080/transactions/write', body, {
+                    withCredentials: true,
+                })
+                .then((response) => {
+                    if (response.data) {
+                        axios
+                            .get('http://localhost:8080/transactions/search', {
+                                withCredentials: true,
+                                params: {
+                                    is_proceed: isProceed,
+                                    search_word: search,
+                                    sort_criteria: '최신순',
+                                    search_criteria: searchSort,
+                                    start: 0,
+                                    end: 30,
+                                },
+                            })
+                            .then((response) => {
+                                setTransactions(response.data);
+                            })
+                            .catch((error) => {});
+                    } else {
+                        alert('글 작성에 실패했습니다.');
                     }
-          })
-          .then(response => {
-            setTransactions(response.data);
-          })
-          .catch(error => {
-            
-          });
-          }
-
-          else {
-            alert("글 작성에 실패했습니다.");
-          }
-        })
-        .catch(error => {
-          if(error.response.status === 401){
-            alert("로그인을 먼저 해주세요");
-          }
-        });
-        
-        setContent("");
-        setModalOpen(false)
-      }
-    }
+                })
+                .catch((error) => {
+                    if (error.response.status === 401) {
+                        alert('로그인을 먼저 해주세요');
+                    }
+                });
+
+            setContent('');
+            setModalOpen(false);
+        }
+    };
 
     const openModal = () => {
-      setModalOpen(true);
+        setModalOpen(true);
     };
     const closeModal = () => {
-      setModalOpen(false);
+        setModalOpen(false);
     };
 
     const handleFollow = () => {
-      setScrollY(window.pageYOffset);
-      if(ScrollY > 100) {
-        // 100 이상이면 버튼이 보이게
-        setBtnStatus(true);
-      } else {
-        // 100 이하면 버튼이 사라지게
-        setBtnStatus(false);
-      }
-    }
-
-    const handleTop = () => {  // 클릭하면 스크롤이 위로 올라가는 함수
-      window.scrollTo({
-          top: 0,
-          behavior: "smooth"
-      });
-      setScrollY(0);  // ScrollY 의 값을 초기화
-      setBtnStatus(false); // BtnStatus의 값을 false로 바꿈 => 버튼 숨김
-    }
+        setScrollY(window.pageYOffset);
+        if (ScrollY > 100) {
+            // 100 이상이면 버튼이 보이게
+            setBtnStatus(true);
+        } else {
+            // 100 이하면 버튼이 사라지게
+            setBtnStatus(false);
+        }
+    };
+
+    const handleTop = () => {
+        // 클릭하면 스크롤이 위로 올라가는 함수
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+        });
+        setScrollY(0); // ScrollY 의 값을 초기화
+        setBtnStatus(false); // BtnStatus의 값을 false로 바꿈 => 버튼 숨김
+    };
 
     const fetchMoreTransactions = () => {
-      if(transactions.length !== 0) {
-        axios.get('http://localhost:8080/transactions/search',{ 
-          withCredentials: true,
-          params: {
-                    user_id: "1",
-                    is_proceed: isProceed,
-                    search_word: search,
-                    sort_criteria : "최신순",
-                    search_criteria : searchSort,
-                    start: start+30,
-                    end: end+30,
-                  }
-        })
-          .then(response => {
-            const more = response.data;
-            const mergeData = transactions.concat(...more);
-            setTransactions(mergeData);
-            setStart(start+30);
-            setEnd(end+30);
-          })
-          .catch(error => console.log(error));
-      }
-
-
-      console.log("더 붙이기");
-    }
+        if (transactions.length !== 0) {
+            axios
+                .get('http://localhost:8080/transactions/search', {
+                    withCredentials: true,
+                    params: {
+                        user_id: '1',
+                        is_proceed: isProceed,
+                        search_word: search,
+                        sort_criteria: '최신순',
+                        search_criteria: searchSort,
+                        start: start + 30,
+                        end: end + 30,
+                    },
+                })
+                .then((response) => {
+                    const more = response.data;
+                    const mergeData = transactions.concat(...more);
+                    setTransactions(mergeData);
+                    setStart(start + 30);
+                    setEnd(end + 30);
+                })
+                .catch((error) => console.log(error));
+        }
 
-    useEffect(() => {
-      //console.log("ScrollY is ", ScrollY); // ScrollY가 변화할때마다 값을 콘솔에 출력
+        console.log('더 붙이기');
+    };
 
-      //ScrollY === document.documentElement.scrollTop
-      if (ScrollY + document.documentElement.clientHeight >= document.documentElement.scrollHeight){
-        if(transactions.length >= 29){
-          fetchMoreTransactions();
+    useEffect(() => {
+        //console.log("ScrollY is ", ScrollY); // ScrollY가 변화할때마다 값을 콘솔에 출력
+
+        //ScrollY === document.documentElement.scrollTop
+        if (
+            ScrollY + document.documentElement.clientHeight >=
+            document.documentElement.scrollHeight
+        ) {
+            if (transactions.length >= 29) {
+                fetchMoreTransactions();
+            }
         }
-      }
-    }, [ScrollY])
-  
+    }, [ScrollY]);
+
     useEffect(() => {
-      const watch = () => {
-        window.addEventListener('scroll', handleFollow);
-      }
-      watch(); // addEventListener 함수를 실행
-      return () => {
-        window.removeEventListener('scroll', handleFollow); // addEventListener 함수를 삭제
-      }
-    })
+        const watch = () => {
+            window.addEventListener('scroll', handleFollow);
+        };
+        watch(); // addEventListener 함수를 실행
+        return () => {
+            window.removeEventListener('scroll', handleFollow); // addEventListener 함수를 삭제
+        };
+    });
 
     //한 번만 실행
-    useEffect(()=>{
-      axios.get('http://localhost:8080/transactions/search',{ 
-          withCredentials: true,
-          params: {
-                  is_proceed: isProceed,
-                  search_word: search,
-                  sort_criteria : "최신순",
-                  search_criteria : searchSort,
-                  start:start,
-                  end:end,
-                }
-        })
-        .then(response => {
-          setTransactions(response.data);
-        })
-        .catch(error => console.log(error));
-      
+    useEffect(() => {
+        axios
+            .get('http://localhost:8080/transactions/search', {
+                withCredentials: true,
+                params: {
+                    is_proceed: isProceed,
+                    search_word: search,
+                    sort_criteria: '최신순',
+                    search_criteria: searchSort,
+                    start: start,
+                    end: end,
+                },
+            })
+            .then((response) => {
+                setTransactions(response.data);
+            })
+            .catch((error) => console.log(error));
+
         //내 프로필 조회
-        if(cookies.get("user")){
-          setNickname(cookies.get("user").nickname);
-          setProfileImage(cookies.get("user").porfileImage);
-        }
-        else {
-          setNickname("익명");
-          setProfileImage(userImage);
+        if (cookies.get('user')) {
+            setNickname(cookies.get('user').nickname);
+            setProfileImage(cookies.get('user').porfileImage);
+        } else {
+            setNickname('익명');
+            setProfileImage(userImage);
         }
+    }, []);
 
-    }, [])
-
-    useEffect(()=>{
-      setTransactionIsHere(true);
-    }, [transactions])
+    useEffect(() => {
+        setTransactionIsHere(true);
+    }, [transactions]);
 
     useEffect(() => {
-      serverReq();
-      console.log(isProceed);
+        serverReq();
+        console.log(isProceed);
     }, [isProceed]);
 
     useEffect(() => {
-      serverReq();
-      console.log(searchWords, searchSort);
-    }, [searchWords])
+        serverReq();
+        console.log(searchWords, searchSort);
+    }, [searchWords]);
 
     return (
         <>
-        <div className={style.wrap}>
-        <div className={style.writeBox}>
-          <div className={style.profileArea}>
-            <img src={profileImage} className={style.profileImage}/>
-            <div className={style.nickname}>{nickname}</div>
-          </div>
-
-          <div className={style.writeButtonArea}>
-            <button onClick={writeClick}>작성하기</button>
-          </div>
-          <textarea value={content} onChange={contentChange}></textarea>
-        </div>
-
-        <div className={style.transactionsBox}>
-          <div className={style.topBox}>
-            <div className={style.proceedfilter}>
-                <button onClick={allClick} className={isProceed?style.notSelected:style.selected}>전체</button>
-                <button onClick={proceedClick} className={!isProceed?style.notSelected:style.selected}>진행중</button>
-            </div>
-            <div className={style.filter}>
-              <select onChange={searchSortChange} value={searchSort}>
-                  <option value="글내용">내용</option>
-                  <option value="작성자">작성자</option>
-              </select>
-              <span className={style.filterArrow}></span>
-            </div>
-            <div className={style.search}>
-                <input type="text" placeholder="검색" value={search} onChange={searchChange}/>
-                <div className={style.underline}></div>
-                <button onClick={searchClick}></button>
+            <div className={style.wrap}>
+                <div className={style.writeBox}>
+                    <div className={style.profileArea}>
+                        <img
+                            src={profileImage}
+                            className={style.profileImage}
+                        />
+                        <div className={style.nickname}>{nickname}</div>
+                    </div>
+
+                    <div className={style.writeButtonArea}>
+                        <button onClick={writeClick}>작성하기</button>
+                    </div>
+                    <textarea
+                        value={content}
+                        onChange={contentChange}></textarea>
+                </div>
+
+                <div className={style.transactionsBox}>
+                    <div className={style.topBox}>
+                        <div className={style.proceedfilter}>
+                            <button
+                                onClick={allClick}
+                                className={
+                                    isProceed
+                                        ? style.notSelected
+                                        : style.selected
+                                }>
+                                전체
+                            </button>
+                            <button
+                                onClick={proceedClick}
+                                className={
+                                    !isProceed
+                                        ? style.notSelected
+                                        : style.selected
+                                }>
+                                진행중
+                            </button>
+                        </div>
+                        <div className={style.filter}>
+                            <select
+                                onChange={searchSortChange}
+                                value={searchSort}>
+                                <option value="글내용">내용</option>
+                                <option value="작성자">작성자</option>
+                            </select>
+                            <span className={style.filterArrow}></span>
+                        </div>
+                        <div className={style.search}>
+                            <input
+                                type="text"
+                                placeholder="검색"
+                                value={search}
+                                onChange={searchChange}
+                            />
+                            <div className={style.underline}></div>
+                            <button onClick={searchClick}></button>
+                        </div>
+                    </div>
+
+                    <Transactions transactions={transactions} />
+
+                    <button
+                        className={
+                            BtnStatus
+                                ? [style.topBtn, style.active].join(' ')
+                                : style.topBtn
+                        }
+                        onClick={handleTop}>
+                        TOP
+                    </button>
+
+                    <button
+                        className={
+                            BtnStatus
+                                ? [style.writeBtn, style.active].join(' ')
+                                : style.writeBtn
+                        }
+                        onClick={openModal}></button>
+                </div>
+
+                <TransactionWriteModal
+                    open={modalOpen}
+                    close={closeModal}
+                    header="글 작성하기">
+                    <form className={style.modal}>
+                        <div>
+                            <img
+                                src={profileImage}
+                                className={style.profileImage}
+                            />
+                            <div className={style.nickname}>{nickname}</div>
+                        </div>
+                        <div>
+                            <textarea
+                                value={content}
+                                onChange={contentChange}></textarea>
+                        </div>
+                        <button onClick={writeClick}>글 쓰기</button>
+                    </form>
+                </TransactionWriteModal>
+
+                <div></div>
             </div>
-          </div>
-          
-          <Transactions transactions={transactions}/>
-        
-          <button className={BtnStatus ? [style.topBtn, style.active].join(" ") : style.topBtn} onClick={handleTop}>TOP</button>
-
-          <button className={BtnStatus ? [style.writeBtn, style.active].join(" ") : style.writeBtn} onClick={openModal}></button>
-        </div>
-        
-        <TransactionWriteModal open={modalOpen} close={closeModal} header="글 작성하기">
-          <form className={style.modal}>
-              <div>
-                <img src={profileImage} className={style.profileImage}/>
-                <div className={style.nickname}>{nickname}</div>
-              </div>
-              <div>
-                  <textarea value={content} onChange={contentChange}></textarea>
-              </div>
-              <button onClick={writeClick}>글 쓰기</button>
-          </form>
-        </TransactionWriteModal>
-
-        <div>
-        
-        </div>
-
-        </div>
-        
         </>
     );
-}
+};
 
-export default TransactionPage;
\ No newline at end of file
+export default TransactionPage;
diff --git a/frontend/sweet-red-beans/src/components/TransactionPage/Transactions.js b/frontend/sweet-red-beans/src/components/TransactionPage/Transactions.js
index 6ac2633..55fe65c 100644
--- a/frontend/sweet-red-beans/src/components/TransactionPage/Transactions.js
+++ b/frontend/sweet-red-beans/src/components/TransactionPage/Transactions.js
@@ -1,22 +1,22 @@
-import React, { useEffect, useRef, useCallback, useState } from "react";
-import { useNavigate } from "react-router";
-import TransactionDetail from "./TransactionDetail";
+import React, { useEffect, useRef, useCallback, useState } from 'react';
+import { useNavigate } from 'react-router';
+import TransactionDetail from './TransactionDetail';
 
-const Transactions = ({transactions}) => {
+const Transactions = ({ transactions }) => {
     const navigation = useNavigate();
-    useEffect(()=>{
+    useEffect(() => {
         console.log(transactions);
+    }, [transactions]);
 
-    }, [transactions])
-    
-    return(
+    return (
         <>
-
-        {
-        transactions.map((item, index) => <div key={index}><TransactionDetail transaction={item}/></div>)
-        }
+            {transactions.map((item, index) => (
+                <div key={index}>
+                    <TransactionDetail transaction={item} />
+                </div>
+            ))}
         </>
     );
-}
+};
 
-export default Transactions;
\ No newline at end of file
+export default Transactions;
diff --git a/frontend/sweet-red-beans/src/css/App/App.module.css b/frontend/sweet-red-beans/src/css/App/App.module.css
index 9745ae9..70b8689 100644
--- a/frontend/sweet-red-beans/src/css/App/App.module.css
+++ b/frontend/sweet-red-beans/src/css/App/App.module.css
@@ -1,61 +1,65 @@
 .App {
-  text-align: center;
-  padding: 0px;
-  min-width: 1080px;
-  min-height: 1300px;
-  background-color: #F9F2EC;
-  position: relative;
-  padding-bottom: 250px;
+    text-align: center;
+    padding: 0px;
+    min-width: 1080px;
+    min-height: 1300px;
+    background-color: #f9f2ec;
+    position: relative;
+    padding-bottom: 250px;
 }
 
 .App button {
-  font-family: 'ROKAFSansBold';
+    font-family: 'ROKAFSansBold';
 }
 
-.App .search, .App select, .App option, .App textarea{
-  font-family: 'Pretendard-Regular';
+.App .search input,
+.App select,
+.App option,
+.App textarea {
+    font-family: 'Pretendard-Regular';
 }
 
-.App::-webkit-scrollbar{
-  width: 15px;
+.App::-webkit-scrollbar {
+    width: 15px;
 }
 
-.App::-webkit-scrollbar-thumb{
-  width: 15px;
-  background-color: #C4C4C4;
-  border-radius: 20px;
-  background-clip: padding-box;
-  border: 4px solid transparent;
-
+.App::-webkit-scrollbar-thumb {
+    width: 15px;
+    background-color: #c4c4c4;
+    border-radius: 20px;
+    background-clip: padding-box;
+    border: 4px solid transparent;
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
 }
 
 .footer {
-  position: absolute;
-  bottom: 0px;
-  width: 100%;
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
 }
 
 @font-face {
-  font-family: 'ROKAFSansBold';
-  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts2201-3@1.0/ROKAFSansBold.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
+    font-family: 'ROKAFSansBold';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts2201-3@1.0/ROKAFSansBold.woff')
+        format('woff');
+    font-weight: normal;
+    font-style: normal;
 }
 
 @font-face {
-  font-family: 'Pretendard-Regular';
-  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
-  font-weight: 400;
-  font-style: normal;
-}
\ No newline at end of file
+    font-family: 'Pretendard-Regular';
+    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff')
+        format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
diff --git a/frontend/sweet-red-beans/src/css/EventPage/EventPage.module.css b/frontend/sweet-red-beans/src/css/EventPage/EventPage.module.css
index 007d8dd..f283bb1 100644
--- a/frontend/sweet-red-beans/src/css/EventPage/EventPage.module.css
+++ b/frontend/sweet-red-beans/src/css/EventPage/EventPage.module.css
@@ -3,107 +3,108 @@
     background-color: white;
     width: 1000px;
     min-height: 1400px;
-    margin : 0 auto;
+    margin: 0 auto;
     border-radius: 20px;
-    border: 1px solid #C4C4C4;
+    border: 1px solid #c4c4c4;
     box-sizing: border-box;
     padding: 30px;
     margin-top: 50px;
 }
 
 .topBar {
-  text-align: right;
-  margin-right: 20px;
-  margin-bottom: 30px;
+    text-align: right;
+    margin-right: 20px;
+    margin-bottom: 30px;
 }
 
 .datefilter {
-  display: inline-block;
-  vertical-align: bottom;
+    display: inline-block;
+    vertical-align: bottom;
 }
 
 .filter {
-  display: inline-block;
-  vertical-align: bottom;
-  margin-left: 20px;
+    display: inline-block;
+    vertical-align: bottom;
+    margin-left: 20px;
 }
 
-.selected, .notSelected {
-  cursor: pointer;
-  background-color: transparent;
-  border: none;
-  font-size: 14px;
-  margin-left: 5px;
-  transition: transform 200ms ease;
+.selected,
+.notSelected {
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+    font-size: 14px;
+    margin-left: 5px;
+    transition: transform 200ms ease;
 }
 
 .notSelected:hover {
-  transform: scale(1.2);
+    transform: scale(1.2);
 }
 
-.selected{
-  cursor:default;
-  font-size: 18px;
-  color: #f23333;
+.selected {
+    cursor: default;
+    font-size: 18px;
+    color: #f23333;
 }
 .selected::before {
-  display: inline-block;
-  margin-right: 5px;
-  content: "";
-  width: 15px;
-  height: 15px;
-  background: url("../../img/check.png");
-  background-repeat: no-repeat;
-  background-size: 100%;
+    display: inline-block;
+    margin-right: 5px;
+    content: '';
+    width: 15px;
+    height: 15px;
+    background: url('../../img/check.png');
+    background-repeat: no-repeat;
+    background-size: 100%;
 }
 
-.cinemafilter{
-  display: inline-block;
-  position: relative;
-  width: 100px;
-  height: 35px;
-  border-bottom: 3px solid #C4C4C4;
-  margin-left: 30px;
+.cinemafilter {
+    display: inline-block;
+    position: relative;
+    width: 100px;
+    height: 35px;
+    border-bottom: 3px solid #c4c4c4;
+    margin-left: 30px;
 }
 
 .cinemafilter > select {
-  font-size: 14px;
-  cursor: pointer;
-  width: inherit;
-  height: inherit;
-  background: transparent;
-  border: 0 none;
-  outline: 0 none;
-  padding: 0 8px;
-  position: relative;
-  z-index: 3;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
+    font-size: 14px;
+    cursor: pointer;
+    width: inherit;
+    height: inherit;
+    background: transparent;
+    border: 0 none;
+    outline: 0 none;
+    padding: 0 8px;
+    position: relative;
+    z-index: 3;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
 }
 
 .cinemafilter > select > option {
-  color: #5a5a5a;
-  padding: 10px 0px 10px 0px;
-  font-size: 14px;
+    color: #5a5a5a;
+    padding: 10px 0px 10px 0px;
+    font-size: 14px;
 }
 
 .filterArrow {
-  position: absolute; 
-  bottom: 7px; 
-  right: 0; 
-  z-index: 1; 
-  width: 20px; 
-  height: 20px;
-  transition: transform 300ms ease-in-out;
-  background: url("../../img/down-arrow.png");
-  background-repeat: no-repeat;
-  background-size: 70%;
-  background-position: 50% 50%;
+    position: absolute;
+    bottom: 7px;
+    right: 0;
+    z-index: 1;
+    width: 20px;
+    height: 20px;
+    transition: transform 300ms ease-in-out;
+    background: url('../../img/down-arrow.png');
+    background-repeat: no-repeat;
+    background-size: 70%;
+    background-position: 50% 50%;
 }
 
-.cinemafilter > select:focus + .filterArrow{
-  transform: rotate(180deg);
+.cinemafilter > select:focus + .filterArrow {
+    transform: rotate(180deg);
 }
 
 .search {
@@ -113,54 +114,54 @@
     width: 200px;
     height: 45px;
     margin-left: 30px;
-    border-bottom: 3px solid #C4C4C4;
+    border-bottom: 3px solid #c4c4c4;
     vertical-align: bottom;
     right: 0px;
     bottom: 0px;
-  }
-  
-  .search input {
+}
+
+.search input {
     position: absolute;
     bottom: 0px;
-    left:0px;
+    left: 0px;
     width: 170px;
     height: 35px;
     box-sizing: border-box;
     border: none;
     padding: 10px;
     font-size: 14px;
-  
+    font-family: 'Pretendard-Regular';
     transition: border-bottom 200ms ease;
-  }
-  
-  .search input::placeholder {
-    color: #C4C4C4;
-  }
-  
-  .search input:focus {
+}
+
+.search input::placeholder {
+    color: #c4c4c4;
+}
+
+.search input:focus {
     outline: none;
-  }
-  
-  .underline {
+}
+
+.underline {
     position: absolute;
     width: 0px;
     height: 3px;
     background-color: #f23333;
     bottom: -3px;
     transition: width 300ms ease;
-  }
-  .search input:focus + .underline {
+}
+.search input:focus + .underline {
     width: 200px;
-  }
-  
-  .search button {
+}
+
+.search button {
     cursor: pointer;
     position: absolute;
-    top: 0; 
+    top: 0;
     right: 0;
     transform: translate(-0%, 50%);
     z-index: 3;
-    width: 25px; 
+    width: 25px;
     height: 25px;
     display: flex;
     background: url('../../img/search.png');
@@ -168,4 +169,4 @@
     border: 0 none;
     outline: 0 none;
     background-color: white;
-  }
\ No newline at end of file
+}
diff --git a/frontend/sweet-red-beans/src/css/InformationSharePage/InformationSharePage.module.css b/frontend/sweet-red-beans/src/css/InformationSharePage/InformationSharePage.module.css
index f95d0d0..dec688d 100644
--- a/frontend/sweet-red-beans/src/css/InformationSharePage/InformationSharePage.module.css
+++ b/frontend/sweet-red-beans/src/css/InformationSharePage/InformationSharePage.module.css
@@ -2,9 +2,9 @@
     position: relative;
     background-color: white;
     width: 1000px;
-    margin : 0 auto;
+    margin: 0 auto;
     border-radius: 20px;
-    border: 1px solid #C4C4C4;
+    border: 1px solid #c4c4c4;
     box-sizing: border-box;
     padding: 30px;
     margin-top: 50px;
@@ -16,15 +16,15 @@
     margin-bottom: 45px;
 }
 
-.filter{
+.filter {
     display: inline-block;
     position: relative;
     width: 100px;
     height: 35px;
-    border-bottom: 3px solid #C4C4C4;
+    border-bottom: 3px solid #c4c4c4;
     margin-left: 30px;
     text-align: left;
-  }
+}
 
 .filter > select {
     font-size: 14px;
@@ -40,33 +40,32 @@
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
-    overflow:hidden;
-    text-overflow: ellipsis; 
-    white-space:nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
-
 .filter > select > option {
     color: #5a5a5a;
     padding: 10px 0px 10px 0px;
     font-size: 14px;
 }
-  
+
 .filterArrow {
-    position: absolute; 
-    bottom: 7px; 
-    right: 0; 
-    z-index: 1; 
-    width: 20px; 
+    position: absolute;
+    bottom: 7px;
+    right: 0;
+    z-index: 1;
+    width: 20px;
     height: 20px;
     transition: transform 300ms ease-in-out;
-    background: url("../../img/down-arrow.png");
+    background: url('../../img/down-arrow.png');
     background-repeat: no-repeat;
     background-size: 70%;
     background-position: 50% 50%;
 }
-  
-.filter > select:focus + .filterArrow{
+
+.filter > select:focus + .filterArrow {
     transform: rotate(180deg);
 }
 
@@ -82,7 +81,6 @@
     width: 140px;
 }
 
-
 .search {
     display: inline-block;
     position: relative;
@@ -90,7 +88,7 @@
     width: 200px;
     height: 45px;
     margin-left: 20px;
-    border-bottom: 3px solid #C4C4C4;
+    border-bottom: 3px solid #c4c4c4;
     vertical-align: bottom;
 }
 
@@ -98,18 +96,18 @@
     font-size: 14px;
     position: absolute;
     bottom: 0px;
-    left:0px;
+    left: 0px;
     width: 170px;
     height: 35px;
     box-sizing: border-box;
     border: none;
+    font-family: 'Pretendard-Regular';
     padding: 10px;
-
     transition: border-bottom 200ms ease;
 }
 
 .search input::placeholder {
-    color: #C4C4C4;
+    color: #c4c4c4;
 }
 
 .search input:focus {
@@ -131,11 +129,11 @@
 .search button {
     cursor: pointer;
     position: absolute;
-    top: 0; 
+    top: 0;
     right: 0;
     transform: translate(-0%, 50%);
     z-index: 3;
-    width: 25px; 
+    width: 25px;
     height: 25px;
     display: flex;
     background: url('../../img/search.png');
@@ -166,4 +164,4 @@
     height: 30px;
     background-color: #5a5a5a;
     background-size: 30px 30px;
-} */
\ No newline at end of file
+} */
diff --git a/frontend/sweet-red-beans/src/css/TopBar/NavigationBar.module.css b/frontend/sweet-red-beans/src/css/TopBar/NavigationBar.module.css
index 3297f62..f43addc 100644
--- a/frontend/sweet-red-beans/src/css/TopBar/NavigationBar.module.css
+++ b/frontend/sweet-red-beans/src/css/TopBar/NavigationBar.module.css
@@ -1,45 +1,3 @@
-/* .topBar{
-    position: relative;
-    margin-top:10px;
-    margin-bottom: 10px;
-}
-
-.topBarButton {
-    font-size: 15px;
-    color:cornflowerblue;
-    margin-right: 90px;
-    border-style: none;
-    width: 94px;
-    height: 66px;
-    font-family: '어그로';
-}
-
-.topBarButton:hover {
-    font-size: 15px;
-    color:#FFA0AC;
-    margin-right: 90px;
-    border-style: none;
-    font-family: '어그로';
-    width: 94px;
-    height: 66px;
-}
-
-.bottomCategory {
-    display: none;
-}
-
-.bottomCategory:hover { 
-    color: white;
- }
-
- .topBar:hover .bottomCategory {
-     display: block;
- }
-
-@font-face {
-    font-family: '어그로';
-    src: url('../fonts/SB\ 어그로\ B.ttf');
-} */
 nav {
     width: 100%;
     display: flex;
@@ -48,7 +6,8 @@ nav {
     font-family: 'ROKAFSansBold';
 }
 
-ul, li {
+ul,
+li {
     margin: 0;
     padding: 0;
     list-style: none;
@@ -67,11 +26,11 @@ ul, li {
     text-decoration: none;
     letter-spacing: 0.05em;
     display: inline-block;
-    padding: 10px 20px;
+    padding: 5px 20px;
 }
 
 .mainMenu > li > div:hover {
-    color: #F23333;
+    color: #f23333;
 }
 
 .mainMenu > li > div::after {
@@ -79,16 +38,16 @@ ul, li {
     left: 50%;
     transform: translate(-50%, 0);
     bottom: 0px;
-    content: "";
+    content: '';
     width: 0px;
     height: 4px;
-    background-color: #F23333;
+    background-color: #f23333;
 }
 
 .mainMenu > li > div:hover::after {
-    content: "";
+    content: '';
     width: 100%;
-    transition: width 300ms ease
+    transition: width 300ms ease;
 }
 
 .subMenu {
@@ -103,7 +62,7 @@ ul, li {
     padding: 10px 10px;
 }
 
-.subMenu > li >  div {
+.subMenu > li > div {
     font-size: 14px;
     color: black;
     text-decoration: none;
@@ -116,22 +75,21 @@ ul, li {
 }
 
 .mainMenu > li:hover .subMenu > li > div {
-
     animation: slide linear 0.3s;
 }
 
 @keyframes slide {
-    0%{
+    0% {
         color: transparent;
         height: 0;
     }
-    100%{
+    100% {
         color: black;
         height: 100%;
     }
 }
 
-.subMenu > li >  div:hover {
+.subMenu > li > div:hover {
     cursor: pointer;
-    color: #F23333;
-}
\ No newline at end of file
+    color: #f23333;
+}
diff --git a/frontend/sweet-red-beans/src/css/TopBar/TopBar.module.css b/frontend/sweet-red-beans/src/css/TopBar/TopBar.module.css
index eb0662b..50bacd5 100644
--- a/frontend/sweet-red-beans/src/css/TopBar/TopBar.module.css
+++ b/frontend/sweet-red-beans/src/css/TopBar/TopBar.module.css
@@ -1,7 +1,7 @@
 .container {
     position: relative;
     height: 50px;
-    border-bottom: #5A5A5A 1px solid;
+    border-bottom: #5a5a5a 1px solid;
 }
 
 .loginArea {
@@ -11,10 +11,10 @@
     bottom: 10px;
 }
 
-.title{
+.title {
     position: absolute;
-    left:0px;
-    bottom: 5px;
+    left: 0px;
+    bottom: 0px;
     display: inline-block;
     margin-left: 10px;
 }
@@ -22,15 +22,15 @@
 .title > button {
     cursor: pointer;
     border-style: none;
-    background-color:rgba(205, 92, 92, 0);
+    background-color: rgba(205, 92, 92, 0);
     font-size: 30px;
 }
 
-.navigationBar{
+.navigationBar {
     position: absolute;
     display: inline-block;
-    left:150px;
+    left: 150px;
     bottom: 0px;
     text-align: center;
     vertical-align: middle;
-}
\ No newline at end of file
+}
diff --git a/frontend/sweet-red-beans/src/css/TransactionPage/TransactionPage.module.css b/frontend/sweet-red-beans/src/css/TransactionPage/TransactionPage.module.css
index e677488..a299275 100644
--- a/frontend/sweet-red-beans/src/css/TransactionPage/TransactionPage.module.css
+++ b/frontend/sweet-red-beans/src/css/TransactionPage/TransactionPage.module.css
@@ -1,74 +1,73 @@
 .wrap {
-  position: relative;
-  font-size: 18px;
-  line-height: 1.6;
-  position: relative;
-  background-color: white;
-  border: #C4C4C4 1px solid;
-  width: 1000px;
-  margin : 0 auto;
-  border-radius: 20px;
-  box-sizing: border-box;
-  margin-bottom: 100px;
-  margin-top: 50px;
-  font-family: 'ROKAFSansBold';
+    position: relative;
+    font-size: 18px;
+    line-height: 1.6;
+    position: relative;
+    background-color: white;
+    border: #c4c4c4 1px solid;
+    width: 1000px;
+    margin: 0 auto;
+    border-radius: 20px;
+    box-sizing: border-box;
+    margin-bottom: 100px;
+    margin-top: 50px;
+    font-family: 'ROKAFSansBold';
 }
 
 .writeBox {
-  margin-top: 30px;
-  margin-bottom: 50px;
+    margin-top: 30px;
+    margin-bottom: 50px;
 }
 
 .writeBox::after {
-  display: block;
-  content: "";
-  width: 100%;
-  height: 1px;
-  background-color: #C4C4C4;
-  margin-top: 50px;
+    display: block;
+    content: '';
+    width: 100%;
+    height: 1px;
+    background-color: #c4c4c4;
+    margin-top: 50px;
 }
 
 .profileArea {
-  position: absolute;
-  display: inline-block;
-  text-align: left;
-  top:30px;
+    position: absolute;
+    display: inline-block;
+    text-align: left;
+    top: 30px;
 }
 
 .profileImage {
-  display: inline-block;
-  vertical-align: middle;
-  width: 50px;
-  height: 50px;
-  border-radius: 50px;
-  object-fit: cover;
+    display: inline-block;
+    vertical-align: middle;
+    width: 50px;
+    height: 50px;
+    border-radius: 50px;
+    object-fit: cover;
 }
 
 .nickname {
-  cursor: default;
-  margin-left: 20px;
-  display: inline-block;
-  vertical-align: middle;
-  font-size: 16px;
-
+    cursor: default;
+    margin-left: 20px;
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 16px;
 }
 
 .writeButtonArea {
-  position: absolute;
-  display: inline-block;
-  top: 30px;
-  right: 150px;
+    position: absolute;
+    display: inline-block;
+    top: 30px;
+    right: 150px;
 }
 
 .writeButtonArea > button {
-  cursor: pointer;
-  border: none;
-  width: 190px;
-  height: 50px;
-  background-color: #F23333;
-  border-radius: 10px;
-  color: white;
-  font-size: 16px;
+    cursor: pointer;
+    border: none;
+    width: 190px;
+    height: 50px;
+    background-color: #f23333;
+    border-radius: 10px;
+    color: white;
+    font-size: 16px;
 }
 
 /* .writeButtonArea > button:hover{
@@ -83,282 +82,282 @@
 } */
 
 .writeBox > textarea {
-  font-size: 14px;
-  width: 700px;
-  height: 200px;
-  border-radius: 10px;
-  border: #C4C4C4 1px solid;
-  box-shadow: 0px 0px 7px rgba(90, 90, 90, 0.25);
-  box-sizing: border-box;
-  padding: 20px;
-  resize: none;
-  margin-top: 80px;
-  outline: none;
+    font-size: 14px;
+    width: 700px;
+    height: 200px;
+    border-radius: 10px;
+    border: #c4c4c4 1px solid;
+    box-shadow: 0px 0px 7px rgba(90, 90, 90, 0.25);
+    box-sizing: border-box;
+    padding: 20px;
+    resize: none;
+    margin-top: 80px;
+    outline: none;
 }
 
-.writeBox > textarea:focus{
-  border: 2px solid #5a5a5a;
-  box-shadow:none;
+.writeBox > textarea:focus {
+    border: 2px solid #5a5a5a;
+    box-shadow: none;
 }
 
-.writeBox > textarea::-webkit-scrollbar{
-  width: 15px;
+.writeBox > textarea::-webkit-scrollbar {
+    width: 15px;
 }
 
-.writeBox > textarea::-webkit-scrollbar-thumb{
-  width: 15px;
-  background-color: #C4C4C4;
-  border-radius: 20px;
-  margin: 5px;
-  background-clip: padding-box;
-  border: 4px solid transparent;
-
+.writeBox > textarea::-webkit-scrollbar-thumb {
+    width: 15px;
+    background-color: #c4c4c4;
+    border-radius: 20px;
+    margin: 5px;
+    background-clip: padding-box;
+    border: 4px solid transparent;
 }
 
-.writeBox > textarea::-webkit-scrollbar-track{
-  background-color: rgba(0,0,0,0);
-
+.writeBox > textarea::-webkit-scrollbar-track {
+    background-color: rgba(0, 0, 0, 0);
 }
 
 .transactionsBox {
 }
 
-.topBox{
-  text-align: right;
-  margin-right: 150px;
-  margin-bottom: 30px;
+.topBox {
+    text-align: right;
+    margin-right: 150px;
+    margin-bottom: 30px;
 }
 
-.proceedfilter{
-  display: inline-block;
-  vertical-align: bottom;
+.proceedfilter {
+    display: inline-block;
+    vertical-align: bottom;
 }
 
-.selected, .notSelected {
-  cursor: pointer;
-  background-color: transparent;
-  border: none;
-  font-size: 14px;
-  margin-left: 20px;
-  transition: transform 200ms ease;
+.selected,
+.notSelected {
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+    font-size: 14px;
+    margin-left: 20px;
+    transition: transform 200ms ease;
 }
 
 .notSelected:hover {
-  transform: scale(1.2);
+    transform: scale(1.2);
 }
 
-.selected{
-  cursor:default;
-  font-size: 18px;
-  color: #f23333;
+.selected {
+    cursor: default;
+    font-size: 18px;
+    color: #f23333;
 }
 
 .selected::before {
-  display: inline-block;
-  margin-right: 5px;
-  content: "";
-  width: 15px;
-  height: 15px;
-  background: url("../../img/check.png");
-  background-repeat: no-repeat;
-  background-size: 100%;
+    display: inline-block;
+    margin-right: 5px;
+    content: '';
+    width: 15px;
+    height: 15px;
+    background: url('../../img/check.png');
+    background-repeat: no-repeat;
+    background-size: 100%;
 }
 
-.filter{
-  display: inline-block;
-  position: relative;
-  width: 100px;
-  height: 35px;
-  border-bottom: 3px solid #C4C4C4;
-  margin-left: 30px;
+.filter {
+    display: inline-block;
+    position: relative;
+    width: 100px;
+    height: 35px;
+    border-bottom: 3px solid #c4c4c4;
+    margin-left: 30px;
 }
 
 .filter > select {
-  font-size: 14px;
-  cursor: pointer;
-  width: inherit;
-  height: inherit;
-  background: transparent;
-  border: 0 none;
-  outline: 0 none;
-  padding: 0 8px;
-  position: relative;
-  z-index: 3;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
+    font-size: 14px;
+    cursor: pointer;
+    width: inherit;
+    height: inherit;
+    background: transparent;
+    border: 0 none;
+    outline: 0 none;
+    padding: 0 8px;
+    position: relative;
+    z-index: 3;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
 }
 
 .filter > select > option {
-  color: #5a5a5a;
-  padding: 10px 0px 10px 0px;
-  font-size: 14px;
+    color: #5a5a5a;
+    padding: 10px 0px 10px 0px;
+    font-size: 14px;
 }
 
 .filterArrow {
-  position: absolute; 
-  bottom: 7px; 
-  right: 0; 
-  z-index: 1; 
-  width: 20px; 
-  height: 20px;
-  transition: transform 300ms ease-in-out;
-  background: url("../../img/down-arrow.png");
-  background-repeat: no-repeat;
-  background-size: 70%;
-  background-position: 50% 50%;
+    position: absolute;
+    bottom: 7px;
+    right: 0;
+    z-index: 1;
+    width: 20px;
+    height: 20px;
+    transition: transform 300ms ease-in-out;
+    background: url('../../img/down-arrow.png');
+    background-repeat: no-repeat;
+    background-size: 70%;
+    background-position: 50% 50%;
 }
 
-.filter > select:focus + .filterArrow{
-  transform: rotate(180deg);
+.filter > select:focus + .filterArrow {
+    transform: rotate(180deg);
 }
 
 .search {
-  display: inline-block;
-  position: relative;
-  text-align: right;
-  width: 200px;
-  height: 45px;
-  margin-left: 30px;
-  border-bottom: 3px solid #C4C4C4;
-  vertical-align: bottom;
+    display: inline-block;
+    position: relative;
+    text-align: right;
+    width: 200px;
+    height: 45px;
+    margin-left: 30px;
+    border-bottom: 3px solid #c4c4c4;
+    vertical-align: bottom;
 }
 
 .search input {
-  position: absolute;
-  bottom: 0px;
-  left:0px;
-  width: 170px;
-  height: 35px;
-  box-sizing: border-box;
-  border: none;
-  padding: 10px;
-  font-size: 14px;
-  transition: border-bottom 200ms ease;
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 170px;
+    height: 35px;
+    box-sizing: border-box;
+    border: none;
+    padding: 10px;
+    font-size: 14px;
+    font-family: 'Pretendard-Regular';
+    transition: border-bottom 200ms ease;
 }
 
 .search input::placeholder {
-  color: #C4C4C4;
+    color: #c4c4c4;
 }
 
 .search input:focus {
-  outline: none;
+    outline: none;
 }
 
 .underline {
-  position: absolute;
-  width: 0px;
-  height: 3px;
-  background-color: #f23333;
-  bottom: -3px;
-  transition: width 300ms ease;
+    position: absolute;
+    width: 0px;
+    height: 3px;
+    background-color: #f23333;
+    bottom: -3px;
+    transition: width 300ms ease;
 }
 .search input:focus + .underline {
-  width: 200px;
+    width: 200px;
 }
 
 .search button {
-  cursor: pointer;
-  position: absolute;
-  top: 0; 
-  right: 0;
-  transform: translate(-0%, 50%);
-  z-index: 3;
-  width: 25px; 
-  height: 25px;
-  display: flex;
-  background: url('../../img/search.png');
-  background-size: cover;
-  border: 0 none;
-  outline: 0 none;
-  background-color: white;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(-0%, 50%);
+    z-index: 3;
+    width: 25px;
+    height: 25px;
+    display: flex;
+    background: url('../../img/search.png');
+    background-size: cover;
+    border: 0 none;
+    outline: 0 none;
+    background-color: white;
 }
 
 .topBtn {
-  position: fixed; 
-  opacity: 0; 
-  bottom: 30px;
-  right: 30px;
-  z-index: -10; 
-  width: 60px; 
-  height: 60px;
-  border-radius: 50px;
-  border: none;
-  cursor: pointer;
-  transition: opacity 0.5s ease-in-out;
-  background-color: #F23333;
-  color: white;
+    position: fixed;
+    opacity: 0;
+    bottom: 30px;
+    right: 30px;
+    z-index: -10;
+    width: 60px;
+    height: 60px;
+    border-radius: 50px;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.5s ease-in-out;
+    background-color: #f23333;
+    color: white;
 }
 
 .topBtn.active {
-  z-index: 10; 
-  opacity: 1;
+    z-index: 10;
+    opacity: 1;
 }
 
 .topBtn:hover,
 .topBtn:focus,
-.topBtn:active { 
-  outline: 0 none; 
+.topBtn:active {
+    outline: 0 none;
 }
 
 .writeBtn {
-  position: fixed; 
-  opacity: 0; 
-  bottom: 120px;
-  right: 30px;
-  z-index: -10; 
-  width: 60px; 
-  height: 60px;
-  border-radius: 50px;
-  border: none;
-  cursor: pointer;
-  transition: opacity 0.5s ease-in-out;
-  background: url("../../img/quill.png");
-  background-size: 50%;
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
-  background-color: #F23333;
-  color: white;
+    position: fixed;
+    opacity: 0;
+    bottom: 120px;
+    right: 30px;
+    z-index: -10;
+    width: 60px;
+    height: 60px;
+    border-radius: 50px;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.5s ease-in-out;
+    background: url('../../img/quill.png');
+    background-size: 50%;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-color: #f23333;
+    color: white;
 }
 
 .writeBtn.active {
-  z-index: 10; 
-  opacity: 1;
+    z-index: 10;
+    opacity: 1;
 }
 
 .modal {
-  text-align: center;
+    text-align: center;
 }
 
 .modal > div:nth-child(1) {
-  text-align: left;
-  padding: 10px 0px 10px 30px;
+    text-align: left;
+    padding: 10px 0px 10px 30px;
 }
 
-.modal > div > textarea{
-  width: 520px;
-  height: 200px;
-  resize: none;
-  outline: none;
-  padding:20px;
-  box-sizing: border-box;
-  border-radius: 10px;
-  border: #C4C4C4 1px solid;
-  font-size: 14px;
+.modal > div > textarea {
+    width: 520px;
+    height: 200px;
+    resize: none;
+    outline: none;
+    padding: 20px;
+    box-sizing: border-box;
+    border-radius: 10px;
+    border: #c4c4c4 1px solid;
+    font-size: 14px;
 }
 
-.modal > div > textarea:focus{
-  border: #5a5a5a 2px solid;
+.modal > div > textarea:focus {
+    border: #5a5a5a 2px solid;
 }
 
 .modal > button {
-  margin-top: 30px;
-  cursor: pointer;
-  border: none;
-  background-color: #F23333;
-  color: white;
-  font-size: 16px;
-  border-radius: 10px;
-  height: 50px;
-  width: 110px;
-}
\ No newline at end of file
+    margin-top: 30px;
+    cursor: pointer;
+    border: none;
+    background-color: #f23333;
+    color: white;
+    font-size: 16px;
+    border-radius: 10px;
+    height: 50px;
+    width: 110px;
+}