From 8249203981cc6d521839e4ea289baec9e6ad443f Mon Sep 17 00:00:00 2001 From: sayoon-mandarine Date: Tue, 8 Oct 2024 14:04:52 +0900 Subject: [PATCH 01/16] KL-159/refactor: change date parser function --- jsconfig.json | 1 - src/components/Comment/CommentListContent.jsx | 7 +++-- src/pages/ReviewPage/ReviewInfo.jsx | 3 +- src/utils/dateParser.js | 31 +++++++++++++++---- 4 files changed, 32 insertions(+), 10 deletions(-) diff --git a/jsconfig.json b/jsconfig.json index 79d6c4c8..6927ae05 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -2,7 +2,6 @@ "compilerOptions": { "baseUrl": "./src", "paths": { - "@/*": ["*"], "@components/*": ["components/*"], "@constants/*": ["constants/*"], "@hooks/*": ["hooks/*"], diff --git a/src/components/Comment/CommentListContent.jsx b/src/components/Comment/CommentListContent.jsx index 8ce8552c..a732049a 100644 --- a/src/components/Comment/CommentListContent.jsx +++ b/src/components/Comment/CommentListContent.jsx @@ -3,10 +3,11 @@ import styled from 'styled-components' import PropTypes from 'prop-types' import { useNavigate } from 'react-router-dom' +import theme from '@styles/theme' +import dateParser from '@utils/dateParser' import CommentEdit from './CommentEdit' import ProfileImage from '../UserProfile/ProfileImage' import CommentOptions from './CommentOptions' -import theme from '@styles/theme' export default function CommentListContent({ comment, canEdit }) { const navigate = useNavigate() @@ -38,7 +39,9 @@ export default function CommentListContent({ comment, canEdit }) { > {comment.member.name} - {comment.createdAt} + + {dateParser(comment.createdAt)} + {canEdit && (
-

{review.createdAt}

{canEdit && } +

{dateParser(review.createdAt)}

{canEdit && }
diff --git a/src/utils/dateParser.js b/src/utils/dateParser.js index 344bc483..c65257aa 100644 --- a/src/utils/dateParser.js +++ b/src/utils/dateParser.js @@ -1,10 +1,29 @@ -const dateParser = (utcDate) => { - const date = new Date(utcDate) - const year = date.getUTCFullYear() - const month = String(date.getUTCMonth() + 1).padStart(2, '0') - const day = String(date.getUTCDate()).padStart(2, '0') +const dateParser = (utcTime) => { + const utcDate = new Date(utcTime) - return `${year}.${month}.${day}` + const now = new Date() + const timeDiff = now.getTime() - utcDate.getTime() + + const seconds = Math.floor(timeDiff / 1000) + const minutes = Math.floor(seconds / 60) + const hours = Math.floor(minutes / 60) + const days = Math.floor(hours / 24) + + if (days > 30) { + const year = utcDate.getUTCFullYear() + const month = String(utcDate.getUTCMonth() + 1).padStart(2, '0') + const day = String(utcDate.getUTCDate()).padStart(2, '0') + + return `${year}.${month}.${day}` + } + + if (days > 0) return `${days}일 전` + + if (hours > 0) return `${hours}시간 전` + + if (minutes > 0) return `${minutes}분 전` + + return `${seconds}초 전` } export default dateParser From e42995a16b39bc74eec40f6b81eb6ed9e1691a87 Mon Sep 17 00:00:00 2001 From: sayoon-mandarine Date: Tue, 8 Oct 2024 14:17:43 +0900 Subject: [PATCH 02/16] KL-159/chore: fix typo --- src/pages/ReviewPage/ReviewLikeButton.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReviewPage/ReviewLikeButton.jsx b/src/pages/ReviewPage/ReviewLikeButton.jsx index c86b9f8e..aeb23ef3 100644 --- a/src/pages/ReviewPage/ReviewLikeButton.jsx +++ b/src/pages/ReviewPage/ReviewLikeButton.jsx @@ -40,7 +40,7 @@ export default function ReviewLikeButton({ ) } onClick={handleLike} - tooltip={isLiked ? '좋아요' : '취소'} + tooltip={isLiked ? '취소' : '좋아요'} /> ) } From 346a367c82275cd778bdeb1ae27c105296142e01 Mon Sep 17 00:00:00 2001 From: sayoon-mandarine Date: Tue, 8 Oct 2024 14:34:24 +0900 Subject: [PATCH 03/16] KL-159/feat: add logout button on userpage --- src/components/UserProfile/UserEditButton.jsx | 50 +++++++++++++------ 1 file changed, 36 insertions(+), 14 deletions(-) diff --git a/src/components/UserProfile/UserEditButton.jsx b/src/components/UserProfile/UserEditButton.jsx index 7a085ac0..f04277c0 100644 --- a/src/components/UserProfile/UserEditButton.jsx +++ b/src/components/UserProfile/UserEditButton.jsx @@ -2,25 +2,47 @@ import React from 'react' import { Button } from 'antd' import { useNavigate } from 'react-router-dom' import theme from '@styles/theme' +import { kyInstance } from '@hooks/kyInstance' function UserEditButton() { const naviagte = useNavigate() return ( - + <> + + + ) } From be7e88ab3e49685f8ddf2f0912b0bb44f49a4a70 Mon Sep 17 00:00:00 2001 From: seoulyego Date: Thu, 3 Oct 2024 19:30:32 +0900 Subject: [PATCH 04/16] KL-182/style: reorder imports MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - import declare를 재정렬했습니다. --- src/App.jsx | 1 - src/components/Button/IconTextButton.jsx | 2 +- src/components/Carousel/Carousel.js | 2 +- src/components/Comment/Comment.jsx | 1 - src/components/Comment/CommentEdit.jsx | 5 ++--- src/components/Comment/CommentInput.jsx | 5 ++--- src/components/Comment/CommentList.jsx | 3 +-- src/components/Comment/CommentListContent.jsx | 1 - src/components/Comment/CommentOptions.jsx | 5 ++--- src/components/Navbar/NavBar.jsx | 3 +-- src/components/Navbar/NavList.jsx | 7 +++---- src/components/Navbar/components/HomeButton.jsx | 2 +- src/components/Navbar/components/LoginButton.jsx | 2 +- src/components/Navbar/components/LoginModal.jsx | 3 +-- src/components/Navbar/components/Notification.jsx | 1 - src/components/Navbar/components/SearchModal.jsx | 3 +-- src/components/Notification/NotificationContent.jsx | 5 ++--- src/components/Notification/NotificationHeader.jsx | 1 - src/components/OptionDropdown/OptionDropdown.jsx | 5 ++--- src/components/PreviewContent/PreviewContent.jsx | 4 ++-- src/components/ProductFeed/ProductFeed.jsx | 2 +- src/components/UserProfile/UserEditButton.jsx | 2 +- src/components/UserProfile/UserFollowButton.jsx | 5 ++--- src/components/UserProfile/UserProfile.jsx | 2 +- src/hooks/useDebouncedSearch.jsx | 7 +++---- src/hooks/useFetchContent.jsx | 4 ++-- src/hooks/useInitializeState.js | 2 +- src/hooks/useLoginModal.js | 2 +- src/pages/ErrorPage.jsx | 3 +-- .../components/AdditionalFilter/AdditionalFilter.jsx | 2 +- .../components/AdditionalFilter/TagSwitchArray.jsx | 4 ++-- .../components/BasicFilter/CategorySection.jsx | 4 ++-- .../FeedPage/components/BasicFilter/CitySection.jsx | 4 ++-- .../components/BasicFilter/CountrySection.jsx | 2 +- .../components/BasicFilter/SubcategoryArray.jsx | 2 +- src/pages/HomePage/HomePage.jsx | 11 +++++------ src/pages/HomePage/MainBanner.jsx | 6 +++--- src/pages/HomePage/ReviewCarousel.jsx | 4 ++-- src/pages/Layout.jsx | 5 ++--- src/pages/ReviewPage/ReviewFloatButton.jsx | 5 ++--- src/pages/ReviewPage/ReviewImageBlock.jsx | 2 +- src/pages/ReviewPage/ReviewInfo.jsx | 5 ++--- src/pages/ReviewPage/ReviewLikeButton.jsx | 3 +-- src/pages/ReviewPage/ReviewMiddle.jsx | 2 +- src/pages/ReviewPage/ReviewOptions.jsx | 7 +++---- src/pages/ReviewPage/ReviewPage.jsx | 7 +++---- src/pages/SubmitPage/SubmitPage.jsx | 5 ++--- .../components/CategorySubmit/CategorySelectList.jsx | 3 +-- .../{CategorSubmitForm.jsx => CategorySubmitForm.jsx} | 3 +-- .../components/CategorySubmit/SelectButtons.jsx | 2 +- .../components/CategorySubmit/TagSelectForm.jsx | 3 +-- .../components/ImageSubmit/ImageSubmitForm.jsx | 3 +-- .../components/InfoSubmit/DescriptionInput.jsx | 2 +- .../SubmitPage/components/InfoSubmit/InfoSubmit.jsx | 3 +-- .../SubmitPage/components/InfoSubmit/NameInput.jsx | 2 +- .../components/InfoSubmit/NumberInputForm.jsx | 5 ++--- src/pages/SubmitPage/components/PrevNextButtons.jsx | 2 +- .../components/RegionSubmit/AddressInputForm.jsx | 5 ++--- .../components/RegionSubmit/RegionSelectList.jsx | 5 ++--- .../components/RegionSubmit/RegionSubmitForm.jsx | 2 +- src/pages/SubmitPage/components/SubmitSteps.jsx | 1 - src/pages/SubmitPage/components/index.js | 4 ++-- src/pages/UserEditPage/ProfileEditBlock.jsx | 5 ++--- src/pages/UserEditPage/SaveButton.jsx | 7 +++---- src/pages/UserEditPage/UserEditPage.jsx | 1 - src/pages/UserPage/FollowingList.jsx | 3 +-- src/pages/UserPage/MyMenu.jsx | 3 +-- src/pages/UserPage/MyPage.jsx | 5 ++--- src/pages/UserPage/ReviewList.jsx | 2 +- src/pages/UserPage/UserPage.jsx | 2 +- src/router.jsx | 1 - 71 files changed, 101 insertions(+), 143 deletions(-) rename src/pages/SubmitPage/components/CategorySubmit/{CategorSubmitForm.jsx => CategorySubmitForm.jsx} (90%) diff --git a/src/App.jsx b/src/App.jsx index 39a0cbdc..a673365d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,7 +1,6 @@ import React from 'react' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' - import '@styles/font.css' import Layout from '@pages/Layout' diff --git a/src/components/Button/IconTextButton.jsx b/src/components/Button/IconTextButton.jsx index 99e81fc8..01d34b3d 100644 --- a/src/components/Button/IconTextButton.jsx +++ b/src/components/Button/IconTextButton.jsx @@ -1,6 +1,6 @@ import React from 'react' -import { Button } from 'antd' import PropTypes from 'prop-types' +import { Button } from 'antd' import { IconContext } from 'react-icons' function IconTextButton({ diff --git a/src/components/Carousel/Carousel.js b/src/components/Carousel/Carousel.js index fcfe0f39..d81f4a60 100644 --- a/src/components/Carousel/Carousel.js +++ b/src/components/Carousel/Carousel.js @@ -1,5 +1,5 @@ -import Flickity from 'react-flickity-component' import styled from 'styled-components' +import Flickity from 'react-flickity-component' const StyledFlickity = styled(Flickity)` width: 100%; diff --git a/src/components/Comment/Comment.jsx b/src/components/Comment/Comment.jsx index 9fc239ee..ef14f163 100644 --- a/src/components/Comment/Comment.jsx +++ b/src/components/Comment/Comment.jsx @@ -2,7 +2,6 @@ import React from 'react' import styled from 'styled-components' import PropTypes from 'prop-types' import { useParams } from 'react-router-dom' - import theme from '@styles/theme' import useKyQuery from '@hooks/useKyQuery' import CommentInput from './CommentInput' diff --git a/src/components/Comment/CommentEdit.jsx b/src/components/Comment/CommentEdit.jsx index 9948ad80..8a1ed528 100644 --- a/src/components/Comment/CommentEdit.jsx +++ b/src/components/Comment/CommentEdit.jsx @@ -1,11 +1,10 @@ import React, { useState } from 'react' +import styled from 'styled-components' import PropTypes from 'prop-types' import { Input, Button, ConfigProvider } from 'antd' -import styled from 'styled-components' - +import theme from '@styles/theme' import { method } from '@hooks/kyInstance' import useKyMutation from '@hooks/useKyMutation' -import theme from '@styles/theme' const inputTheme = { components: { diff --git a/src/components/Comment/CommentInput.jsx b/src/components/Comment/CommentInput.jsx index 24b7dce3..0e7b9bf3 100644 --- a/src/components/Comment/CommentInput.jsx +++ b/src/components/Comment/CommentInput.jsx @@ -1,12 +1,11 @@ import React, { useState } from 'react' +import styled from 'styled-components' import PropTypes from 'prop-types' import { Input, Button, ConfigProvider } from 'antd' -import styled from 'styled-components' - +import theme from '@styles/theme' import { method } from '@hooks/kyInstance' import useLoginModal from '@hooks/useLoginModal' import useKyMutation from '@hooks/useKyMutation' -import theme from '@styles/theme' import ProfileImage from '../UserProfile/ProfileImage' const inputTheme = { diff --git a/src/components/Comment/CommentList.jsx b/src/components/Comment/CommentList.jsx index e705d46d..3d3e17f1 100644 --- a/src/components/Comment/CommentList.jsx +++ b/src/components/Comment/CommentList.jsx @@ -1,7 +1,6 @@ -import { React } from 'react' +import React from 'react' import styled from 'styled-components' import PropTypes from 'prop-types' - import CommentListContent from './CommentListContent' export default function CommentList({ comments, userId }) { diff --git a/src/components/Comment/CommentListContent.jsx b/src/components/Comment/CommentListContent.jsx index a732049a..7fb929f2 100644 --- a/src/components/Comment/CommentListContent.jsx +++ b/src/components/Comment/CommentListContent.jsx @@ -2,7 +2,6 @@ import React, { useState } from 'react' import styled from 'styled-components' import PropTypes from 'prop-types' import { useNavigate } from 'react-router-dom' - import theme from '@styles/theme' import dateParser from '@utils/dateParser' import CommentEdit from './CommentEdit' diff --git a/src/components/Comment/CommentOptions.jsx b/src/components/Comment/CommentOptions.jsx index 15405e33..6cc41b4a 100644 --- a/src/components/Comment/CommentOptions.jsx +++ b/src/components/Comment/CommentOptions.jsx @@ -1,11 +1,10 @@ import React from 'react' -import { Modal, notification } from 'antd' import PropTypes from 'prop-types' - +import { Modal, notification } from 'antd' +import theme from '@styles/theme' import { method } from '@hooks/kyInstance' import useKyMutation from '@hooks/useKyMutation' import OptionDropdown from '../OptionDropdown/OptionDropdown' -import theme from '@styles/theme' function CommentOptions({ commentId, setEditMode }) { const productURL = window.location.pathname.slice(1) diff --git a/src/components/Navbar/NavBar.jsx b/src/components/Navbar/NavBar.jsx index d0befbc9..9d000034 100644 --- a/src/components/Navbar/NavBar.jsx +++ b/src/components/Navbar/NavBar.jsx @@ -1,7 +1,6 @@ import React from 'react' -import { createPortal } from 'react-dom' import styled from 'styled-components' - +import { createPortal } from 'react-dom' import theme from '@styles/theme' import NavList from './NavList' import LoginButton from './components/LoginButton' diff --git a/src/components/Navbar/NavList.jsx b/src/components/Navbar/NavList.jsx index c628668f..8cd86040 100644 --- a/src/components/Navbar/NavList.jsx +++ b/src/components/Navbar/NavList.jsx @@ -1,10 +1,9 @@ import React from 'react' -import { styled } from 'styled-components' - +import styled from 'styled-components' +import router from '@/router' +import theme from '@styles/theme' import { navIndex, modalIndex } from '@constants/navIndex' import { useCurrentPageStore, useModalStore } from '@stores/navbarStores' -import theme from '@styles/theme' -import router from '@/router' import useLoginStatus from '@/stores/useLoginStatus' import Notification from './components/Notification' import Icons from '../Icons/Icons' diff --git a/src/components/Navbar/components/HomeButton.jsx b/src/components/Navbar/components/HomeButton.jsx index 3bea41b5..abc953c7 100644 --- a/src/components/Navbar/components/HomeButton.jsx +++ b/src/components/Navbar/components/HomeButton.jsx @@ -1,7 +1,7 @@ import React from 'react' import styled from 'styled-components' -import theme from '@styles/theme' import router from '@/router' +import theme from '@styles/theme' import PlainButton from '../../Button/PlainButton' export default function HomeButton() { diff --git a/src/components/Navbar/components/LoginButton.jsx b/src/components/Navbar/components/LoginButton.jsx index 9f3e8f20..322b1290 100644 --- a/src/components/Navbar/components/LoginButton.jsx +++ b/src/components/Navbar/components/LoginButton.jsx @@ -1,5 +1,5 @@ import React from 'react' - +import router from '@/router' import { modalIndex } from '@constants/navIndex' import { useModalStore } from '@stores/navbarStores' import useUserData from '@hooks/useUserData' diff --git a/src/components/Navbar/components/LoginModal.jsx b/src/components/Navbar/components/LoginModal.jsx index 90c61d5f..a304c0f1 100644 --- a/src/components/Navbar/components/LoginModal.jsx +++ b/src/components/Navbar/components/LoginModal.jsx @@ -1,11 +1,10 @@ import React from 'react' import styled from 'styled-components' import { Modal, Button, ConfigProvider } from 'antd' - +import theme from '@styles/theme' import { KakaoLogo, NaverLogo } from '@images/logos' import { modalIndex } from '@constants/navIndex' import { useModalStore } from '@stores/navbarStores' -import theme from '@styles/theme' const ModalTheme = { components: { diff --git a/src/components/Navbar/components/Notification.jsx b/src/components/Navbar/components/Notification.jsx index df4e5bda..2bb30cf9 100644 --- a/src/components/Navbar/components/Notification.jsx +++ b/src/components/Navbar/components/Notification.jsx @@ -1,7 +1,6 @@ import React from 'react' import styled from 'styled-components' import { Dropdown, Badge } from 'antd' - import { modalIndex } from '@constants/navIndex' import { useModalStore } from '@stores/navbarStores' import useNotificationFetch from '@hooks/useNotificationFetch' diff --git a/src/components/Navbar/components/SearchModal.jsx b/src/components/Navbar/components/SearchModal.jsx index 996ebbeb..7b305009 100644 --- a/src/components/Navbar/components/SearchModal.jsx +++ b/src/components/Navbar/components/SearchModal.jsx @@ -1,11 +1,10 @@ import React from 'react' import styled from 'styled-components' import { Modal, ConfigProvider } from 'antd' - +import theme from '@styles/theme' import { modalIndex } from '@constants/navIndex' import { useModalStore } from '@stores/navbarStores' import useDebouncedSearch from '@hooks/useDebouncedSearch' -import theme from '@styles/theme' import Icons from '../../Icons/Icons' const ModalTheme = { diff --git a/src/components/Notification/NotificationContent.jsx b/src/components/Notification/NotificationContent.jsx index f0a3ee2a..cf0aef4e 100644 --- a/src/components/Notification/NotificationContent.jsx +++ b/src/components/Notification/NotificationContent.jsx @@ -1,11 +1,10 @@ import React from 'react' -import PropTypes from 'prop-types' import styled from 'styled-components' - +import PropTypes from 'prop-types' import router from '@/router' +import theme from '@styles/theme' import { method } from '@hooks/kyInstance' import useKyMutation from '@hooks/useKyMutation' -import theme from '@styles/theme' function NotificationContent({ content }) { const { mutateAsync } = useKyMutation( diff --git a/src/components/Notification/NotificationHeader.jsx b/src/components/Notification/NotificationHeader.jsx index 773ddd2b..49299e7d 100644 --- a/src/components/Notification/NotificationHeader.jsx +++ b/src/components/Notification/NotificationHeader.jsx @@ -2,7 +2,6 @@ import React from 'react' import styled from 'styled-components' import PropTypes from 'prop-types' import theme from '@styles/theme' - import useReadNotificationAll from '@hooks/useReadNotificationAll' import useDeleteNotificationAll from '@hooks/useDeleteNotificationAll' diff --git a/src/components/OptionDropdown/OptionDropdown.jsx b/src/components/OptionDropdown/OptionDropdown.jsx index faa96908..38795dfa 100644 --- a/src/components/OptionDropdown/OptionDropdown.jsx +++ b/src/components/OptionDropdown/OptionDropdown.jsx @@ -1,10 +1,9 @@ import React from 'react' -import PropTypes from 'prop-types' import styled from 'styled-components' +import PropTypes from 'prop-types' import { Dropdown } from 'antd' - -import Icons from '../Icons/Icons' import theme from '@styles/theme' +import Icons from '../Icons/Icons' function OptionDropdown({ editOnclick, deleteOnclick }) { const items = [ diff --git a/src/components/PreviewContent/PreviewContent.jsx b/src/components/PreviewContent/PreviewContent.jsx index e8236c5d..0c607b13 100644 --- a/src/components/PreviewContent/PreviewContent.jsx +++ b/src/components/PreviewContent/PreviewContent.jsx @@ -1,8 +1,8 @@ import React from 'react' import PropTypes from 'prop-types' -import { StarFilled } from '@ant-design/icons' -import { FaHeart } from 'react-icons/fa6' import { Link } from 'react-router-dom' +import { FaHeart } from 'react-icons/fa6' +import { StarFilled } from '@ant-design/icons' import PreviewLikeButton from '../Button/PreviewLikeButton' import { BlueTag } from '../Tags/Tags.style' import { diff --git a/src/components/ProductFeed/ProductFeed.jsx b/src/components/ProductFeed/ProductFeed.jsx index 44afd81c..b25d0833 100644 --- a/src/components/ProductFeed/ProductFeed.jsx +++ b/src/components/ProductFeed/ProductFeed.jsx @@ -1,9 +1,9 @@ import React from 'react' import PropTypes from 'prop-types' import { Pagination, ConfigProvider } from 'antd' +import theme from '@styles/theme' import PreviewContent from '../PreviewContent/PreviewContent' import { FeedContainer, StyledFeed } from './ProductFeed.style' -import theme from '@styles/theme' function ProductFeed({ userData, data, setPageData }) { return ( diff --git a/src/components/UserProfile/UserEditButton.jsx b/src/components/UserProfile/UserEditButton.jsx index f04277c0..cbd63f18 100644 --- a/src/components/UserProfile/UserEditButton.jsx +++ b/src/components/UserProfile/UserEditButton.jsx @@ -1,6 +1,6 @@ import React from 'react' -import { Button } from 'antd' import { useNavigate } from 'react-router-dom' +import { Button } from 'antd' import theme from '@styles/theme' import { kyInstance } from '@hooks/kyInstance' diff --git a/src/components/UserProfile/UserFollowButton.jsx b/src/components/UserProfile/UserFollowButton.jsx index 34449e61..2a1a9f22 100644 --- a/src/components/UserProfile/UserFollowButton.jsx +++ b/src/components/UserProfile/UserFollowButton.jsx @@ -1,12 +1,11 @@ import React from 'react' import PropTypes from 'prop-types' import { Button, ConfigProvider, notification } from 'antd' - -import useLoginModal from '@hooks/useLoginModal' -import useUserData from '@hooks/useUserData' import theme from '@styles/theme' +import useUserData from '@hooks/useUserData' import useKyQuery from '@hooks/useKyQuery' import useKyMutation from '@hooks/useKyMutation' +import useLoginModal from '@hooks/useLoginModal' const useCheckFollow = (id) => { const { diff --git a/src/components/UserProfile/UserProfile.jsx b/src/components/UserProfile/UserProfile.jsx index 07f7c061..fe899950 100644 --- a/src/components/UserProfile/UserProfile.jsx +++ b/src/components/UserProfile/UserProfile.jsx @@ -1,6 +1,6 @@ import React from 'react' -import PropTypes from 'prop-types' import styled from 'styled-components' +import PropTypes from 'prop-types' import { useNavigate } from 'react-router-dom' import theme from '@styles/theme' import ProfileImage from './ProfileImage' diff --git a/src/hooks/useDebouncedSearch.jsx b/src/hooks/useDebouncedSearch.jsx index 6342257b..d131bc44 100644 --- a/src/hooks/useDebouncedSearch.jsx +++ b/src/hooks/useDebouncedSearch.jsx @@ -1,11 +1,10 @@ import React, { useState, useCallback } from 'react' import styled from 'styled-components' -import { Divider } from 'antd' import { debounce } from 'lodash-es' - -import { modalIndex } from '@constants/navIndex' -import theme from '@styles/theme' +import { Divider } from 'antd' import router from '@/router' +import theme from '@styles/theme' +import { modalIndex } from '@constants/navIndex' import { kyInstance } from './kyInstance' const SearchMapping = { diff --git a/src/hooks/useFetchContent.jsx b/src/hooks/useFetchContent.jsx index 652d2c92..f3cdc22f 100644 --- a/src/hooks/useFetchContent.jsx +++ b/src/hooks/useFetchContent.jsx @@ -1,9 +1,9 @@ import React, { useState, useEffect } from 'react' import initialPageData from '@constants/initialPageData' -import useUserData from './useUserData' -import useKyQuery from './useKyQuery' import parseQueryParams from '@utils/parseQueryParams' import ProductFeed from '@components/ProductFeed/ProductFeed' +import useUserData from './useUserData' +import useKyQuery from './useKyQuery' const useFetchContent = (id) => { const [currentPage, setCurrentPage] = useState(initialPageData) diff --git a/src/hooks/useInitializeState.js b/src/hooks/useInitializeState.js index f805a655..9931b1bd 100644 --- a/src/hooks/useInitializeState.js +++ b/src/hooks/useInitializeState.js @@ -1,8 +1,8 @@ import { useEffect } from 'react' import { useLoaderData, useLocation } from 'react-router-dom' import { useShallow } from 'zustand/react/shallow' -import useFeedStore from '@stores/useFeedStore' import inArray from '@utils/inArray' +import useFeedStore from '@stores/useFeedStore' const useInitializeCountry = (locationState, regionData) => { const selectedCountry = useFeedStore((state) => state.selectedCountry) diff --git a/src/hooks/useLoginModal.js b/src/hooks/useLoginModal.js index 7beb1901..a66e5418 100644 --- a/src/hooks/useLoginModal.js +++ b/src/hooks/useLoginModal.js @@ -1,5 +1,5 @@ -import { useModalStore } from '@stores/navbarStores' import { modalIndex } from '@constants/navIndex' +import { useModalStore } from '@stores/navbarStores' const useLoginModal = () => { const setModalState = useModalStore((state) => state.setModalState) diff --git a/src/pages/ErrorPage.jsx b/src/pages/ErrorPage.jsx index ad9067e2..612c7efe 100644 --- a/src/pages/ErrorPage.jsx +++ b/src/pages/ErrorPage.jsx @@ -1,10 +1,9 @@ import React, { useEffect } from 'react' import styled from 'styled-components' import { useRouteError, useNavigate } from 'react-router-dom' - +import theme from '@styles/theme' import errorCode from '@/constants/errorCode' import ErrorImage from '@images/err.jpg' -import theme from '@styles/theme' export default function ErrorPage() { const error = useRouteError() diff --git a/src/pages/FeedPage/components/AdditionalFilter/AdditionalFilter.jsx b/src/pages/FeedPage/components/AdditionalFilter/AdditionalFilter.jsx index c072c690..03e34c98 100644 --- a/src/pages/FeedPage/components/AdditionalFilter/AdditionalFilter.jsx +++ b/src/pages/FeedPage/components/AdditionalFilter/AdditionalFilter.jsx @@ -1,6 +1,6 @@ import React from 'react' -import { StyleSection, ContentContainer } from '../../FeedPage.style' import TagSwitchArray from './TagSwitchArray' +import { StyleSection, ContentContainer } from '../../FeedPage.style' function AdditionalFilter() { return ( diff --git a/src/pages/FeedPage/components/AdditionalFilter/TagSwitchArray.jsx b/src/pages/FeedPage/components/AdditionalFilter/TagSwitchArray.jsx index 73324d11..c711f553 100644 --- a/src/pages/FeedPage/components/AdditionalFilter/TagSwitchArray.jsx +++ b/src/pages/FeedPage/components/AdditionalFilter/TagSwitchArray.jsx @@ -1,10 +1,10 @@ import React from 'react' import PropTypes from 'prop-types' import { ConfigProvider, Button, theme as antdTheme } from 'antd' +import theme from '@styles/theme' +import inArray from '@utils/inArray' import useFeedStore from '@stores/useFeedStore' import useTagData from '@hooks/useTagData' -import inArray from '@utils/inArray' -import theme from '@styles/theme' import MessageBox from './TagSwitch.style' import { buttonTheme } from '../../FeedPage.style' diff --git a/src/pages/FeedPage/components/BasicFilter/CategorySection.jsx b/src/pages/FeedPage/components/BasicFilter/CategorySection.jsx index 328b894f..cc9225d2 100644 --- a/src/pages/FeedPage/components/BasicFilter/CategorySection.jsx +++ b/src/pages/FeedPage/components/BasicFilter/CategorySection.jsx @@ -1,10 +1,10 @@ import React from 'react' +import PropTypes from 'prop-types' import { useLoaderData } from 'react-router-dom' import { useShallow } from 'zustand/react/shallow' import { Checkbox } from 'antd' -import PropTypes from 'prop-types' -import useFeedStore from '@stores/useFeedStore' import inArray from '@utils/inArray' +import useFeedStore from '@stores/useFeedStore' import SubcategoryArray from './SubcategoryArray' import { SectionContainer, diff --git a/src/pages/FeedPage/components/BasicFilter/CitySection.jsx b/src/pages/FeedPage/components/BasicFilter/CitySection.jsx index d1dc0e78..ca272cfa 100644 --- a/src/pages/FeedPage/components/BasicFilter/CitySection.jsx +++ b/src/pages/FeedPage/components/BasicFilter/CitySection.jsx @@ -1,8 +1,8 @@ import React from 'react' -import { Checkbox } from 'antd' import PropTypes from 'prop-types' -import useFeedStore from '@stores/useFeedStore' +import { Checkbox } from 'antd' import inArray from '@utils/inArray' +import useFeedStore from '@stores/useFeedStore' import { SectionContainer, SelectContainer, diff --git a/src/pages/FeedPage/components/BasicFilter/CountrySection.jsx b/src/pages/FeedPage/components/BasicFilter/CountrySection.jsx index 2b9345f4..4223cfe4 100644 --- a/src/pages/FeedPage/components/BasicFilter/CountrySection.jsx +++ b/src/pages/FeedPage/components/BasicFilter/CountrySection.jsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react' +import PropTypes from 'prop-types' import { useLoaderData } from 'react-router-dom' import { Radio } from 'antd' -import PropTypes from 'prop-types' import useFeedStore from '@stores/useFeedStore' import CollapseButton from '@components/Button/CollapseButton' import { diff --git a/src/pages/FeedPage/components/BasicFilter/SubcategoryArray.jsx b/src/pages/FeedPage/components/BasicFilter/SubcategoryArray.jsx index 9f67e760..6deaf2c7 100644 --- a/src/pages/FeedPage/components/BasicFilter/SubcategoryArray.jsx +++ b/src/pages/FeedPage/components/BasicFilter/SubcategoryArray.jsx @@ -1,8 +1,8 @@ import React from 'react' import PropTypes from 'prop-types' import { Checkbox } from 'antd' -import useFeedStore from '@stores/useFeedStore' import inArray from '@utils/inArray' +import useFeedStore from '@stores/useFeedStore' import { SelectWrapper } from './BasicFilter.style' function SubcategoryCheckbox({ categoryId, subcategory }) { diff --git a/src/pages/HomePage/HomePage.jsx b/src/pages/HomePage/HomePage.jsx index 5c3322bf..cb05cf60 100644 --- a/src/pages/HomePage/HomePage.jsx +++ b/src/pages/HomePage/HomePage.jsx @@ -1,15 +1,14 @@ import React, { useState } from 'react' -import { createPortal } from 'react-dom' import styled from 'styled-components' -import { FloatButton } from 'antd' +import { createPortal } from 'react-dom' import { useNavigate, useLoaderData } from 'react-router-dom' - -import Icons from '@components/Icons/Icons' +import { FloatButton } from 'antd' +import theme from '@styles/theme' import useUserData from '@hooks/useUserData' +import useLoginModal from '@hooks/useLoginModal' +import Icons from '@components/Icons/Icons' import MainBanner from './MainBanner' import ReviewCarousels from './ReviewCarousel' -import theme from '@styles/theme' -import useLoginModal from '@hooks/useLoginModal' const ImageArr = [ { diff --git a/src/pages/HomePage/MainBanner.jsx b/src/pages/HomePage/MainBanner.jsx index 4c1f62fd..eb6e76a1 100644 --- a/src/pages/HomePage/MainBanner.jsx +++ b/src/pages/HomePage/MainBanner.jsx @@ -1,9 +1,9 @@ import React, { useState, useEffect } from 'react' -import Flickity from 'flickity' -import PropTypes from 'prop-types' import styled from 'styled-components' -import StyledFlickity from '@components/Carousel/Carousel' +import PropTypes from 'prop-types' +import Flickity from 'flickity' import theme from '@styles/theme' +import StyledFlickity from '@components/Carousel/Carousel' const flickityOptions = { wrapAround: true, diff --git a/src/pages/HomePage/ReviewCarousel.jsx b/src/pages/HomePage/ReviewCarousel.jsx index 0dbd126a..cd53baf2 100644 --- a/src/pages/HomePage/ReviewCarousel.jsx +++ b/src/pages/HomePage/ReviewCarousel.jsx @@ -1,6 +1,6 @@ -import { React } from 'react' -import PropTypes from 'prop-types' +import React from 'react' import styled from 'styled-components' +import PropTypes from 'prop-types' import StyledFlickity from '@components/Carousel/Carousel' import PreviewContent from '@components/PreviewContent/PreviewContent' diff --git a/src/pages/Layout.jsx b/src/pages/Layout.jsx index af3de919..a5494e35 100644 --- a/src/pages/Layout.jsx +++ b/src/pages/Layout.jsx @@ -1,13 +1,12 @@ import React, { useEffect } from 'react' import styled from 'styled-components' import { RouterProvider } from 'react-router-dom' - import router from '@/router' +import GlobalStyle from '@styles/GlobalStyle' import useLoginStatus from '@/stores/useLoginStatus' +import useKyQuery from '@/hooks/useKyQuery' import NavBar from '@components/Navbar/NavBar' import Footer from '@components/Footer/Footer' -import GlobalStyle from '@styles/GlobalStyle' -import useKyQuery from '@/hooks/useKyQuery' export default function Layout() { const { isError, isLoading } = useKyQuery('me', undefined, { diff --git a/src/pages/ReviewPage/ReviewFloatButton.jsx b/src/pages/ReviewPage/ReviewFloatButton.jsx index 3220f773..e3f964f9 100644 --- a/src/pages/ReviewPage/ReviewFloatButton.jsx +++ b/src/pages/ReviewPage/ReviewFloatButton.jsx @@ -1,12 +1,11 @@ import React from 'react' import styled from 'styled-components' import PropTypes from 'prop-types' -import { FloatButton, notification } from 'antd' import { useNavigate } from 'react-router-dom' - +import { FloatButton, notification } from 'antd' +import theme from '@styles/theme' import useLoginModal from '@hooks/useLoginModal' import Icons from '@components/Icons/Icons' -import theme from '@styles/theme' import ReviewLikeButton from './ReviewLikeButton' export default function ReviewFloatButton({ diff --git a/src/pages/ReviewPage/ReviewImageBlock.jsx b/src/pages/ReviewPage/ReviewImageBlock.jsx index 6a28c23b..fb28dc50 100644 --- a/src/pages/ReviewPage/ReviewImageBlock.jsx +++ b/src/pages/ReviewPage/ReviewImageBlock.jsx @@ -1,7 +1,7 @@ import React from 'react' +import styled from 'styled-components' import PropTypes from 'prop-types' import { Image } from 'antd' -import styled from 'styled-components' import StyledFlickity from '@components/Carousel/Carousel' const reviewImagesOptions = { diff --git a/src/pages/ReviewPage/ReviewInfo.jsx b/src/pages/ReviewPage/ReviewInfo.jsx index d6020d27..df066ec6 100644 --- a/src/pages/ReviewPage/ReviewInfo.jsx +++ b/src/pages/ReviewPage/ReviewInfo.jsx @@ -1,12 +1,11 @@ import React from 'react' import styled from 'styled-components' import PropTypes from 'prop-types' -import { Breadcrumb, Rate } from 'antd' import { Link } from 'react-router-dom' - +import { Breadcrumb, Rate } from 'antd' +import theme from '@styles/theme' import dateParser from '@utils/dateParser' import { BlueTag } from '@components/Tags/Tags.style' -import theme from '@styles/theme' import ReviewOptions from './ReviewOptions' const breadCrumbStyle = { diff --git a/src/pages/ReviewPage/ReviewLikeButton.jsx b/src/pages/ReviewPage/ReviewLikeButton.jsx index aeb23ef3..46112e37 100644 --- a/src/pages/ReviewPage/ReviewLikeButton.jsx +++ b/src/pages/ReviewPage/ReviewLikeButton.jsx @@ -2,10 +2,9 @@ import React, { useState } from 'react' import styled from 'styled-components' import PropTypes from 'prop-types' import { FloatButton } from 'antd' - -import Icons from '@components/Icons/Icons' import useProductLike from '@hooks/useProductLike' import useLoginModal from '@/hooks/useLoginModal' +import Icons from '@components/Icons/Icons' export default function ReviewLikeButton({ userData, diff --git a/src/pages/ReviewPage/ReviewMiddle.jsx b/src/pages/ReviewPage/ReviewMiddle.jsx index d84fb0f3..e473f78a 100644 --- a/src/pages/ReviewPage/ReviewMiddle.jsx +++ b/src/pages/ReviewPage/ReviewMiddle.jsx @@ -1,8 +1,8 @@ import React from 'react' import styled from 'styled-components' import PropTypes from 'prop-types' -import Icons from '@components/Icons/Icons' import theme from '@styles/theme' +import Icons from '@components/Icons/Icons' function ReviewMiddleBlock({ address, price, currency }) { return ( diff --git a/src/pages/ReviewPage/ReviewOptions.jsx b/src/pages/ReviewPage/ReviewOptions.jsx index cd9da1b2..fda11d97 100644 --- a/src/pages/ReviewPage/ReviewOptions.jsx +++ b/src/pages/ReviewPage/ReviewOptions.jsx @@ -1,10 +1,9 @@ import React from 'react' -import { Modal, notification } from 'antd' import { useNavigate, useLocation } from 'react-router-dom' - -import OptionDropdown from '@components/OptionDropdown/OptionDropdown' -import { kyInstance } from '@hooks/kyInstance' +import { Modal, notification } from 'antd' import theme from '@styles/theme' +import { kyInstance } from '@hooks/kyInstance' +import OptionDropdown from '@components/OptionDropdown/OptionDropdown' function ReviewOptions() { const location = useLocation() diff --git a/src/pages/ReviewPage/ReviewPage.jsx b/src/pages/ReviewPage/ReviewPage.jsx index 02c2851a..50f4842b 100644 --- a/src/pages/ReviewPage/ReviewPage.jsx +++ b/src/pages/ReviewPage/ReviewPage.jsx @@ -1,13 +1,12 @@ import React from 'react' import styled from 'styled-components' -import { Divider } from 'antd' import { useLoaderData } from 'react-router-dom' - +import { Divider } from 'antd' import theme from '@styles/theme' -import UserFollowButton from '@components/UserProfile/UserFollowButton' +import useUserData from '@hooks/useUserData' import UserProfile from '@components/UserProfile/UserProfile' +import UserFollowButton from '@components/UserProfile/UserFollowButton' import Comment from '@components/Comment/Comment' -import useUserData from '@hooks/useUserData' import ReviewFloatButton from './ReviewFloatButton' import ReviewImageSection from './ReviewImageBlock' import ReviewInfoBlock from './ReviewInfo' diff --git a/src/pages/SubmitPage/SubmitPage.jsx b/src/pages/SubmitPage/SubmitPage.jsx index 24001080..695b8719 100644 --- a/src/pages/SubmitPage/SubmitPage.jsx +++ b/src/pages/SubmitPage/SubmitPage.jsx @@ -1,8 +1,7 @@ import React, { useState } from 'react' import styled from 'styled-components' - -import submitSteps from '@constants/submitSteps' import theme from '@styles/theme' +import submitSteps from '@constants/submitSteps' import useInitialData from '@hooks/useInitialData' import useCheckAuth from '@/hooks/useCheckAuth' import * as Form from './components/index' @@ -32,7 +31,7 @@ export default function SubmitPage() { [submitSteps.IMAGE]: , [submitSteps.REGION]: , [submitSteps.INFO]: , - [submitSteps.CATEGORY]: , + [submitSteps.CATEGORY]: , [submitSteps.LOADING]: , } diff --git a/src/pages/SubmitPage/components/CategorySubmit/CategorySelectList.jsx b/src/pages/SubmitPage/components/CategorySubmit/CategorySelectList.jsx index 17d117f8..18868d42 100644 --- a/src/pages/SubmitPage/components/CategorySubmit/CategorySelectList.jsx +++ b/src/pages/SubmitPage/components/CategorySubmit/CategorySelectList.jsx @@ -1,8 +1,7 @@ import React from 'react' import styled from 'styled-components' -import { useShallow } from 'zustand/react/shallow' import PropTypes from 'prop-types' - +import { useShallow } from 'zustand/react/shallow' import useFormStore from '@stores/useFormStore' import SelectionList from '../RegionSubmit/SelectionList' diff --git a/src/pages/SubmitPage/components/CategorySubmit/CategorSubmitForm.jsx b/src/pages/SubmitPage/components/CategorySubmit/CategorySubmitForm.jsx similarity index 90% rename from src/pages/SubmitPage/components/CategorySubmit/CategorSubmitForm.jsx rename to src/pages/SubmitPage/components/CategorySubmit/CategorySubmitForm.jsx index c1ef7ee2..0348a1ea 100644 --- a/src/pages/SubmitPage/components/CategorySubmit/CategorSubmitForm.jsx +++ b/src/pages/SubmitPage/components/CategorySubmit/CategorySubmitForm.jsx @@ -1,10 +1,9 @@ import React from 'react' import useKyQuery from '@hooks/useKyQuery' - import CategorySelectList from './CategorySelectList' import TagSelectForm from './TagSelectForm' -export default function CategorSubmitForm() { +export default function CategorySubmitForm() { const { data: categories } = useKyQuery('categories/hierarchy') return ( diff --git a/src/pages/SubmitPage/components/CategorySubmit/SelectButtons.jsx b/src/pages/SubmitPage/components/CategorySubmit/SelectButtons.jsx index eb01c5aa..59859ad4 100644 --- a/src/pages/SubmitPage/components/CategorySubmit/SelectButtons.jsx +++ b/src/pages/SubmitPage/components/CategorySubmit/SelectButtons.jsx @@ -1,6 +1,6 @@ import React from 'react' -import PropTypes from 'prop-types' import styled from 'styled-components' +import PropTypes from 'prop-types' import { Button, ConfigProvider } from 'antd' import theme from '@styles/theme' diff --git a/src/pages/SubmitPage/components/CategorySubmit/TagSelectForm.jsx b/src/pages/SubmitPage/components/CategorySubmit/TagSelectForm.jsx index e99c4656..de93fbc5 100644 --- a/src/pages/SubmitPage/components/CategorySubmit/TagSelectForm.jsx +++ b/src/pages/SubmitPage/components/CategorySubmit/TagSelectForm.jsx @@ -1,7 +1,6 @@ import React from 'react' - -import SelectButtons from './SelectButtons' import useFormStore from '@stores/useFormStore' +import SelectButtons from './SelectButtons' function TagSelectForm() { const subcategory = useFormStore((state) => state.subcategory) diff --git a/src/pages/SubmitPage/components/ImageSubmit/ImageSubmitForm.jsx b/src/pages/SubmitPage/components/ImageSubmit/ImageSubmitForm.jsx index ea7a8f5f..f1a875c1 100644 --- a/src/pages/SubmitPage/components/ImageSubmit/ImageSubmitForm.jsx +++ b/src/pages/SubmitPage/components/ImageSubmit/ImageSubmitForm.jsx @@ -1,10 +1,9 @@ import React, { useRef } from 'react' import styled from 'styled-components' import { Image } from 'antd' - -import Icon from '@components/Icons/Icons' import theme from '@styles/theme' import useFormStore from '@stores/useFormStore' +import Icon from '@components/Icons/Icons' const MAX_COUNT = 3 diff --git a/src/pages/SubmitPage/components/InfoSubmit/DescriptionInput.jsx b/src/pages/SubmitPage/components/InfoSubmit/DescriptionInput.jsx index 77f5a89c..9be6dc9a 100644 --- a/src/pages/SubmitPage/components/InfoSubmit/DescriptionInput.jsx +++ b/src/pages/SubmitPage/components/InfoSubmit/DescriptionInput.jsx @@ -1,7 +1,7 @@ import React from 'react' import { Input } from 'antd' -import useFormStore from '@stores/useFormStore' import theme from '@styles/theme' +import useFormStore from '@stores/useFormStore' function DescriptionInput() { const description = useFormStore((state) => state.description) diff --git a/src/pages/SubmitPage/components/InfoSubmit/InfoSubmit.jsx b/src/pages/SubmitPage/components/InfoSubmit/InfoSubmit.jsx index ea2c813c..841f9fd2 100644 --- a/src/pages/SubmitPage/components/InfoSubmit/InfoSubmit.jsx +++ b/src/pages/SubmitPage/components/InfoSubmit/InfoSubmit.jsx @@ -1,8 +1,7 @@ import React from 'react' import styled from 'styled-components' - -import useKyQuery from '@hooks/useKyQuery' import theme from '@styles/theme' +import useKyQuery from '@hooks/useKyQuery' import NameInput from './NameInput' import DescriptionInput from './DescriptionInput' import RatingInput from './RatingInput' diff --git a/src/pages/SubmitPage/components/InfoSubmit/NameInput.jsx b/src/pages/SubmitPage/components/InfoSubmit/NameInput.jsx index 124bf5aa..efa5a1bd 100644 --- a/src/pages/SubmitPage/components/InfoSubmit/NameInput.jsx +++ b/src/pages/SubmitPage/components/InfoSubmit/NameInput.jsx @@ -1,7 +1,7 @@ import React from 'react' import { Input } from 'antd' -import useFormStore from '@stores/useFormStore' import theme from '@styles/theme' +import useFormStore from '@stores/useFormStore' function NameInput() { const name = useFormStore((state) => state.name) diff --git a/src/pages/SubmitPage/components/InfoSubmit/NumberInputForm.jsx b/src/pages/SubmitPage/components/InfoSubmit/NumberInputForm.jsx index 0598969b..86fab9db 100644 --- a/src/pages/SubmitPage/components/InfoSubmit/NumberInputForm.jsx +++ b/src/pages/SubmitPage/components/InfoSubmit/NumberInputForm.jsx @@ -2,10 +2,9 @@ import React, { useEffect } from 'react' import styled from 'styled-components' import PropTypes from 'prop-types' import { InputNumber, Select, ConfigProvider } from 'antd' - -import useKyQuery from '@hooks/useKyQuery' -import useFormStore from '@stores/useFormStore' import theme from '@styles/theme' +import useFormStore from '@stores/useFormStore' +import useKyQuery from '@hooks/useKyQuery' const useDefaultCurrency = (setFormContents) => { const country = useFormStore((state) => state.country) diff --git a/src/pages/SubmitPage/components/PrevNextButtons.jsx b/src/pages/SubmitPage/components/PrevNextButtons.jsx index 6c463421..f39a237b 100644 --- a/src/pages/SubmitPage/components/PrevNextButtons.jsx +++ b/src/pages/SubmitPage/components/PrevNextButtons.jsx @@ -1,6 +1,6 @@ import React from 'react' -import { Button, ConfigProvider } from 'antd' import PropTypes from 'prop-types' +import { Button, ConfigProvider } from 'antd' import theme from '@styles/theme' import submitSteps from '@constants/submitSteps' import useFormStore from '@stores/useFormStore' diff --git a/src/pages/SubmitPage/components/RegionSubmit/AddressInputForm.jsx b/src/pages/SubmitPage/components/RegionSubmit/AddressInputForm.jsx index ddcb4703..7a0319b8 100644 --- a/src/pages/SubmitPage/components/RegionSubmit/AddressInputForm.jsx +++ b/src/pages/SubmitPage/components/RegionSubmit/AddressInputForm.jsx @@ -1,10 +1,9 @@ import React from 'react' import styled from 'styled-components' -import { Input } from 'antd' import { useShallow } from 'zustand/react/shallow' - -import useFormStore from '@stores/useFormStore' +import { Input } from 'antd' import theme from '@styles/theme' +import useFormStore from '@stores/useFormStore' export default function RegionSubmitPage() { const [city, address, setAddress] = useFormStore( diff --git a/src/pages/SubmitPage/components/RegionSubmit/RegionSelectList.jsx b/src/pages/SubmitPage/components/RegionSubmit/RegionSelectList.jsx index 3cfce636..5341f7f7 100644 --- a/src/pages/SubmitPage/components/RegionSubmit/RegionSelectList.jsx +++ b/src/pages/SubmitPage/components/RegionSubmit/RegionSelectList.jsx @@ -1,10 +1,9 @@ import React from 'react' import styled from 'styled-components' -import { useShallow } from 'zustand/react/shallow' import PropTypes from 'prop-types' - -import SelectionList from './SelectionList' +import { useShallow } from 'zustand/react/shallow' import useFormStore from '@stores/useFormStore' +import SelectionList from './SelectionList' const useRegionState = () => { const [region, country, city] = useFormStore( diff --git a/src/pages/SubmitPage/components/RegionSubmit/RegionSubmitForm.jsx b/src/pages/SubmitPage/components/RegionSubmit/RegionSubmitForm.jsx index ad46a67d..df06d2a6 100644 --- a/src/pages/SubmitPage/components/RegionSubmit/RegionSubmitForm.jsx +++ b/src/pages/SubmitPage/components/RegionSubmit/RegionSubmitForm.jsx @@ -1,7 +1,7 @@ import React from 'react' +import useKyQuery from '@hooks/useKyQuery' import RegionSelectList from './RegionSelectList' import AddressInputForm from './AddressInputForm' -import useKyQuery from '@hooks/useKyQuery' export default function RegionSubmitPage() { const { data: regions } = useKyQuery('regions/hierarchy') diff --git a/src/pages/SubmitPage/components/SubmitSteps.jsx b/src/pages/SubmitPage/components/SubmitSteps.jsx index 5414313c..c411004c 100644 --- a/src/pages/SubmitPage/components/SubmitSteps.jsx +++ b/src/pages/SubmitPage/components/SubmitSteps.jsx @@ -1,7 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' import { Steps, ConfigProvider } from 'antd' - import theme from '@styles/theme' const stepsItems = [ diff --git a/src/pages/SubmitPage/components/index.js b/src/pages/SubmitPage/components/index.js index 8d38f8e6..ce845a36 100644 --- a/src/pages/SubmitPage/components/index.js +++ b/src/pages/SubmitPage/components/index.js @@ -1,6 +1,6 @@ import ImageSubmitForm from './ImageSubmit/ImageSubmitForm' import RegionSubmitForm from './RegionSubmit/RegionSubmitForm' import InfoSubmitForm from './InfoSubmit/InfoSubmit' -import CategorSubmitForm from './CategorySubmit/CategorSubmitForm' +import CategorySubmitForm from './CategorySubmit/CategorySubmitForm' -export { RegionSubmitForm, ImageSubmitForm, InfoSubmitForm, CategorSubmitForm } +export { RegionSubmitForm, ImageSubmitForm, InfoSubmitForm, CategorySubmitForm } diff --git a/src/pages/UserEditPage/ProfileEditBlock.jsx b/src/pages/UserEditPage/ProfileEditBlock.jsx index 4b6e29f7..d5ccdf35 100644 --- a/src/pages/UserEditPage/ProfileEditBlock.jsx +++ b/src/pages/UserEditPage/ProfileEditBlock.jsx @@ -1,11 +1,10 @@ import React, { useRef } from 'react' import styled from 'styled-components' -import { Button } from 'antd' import PropTypes from 'prop-types' - +import { Button } from 'antd' import theme from '@styles/theme' -import ProfileImage from '@components/UserProfile/ProfileImage' import useUserStore from '@stores/useUserStore' +import ProfileImage from '@components/UserProfile/ProfileImage' function ProfileEditBlock({ name }) { const inputRef = useRef() diff --git a/src/pages/UserEditPage/SaveButton.jsx b/src/pages/UserEditPage/SaveButton.jsx index 6f005f39..d0336040 100644 --- a/src/pages/UserEditPage/SaveButton.jsx +++ b/src/pages/UserEditPage/SaveButton.jsx @@ -2,12 +2,11 @@ import React, { useState } from 'react' import styled from 'styled-components' import { useNavigate } from 'react-router-dom' import { Button } from 'antd' - -import { kyInstance } from '@hooks/kyInstance' -import useKyMutation from '@hooks/useKyMutation' import theme from '@styles/theme' -import useUserStore from '@stores/useUserStore' import uploadeToS3 from '@utils/uploadToS3' +import useUserStore from '@stores/useUserStore' +import { kyInstance } from '@hooks/kyInstance' +import useKyMutation from '@hooks/useKyMutation' const useEditProfile = () => { const [isLoading, setLoading] = useState(false) diff --git a/src/pages/UserEditPage/UserEditPage.jsx b/src/pages/UserEditPage/UserEditPage.jsx index 7110f882..bc4c1a81 100644 --- a/src/pages/UserEditPage/UserEditPage.jsx +++ b/src/pages/UserEditPage/UserEditPage.jsx @@ -2,7 +2,6 @@ import React from 'react' import styled from 'styled-components' import { useLoaderData } from 'react-router-dom' import { Divider } from 'antd' - import theme from '@styles/theme' import useUserStore from '@stores/useUserStore' import ProfileEditBlock from './ProfileEditBlock' diff --git a/src/pages/UserPage/FollowingList.jsx b/src/pages/UserPage/FollowingList.jsx index 9c1f5188..ca6665b6 100644 --- a/src/pages/UserPage/FollowingList.jsx +++ b/src/pages/UserPage/FollowingList.jsx @@ -1,7 +1,6 @@ import React, { useEffect, useState } from 'react' -import PropTypes from 'prop-types' import styled from 'styled-components' - +import PropTypes from 'prop-types' import theme from '@styles/theme' import useKyQuery from '@hooks/useKyQuery' import useFetchContent from '@hooks/useFetchContent' diff --git a/src/pages/UserPage/MyMenu.jsx b/src/pages/UserPage/MyMenu.jsx index 8e97870b..6f41e4d5 100644 --- a/src/pages/UserPage/MyMenu.jsx +++ b/src/pages/UserPage/MyMenu.jsx @@ -1,7 +1,6 @@ import React, { useState } from 'react' -import { Menu } from 'antd' import styled from 'styled-components' - +import { Menu } from 'antd' import theme from '@styles/theme' import userMenuKeys from '@constants/userMenuKeys' import Withdrawal from './Withdrawal' diff --git a/src/pages/UserPage/MyPage.jsx b/src/pages/UserPage/MyPage.jsx index b28b524e..14ee2314 100644 --- a/src/pages/UserPage/MyPage.jsx +++ b/src/pages/UserPage/MyPage.jsx @@ -1,16 +1,15 @@ import React from 'react' import styled from 'styled-components' import { Divider } from 'antd' - import useCheckAuth from '@/hooks/useCheckAuth' +import useUserData from '@hooks/useUserData' import UserEditButton from '@components/UserProfile/UserEditButton' import UserProfile from '@components/UserProfile/UserProfile' -import useUserData from '@hooks/useUserData' import MyMenu from './MyMenu' function MyPage() { - const { data: userData } = useUserData() useCheckAuth() + const { data: userData } = useUserData() return ( diff --git a/src/pages/UserPage/ReviewList.jsx b/src/pages/UserPage/ReviewList.jsx index 6cc9d2e9..ff37b931 100644 --- a/src/pages/UserPage/ReviewList.jsx +++ b/src/pages/UserPage/ReviewList.jsx @@ -1,9 +1,9 @@ import React, { useEffect, useState } from 'react' import PropTypes from 'prop-types' import initialPageData from '@constants/initialPageData' +import parseQueryParams from '@utils/parseQueryParams' import useUserData from '@hooks/useUserData' import useKyQuery from '@hooks/useKyQuery' -import parseQueryParams from '@utils/parseQueryParams' import ProductFeed from '@components/ProductFeed/ProductFeed' function ReviewList({ selectedMenu }) { diff --git a/src/pages/UserPage/UserPage.jsx b/src/pages/UserPage/UserPage.jsx index d83a2537..5af95d9a 100644 --- a/src/pages/UserPage/UserPage.jsx +++ b/src/pages/UserPage/UserPage.jsx @@ -1,8 +1,8 @@ import React from 'react' import styled from 'styled-components' -import { Divider } from 'antd' import { useParams, useLoaderData } from 'react-router-dom' import { toInteger } from 'lodash-es' +import { Divider } from 'antd' import useFetchContent from '@hooks/useFetchContent' import UserProfile from '@components/UserProfile/UserProfile' import UserFollowButton from '@components/UserProfile/UserFollowButton' diff --git a/src/router.jsx b/src/router.jsx index 0ee50958..22087ed7 100644 --- a/src/router.jsx +++ b/src/router.jsx @@ -1,6 +1,5 @@ import React, { Suspense } from 'react' import { createBrowserRouter, Outlet } from 'react-router-dom' - import * as pages from './pages/index' import * as loader from './loader/index' import LoadingPage from './pages/LoadingPage' From 2c0ceb0fcbedba5edde98d043b6057a559257469 Mon Sep 17 00:00:00 2001 From: seoulyego Date: Fri, 4 Oct 2024 17:26:56 +0900 Subject: [PATCH 05/16] KL-182/refactor: store login data MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - login 정보를 zustand store로 관리합니다. --- src/components/Comment/Comment.jsx | 1 + src/components/Navbar/NavList.jsx | 4 +-- .../Navbar/components/LoginButton.jsx | 15 ++++++--- src/components/ProductFeed/ProductFeed.jsx | 6 ++-- .../UserProfile/UserFollowButton.jsx | 15 ++++++--- src/hooks/useCheckAuth.js | 4 +-- src/hooks/useFetchContent.jsx | 3 -- src/hooks/useUserData.js | 7 +++-- .../components/ProductDataRenderer.jsx | 3 -- src/pages/HomePage/HomePage.jsx | 16 +++------- src/pages/HomePage/ReviewCarousel.jsx | 13 ++++---- src/pages/Layout.jsx | 27 +++++++++++----- src/pages/ReviewPage/ReviewPage.jsx | 10 +++--- src/pages/UserEditPage/UserEditPage.jsx | 31 ++++++++++++++----- src/pages/UserPage/MyPage.jsx | 6 ++-- src/pages/UserPage/ReviewList.jsx | 3 -- src/stores/useLoginStatus.js | 9 ------ src/stores/useLoginStore.js | 16 ++++++++++ 18 files changed, 111 insertions(+), 78 deletions(-) delete mode 100644 src/stores/useLoginStatus.js create mode 100644 src/stores/useLoginStore.js diff --git a/src/components/Comment/Comment.jsx b/src/components/Comment/Comment.jsx index ef14f163..0713c0cc 100644 --- a/src/components/Comment/Comment.jsx +++ b/src/components/Comment/Comment.jsx @@ -32,6 +32,7 @@ export default function Comment({ userData }) { ) } + Comment.propTypes = { userData: PropTypes.shape({ id: PropTypes.number, diff --git a/src/components/Navbar/NavList.jsx b/src/components/Navbar/NavList.jsx index 8cd86040..34ab10ba 100644 --- a/src/components/Navbar/NavList.jsx +++ b/src/components/Navbar/NavList.jsx @@ -4,12 +4,12 @@ import router from '@/router' import theme from '@styles/theme' import { navIndex, modalIndex } from '@constants/navIndex' import { useCurrentPageStore, useModalStore } from '@stores/navbarStores' -import useLoginStatus from '@/stores/useLoginStatus' +import useLoginStore from '@/stores/useLoginStore' import Notification from './components/Notification' import Icons from '../Icons/Icons' export default function NavList() { - const isLogin = useLoginStatus((state) => state.isLogin) + const isLogin = useLoginStore((state) => state.isLogin) const currentPage = useCurrentPageStore((state) => state.currentPage) const { modalState, setModalState } = useModalStore() diff --git a/src/components/Navbar/components/LoginButton.jsx b/src/components/Navbar/components/LoginButton.jsx index 322b1290..eb0447e0 100644 --- a/src/components/Navbar/components/LoginButton.jsx +++ b/src/components/Navbar/components/LoginButton.jsx @@ -1,20 +1,25 @@ import React from 'react' +import { useShallow } from 'zustand/react/shallow' import router from '@/router' import { modalIndex } from '@constants/navIndex' import { useModalStore } from '@stores/navbarStores' -import useUserData from '@hooks/useUserData' -import router from '@/router' +import useLoginStore from '@/stores/useLoginStore' import PlainButton from '../../Button/PlainButton' import ProfileImage from '../../UserProfile/ProfileImage' export default function LoginButton() { - const { data } = useUserData() + const { isLogin, loginData } = useLoginStore( + useShallow((state) => ({ + isLogin: state.isLogin, + loginData: state.loginData, + })) + ) const setModalState = useModalStore((store) => store.setModalState) return ( { - if (!data) { + if (!isLogin) { setModalState(modalIndex.LOGIN) return } @@ -23,7 +28,7 @@ export default function LoginButton() { }} > diff --git a/src/components/ProductFeed/ProductFeed.jsx b/src/components/ProductFeed/ProductFeed.jsx index b25d0833..9a1fdf52 100644 --- a/src/components/ProductFeed/ProductFeed.jsx +++ b/src/components/ProductFeed/ProductFeed.jsx @@ -2,10 +2,12 @@ import React from 'react' import PropTypes from 'prop-types' import { Pagination, ConfigProvider } from 'antd' import theme from '@styles/theme' +import useLoginStore from '@/stores/useLoginStore' import PreviewContent from '../PreviewContent/PreviewContent' import { FeedContainer, StyledFeed } from './ProductFeed.style' -function ProductFeed({ userData, data, setPageData }) { +function ProductFeed({ data, setPageData }) { + const loginData = useLoginStore((state) => state.loginData) return ( {!data.content.length ? ( @@ -15,7 +17,7 @@ function ProductFeed({ userData, data, setPageData }) { {data.content.map((content) => ( ))} diff --git a/src/components/UserProfile/UserFollowButton.jsx b/src/components/UserProfile/UserFollowButton.jsx index 2a1a9f22..6e581396 100644 --- a/src/components/UserProfile/UserFollowButton.jsx +++ b/src/components/UserProfile/UserFollowButton.jsx @@ -1,8 +1,9 @@ import React from 'react' import PropTypes from 'prop-types' +import { useShallow } from 'zustand/react/shallow' import { Button, ConfigProvider, notification } from 'antd' import theme from '@styles/theme' -import useUserData from '@hooks/useUserData' +import useLoginStore from '@/stores/useLoginStore' import useKyQuery from '@hooks/useKyQuery' import useKyMutation from '@hooks/useKyMutation' import useLoginModal from '@hooks/useLoginModal' @@ -70,15 +71,19 @@ const useUnFollow = (id) => { } function UserFollowButton({ id }) { - const { data: userData } = useUserData() + const { isLogin, loginData } = useLoginStore( + useShallow((state) => ({ + isLogin: state.isLogin, + loginData: state.loginData, + })) + ) const isFollowed = useCheckFollow(id) const followUser = useFollow(id) const unFollowUser = useUnFollow(id) const popLoginModal = useLoginModal() if (isFollowed === undefined) return null - - if (userData?.data.id === id) return null + if (loginData?.id === id) return null return ( { - if (userData) followUser() + if (isLogin) followUser() else popLoginModal() }} > diff --git a/src/hooks/useCheckAuth.js b/src/hooks/useCheckAuth.js index 13691f47..affa5662 100644 --- a/src/hooks/useCheckAuth.js +++ b/src/hooks/useCheckAuth.js @@ -1,8 +1,8 @@ import errorCode from '@constants/errorCode' -import useLoginStatus from '@/stores/useLoginStatus' +import useLoginStore from '@/stores/useLoginStore' const useCheckAuth = () => { - const isLogin = useLoginStatus((state) => state.isLogin) + const isLogin = useLoginStore((state) => state.isLogin) if (!isLogin) throw Error(errorCode.ERROR_UNAUTHORIZED) } diff --git a/src/hooks/useFetchContent.jsx b/src/hooks/useFetchContent.jsx index f3cdc22f..87cbe7b5 100644 --- a/src/hooks/useFetchContent.jsx +++ b/src/hooks/useFetchContent.jsx @@ -2,12 +2,10 @@ import React, { useState, useEffect } from 'react' import initialPageData from '@constants/initialPageData' import parseQueryParams from '@utils/parseQueryParams' import ProductFeed from '@components/ProductFeed/ProductFeed' -import useUserData from './useUserData' import useKyQuery from './useKyQuery' const useFetchContent = (id) => { const [currentPage, setCurrentPage] = useState(initialPageData) - const { data: userData } = useUserData() const url = parseQueryParams(`members/${id}/products`, currentPage) const { data: productList } = useKyQuery(url, undefined, { staleTime: 0, @@ -26,7 +24,6 @@ const useFetchContent = (id) => { return ( diff --git a/src/hooks/useUserData.js b/src/hooks/useUserData.js index 9ed18982..e1c42bbe 100644 --- a/src/hooks/useUserData.js +++ b/src/hooks/useUserData.js @@ -1,13 +1,14 @@ -import useLoginStatus from '@stores/useLoginStatus' +import useLoginStore from '@/stores/useLoginStore' import useKyQuery from './useKyQuery' const useUserData = () => { - const isLogin = useLoginStatus((state) => state.isLogin) + const isLogin = useLoginStore((state) => state.isLogin) return useKyQuery('me', undefined, { staleTime: 1000 * 60 * 60, gcTime: 1000 * 60 * 60, - enabled: isLogin, + retry: isLogin, + select: (data) => data.data, }) } diff --git a/src/pages/FeedPage/components/ProductDataRenderer.jsx b/src/pages/FeedPage/components/ProductDataRenderer.jsx index 8a8beec2..c7c9fac7 100644 --- a/src/pages/FeedPage/components/ProductDataRenderer.jsx +++ b/src/pages/FeedPage/components/ProductDataRenderer.jsx @@ -1,12 +1,10 @@ import React from 'react' -import useUserData from '@hooks/useUserData' import useProductData from '@hooks/useProductData' import LoadingFeed from '@components/ProductFeed/LoadingFeed' import ProductFeed from '@components/ProductFeed/ProductFeed' import { StyledFeed } from '@components/ProductFeed/ProductFeed.style' function ProductDataRenderer() { - const { data: userData } = useUserData() const { isLoading, data, isError, setPageData } = useProductData() if (isLoading) return @@ -16,7 +14,6 @@ function ProductDataRenderer() { return ( diff --git a/src/pages/HomePage/HomePage.jsx b/src/pages/HomePage/HomePage.jsx index cb05cf60..d6f67483 100644 --- a/src/pages/HomePage/HomePage.jsx +++ b/src/pages/HomePage/HomePage.jsx @@ -4,7 +4,7 @@ import { createPortal } from 'react-dom' import { useNavigate, useLoaderData } from 'react-router-dom' import { FloatButton } from 'antd' import theme from '@styles/theme' -import useUserData from '@hooks/useUserData' +import useLoginStore from '@/stores/useLoginStore' import useLoginModal from '@hooks/useLoginModal' import Icons from '@components/Icons/Icons' import MainBanner from './MainBanner' @@ -37,7 +37,7 @@ const ImageArr = [ export default function HomePage() { const { popularReviews, newReviews } = useLoaderData() - const { data: userData } = useUserData() + const isLogin = useLoginStore((state) => state.isLogin) const [bannerImages] = useState(ImageArr) const navigate = useNavigate() const popLoginModal = useLoginModal() @@ -48,17 +48,11 @@ export default function HomePage() {

인기 리뷰

- +

신규 리뷰

- +
{createPortal( @@ -72,7 +66,7 @@ export default function HomePage() { } onClick={() => { - if (userData) + if (isLogin) navigate('/submit', { state: { from: window.location.pathname } }) else popLoginModal() }} diff --git a/src/pages/HomePage/ReviewCarousel.jsx b/src/pages/HomePage/ReviewCarousel.jsx index cd53baf2..6a766ba2 100644 --- a/src/pages/HomePage/ReviewCarousel.jsx +++ b/src/pages/HomePage/ReviewCarousel.jsx @@ -3,6 +3,7 @@ import styled from 'styled-components' import PropTypes from 'prop-types' import StyledFlickity from '@components/Carousel/Carousel' import PreviewContent from '@components/PreviewContent/PreviewContent' +import useLoginStore from '@/stores/useLoginStore' const flickityOptions = { wrapAround: false, @@ -14,7 +15,9 @@ const flickityOptions = { cellAlign: 'left', } -export default function ReviewCarousels({ contents, userData }) { +export default function ReviewCarousels({ contents }) { + const loginData = useLoginStore((state) => state.loginData) + return ( {contents.map((content) => { @@ -24,7 +27,7 @@ export default function ReviewCarousels({ contents, userData }) { key={content.id} > @@ -34,6 +37,7 @@ export default function ReviewCarousels({ contents, userData }) { ) } + ReviewCarousels.propTypes = { contents: PropTypes.arrayOf( PropTypes.shape({ @@ -51,11 +55,6 @@ ReviewCarousels.propTypes = { ), }) ).isRequired, - userData: PropTypes.shape({ - id: PropTypes.number, - name: PropTypes.string, - profileImageUrl: PropTypes.string, - }), } const ReviewWrapper = styled.div` diff --git a/src/pages/Layout.jsx b/src/pages/Layout.jsx index a5494e35..219d8a48 100644 --- a/src/pages/Layout.jsx +++ b/src/pages/Layout.jsx @@ -1,23 +1,34 @@ import React, { useEffect } from 'react' import styled from 'styled-components' import { RouterProvider } from 'react-router-dom' +import { useShallow } from 'zustand/react/shallow' import router from '@/router' import GlobalStyle from '@styles/GlobalStyle' -import useLoginStatus from '@/stores/useLoginStatus' -import useKyQuery from '@/hooks/useKyQuery' +import useLoginStore from '@/stores/useLoginStore' +import useUserData from '@/hooks/useUserData' import NavBar from '@components/Navbar/NavBar' import Footer from '@components/Footer/Footer' +import { isEqual } from 'lodash-es' export default function Layout() { - const { isError, isLoading } = useKyQuery('me', undefined, { - staleTime: 1000 * 60 * 60, - gcTime: 1000 * 60 * 60, - }) - const setLoginTrue = useLoginStatus((state) => state.setLoginTrue) + const { isLoading, data } = useUserData() + const { isLogin, loginData } = useLoginStore( + useShallow((state) => ({ + isLogin: state.isLogin, + loginData: state.loginData, + })) + ) + const { setLogin, setLoginData } = useLoginStore((state) => ({ + setLogin: state.setLogin, + setLoginData: state.setLoginData, + })) useEffect(() => { if (isLoading) return - if (!isError) setLoginTrue() + if (data) { + if (!isLogin) setLogin(data) + else if (!isEqual(loginData, data)) setLoginData(data) + } }, [isLoading]) return ( diff --git a/src/pages/ReviewPage/ReviewPage.jsx b/src/pages/ReviewPage/ReviewPage.jsx index 50f4842b..9d89c12a 100644 --- a/src/pages/ReviewPage/ReviewPage.jsx +++ b/src/pages/ReviewPage/ReviewPage.jsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import { useLoaderData } from 'react-router-dom' import { Divider } from 'antd' import theme from '@styles/theme' -import useUserData from '@hooks/useUserData' +import useLoginStore from '@/stores/useLoginStore' import UserProfile from '@components/UserProfile/UserProfile' import UserFollowButton from '@components/UserProfile/UserFollowButton' import Comment from '@components/Comment/Comment' @@ -14,7 +14,7 @@ import ReviewMiddleBlock from './ReviewMiddle' export default function ReviewDetailPage() { const { data: review } = useLoaderData() - const { data: client } = useUserData() + const loginData = useLoginStore((state) => state.loginData) return (
@@ -22,7 +22,7 @@ export default function ReviewDetailPage() { } /> - + diff --git a/src/pages/UserEditPage/UserEditPage.jsx b/src/pages/UserEditPage/UserEditPage.jsx index bc4c1a81..236bdb7f 100644 --- a/src/pages/UserEditPage/UserEditPage.jsx +++ b/src/pages/UserEditPage/UserEditPage.jsx @@ -1,29 +1,46 @@ -import React from 'react' +import React, { useEffect } from 'react' import styled from 'styled-components' -import { useLoaderData } from 'react-router-dom' +import { useNavigate } from 'react-router-dom' +import { useShallow } from 'zustand/react/shallow' import { Divider } from 'antd' import theme from '@styles/theme' import useUserStore from '@stores/useUserStore' +import useLoginStore from '@stores/useLoginStore' import ProfileEditBlock from './ProfileEditBlock' import NicknameInput from './NicknameInput' import DescriptionInput from './DescriptionInput' import SaveButton from './SaveButton' function UserEditPage() { - const { data } = useLoaderData() + const { isLogin, loginData } = useLoginStore( + useShallow((state) => ({ + isLogin: state.isLogin, + loginData: state.loginData, + })) + ) const setUserData = useUserStore((state) => state.setUserData) + const navigate = useNavigate() + + useEffect(() => { + if (!isLogin) { + alert('로그인 후 사용 가능합니다') + navigate('/') + } + }, [isLogin]) + + if (!isLogin) return null setUserData({ - profileUrl: data.image?.url || '', - name: data.name, - description: data.description, + profileUrl: loginData.image?.url || '', + name: loginData.name, + description: loginData.description, }) return (

프로필 수정

- +
diff --git a/src/pages/UserPage/MyPage.jsx b/src/pages/UserPage/MyPage.jsx index 14ee2314..aa25bf25 100644 --- a/src/pages/UserPage/MyPage.jsx +++ b/src/pages/UserPage/MyPage.jsx @@ -1,21 +1,21 @@ import React from 'react' import styled from 'styled-components' import { Divider } from 'antd' +import useLoginStore from '@/stores/useLoginStore' import useCheckAuth from '@/hooks/useCheckAuth' -import useUserData from '@hooks/useUserData' import UserEditButton from '@components/UserProfile/UserEditButton' import UserProfile from '@components/UserProfile/UserProfile' import MyMenu from './MyMenu' function MyPage() { useCheckAuth() - const { data: userData } = useUserData() + const loginData = useLoginStore((state) => state.loginData) return ( } /> diff --git a/src/pages/UserPage/ReviewList.jsx b/src/pages/UserPage/ReviewList.jsx index ff37b931..44106f26 100644 --- a/src/pages/UserPage/ReviewList.jsx +++ b/src/pages/UserPage/ReviewList.jsx @@ -2,13 +2,11 @@ import React, { useEffect, useState } from 'react' import PropTypes from 'prop-types' import initialPageData from '@constants/initialPageData' import parseQueryParams from '@utils/parseQueryParams' -import useUserData from '@hooks/useUserData' import useKyQuery from '@hooks/useKyQuery' import ProductFeed from '@components/ProductFeed/ProductFeed' function ReviewList({ selectedMenu }) { const [currentPage, setCurrentPage] = useState(initialPageData) - const { data: userData } = useUserData() const url = parseQueryParams(`${selectedMenu}`, currentPage) const { data: productList } = useKyQuery(url, undefined, { staleTime: 0, @@ -26,7 +24,6 @@ function ReviewList({ selectedMenu }) { return ( diff --git a/src/stores/useLoginStatus.js b/src/stores/useLoginStatus.js deleted file mode 100644 index f2250d80..00000000 --- a/src/stores/useLoginStatus.js +++ /dev/null @@ -1,9 +0,0 @@ -import { create } from 'zustand' - -const useLoginStatus = create((set) => ({ - isLogin: false, - setLoginFalse: () => set({ isLogin: false }), - setLoginTrue: () => set({ isLogin: true }), -})) - -export default useLoginStatus diff --git a/src/stores/useLoginStore.js b/src/stores/useLoginStore.js new file mode 100644 index 00000000..40fd2854 --- /dev/null +++ b/src/stores/useLoginStore.js @@ -0,0 +1,16 @@ +import { create } from 'zustand' + +const initialState = { + isLogin: false, + loginData: null, +} + +const useLoginStore = create((set) => ({ + ...initialState, + + setLogin: (state) => set({ isLogin: true, loginData: state }), + setLoginData: (state) => set({ loginData: state }), + setLogout: () => set({ ...initialState }), +})) + +export default useLoginStore From 4a5850a16e3d37213facc585eb2c14e4c26e22c8 Mon Sep 17 00:00:00 2001 From: seoulyego Date: Fri, 4 Oct 2024 18:19:40 +0900 Subject: [PATCH 06/16] KL-182/style: insert new line between function scope MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 함수 스코프 사이에 빈 줄을 삽입하였습니다. --- src/components/Comment/CommentEdit.jsx | 1 + src/components/Comment/CommentInput.jsx | 1 + src/components/Comment/CommentList.jsx | 1 + src/components/Comment/CommentListContent.jsx | 1 + src/components/Comment/CommentOptions.jsx | 1 + src/components/Notification/NotificationContent.jsx | 1 + src/components/Notification/NotificationHeader.jsx | 1 + src/components/OptionDropdown/OptionDropdown.jsx | 1 + src/components/UserProfile/UserFollowButton.jsx | 1 + src/components/UserProfile/UserProfile.jsx | 1 + src/pages/HomePage/MainBanner.jsx | 1 + src/pages/ReviewPage/ReviewFloatButton.jsx | 1 + src/pages/ReviewPage/ReviewImageBlock.jsx | 1 + src/pages/ReviewPage/ReviewInfo.jsx | 1 + src/pages/ReviewPage/ReviewLikeButton.jsx | 1 + src/pages/ReviewPage/ReviewMiddle.jsx | 1 + .../SubmitPage/components/CategorySubmit/CategorySelectList.jsx | 1 + src/pages/SubmitPage/components/CategorySubmit/SelectButtons.jsx | 1 + src/pages/SubmitPage/components/InfoSubmit/NumberInputForm.jsx | 1 + src/pages/SubmitPage/components/PrevNextButtons.jsx | 1 + .../SubmitPage/components/RegionSubmit/RegionSelectList.jsx | 1 + src/pages/SubmitPage/components/RegionSubmit/SelectionList.jsx | 1 + src/pages/SubmitPage/components/SubmitSteps.jsx | 1 + src/pages/UserEditPage/ProfileEditBlock.jsx | 1 + src/pages/UserPage/FollowingList.jsx | 1 + src/pages/UserPage/ReviewList.jsx | 1 + 26 files changed, 26 insertions(+) diff --git a/src/components/Comment/CommentEdit.jsx b/src/components/Comment/CommentEdit.jsx index 8a1ed528..632104c4 100644 --- a/src/components/Comment/CommentEdit.jsx +++ b/src/components/Comment/CommentEdit.jsx @@ -75,6 +75,7 @@ export default function CommentEdit({ ) } + CommentEdit.propTypes = { commentId: PropTypes.number.isRequired, commentContent: PropTypes.string.isRequired, diff --git a/src/components/Comment/CommentInput.jsx b/src/components/Comment/CommentInput.jsx index 0e7b9bf3..ac486d6b 100644 --- a/src/components/Comment/CommentInput.jsx +++ b/src/components/Comment/CommentInput.jsx @@ -72,6 +72,7 @@ export default function CommentInput({ userData }) { ) } + CommentInput.propTypes = { userData: PropTypes.shape({ image: PropTypes.shape({ url: PropTypes.string }), diff --git a/src/components/Comment/CommentList.jsx b/src/components/Comment/CommentList.jsx index 3d3e17f1..d47850e3 100644 --- a/src/components/Comment/CommentList.jsx +++ b/src/components/Comment/CommentList.jsx @@ -16,6 +16,7 @@ export default function CommentList({ comments, userId }) { ) } + CommentList.propTypes = { comments: PropTypes.arrayOf( PropTypes.shape({ diff --git a/src/components/Comment/CommentListContent.jsx b/src/components/Comment/CommentListContent.jsx index 7fb929f2..147d8084 100644 --- a/src/components/Comment/CommentListContent.jsx +++ b/src/components/Comment/CommentListContent.jsx @@ -54,6 +54,7 @@ export default function CommentListContent({ comment, canEdit }) { ) } + CommentListContent.propTypes = { comment: PropTypes.shape({ id: PropTypes.number, diff --git a/src/components/Comment/CommentOptions.jsx b/src/components/Comment/CommentOptions.jsx index 6cc41b4a..d557b5f2 100644 --- a/src/components/Comment/CommentOptions.jsx +++ b/src/components/Comment/CommentOptions.jsx @@ -49,6 +49,7 @@ function CommentOptions({ commentId, setEditMode }) { /> ) } + CommentOptions.propTypes = { commentId: PropTypes.number.isRequired, setEditMode: PropTypes.func.isRequired, diff --git a/src/components/Notification/NotificationContent.jsx b/src/components/Notification/NotificationContent.jsx index cf0aef4e..ec7544dc 100644 --- a/src/components/Notification/NotificationContent.jsx +++ b/src/components/Notification/NotificationContent.jsx @@ -62,6 +62,7 @@ function NotificationContent({ content }) { ) } + NotificationContent.propTypes = { content: PropTypes.shape({ id: PropTypes.number, diff --git a/src/components/Notification/NotificationHeader.jsx b/src/components/Notification/NotificationHeader.jsx index 49299e7d..0e8e52b3 100644 --- a/src/components/Notification/NotificationHeader.jsx +++ b/src/components/Notification/NotificationHeader.jsx @@ -37,6 +37,7 @@ function NotificationHeader({ isEmpty }) { ) } + NotificationHeader.propTypes = { isEmpty: PropTypes.bool.isRequired, } diff --git a/src/components/OptionDropdown/OptionDropdown.jsx b/src/components/OptionDropdown/OptionDropdown.jsx index 38795dfa..50e2039d 100644 --- a/src/components/OptionDropdown/OptionDropdown.jsx +++ b/src/components/OptionDropdown/OptionDropdown.jsx @@ -48,6 +48,7 @@ function OptionDropdown({ editOnclick, deleteOnclick }) { ) } + OptionDropdown.propTypes = { editOnclick: PropTypes.func.isRequired, deleteOnclick: PropTypes.func.isRequired, diff --git a/src/components/UserProfile/UserFollowButton.jsx b/src/components/UserProfile/UserFollowButton.jsx index 6e581396..b1e3b0d5 100644 --- a/src/components/UserProfile/UserFollowButton.jsx +++ b/src/components/UserProfile/UserFollowButton.jsx @@ -116,6 +116,7 @@ function UserFollowButton({ id }) { ) } + UserFollowButton.propTypes = { id: PropTypes.number.isRequired, } diff --git a/src/components/UserProfile/UserProfile.jsx b/src/components/UserProfile/UserProfile.jsx index fe899950..84ce22e4 100644 --- a/src/components/UserProfile/UserProfile.jsx +++ b/src/components/UserProfile/UserProfile.jsx @@ -29,6 +29,7 @@ export default function UserProfile({ userData, profileButton }) { ) } + UserProfile.propTypes = { userData: PropTypes.shape({ id: PropTypes.number, diff --git a/src/pages/HomePage/MainBanner.jsx b/src/pages/HomePage/MainBanner.jsx index eb6e76a1..66c16cc4 100644 --- a/src/pages/HomePage/MainBanner.jsx +++ b/src/pages/HomePage/MainBanner.jsx @@ -51,6 +51,7 @@ export default function MainBanner({ urls }) { ) } + MainBanner.propTypes = { urls: PropTypes.arrayOf( PropTypes.shape({ diff --git a/src/pages/ReviewPage/ReviewFloatButton.jsx b/src/pages/ReviewPage/ReviewFloatButton.jsx index e3f964f9..d0b5222c 100644 --- a/src/pages/ReviewPage/ReviewFloatButton.jsx +++ b/src/pages/ReviewPage/ReviewFloatButton.jsx @@ -53,6 +53,7 @@ export default function ReviewFloatButton({ ) } + ReviewFloatButton.propTypes = { userData: PropTypes.shape({}), productId: PropTypes.number.isRequired, diff --git a/src/pages/ReviewPage/ReviewImageBlock.jsx b/src/pages/ReviewPage/ReviewImageBlock.jsx index fb28dc50..10c10b00 100644 --- a/src/pages/ReviewPage/ReviewImageBlock.jsx +++ b/src/pages/ReviewPage/ReviewImageBlock.jsx @@ -39,6 +39,7 @@ export default function ReviewImageBlock({ images }) { ) } + ReviewImageBlock.propTypes = { images: PropTypes.arrayOf( PropTypes.shape({ diff --git a/src/pages/ReviewPage/ReviewInfo.jsx b/src/pages/ReviewPage/ReviewInfo.jsx index df066ec6..e3fb78e1 100644 --- a/src/pages/ReviewPage/ReviewInfo.jsx +++ b/src/pages/ReviewPage/ReviewInfo.jsx @@ -83,6 +83,7 @@ export default function ReviewInfoBlock({ review, canEdit }) { ) } + ReviewInfoBlock.propTypes = { review: PropTypes.shape({ id: PropTypes.number, diff --git a/src/pages/ReviewPage/ReviewLikeButton.jsx b/src/pages/ReviewPage/ReviewLikeButton.jsx index 46112e37..1c0b61c3 100644 --- a/src/pages/ReviewPage/ReviewLikeButton.jsx +++ b/src/pages/ReviewPage/ReviewLikeButton.jsx @@ -43,6 +43,7 @@ export default function ReviewLikeButton({ /> ) } + ReviewLikeButton.propTypes = { userData: PropTypes.shape({}), productId: PropTypes.number.isRequired, diff --git a/src/pages/ReviewPage/ReviewMiddle.jsx b/src/pages/ReviewPage/ReviewMiddle.jsx index e473f78a..c92f1b28 100644 --- a/src/pages/ReviewPage/ReviewMiddle.jsx +++ b/src/pages/ReviewPage/ReviewMiddle.jsx @@ -19,6 +19,7 @@ function ReviewMiddleBlock({ address, price, currency }) { ) } + ReviewMiddleBlock.propTypes = { address: PropTypes.string.isRequired, price: PropTypes.number.isRequired, diff --git a/src/pages/SubmitPage/components/CategorySubmit/CategorySelectList.jsx b/src/pages/SubmitPage/components/CategorySubmit/CategorySelectList.jsx index 18868d42..05c66d7e 100644 --- a/src/pages/SubmitPage/components/CategorySubmit/CategorySelectList.jsx +++ b/src/pages/SubmitPage/components/CategorySubmit/CategorySelectList.jsx @@ -41,6 +41,7 @@ function CategorySelectList({ categories }) { ) } + CategorySelectList.propTypes = { categories: PropTypes.arrayOf( PropTypes.shape({ diff --git a/src/pages/SubmitPage/components/CategorySubmit/SelectButtons.jsx b/src/pages/SubmitPage/components/CategorySubmit/SelectButtons.jsx index 59859ad4..f04cf712 100644 --- a/src/pages/SubmitPage/components/CategorySubmit/SelectButtons.jsx +++ b/src/pages/SubmitPage/components/CategorySubmit/SelectButtons.jsx @@ -34,6 +34,7 @@ function SelectButtons({ isSelected, enable, disable }) { ) } + SelectButtons.propTypes = { isSelected: PropTypes.bool.isRequired, enable: PropTypes.func.isRequired, diff --git a/src/pages/SubmitPage/components/InfoSubmit/NumberInputForm.jsx b/src/pages/SubmitPage/components/InfoSubmit/NumberInputForm.jsx index 86fab9db..e4f66ba2 100644 --- a/src/pages/SubmitPage/components/InfoSubmit/NumberInputForm.jsx +++ b/src/pages/SubmitPage/components/InfoSubmit/NumberInputForm.jsx @@ -65,6 +65,7 @@ export default function NumberInputForm({ currencies }) { ) } + NumberInputForm.propTypes = { currencies: PropTypes.arrayOf( PropTypes.shape({ diff --git a/src/pages/SubmitPage/components/PrevNextButtons.jsx b/src/pages/SubmitPage/components/PrevNextButtons.jsx index f39a237b..07746824 100644 --- a/src/pages/SubmitPage/components/PrevNextButtons.jsx +++ b/src/pages/SubmitPage/components/PrevNextButtons.jsx @@ -60,6 +60,7 @@ export default function PrevNextButtons({ step, goNextStep, goPrevStep }) {
) } + PrevNextButtons.propTypes = { step: PropTypes.number.isRequired, goNextStep: PropTypes.func.isRequired, diff --git a/src/pages/SubmitPage/components/RegionSubmit/RegionSelectList.jsx b/src/pages/SubmitPage/components/RegionSubmit/RegionSelectList.jsx index 5341f7f7..b559905b 100644 --- a/src/pages/SubmitPage/components/RegionSubmit/RegionSelectList.jsx +++ b/src/pages/SubmitPage/components/RegionSubmit/RegionSelectList.jsx @@ -62,6 +62,7 @@ function RegionSelectList({ regions }) { ) } + RegionSelectList.propTypes = { regions: PropTypes.arrayOf( PropTypes.shape({ diff --git a/src/pages/SubmitPage/components/RegionSubmit/SelectionList.jsx b/src/pages/SubmitPage/components/RegionSubmit/SelectionList.jsx index b2da432e..497ba17b 100644 --- a/src/pages/SubmitPage/components/RegionSubmit/SelectionList.jsx +++ b/src/pages/SubmitPage/components/RegionSubmit/SelectionList.jsx @@ -27,6 +27,7 @@ export default function SelectionList({ ) } + SelectionList.propTypes = { optionList: PropTypes.arrayOf(Object), optionState: PropTypes.number, diff --git a/src/pages/SubmitPage/components/SubmitSteps.jsx b/src/pages/SubmitPage/components/SubmitSteps.jsx index c411004c..41fc57a5 100644 --- a/src/pages/SubmitPage/components/SubmitSteps.jsx +++ b/src/pages/SubmitPage/components/SubmitSteps.jsx @@ -43,6 +43,7 @@ function SubmitSteps({ step }) { ) } + SubmitSteps.propTypes = { step: PropTypes.number.isRequired, } diff --git a/src/pages/UserEditPage/ProfileEditBlock.jsx b/src/pages/UserEditPage/ProfileEditBlock.jsx index d5ccdf35..11bbfac4 100644 --- a/src/pages/UserEditPage/ProfileEditBlock.jsx +++ b/src/pages/UserEditPage/ProfileEditBlock.jsx @@ -57,6 +57,7 @@ function ProfileEditBlock({ name }) { ) } + ProfileEditBlock.propTypes = { name: PropTypes.string.isRequired } const ProfileEditBlockWrapper = styled.div` diff --git a/src/pages/UserPage/FollowingList.jsx b/src/pages/UserPage/FollowingList.jsx index ca6665b6..56d29b6c 100644 --- a/src/pages/UserPage/FollowingList.jsx +++ b/src/pages/UserPage/FollowingList.jsx @@ -48,6 +48,7 @@ function FollowingListContent({ followingList }) { ) } + FollowingListContent.propTypes = { followingList: PropTypes.arrayOf( PropTypes.shape({ diff --git a/src/pages/UserPage/ReviewList.jsx b/src/pages/UserPage/ReviewList.jsx index 44106f26..198892ce 100644 --- a/src/pages/UserPage/ReviewList.jsx +++ b/src/pages/UserPage/ReviewList.jsx @@ -29,6 +29,7 @@ function ReviewList({ selectedMenu }) { /> ) } + ReviewList.propTypes = { selectedMenu: PropTypes.string.isRequired, } From c25d8cb2d43925d3c38f73b79f383e47cbc65255 Mon Sep 17 00:00:00 2001 From: seoulyego Date: Mon, 7 Oct 2024 16:30:12 +0900 Subject: [PATCH 07/16] KL-182/fix: fix typo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 오타를 수정하였습니다. --- src/pages/UserEditPage/SaveButton.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/UserEditPage/SaveButton.jsx b/src/pages/UserEditPage/SaveButton.jsx index d0336040..8f808cc6 100644 --- a/src/pages/UserEditPage/SaveButton.jsx +++ b/src/pages/UserEditPage/SaveButton.jsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import { useNavigate } from 'react-router-dom' import { Button } from 'antd' import theme from '@styles/theme' -import uploadeToS3 from '@utils/uploadToS3' +import uploadToS3 from '@utils/uploadToS3' import useUserStore from '@stores/useUserStore' import { kyInstance } from '@hooks/kyInstance' import useKyMutation from '@hooks/useKyMutation' @@ -32,7 +32,7 @@ const useEditProfile = () => { }) .json() - await uploadeToS3([data], [profileUrl]) + await uploadToS3([data], [profileUrl]) await kyInstance.post('me/upload-complete', { body: JSON.stringify({ imageId: data.id }), From 64c644343f9103585ad7002edbc51f1d0081e561 Mon Sep 17 00:00:00 2001 From: seoulyego Date: Tue, 8 Oct 2024 13:29:01 +0900 Subject: [PATCH 08/16] KL-182/fix: fix absolute path import style MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 잘못된 절대경로 import 스타일을 수정하였습니다. --- src/components/Button/PreviewLikeButton.jsx | 2 +- src/components/Navbar/NavList.jsx | 2 +- src/components/Navbar/components/LoginButton.jsx | 2 +- src/components/Navbar/components/LoginModal.jsx | 2 +- src/components/ProductFeed/ProductFeed.jsx | 2 +- src/components/UserProfile/UserFollowButton.jsx | 7 ++++--- src/hooks/useCheckAuth.js | 2 +- src/hooks/useUserData.js | 2 +- src/loader/meLoader.js | 2 +- src/pages/ErrorPage.jsx | 2 +- src/pages/HomePage/HomePage.jsx | 2 +- src/pages/HomePage/ReviewCarousel.jsx | 2 +- src/pages/Layout.jsx | 4 ++-- src/pages/ReviewPage/ReviewLikeButton.jsx | 2 +- src/pages/ReviewPage/ReviewPage.jsx | 2 +- src/pages/SubmitPage/SubmitPage.jsx | 2 +- src/pages/UserPage/MyPage.jsx | 4 ++-- 17 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/components/Button/PreviewLikeButton.jsx b/src/components/Button/PreviewLikeButton.jsx index e73f0191..93e6559b 100644 --- a/src/components/Button/PreviewLikeButton.jsx +++ b/src/components/Button/PreviewLikeButton.jsx @@ -2,7 +2,7 @@ import React, { useState } from 'react' import PropTypes from 'prop-types' import { FaHeart, FaRegHeart } from 'react-icons/fa6' import useProductLike from '@hooks/useProductLike' -import useLoginModal from '@/hooks/useLoginModal' +import useLoginModal from '@hooks/useLoginModal' import IconTextButton from './IconTextButton' function PreviewLikeButton({ diff --git a/src/components/Navbar/NavList.jsx b/src/components/Navbar/NavList.jsx index 34ab10ba..cc72277f 100644 --- a/src/components/Navbar/NavList.jsx +++ b/src/components/Navbar/NavList.jsx @@ -4,7 +4,7 @@ import router from '@/router' import theme from '@styles/theme' import { navIndex, modalIndex } from '@constants/navIndex' import { useCurrentPageStore, useModalStore } from '@stores/navbarStores' -import useLoginStore from '@/stores/useLoginStore' +import useLoginStore from '@stores/useLoginStore' import Notification from './components/Notification' import Icons from '../Icons/Icons' diff --git a/src/components/Navbar/components/LoginButton.jsx b/src/components/Navbar/components/LoginButton.jsx index eb0447e0..b0262253 100644 --- a/src/components/Navbar/components/LoginButton.jsx +++ b/src/components/Navbar/components/LoginButton.jsx @@ -3,7 +3,7 @@ import { useShallow } from 'zustand/react/shallow' import router from '@/router' import { modalIndex } from '@constants/navIndex' import { useModalStore } from '@stores/navbarStores' -import useLoginStore from '@/stores/useLoginStore' +import useLoginStore from '@stores/useLoginStore' import PlainButton from '../../Button/PlainButton' import ProfileImage from '../../UserProfile/ProfileImage' diff --git a/src/components/Navbar/components/LoginModal.jsx b/src/components/Navbar/components/LoginModal.jsx index a304c0f1..6d50d62e 100644 --- a/src/components/Navbar/components/LoginModal.jsx +++ b/src/components/Navbar/components/LoginModal.jsx @@ -2,8 +2,8 @@ import React from 'react' import styled from 'styled-components' import { Modal, Button, ConfigProvider } from 'antd' import theme from '@styles/theme' -import { KakaoLogo, NaverLogo } from '@images/logos' import { modalIndex } from '@constants/navIndex' +import { KakaoLogo, NaverLogo } from '@images/logos' import { useModalStore } from '@stores/navbarStores' const ModalTheme = { diff --git a/src/components/ProductFeed/ProductFeed.jsx b/src/components/ProductFeed/ProductFeed.jsx index 9a1fdf52..efed87b3 100644 --- a/src/components/ProductFeed/ProductFeed.jsx +++ b/src/components/ProductFeed/ProductFeed.jsx @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { Pagination, ConfigProvider } from 'antd' import theme from '@styles/theme' -import useLoginStore from '@/stores/useLoginStore' +import useLoginStore from '@stores/useLoginStore' import PreviewContent from '../PreviewContent/PreviewContent' import { FeedContainer, StyledFeed } from './ProductFeed.style' diff --git a/src/components/UserProfile/UserFollowButton.jsx b/src/components/UserProfile/UserFollowButton.jsx index b1e3b0d5..de382bc5 100644 --- a/src/components/UserProfile/UserFollowButton.jsx +++ b/src/components/UserProfile/UserFollowButton.jsx @@ -3,7 +3,8 @@ import PropTypes from 'prop-types' import { useShallow } from 'zustand/react/shallow' import { Button, ConfigProvider, notification } from 'antd' import theme from '@styles/theme' -import useLoginStore from '@/stores/useLoginStore' +import useLoginStore from '@stores/useLoginStore' +import { method } from '@hooks/kyInstance' import useKyQuery from '@hooks/useKyQuery' import useKyMutation from '@hooks/useKyMutation' import useLoginModal from '@hooks/useLoginModal' @@ -21,7 +22,7 @@ const useCheckFollow = (id) => { } const useFollow = (id) => { - const { mutateAsync } = useKyMutation('post', `me/following/${id}`, [ + const { mutateAsync } = useKyMutation(method.POST, `me/following/${id}`, [ 'me/following', id, ]) @@ -46,7 +47,7 @@ const useFollow = (id) => { } const useUnFollow = (id) => { - const { mutateAsync } = useKyMutation('delete', `me/following/${id}`, [ + const { mutateAsync } = useKyMutation(method.DELETE, `me/following/${id}`, [ 'me/following', id, ]) diff --git a/src/hooks/useCheckAuth.js b/src/hooks/useCheckAuth.js index affa5662..894a6ecb 100644 --- a/src/hooks/useCheckAuth.js +++ b/src/hooks/useCheckAuth.js @@ -1,5 +1,5 @@ import errorCode from '@constants/errorCode' -import useLoginStore from '@/stores/useLoginStore' +import useLoginStore from '@stores/useLoginStore' const useCheckAuth = () => { const isLogin = useLoginStore((state) => state.isLogin) diff --git a/src/hooks/useUserData.js b/src/hooks/useUserData.js index e1c42bbe..f4f16feb 100644 --- a/src/hooks/useUserData.js +++ b/src/hooks/useUserData.js @@ -1,4 +1,4 @@ -import useLoginStore from '@/stores/useLoginStore' +import useLoginStore from '@stores/useLoginStore' import useKyQuery from './useKyQuery' const useUserData = () => { diff --git a/src/loader/meLoader.js b/src/loader/meLoader.js index 567072ed..5d2904ed 100644 --- a/src/loader/meLoader.js +++ b/src/loader/meLoader.js @@ -1,5 +1,5 @@ -import { kyInstance } from '@hooks/kyInstance' import errorCode from '@constants/errorCode' +import { kyInstance } from '@hooks/kyInstance' const meLoader = async () => { try { diff --git a/src/pages/ErrorPage.jsx b/src/pages/ErrorPage.jsx index 612c7efe..ef2a9c7b 100644 --- a/src/pages/ErrorPage.jsx +++ b/src/pages/ErrorPage.jsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react' import styled from 'styled-components' import { useRouteError, useNavigate } from 'react-router-dom' import theme from '@styles/theme' -import errorCode from '@/constants/errorCode' +import errorCode from '@constants/errorCode' import ErrorImage from '@images/err.jpg' export default function ErrorPage() { diff --git a/src/pages/HomePage/HomePage.jsx b/src/pages/HomePage/HomePage.jsx index d6f67483..673a5676 100644 --- a/src/pages/HomePage/HomePage.jsx +++ b/src/pages/HomePage/HomePage.jsx @@ -4,7 +4,7 @@ import { createPortal } from 'react-dom' import { useNavigate, useLoaderData } from 'react-router-dom' import { FloatButton } from 'antd' import theme from '@styles/theme' -import useLoginStore from '@/stores/useLoginStore' +import useLoginStore from '@stores/useLoginStore' import useLoginModal from '@hooks/useLoginModal' import Icons from '@components/Icons/Icons' import MainBanner from './MainBanner' diff --git a/src/pages/HomePage/ReviewCarousel.jsx b/src/pages/HomePage/ReviewCarousel.jsx index 6a766ba2..86b26423 100644 --- a/src/pages/HomePage/ReviewCarousel.jsx +++ b/src/pages/HomePage/ReviewCarousel.jsx @@ -1,9 +1,9 @@ import React from 'react' import styled from 'styled-components' import PropTypes from 'prop-types' +import useLoginStore from '@stores/useLoginStore' import StyledFlickity from '@components/Carousel/Carousel' import PreviewContent from '@components/PreviewContent/PreviewContent' -import useLoginStore from '@/stores/useLoginStore' const flickityOptions = { wrapAround: false, diff --git a/src/pages/Layout.jsx b/src/pages/Layout.jsx index 219d8a48..6e3b420b 100644 --- a/src/pages/Layout.jsx +++ b/src/pages/Layout.jsx @@ -4,8 +4,8 @@ import { RouterProvider } from 'react-router-dom' import { useShallow } from 'zustand/react/shallow' import router from '@/router' import GlobalStyle from '@styles/GlobalStyle' -import useLoginStore from '@/stores/useLoginStore' -import useUserData from '@/hooks/useUserData' +import useLoginStore from '@stores/useLoginStore' +import useUserData from '@hooks/useUserData' import NavBar from '@components/Navbar/NavBar' import Footer from '@components/Footer/Footer' import { isEqual } from 'lodash-es' diff --git a/src/pages/ReviewPage/ReviewLikeButton.jsx b/src/pages/ReviewPage/ReviewLikeButton.jsx index 1c0b61c3..956cd804 100644 --- a/src/pages/ReviewPage/ReviewLikeButton.jsx +++ b/src/pages/ReviewPage/ReviewLikeButton.jsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import PropTypes from 'prop-types' import { FloatButton } from 'antd' import useProductLike from '@hooks/useProductLike' -import useLoginModal from '@/hooks/useLoginModal' +import useLoginModal from '@hooks/useLoginModal' import Icons from '@components/Icons/Icons' export default function ReviewLikeButton({ diff --git a/src/pages/ReviewPage/ReviewPage.jsx b/src/pages/ReviewPage/ReviewPage.jsx index 9d89c12a..dbdf1904 100644 --- a/src/pages/ReviewPage/ReviewPage.jsx +++ b/src/pages/ReviewPage/ReviewPage.jsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import { useLoaderData } from 'react-router-dom' import { Divider } from 'antd' import theme from '@styles/theme' -import useLoginStore from '@/stores/useLoginStore' +import useLoginStore from '@stores/useLoginStore' import UserProfile from '@components/UserProfile/UserProfile' import UserFollowButton from '@components/UserProfile/UserFollowButton' import Comment from '@components/Comment/Comment' diff --git a/src/pages/SubmitPage/SubmitPage.jsx b/src/pages/SubmitPage/SubmitPage.jsx index 695b8719..ebc19da2 100644 --- a/src/pages/SubmitPage/SubmitPage.jsx +++ b/src/pages/SubmitPage/SubmitPage.jsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import theme from '@styles/theme' import submitSteps from '@constants/submitSteps' import useInitialData from '@hooks/useInitialData' -import useCheckAuth from '@/hooks/useCheckAuth' +import useCheckAuth from '@hooks/useCheckAuth' import * as Form from './components/index' import PostPage from './components/PostPage' import PrevNextButtons from './components/PrevNextButtons' diff --git a/src/pages/UserPage/MyPage.jsx b/src/pages/UserPage/MyPage.jsx index aa25bf25..715e2573 100644 --- a/src/pages/UserPage/MyPage.jsx +++ b/src/pages/UserPage/MyPage.jsx @@ -1,8 +1,8 @@ import React from 'react' import styled from 'styled-components' import { Divider } from 'antd' -import useLoginStore from '@/stores/useLoginStore' -import useCheckAuth from '@/hooks/useCheckAuth' +import useLoginStore from '@stores/useLoginStore' +import useCheckAuth from '@hooks/useCheckAuth' import UserEditButton from '@components/UserProfile/UserEditButton' import UserProfile from '@components/UserProfile/UserProfile' import MyMenu from './MyMenu' From e42d57a4393197daabbfb2b519018f883c7a9b83 Mon Sep 17 00:00:00 2001 From: seoulyego Date: Tue, 8 Oct 2024 15:43:11 +0900 Subject: [PATCH 09/16] KL-182/refactor: apply useCheckAuth on UserEditPage MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - UserEditPage에 useCheckAuth 훅을 사용하여 로그인 여부를 확인합니다. --- src/hooks/useUserData.js | 2 +- src/pages/UserEditPage/UserEditPage.jsx | 33 ++++++++----------------- src/router.jsx | 1 - 3 files changed, 11 insertions(+), 25 deletions(-) diff --git a/src/hooks/useUserData.js b/src/hooks/useUserData.js index f4f16feb..cecb54aa 100644 --- a/src/hooks/useUserData.js +++ b/src/hooks/useUserData.js @@ -7,7 +7,7 @@ const useUserData = () => { return useKyQuery('me', undefined, { staleTime: 1000 * 60 * 60, gcTime: 1000 * 60 * 60, - retry: isLogin, + enabled: isLogin, select: (data) => data.data, }) } diff --git a/src/pages/UserEditPage/UserEditPage.jsx b/src/pages/UserEditPage/UserEditPage.jsx index 236bdb7f..2573f230 100644 --- a/src/pages/UserEditPage/UserEditPage.jsx +++ b/src/pages/UserEditPage/UserEditPage.jsx @@ -1,46 +1,33 @@ import React, { useEffect } from 'react' import styled from 'styled-components' -import { useNavigate } from 'react-router-dom' -import { useShallow } from 'zustand/react/shallow' import { Divider } from 'antd' import theme from '@styles/theme' import useUserStore from '@stores/useUserStore' import useLoginStore from '@stores/useLoginStore' +import useCheckAuth from '@hooks/useCheckAuth' import ProfileEditBlock from './ProfileEditBlock' import NicknameInput from './NicknameInput' import DescriptionInput from './DescriptionInput' import SaveButton from './SaveButton' function UserEditPage() { - const { isLogin, loginData } = useLoginStore( - useShallow((state) => ({ - isLogin: state.isLogin, - loginData: state.loginData, - })) - ) + useCheckAuth() + const loginData = useLoginStore((state) => state.loginData) const setUserData = useUserStore((state) => state.setUserData) - const navigate = useNavigate() useEffect(() => { - if (!isLogin) { - alert('로그인 후 사용 가능합니다') - navigate('/') - } - }, [isLogin]) - - if (!isLogin) return null - - setUserData({ - profileUrl: loginData.image?.url || '', - name: loginData.name, - description: loginData.description, - }) + setUserData({ + profileUrl: loginData?.image?.url || '', + name: loginData?.name || '', + description: loginData?.description || '', + }) + }, [loginData]) return (

프로필 수정

- +
diff --git a/src/router.jsx b/src/router.jsx index 22087ed7..6df1c300 100644 --- a/src/router.jsx +++ b/src/router.jsx @@ -36,7 +36,6 @@ const routes = [ }, { path: 'me/edit', - loader: loader.meLoader, element: , }, { From 8e9d160dd54365320dc951413b200d4f5eb43b41 Mon Sep 17 00:00:00 2001 From: sayoon-mandarine Date: Tue, 8 Oct 2024 15:19:55 +0900 Subject: [PATCH 10/16] KL-159/feat: change font-display to block --- index.html | 4 ++-- src/styles/font.css | 12 ++++++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 30f6842b..326b70b9 100644 --- a/index.html +++ b/index.html @@ -8,11 +8,11 @@ /> React App diff --git a/src/styles/font.css b/src/styles/font.css index cb16153a..9e347b31 100644 --- a/src/styles/font.css +++ b/src/styles/font.css @@ -1,30 +1,36 @@ @font-face { font-family: 'NanumSquareNeoLight'; + font-display: block; src: url('./NanumSquareNeo-aLt.ttf') format('truetype'); } @font-face { font-family: 'NanumSquareNeo'; + font-display: block; src: url('./NanumSquareNeo-bRg.ttf') format('truetype'); } @font-face { font-family: 'NanumSquareNeoBold'; + font-display: block; src: url('./NanumSquareNeo-cBd.ttf') format('truetype'); } @font-face { font-family: 'NanumSquareNeoExtraBold'; + font-display: block; src: url('./NanumSquareNeo-dEb.ttf') format('truetype'); } @font-face { font-family: 'NanumSquareNeoHeavy'; + font-display: block; src: url('./NanumSquareNeo-aLt.ttf') format('truetype'); } @font-face { font-family: 'PartialSansKR'; + font-display: block; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/PartialSansKR-Regular.woff2') format('woff2'); font-weight: normal; @@ -34,9 +40,9 @@ /* latin-ext */ @font-face { font-family: 'EduHand'; + font-display: block; font-style: normal; font-weight: 400 700; - font-display: swap; src: url(https://fonts.gstatic.com/s/eduauvicwanthand/v1/C8c94dY1tX2x0uuiUHFS4y7ERV-jfqJ6x06dH9MtW4Q.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, @@ -47,8 +53,8 @@ @font-face { font-family: 'EduHand'; font-style: normal; + font-display: block; font-weight: 400 700; - font-display: swap; src: url(https://fonts.gstatic.com/s/eduauvicwanthand/v1/C8c94dY1tX2x0uuiUHFS4y7ERV-jfqJ6x06dEdMt.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, @@ -58,6 +64,7 @@ @font-face { font-family: 'NanumBarunpen'; + font-display: block; src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunpen/NanumBarunpenR.eot); src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunpen/NanumBarunpenR.eot?#iefix) @@ -70,6 +77,7 @@ @font-face { font-family: 'NanumBarunpenB'; + font-display: block; src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunpen/NanumBarunpenB.eot); src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunpen/NanumBarunpenB.eot?#iefix) From a4b44a55bf903c340927ef4080925ac3dca11755 Mon Sep 17 00:00:00 2001 From: sayoon-mandarine Date: Tue, 8 Oct 2024 15:50:21 +0900 Subject: [PATCH 11/16] KL-159/chore: optimize build MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 빌드 최적화 : 여러군데서 사용하는 라이브러리를 하나의 파일로 분리하여 용량을 축소시켰습니다 --- vite.config.mjs | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/vite.config.mjs b/vite.config.mjs index 2946a536..3b7adcd0 100644 --- a/vite.config.mjs +++ b/vite.config.mjs @@ -48,4 +48,16 @@ export default defineConfig({ }, ], }, + build: { + rollupOptions: { + output: { + manualChunks: (id) => { + if (id.indexOf('node_modules') !== -1) { + const module = id.split('node_modules/').pop().split('/')[0] + return `vendor/${module}` + } + }, + }, + }, + }, }) From 08ca28432e2f06a0325a6455a66bc698ab48af8a Mon Sep 17 00:00:00 2001 From: sayoon-mandarine Date: Tue, 8 Oct 2024 15:58:39 +0900 Subject: [PATCH 12/16] KL-159/rename: change directory --- src/components/Comment/CommentEdit.jsx | 2 +- src/components/Comment/CommentInput.jsx | 2 +- src/components/Comment/CommentOptions.jsx | 2 +- src/components/Notification/NotificationContent.jsx | 2 +- src/components/UserProfile/UserEditButton.jsx | 2 +- src/components/UserProfile/UserFollowButton.jsx | 2 +- src/hooks/useDebouncedSearch.jsx | 2 +- src/hooks/useDeleteNotificationAll.js | 2 +- src/hooks/useKy.js | 2 +- src/hooks/useKyMutation.js | 2 +- src/hooks/useKyQuery.js | 2 +- src/hooks/useProductLike.js | 2 +- src/hooks/useReadNotificationAll.js | 2 +- src/hooks/useReviewSubmit.js | 2 +- src/loader/feedLoader.js | 2 +- src/loader/homeLoader.js | 2 +- src/loader/meLoader.js | 2 +- src/loader/productEditLoader.js | 2 +- src/loader/productLoader.js | 2 +- src/loader/userLoader.js | 2 +- src/pages/ReviewPage/ReviewOptions.jsx | 2 +- src/pages/SubmitPage/components/PostPage.jsx | 2 +- src/pages/UserEditPage/SaveButton.jsx | 2 +- src/{hooks => utils}/kyInstance.js | 0 24 files changed, 23 insertions(+), 23 deletions(-) rename src/{hooks => utils}/kyInstance.js (100%) diff --git a/src/components/Comment/CommentEdit.jsx b/src/components/Comment/CommentEdit.jsx index 632104c4..4590b694 100644 --- a/src/components/Comment/CommentEdit.jsx +++ b/src/components/Comment/CommentEdit.jsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import PropTypes from 'prop-types' import { Input, Button, ConfigProvider } from 'antd' import theme from '@styles/theme' -import { method } from '@hooks/kyInstance' +import { method } from '@utils/kyInstance' import useKyMutation from '@hooks/useKyMutation' const inputTheme = { diff --git a/src/components/Comment/CommentInput.jsx b/src/components/Comment/CommentInput.jsx index ac486d6b..947eb968 100644 --- a/src/components/Comment/CommentInput.jsx +++ b/src/components/Comment/CommentInput.jsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import PropTypes from 'prop-types' import { Input, Button, ConfigProvider } from 'antd' import theme from '@styles/theme' -import { method } from '@hooks/kyInstance' +import { method } from '@utils/kyInstance' import useLoginModal from '@hooks/useLoginModal' import useKyMutation from '@hooks/useKyMutation' import ProfileImage from '../UserProfile/ProfileImage' diff --git a/src/components/Comment/CommentOptions.jsx b/src/components/Comment/CommentOptions.jsx index d557b5f2..ab453cf5 100644 --- a/src/components/Comment/CommentOptions.jsx +++ b/src/components/Comment/CommentOptions.jsx @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { Modal, notification } from 'antd' import theme from '@styles/theme' -import { method } from '@hooks/kyInstance' +import { method } from '@utils/kyInstance' import useKyMutation from '@hooks/useKyMutation' import OptionDropdown from '../OptionDropdown/OptionDropdown' diff --git a/src/components/Notification/NotificationContent.jsx b/src/components/Notification/NotificationContent.jsx index ec7544dc..4d8c10da 100644 --- a/src/components/Notification/NotificationContent.jsx +++ b/src/components/Notification/NotificationContent.jsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import PropTypes from 'prop-types' import router from '@/router' import theme from '@styles/theme' -import { method } from '@hooks/kyInstance' +import { method } from '@utils/kyInstance' import useKyMutation from '@hooks/useKyMutation' function NotificationContent({ content }) { diff --git a/src/components/UserProfile/UserEditButton.jsx b/src/components/UserProfile/UserEditButton.jsx index cbd63f18..d7863d12 100644 --- a/src/components/UserProfile/UserEditButton.jsx +++ b/src/components/UserProfile/UserEditButton.jsx @@ -2,7 +2,7 @@ import React from 'react' import { useNavigate } from 'react-router-dom' import { Button } from 'antd' import theme from '@styles/theme' -import { kyInstance } from '@hooks/kyInstance' +import { kyInstance } from '@utils/kyInstance' function UserEditButton() { const naviagte = useNavigate() diff --git a/src/components/UserProfile/UserFollowButton.jsx b/src/components/UserProfile/UserFollowButton.jsx index de382bc5..1b60c976 100644 --- a/src/components/UserProfile/UserFollowButton.jsx +++ b/src/components/UserProfile/UserFollowButton.jsx @@ -4,7 +4,7 @@ import { useShallow } from 'zustand/react/shallow' import { Button, ConfigProvider, notification } from 'antd' import theme from '@styles/theme' import useLoginStore from '@stores/useLoginStore' -import { method } from '@hooks/kyInstance' +import { method } from '@utils/kyInstance' import useKyQuery from '@hooks/useKyQuery' import useKyMutation from '@hooks/useKyMutation' import useLoginModal from '@hooks/useLoginModal' diff --git a/src/hooks/useDebouncedSearch.jsx b/src/hooks/useDebouncedSearch.jsx index d131bc44..5ea86292 100644 --- a/src/hooks/useDebouncedSearch.jsx +++ b/src/hooks/useDebouncedSearch.jsx @@ -5,7 +5,7 @@ import { Divider } from 'antd' import router from '@/router' import theme from '@styles/theme' import { modalIndex } from '@constants/navIndex' -import { kyInstance } from './kyInstance' +import { kyInstance } from '@utils/kyInstance' const SearchMapping = { products: '리뷰', diff --git a/src/hooks/useDeleteNotificationAll.js b/src/hooks/useDeleteNotificationAll.js index 44b01100..fd117f80 100644 --- a/src/hooks/useDeleteNotificationAll.js +++ b/src/hooks/useDeleteNotificationAll.js @@ -1,4 +1,4 @@ -import { method } from './kyInstance' +import { method } from '@utils/kyInstance' import useKyMutation from './useKyMutation' function useDeleteNotificationAll() { diff --git a/src/hooks/useKy.js b/src/hooks/useKy.js index 470f0727..c1915901 100644 --- a/src/hooks/useKy.js +++ b/src/hooks/useKy.js @@ -1,5 +1,5 @@ import { useState, useEffect } from 'react' -import { kyInstance } from './kyInstance' +import { kyInstance } from '@utils/kyInstance' function useKy(initialConfig = null, autoFetch = false, initialData = null) { const [loading, setLoading] = useState(true) diff --git a/src/hooks/useKyMutation.js b/src/hooks/useKyMutation.js index debbb300..88a75081 100644 --- a/src/hooks/useKyMutation.js +++ b/src/hooks/useKyMutation.js @@ -1,5 +1,5 @@ import { useMutation, useQueryClient } from '@tanstack/react-query' -import { kyInstance } from './kyInstance' +import { kyInstance } from '@utils/kyInstance' /** * Ky기반 useMutation 호출 훅 diff --git a/src/hooks/useKyQuery.js b/src/hooks/useKyQuery.js index 527e6a32..89f238db 100644 --- a/src/hooks/useKyQuery.js +++ b/src/hooks/useKyQuery.js @@ -1,5 +1,5 @@ import { useQuery } from '@tanstack/react-query' -import { kyInstance } from './kyInstance' +import { kyInstance } from '@utils/kyInstance' /** * Ky기반 useQeury 호출 훅 diff --git a/src/hooks/useProductLike.js b/src/hooks/useProductLike.js index 65929fb5..46e8e614 100644 --- a/src/hooks/useProductLike.js +++ b/src/hooks/useProductLike.js @@ -1,4 +1,4 @@ -import { method } from './kyInstance' +import { method } from '@utils/kyInstance' import useKyMutation from './useKyMutation' const useProductLike = (productId) => { diff --git a/src/hooks/useReadNotificationAll.js b/src/hooks/useReadNotificationAll.js index 3c938242..3acc7763 100644 --- a/src/hooks/useReadNotificationAll.js +++ b/src/hooks/useReadNotificationAll.js @@ -1,4 +1,4 @@ -import { method } from './kyInstance' +import { method } from '@utils/kyInstance' import useKyMutation from './useKyMutation' function useReadNotificationAll() { diff --git a/src/hooks/useReviewSubmit.js b/src/hooks/useReviewSubmit.js index b8edc2bc..124084db 100644 --- a/src/hooks/useReviewSubmit.js +++ b/src/hooks/useReviewSubmit.js @@ -2,7 +2,7 @@ import { useEffect } from 'react' import { useNavigate } from 'react-router-dom' import uploadToS3 from '@utils/uploadToS3' import useFormStore from '@stores/useFormStore' -import { kyInstance } from './kyInstance' +import { kyInstance } from '@utils/kyInstance' const useReviewSubmit = (httpMethod, uri, goPrevStep) => { const reviewData = useFormStore((state) => ({ diff --git a/src/loader/feedLoader.js b/src/loader/feedLoader.js index bbf33198..b26063d8 100644 --- a/src/loader/feedLoader.js +++ b/src/loader/feedLoader.js @@ -1,4 +1,4 @@ -import { kyInstance } from '@hooks/kyInstance' +import { kyInstance } from '@utils/kyInstance' const feedLoader = async () => { try { diff --git a/src/loader/homeLoader.js b/src/loader/homeLoader.js index 4db9a37f..87f33e18 100644 --- a/src/loader/homeLoader.js +++ b/src/loader/homeLoader.js @@ -1,4 +1,4 @@ -import { kyInstance } from '@hooks/kyInstance' +import { kyInstance } from '@utils/kyInstance' const homeLoader = async () => { try { diff --git a/src/loader/meLoader.js b/src/loader/meLoader.js index 5d2904ed..56eb448d 100644 --- a/src/loader/meLoader.js +++ b/src/loader/meLoader.js @@ -1,5 +1,5 @@ import errorCode from '@constants/errorCode' -import { kyInstance } from '@hooks/kyInstance' +import { kyInstance } from '@utils/kyInstance' const meLoader = async () => { try { diff --git a/src/loader/productEditLoader.js b/src/loader/productEditLoader.js index b2de81a0..c43ad4e2 100644 --- a/src/loader/productEditLoader.js +++ b/src/loader/productEditLoader.js @@ -1,4 +1,4 @@ -import { kyInstance } from '@hooks/kyInstance' +import { kyInstance } from '@utils/kyInstance' const productLoader = async ({ params }) => { const { id } = params diff --git a/src/loader/productLoader.js b/src/loader/productLoader.js index 7f88a6f5..f5273a28 100644 --- a/src/loader/productLoader.js +++ b/src/loader/productLoader.js @@ -1,4 +1,4 @@ -import { kyInstance } from '@hooks/kyInstance' +import { kyInstance } from '@utils/kyInstance' const productLoader = async ({ params }) => { const { id } = params diff --git a/src/loader/userLoader.js b/src/loader/userLoader.js index c8f2d563..40680792 100644 --- a/src/loader/userLoader.js +++ b/src/loader/userLoader.js @@ -1,4 +1,4 @@ -import { kyInstance } from '@hooks/kyInstance' +import { kyInstance } from '@utils/kyInstance' const userLoader = async ({ params }) => { const { id } = params diff --git a/src/pages/ReviewPage/ReviewOptions.jsx b/src/pages/ReviewPage/ReviewOptions.jsx index fda11d97..d7c4647a 100644 --- a/src/pages/ReviewPage/ReviewOptions.jsx +++ b/src/pages/ReviewPage/ReviewOptions.jsx @@ -2,7 +2,7 @@ import React from 'react' import { useNavigate, useLocation } from 'react-router-dom' import { Modal, notification } from 'antd' import theme from '@styles/theme' -import { kyInstance } from '@hooks/kyInstance' +import { kyInstance } from '@utils/kyInstance' import OptionDropdown from '@components/OptionDropdown/OptionDropdown' function ReviewOptions() { diff --git a/src/pages/SubmitPage/components/PostPage.jsx b/src/pages/SubmitPage/components/PostPage.jsx index 44eef23a..1fdebe77 100644 --- a/src/pages/SubmitPage/components/PostPage.jsx +++ b/src/pages/SubmitPage/components/PostPage.jsx @@ -1,7 +1,7 @@ import React from 'react' import { useParams } from 'react-router-dom' import PropTypes from 'prop-types' -import { method } from '@hooks/kyInstance' +import { method } from '@utils/kyInstance' import useReviewSubmit from '@hooks/useReviewSubmit' import LoadingPage from '../../LoadingPage' diff --git a/src/pages/UserEditPage/SaveButton.jsx b/src/pages/UserEditPage/SaveButton.jsx index 8f808cc6..9bb4d3af 100644 --- a/src/pages/UserEditPage/SaveButton.jsx +++ b/src/pages/UserEditPage/SaveButton.jsx @@ -5,7 +5,7 @@ import { Button } from 'antd' import theme from '@styles/theme' import uploadToS3 from '@utils/uploadToS3' import useUserStore from '@stores/useUserStore' -import { kyInstance } from '@hooks/kyInstance' +import { kyInstance } from '@utils/kyInstance' import useKyMutation from '@hooks/useKyMutation' const useEditProfile = () => { diff --git a/src/hooks/kyInstance.js b/src/utils/kyInstance.js similarity index 100% rename from src/hooks/kyInstance.js rename to src/utils/kyInstance.js From 0f54fe143009bfa46d06f599e787561aa99edc2e Mon Sep 17 00:00:00 2001 From: sayoon-mandarine Date: Tue, 8 Oct 2024 15:59:12 +0900 Subject: [PATCH 13/16] KL-159/fix: fix login not working error --- src/hooks/useUserData.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/hooks/useUserData.js b/src/hooks/useUserData.js index cecb54aa..bd2ef6fa 100644 --- a/src/hooks/useUserData.js +++ b/src/hooks/useUserData.js @@ -1,13 +1,9 @@ -import useLoginStore from '@stores/useLoginStore' import useKyQuery from './useKyQuery' const useUserData = () => { - const isLogin = useLoginStore((state) => state.isLogin) - return useKyQuery('me', undefined, { staleTime: 1000 * 60 * 60, gcTime: 1000 * 60 * 60, - enabled: isLogin, select: (data) => data.data, }) } From 6f7ef0d69374953f746305f0a834499b1f2d3da5 Mon Sep 17 00:00:00 2001 From: sayoon-mandarine Date: Tue, 8 Oct 2024 16:05:38 +0900 Subject: [PATCH 14/16] KL-159/chore: change auto deploy branch --- .github/workflows/main.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 0879e05c..7986cf16 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -3,7 +3,7 @@ name: Deploy to AWS S3 on: push: branches: - - develop + - main jobs: build: From 8ec254476941e6c3257539a64faac0ecb449184f Mon Sep 17 00:00:00 2001 From: SangJeong Yoon Date: Tue, 8 Oct 2024 16:26:45 +0900 Subject: [PATCH 15/16] Update CommentEdit.jsx --- src/components/Comment/CommentEdit.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Comment/CommentEdit.jsx b/src/components/Comment/CommentEdit.jsx index 41f1c050..4590b694 100644 --- a/src/components/Comment/CommentEdit.jsx +++ b/src/components/Comment/CommentEdit.jsx @@ -4,6 +4,7 @@ import PropTypes from 'prop-types' import { Input, Button, ConfigProvider } from 'antd' import theme from '@styles/theme' import { method } from '@utils/kyInstance' +import useKyMutation from '@hooks/useKyMutation' const inputTheme = { components: { From 77d689feac98bcab5859e52e03c501fff6512f0f Mon Sep 17 00:00:00 2001 From: seoulyego Date: Tue, 8 Oct 2024 16:33:34 +0900 Subject: [PATCH 16/16] update import order --- src/components/UserProfile/UserFollowButton.jsx | 2 +- src/hooks/useReviewSubmit.js | 2 +- src/pages/UserEditPage/SaveButton.jsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/UserProfile/UserFollowButton.jsx b/src/components/UserProfile/UserFollowButton.jsx index 1b60c976..c6a124e4 100644 --- a/src/components/UserProfile/UserFollowButton.jsx +++ b/src/components/UserProfile/UserFollowButton.jsx @@ -3,8 +3,8 @@ import PropTypes from 'prop-types' import { useShallow } from 'zustand/react/shallow' import { Button, ConfigProvider, notification } from 'antd' import theme from '@styles/theme' -import useLoginStore from '@stores/useLoginStore' import { method } from '@utils/kyInstance' +import useLoginStore from '@stores/useLoginStore' import useKyQuery from '@hooks/useKyQuery' import useKyMutation from '@hooks/useKyMutation' import useLoginModal from '@hooks/useLoginModal' diff --git a/src/hooks/useReviewSubmit.js b/src/hooks/useReviewSubmit.js index 124084db..fd161b06 100644 --- a/src/hooks/useReviewSubmit.js +++ b/src/hooks/useReviewSubmit.js @@ -1,8 +1,8 @@ import { useEffect } from 'react' import { useNavigate } from 'react-router-dom' import uploadToS3 from '@utils/uploadToS3' -import useFormStore from '@stores/useFormStore' import { kyInstance } from '@utils/kyInstance' +import useFormStore from '@stores/useFormStore' const useReviewSubmit = (httpMethod, uri, goPrevStep) => { const reviewData = useFormStore((state) => ({ diff --git a/src/pages/UserEditPage/SaveButton.jsx b/src/pages/UserEditPage/SaveButton.jsx index 9bb4d3af..a866d40f 100644 --- a/src/pages/UserEditPage/SaveButton.jsx +++ b/src/pages/UserEditPage/SaveButton.jsx @@ -3,9 +3,9 @@ import styled from 'styled-components' import { useNavigate } from 'react-router-dom' import { Button } from 'antd' import theme from '@styles/theme' +import { kyInstance } from '@utils/kyInstance' import uploadToS3 from '@utils/uploadToS3' import useUserStore from '@stores/useUserStore' -import { kyInstance } from '@utils/kyInstance' import useKyMutation from '@hooks/useKyMutation' const useEditProfile = () => {