feat: MERGE

N0T-BAD · Jun 14, 2023 · c6493c5 · c6493c5
2 parents 8f21a97 + 2af3368
commit c6493c5
Show file tree

Hide file tree

Showing 31 changed files with 287 additions and 131 deletions.
diff --git a/components/modals/SkinPurchaseModal.tsx b/components/modals/SkinPurchaseModal.tsx
@@ -1,22 +1,48 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import style from '@/components/modals/RatingModal.module.css'
+import Swal from 'sweetalert2'
+import ConfirmModal from './ConfirmModal';
+import { useRouter } from 'next/router';
 
 export default function SkinPurchaseModal(props: { myBlock: number, blockQuantity: number, skinName: string, setShowModal: React.Dispatch<React.SetStateAction<boolean>>, handlePurchase: () => void }) {
+
+  const router = useRouter();
+  const [showConfirmModal, setShowConfirmModal] = useState<boolean>(false);
+
+  const alertSwal = () => {
+    Swal.fire({
+      icon: 'warning',
+      text: '블럭이 부족합니다.',
+      showConfirmButton: false,
+      timer: 2000
+    }).then(result => {
+      props.setShowModal(false);
+      router.push('/blockcharge');
+    })
+  }
+
+  const confirmModal = () => {
+    props.setShowModal(false)
+    setShowConfirmModal(true);
+  }
+
   return (
-    <div className={style.modalBox}>
-      <div className={style.modal}>
-        <div className={style.skinPurchaseModalBox}>
-          <p className={style.myBlock}>내 블럭 : {props.myBlock}개</p>
-          <p className={style.useBlock}>블럭 {props.blockQuantity}개를 사용하여</p>
-          <p className={style.useBlock}><span>{props.skinName}</span></p>
-          <p className={style.useBlock}>구매하시겠습니까?</p>
-          <div className={style.confirmBox}>
-            <button type='button' className={style.confirmBtn} onClick={props.handlePurchase}>확인</button>
-            <button type='button' className={style.cancle} onClick={() => props.setShowModal(false)}>취소</button>
+    <>
+      <div className={style.modalBox}>
+        <div className={style.modal}>
+          <div className={style.skinPurchaseModalBox}>
+            <p className={style.myBlock}>내 블럭 : {props.myBlock}개</p>
+            <p className={style.useBlock}>블럭 {props.blockQuantity}개를 사용하여</p>
+            <p className={style.useBlock}><span>{props.skinName}</span></p>
+            <p className={style.useBlock}>구매하시겠습니까?</p>
+            <div className={style.confirmBox}>
+              <button type='button' className={style.confirmBtn} onClick={props.myBlock >= props.blockQuantity ? props.handlePurchase : () => alertSwal()}>확인</button>
+              <button type='button' className={style.cancle} onClick={() => props.setShowModal(false)}>취소</button>
+            </div>
           </div>
         </div>
       </div>
-    </div >
+    </>
   )
 }
diff --git a/components/modals/menu/Menu.module.css b/components/modals/menu/Menu.module.css
@@ -1,7 +1,3 @@
-.menuSection {
-  /* padding: 2rem 1.5rem; */
-}
-
 .closeBtn {
   display: flex;
   justify-content: right;
@@ -22,26 +18,38 @@
 
 .user p:first-child {
   font-weight: 700;
-  font-size: 1.1rem;
+  font-size: 1.0rem;
 }
 
 .userSectionTxt {
   width: 70%;
   display: flex;
   flex-direction: column;
-  padding-bottom: 0.4rem;
+}
+
+.guestSectionTxt {
+  width: 70%;
+}
+
+.user .guestSectionTxt p {
+  font-weight: 400;
+  font-size: 0.9rem;
+  padding: 0 0 0 1rem;
 }
 
 .btnSection {
-  margin: 1rem 0 1rem 0;
+  margin: 2rem 0;
   display: flex;
   font-weight: 700;
-  cursor: pointer;
+  font-size: 0.8rem;
 }
 
 .mypageBtn {
   display: flex;
+  justify-content: center;
   align-items: center;
+  width: 100%;
+  cursor: pointer;
   padding: 0.3rem 1.7rem;
   border-radius: 2rem;
   background-color: var(--bp-secondary);
@@ -51,7 +59,10 @@
 
 .logoutBtn {
   display: flex;
+  justify-content: center;
   align-items: center;
+  width: 100%;
+  cursor: pointer;
   padding: 0.3rem 1.7rem 0.3rem 2.6rem;
   margin-left: -1.9rem;
   border-radius: 2rem;
@@ -72,7 +83,7 @@
 }
 
 .menuList {
-  padding: 1rem 1.5rem;
+  padding: 0 1.5rem;
   font-size: 1.1rem;
   line-height: 3rem;
   padding-inline-start: 1.5em;
@@ -94,19 +105,21 @@
   left: 2rem;
 }
 
-
 .userProfileDiv {
   display: flex;
   justify-content: center;
+  align-items: center;
   width: 30%;
 }
 
 .userProfileImgDiv {
   position: relative;
+  display: flex;
 }
 
 .selectedUserSkin {
   position: absolute;
+  display: flex;
 }
 
 .userProfileImgDiv img {

diff --git a/components/modals/menu/MenuBtnSection.tsx b/components/modals/menu/MenuBtnSection.tsx
@@ -12,17 +12,17 @@ export default function MenuBtnSection() {
   return (
     <section className={style.btnSection}>
       <div className={style.mypageBtn} onClick={() => router.push("/mypage")}>
-        마이페이지
+        <p>마이페이지</p>
       </div>
       {
         session ?
           (
             <div className={style.logoutBtn} onClick={() => signOut()}>
-              로그아웃
+              <p>로그아웃</p>
             </div>
           ) : (
             <div className={style.logoutBtn} onClick={() => router.push("/login")}>
-              로그인
+              <p>로그인</p>
             </div>
           )
       }

diff --git a/components/modals/menu/MenuModal.tsx b/components/modals/menu/MenuModal.tsx
@@ -50,16 +50,16 @@ export default function MenuModal(props: {
                   <Image
                     src={props.userProfileImg}
                     alt='유저 프로필 이미지'
-                    width={80}
-                    height={80}
+                    width={70}
+                    height={70}
                     priority
                   />
                   :
                   <Image
                     src={'/assets/images/mypage/userImg.png'}
                     alt='게스트 프로필 이미지'
-                    width={80}
-                    height={80}
+                    width={70}
+                    height={70}
                     priority
                   />
               }
@@ -70,8 +70,8 @@ export default function MenuModal(props: {
                 <Image
                   src={props.userProfileSkin}
                   alt='스킨 이미지'
-                  width={80}
-                  height={80}
+                  width={70}
+                  height={70}
                   priority
                 />
               }
@@ -83,7 +83,10 @@ export default function MenuModal(props: {
                 <p>{props.userNickname} 님</p>
                 <p>환영합니다.</p>
               </div>
-              : <p>로그인을 해주세요.</p>
+              :
+              <div className={style.guestSectionTxt}>
+                <p>로그인을 해주세요.</p>
+              </div>
           }
         </div>
       </section>

diff --git a/components/pages/changeuserinfo/ChangeUserInfo.module.css b/components/pages/changeuserinfo/ChangeUserInfo.module.css
@@ -236,7 +236,7 @@ img.userImage1 {
 
 .profileskin img {
   position: absolute;
-  top: 19%;
+  top: 21%;
 }
 
 .changeuserinfobox {

diff --git a/components/pages/comment/Comment.tsx b/components/pages/comment/Comment.tsx
@@ -11,9 +11,10 @@ import { CommentDataType, CommentEmotionDataType, ParentsCommentType } from '@/t
 import CommentInput from './CommentInput'
 import ReportModal from '@/components/modals/ReportModal'
 import ConfirmModal from '@/components/modals/ConfirmModal'
+import { userDataType } from '@/types/storeDataType'
 
 export default function Comment(props: {
-  nickNameData: string,
+  userData: userDataType,
   commentData: CommentDataType,
 }) {
   const { data: session } = useSession();
@@ -22,7 +23,7 @@ export default function Comment(props: {
   const { episodeId } = router.query;
   const { author } = router.query;
 
-  const nickNameData = props.nickNameData;
+  const nickNameData = props.userData.nickname;
   const commentData = props.commentData;
   const [replyData, setReplyData] = useState<CommentDataType[]>([]);
 
@@ -54,7 +55,7 @@ export default function Comment(props: {
         axios.get(`https://blockpage.site/comment-service/v1/comments/reply/${commentData.commentId}`),
         axios.get(`https://blockpage.site/member-service/v1/emotions?commentId=${commentData.commentId}`, {
           headers: {
-            memberId: session?.email,
+            memberId: session.email,
           }
         })]
       )
@@ -110,6 +111,7 @@ export default function Comment(props: {
       })
         .then((res) => {
           setLikeState(!likeState);
+          router.reload();
         })
         .catch((err) => {
           console.log(err);
@@ -123,6 +125,7 @@ export default function Comment(props: {
       })
         .then((res) => {
           setLikeState(!likeState);
+          router.reload();
         })
         .catch((err) => {
           console.log(err);
@@ -222,12 +225,14 @@ export default function Comment(props: {
               {
                 commentData.childNickname ?
                   <>
-                    < CommentUserInfo
+                    <CommentUserInfo
+                      commentData={commentData}
                       nickname={commentData.childNickname}
                       date={commentData.dateTime}
                     />
                   </> :
-                  < CommentUserInfo
+                  <CommentUserInfo
+                    commentData={commentData}
                     nickname={commentData.parentsNickname}
                     date={commentData.dateTime}
                   />
@@ -337,13 +342,13 @@ export default function Comment(props: {
                 commentData.parentsId === childData.parentsId &&
                 <Comment
                   key={childData.commentId}
-                  nickNameData={props.nickNameData}
+                  userData={props.userData}
                   commentData={childData}
                 />
               ))
             }
             <CommentInput
-              nickNameData={props.nickNameData}
+              userData={props.userData}
               parents={parentsJson}
             />
           </div>

diff --git a/components/pages/comment/CommentInput.tsx b/components/pages/comment/CommentInput.tsx
@@ -5,15 +5,16 @@ import { useSession } from 'next-auth/react';
 
 import style from '@/components/pages/comment/CommentInput.module.css'
 import { ParentsCommentType } from '@/types/commentDataType';
+import { userDataType } from '@/types/storeDataType';
 
 export default function CommentInput(props: {
-  nickNameData: string,
+  userData: userDataType,
   parents?: ParentsCommentType,
 }) {
   const { data: session } = useSession();
   const router = useRouter();
   const { episodeId } = router.query;
-  const nickNameData = props.nickNameData;
+  const nickNameData = props.userData.nickname;
   const parents = props.parents;
   const [btnState, setBtnState] = useState(false);
   const [inputCount, setInputCount] = useState(0);
@@ -37,6 +38,8 @@ export default function CommentInput(props: {
           episodeId: episodeId,
           content: inputText,
           nickname: nickNameData,
+          profileImage: props.userData.profileImage,
+          profileSkin: props.userData.profileSkin,
         }, {
           headers: {
             memberId: session?.email,
@@ -53,6 +56,9 @@ export default function CommentInput(props: {
           episodeId: episodeId,
           content: inputText,
           nickname: nickNameData,
+          profileImage: props.userData.profileImage,
+          profileSkin: props.userData.profileSkin,
+
         }, {
           headers: {
             memberId: session?.email,

diff --git a/components/pages/comment/CommentInputSection.tsx b/components/pages/comment/CommentInputSection.tsx
@@ -3,12 +3,13 @@ import React from 'react'
 import style from '@/components/pages/comment/CommentInputSection.module.css'
 import CommentInput from './CommentInput'
 import TotalComment from './TotalComment'
+import { userDataType } from '@/types/storeDataType'
 
-export default function CommentInputSection(props: { nickNameData: string, count: number }) {
+export default function CommentInputSection(props: { userData: userDataType, count: number }) {
   return (
     <section className={style.commentInputSection}>
       <TotalComment count={props.count} />
-      <CommentInput nickNameData={props.nickNameData} />
+      <CommentInput userData={props.userData} />
     </section>
   )
 }