[JR-879] 로그인 되어있지 않을시 나타나는 모달 구현

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 = () => {
             </PreviousButton>
           }
           rightButton={
-            <PreviousButton onClick={() => router.back()}>
+            <PreviousButton onClick={() => router.push(Path.SEARCH_PAGE)}>
               <SvgHeaderSearch width={24} height={24} />
             </PreviousButton>
           }
@@ -89,12 +95,15 @@ const DrinkInfoContainer = () => {
               {enjoyCount}명이 즐겼어요
             </Chip>
           </FlexRow>
-          <SvgStamp
-            onClick={() => postDrinkEnjoy(Number(id))}
-            width={24}
-            height={24}
-            fill={stampColor}
-          />
+          <button
+            onClick={() =>
+              isLogin()
+                ? postDrinkEnjoy(Number(id))
+                : onToggleReplaceLoginPageModal()
+            }
+          >
+            <SvgStamp width={24} height={24} fill={stampColor} />
+          </button>
         </FlexBetweenRow>
         <TitleBox>
           <div className="title">{name}</div>
@@ -127,6 +136,11 @@ const DrinkInfoContainer = () => {
             <div className="content">{manufactureAddress}도</div>
           </DescriptionRow>
         </DescriptionBox>
+        {isReplaceLoginPageModal && (
+          <ReplaceLoginPageModal
+            onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal}
+          />
+        )}
       </Container>
     </>
   );

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 && (
+        <ReplaceLoginPageModal
+          onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal}
+        />
+      )}
     </Container>
   );
 };

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;
   `};
 `;
 

apps/jurumarble/src/app/search/components/ChipContainer.tsx

@@ -33,13 +33,19 @@ const ChipContainer = ({
             <SvgIcBookmarkActive
               width={20}
               height={20}
-              onClick={() => mutateBookMark()}
+              onClick={(e) => {
+                e.stopPropagation();
+                mutateBookMark();
+              }}
             />
           ) : (
             <SvgIcBookmark
               width={20}
               height={20}
-              onClick={() => mutateBookMark()}
+              onClick={(e) => {
+                e.stopPropagation();
+                mutateBookMark();
+              }}
             />
           )}
         </FlexRow>

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<HTMLButtonElement>) => 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) {
           <StampWrapper
             onClick={(e) => {
               e.stopPropagation();
-              postDrinkEnjoy(id);
+              isLogin() ? postDrinkEnjoy(id) : onToggleReplaceLoginPageModal();
             }}
           >
             <SvgStamp width={24} height={24} fill={stampColor} />

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' && <div ref={subscribe} />}

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}
       />

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 (
     <Container>
       {voteDrinkList.map((voteDrink, index) => (
-        <DrinkVoteItem key={`drinkVoteItem_${index}`} voteDrink={voteDrink} />
+        <DrinkVoteItem
+          key={`drinkVoteItem_${index}`}
+          voteDrink={voteDrink}
+          onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal}
+        />
       ))}
       {selectedTab === 'drinkVote' && <div ref={subscribe} />}
     </Container>

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}
           />
           <MoreButton
             variant="outline"
@@ -123,6 +128,7 @@ function SearchContainer() {
             sortOption={drinkVoteSortOption}
             regionOption={regionOption}
             isSelectedTab={isSelectedTab('total')}
+            onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal}
           />
           <MoreButton
             variant="outline"
@@ -157,6 +163,7 @@ function SearchContainer() {
             sortOption={drinkInfoSortOption}
             regionOption={regionOption}
             isSelectedTab={false}
+            onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal}
           />
         </>
       ),
@@ -182,6 +189,7 @@ function SearchContainer() {
             sortOption={drinkVoteSortOption}
             regionOption={regionOption}
             isSelectedTab={isSelectedTab('total')}
+            onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal}
           />
         </>
       ),
@@ -215,6 +223,11 @@ function SearchContainer() {
       </TopSection>
       {isSelectedTab('total') && <DivideLine />}
       <BottomSection>{bottomSectionItem}</BottomSection>
+      {isReplaceLoginPageModal && (
+        <ReplaceLoginPageModal
+          onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal}
+        />
+      )}
       <BottomBar />
     </>
   );

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<HTMLButtonElement>) => void;
   selectedDrinkList?: string[];
+  onToggleReplaceLoginPageModal: () => void;
 }
 
 function DrinkItem({
   drinkInfo,
   onClickReplaceDrinkInfo,
   selectedDrinkList,
+  onToggleReplaceLoginPageModal,
 }: Props) {
   const { id, name, manufacturer, image } = drinkInfo;
 
@@ -52,7 +55,7 @@ function DrinkItem({
           <StampWrapper
             onClick={(e) => {
               e.stopPropagation();
-              postDrinkEnjoy(id);
+              isLogin() ? postDrinkEnjoy(id) : onToggleReplaceLoginPageModal();
             }}
           >
             <SvgStamp width={24} height={24} fill={stampColor} />

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,15 +70,19 @@ const ChipContainer = ({
               <SvgIcBookmarkActive
                 width={26}
                 height={26}
-                onClick={() => mutateBookMark()}
+                onClick={() =>
+                  isLogin() ? mutateBookMark() : onToggleReplaceLoginPageModal()
+                }
               />
             </SVGWrapper>
           ) : (
             <SVGWrapper>
               <SvgIcBookmark
                 width={20}
                 height={20}
-                onClick={() => mutateBookMark()}
+                onClick={() =>
+                  isLogin() ? mutateBookMark() : onToggleReplaceLoginPageModal()
+                }
               />
             </SVGWrapper>
           )}