feat: 학습하기 탭 ui, 마이페이지 ui 변경

next.config.mjs

@@ -4,15 +4,20 @@ const nextConfig = {
   reactStrictMode: true,
 
   images: {
-    domains: ['www.kobis.or.kr', 'd2qf2amuam62ps.cloudfront.net']
+    domains: [
+      'www.kobis.or.kr',
+      'd2qf2amuam62ps.cloudfront.net',
+      'scs-phinf.pstatic.net',
+      'api.moaguide.com',
+    ],
   },
+
   swcMinify: true,
+
   compiler: {
-    styledComponents: true
-  },
-  images: {
-    domains: ['api.moaguide.com'], 
+    styledComponents: true,
   },
+
   webpack: (config, { isServer }) => {
     if (isServer) {
       if (Array.isArray(config.resolve.alias))
@@ -24,7 +29,7 @@ const nextConfig = {
       else config.resolve.alias['msw/node'] = false;
     }
     return config;
-  }
+  },
 };
 
 export default nextConfig;

src/app/mypage/edit/page.tsx

@@ -1,12 +1,12 @@
 'use client';
 import { useModalStore } from '@/store/modal.store';
 import { useMemberStore } from '@/store/user.store';
-import { checkEmail } from '@/utils/checkEmail';
 import { useRouter } from 'next/navigation';
 import React, { ChangeEvent, useEffect, useState } from 'react';
 import { disablePageScroll, enablePageScroll } from 'scroll-lock';
 import { checkNicknameAvailability } from '@/service/auth';
 import { updateNickname } from '@/service/change';
+import { getSocialInfo } from '@/utils/checkEmail';
 
 const Editpage = () => {
   const router = useRouter();
@@ -17,6 +17,8 @@ const Editpage = () => {
   const [isNameComplete, setIsNameComplete] = useState('');
   const { setModalType, setOpen, open } = useModalStore();
 
+  const socialInfo = getSocialInfo(member.loginType, member.memberEmail); 
+
   const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => {
     const regex = e.target.value.replace(/[^a-zA-Z0-9ㄱ-ㅎㅏ-ㅣ가-힣]/g, '');
     setNameValue(regex);
@@ -136,9 +138,9 @@ const Editpage = () => {
         <div className="mt-5 text-body4">
           <div className="flex justify-between items-center">
             <div>이메일</div>
-            <div className="flex items-center gap-[6px]">
-              <img src="/images/mypage/social.svg" alt="" />
-              <div>{checkEmail(member?.memberEmail)} 가입</div>
+            <div className="flex items-center gap-[8px]">
+              {socialInfo.imgSrc && <img src={socialInfo.imgSrc} alt="socialLogo" width={18} height={18}/>}
+              <div>{socialInfo.platform} 가입</div>
             </div>
           </div>
           <div className=" flex justify-between mt-[13px] pb-5 border-b border-gray100">

src/components/mypage/MypageHeader.tsx

@@ -21,22 +21,14 @@ const MypageHeader = () => {
         </div>
       </div>
       <div className="flex justify-between items-center px-[21px] py-[25px] bg-gradient2 rounded-[12px]">
-        <div className="text-white text-title1">{member.subscribe} 이용 중</div>
-        <div>
-          <img src="/images/mypage/right_white.svg" alt="" className="cursor-pointer" />
+        <div className='flex items-center gap-[14px]'>
+          <img src="/images/mypage/bookmark-white.svg" alt="" />
+          <div className="text-white text-title1">관심종목</div>
         </div>
-      </div>
-      <div className="flex justify-between items-center p-5">
-        <div className="flex items-center gap-[14px]">
-          <div>
-            <img src="/images/mypage/bookmark.svg" alt="" />
-          </div>
-          <div className="text-body1 text-gray700">관심종목</div>
-        </div>
-        <div className="flex items-center gap-[14px]">
-          <div className="text-normal text-body1">24개</div>
-          <div>
-            <img src="/images/mypage/right_gray.svg" alt="" className="cursor-pointer" />
+        <div>
+          <div className='flex items-center gap-[14px]'>
+            <div className="text-normal text-white">24개</div>
+            <img src="/images/mypage/right_white.svg" alt="" className="cursor-pointer" />
           </div>
         </div>
       </div>

src/components/mypage/MypageMenu.tsx

@@ -3,22 +3,6 @@ import React from 'react';
 const MypageMenu = () => {
   return (
     <div className="mt-5 flex flex-col">
-      {/* 구독 관리 */}
-      <div className="flex items-center justify-between px-5 py-6">
-        <div className="flex items-center gap-[14px]">
-          <div>
-            <img src="/images/mypage/tag.svg" alt="구독" />
-          </div>
-          <div className="text-gray700 text-body1">구독 관리</div>
-        </div>
-        <div>
-          <img
-            src="/images/mypage/right_menu.svg"
-            alt="구독"
-            className="cursor-pointer"
-          />
-        </div>
-      </div>
       {/* 공지사항 */}
       <div className="flex items-center justify-between px-5 py-6">
         <div className="flex items-center gap-[14px]">
@@ -35,22 +19,6 @@ const MypageMenu = () => {
           />
         </div>
       </div>
-      {/* 쿠폰 관리 */}
-      <div className="flex items-center justify-between px-5 py-6">
-        <div className="flex items-center gap-[14px]">
-          <div>
-            <img src="/images/mypage/ticket.svg" alt="쿠폰" />
-          </div>
-          <div className="text-gray700 text-body1">쿠폰 관리</div>
-        </div>
-        <div>
-          <img
-            src="/images/mypage/right_menu.svg"
-            alt="쿠폰"
-            className="cursor-pointer"
-          />
-        </div>
-      </div>
       {/* 알림 설정 */}
       <div className="flex items-center justify-between px-5 py-6">
         <div className="flex items-center gap-[14px]">
@@ -67,22 +35,6 @@ const MypageMenu = () => {
           />
         </div>
       </div>
-      {/* 결제 관리 */}
-      <div className="flex items-center justify-between px-5 py-6">
-        <div className="flex items-center gap-[14px]">
-          <div>
-            <img src="/images/mypage/card.svg" alt="결제" />
-          </div>
-          <div className="text-gray700 text-body1">결제 관리</div>
-        </div>
-        <div>
-          <img
-            src="/images/mypage/right_menu.svg"
-            alt="결제"
-            className="cursor-pointer"
-          />
-        </div>
-      </div>
       {/* 카카로톡 1:1 문의 */}
       <div className="flex items-center justify-between px-5 py-6">
         <div className="flex items-center gap-[14px]">

src/components/practice/CategoryPractice.tsx

@@ -1,21 +1,46 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import { useReportStore } from '@/store/report.store';
 import { Virtuoso } from 'react-virtuoso';
 import { getStudyGuides, getArticles } from '@/factory/ReportLists';
 import CategoryPracticeItem from './CategoryPracticeItem';
 import CategoryPracticeItemSkeleton from '../skeleton/CategoryPracticeItemSkeleton';
 import SubLoadmapBottomArticleSkeleton from '../skeleton/SubLoadmapBottomArticleSkeleton';
-import CategorySubloadmapBottomArticle from './CategorySubloadmapBottomArticle'; 
+import CategorySubloadmapBottomArticle from './CategorySubloadmapBottomArticle';
 
 const CategoryPractice = () => {
   const { currentCategory, subCategory, sort, setSubCategory } = useReportStore();
+  const [showSkeleton, setShowSkeleton] = useState(true);
+  const [guideLoaded, setGuideLoaded] = useState(false);  
+  const [articleLoaded, setArticleLoaded] = useState(false);  
 
   const {
     data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, isLoading
   } = subCategory === 'guide' 
       ? getStudyGuides(currentCategory, subCategory, sort) 
       : getArticles(); 
 
+  useEffect(() => {
+    if (subCategory === 'guide' && !guideLoaded) {
+      setShowSkeleton(true);
+      const timer = setTimeout(() => {
+        setShowSkeleton(false);
+        setGuideLoaded(true);  
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+
+    if (subCategory === 'article' && !articleLoaded) {
+      setShowSkeleton(true);
+      const timer = setTimeout(() => {
+        setShowSkeleton(false);
+        setArticleLoaded(true);  
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+
+    setShowSkeleton(false);
+  }, [subCategory, guideLoaded, articleLoaded]);
+
   const loadMore = useCallback(() => {
     if (hasNextPage && !isFetching && !isFetchingNextPage && !isLoading) {
       setTimeout(() => {
@@ -33,37 +58,65 @@ const CategoryPractice = () => {
           onClick={() => setSubCategory('guide')} 
           className={`pb-5 cursor-pointer ${subCategory === 'guide' ? ' text-gray700 border-b-2 border-normal ' : 'text-gray300'}`}
         >
-          투자 가이드
+          조각투자 가이드
         </div>
         <div 
           onClick={() => setSubCategory('article')} 
           className={`pb-5 cursor-pointer ${subCategory === 'article' ? ' text-gray700 border-b-2 border-normal ' : 'text-gray300'}`}
         >
-          아티클
+          재테크 가이드
         </div>
       </div>
 
       <div>
-        {isLoading ? (
+        {showSkeleton || isLoading ? ( 
           subCategory === 'guide' ? (
-            Array.from({ length: 3 }).map((_, i) => <CategoryPracticeItemSkeleton key={i} />) 
+            Array.from({ length: 10 }).map((_, i) => <CategoryPracticeItemSkeleton key={i} />) 
           ) : (
             Array.from({ length: 10 }).map((_, i) => <SubLoadmapBottomArticleSkeleton key={i} />)
           )
         ) : (
           <Virtuoso
             style={{ height: 'calc(100vh - 50px)', margin: '0px' }}
             useWindowScroll
-            totalCount={allPosts.length}
+            totalCount={subCategory === 'guide' ? allPosts.length : Math.ceil(allPosts.length / 2)} 
             data={allPosts}
             endReached={loadMore}
-            itemContent={(index, item) => (
-              subCategory === 'guide' ? (
-                <CategoryPracticeItem key={item.id} {...item} />
-              ) : (
-                <CategorySubloadmapBottomArticle key={item.id} data={item} isTop={false} isBottom={false} />
-              )
-            )}
+            itemContent={(index, item) => {
+              if (subCategory === 'guide') {
+                return <CategoryPracticeItem key={item.id} {...item} />;
+              } else {
+                const firstItem = allPosts[index * 2];
+                const secondItem = allPosts[index * 2 + 1];
+
+                return (
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
+                    {firstItem && (
+                      <CategorySubloadmapBottomArticle
+                        key={firstItem.id}
+                        id={firstItem.id}
+                        title={firstItem.title}
+                        description={firstItem.description}
+                        imageLink={firstItem.imageLink}
+                        date={firstItem.date}
+                        link={firstItem.link}
+                      />
+                    )}
+                    {secondItem && (
+                      <CategorySubloadmapBottomArticle
+                        key={secondItem.id}
+                        id={secondItem.id}
+                        title={secondItem.title}
+                        description={secondItem.description}
+                        imageLink={secondItem.imageLink}
+                        date={secondItem.date}
+                        link={secondItem.link}
+                      />
+                    )}
+                  </div>
+                );
+              }
+            }}
           />
         )}
       </div>