Develop

src/components/SearchBar/SearchBar.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from 'react';
+import React, { ChangeEvent, useCallback } from 'react';
 import styled from 'styled-components';
 import SearchImage from '@/assets/icons/icon-search.svg';
 
@@ -18,6 +18,11 @@ const SearchBar: React.FC<Props> = ({
   const onChange = (e: ChangeEvent<HTMLInputElement>) => {
     setSearchInput(e.target.value);
   };
+
+  const handleFocus = useCallback(() => {
+    setSearchInput('');
+  }, []);
+
   return (
     <Container
       onSubmit={e => {
@@ -29,6 +34,7 @@ const SearchBar: React.FC<Props> = ({
         value={searchInput}
         placeholder={placeHolder}
         onChange={onChange}
+        onFocus={handleFocus}
       />
       <button type="submit">
         <img src={SearchImage} alt="search" />

src/pages/DetailPosting/PostingBox.tsx

@@ -4,6 +4,7 @@ import Attatchment from './Attatchment';
 import Posting from './Posting';
 import { PostingDataType } from '@/types';
 import PostingNav from './PostingNav';
+
 const PostingBox: React.FC<{
   id: number;
   postingData: PostingDataType;

src/pages/DetailPosting/index.tsx

@@ -1,10 +1,11 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useQuery } from 'react-query';
 import styled from 'styled-components';
+
 import PostingBox from './PostingBox';
 import OtherPostings from './OtherPostings';
-import { useEffect, useState } from 'react';
 import { PostingDataType } from '@/types';
-import { useParams } from 'react-router-dom';
-import { useQuery } from 'react-query';
 import { fetchPostingDetail } from '@/apis/posting';
 import Loading from '@/components/Loading/Loading';
 
@@ -36,7 +37,7 @@ const DetailPosting: React.FC<Props> = ({ title }) => {
   useEffect(() => {
     window.scrollTo({ top: 0, behavior: 'smooth' });
   }, []);
-    
+
   if (isLoading) return <Loading />;
 
   const postingData: PostingDataType = data?.data?.result;

src/pages/DetailPosting/styles/posting.module.css

@@ -1,34 +1,34 @@
-.ql-body h1 {
+h1 {
   font-size: 2em;
 }
-.ql-body h2 {
+h2 {
   font-size: 1.5em;
 }
-.ql-body h3 {
+h3 {
   font-size: 1.17em;
 }
-.ql-body h4 {
+h4 {
   font-size: 1em;
 }
-.ql-body h5 {
+h5 {
   font-size: 0.83em;
 }
-.ql-body h6 {
+h6 {
   font-size: 0.67em;
 }
-.ql-body a {
+u {
   text-decoration: underline;
 }
-
-.ql-body strong {
+p {
+  font-size: 20px;
+}
+strong {
   font-weight: bold;
 }
-.ql-body em {
+em {
   font-style: italic;
 }
-.ql-body u {
-  text-decoration: underline;
-}
-.ql-body s {
+
+s {
   text-decoration: line-through;
 }

src/pages/board/Board.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import { useQuery } from 'react-query';
@@ -20,7 +20,7 @@ interface BoardProps {
 }
 
 const filterList: string[][] = [
-  ['전체', '여행 지원사업 후기', '여행 대외활동 후기', '여행 공모전 후기'],
+  ['전체', '여행 지원사업 후기', '여행 공모전 후기', '여행 대외활동 후기'],
   ['전체', '지원서 예시자료', '보고서 예시자료'],
 ];
 
@@ -46,10 +46,9 @@ const Board: React.FC<BoardProps> = ({ title, description }) => {
     },
   );
 
-  useEffect(() => {
-    // 라우팅이 변경되면 검색 내용 초기화
-    setSearch('');
-  }, [boardType]);
+  const handleSearch = useCallback(() => {
+    setSearch(searchInput);
+  }, [searchInput]);
 
   useEffect(() => {
     if (location?.state?.filter) {
@@ -58,8 +57,11 @@ const Board: React.FC<BoardProps> = ({ title, description }) => {
   }, [location]);
 
   useEffect(() => {
+    // 라우팅, 필터가 변경되면 검색 내용 초기화
+    setSearchInput('');
+    setSearch('');
     window.scrollTo({ top: 0, behavior: 'smooth' });
-  }, [filter]);
+  }, [filter, boardType]);
 
   if (isLoading) return <Loading />;
 
@@ -83,10 +85,7 @@ const Board: React.FC<BoardProps> = ({ title, description }) => {
           placeHolder={'검색어를 입력해 주세요'}
           searchInput={searchInput}
           setSearchInput={setSearchInput}
-          handleSubmit={() => {
-            setSearch(searchInput);
-            setSearchInput('');
-          }}
+          handleSubmit={handleSearch}
         />
       </SearchBarWrapper>
       <PostingList
@@ -108,7 +107,7 @@ const Container = styled.div`
 
   width: 1400px;
   margin: 0 auto 128px;
-  
+
   body:not(&) {
     background-color: white;
   }

src/pages/map/Map.tsx

@@ -82,7 +82,7 @@ const MapPage = () => {
       </SearchBarWrapper>
 
       <Map
-        center={{ lat: 36.58775, lng: 127.968238 }}
+        center={{ lat: 35.58775, lng: 127.968238 }}
         style={{ width: '100%', height: '133.3333vh', zoom: '1.33333' }}
         level={12}
       >