(#329)style: 탭바 글씨 삭제, 헤더 fix, 붕어빵 오류 처리했습니다.

JayJayleee · JayJayleee · commit 9f30d902c8bf · 2024-05-31T03:53:01.000+09:00
diff --git a/src/asset/sass/pages/myPage/infoEditPage.scss b/src/asset/sass/pages/myPage/infoEditPage.scss
@@ -157,4 +157,75 @@
   font-family : pretendard-SemiBold;
   letter-spacing: -1px;
   margin-top:1rem;
-}
+}
+
+//닉네임 모달===========================
+
+.report-popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+}
+.change-nickname-btn{
+  margin-top: 3.4rem;
+  display: flex;
+
+  & div{
+    width: 50%;
+    height: 5rem;
+    margin: 0;
+    border: 0.5px solid #cacaca;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size : 2rem;
+    letter-Spacing : -1px;
+    font-family: pretendard-bold;
+    cursor: pointer;
+  }
+
+  .submit-nickname{
+    border-bottom-right-radius:1.5rem;
+    color : #428238;
+    
+  }
+  
+  .close-nickname-popup {
+    border-bottom-left-radius:1.5rem;
+  }
+}
+.nickname-popup {
+  z-index: 999;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 325px;
+  height: 205px;
+  background-color: white;
+  border-radius: 15px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+  .nickname-title {
+    letter-spacing: -1px;
+    margin-top: 5rem;
+    margin-bottom: 5%;
+    text-align: center;
+    font-size: 20px;
+    font-family: pretendard-bold;
+  }
+
+  .nickname-sub-title {
+    letter-spacing: -1px;
+    text-align: center;
+    font-size: 1.5rem;
+    color : #474646;
+    margin-bottom: 0.5rem;
+  }
+
+}
+
diff --git a/src/components/pages/myPage/infoEditPage.tsx b/src/components/pages/myPage/infoEditPage.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import styled from 'styled-components';
-import { useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { setRewardCount } from '../../../store/actions/userActions.js';
 import { useNavigate } from 'react-router-dom';
 import '../../../asset/sass/pages/myPage/infoEditPage.scss';
@@ -12,7 +12,6 @@ import { ACCESS_TOKEN } from '../../global/constants';
 import { showErrorToast, showSuccessToast } from '../../ui/toast/toast.tsx';
 import { fetchAPI } from '../../global/utils/apiUtil.js';
 import Button from '../../ui/button/Button/Button.jsx';
-
 interface UserData {
   email: string;
   nickname: string;
@@ -31,6 +30,13 @@ interface UserResponse {
   statusCode: string;
   data: UserData;
 }
+interface UserState {
+  rewardCount: number;
+}
+
+interface AppState {
+  user: UserState;
+}
 
 const Divider = styled.div`
   height: 1px;
@@ -64,6 +70,7 @@ const ageReverseMapping = {
 };
 
 function InfoEditPage() {
+  const { rewardCount } = useSelector((state: AppState) => state.user);
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const [nickname, setNickname] = useState('');
@@ -74,6 +81,11 @@ function InfoEditPage() {
   const [selectedGender, setSelectedGender] = useState('');
   const [selectedAge, setSelectedAge] = useState('');
 
+  // 팝업 관련
+  const [isShowModal, setIsShowModal] = useState(false);
+  const [isShowNicknameModal, setIsShowNicknameModal] = useState(false);
+  const reportMenuRef = useRef<HTMLDivElement>(null);
+
   const handleSelectTag = (tag: string) => setSelectedTag(tag);
   const handleSelectGender = (gender: string) => setSelectedGender(gender);
   const handleSelectAge = (age: string) => setSelectedAge(age);
@@ -89,6 +101,40 @@ function InfoEditPage() {
     }
   }, []);
 
+  useEffect(() => {
+    const handleOutsideClick = (event) => {
+      if (
+        reportMenuRef.current &&
+        !reportMenuRef.current.contains(event.target)
+      ) {
+        setIsShowModal(false);
+      }
+    };
+
+    if (isShowModal) {
+      window.addEventListener('click', handleOutsideClick);
+    } else {
+      window.removeEventListener('click', handleOutsideClick);
+    }
+
+    return () => {
+      window.removeEventListener('click', handleOutsideClick);
+    };
+  }, [isShowModal]);
+
+
+  const toggleReportPopup = () => {
+    setIsShowModal((showReport) => !showReport);
+    setIsShowNicknameModal((showReportModal) => !showReportModal);
+  };
+
+  const handleOutSideClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (event?.target === event?.currentTarget) {
+      setIsShowNicknameModal(false);
+    }
+  };
+
+  // 데이터 불러오기 관련
   const loadUserData = async () => {
     try {
       const data = (await fetchAPI('/api/member/me', 'GET')) as UserResponse;
@@ -142,10 +188,20 @@ function InfoEditPage() {
   };
 
   const handleModifyNickname = async () => {
+  
     try {
-      const data = await fetchAPI('/api/member/nickname', 'PATCH');
-      setNickname(data.nickname);
-      showSuccessToast('닉네임이 성공적으로 변경되었습니다.');
+      if(rewardCount<20){
+        setIsShowNicknameModal(false)
+        showErrorToast("붕어빵 갯수가 부족합니다.")
+        
+      }else if(rewardCount>20) {
+        const data = await fetchAPI('/api/member/nickname', 'PATCH');
+        setNickname(data.nickname);
+        showSuccessToast('닉네임이 성공적으로 변경되었습니다.');
+        setIsShowNicknameModal(false)
+        loadUserData()
+      }
+  
     } catch (error) {
       showErrorToast('닉네임 변경 중 예상치 못한 오류가 발생했습니다.');
     }
@@ -159,18 +215,41 @@ function InfoEditPage() {
     );
   };
 
+
+
   return (
     <StyledPage className="main-page-container">
       <StyledHeader>
         <TitleHeader pageTitle="내 정보 수정" handleGoBack={handleGoBack} />
         <UserInfoHeader />
+        
 
         <div className="modify-nick-container">
+        {isShowNicknameModal && (
+          <div onClick={handleOutSideClick} className="report-popup-overlay">
+            <div className="nickname-popup">
+              <div className="nickname-title">닉네임을 변경하시겠습니까?</div>
+              <div className="nickname-sub-title">닉네임 변경 시,</div>
+              <div className="nickname-sub-title">붕어빵 20개가 차감됩니다. </div>
+              <div className="change-nickname-btn">
+                <div
+                  className="close-nickname-popup"
+                  onClick={()=>{ setIsShowNicknameModal(false)}}
+                >
+                  아니요
+                </div>
+                <div className="submit-nickname" onClick={handleModifyNickname}>
+                  예
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
           <div className="modify-info">
             <span className="modify-nick">닉네임</span>
             <div className="modify-nick-info">
               <span className="modify-nickname">{nickname}</span>
-              <div className="modify-nickname-btn" onClick={handleModifyNickname}>
+              <div className="modify-nickname-btn" onClick={toggleReportPopup}>
                 변경
               </div>
             </div>
diff --git a/src/components/ui/calendar/calendar.tsx b/src/components/ui/calendar/calendar.tsx
@@ -46,11 +46,7 @@ const Box = styled.div`
 const DateContainer = styled(DatePicker)`
   width: 135px;
   height: 28px;
-
-  .react-datepicker__navigation{
-    width:auto !impotant;
-  }
-  .react-datepicker__navigation--next
+  
 `;
 
 const Slash = styled.p`
