diff --git a/components/modals/SkinPurchaseModal.tsx b/components/modals/SkinPurchaseModal.tsx
index 34204d2..988fb3e 100644
--- 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
index 000faf0..e8ae96c 100644
--- 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
index 0b7fac7..4a6c3ae 100644
--- 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
index a04812e..9d8a9f6 100644
--- 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
index 26aca5a..3f205ef 100644
--- 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
index 274f036..bb74964 100644
--- 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
index 1ae6597..d154269 100644
--- 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
index 277c98a..da30137 100644
--- 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>
   )
 }
diff --git a/components/pages/comment/CommentUserInfo.tsx b/components/pages/comment/CommentUserInfo.tsx
index e85bb22..dd89abf 100644
--- a/components/pages/comment/CommentUserInfo.tsx
+++ b/components/pages/comment/CommentUserInfo.tsx
@@ -2,14 +2,36 @@ import React from 'react'
 import Image from 'next/image'
 
 import style from '@/components/pages/comment/GetComment.module.css'
+import { CommentDataType } from '@/types/commentDataType'
 
-export default function CommentUserInfo(props: { nickname: string, date: string }) {
+export default function CommentUserInfo(props: { commentData: CommentDataType, nickname: string, date: string }) {
   return (
     <div className={style.profile}>
-      <Image className={style.userImage} src={"/assets/images/mypage/userImg.png"} alt={"userImg"} width={40} height={40} priority />
+      <div className={style.userProfileDiv}>
+        <div className={style.userProfileImgDiv}>
+          <Image
+            src={props.commentData.profileImage}
+            alt='유저 프로필 이미지'
+            width={40}
+            height={40}
+            priority
+          />
+        </div>
+        <div className={style.selectedUserSkin}>
+          {
+            props.commentData.profileSkin !== '' &&
+            <Image
+              src={props.commentData.profileSkin}
+              alt='스킨 이미지'
+              width={40}
+              height={40}
+              priority
+            />
+          }
+        </div>
+      </div>
       <div className={style.profileTxt}>
         <p>{props.nickname}</p>
-        {/* api 데이터 추가해야 함 */}
         <p className={style.date}>{props.date}</p>
       </div>
     </div>
diff --git a/components/pages/comment/GetComment.module.css b/components/pages/comment/GetComment.module.css
index 571cf27..13cb25d 100644
--- a/components/pages/comment/GetComment.module.css
+++ b/components/pages/comment/GetComment.module.css
@@ -22,12 +22,30 @@
   align-items: center;
 }
 
+.userProfileDiv {
+  display: flex;
+  justify-content: center;
+}
+
+.userProfileImgDiv {
+  position: relative;
+  display: flex;
+}
+
+.selectedUserSkin {
+  position: absolute;
+}
+
+.userProfileImgDiv img {
+  border-radius: 50%;
+}
+
 .date {
   color: var(--bp-secondary);
 }
 
 .profile img {
-  margin-right: 1rem;
+  margin-right: 0.5rem;
 }
 
 .profileTxt p {
diff --git a/components/pages/comment/GetComment.tsx b/components/pages/comment/GetComment.tsx
index 0c1991c..86d955b 100644
--- a/components/pages/comment/GetComment.tsx
+++ b/components/pages/comment/GetComment.tsx
@@ -2,8 +2,9 @@ import React from 'react'
 
 import { CommentDataType } from '@/types/commentDataType';
 import Comment from './Comment';
+import { userDataType } from '@/types/storeDataType';
 
-export default function GetComment(props: { commentData: CommentDataType[], nickNameData: string }) {
+export default function GetComment(props: { commentData: CommentDataType[], userData: userDataType }) {
   return (
     <>
       {
@@ -12,7 +13,7 @@ export default function GetComment(props: { commentData: CommentDataType[], nick
           !parentsData.childId &&
           <Comment
             key={parentsData.commentId}
-            nickNameData={props.nickNameData}
+            userData={props.userData}
             commentData={parentsData}
           />
         ))
diff --git a/components/pages/comment/GetCommentSection.tsx b/components/pages/comment/GetCommentSection.tsx
index 8e6c05f..d8b6f8f 100644
--- a/components/pages/comment/GetCommentSection.tsx
+++ b/components/pages/comment/GetCommentSection.tsx
@@ -3,11 +3,12 @@ import React from 'react'
 import style from '@/components/pages/comment/GetCommentSection.module.css'
 import GetComment from './GetComment'
 import { CommentDataType } from '@/types/commentDataType'
+import { userDataType } from '@/types/storeDataType'
 
-export default function GetCommentSection(props: { commentData: CommentDataType[], nickNameData: string }) {
+export default function GetCommentSection(props: { commentData: CommentDataType[], userData: userDataType }) {
   return (
     <section className={style.getCommentSection}>
-      <GetComment commentData={props.commentData} nickNameData={props.nickNameData} />
+      <GetComment commentData={props.commentData} userData={props.userData} />
     </section>
   )
 }
diff --git a/components/pages/episodeviewer/EpisodeViewer.module.css b/components/pages/episodeviewer/EpisodeViewer.module.css
index 83c14fc..35dd17f 100644
--- a/components/pages/episodeviewer/EpisodeViewer.module.css
+++ b/components/pages/episodeviewer/EpisodeViewer.module.css
@@ -1,7 +1,7 @@
 .viewer {
-  margin-bottom: 6rem;
+  margin-bottom: 5rem;
   display: flex;
-  flex-direction: column;
+  width: 100%;
 }
 
 .episodeImg {
@@ -10,5 +10,6 @@
 }
 
 .episodeImg img {
+  width: 100%;
   height: auto;
 }
\ No newline at end of file
diff --git a/components/pages/episodeviewer/FooterViewer.module.css b/components/pages/episodeviewer/FooterViewer.module.css
index 5ec4922..4557288 100644
--- a/components/pages/episodeviewer/FooterViewer.module.css
+++ b/components/pages/episodeviewer/FooterViewer.module.css
@@ -1,6 +1,6 @@
 .viewerFooterWrap {
   width: 100%;
-  height: 22rem;
+  height: 21rem;
   padding: 0 1.5rem;
   position: fixed;
   bottom: -22rem;
@@ -18,29 +18,25 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  position: fixed;
   width: 100%;
-  bottom: 0rem;
-  z-index: 200;
+  height: 100%;
   background-color: var(--bp-white);
-  padding: 1rem 1.5rem;
   border-radius: 0.5rem 0.5rem 0 0;
   transition: 0.5s ease-in-out;
 }
 
 .navFoot.close {
-  bottom: -6rem;
   transition: 0.5s ease-in-out;
 }
 
 .navFoot .btn {
-  width: 1.2rem;
-  height: 1.2rem;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 
 .navFoot .btn img {
   width: 100%;
-  height: auto;
+  height: 100%;
 }
 
 .top {
@@ -77,7 +73,7 @@
 .authorSection {
   display: flex;
   flex-direction: column;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
 }
 
 .authorMent {
@@ -97,6 +93,11 @@
 
 .authorComment {
   margin: 0.3rem 0;
+  word-break: keep-all;
+}
+
+.authorComment p {
+  font-size: 0.9rem;
 }
 
 .nextEpisode {
diff --git a/components/pages/episodeviewer/FooterViewer.tsx b/components/pages/episodeviewer/FooterViewer.tsx
index 960a5f0..3b063b8 100644
--- a/components/pages/episodeviewer/FooterViewer.tsx
+++ b/components/pages/episodeviewer/FooterViewer.tsx
@@ -12,7 +12,6 @@ import Episode from '../webtoonepisode/Episode';
 import { EpisodeViewDataType } from '@/types/webtoonDataType';
 import RatingModal from '@/components/modals/RatingModal';
 import Swal from 'sweetalert2';
-import PurchaseModal from '@/components/modals/PurchaseModal';
 
 export default function FooterViewer(props: { episodeData: EpisodeViewDataType, isViewer: boolean, setIsViewer: React.Dispatch<React.SetStateAction<boolean>> }) {
 
@@ -45,6 +44,17 @@ export default function FooterViewer(props: { episodeData: EpisodeViewDataType,
     setShowPurchaseModal(true);
   }
 
+  const handleLogin = () => {
+    Swal.fire({
+      icon: 'warning',
+      text: '로그인이 필요한 서비스입니다.',
+      showConfirmButton: false,
+      timer: 2000
+    }).then(result => {
+      router.push('/login');
+    })
+  }
+
   const handleShowRating = () => {
     if (session) {
       setShowRatingModal(!showRatingModal);
@@ -103,16 +113,17 @@ export default function FooterViewer(props: { episodeData: EpisodeViewDataType,
 
       axios.get(`https://blockpage.site/member-service/v1/ratings/${episodeId}`, {
         headers: {
-          memberId: session?.email
+          memberId: session.email
         }
       })
         .then((res) => {
           setValue(res.data.data.ratings);
-          setIsRatingData(true);
+          setIsRatingData(res.data.data.choice);
+          console.log(res);
         })
         .catch((err) => {
-          console.log(err);
           setIsRatingData(false);
+          console.log(err);
         })
     }
   }, [session?.email])
@@ -128,17 +139,6 @@ export default function FooterViewer(props: { episodeData: EpisodeViewDataType,
           value={value}
         />
       }
-      {/* {
-        showPurchaseModal &&
-        <PurchaseModal
-          myBlock={myBlock}
-          episodeId={episodeIdModal}
-          episodeNumber={episodeNumberModal}
-          episodePrice={episodePriceModal}
-          setShowModal={setShowPurchaseModal}
-          // handleEpisode={handleEpisode}
-        />
-      } */}
       <footer
         className={
           props.isViewer ? `${style.viewerFooterWrap} ${style.view}` : `${style.viewerFooterWrap}`
@@ -183,14 +183,13 @@ export default function FooterViewer(props: { episodeData: EpisodeViewDataType,
                 data.nextEpisodeBlockPrice > 0 ?
                   (
                     !session?.email ?
-                      (() => router.push('/login')) :
+                      () => handleLogin() :
                       myBlock >= 4 ?
                         () => handleShowPurchaseModal(nextId, nextNumber, data.nextEpisodeBlockPrice) :
                         () => router.push('/blockcharge')
                   )
                   :
                   () => router.push(`/webtoon/${webtoonId}/episode/${nextId}/episode/${nextNumber}`)
-
               }
             >
               <p className={style.nextTxt}>다음화</p>
@@ -207,10 +206,10 @@ export default function FooterViewer(props: { episodeData: EpisodeViewDataType,
               <p>마지막화입니다.</p>
             </div>
         }
+        <NavFooter
+          author={data.author}
+        />
       </footer >
-      <NavFooter
-        author={data.author}
-      />
     </>
   )
 }
@@ -225,6 +224,17 @@ const NavFooter = (props: { author: string }) => {
 
   const [isViewer, setIsViewer] = useState<boolean>(false);
 
+  const handleLogin = () => {
+    Swal.fire({
+      icon: 'warning',
+      text: '로그인이 필요한 서비스입니다.',
+      showConfirmButton: false,
+      timer: 2000
+    }).then(result => {
+      router.push('/login');
+    })
+  }
+
   useEffect(() => {
     const handleTouch = (e: TouchEvent) => {
       if (e.touches[0].clientY > 100) {
@@ -237,7 +247,6 @@ const NavFooter = (props: { author: string }) => {
     };
   }, []);
 
-  // interval 3s for slide down
   useEffect(() => {
     const interval = setInterval(() => {
       setIsViewer(false);
@@ -257,16 +266,7 @@ const NavFooter = (props: { author: string }) => {
           pathname: `/webtoon/${webtoonId}/episode/${episodeId}/episode/${episodeNumber}/comment`,
           query: { author: props.author },
         }
-      ) : () => {
-        Swal.fire({
-          icon: 'warning',
-          text: '로그인이 필요한 서비스입니다.',
-          showConfirmButton: false,
-          timer: 2000
-        }).then(result => {
-          router.push('/login');
-        })
-      }
+      ) : () => handleLogin()
 
       }>
         <Image
diff --git a/components/pages/store/NftData.tsx b/components/pages/store/NftData.tsx
index 0d13951..c681ece 100644
--- a/components/pages/store/NftData.tsx
+++ b/components/pages/store/NftData.tsx
@@ -5,6 +5,7 @@ import style from '@/components/pages/store/ProfileStore.module.css'
 import Separator from '@/components/ui/Separator'
 
 export default function NftData(props: {
+  nftId: number,
   nftCreatorId: string,
   nftMemberId: string,
   nftName: string,
@@ -13,7 +14,7 @@ export default function NftData(props: {
   nftImage: string,
   nftBlockPrice: number,
   nftType: string,
-  handleSelectSkin: (
+  handleSelectNft: (
     nftId: number,
     nftName: string,
     nftImage: string,
@@ -22,7 +23,7 @@ export default function NftData(props: {
 }) {
   return (
     <>
-      <div className={style.skinImgDiv} onClick={() => console.log('onClick')}>
+      <div className={style.skinImgDiv} onClick={() => props.handleSelectNft(props.nftId, props.nftName, props.nftImage, props.nftBlockPrice)}>
         <div className={style.skinImg}>
           <Image
             src={props.nftImage}
@@ -34,8 +35,12 @@ export default function NftData(props: {
         </div>
         <div className={style.skinTxtDiv}>
           <div className={style.skinTxtTop}>
-            <p className={style.skinName}>{props.nftName}</p>
-            <p className={props.selectedNftName === props.selectedNftName ? `${style.skinSelected}` : ""}>{props.selectedNftName === props.selectedNftName ? '선택' : ""}</p>
+            <div className={style.titleTxt}>
+              <p className={style.skinName}>{props.nftName}</p>
+            </div>
+            <div>
+              <p className={props.nftName === props.selectedNftName ? `${style.skinSelected}` : ""}>{props.nftName === props.selectedNftName ? '선택' : ""}</p>
+            </div>
           </div>
           <p className={style.skinDescription}>{props.nftDescription}</p>
           <p className={style.blockPrice}>{props.nftBlockPrice} 블럭</p>
diff --git a/components/pages/store/NftStore.module.css b/components/pages/store/NftStore.module.css
index 5545876..549b3f6 100644
--- a/components/pages/store/NftStore.module.css
+++ b/components/pages/store/NftStore.module.css
@@ -10,6 +10,8 @@ p.myBlock {
 }
 
 .sectionTxt {
+  display: flex;
+  justify-content: space-between;
   padding: 1rem 0 0;
 }
 
@@ -18,6 +20,12 @@ p.myBlock {
   font-weight: 700;
 }
 
+.sectionTxt p.myBlock {
+  font-size: 1rem;
+  font-weight: 400;
+  color: var(--bp-font-gray);
+}
+
 .skinImgList {
   display: flex;
   flex-direction: column;
diff --git a/components/pages/store/NftStore.tsx b/components/pages/store/NftStore.tsx
index ee295b4..1d21a94 100644
--- a/components/pages/store/NftStore.tsx
+++ b/components/pages/store/NftStore.tsx
@@ -27,7 +27,7 @@ export default function NftStore(props: { data: userDataType }) {
 
   const [showModal, setShowModal] = useState<boolean>(false);
 
-  const handleSelectSkin = (nftId: number, nftName: string, nftImage: string, blockQuantity: number) => {
+  const handleSelectNft = (nftId: number, nftName: string, nftImage: string, blockQuantity: number) => {
     setSelectedNftId(nftId);
     setSeletedNftName(nftName);
     setSelectedNftImage(nftImage);
@@ -71,6 +71,17 @@ export default function NftStore(props: { data: userDataType }) {
     }
   }
 
+  const handleLogin = () => {
+    Swal.fire({
+      icon: 'warning',
+      text: '로그인이 필요한 서비스입니다.',
+      showConfirmButton: false,
+      timer: 2000
+    }).then(result => {
+      router.push('/login');
+    })
+  }
+
   useEffect(() => {
     axios.get(`https://blockpage.site/purchase-service/v1/products?type=nft`)
       .then((res) => {
@@ -108,6 +119,7 @@ export default function NftStore(props: { data: userDataType }) {
       <section className={style.nftSection}>
         <div className={style.sectionTxt}>
           <p>NFT 목록</p>
+          <p className={style.myBlock}>보유 블럭 {myBlock}</p>
         </div>
         <div className={style.skinImgList}>
           {
@@ -115,6 +127,7 @@ export default function NftStore(props: { data: userDataType }) {
             nftData.map((data) => (
               <NftData
                 key={data.nftId}
+                nftId={data.nftId}
                 nftCreatorId={data.nftCreatorId}
                 nftMemberId={data.nftMemberId}
                 nftName={data.nftName}
@@ -123,13 +136,13 @@ export default function NftStore(props: { data: userDataType }) {
                 nftImage={data.nftImage}
                 nftBlockPrice={data.nftBlockPrice}
                 nftType={data.nftType}
-                handleSelectSkin={handleSelectSkin}
+                handleSelectNft={handleSelectNft}
               />
             ))
           }
         </div>
         <div className={style.confirmBox}>
-          <button type='button' className={style.confirm} onClick={!session ? () => router.push('/login') : () => setShowModal(true)}>구매</button>
+          <button type='button' className={style.confirm} onClick={!session ? () => handleLogin() : () => setShowModal(true)}>구매</button>
         </div>
       </section>
     </>
diff --git a/components/pages/store/ProfileSkin.tsx b/components/pages/store/ProfileSkin.tsx
index eb0a7c8..3dcd8b6 100644
--- a/components/pages/store/ProfileSkin.tsx
+++ b/components/pages/store/ProfileSkin.tsx
@@ -29,8 +29,12 @@ export default function ProfileSkin(props: { mySkin: mySkinData[], skinId: numbe
         </div>
         <div className={style.skinTxtDiv}>
           <div className={style.skinTxtTop}>
-            <p className={style.skinName}>{props.skinName}</p>
-            <p className={props.skinId === props.selectedSkinId ? `${style.skinSelected}` : ""}>{props.skinId === props.selectedSkinId ? '선택' : ""}</p>
+            <div>
+              <p className={style.skinName}>{props.skinName}</p>
+            </div>
+            <div>
+              <p className={props.skinId === props.selectedSkinId ? `${style.skinSelected}` : ""}>{props.skinId === props.selectedSkinId ? '선택' : ""}</p>
+            </div>
             {/* <p className={props.skinId === props.selectedSkinId ? `${style.skinSelected}` : ""}>
               {
                 myProfileSkin &&
diff --git a/components/pages/store/ProfileStore.module.css b/components/pages/store/ProfileStore.module.css
index 1e11b6b..47a811a 100644
--- a/components/pages/store/ProfileStore.module.css
+++ b/components/pages/store/ProfileStore.module.css
@@ -95,6 +95,7 @@ p.myBlock {
 .skinTxtTop {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 
 .skinTxtDiv .skinSelected {
@@ -104,7 +105,7 @@ p.myBlock {
 
 p.skinName {
   color: var(--bp-secondary);
-  font-size: 1rem;
+  font-size: 0.9rem;
   font-weight: 700;
 }
 
diff --git a/components/pages/store/ProfileStore.tsx b/components/pages/store/ProfileStore.tsx
index 3d62e6e..172795e 100644
--- a/components/pages/store/ProfileStore.tsx
+++ b/components/pages/store/ProfileStore.tsx
@@ -73,6 +73,17 @@ export default function ProfileStore(props: { data: userDataType }) {
     }
   }
 
+  const handleLogin = () => {
+    Swal.fire({
+      icon: 'warning',
+      text: '로그인이 필요한 서비스입니다.',
+      showConfirmButton: false,
+      timer: 2000
+    }).then(result => {
+      router.push('/login');
+    })
+  }
+
   useEffect(() => {
     axios.get(`https://blockpage.site/purchase-service/v1/products?type=profileSkin`)
       .then((res) => {
@@ -181,7 +192,7 @@ export default function ProfileStore(props: { data: userDataType }) {
           }
         </div>
         <div className={style.confirmBox}>
-          <button type='button' className={style.confirm} onClick={!session ? () => router.push('/login') : () => setShowModal(true)}>구매</button>
+          <button type='button' className={style.confirm} onClick={!session ? () => handleLogin() : () => setShowModal(true)}>구매</button>
         </div>
       </section>
     </>
diff --git a/components/pages/webtoonepisode/Episode.module.css b/components/pages/webtoonepisode/Episode.module.css
index 1f31ae8..7e5efee 100644
--- a/components/pages/webtoonepisode/Episode.module.css
+++ b/components/pages/webtoonepisode/Episode.module.css
@@ -40,6 +40,7 @@
 .subject {
   font-weight: 700;
   font-size: 1rem;
+  word-break: keep-all;
 }
 
 .priceBlock {
diff --git a/components/pages/webtoonepisode/EpisodeSection.tsx b/components/pages/webtoonepisode/EpisodeSection.tsx
index 2ef5f3f..feabe74 100644
--- a/components/pages/webtoonepisode/EpisodeSection.tsx
+++ b/components/pages/webtoonepisode/EpisodeSection.tsx
@@ -60,6 +60,17 @@ export default function EpisodeSection(props: { data: WebToonListDataType, episo
     setIsPreviewSection(!isPreviewSection);
   }
 
+  const handleLogin = () => {
+    Swal.fire({
+      icon: 'warning',
+      text: '로그인이 필요한 서비스입니다.',
+      showConfirmButton: false,
+      timer: 2000
+    }).then(result => {
+      router.push('/login');
+    })
+  }
+
   const handleShowModal = (episodeId: number, episodeNumber: number, episodePrice: number) => {
     setEpisodeIdModal(episodeId)
     setEpisodeIdNumberModal(episodeNumber)
@@ -169,7 +180,7 @@ export default function EpisodeSection(props: { data: WebToonListDataType, episo
               item.isRead === true ?
                 () => handleEpisode('episodeBMPaid', 'rental', item.episodeId, item.episodeNumber, item.episodePrice, false) :
                 !session?.email ?
-                  () => router.push('/login') :
+                  () => handleLogin() :
                   myBlock >= 4 ?
                     () => handleShowModal(item.episodeId, item.episodeNumber, item.episodePrice) :
                     () => setShowConfirmModal(true)
diff --git a/components/ui/ScrollToTopBtn.module.css b/components/ui/ScrollToTopBtn.module.css
index a6fa4a8..fb2004a 100644
--- a/components/ui/ScrollToTopBtn.module.css
+++ b/components/ui/ScrollToTopBtn.module.css
@@ -1,7 +1,7 @@
 .scrollWrap {
   position: fixed;
   width: 100%;
-  bottom: 2rem;
+  bottom: 4rem;
   z-index: 400;
   opacity: 0;
   display: flex;
diff --git a/components/ui/ScrollToTopBtn.tsx b/components/ui/ScrollToTopBtn.tsx
index f73b8db..1d55138 100644
--- a/components/ui/ScrollToTopBtn.tsx
+++ b/components/ui/ScrollToTopBtn.tsx
@@ -30,7 +30,7 @@ export default function ScrollToTopBtn() {
   }, [scrollY])
 
   return (
-    <div className={isActive ? `${style.scrollWrap} ${style.active}` : ``}>
+    <div className={isActive ? `${style.scrollWrap} ${style.active}` : `${style.scrollWrap}`}>
       <div className={style.scrollBtn} onClick={scrollToTop}>
         <Image
           src={'/assets/images/icons/back.svg'}
diff --git a/components/ui/WebtoonList.tsx b/components/ui/WebtoonList.tsx
index 5d40953..f97bf44 100644
--- a/components/ui/WebtoonList.tsx
+++ b/components/ui/WebtoonList.tsx
@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react'
 import Image from 'next/image'
 import { useRouter } from 'next/router'
+import { useSession } from 'next-auth/react'
+import axios from 'axios'
 
 import style from '@/components/ui/WebtoonList.module.css'
+import { listviewDataType } from '@/types/listviewDataType'
 import Separator from './Separator'
 import ViewLike from './ViewLike'
-import { listviewDataType } from '@/types/listviewDataType'
 import LikeButton from './LikeButton'
-import axios from 'axios'
-import { useSession } from 'next-auth/react'
 
 interface likeStateType {
   id: number;
diff --git a/data/staticMenuData.ts b/data/staticMenuData.ts
index fdc87b9..c4889d2 100644
--- a/data/staticMenuData.ts
+++ b/data/staticMenuData.ts
@@ -37,13 +37,13 @@ export const staticTopNavData = [
 export const staticStoreNavData = [
   {
     id: 1,
-    name: "프로필 스킨",
-    link: "profileSkin",
+    name: "NFT",
+    link: "nft",
   },
   {
     id: 2,
-    name: "NFT",
-    link: "nft",
+    name: "프로필 스킨",
+    link: "profileSkin",
   },
 ];
 
@@ -188,7 +188,7 @@ export const staticMenuListData = [
   {
     id: 6,
     name: "스토어",
-    link: "/store/profileSkin",
+    link: "/store/nft",
   },
 ];
 
diff --git a/pages/webtoon/[webtoonId]/episode/[episodeId]/episode/[episodeNumber]/comment.tsx b/pages/webtoon/[webtoonId]/episode/[episodeId]/episode/[episodeNumber]/comment.tsx
index 4f51a1f..c0311b8 100644
--- a/pages/webtoon/[webtoonId]/episode/[episodeId]/episode/[episodeNumber]/comment.tsx
+++ b/pages/webtoon/[webtoonId]/episode/[episodeId]/episode/[episodeNumber]/comment.tsx
@@ -6,11 +6,18 @@ import CommentLayout from "@/components/layouts/CommentLayout"
 import CommentInputSection from "@/components/pages/comment/CommentInputSection"
 import GetCommentSection from "@/components/pages/comment/GetCommentSection"
 import { CommentDataType } from "@/types/commentDataType"
+import { userDataType } from "@/types/storeDataType"
 
 function Comment(props: { commentData: CommentDataType[], count: number }) {
 
   const { data: session } = useSession();
-  const [nickNameData, setNickNameData] = useState<string>('');
+  const [userData, setUserData] = useState<userDataType>({
+    nickname: '',
+    profileImage: '',
+    profileSkin: '',
+    role: '',
+    creatorNickname: '',
+  });
   const [commentData, setCommentData] = useState<CommentDataType[]>([]);
   useEffect(() => {
     setCommentData(props.commentData);
@@ -19,10 +26,10 @@ function Comment(props: { commentData: CommentDataType[], count: number }) {
   if (session) {
     axios.get(`https://blockpage.site/member-service/v1/members?type=detail`, {
       headers: {
-        memberId: session?.email || '',
+        memberId: session.email,
       },
     }).then((res) => {
-      setNickNameData(res.data.data.nickname);
+      setUserData(res.data.data);
     }).catch((err) => {
       console.log(err);
     });
@@ -30,8 +37,8 @@ function Comment(props: { commentData: CommentDataType[], count: number }) {
 
   return (
     <>
-      <CommentInputSection nickNameData={nickNameData} count={props.count} />
-      <GetCommentSection commentData={commentData} nickNameData={nickNameData} />
+      <CommentInputSection userData={userData} count={props.count} />
+      <GetCommentSection commentData={commentData} userData={userData} />
     </>
   )
 }
@@ -52,6 +59,7 @@ export async function getServerSideProps(context: any) {
   const res = await axios.get(`https://blockpage.site/comment-service/v1/comments/${episodeId}`)
   const commentData = res.data.data.commentViewList;
   const count = res.data.data.count;
+  console.log(commentData)
 
   return {
     props: { commentData, count }
diff --git a/pages/webtoon/[webtoonId]/episode/[episodeId]/episode/[episodeNumber]/index.tsx b/pages/webtoon/[webtoonId]/episode/[episodeId]/episode/[episodeNumber]/index.tsx
index 0916fdb..48913e9 100644
--- a/pages/webtoon/[webtoonId]/episode/[episodeId]/episode/[episodeNumber]/index.tsx
+++ b/pages/webtoon/[webtoonId]/episode/[episodeId]/episode/[episodeNumber]/index.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
+import axios from "axios";
 
 import EpisodeViewer from "@/components/pages/episodeviewer/EpisodeViewer"
 import FooterViewer from "@/components/pages/episodeviewer/FooterViewer"
 import { EpisodeViewDataType } from "@/types/webtoonDataType"
-import axios from "axios";
 
 function EpisodeId(props: { data: EpisodeViewDataType }) {
   const data = props.data;
@@ -46,10 +46,4 @@ export async function getServerSideProps(context: any) {
   return {
     props: { data }
   }
-}
-
-// EpisodeId.auth = {
-//   // role: "admin",
-//   loading: <DataFetchingLoader text="load" />,
-//   unauthorized: '/login', // redirect to this url
-// }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/public/sw.js.map b/public/sw.js.map
index 70dbac9..7324490 100644
--- a/public/sw.js.map
+++ b/public/sw.js.map
@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../../AppData/Local/Temp/b1e6d0ed12fe492d61562967bcd305b8/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from 'C:/Users/교육생36/Desktop/blockpage_publish/FE-publishing/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkFirst as workbox_strategies_NetworkFirst} from 'C:/Users/교육생36/Desktop/blockpage_publish/FE-publishing/node_modules/workbox-strategies/NetworkFirst.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from 'C:/Users/교육생36/Desktop/blockpage_publish/FE-publishing/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from 'C:/Users/교육생36/Desktop/blockpage_publish/FE-publishing/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n  \n);\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(\"/\", new workbox_strategies_NetworkFirst({ \"cacheName\":\"start-url\", plugins: [{ cacheWillUpdate: async ({ request, response, event, state }) => { if (response && response.type === 'opaqueredirect') { return new Response(response.body, { status: 200, statusText: 'OK', headers: response.headers }) } return response } }] }), 'GET');\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\nself.__WB_DISABLE_DEV_LOGS = true;"],"names":["importScripts","self","skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkFirst","cacheName","plugins","cacheWillUpdate","async","request","response","event","state","type","Response","body","status","statusText","headers","workbox_strategies_NetworkOnly","__WB_DISABLE_DEV_LOGS"],"mappings":"0nBAgBAA,gBAUAC,KAAKC,cAELC,EAAAA,eAIAC,EAAAA,cAA8B,IAAK,IAAIC,eAAgC,CAAEC,UAAY,YAAaC,QAAS,CAAC,CAAEC,gBAAiBC,OAASC,UAASC,WAAUC,QAAOC,WAAkBF,GAA8B,mBAAlBA,EAASG,KAAoC,IAAIC,SAASJ,EAASK,KAAM,CAAEC,OAAQ,IAAKC,WAAY,KAAMC,QAASR,EAASQ,UAAoBR,MAAkB,OAClWP,EAAAA,cAA8B,MAAO,IAAIgB,cAA+B,CAAEd,UAAY,MAAOC,QAAS,KAAO,OAK7GN,KAAKoB,uBAAwB"}
\ No newline at end of file
+{"version":3,"file":"sw.js","sources":["../../../AppData/Local/Temp/6c896956b14b327be1d371c034d1e97a/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from 'C:/Users/교육생36/Desktop/blockpage_publish/FE-publishing/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkFirst as workbox_strategies_NetworkFirst} from 'C:/Users/교육생36/Desktop/blockpage_publish/FE-publishing/node_modules/workbox-strategies/NetworkFirst.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from 'C:/Users/교육생36/Desktop/blockpage_publish/FE-publishing/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from 'C:/Users/교육생36/Desktop/blockpage_publish/FE-publishing/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n  \n);\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(\"/\", new workbox_strategies_NetworkFirst({ \"cacheName\":\"start-url\", plugins: [{ cacheWillUpdate: async ({ request, response, event, state }) => { if (response && response.type === 'opaqueredirect') { return new Response(response.body, { status: 200, statusText: 'OK', headers: response.headers }) } return response } }] }), 'GET');\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\nself.__WB_DISABLE_DEV_LOGS = true;"],"names":["importScripts","self","skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkFirst","cacheName","plugins","cacheWillUpdate","async","request","response","event","state","type","Response","body","status","statusText","headers","workbox_strategies_NetworkOnly","__WB_DISABLE_DEV_LOGS"],"mappings":"0nBAgBAA,gBAUAC,KAAKC,cAELC,EAAAA,eAIAC,EAAAA,cAA8B,IAAK,IAAIC,eAAgC,CAAEC,UAAY,YAAaC,QAAS,CAAC,CAAEC,gBAAiBC,OAASC,UAASC,WAAUC,QAAOC,WAAkBF,GAA8B,mBAAlBA,EAASG,KAAoC,IAAIC,SAASJ,EAASK,KAAM,CAAEC,OAAQ,IAAKC,WAAY,KAAMC,QAASR,EAASQ,UAAoBR,MAAkB,OAClWP,EAAAA,cAA8B,MAAO,IAAIgB,cAA+B,CAAEd,UAAY,MAAOC,QAAS,KAAO,OAK7GN,KAAKoB,uBAAwB"}
\ No newline at end of file
diff --git a/types/commentDataType.ts b/types/commentDataType.ts
index b03360d..7c3bf23 100644
--- a/types/commentDataType.ts
+++ b/types/commentDataType.ts
@@ -4,6 +4,8 @@ export interface CommentDataType {
   dateTime: string;
   parentsId: string;
   parentsNickname: string;
+  profileImage: string;
+  profileSkin: string;
   childId?: string;
   childNickname?: string;
   content: string;