From 95b3ef2592a08e76004e1530af648234f97386b4 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Fri, 6 Oct 2023 18:07:19 +0900 Subject: [PATCH 1/3] =?UTF-8?q?style:=20api,=20apiHooks,=20mocks,=20pages?= =?UTF-8?q?=20eslint=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/.eslintrc.js | 11 +++ frontend/src/apiHooks/usePatch.ts | 2 + frontend/src/apiHooks/usePost.ts | 2 + frontend/src/apiHooks/usePut.ts | 2 + frontend/src/apis/deleteApi.ts | 6 +- frontend/src/apis/getApi.ts | 6 +- frontend/src/apis/patchApi.ts | 10 ++- frontend/src/apis/postApi.ts | 8 +- frontend/src/apis/putApi.ts | 10 ++- frontend/src/apis/utils.ts | 4 +- frontend/src/context/AbsoluteModalContext.tsx | 6 +- frontend/src/context/CoordinatesContext.tsx | 4 +- frontend/src/context/LayoutWidthContext.tsx | 6 +- frontend/src/context/ModalContext.tsx | 4 +- .../src/context/NavbarHighlightsContext.tsx | 8 +- frontend/src/context/SeeTogetherContext.tsx | 11 ++- frontend/src/context/TagContext.tsx | 7 +- frontend/src/context/ToastContext.tsx | 7 +- frontend/src/hooks/useKeyDown.ts | 4 +- frontend/src/hooks/useMapClick.ts | 8 +- frontend/src/mocks/browser.js | 1 + frontend/src/mocks/db/login.js | 4 +- frontend/src/mocks/db/resLogin.js | 4 +- frontend/src/mocks/handlers.js | 19 ++--- frontend/src/pages/Home.stories.ts | 3 +- frontend/src/pages/Home.tsx | 21 ++--- frontend/src/pages/KakaoRedirect.tsx | 11 +-- frontend/src/pages/NewPin.tsx | 77 ++++++++++--------- frontend/src/pages/NewTopic.stories.ts | 3 +- frontend/src/pages/NewTopic.tsx | 40 +++++----- frontend/src/pages/NotFound.tsx | 11 +-- frontend/src/pages/PinDetail.stories.ts | 3 +- frontend/src/pages/PinDetail.tsx | 31 ++++---- frontend/src/pages/Profile.tsx | 17 ++-- frontend/src/pages/RootPage.tsx | 5 +- frontend/src/pages/Search.tsx | 22 +++--- frontend/src/pages/SeeAllLatestTopics.tsx | 15 ++-- frontend/src/pages/SeeAllNearTopics.tsx | 15 ++-- frontend/src/pages/SeeAllPopularTopics.tsx | 19 ++--- frontend/src/pages/SelectedTopic.tsx | 29 +++---- frontend/src/pages/UpdatedPinDetail.tsx | 27 +++---- frontend/src/types/tmap.d.ts | 4 +- 42 files changed, 274 insertions(+), 233 deletions(-) diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js index 70dd23f8a..312ef87f4 100644 --- a/frontend/.eslintrc.js +++ b/frontend/.eslintrc.js @@ -25,6 +25,17 @@ module.exports = { 'import/prefer-default-export': 'off', 'no-use-before-define': 'off', 'react/require-default-props': 'off', + 'react/destructuring-assignment': 'off', + 'react/jsx-no-constructed-context-values': 'off', + 'no-restricted-globals': 'off', + 'no-shadow': 'off', + 'consistent-return': 'off', + 'no-restricted-syntax': 'off', + 'no-await-in-loop': 'off', + 'no-param-reassign': 'off', + 'jsx-a11y/tabindex-no-positive': 'off', + 'react/no-array-index-key': 'off', + 'react/jsx-no-useless-fragment': 'off', }, settings: { 'import/resolver': { diff --git a/frontend/src/apiHooks/usePatch.ts b/frontend/src/apiHooks/usePatch.ts index e5a0e227c..ff2476f34 100644 --- a/frontend/src/apiHooks/usePatch.ts +++ b/frontend/src/apiHooks/usePatch.ts @@ -35,6 +35,8 @@ const usePatch = () => { if (isThrow) throw e; } + + return null; }; return { fetchPatch }; diff --git a/frontend/src/apiHooks/usePost.ts b/frontend/src/apiHooks/usePost.ts index 70cbda53d..72df67629 100644 --- a/frontend/src/apiHooks/usePost.ts +++ b/frontend/src/apiHooks/usePost.ts @@ -35,6 +35,8 @@ const usePost = () => { if (isThrow) throw e; } + + return null; }; return { fetchPost }; diff --git a/frontend/src/apiHooks/usePut.ts b/frontend/src/apiHooks/usePut.ts index a263afdbd..78f7486be 100644 --- a/frontend/src/apiHooks/usePut.ts +++ b/frontend/src/apiHooks/usePut.ts @@ -35,6 +35,8 @@ const usePut = () => { if (isThrow) throw e; } + + return null; }; return { fetchPut }; diff --git a/frontend/src/apis/deleteApi.ts b/frontend/src/apis/deleteApi.ts index 3ce0f2152..2ae319b1f 100644 --- a/frontend/src/apis/deleteApi.ts +++ b/frontend/src/apis/deleteApi.ts @@ -8,7 +8,7 @@ interface Headers { } export const deleteApi = async (url: string, contentType?: ContentTypeType) => { - return await withTokenRefresh(async () => { + const data = await withTokenRefresh(async () => { const apiUrl = `${DEFAULT_PROD_URL + url}`; const userToken = localStorage.getItem('userToken'); const headers: Headers = { @@ -16,7 +16,7 @@ export const deleteApi = async (url: string, contentType?: ContentTypeType) => { }; if (userToken) { - headers['Authorization'] = `Bearer ${userToken}`; + headers.Authorization = `Bearer ${userToken}`; } if (contentType) { @@ -32,4 +32,6 @@ export const deleteApi = async (url: string, contentType?: ContentTypeType) => { throw new Error('[SERVER] DELETE 요청에 실패했습니다.'); } }); + + return data; }; diff --git a/frontend/src/apis/getApi.ts b/frontend/src/apis/getApi.ts index f4c99b910..fd0cb7bfb 100644 --- a/frontend/src/apis/getApi.ts +++ b/frontend/src/apis/getApi.ts @@ -2,7 +2,7 @@ import { DEFAULT_PROD_URL } from '../constants'; import withTokenRefresh from './utils'; export const getApi = async (url: string) => { - return await withTokenRefresh(async () => { + const data = await withTokenRefresh(async () => { const apiUrl = `${DEFAULT_PROD_URL + url}`; const userToken = localStorage.getItem('userToken'); const headers: any = { @@ -10,7 +10,7 @@ export const getApi = async (url: string) => { }; if (userToken) { - headers['Authorization'] = `Bearer ${userToken}`; + headers.Authorization = `Bearer ${userToken}`; } const response = await fetch(apiUrl, { method: 'GET', headers }); @@ -22,4 +22,6 @@ export const getApi = async (url: string) => { const responseData: T = await response.json(); return responseData; }); + + return data; }; diff --git a/frontend/src/apis/patchApi.ts b/frontend/src/apis/patchApi.ts index 358bce0d0..d2b049a3e 100644 --- a/frontend/src/apis/patchApi.ts +++ b/frontend/src/apis/patchApi.ts @@ -4,10 +4,10 @@ import withTokenRefresh from './utils'; export const patchApi = async ( url: string, - data: {}, + payload: {}, contentType?: ContentTypeType, ) => { - return await withTokenRefresh(async () => { + const data = await withTokenRefresh(async () => { const apiUrl = `${DEFAULT_PROD_URL + url}`; const userToken = localStorage.getItem('userToken'); const headers: any = { @@ -15,7 +15,7 @@ export const patchApi = async ( }; if (userToken) { - headers['Authorization'] = `Bearer ${userToken}`; + headers.Authorization = `Bearer ${userToken}`; } if (contentType) { @@ -25,7 +25,7 @@ export const patchApi = async ( const response = await fetch(apiUrl, { method: 'PATCH', headers, - body: JSON.stringify(data), + body: JSON.stringify(payload), }); if (response.status >= 400) { @@ -34,4 +34,6 @@ export const patchApi = async ( return response; }); + + return data; }; diff --git a/frontend/src/apis/postApi.ts b/frontend/src/apis/postApi.ts index 8df139ce6..63c2d65aa 100644 --- a/frontend/src/apis/postApi.ts +++ b/frontend/src/apis/postApi.ts @@ -7,7 +7,7 @@ export const postApi = async ( payload?: {} | FormData, contentType?: ContentTypeType, ) => { - return await withTokenRefresh(async () => { + const data = await withTokenRefresh(async () => { const apiUrl = `${DEFAULT_PROD_URL + url}`; const userToken = localStorage.getItem('userToken'); @@ -15,7 +15,7 @@ export const postApi = async ( const headers: any = {}; if (userToken) { - headers['Authorization'] = `Bearer ${userToken}`; + headers.Authorization = `Bearer ${userToken}`; } const response = await fetch(apiUrl, { @@ -36,7 +36,7 @@ export const postApi = async ( }; if (userToken) { - headers['Authorization'] = `Bearer ${userToken}`; + headers.Authorization = `Bearer ${userToken}`; } if (contentType) { @@ -55,4 +55,6 @@ export const postApi = async ( return response; }); + + return data; }; diff --git a/frontend/src/apis/putApi.ts b/frontend/src/apis/putApi.ts index 6335503c9..bdcf46f3e 100644 --- a/frontend/src/apis/putApi.ts +++ b/frontend/src/apis/putApi.ts @@ -4,10 +4,10 @@ import withTokenRefresh from './utils'; export const putApi = async ( url: string, - data: {}, + payload: {}, contentType?: ContentTypeType, ) => { - return await withTokenRefresh(async () => { + const data = await withTokenRefresh(async () => { const apiUrl = `${DEFAULT_PROD_URL + url}`; const userToken = localStorage.getItem('userToken'); const headers: any = { @@ -15,7 +15,7 @@ export const putApi = async ( }; if (userToken) { - headers['Authorization'] = `Bearer ${userToken}`; + headers.Authorization = `Bearer ${userToken}`; } if (contentType) { @@ -25,7 +25,7 @@ export const putApi = async ( const response = await fetch(apiUrl, { method: 'PUT', headers, - body: JSON.stringify(data), + body: JSON.stringify(payload), }); if (response.status >= 400) { @@ -34,4 +34,6 @@ export const putApi = async ( return response; }); + + return data; }; diff --git a/frontend/src/apis/utils.ts b/frontend/src/apis/utils.ts index c5b69af36..28d0c5e1d 100644 --- a/frontend/src/apis/utils.ts +++ b/frontend/src/apis/utils.ts @@ -25,7 +25,7 @@ async function refreshToken(headers: Headers): Promise { method: 'POST', headers, body: JSON.stringify({ - accessToken: accessToken, + accessToken, }), }); @@ -61,8 +61,6 @@ async function updateToken(headers: Headers) { localStorage.setItem('userToken', newToken.accessToken); } catch (e) { console.error(e); - - return; } } diff --git a/frontend/src/context/AbsoluteModalContext.tsx b/frontend/src/context/AbsoluteModalContext.tsx index 64fb154e3..37c13d361 100644 --- a/frontend/src/context/AbsoluteModalContext.tsx +++ b/frontend/src/context/AbsoluteModalContext.tsx @@ -49,7 +49,7 @@ export const ModalPortal = (props: ModalPortalProps) => { > {props.children} , - $modalRoot ? $modalRoot : document.body, + $modalRoot || document.body, ); }; @@ -87,7 +87,7 @@ export const useModalContext = () => { export const ModalContext = React.createContext(null); -const ModalContextProvider = (props: { children: React.ReactNode }) => { +function ModalContextProvider(props: { children: React.ReactNode }) { const [isModalOpen, setIsModalOpen] = useState(false); const openModal = () => { @@ -109,6 +109,6 @@ const ModalContextProvider = (props: { children: React.ReactNode }) => { {props.children} ); -}; +} export default ModalContextProvider; diff --git a/frontend/src/context/CoordinatesContext.tsx b/frontend/src/context/CoordinatesContext.tsx index ab4090782..88646d6db 100644 --- a/frontend/src/context/CoordinatesContext.tsx +++ b/frontend/src/context/CoordinatesContext.tsx @@ -31,7 +31,7 @@ interface Props { children: JSX.Element | JSX.Element[]; } -const CoordinatesProvider = ({ children }: Props): JSX.Element => { +function CoordinatesProvider({ children }: Props): JSX.Element { const [coordinates, setCoordinates] = useState([ { latitude: 37.5055, longitude: 127.0509 }, ]); @@ -60,6 +60,6 @@ const CoordinatesProvider = ({ children }: Props): JSX.Element => { {children} ); -}; +} export default CoordinatesProvider; diff --git a/frontend/src/context/LayoutWidthContext.tsx b/frontend/src/context/LayoutWidthContext.tsx index 259d21926..c59307d5d 100644 --- a/frontend/src/context/LayoutWidthContext.tsx +++ b/frontend/src/context/LayoutWidthContext.tsx @@ -1,8 +1,8 @@ import { + createContext, Dispatch, ReactNode, SetStateAction, - createContext, useState, } from 'react'; @@ -22,7 +22,7 @@ export const LayoutWidthContext = createContext({ setWidth: () => {}, }); -const LayoutWidthProvider = ({ children }: LayoutWidthProviderProps) => { +function LayoutWidthProvider({ children }: LayoutWidthProviderProps) { const [width, setWidth] = useState('100vw'); return ( @@ -35,6 +35,6 @@ const LayoutWidthProvider = ({ children }: LayoutWidthProviderProps) => { {children} ); -}; +} export default LayoutWidthProvider; diff --git a/frontend/src/context/ModalContext.tsx b/frontend/src/context/ModalContext.tsx index 118c9add6..1b302c03c 100644 --- a/frontend/src/context/ModalContext.tsx +++ b/frontend/src/context/ModalContext.tsx @@ -20,7 +20,7 @@ export const ModalContext = createContext({ closeModal: () => {}, }); -const ModalProvider = ({ children }: ModalProviderProps) => { +function ModalProvider({ children }: ModalProviderProps) { const [modalOpens, setModalOpens] = useState({}); const openModal = (key: string) => { @@ -48,6 +48,6 @@ const ModalProvider = ({ children }: ModalProviderProps) => { {children} ); -}; +} export default ModalProvider; diff --git a/frontend/src/context/NavbarHighlightsContext.tsx b/frontend/src/context/NavbarHighlightsContext.tsx index 95db38798..9d87796f2 100644 --- a/frontend/src/context/NavbarHighlightsContext.tsx +++ b/frontend/src/context/NavbarHighlightsContext.tsx @@ -1,8 +1,8 @@ import { + createContext, Dispatch, ReactNode, SetStateAction, - createContext, useState, } from 'react'; @@ -35,9 +35,7 @@ export const NavbarHighlightsContext = createContext<{ setNavbarHighlights: () => {}, }); -const NavbarHighlightsProvider = ({ - children, -}: NavbarHighlightsProviderProps) => { +function NavbarHighlightsProvider({ children }: NavbarHighlightsProviderProps) { const [navbarHighlights, setNavbarHighlights] = useState({ home: true, seeTogether: false, @@ -53,6 +51,6 @@ const NavbarHighlightsProvider = ({ {children} ); -}; +} export default NavbarHighlightsProvider; diff --git a/frontend/src/context/SeeTogetherContext.tsx b/frontend/src/context/SeeTogetherContext.tsx index ed9d57fba..292551ea5 100644 --- a/frontend/src/context/SeeTogetherContext.tsx +++ b/frontend/src/context/SeeTogetherContext.tsx @@ -1,10 +1,11 @@ import { + createContext, Dispatch, ReactNode, SetStateAction, - createContext, useState, } from 'react'; + import { TopicCardProps } from '../types/Topic'; interface SeeTogetherContextProps { @@ -21,10 +22,8 @@ export const SeeTogetherContext = createContext({ setSeeTogetherTopics: () => {}, }); -const SeeTogetherProvider = ({ children }: SeeTogetherProviderProps) => { - const [seeTogetherTopics, setSeeTogetherTopics] = useState< - number[] | [] - >([]); +function SeeTogetherProvider({ children }: SeeTogetherProviderProps) { + const [seeTogetherTopics, setSeeTogetherTopics] = useState([]); return ( { {children} ); -}; +} export default SeeTogetherProvider; diff --git a/frontend/src/context/TagContext.tsx b/frontend/src/context/TagContext.tsx index 9d7cafc61..f0426cf0d 100644 --- a/frontend/src/context/TagContext.tsx +++ b/frontend/src/context/TagContext.tsx @@ -1,10 +1,11 @@ import { + createContext, Dispatch, ReactNode, SetStateAction, - createContext, useState, } from 'react'; + import { TagProps } from '../types/Tag'; interface TagContextProps { @@ -21,7 +22,7 @@ export const TagContext = createContext({ setTags: () => {}, }); -const TagProvider = ({ children }: TagProviderProps) => { +function TagProvider({ children }: TagProviderProps) { const [tags, setTags] = useState([]); return ( @@ -34,6 +35,6 @@ const TagProvider = ({ children }: TagProviderProps) => { {children} ); -}; +} export default TagProvider; diff --git a/frontend/src/context/ToastContext.tsx b/frontend/src/context/ToastContext.tsx index f56d6f630..0db699e1f 100644 --- a/frontend/src/context/ToastContext.tsx +++ b/frontend/src/context/ToastContext.tsx @@ -1,10 +1,11 @@ import { + createContext, Dispatch, ReactNode, SetStateAction, - createContext, useState, } from 'react'; + import ToastProps from '../types/Toast'; interface ToastContextProps { @@ -21,7 +22,7 @@ export const ToastContext = createContext({ setToast: () => {}, }); -const ToastProvider = ({ children }: ToastProviderProps) => { +function ToastProvider({ children }: ToastProviderProps) { const [toast, setToast] = useState({ show: false, type: 'info', @@ -38,6 +39,6 @@ const ToastProvider = ({ children }: ToastProviderProps) => { {children} ); -}; +} export default ToastProvider; diff --git a/frontend/src/hooks/useKeyDown.ts b/frontend/src/hooks/useKeyDown.ts index bcbaba3d1..8d3031b0a 100644 --- a/frontend/src/hooks/useKeyDown.ts +++ b/frontend/src/hooks/useKeyDown.ts @@ -1,4 +1,4 @@ -import { useRef } from "react"; +import { useRef } from 'react'; const useKeyDown = () => { const elementRef = useRef(null); @@ -10,7 +10,7 @@ const useKeyDown = () => { } }; - return {elementRef, onElementKeyDown} + return { elementRef, onElementKeyDown }; }; export default useKeyDown; diff --git a/frontend/src/hooks/useMapClick.ts b/frontend/src/hooks/useMapClick.ts index 3fe88ac71..043c5ab86 100644 --- a/frontend/src/hooks/useMapClick.ts +++ b/frontend/src/hooks/useMapClick.ts @@ -11,13 +11,13 @@ export default function useMapClick(map: TMap | null) { const clickHandler = async (evt: evt) => { try { const roadName = await getAddressFromServer( - evt.data.lngLat._lat, - evt.data.lngLat._lng, + evt.data.lngLat.lat, + evt.data.lngLat.lng, ); setClickedCoordinate({ - latitude: evt.data.lngLat._lat, - longitude: evt.data.lngLat._lng, + latitude: evt.data.lngLat.lat, + longitude: evt.data.lngLat.lng, address: roadName, }); } catch (e) { diff --git a/frontend/src/mocks/browser.js b/frontend/src/mocks/browser.js index ec92cf084..25ce09060 100644 --- a/frontend/src/mocks/browser.js +++ b/frontend/src/mocks/browser.js @@ -1,4 +1,5 @@ import { setupWorker } from 'msw'; + import { handlers } from './handlers'; // This configures a Service Worker with the given request handlers. diff --git a/frontend/src/mocks/db/login.js b/frontend/src/mocks/db/login.js index b2b175377..2ec79ac93 100644 --- a/frontend/src/mocks/db/login.js +++ b/frontend/src/mocks/db/login.js @@ -2,7 +2,7 @@ const resLogin = { accessToken: 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI5MjIzMzcyMDM2ODU0Nzc1ODA3IiwiaWF0IjoxNjkyMjcyNjg3LCJleHAiOjE2OTIyNzYyODd9.FWB1RFvk2uGInqGQDkw0SU4Lghzcggh9TSfuDEZvIUo', member: { - id: 9223372036854775807, + id: 922337203775807, nickName: '모험가03fcb0d', email: 'yshert@naver.com', imageUrl: 'https://map-befine-official.github.io/favicon.png', @@ -10,4 +10,4 @@ const resLogin = { }, }; -export default resLogin \ No newline at end of file +export default resLogin; diff --git a/frontend/src/mocks/db/resLogin.js b/frontend/src/mocks/db/resLogin.js index b2b175377..2ec79ac93 100644 --- a/frontend/src/mocks/db/resLogin.js +++ b/frontend/src/mocks/db/resLogin.js @@ -2,7 +2,7 @@ const resLogin = { accessToken: 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI5MjIzMzcyMDM2ODU0Nzc1ODA3IiwiaWF0IjoxNjkyMjcyNjg3LCJleHAiOjE2OTIyNzYyODd9.FWB1RFvk2uGInqGQDkw0SU4Lghzcggh9TSfuDEZvIUo', member: { - id: 9223372036854775807, + id: 922337203775807, nickName: '모험가03fcb0d', email: 'yshert@naver.com', imageUrl: 'https://map-befine-official.github.io/favicon.png', @@ -10,4 +10,4 @@ const resLogin = { }, }; -export default resLogin \ No newline at end of file +export default resLogin; diff --git a/frontend/src/mocks/handlers.js b/frontend/src/mocks/handlers.js index be36c323c..4adff8aad 100644 --- a/frontend/src/mocks/handlers.js +++ b/frontend/src/mocks/handlers.js @@ -1,13 +1,14 @@ import { rest } from 'msw'; -import topics from './db/topics'; -import newestTopics from './db/newestTopics'; + +import atlas from './db/atlas'; import bestTopics from './db/bestTopics'; -import detailTopic from './db/detailTopic'; -import tempPins from './db/tempPins'; -import resLogin from './db/resLogin'; import bookmarks from './db/bookmarks'; +import detailTopic from './db/detailTopic'; import myTopics from './db/myTopics'; -import atlas from './db/atlas'; +import newestTopics from './db/newestTopics'; +import resLogin from './db/resLogin'; +import tempPins from './db/tempPins'; +import topics from './db/topics'; export const handlers = [ // 포스트 목록 @@ -180,7 +181,7 @@ export const handlers = [ description, creator: '패트릭', isInAtlas: false, - pins: pins, + pins, isBookmarked: false, bookmarkCount: 5, pinCount: 0, @@ -207,8 +208,8 @@ export const handlers = [ name, description, address, - latitude: latitude, - longitude: longitude, + latitude, + longitude, legalDongCode: '', images: [], }; diff --git a/frontend/src/pages/Home.stories.ts b/frontend/src/pages/Home.stories.ts index a6a8010d6..65bc6cc37 100644 --- a/frontend/src/pages/Home.stories.ts +++ b/frontend/src/pages/Home.stories.ts @@ -1,4 +1,5 @@ -import { StoryObj, Meta } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; + import Home from './Home'; const meta = { diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 541ac75f6..17775ae4a 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -1,21 +1,22 @@ -import Space from '../components/common/Space'; -import useNavigator from '../hooks/useNavigator'; +import { lazy, Suspense, useContext, useEffect } from 'react'; import { styled } from 'styled-components'; -import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; -import { FULLSCREEN } from '../constants'; -import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; -import { Suspense, lazy, useContext, useEffect } from 'react'; -import { MarkerContext } from '../context/MarkerContext'; + +import Space from '../components/common/Space'; +import SearchBar from '../components/SearchBar/SearchBar'; import TopicCardContainerSkeleton from '../components/Skeletons/TopicListSkeleton'; +import { FULLSCREEN } from '../constants'; import { setFullScreenResponsive } from '../constants/responsive'; +import { MarkerContext } from '../context/MarkerContext'; import { SeeTogetherContext } from '../context/SeeTogetherContext'; -import SearchBar from '../components/SearchBar/SearchBar'; +import useNavigator from '../hooks/useNavigator'; +import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; +import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; const TopicListContainer = lazy( () => import('../components/TopicCardContainer'), ); -const Home = () => { +function Home() { const { routingHandlers } = useNavigator(); const { goToPopularTopics, goToLatestTopics, goToNearByMeTopics } = routingHandlers; @@ -80,7 +81,7 @@ const Home = () => { ); -}; +} const Wrapper = styled.article` width: 1036px; diff --git a/frontend/src/pages/KakaoRedirect.tsx b/frontend/src/pages/KakaoRedirect.tsx index 985f33b8f..69c68e751 100644 --- a/frontend/src/pages/KakaoRedirect.tsx +++ b/frontend/src/pages/KakaoRedirect.tsx @@ -1,9 +1,10 @@ import { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; import { keyframes, styled } from 'styled-components'; -import useNavigator from '../hooks/useNavigator'; -import { DEFAULT_PROD_URL } from '../constants'; + import { getLoginApi } from '../apis/getLoginApi'; +import { DEFAULT_PROD_URL } from '../constants'; +import useNavigator from '../hooks/useNavigator'; // const API_URL = // process.env.NODE_ENV === 'production' @@ -19,11 +20,11 @@ export const handleOAuthKakao = async (code: string) => { localStorage.setItem('user', JSON.stringify(data.member)); location.reload(); } catch (error) { - window.alert('로그인에 실패하였습니다. 이메일 수집을 동의해주세요.'); + window.alert('로그인에 실패하였습니다. 로그아웃 후 다시 진행해주세요.'); } }; -const KakaoRedirect = () => { +function KakaoRedirect() { const { routePage } = useNavigator(); const routerLocation = useLocation(); @@ -46,7 +47,7 @@ const KakaoRedirect = () => { ); -}; +} export default KakaoRedirect; diff --git a/frontend/src/pages/NewPin.tsx b/frontend/src/pages/NewPin.tsx index ff2b5c3c7..7df2ecb1e 100644 --- a/frontend/src/pages/NewPin.tsx +++ b/frontend/src/pages/NewPin.tsx @@ -1,37 +1,38 @@ -import Input from '../components/common/Input'; -import Text from '../components/common/Text'; -import Flex from '../components/common/Flex'; -import Space from '../components/common/Space'; -import Button from '../components/common/Button'; -import { postApi } from '../apis/postApi'; import { FormEvent, useContext, useEffect, useState } from 'react'; -import { getApi } from '../apis/getApi'; -import { TopicCardProps } from '../types/Topic'; -import useNavigator from '../hooks/useNavigator'; -import { NewPinFormProps } from '../types/FormValues'; -import useFormValues from '../hooks/useFormValues'; -import { MarkerContext } from '../context/MarkerContext'; -import { CoordinatesContext } from '../context/CoordinatesContext'; import { useLocation } from 'react-router-dom'; -import useToast from '../hooks/useToast'; +import { styled } from 'styled-components'; + +import { getApi } from '../apis/getApi'; +import { getMapApi } from '../apis/getMapApi'; +import { postApi } from '../apis/postApi'; +import Button from '../components/common/Button'; +import Flex from '../components/common/Flex'; +import Input from '../components/common/Input'; +import Space from '../components/common/Space'; +import Text from '../components/common/Text'; import InputContainer from '../components/InputContainer'; -import { hasErrorMessage, hasNullValue } from '../validations'; -import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; -import { LAYOUT_PADDING, SIDEBAR } from '../constants'; -import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; -import { ModalContext } from '../context/ModalContext'; import Modal from '../components/Modal'; -import { styled } from 'styled-components'; import ModalMyTopicList from '../components/ModalMyTopicList'; -import { getMapApi } from '../apis/getMapApi'; +import { LAYOUT_PADDING, SIDEBAR } from '../constants'; +import { CoordinatesContext } from '../context/CoordinatesContext'; +import { MarkerContext } from '../context/MarkerContext'; +import { ModalContext } from '../context/ModalContext'; import useCompressImage from '../hooks/useCompressImage'; +import useFormValues from '../hooks/useFormValues'; +import useNavigator from '../hooks/useNavigator'; +import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; +import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; +import useToast from '../hooks/useToast'; +import { NewPinFormProps } from '../types/FormValues'; +import { TopicCardProps } from '../types/Topic'; +import { hasErrorMessage, hasNullValue } from '../validations'; type NewPinFormValueType = Pick< NewPinFormProps, 'name' | 'address' | 'description' >; -const NewPin = () => { +function NewPin() { const { state: topicId } = useLocation(); const { navbarHighlights: _ } = useSetNavbarHighlight('addMapOrPin'); const [topic, setTopic] = useState(null); @@ -61,12 +62,12 @@ const NewPin = () => { const postToServer = async () => { let postTopicId = topic?.id; - let postName = formValues.name; + const postName = formValues.name; const formData = new FormData(); if (!topic) { - //토픽이 없으면 selectedTopic을 통해 토픽을 생성한다. + // 토픽이 없으면 selectedTopic을 통해 토픽을 생성한다. postTopicId = selectedTopic?.topicId; } @@ -133,7 +134,7 @@ const NewPin = () => { let postName = formValues.name; if (!topic) { - //토픽이 없으면 selectedTopic을 통해 토픽을 생성한다. + // 토픽이 없으면 selectedTopic을 통해 토픽을 생성한다. postTopicId = selectedTopic?.topicId; postName = selectedTopic?.topicName; } @@ -154,15 +155,15 @@ const NewPin = () => { ) => { if (!(e.type === 'click') && e.currentTarget.value) return; - var width = 500; //팝업의 너비 - var height = 600; //팝업의 높이 + const width = 500; // 팝업의 너비 + const height = 600; // 팝업의 높이 new window.daum.Postcode({ - width: width, //생성자에 크기 값을 명시적으로 지정해야 합니다. - height: height, - onComplete: async function (data: any) { + width, // 생성자에 크기 값을 명시적으로 지정해야 합니다. + height, + async onComplete(data: any) { const addr = data.roadAddress; // 주소 변수 - //data를 통해 받아온 값을 Tmap api를 통해 위도와 경도를 구한다. + // data를 통해 받아온 값을 Tmap api를 통해 위도와 경도를 구한다. const { ConvertAdd } = await getMapApi( `https://apis.openapi.sk.com/tmap/geo/convertAddress?version=1&format=json&callback=result&searchTypCd=NtoO&appKey=P2MX6F1aaf428AbAyahIl9L8GsIlES04aXS9hgxo&coordType=WGS84GEO&reqAdd=${addr}`, ); @@ -196,7 +197,7 @@ const NewPin = () => { const compressedImageList = await compressImageList(imageLists); - for (let i = 0; i < imageLists.length; i++) { + for (let i = 0; i < imageLists.length; i += 1) { const currentImageUrl = URL.createObjectURL(compressedImageList[i]); imageUrlLists.push(currentImageUrl); } @@ -293,9 +294,9 @@ const NewPin = () => { - {showedImages.map((image, id) => ( -
- + {showedImages.map((image, idx) => ( +
+
))} @@ -306,7 +307,7 @@ const NewPin = () => { { { ); -}; +} const Wrapper = styled(Flex)` margin: 0 auto; diff --git a/frontend/src/pages/NewTopic.stories.ts b/frontend/src/pages/NewTopic.stories.ts index 2972086b1..4039d65aa 100644 --- a/frontend/src/pages/NewTopic.stories.ts +++ b/frontend/src/pages/NewTopic.stories.ts @@ -1,4 +1,5 @@ -import { StoryObj, Meta } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; + import NewTopic from './NewTopic'; const meta = { diff --git a/frontend/src/pages/NewTopic.tsx b/frontend/src/pages/NewTopic.tsx index 11de14312..d2a54de18 100644 --- a/frontend/src/pages/NewTopic.tsx +++ b/frontend/src/pages/NewTopic.tsx @@ -1,28 +1,29 @@ import { useContext, useEffect, useState } from 'react'; -import Text from '../components/common/Text'; +import { useLocation } from 'react-router-dom'; +import styled from 'styled-components'; + +import usePost from '../apiHooks/usePost'; +import AuthorityRadioContainer from '../components/AuthorityRadioContainer'; +import Button from '../components/common/Button'; import Flex from '../components/common/Flex'; import Space from '../components/common/Space'; -import Button from '../components/common/Button'; -import useNavigator from '../hooks/useNavigator'; -import { NewTopicFormProps } from '../types/FormValues'; -import useFormValues from '../hooks/useFormValues'; -import { useLocation } from 'react-router-dom'; -import useToast from '../hooks/useToast'; +import Text from '../components/common/Text'; import InputContainer from '../components/InputContainer'; -import { hasErrorMessage, hasNullValue } from '../validations'; -import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; import { LAYOUT_PADDING, SIDEBAR } from '../constants'; -import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; +import { MarkerContext } from '../context/MarkerContext'; import { TagContext } from '../context/TagContext'; -import usePost from '../apiHooks/usePost'; -import AuthorityRadioContainer from '../components/AuthorityRadioContainer'; -import styled from 'styled-components'; import useCompressImage from '../hooks/useCompressImage'; -import { MarkerContext } from '../context/MarkerContext'; +import useFormValues from '../hooks/useFormValues'; +import useNavigator from '../hooks/useNavigator'; +import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; +import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; +import useToast from '../hooks/useToast'; +import { NewTopicFormProps } from '../types/FormValues'; +import { hasErrorMessage, hasNullValue } from '../validations'; type NewTopicFormValuesType = Omit; -const NewTopic = () => { +function NewTopic() { const { routePage } = useNavigator(); const { state: pulledPinIds } = useLocation(); const { showToast } = useToast(); @@ -170,8 +171,7 @@ const NewTopic = () => { {showImage && ( <> - {' '} - {' '} + {' '} )} @@ -189,7 +189,7 @@ const NewTopic = () => { { { ); -}; +} const Wrapper = styled(Flex)` margin: 0 auto; diff --git a/frontend/src/pages/NotFound.tsx b/frontend/src/pages/NotFound.tsx index 3ce270a4e..72096ed60 100644 --- a/frontend/src/pages/NotFound.tsx +++ b/frontend/src/pages/NotFound.tsx @@ -1,14 +1,15 @@ import { styled } from 'styled-components'; + import NotFoundIcon from '../assets/NotFoundIcon.svg'; -import useNavigator from '../hooks/useNavigator'; import Button from '../components/common/Button'; import Flex from '../components/common/Flex'; import Space from '../components/common/Space'; import Text from '../components/common/Text'; -import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; import { FULLSCREEN } from '../constants'; +import useNavigator from '../hooks/useNavigator'; +import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; -const NotFound = () => { +function NotFound() { const { routePage } = useNavigator(); useSetLayoutWidth(FULLSCREEN); @@ -39,7 +40,7 @@ const NotFound = () => { ); -}; +} const NotFoundContainer = styled(Flex)` flex-direction: row; @@ -49,7 +50,7 @@ const NotFoundContainer = styled(Flex)` `; const NotFoundButton = styled(Button)` - font-weight: ${({ theme }) => theme.fontWeight['bold']}; + font-weight: ${({ theme }) => theme.fontWeight.bold}; &:hover { color: ${({ theme }) => theme.color.white}; diff --git a/frontend/src/pages/PinDetail.stories.ts b/frontend/src/pages/PinDetail.stories.ts index 29ce16b02..4a02df74f 100644 --- a/frontend/src/pages/PinDetail.stories.ts +++ b/frontend/src/pages/PinDetail.stories.ts @@ -1,4 +1,5 @@ -import { StoryObj, Meta } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; + import PinDetail from './PinDetail'; const meta = { diff --git a/frontend/src/pages/PinDetail.tsx b/frontend/src/pages/PinDetail.tsx index 1706b7def..546de9c5a 100644 --- a/frontend/src/pages/PinDetail.tsx +++ b/frontend/src/pages/PinDetail.tsx @@ -1,23 +1,24 @@ -import Flex from '../components/common/Flex'; -import Space from '../components/common/Space'; -import Text from '../components/common/Text'; import { useContext, useEffect, useState } from 'react'; -import { PinProps } from '../types/Pin'; -import { getApi } from '../apis/getApi'; import { useSearchParams } from 'react-router-dom'; +import { styled } from 'styled-components'; + +import { getApi } from '../apis/getApi'; +import { postApi } from '../apis/postApi'; import Box from '../components/common/Box'; -import UpdatedPinDetail from './UpdatedPinDetail'; -import useFormValues from '../hooks/useFormValues'; -import { ModifyPinFormProps } from '../types/FormValues'; -import useToast from '../hooks/useToast'; import Button from '../components/common/Button'; +import Flex from '../components/common/Flex'; +import Space from '../components/common/Space'; +import Text from '../components/common/Text'; import Modal from '../components/Modal'; -import { styled } from 'styled-components'; -import { ModalContext } from '../context/ModalContext'; import AddToMyTopicList from '../components/ModalMyTopicList/addToMyTopicList'; -import { postApi } from '../apis/postApi'; import PinImageContainer from '../components/PinImageContainer'; +import { ModalContext } from '../context/ModalContext'; import useCompressImage from '../hooks/useCompressImage'; +import useFormValues from '../hooks/useFormValues'; +import useToast from '../hooks/useToast'; +import { ModifyPinFormProps } from '../types/FormValues'; +import { PinProps } from '../types/Pin'; +import UpdatedPinDetail from './UpdatedPinDetail'; interface PinDetailProps { width: '372px' | '100vw'; @@ -28,12 +29,12 @@ interface PinDetailProps { const userToken = localStorage.getItem('userToken'); -const PinDetail = ({ +function PinDetail({ width, pinId, isEditPinDetail, setIsEditPinDetail, -}: PinDetailProps) => { +}: PinDetailProps) { const [searchParams, setSearchParams] = useSearchParams(); const [pin, setPin] = useState(null); const { showToast } = useToast(); @@ -239,7 +240,7 @@ const PinDetail = ({ ); -}; +} const Wrapper = styled.section<{ $layoutWidth: '372px' | '100vw'; diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx index abafac264..69ac84fa5 100644 --- a/frontend/src/pages/Profile.tsx +++ b/frontend/src/pages/Profile.tsx @@ -1,20 +1,21 @@ +import { lazy, Suspense } from 'react'; import { styled } from 'styled-components'; + import Box from '../components/common/Box'; import Flex from '../components/common/Flex'; import Space from '../components/common/Space'; +import Text from '../components/common/Text'; import MyInfo from '../components/MyInfo'; -import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; -import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; -import { FULLSCREEN } from '../constants'; import TopicCardContainerSkeleton from '../components/Skeletons/TopicListSkeleton'; -import { Suspense, lazy } from 'react'; -import Text from '../components/common/Text'; -import useNavigator from '../hooks/useNavigator'; +import { FULLSCREEN } from '../constants'; import { setFullScreenResponsive } from '../constants/responsive'; +import useNavigator from '../hooks/useNavigator'; +import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; +import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; const TopicCardList = lazy(() => import('../components/TopicCardList')); -const Profile = () => { +function Profile() { const { routePage } = useNavigator(); useSetLayoutWidth(FULLSCREEN); useSetNavbarHighlight('profile'); @@ -66,7 +67,7 @@ const Profile = () => { ); -}; +} const Wrapper = styled(Box)` width: 1036px; diff --git a/frontend/src/pages/RootPage.tsx b/frontend/src/pages/RootPage.tsx index a0934c53d..8bcaec993 100644 --- a/frontend/src/pages/RootPage.tsx +++ b/frontend/src/pages/RootPage.tsx @@ -1,10 +1,11 @@ import { Outlet } from 'react-router-dom'; + import Layout from '../components/Layout'; import LayoutWidthProvider from '../context/LayoutWidthContext'; import NavbarHighlightsProvider from '../context/NavbarHighlightsContext'; import RouteChangeTracker from '../utils/RouteChangeTracker'; -const RootPage = () => { +function RootPage() { RouteChangeTracker(); return ( <> @@ -17,6 +18,6 @@ const RootPage = () => { ); -}; +} export default RootPage; diff --git a/frontend/src/pages/Search.tsx b/frontend/src/pages/Search.tsx index cb63e3ce2..1dc0b027a 100644 --- a/frontend/src/pages/Search.tsx +++ b/frontend/src/pages/Search.tsx @@ -1,17 +1,18 @@ -import styled from 'styled-components'; -import { setFullScreenResponsive } from '../constants/responsive'; -import Space from '../components/common/Space'; -import SearchBar from '../components/SearchBar/SearchBar'; import { Fragment, useEffect, useState } from 'react'; -import Flex from '../components/common/Flex'; +import { useLocation } from 'react-router-dom'; +import styled from 'styled-components'; + +import useGet from '../apiHooks/useGet'; import Box from '../components/common/Box'; +import Flex from '../components/common/Flex'; +import Space from '../components/common/Space'; import Text from '../components/common/Text'; +import SearchBar from '../components/SearchBar/SearchBar'; import TopicCard from '../components/TopicCard'; +import { setFullScreenResponsive } from '../constants/responsive'; import { TopicCardProps } from '../types/Topic'; -import { useLocation } from 'react-router-dom'; -import useGet from '../apiHooks/useGet'; -const Search = () => { +function Search() { const { fetchGet } = useGet(); const [originalTopics, setOriginalTopics] = useState( @@ -83,8 +84,7 @@ const Search = () => { - '{searchQuery}'에 대한 - {'검색 결과가 없습니다.'} + {`'${searchQuery}'에 대한 검색 결과가 없습니다.`} @@ -112,7 +112,7 @@ const Search = () => { )} ); -}; +} export default Search; diff --git a/frontend/src/pages/SeeAllLatestTopics.tsx b/frontend/src/pages/SeeAllLatestTopics.tsx index e949f1a4c..9fcf84432 100644 --- a/frontend/src/pages/SeeAllLatestTopics.tsx +++ b/frontend/src/pages/SeeAllLatestTopics.tsx @@ -1,18 +1,19 @@ +import { lazy, Suspense } from 'react'; import { styled } from 'styled-components'; + +import Box from '../components/common/Box'; import Space from '../components/common/Space'; import Text from '../components/common/Text'; +import TopicCardContainerSkeleton from '../components/Skeletons/TopicListSkeleton'; import { FULLSCREEN } from '../constants'; +import { setFullScreenResponsive } from '../constants/responsive'; +import useNavigator from '../hooks/useNavigator'; import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; -import Box from '../components/common/Box'; -import { Suspense, lazy } from 'react'; -import TopicCardContainerSkeleton from '../components/Skeletons/TopicListSkeleton'; -import useNavigator from '../hooks/useNavigator'; -import { setFullScreenResponsive } from '../constants/responsive'; const TopicCardList = lazy(() => import('../components/TopicCardList')); -const SeeAllLatestTopics = () => { +function SeeAllLatestTopics() { const { routePage } = useNavigator(); useSetLayoutWidth(FULLSCREEN); useSetNavbarHighlight('home'); @@ -41,7 +42,7 @@ const SeeAllLatestTopics = () => { ); -}; +} const Wrapper = styled(Box)` width: 1036px; diff --git a/frontend/src/pages/SeeAllNearTopics.tsx b/frontend/src/pages/SeeAllNearTopics.tsx index 15cd30357..095d05e12 100644 --- a/frontend/src/pages/SeeAllNearTopics.tsx +++ b/frontend/src/pages/SeeAllNearTopics.tsx @@ -1,18 +1,19 @@ +import { lazy, Suspense } from 'react'; import { styled } from 'styled-components'; -import { FULLSCREEN } from '../constants'; -import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; -import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; + import Box from '../components/common/Box'; import Space from '../components/common/Space'; import Text from '../components/common/Text'; import TopicCardContainerSkeleton from '../components/Skeletons/TopicListSkeleton'; -import { Suspense, lazy } from 'react'; -import useNavigator from '../hooks/useNavigator'; +import { FULLSCREEN } from '../constants'; import { setFullScreenResponsive } from '../constants/responsive'; +import useNavigator from '../hooks/useNavigator'; +import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; +import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; const TopicCardList = lazy(() => import('../components/TopicCardList')); -const SeeAllNearTopics = () => { +function SeeAllNearTopics() { const { routePage } = useNavigator(); useSetLayoutWidth(FULLSCREEN); useSetNavbarHighlight('home'); @@ -41,7 +42,7 @@ const SeeAllNearTopics = () => { ); -}; +} const Wrapper = styled(Box)` width: 1036px; diff --git a/frontend/src/pages/SeeAllPopularTopics.tsx b/frontend/src/pages/SeeAllPopularTopics.tsx index d40d25c0e..1fba8adcd 100644 --- a/frontend/src/pages/SeeAllPopularTopics.tsx +++ b/frontend/src/pages/SeeAllPopularTopics.tsx @@ -1,18 +1,19 @@ -import Text from '../components/common/Text'; -import Space from '../components/common/Space'; +import { lazy, Suspense } from 'react'; import { styled } from 'styled-components'; + import Box from '../components/common/Box'; -import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; -import { FULLSCREEN } from '../constants'; -import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; -import { Suspense, lazy } from 'react'; +import Space from '../components/common/Space'; +import Text from '../components/common/Text'; import TopicCardContainerSkeleton from '../components/Skeletons/TopicListSkeleton'; -import useNavigator from '../hooks/useNavigator'; +import { FULLSCREEN } from '../constants'; import { setFullScreenResponsive } from '../constants/responsive'; +import useNavigator from '../hooks/useNavigator'; +import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; +import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; const TopicCardList = lazy(() => import('../components/TopicCardList')); -const SeeAllTopics = () => { +function SeeAllTopics() { const { routePage } = useNavigator(); useSetLayoutWidth(FULLSCREEN); useSetNavbarHighlight('home'); @@ -41,7 +42,7 @@ const SeeAllTopics = () => { ); -}; +} const Wrapper = styled(Box)` width: 1036px; diff --git a/frontend/src/pages/SelectedTopic.tsx b/frontend/src/pages/SelectedTopic.tsx index fb3f6f348..85cd01387 100644 --- a/frontend/src/pages/SelectedTopic.tsx +++ b/frontend/src/pages/SelectedTopic.tsx @@ -6,30 +6,31 @@ import { useEffect, useState, } from 'react'; -import { styled } from 'styled-components'; -import Space from '../components/common/Space'; -import { TopicDetailProps } from '../types/Topic'; import { useParams, useSearchParams } from 'react-router-dom'; -import PinDetail from './PinDetail'; +import { styled } from 'styled-components'; + import { getApi } from '../apis/getApi'; +import SeeTogetherNotFilledSVG from '../assets/seeTogetherBtn_notFilled.svg'; +import Button from '../components/common/Button'; +import Flex from '../components/common/Flex'; +import Space from '../components/common/Space'; +import Text from '../components/common/Text'; import PullPin from '../components/PullPin'; +import PinsOfTopicSkeleton from '../components/Skeletons/PinsOfTopicSkeleton'; +import { LAYOUT_PADDING, SIDEBAR } from '../constants'; import { CoordinatesContext } from '../context/CoordinatesContext'; +import { SeeTogetherContext } from '../context/SeeTogetherContext'; +import { TagContext } from '../context/TagContext'; import useNavigator from '../hooks/useNavigator'; import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; -import { LAYOUT_PADDING, SIDEBAR } from '../constants'; import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; -import PinsOfTopicSkeleton from '../components/Skeletons/PinsOfTopicSkeleton'; -import { TagContext } from '../context/TagContext'; import { PinProps } from '../types/Pin'; -import { SeeTogetherContext } from '../context/SeeTogetherContext'; -import Flex from '../components/common/Flex'; -import Button from '../components/common/Button'; -import SeeTogetherNotFilledSVG from '../assets/seeTogetherBtn_notFilled.svg'; -import Text from '../components/common/Text'; +import { TopicDetailProps } from '../types/Topic'; +import PinDetail from './PinDetail'; const PinsOfTopic = lazy(() => import('../components/PinsOfTopic')); -const SelectedTopic = () => { +function SelectedTopic() { const { topicId } = useParams(); const [searchParams, _] = useSearchParams(); const [topicDetails, setTopicDetails] = useState( @@ -189,7 +190,7 @@ const SelectedTopic = () => { )} ); -}; +} const Wrapper = styled.section<{ width: 'calc(100vw - 40px)' | 'calc(372px - 40px)'; diff --git a/frontend/src/pages/UpdatedPinDetail.tsx b/frontend/src/pages/UpdatedPinDetail.tsx index 59d8cc8eb..71edf7797 100644 --- a/frontend/src/pages/UpdatedPinDetail.tsx +++ b/frontend/src/pages/UpdatedPinDetail.tsx @@ -1,15 +1,16 @@ +import { SetURLSearchParams } from 'react-router-dom'; +import styled from 'styled-components'; + +import usePut from '../apiHooks/usePut'; +import { putApi } from '../apis/putApi'; +import Button from '../components/common/Button'; import Flex from '../components/common/Flex'; import Space from '../components/common/Space'; import Text from '../components/common/Text'; -import { putApi } from '../apis/putApi'; -import { SetURLSearchParams } from 'react-router-dom'; -import { ModifyPinFormProps } from '../types/tmap'; import InputContainer from '../components/InputContainer'; -import { hasErrorMessage, hasNullValue } from '../validations'; import useToast from '../hooks/useToast'; -import Button from '../components/common/Button'; -import styled from 'styled-components'; -import usePut from '../apiHooks/usePut'; +import { ModifyPinFormProps } from '../types/FormValues'; +import { hasErrorMessage, hasNullValue } from '../validations'; interface UpdatedPinDetailProps { searchParams: URLSearchParams; @@ -26,7 +27,7 @@ interface UpdatedPinDetailProps { ) => void; } -const UpdatedPinDetail = ({ +function UpdatedPinDetail({ searchParams, pinId, formValues, @@ -35,7 +36,7 @@ const UpdatedPinDetail = ({ setIsEditing, updatePinDetailAfterEditing, onChangeInput, -}: UpdatedPinDetailProps) => { +}: UpdatedPinDetailProps) { const { showToast } = useToast(); const { fetchPut } = usePut(); @@ -46,7 +47,7 @@ const UpdatedPinDetail = ({ }; const onClickUpdatePin = async () => { - if (hasErrorMessage(errorMessages) || hasNullValue(formValues, 'images')) { + if (hasErrorMessage(errorMessages) || hasNullValue(formValues)) { showToast('error', '입력하신 항목들을 다시 한 번 확인해주세요.'); return; } @@ -98,7 +99,7 @@ const UpdatedPinDetail = ({ ); -}; +} const Wrapper = styled.div` margin: 0 auto; diff --git a/frontend/src/types/tmap.d.ts b/frontend/src/types/tmap.d.ts index 182080a28..921fb207c 100644 --- a/frontend/src/types/tmap.d.ts +++ b/frontend/src/types/tmap.d.ts @@ -7,8 +7,8 @@ interface LatLngBounds { interface evt { data: { lngLat: { - _lat: number; - _lng: number; + lat: number; + lng: number; }; }; } From 01786ec4718b2ecd652bf55026ae030303a137db Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Fri, 6 Oct 2023 18:07:32 +0900 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20github=20actions=20=EB=B8=8C?= =?UTF-8?q?=EB=9E=9C=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/fe-merge-dev.yml | 10 +++++----- .github/workflows/fe-pull-request.yml | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/workflows/fe-merge-dev.yml b/.github/workflows/fe-merge-dev.yml index 3f2a243c1..2797eb306 100644 --- a/.github/workflows/fe-merge-dev.yml +++ b/.github/workflows/fe-merge-dev.yml @@ -4,7 +4,7 @@ on: workflow_dispatch: pull_request: - branches: [develop-FE-2] + branches: [develop-FE] types: [closed] paths: frontend/** @@ -23,8 +23,8 @@ jobs: uses: actions/setup-node@v3 with: node-version: 18 - cache: "npm" - cache-dependency-path: "frontend" + cache: 'npm' + cache-dependency-path: 'frontend' - name: Install npm run: npm install @@ -35,7 +35,7 @@ jobs: working-directory: frontend env: REACT_APP_GOOGLE_ANALYTICS: ${{ secrets.REACT_APP_GOOGLE_ANALYTICS }} - APP_URL: "https://mapbefine.kro.kr/api" + APP_URL: 'https://mapbefine.kro.kr/api' - name: upload to artifact uses: actions/upload-artifact@v3 @@ -66,7 +66,7 @@ jobs: uses: 8398a7/action-slack@v3 with: - mention: "here" + mention: 'here' if_mention: always status: ${{ job.status }} fields: workflow,job,commit,message,ref,author,took diff --git a/.github/workflows/fe-pull-request.yml b/.github/workflows/fe-pull-request.yml index b827458df..909a0170c 100644 --- a/.github/workflows/fe-pull-request.yml +++ b/.github/workflows/fe-pull-request.yml @@ -3,7 +3,7 @@ name: Frontend CI For Test Validation on: # pull request open과 reopen 시 실행한다. pull_request: - branches: [main, develop-FE-2] + branches: [main, develop-FE] paths: frontend/** defaults: From 48c453f9bb2c52649ffc29fa443b8ab5724dbf1a Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Fri, 6 Oct 2023 18:58:21 +0900 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20zustand=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package-lock.json | 44 ++++++++++++++++++++++++++++++++++---- frontend/package.json | 3 ++- 2 files changed, 42 insertions(+), 5 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index d20404872..8931b020a 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -15,7 +15,8 @@ "react-dom": "^18.2.0", "react-ga4": "^2.1.0", "react-router-dom": "^6.14.1", - "styled-components": "^6.0.3" + "styled-components": "^6.0.3", + "zustand": "^4.4.3" }, "devDependencies": { "@babel/core": "^7.22.8", @@ -7640,7 +7641,7 @@ "version": "15.7.7", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.7.tgz", "integrity": "sha512-FbtmBWCcSa2J4zL781Zf1p5YUBXQomPEcep9QZCfRfQgTxz3pJWiDFLebohZ9fFntX5ibzOkSsrJ0TEew8cAog==", - "dev": true + "devOptional": true }, "node_modules/@types/qs": { "version": "6.9.8", @@ -7658,7 +7659,7 @@ "version": "18.2.23", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.23.tgz", "integrity": "sha512-qHLW6n1q2+7KyBEYnrZpcsAmU/iiCh9WGCKgXvMxx89+TYdJWRjZohVIo9XTcoLhfX3+/hP0Pbulu3bCZQ9PSA==", - "dev": true, + "devOptional": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -7705,7 +7706,7 @@ "version": "0.16.4", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.4.tgz", "integrity": "sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==", - "dev": true + "devOptional": true }, "node_modules/@types/semver": { "version": "7.5.3", @@ -23588,6 +23589,14 @@ } } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util": { "version": "0.12.5", "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz", @@ -24595,6 +24604,33 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zustand": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.3.tgz", + "integrity": "sha512-oRy+X3ZazZvLfmv6viIaQmtLOMeij1noakIsK/Y47PWYhT8glfXzQ4j0YcP5i0P0qI1A4rIB//SGROGyZhx91A==", + "dependencies": { + "use-sync-external-store": "1.2.0" + }, + "engines": { + "node": ">=12.7.0" + }, + "peerDependencies": { + "@types/react": ">=16.8", + "immer": ">=9.0", + "react": ">=16.8" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "immer": { + "optional": true + }, + "react": { + "optional": true + } + } } } } diff --git a/frontend/package.json b/frontend/package.json index 19911057c..2ab0e1b41 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -22,7 +22,8 @@ "react-dom": "^18.2.0", "react-ga4": "^2.1.0", "react-router-dom": "^6.14.1", - "styled-components": "^6.0.3" + "styled-components": "^6.0.3", + "zustand": "^4.4.3" }, "devDependencies": { "@babel/core": "^7.22.8",