diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts index eff6f5baf..2fcd9ed08 100644 --- a/frontend/.storybook/main.ts +++ b/frontend/.storybook/main.ts @@ -21,6 +21,7 @@ const config: StorybookConfig = { name: '@storybook/react-webpack5', options: {}, }, + previewHead: (head) => `${head}`, docs: { autodocs: 'tag', }, diff --git a/frontend/.storybook/preview-head.html b/frontend/.storybook/preview-head.html new file mode 100644 index 000000000..30aa01387 --- /dev/null +++ b/frontend/.storybook/preview-head.html @@ -0,0 +1,4 @@ + diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx index 6d5569d49..530e8ce40 100644 --- a/frontend/.storybook/preview.tsx +++ b/frontend/.storybook/preview.tsx @@ -1,3 +1,4 @@ +import { Wrapper } from '@googlemaps/react-wrapper'; import type { Preview } from '@storybook/react'; import { initialize, mswDecorator } from 'msw-storybook-addon'; @@ -66,16 +67,33 @@ const preview: Preview = { }, }, decorators: [ - (Story) => ( - - - - - - - - - ), + (Story) => { + const map = document.getElementById('map'); + + if (map) { + map.style.visibility = 'hidden'; + } + + return ( + + + + + + + + + + + ); + }, mswDecorator, ], }; diff --git a/frontend/public/index.html b/frontend/public/index.html index 0fc8fbb16..54983024d 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -44,16 +44,13 @@ type="application/manifest+json" /> - - + + - 카페인: 편리한 전기차 충전소 지도 diff --git a/frontend/src/components/ui/StationDetailsWindow/congestion/CongestionStatistics.tsx b/frontend/src/components/ui/StationDetailsWindow/congestion/CongestionStatistics.tsx index ef94a0a7f..91b585978 100644 --- a/frontend/src/components/ui/StationDetailsWindow/congestion/CongestionStatistics.tsx +++ b/frontend/src/components/ui/StationDetailsWindow/congestion/CongestionStatistics.tsx @@ -77,7 +77,7 @@ const CongestionStatistics = ({ stationId }: CongestionStatisticsProps) => { {isError ? ( ( + + + + ), + ], args: { cities: [ { @@ -80,48 +87,36 @@ export default meta; // TODO: 스토리북 빌드 실패로 임시로 조치해뒀으니 수정 바랍니다. export const Default = ({ ...args }: SearchResultProps) => { - return ( - - - - ); + return ; }; export const NoResult = () => { return ( - - null} - isError={false} - isLoading={false} - showStationDetails={() => null} - /> - + null} + isError={false} + isLoading={false} + showStationDetails={() => null} + /> ); }; export const Error = () => { return ( - - null} - isError={true} - isLoading={false} - showStationDetails={() => null} - /> - + null} + isError={true} + isLoading={false} + showStationDetails={() => null} + /> ); }; const Container = styled.div` width: 34rem; - height: 16rem; -`; - -const SubContainer = styled(Container)` - height: 24rem; + height: 34rem; `; diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx index a07d0d683..b12050316 100644 --- a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx +++ b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx @@ -1,27 +1,7 @@ -import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; import type { Meta } from '@storybook/react'; import { styled } from 'styled-components'; -import type { ChangeEvent, FocusEvent, FormEvent, MouseEvent } from 'react'; -import { useState } from 'react'; - -import { useQueryClient } from '@tanstack/react-query'; - -import { fetchSearchedStations, useSearchStations } from '@hooks/tanstack-query/useSearchStations'; -import { useDebounce } from '@hooks/useDebounce'; - -import Loader from '@common/Loader'; - -import { useNavigationBar } from '@ui/Navigator/NavigationBar/hooks/useNavigationBar'; -import StationDetailsWindow from '@ui/StationDetailsWindow'; - -import { MOBILE_BREAKPOINT } from '@constants'; -import { QUERY_KEY_SEARCHED_STATION, QUERY_KEY_STATION_MARKERS } from '@constants/queryKeys'; - -import { pillStyle } from '../../../style'; -import type { StationPosition } from '../../../types'; -import Button from '../../common/Button'; -import SearchResult from './SearchResult'; +import StationSearchBar from './StationSearchBar'; const meta = { title: 'UI/StationSearchBar', @@ -36,140 +16,15 @@ const meta = { export default meta; -// TODO: addon으로 googleMap 관련 함수 제외하기 export const Default = () => { - const [isFocused, setIsFocused] = useState(false); - - const [searchWord, setSearchWord] = useState(''); - const [debouncedSearchWord, setDebouncedSearchWord] = useState(searchWord); - const queryClient = useQueryClient(); - const { openLastPanel } = useNavigationBar(); - - useDebounce( - () => { - setDebouncedSearchWord(searchWord); - }, - [searchWord], - 400 - ); - - const { - data: searchResult, - isLoading, - isError, - isFetching, - } = useSearchStations(debouncedSearchWord); - - const handleOpenResult = (event: MouseEvent | FocusEvent) => { - event.stopPropagation(); - setIsFocused(true); - }; - - const handleCloseResult = () => { - setIsFocused(false); - }; - - const handleSubmitSearchWord = async (event: FormEvent) => { - event.preventDefault(); - handleCloseResult(); - - const { stations } = await fetchSearchedStations(searchWord); - - if (stations !== undefined && stations.length > 0) { - const [{ stationId, latitude, longitude }] = stations; - showStationDetails({ stationId, latitude, longitude }); - } - - queryClient.invalidateQueries({ queryKey: [QUERY_KEY_SEARCHED_STATION] }); - }; - - const showStationDetails = ({ stationId, latitude, longitude }: StationPosition) => { - queryClient.invalidateQueries({ queryKey: [QUERY_KEY_STATION_MARKERS] }); - openLastPanel(); - }; - - const handleChangeSearchWord = ({ target: { value } }: ChangeEvent) => { - const searchWord = encodeURIComponent(value); - - setIsFocused(true); - setSearchWord(searchWord); - }; - - return ( - - - - - {isFocused && searchResult && ( - - )} - - ); + return ; }; const S = { Container: styled.div` - width: 30rem; - - @media screen and (max-width: ${MOBILE_BREAKPOINT}px) { - width: 100%; - } - `, - - Form: styled.form` - position: relative; - min-width: 30rem; - - @media screen and (max-width: ${MOBILE_BREAKPOINT}px) { - min-width: 100%; - } - `, - - Search: styled.input` - ${pillStyle}; - - background: #fcfcfc; - border: 1px solid #d0d2d8; - - width: 100%; - padding: 1.9rem 4.6rem 2rem 1.8rem; - font-size: 1.3rem; - - & + button { - position: absolute; - right: 2rem; - top: 50%; - transform: translateY(-50%); - } - - &:focus { - box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2); - outline: 0; - } + position: fixed; + top: 24px; + left: 8rem; + z-index: 9999; `, }; diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchWindow.stories.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchWindow.stories.tsx index 32836a66e..d10fa6ba3 100644 --- a/frontend/src/components/ui/StationSearchWindow/StationSearchWindow.stories.tsx +++ b/frontend/src/components/ui/StationSearchWindow/StationSearchWindow.stories.tsx @@ -1,47 +1,27 @@ -import { ChevronLeftIcon } from '@heroicons/react/24/outline'; import type { Meta } from '@storybook/react'; -import { css, styled } from 'styled-components'; +import styled from 'styled-components'; -import Button from '../../common/Button'; -import Text from '../../common/Text'; -import Navigator from '../Navigator'; -import { Default as StationSearchBar } from './StationSearchBar.stories'; import StationSearchWindow from './StationSearchWindow'; const meta = { title: 'UI/StationSearchWindow', component: StationSearchWindow, + decorators: [ + (Story) => ( + + + + ), + ], } satisfies Meta; export default meta; export const Default = () => { - return ( - <> - - - - - - 주변 충전소 - - - - ); + return ; }; -const S = { - Container: styled.section` - width: 34rem; - height: 100vh; - background: #fcfcfc; - outline: 1.5px solid #e1e4eb; - padding: 2.8rem 2.2rem 5.2rem; - `, -}; - -const labelText = css` - padding: 3.6rem 0 2.2rem; +const Container = styled.div` + position: absolute; + z-index: 9999; `; diff --git a/frontend/src/hooks/tanstack-query/station-details/reviews/useRemoveReview.ts b/frontend/src/hooks/tanstack-query/station-details/reviews/useRemoveReview.ts index 44f8f4cdb..8260228bb 100644 --- a/frontend/src/hooks/tanstack-query/station-details/reviews/useRemoveReview.ts +++ b/frontend/src/hooks/tanstack-query/station-details/reviews/useRemoveReview.ts @@ -17,6 +17,7 @@ export interface FetchRemoveReviewRequest { const fetchRemoveReview = async (fetchRemoveReviewRequestParams: FetchRemoveReviewRequest) => { const { reviewId } = fetchRemoveReviewRequestParams; const memberToken = memberTokenStore.getState(); + return fetch(`${SERVER_URL}/reviews/${reviewId}`, { method: 'DELETE', headers: { @@ -32,7 +33,7 @@ export const useRemoveReview = (stationId: string, reviewId: number) => { const { mutate, isLoading: isRemoveReviewLoading } = useMutation({ mutationFn: fetchRemoveReview, onSuccess: () => { - toastActions.showToast('리뷰가 삭제됐습니다.', 'success', 'bottom-center'); + toastActions.showToast('리뷰가 삭제됐습니다.', 'success'); }, onSettled: () => { queryClient.invalidateQueries({ diff --git a/frontend/src/style/GlobalStyle.ts b/frontend/src/style/GlobalStyle.ts index f82cfdf1a..615ec330a 100644 --- a/frontend/src/style/GlobalStyle.ts +++ b/frontend/src/style/GlobalStyle.ts @@ -42,7 +42,4 @@ export const GlobalStyle = createGlobalStyle` padding: 0; } - button:focus, button:active { - outline: none; - } `;