From b5cb998e6e18c790ebbf4e0e6f80e4fbb3aba3e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Wed, 18 Oct 2023 23:08:44 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EB=B9=84=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=EC=8B=9C=20=EB=82=98=ED=83=80=EB=82=98=EB=8A=94=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ReplaceLoginPageModal.tsx | 35 +++++++++++++++++++ .../ReplaceLoginPagemModal/styles.module.css | 34 ++++++++++++++++++ 2 files changed, 69 insertions(+) create mode 100644 apps/jurumarble/src/components/ReplaceLoginPagemModal/ReplaceLoginPageModal.tsx create mode 100644 apps/jurumarble/src/components/ReplaceLoginPagemModal/styles.module.css diff --git a/apps/jurumarble/src/components/ReplaceLoginPagemModal/ReplaceLoginPageModal.tsx b/apps/jurumarble/src/components/ReplaceLoginPagemModal/ReplaceLoginPageModal.tsx new file mode 100644 index 00000000..4eebebdb --- /dev/null +++ b/apps/jurumarble/src/components/ReplaceLoginPagemModal/ReplaceLoginPageModal.tsx @@ -0,0 +1,35 @@ +import { ModalTemplate } from "@monorepo/ui"; +import Path from "lib/Path"; +import { getClassNames } from "lib/styles/getClassNames"; +import Link from "next/link"; + +import styles from "./styles.module.css"; + +const cx = getClassNames(styles); + +interface Props { + onToggleReplaceLoginPageModal: () => void; +} + +const ReplaceLoginPageModal = ({ onToggleReplaceLoginPageModal }: Props) => { + return ( + +
+
로그인 후, 이용하실 수 있습니다
+
+ + + 확인 + +
+
+ + ); +}; + +export default ReplaceLoginPageModal; diff --git a/apps/jurumarble/src/components/ReplaceLoginPagemModal/styles.module.css b/apps/jurumarble/src/components/ReplaceLoginPagemModal/styles.module.css new file mode 100644 index 00000000..fd88b382 --- /dev/null +++ b/apps/jurumarble/src/components/ReplaceLoginPagemModal/styles.module.css @@ -0,0 +1,34 @@ +.container { + padding: 0 24px; +} + +.button { + width: 100%; + height: 56px; + border-radius: 10px; +} + +.cancel-button { + background-color: var(--black_05); + color: var(--black_03); +} + +.complete-button { + display: flex; + justify-content: center; + align-items: center; + background-color: var(--main_01); + color: var(--white); +} + +.buttons { + display: flex; + gap: 7px; + margin-top: 24px; +} + +.modal-text { + text-align: center; + margin-top: 40px; + color: var(--black_01); +} From 3d209c6a219b98c3289b17dafb0fcd73e4429825 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Wed, 18 Oct 2023 23:28:56 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=20=EA=B6=8C?= =?UTF-8?q?=ED=95=9C=EC=9D=B4=20=EC=97=86=EC=9D=84=EC=8B=9C=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=8B=9C=ED=82=A4=EB=8A=94=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[id]/components/DrinkInfoContainer.tsx | 28 +++++-- .../src/app/map/components/MapContainer.tsx | 9 ++ .../src/app/stamp/components/DrinkItem.tsx | 5 +- .../vote/[id]/components/ChipContainer.tsx | 11 ++- .../app/vote/[id]/components/CommentForm.tsx | 12 ++- apps/jurumarble/src/app/vote/[id]/page.tsx | 13 ++- .../[id]/services/useExecuteVoteService.ts | 3 - apps/jurumarble/src/app/vote/page.tsx | 18 +++- apps/jurumarble/src/components/BottomBar.tsx | 82 ++++++++++++------- apps/jurumarble/src/components/Header.tsx | 9 +- .../src/services/useBookmarkService.ts | 7 -- 11 files changed, 140 insertions(+), 57 deletions(-) diff --git a/apps/jurumarble/src/app/drink-info/[id]/components/DrinkInfoContainer.tsx b/apps/jurumarble/src/app/drink-info/[id]/components/DrinkInfoContainer.tsx index 86d0eeb3..b61d96f9 100644 --- a/apps/jurumarble/src/app/drink-info/[id]/components/DrinkInfoContainer.tsx +++ b/apps/jurumarble/src/app/drink-info/[id]/components/DrinkInfoContainer.tsx @@ -1,7 +1,11 @@ +import { useToggle } from '@monorepo/hooks'; import Chip from 'components/Chip'; import Loading from 'components/Loading'; +import ReplaceLoginPageModal from 'components/ReplaceLoginPagemModal/ReplaceLoginPageModal'; import VoteHeader from 'components/VoteHeader'; import { Button } from 'components/button'; +import Path from 'lib/Path'; +import { isLogin } from 'lib/utils/auth'; import Image from 'next/image'; import { useParams, useRouter } from 'next/navigation'; import useDrinkStampService from 'services/useDrinkStampService'; @@ -15,6 +19,8 @@ import styled, { css, useTheme } from 'styled-components'; import useDrinkLoadService from '../services/useDrinkLoadService'; const DrinkInfoContainer = () => { + const [isReplaceLoginPageModal, onToggleReplaceLoginPageModal] = useToggle(); + const router = useRouter(); const params = useParams(); const { id } = params; @@ -59,7 +65,7 @@ const DrinkInfoContainer = () => { } rightButton={ - router.back()}> + router.push(Path.SEARCH_PAGE)}> } @@ -89,12 +95,15 @@ const DrinkInfoContainer = () => { {enjoyCount}명이 즐겼어요 - postDrinkEnjoy(Number(id))} - width={24} - height={24} - fill={stampColor} - /> +
{name}
@@ -127,6 +136,11 @@ const DrinkInfoContainer = () => {
{manufactureAddress}도
+ {isReplaceLoginPageModal && ( + + )} ); diff --git a/apps/jurumarble/src/app/map/components/MapContainer.tsx b/apps/jurumarble/src/app/map/components/MapContainer.tsx index 3a24f7a2..16d9573e 100644 --- a/apps/jurumarble/src/app/map/components/MapContainer.tsx +++ b/apps/jurumarble/src/app/map/components/MapContainer.tsx @@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from 'react'; import { useToggle } from '@react-hookz/web'; import DrinkItem from 'app/stamp/components/DrinkItem'; import Loading from 'components/Loading'; +import ReplaceLoginPageModal from 'components/ReplaceLoginPagemModal/ReplaceLoginPageModal'; import { Button } from 'components/button'; import Image from 'next/image'; import { ExImg1 } from 'public/images'; @@ -21,6 +22,8 @@ interface Location { } const MapContainer = () => { + const [isReplaceLoginPageModal, onToggleReplaceLoginPageModal] = useToggle(); + const [delayRender, setDelayRender] = useState(true); const [nowIn, setNowIn] = useState(''); @@ -267,6 +270,7 @@ const MapContainer = () => { setChangeMapCenter(latitude, longitude); }} selectedDrinkList={[]} + onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal} /> ), )} @@ -278,6 +282,11 @@ const MapContainer = () => { on={on} onChangeNowIn={onChangeNowIn} /> + {isReplaceLoginPageModal && ( + + )} ); }; diff --git a/apps/jurumarble/src/app/stamp/components/DrinkItem.tsx b/apps/jurumarble/src/app/stamp/components/DrinkItem.tsx index fff96f14..006fde7e 100644 --- a/apps/jurumarble/src/app/stamp/components/DrinkItem.tsx +++ b/apps/jurumarble/src/app/stamp/components/DrinkItem.tsx @@ -1,4 +1,5 @@ import { transitions } from 'lib/styles'; +import { isLogin } from 'lib/utils/auth'; import Image from 'next/image'; import useDrinkStampService from 'services/useDrinkStampService'; import SvgStamp from 'src/assets/icons/components/IcStamp'; @@ -16,12 +17,14 @@ interface Props { }; onClickReplaceDrinkInfo: (e: React.MouseEvent) => void; selectedDrinkList?: string[]; + onToggleReplaceLoginPageModal: () => void; } function DrinkItem({ drinkInfo, onClickReplaceDrinkInfo, selectedDrinkList, + onToggleReplaceLoginPageModal, }: Props) { const { id, name, manufacturer, image } = drinkInfo; @@ -52,7 +55,7 @@ function DrinkItem({ { e.stopPropagation(); - postDrinkEnjoy(id); + isLogin() ? postDrinkEnjoy(id) : onToggleReplaceLoginPageModal(); }} > diff --git a/apps/jurumarble/src/app/vote/[id]/components/ChipContainer.tsx b/apps/jurumarble/src/app/vote/[id]/components/ChipContainer.tsx index 30b44416..ac42c899 100644 --- a/apps/jurumarble/src/app/vote/[id]/components/ChipContainer.tsx +++ b/apps/jurumarble/src/app/vote/[id]/components/ChipContainer.tsx @@ -5,6 +5,7 @@ import NonWriterBox from 'app/vote/components/NonWriterBox'; import Chip from 'components/Chip'; import Path from 'lib/Path'; import { AorB } from 'lib/apis/vote'; +import { isLogin } from 'lib/utils/auth'; import { formatDate } from 'lib/utils/formatDate'; import { useRouter } from 'next/navigation'; import { toast } from 'react-toastify'; @@ -27,6 +28,7 @@ interface Props { postedUserId: number; voteId: number; select: AorB | null; + onToggleReplaceLoginPageModal: () => void; } const ChipContainer = ({ @@ -39,6 +41,7 @@ const ChipContainer = ({ isBookmark, postedUserId, select, + onToggleReplaceLoginPageModal, }: Props) => { const { userInfo } = useGetUserInfo(); const { onDelete } = useVoteDeleteService(voteId); @@ -67,7 +70,9 @@ const ChipContainer = ({ mutateBookMark()} + onClick={() => + isLogin() ? mutateBookMark() : onToggleReplaceLoginPageModal() + } /> ) : ( @@ -75,7 +80,9 @@ const ChipContainer = ({ mutateBookMark()} + onClick={() => + isLogin() ? mutateBookMark() : onToggleReplaceLoginPageModal() + } /> )} diff --git a/apps/jurumarble/src/app/vote/[id]/components/CommentForm.tsx b/apps/jurumarble/src/app/vote/[id]/components/CommentForm.tsx index cba97892..7db77107 100644 --- a/apps/jurumarble/src/app/vote/[id]/components/CommentForm.tsx +++ b/apps/jurumarble/src/app/vote/[id]/components/CommentForm.tsx @@ -1,6 +1,9 @@ // import { Input } from "@monorepo/ui"; import React from 'react'; +import { useToggle } from '@monorepo/hooks'; +import ReplaceLoginPageModal from 'components/ReplaceLoginPagemModal/ReplaceLoginPageModal'; +import { isLogin } from 'lib/utils/auth'; import styled, { css } from 'styled-components'; interface Props { @@ -14,9 +17,11 @@ function CommentForm({ onChangeCommentForm, onSubmitComment, }: Props) { + const [isReplaceLoginPageModal, onToggleReplaceLoginPageModal] = useToggle(); + const onSubmit = (e: React.FormEvent) => { e.preventDefault(); - onSubmitComment(); + isLogin() ? onSubmitComment() : onToggleReplaceLoginPageModal(); }; return ( @@ -29,6 +34,11 @@ function CommentForm({ /> 등록 + {isReplaceLoginPageModal && ( + + )} ); } diff --git a/apps/jurumarble/src/app/vote/[id]/page.tsx b/apps/jurumarble/src/app/vote/[id]/page.tsx index 15c3e02a..afbab3fe 100644 --- a/apps/jurumarble/src/app/vote/[id]/page.tsx +++ b/apps/jurumarble/src/app/vote/[id]/page.tsx @@ -2,13 +2,16 @@ import { useMemo, useState } from 'react'; +import { useToggle } from '@monorepo/hooks'; import Loading from 'components/Loading'; +import ReplaceLoginPageModal from 'components/ReplaceLoginPagemModal/ReplaceLoginPageModal'; import { VOTE_AGE_FILTER_LIST, VOTE_ALCOHOL_FILTER_LIST, VOTE_GENDER_FILTER_LIST, VOTE_MBTI_LIST, } from 'lib/constants'; +import { isLogin } from 'lib/utils/auth'; import dynamic from 'next/dynamic'; import { useParams } from 'next/navigation'; import { @@ -39,6 +42,7 @@ const DynamicVoteAnalyzeBar = dynamic( ); function Detail() { + const [isReplaceLoginPageModal, onToggleReplaceLoginPageModal] = useToggle(); const params = useParams(); const [filter, setFilter] = useState({ @@ -63,7 +67,7 @@ function Detail() { const { mutate, select } = useExecuteVoteService(Number(data?.voteId)); const onMutateVoting = (select: 'A' | 'B') => { - mutate(select); + isLogin() ? mutate(select) : onToggleReplaceLoginPageModal(); }; const { voteStatisticsQuery } = useFilteredStatisticsService( Number(postId), @@ -152,6 +156,7 @@ function Detail() { isBookmark={isBookmark} postedUserId={data.postedUserId} select={select.choice} + onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal} /> )} - + {isReplaceLoginPageModal && ( + + )} ); } diff --git a/apps/jurumarble/src/app/vote/[id]/services/useExecuteVoteService.ts b/apps/jurumarble/src/app/vote/[id]/services/useExecuteVoteService.ts index 1bcdea24..1e577086 100644 --- a/apps/jurumarble/src/app/vote/[id]/services/useExecuteVoteService.ts +++ b/apps/jurumarble/src/app/vote/[id]/services/useExecuteVoteService.ts @@ -17,9 +17,6 @@ export default function useExecuteVoteService(voteId: number) { queryClient.invalidateQueries([queryKeys.VOTING_CHECK]); queryClient.invalidateQueries([queryKeys.DETAIL_FILTERED_ANALYSIS]); }, - onError: () => { - alert('로그인 후 진행해주세요.'); - }, }, ); diff --git a/apps/jurumarble/src/app/vote/page.tsx b/apps/jurumarble/src/app/vote/page.tsx index a3aec903..294f1e13 100644 --- a/apps/jurumarble/src/app/vote/page.tsx +++ b/apps/jurumarble/src/app/vote/page.tsx @@ -2,11 +2,14 @@ import { useCallback, useEffect, useRef } from 'react'; +import { useToggle } from '@monorepo/hooks'; import BottomBar from 'components/BottomBar'; import Loading from 'components/Loading'; +import ReplaceLoginPageModal from 'components/ReplaceLoginPagemModal/ReplaceLoginPageModal'; import { Button } from 'components/button'; import Path from 'lib/Path'; import { media } from 'lib/styles'; +import { isLogin } from 'lib/utils/auth'; import Image from 'next/image'; import { useRouter, useSearchParams } from 'next/navigation'; import { ImgScroll } from 'public/images'; @@ -67,7 +70,7 @@ function VoteHomePage() { const { mutate, select } = useExecuteVoteService(voteId); const onMutateVoting = useCallback( (select: 'A' | 'B') => { - mutate(select); + isLogin() ? mutate(select) : onToggleReplaceLoginPageModal(); }, [mutate], ); @@ -85,6 +88,7 @@ function VoteHomePage() { '', '', ); + const [isReplaceLoginPageModal, onToggleReplaceLoginPageModal] = useToggle(); const { data: statistics, @@ -135,7 +139,11 @@ function VoteHomePage() { variant="primary" width="104px" height="40px" - onClick={() => router.push(Path.POST_PAGE)} + onClick={() => + isLogin() + ? router.push(Path.POST_PAGE) + : onToggleReplaceLoginPageModal() + } > 작성하기 ﹢ @@ -159,6 +167,7 @@ function VoteHomePage() { mutateBookMark={mutateBookMark} isBookmark={isBookmark} select={select.choice} + onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal} /> + {isReplaceLoginPageModal && ( + + )} ); } diff --git a/apps/jurumarble/src/components/BottomBar.tsx b/apps/jurumarble/src/components/BottomBar.tsx index da54b3de..af5d1a29 100644 --- a/apps/jurumarble/src/components/BottomBar.tsx +++ b/apps/jurumarble/src/components/BottomBar.tsx @@ -1,6 +1,8 @@ 'use client'; +import { useToggle } from '@monorepo/hooks'; import Path from 'lib/Path'; +import { isLogin } from 'lib/utils/auth'; import { usePathname, useRouter } from 'next/navigation'; import SvgIcCheck from 'src/assets/icons/components/IcCheck'; import SvgIcHome from 'src/assets/icons/components/IcHome'; @@ -9,48 +11,65 @@ import SvgIcMark from 'src/assets/icons/components/IcMark'; import SvgIcUser from 'src/assets/icons/components/IcUser'; import styled from 'styled-components'; -const NAVIGATION_LIST = [ - { - name: '홈', - path: Path.MAIN_PAGE, - icon: , - }, - { - name: '술도장', - path: Path.STAMP_PAGE, - icon: , - }, - { - name: '투표', - path: Path.VOTE_HOME, - icon: , - }, - { - name: '술지도', - path: Path.DRINK_MAP_PAGE, - icon: , - }, - { - name: '마이', - path: Path.MY_PAGE, - icon: , - }, -]; +import ReplaceLoginPageModal from './ReplaceLoginPagemModal/ReplaceLoginPageModal'; + +type PathType = '/' | '/stamp' | '/vote' | '/map' | '/my'; function BottomBar() { const pathName = usePathname(); const router = useRouter(); + const [isReplaceLoginPageModal, onToggleReplaceLoginPageModal] = useToggle(); + + /** + * @TODO hooks를 사용하기 위해서 상수를 컴포넌트 안에서 사용해도 괜찮을까? + * @TODO any타입 제거 + */ + const NAVIGATION_LIST = [ + { + name: '홈', + path: Path.MAIN_PAGE, + icon: , + onClick: (path: PathType) => router.push(path), + }, + { + name: '술도장', + path: Path.STAMP_PAGE, + icon: , + onClick: (path: PathType) => + isLogin() ? router.push(path) : onToggleReplaceLoginPageModal(), + }, + { + name: '투표', + path: Path.VOTE_HOME, + icon: , + onClick: (path: PathType) => router.push(path), + }, + { + name: '술지도', + path: Path.DRINK_MAP_PAGE, + icon: , + onClick: (path: PathType) => router.push(path), + }, + { + name: '마이', + path: Path.MY_PAGE, + icon: , + onClick: (path: PathType) => + isLogin() ? router.push(path) : onToggleReplaceLoginPageModal(), + }, + ]; + return ( <> - {NAVIGATION_LIST.map(({ icon, name, path }) => { + {NAVIGATION_LIST.map(({ icon, name, path, onClick }) => { return ( router.push(path)} + onClick={() => onClick(path)} > {icon} {name} @@ -59,6 +78,11 @@ function BottomBar() { })} + {isReplaceLoginPageModal && ( + + )} ); } diff --git a/apps/jurumarble/src/components/Header.tsx b/apps/jurumarble/src/components/Header.tsx index 87e62ef4..421c619e 100644 --- a/apps/jurumarble/src/components/Header.tsx +++ b/apps/jurumarble/src/components/Header.tsx @@ -1,6 +1,7 @@ 'use client'; import Path from 'lib/Path'; +import { isLogin } from 'lib/utils/auth'; import Link from 'next/link'; import { SvgHeaderSearch, @@ -16,9 +17,11 @@ function Header() { - - - + {isLogin() && ( + + + + )} diff --git a/apps/jurumarble/src/services/useBookmarkService.ts b/apps/jurumarble/src/services/useBookmarkService.ts index d8ecbb35..640101ce 100644 --- a/apps/jurumarble/src/services/useBookmarkService.ts +++ b/apps/jurumarble/src/services/useBookmarkService.ts @@ -1,9 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; -import Path from 'lib/Path'; import { getBookMarkCheckAPI, postBookmarkAPI } from 'lib/apis/bookmark'; import { queryKeys } from 'lib/queryKeys'; -import { useRouter } from 'next/navigation'; import { toast } from 'react-toastify'; type PostBookmarkProps = Exclude< @@ -28,8 +26,6 @@ export default function useBookmarkService(voteId: PostBookmarkProps) { const isBookmark = bookmarkCheck?.bookmarked || false; - const router = useRouter(); - const { mutate: mutateBookMark } = useMutation( () => postBookmarkAPI(voteId), { @@ -62,9 +58,6 @@ export default function useBookmarkService(voteId: PostBookmarkProps) { getBookmarkQueryKey(voteId), context?.previousData, ); - if (confirm('로그인이 필요한 서비스입니다.')) { - router.push(Path.LOGIN_PAGE); - } }, onSettled(_, __) { From d8a9049ae6d9ee9cef0b9084bab678d508130fd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Wed, 18 Oct 2023 23:29:02 +0900 Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=B0=94=ED=85=80=20=EB=84=A4=EB=B9=84=EA=B2=8C?= =?UTF-8?q?=EC=9D=B4=EC=85=98=EB=B0=94=EC=9D=98=20=EC=9D=98=ED=95=B4=20?= =?UTF-8?q?=EC=9E=98=EB=A6=AC=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/jurumarble/src/app/my/components/VoteListContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/jurumarble/src/app/my/components/VoteListContainer.tsx b/apps/jurumarble/src/app/my/components/VoteListContainer.tsx index 8c4ab593..36c5087d 100644 --- a/apps/jurumarble/src/app/my/components/VoteListContainer.tsx +++ b/apps/jurumarble/src/app/my/components/VoteListContainer.tsx @@ -67,7 +67,7 @@ function VoteListContainer() { const Container = styled.section` ${({ theme }) => css` background-color: ${theme.colors.bg_02}; - padding: 24px 20px; + padding: 24px 20px 80px 20px; `}; `; From 36de48cff714ec2f2dc15d19a644db7e642cfc12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Thu, 19 Oct 2023 01:22:17 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=20=EA=B6=8C?= =?UTF-8?q?=ED=95=9C=EC=9D=B4=20=EC=97=86=EC=9D=84=EC=8B=9C=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EB=AA=A8=EB=8B=AC=20=EB=85=B8=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/app/search/components/ChipContainer.tsx | 10 ++++++++-- .../src/app/search/components/DrinkItem.tsx | 12 +++++++++--- .../src/app/search/components/DrinkList.tsx | 9 ++++++++- .../src/app/search/components/DrinkVoteItem.tsx | 8 ++++++-- .../src/app/search/components/DrinkVoteList.tsx | 14 ++++++++++++-- .../src/app/search/components/SearchContainer.tsx | 13 +++++++++++++ 6 files changed, 56 insertions(+), 10 deletions(-) diff --git a/apps/jurumarble/src/app/search/components/ChipContainer.tsx b/apps/jurumarble/src/app/search/components/ChipContainer.tsx index 675ea1d6..801ecc66 100644 --- a/apps/jurumarble/src/app/search/components/ChipContainer.tsx +++ b/apps/jurumarble/src/app/search/components/ChipContainer.tsx @@ -33,13 +33,19 @@ const ChipContainer = ({ mutateBookMark()} + onClick={(e) => { + e.stopPropagation(); + mutateBookMark(); + }} /> ) : ( mutateBookMark()} + onClick={(e) => { + e.stopPropagation(); + mutateBookMark(); + }} /> )} diff --git a/apps/jurumarble/src/app/search/components/DrinkItem.tsx b/apps/jurumarble/src/app/search/components/DrinkItem.tsx index 9c8be798..b77487a7 100644 --- a/apps/jurumarble/src/app/search/components/DrinkItem.tsx +++ b/apps/jurumarble/src/app/search/components/DrinkItem.tsx @@ -1,6 +1,7 @@ import { RatioFrame } from '@monorepo/ui'; import Chip from 'components/Chip'; import { transitions } from 'lib/styles'; +import { isLogin } from 'lib/utils/auth'; import Image from 'next/image'; import useDrinkStampService from 'services/useDrinkStampService'; import SvgStamp from 'src/assets/icons/components/IcStamp'; @@ -9,12 +10,17 @@ import styled, { css, useTheme } from 'styled-components'; interface Props { drinkInfo: DrinkInfo; - onClickDrinkItem: (e: React.MouseEvent) => void; selectedDrinkList?: string[]; + onToggleReplaceLoginPageModal: () => void; } -function DrinkItem({ drinkInfo, onClickDrinkItem, selectedDrinkList }: Props) { +function DrinkItem({ + drinkInfo, + onClickDrinkItem, + selectedDrinkList, + onToggleReplaceLoginPageModal, +}: Props) { const { id, name, manufacturer, image, enjoyCount, region } = drinkInfo; const { colors } = useTheme(); @@ -46,7 +52,7 @@ function DrinkItem({ drinkInfo, onClickDrinkItem, selectedDrinkList }: Props) { { e.stopPropagation(); - postDrinkEnjoy(id); + isLogin() ? postDrinkEnjoy(id) : onToggleReplaceLoginPageModal(); }} > diff --git a/apps/jurumarble/src/app/search/components/DrinkList.tsx b/apps/jurumarble/src/app/search/components/DrinkList.tsx index e520377d..73599b98 100644 --- a/apps/jurumarble/src/app/search/components/DrinkList.tsx +++ b/apps/jurumarble/src/app/search/components/DrinkList.tsx @@ -11,9 +11,15 @@ interface Props { sortOption: DrinkInfoSortType; regionOption: string; isSelectedTab: boolean; + onToggleReplaceLoginPageModal: () => void; } -function DrinkList({ searchText, sortOption, regionOption }: Props) { +function DrinkList({ + searchText, + sortOption, + regionOption, + onToggleReplaceLoginPageModal, +}: Props) { const searchParams = useSearchParams(); const selectedTab = searchParams.get('selectedTab'); @@ -41,6 +47,7 @@ function DrinkList({ searchText, sortOption, regionOption }: Props) { key={drinkInfo.id} drinkInfo={drinkInfo} onClickDrinkItem={() => onClickDrinkItem(drinkInfo.id)} + onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal} /> ))} {selectedTab === 'drinkInfo' &&
} diff --git a/apps/jurumarble/src/app/search/components/DrinkVoteItem.tsx b/apps/jurumarble/src/app/search/components/DrinkVoteItem.tsx index 11761e2a..7774f07f 100644 --- a/apps/jurumarble/src/app/search/components/DrinkVoteItem.tsx +++ b/apps/jurumarble/src/app/search/components/DrinkVoteItem.tsx @@ -1,4 +1,5 @@ import Path from 'lib/Path'; +import { isLogin } from 'lib/utils/auth'; import { useRouter } from 'next/navigation'; import useBookmarkService from 'services/useBookmarkService'; import { Content } from 'src/types/vote'; @@ -9,12 +10,13 @@ import VoteDescription from './VoteDescription'; interface Props { voteDrink: Content; + onToggleReplaceLoginPageModal: () => void; } /** * * @Todo 타입 더 깔끔하게 정의 필요 */ -function DrinkVoteItem({ voteDrink }: Props) { +function DrinkVoteItem({ voteDrink, onToggleReplaceLoginPageModal }: Props) { const { voteId, region, title, imageA, imageB, votedCount } = voteDrink; const { isBookmark, mutateBookMark } = useBookmarkService(voteId); @@ -30,7 +32,9 @@ function DrinkVoteItem({ voteDrink }: Props) { title={title} date="20.08.22" region={region} - mutateBookMark={mutateBookMark} + mutateBookMark={() => { + isLogin() ? mutateBookMark() : onToggleReplaceLoginPageModal(); + }} isBookmark={isBookmark} votedCount={votedCount} /> diff --git a/apps/jurumarble/src/app/search/components/DrinkVoteList.tsx b/apps/jurumarble/src/app/search/components/DrinkVoteList.tsx index 28b4d869..c58ac7ac 100644 --- a/apps/jurumarble/src/app/search/components/DrinkVoteList.tsx +++ b/apps/jurumarble/src/app/search/components/DrinkVoteList.tsx @@ -9,9 +9,15 @@ interface Props { sortOption: string; regionOption: string; isSelectedTab: boolean; + onToggleReplaceLoginPageModal: () => void; } -function DrinkVoteList({ searchText, sortOption, regionOption }: Props) { +function DrinkVoteList({ + searchText, + sortOption, + regionOption, + onToggleReplaceLoginPageModal, +}: Props) { const searchParams = useSearchParams(); const selectedTab = searchParams.get('selectedTab'); @@ -30,7 +36,11 @@ function DrinkVoteList({ searchText, sortOption, regionOption }: Props) { return ( {voteDrinkList.map((voteDrink, index) => ( - + ))} {selectedTab === 'drinkVote' &&
} diff --git a/apps/jurumarble/src/app/search/components/SearchContainer.tsx b/apps/jurumarble/src/app/search/components/SearchContainer.tsx index 3fcfd406..cc96fba6 100644 --- a/apps/jurumarble/src/app/search/components/SearchContainer.tsx +++ b/apps/jurumarble/src/app/search/components/SearchContainer.tsx @@ -1,8 +1,10 @@ 'use client'; +import { useToggle } from '@monorepo/hooks'; import { useDebouncedCallback } from '@react-hookz/web'; import BottomBar from 'components/BottomBar'; import DivideLine from 'components/DivideLine'; +import ReplaceLoginPageModal from 'components/ReplaceLoginPagemModal/ReplaceLoginPageModal'; import SearchInput from 'components/SearchInput'; import { Button } from 'components/button'; import { useCreateQueryString } from 'hooks/useCreateQueryString'; @@ -37,6 +39,8 @@ type TabList = (typeof TAB_LIST)[number]['id']; */ function SearchContainer() { + const [isReplaceLoginPageModal, onToggleReplaceLoginPageModal] = useToggle(); + const router = useRouter(); const pathname = usePathname(); const searchParams = useSearchParams(); @@ -101,6 +105,7 @@ function SearchContainer() { sortOption={drinkInfoSortOption} regionOption={regionOption} isSelectedTab={isSelectedTab('total')} + onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal} /> ), @@ -182,6 +189,7 @@ function SearchContainer() { sortOption={drinkVoteSortOption} regionOption={regionOption} isSelectedTab={isSelectedTab('total')} + onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal} /> ), @@ -215,6 +223,11 @@ function SearchContainer() { {isSelectedTab('total') && } {bottomSectionItem} + {isReplaceLoginPageModal && ( + + )} ); From 1940d8966c8c584506651688b8a24ebc422cec40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Thu, 19 Oct 2023 01:39:06 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=ED=88=AC=ED=91=9C=EC=97=90=20?= =?UTF-8?q?=EC=B0=B8=EC=97=AC=ED=95=98=EC=A7=80=20=EC=95=8A=EA=B3=A0=20?= =?UTF-8?q?=EB=8C=93=EA=B8=80=20=EC=9E=91=EC=84=B1=EC=9D=84=20=EC=8B=9C?= =?UTF-8?q?=EB=8F=84=ED=96=88=EC=9D=84=EC=8B=9C=20=ED=86=A0=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EC=B6=9C=EB=A0=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/jurumarble/src/lib/apis/http/http.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/jurumarble/src/lib/apis/http/http.ts b/apps/jurumarble/src/lib/apis/http/http.ts index 4da40325..7dca8bbb 100644 --- a/apps/jurumarble/src/lib/apis/http/http.ts +++ b/apps/jurumarble/src/lib/apis/http/http.ts @@ -45,6 +45,9 @@ axiosInstance.interceptors.response.use( logout(); break; + case 404: + toast.error(error.response.data.message); + throw new Error(error.response.data.message); case 409: throw new Error(error.response.data.message);