feat: NexonApiProcessModal, DateSelectorModal 구현 #125 #127

src/containers/UserPage/components/Character/DateSelectorBox.tsx → src/component/Modal/DateSelectorModal/index.tsx

@@ -1,34 +1,25 @@
 import React, { useState } from 'react';
-import Button from '../../../../component/Button';
+import styled from 'styled-components';
+import useDateSelectorModalState from '../../../../store/modal/dateSelector';
+import Button from '../../Button';
+import { Bottom, Container, Content } from '../modalCommonStyle';
+import PortalWrapper from '../Portal';
 import DateSelector from './DateSelector';
-import {
-  View,
-  Container,
-  Content,
-  Phrases,
-  BtnList,
-} from '../../../../component/WarningComponent/warningStyle';
-import { useDispatch } from 'react-redux';
-import { offWarnings } from '../../../../../store/warningSlice/onWarning';
 
-const DateSelectorBox = ({ mutate }: any) => {
+const DateSelectorModal = ({ mutate }: any) => {
+  const { close } = useDateSelectorModalState();
   const [pastDay, setPastDay] = useState<string>('');
   const [recentDay, setRecentDay] = useState<string>('');
-  const dispatch = useDispatch();
 
   return (
-    <View isWarning>
-      <Container isWarning>
+    <PortalWrapper>
+      <Container>
         <Content>
           <Phrases>큐브 사용 조회 기간을 입력해주세요.</Phrases>
           <DateSelector setPastDay={setPastDay} setRecentDay={setRecentDay} />
         </Content>
-        <BtnList>
-          <Button
-            type="button"
-            sort="secondary"
-            onClick={() => dispatch(offWarnings())}
-          >
+        <Bottom>
+          <Button type="button" sort="secondary" onClick={close}>
             취소
           </Button>
           <Button
@@ -40,18 +31,22 @@ const DateSelectorBox = ({ mutate }: any) => {
                   '사용자의 큐브 내역을 통해 캐릭터 닉네임을 조회합니다. (사용자 정보에 따라 시간차이가 발생할 수 있습니다.)'
                 );
                 await mutate({ recentDay: recentDay, pastDay: pastDay });
-                await dispatch(offWarnings());
               } else {
                 alert('날짜를 선택해주세요');
               }
             }}
           >
             인증하기
           </Button>
-        </BtnList>
+        </Bottom>
       </Container>
-    </View>
+    </PortalWrapper>
   );
 };
 
-export default DateSelectorBox;
+export default DateSelectorModal;
+
+const Phrases = styled.div`
+  font-size: 14px;
+  color: ${({ theme }) => theme.text};
+`;

src/containers/UserPage/components/Character/SwiperModal.tsx → src/component/Modal/NexonApiProcessModal.tsx

@@ -1,57 +1,23 @@
-import React, { useEffect, useState } from "react";
-import styled from "styled-components";
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Keyboard, Pagination, Navigation } from "swiper/modules";
-import "swiper/css";
-import "swiper/css/pagination";
-import "swiper/css/navigation";
-import Button from "../../../../component/Button";
-import Image from "next/image";
+import React from 'react';
+import styled from 'styled-components';
+import PortalWrapper from './Portal';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Keyboard, Pagination, Navigation } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+import Image from 'next/image';
+import Button from '../Button';
+import { useProcessSlider } from '../../hooks/userPageHooks/useUserChar';
+import useNexonProccessModalState from '../../../store/modal/nexonProcces';
+import { Bottom } from './modalCommonStyle';
 
-const SwiperModal = ({ ...props }: any) => {
-  const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-  const [infoText, setInfoText] = useState<any>();
-
-  const handleSlideChange = (swiper: any) => {
-    setActiveSlideIndex(swiper.activeIndex);
-  };
-
-  const getSlideInfoText = (index: number) => {
-    switch (index) {
-      case 0:
-        return (
-          <>
-            <a
-              href="https://openapi.nexon.com/"
-              target="_blank"
-              rel="noreferrer"
-            >
-              NEXON Open API
-            </a>
-            에 접속해서 ➊로그인 하고 ➋My 애플리케이션으로 이동해주세요.
-          </>
-        );
-      case 1:
-        return <span>애플리케이션 등록하기를 눌러주세요.</span>;
-      case 2:
-        return <span>내용을 위와 같이 입력해주세요.</span>;
-      case 3:
-        return <span>➊약관 동의를 하고 ➋아래 등록 버튼을 눌러주세요.</span>;
-      case 4:
-        return <span>표시된 부분을 눌러서 상세 페이지로 이동해주세요.</span>;
-      case 5:
-        return <span>표시된 부분을 눌러서 API Key를 복사해주세요.</span>;
-      default:
-        return;
-    }
-  };
-
-  useEffect(() => {
-    setInfoText(getSlideInfoText(activeSlideIndex));
-  }, [activeSlideIndex]);
+const NexonApiProcessModal = () => {
+  const { close } = useNexonProccessModalState();
+  const { infoText, handleSlideChange } = useProcessSlider();
 
   return (
-    <View>
+    <PortalWrapper>
       <Container>
         <Swiper
           slidesPerView={1}
@@ -116,29 +82,19 @@ const SwiperModal = ({ ...props }: any) => {
             />
           </SwiperSlide>
         </Swiper>
-        <Bottom>
+        <CustomBottom>
           <InfoText>{infoText}</InfoText>
-          <Button sort="secondary" onClick={() => props.setOnModal(false)}>
+          <Button sort="secondary" onClick={close}>
             닫기
           </Button>
-        </Bottom>
+        </CustomBottom>
       </Container>
-    </View>
+    </PortalWrapper>
   );
 };
 
-export default SwiperModal;
-const View = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: ${({ theme }) => theme.modalBackdrop};
-`;
+export default NexonApiProcessModal;
+
 const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -172,10 +128,10 @@ const Container = styled.div`
     }
   }
   .swiper-button-next {
-    background-image: url("/myPageImages/nextButton.svg");
+    background-image: url('/myPageImages/nextButton.svg');
   }
   .swiper-button-prev {
-    background-image: url("/myPageImages/prevButton.svg");
+    background-image: url('/myPageImages/prevButton.svg');
   }
   .swiper-button-disabled {
     opacity: 0.3;
@@ -191,17 +147,9 @@ const Container = styled.div`
     background-color: ${({ theme }) => theme.brand};
   }
 `;
-const Bottom = styled.div`
+const CustomBottom = styled(Bottom)`
   display: flex;
-  padding: 16px 24px;
   justify-content: space-between;
-  align-items: center;
-  backdrop-filter: blur(4px);
-  background-color: ${({ theme }) => theme.cardHeader};
-  height: 73px;
-  border-top: 1px solid ${({ theme }) => theme.border};
-  border-bottom-right-radius: 16px;
-  border-bottom-left-radius: 16px;
 `;
 const InfoText = styled.div`
   color: ${({ theme }) => theme.text};

src/containers/UserPage/components/Character/index.tsx

@@ -6,54 +6,33 @@ import {
   useGetAllMyChar,
   useGetCharName,
 } from '../../../../hooks/userPageHooks/useUserChar';
-import useOnWarning from '../../../../hooks/reduxHooks/useOnWarning';
-import { useDispatch } from 'react-redux';
-import { onWarnings } from '../../../../../store/warningSlice/onWarning';
-import SwiperModal from './SwiperModal';
+import NexonApiProcessModal from '../../../../component/Modal/NexonApiProcessModal';
 import LoadingSpinner from '../../../../component/LoadingSpinner';
 import QuestionIcon from '/public/myPageImages/question.svg';
-import DateSelectorBox from './DateSelectorBox';
+import DateSelectorModal from '../../../../component/Modal/DateSelectorModal';
+import useNexonProccessModalState from '../../../../../store/modal/nexonProcces';
+import useDateSelectorModalState from '../../../../../store/modal/dateSelector';
 
-const MyChar = () => {
-  const [apiKey, setApiKey] = useState<string>('');
-  const [onModal, setOnModal] = useState<boolean>(false);
+const MyChar = ({ ...props }) => {
+  const { uid } = props;
+  console.log(uid);
 
+  const { nexonProcessOnModal, open: npOpen } = useNexonProccessModalState();
+  const { dateSelectorOnModal, open: dsOpen } = useDateSelectorModalState();
   const { data } = useGetAllMyChar({ refetchOnWindowFocus: false });
 
+  const [apiKey, setApiKey] = useState<string>('');
   const { mutate, isLoading } = useGetCharName({
     key: apiKey,
   });
 
-  const { isWarning } = useOnWarning();
-  const dispatch = useDispatch();
-
-  const handleAuthClick = async (e: React.MouseEvent) => {
-    e.preventDefault();
-    if (!apiKey) {
-      alert('토큰을 입력해 주세요.');
-      return;
-    } else {
-      dispatch(
-        onWarnings({ warningType: 'cube', warningLocation: 'nexonAuth' })
-      );
-    }
-  };
-
   return (
     <Container>
       <CharSelectBox charList={data} isAllCharLoading={isLoading} />
-      {onModal && (
-        <StickyView>
-          <SwiperModal setOnModal={setOnModal} />
-        </StickyView>
-      )}
+      {nexonProcessOnModal && <NexonApiProcessModal />}
+      {dateSelectorOnModal && <DateSelectorModal mutate={mutate} />}
       <UserAuthLine>
-        <QuestionBtn
-          onClick={(e: React.MouseEvent) => {
-            e.preventDefault();
-            setOnModal(true);
-          }}
-        >
+        <QuestionBtn onClick={npOpen}>
           <QuestionIcon width="20px" height="21px" />
         </QuestionBtn>
         <BottomForm
@@ -70,8 +49,11 @@ const MyChar = () => {
             type="submit"
             width={isLoading ? '107px' : '83px'}
             fontWeight="500"
-            onClick={handleAuthClick}
             disabled={isLoading}
+            onClick={() => {
+              if (apiKey) dsOpen();
+              else alert('토큰을 입력해 주세요.');
+            }}
           >
             <BtnInner>
               {isLoading && (
@@ -81,21 +63,12 @@ const MyChar = () => {
             </BtnInner>
           </AuthBtn>
         </BottomForm>
-        {isWarning && (
-          <StickyView>
-            <DateSelectorBox mutate={mutate} />
-          </StickyView>
-        )}
       </UserAuthLine>
     </Container>
   );
 };
 
 export default MyChar;
-const StickyView = styled.div`
-  position: sticky;
-  z-index: 1001;
-`;
 const Container = styled.div`
   display: flex;
   flex-direction: column;

src/containers/UserPage/components/Content.tsx

@@ -38,7 +38,7 @@ const Content = ({ ...props }) => {
       ) : option == 1 ? (
         <MyList data={myCommentBoards} />
       ) : (
-        <Character />
+        <Character uid={props.uid} />
       )}
     </div>
   );

src/containers/UserPage/components/UserPageContent.tsx

@@ -16,7 +16,7 @@ const UserPageContent = ({ ...props }) => {
           boardCount={data?.boardCount}
           commentCount={data?.commentCount}
         />
-        <Content {...props} />
+        <Content {...props} {...data} />
       </BoardContent>
     </Container>
   );