Merge pull request #49 from Moaguide-develop/feat/mainpage

feat: 메인페이지 추가작업
Moaguide-develop · Oct 7, 2024 · 071cc6b · 071cc6b
2 parents 5d264f3 + 8d8a9bc
commit 071cc6b
Show file tree

Hide file tree

Showing 15 changed files with 56 additions and 46 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -9,6 +9,7 @@ const nextConfig = {
       'd2qf2amuam62ps.cloudfront.net',
       'scs-phinf.pstatic.net',
       'api.moaguide.com',
+      'entertain.naver.com',
     ],
   },
 

diff --git a/src/app/mypage/edit/page.tsx b/src/app/mypage/edit/page.tsx
@@ -170,7 +170,7 @@ const Editpage = () => {
         <div className="mt-5 pb-5 ">
           <div className="text-body4 flex justify-between items-center">
             <div>휴대폰 번호</div>
-            <div>{member.memberPhone}</div>
+            <div>{member?.memberPhone || '없음'}</div>
           </div>
           <div className=" flex justify-between text-gray400 text-body7 mt-5 pb-5 border-b border-gray100">
             <div className="flex-1" />

diff --git a/src/components/common/Gnb.tsx b/src/components/common/Gnb.tsx
@@ -44,7 +44,7 @@ const Gnb = () => {
           <div onClick={() => router.push('/search')} className="cursor-pointer">
             <img src="/images/gnb/search.svg" alt="search_icon" className="w-6 h-6" />
           </div>
-          <div
+          {/* <div
             onClick={() => {
               if (isLoggedIn) {
                 router.push('/sign');
@@ -54,6 +54,9 @@ const Gnb = () => {
             }}
             className="cursor-pointer">
             <img src="/images/gnb/alert.svg" alt="alert" className="w-6 h-6" />
+          </div> */}
+          <div className="cursor-pointer">
+            <img src="/images/gnb/alert.svg" alt="alert" className="w-6 h-6" />
           </div>
           <div className="hidden items-center min-h-[35px] sm:flex">
             {isLoggedIn ? (

diff --git a/src/components/home/HomeFooter.tsx b/src/components/home/HomeFooter.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 
 const HomeFooter = () => {
   return (
-    <div className="hidden mt-[158px] bg-bg mx-auto w-full sm:block">
-      <div className="flex justify-between items-center py-[52px] w-[90%] lg:w-full mx-auto desk:max-w-[1000px]">
+    <div className="mt-[100px] sm:mt-[158px] bg-bg mx-auto w-full sm:block">
+      <div className="flex flex-col sm:flex-row justify-start sm:justify-between sm:items-center py-[52px] w-[90%] lg:w-full mx-auto desk:max-w-[1000px]">
         {/* 왼쪽 */}
         <div className="flex flex-col gap-6">
           <div>
@@ -17,24 +17,33 @@ const HomeFooter = () => {
             <div>사업자등록번호 : 0000-00-00000</div>
             <div>통신판매업 번호 : 0000-0000-0000</div>
           </div>
-          <div className="mt-10 text-[16px] font-normal text-gray700 ">
+          <div className="hidden sm:flex mt-10 text-[16px] font-normal text-gray700 ">
             Copyright © 2024. MOA GUIDE. All Rights Reserved.
           </div>
         </div>
 
         {/* 오른쪽 */}
         <div className=''>
-          <div className="cursor-pointer flex gap-0 mx-auto justify-center px-[7px] md:px-[28px] md:gap-2 py-4 bg-white border border-gray200 rounded-[12px]">
+          <div className="w-[202.34px] my-8 sm:w-full sm:my-0 cursor-pointer flex gap-0 mr-auto sm:mx-auto justify-center px-[7px] md:px-[28px] md:gap-2 py-4 bg-white border border-gray200 rounded-[12px]">
             <div className="text-body5 text-gray400">카카오톡으로 1:1 문의</div>
             <div>
-              <img src="/images/home/footer_right.svg" alt="" />
+              <img src="/images/home/footer_right.svg" alt="" className='ml-2 sm:ml-0'/>
             </div>
           </div>
-          <div className="flex flex-col md:flex-row gap-3 text-body1 text-gray300 mt-[165px]">
+          <div className="hidden sm:flex flex-col md:flex-row gap-3 text-body1 text-gray300 mt-0 sm:mt-[165px]">
             <div className="cursor-pointer">개인정보처리방침</div>
             <div className="hidden md:block">|</div>
             <div className="cursor-pointer">이용약관</div>
           </div>
+          <div className="flex sm:hidden flex-row md:flex-row gap-3 text-body1 text-gray300">
+            <div className="cursor-pointer">개인정보처리방침</div>
+            <div className="">|</div>
+            <div className="cursor-pointer">이용약관</div>
+          </div>
+
+          <div className="flex sm:hidden mt-8 text-[16px] font-normal text-gray700 ">
+            Copyright © 2024. MOA GUIDE. All Rights Reserved.
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/components/home/IssueItem.tsx b/src/components/home/IssueItem.tsx
@@ -6,13 +6,13 @@ import Image from 'next/image';
 import Link from 'next/link';
 import React from 'react';
 
-const IssueItem = ({ id, title, category, link, date }: MainNews) => {
+const IssueItem = ({ id, title, category, link, imgUrl, date }: MainNews) => {
   return (
     <Link href={link} target="_blank">
       <div className="flex flex-col gap-4 cursor-pointer">
         <div>
           <img
-            src={`https://d2qf2amuam62ps.cloudfront.net/img/${id}.jpg`}
+            src={imgUrl}
             alt="Image"
             className="w-[195px] h-[108px] sm:w-[336px] sm:h-[186px] rounded-[12px]"
           />

diff --git a/src/components/home/MainReport.tsx b/src/components/home/MainReport.tsx
@@ -53,6 +53,8 @@ const MainReport = () => {
               date={item.date}
               category={item.category}
               id={item.id}
+              imageLink={item.imageLink}
+              description={item.description}
             />
           ))
         )}

diff --git a/src/components/home/MainReportItem.tsx b/src/components/home/MainReportItem.tsx
@@ -4,7 +4,7 @@ import { formatCategory } from '@/utils/formatCategory';
 import { format, parseISO } from 'date-fns';
 import React from 'react';
 
-const MainReportItem = ({ category, title, date, id }: MainReportType) => {
+const MainReportItem = ({ category, title, date, id, description, imageLink }: MainReportType) => {
   return (
     <div className="mt-5 pb-5 border-b border-gray100 flex items-center gap-5 cursor-pointer">
       {/* 왼쪽 */}
@@ -13,16 +13,17 @@ const MainReportItem = ({ category, title, date, id }: MainReportType) => {
           {formatCategory(category)}
         </div>
         <div className="text-mobileTitle sm:text-title2 text-gray600">{title}</div>
+        <div className='text-gray300 text-caption3 sm:text-body7 line-clamp-3 flex-grow'>{description}</div>
         <div className="text-body7 text-gray300">
           {format(parseISO(date), 'yyyy.MM.dd')}
         </div>
       </div>
       {/* 오른쪽 */}
-      <div>
+      <div className='h-full'>
         <img
-          src={'/images/home/mock.jpeg'}
-          alt=""
-          className="w-[90px] h-[75px] sm:w-[132px] sm:h-[93px] rounded-[8px]"
+          src={imageLink}
+          alt="img"
+          className="w-[90px] h-[75px] sm:w-[132px] sm:h-[93px] rounded-[8px] mb-auto"
         />
       </div>
     </div>

diff --git a/src/components/home/SubMenu.tsx b/src/components/home/SubMenu.tsx
@@ -32,10 +32,10 @@ const SubMenu = () => {
         </div>
         <div
           onClick={() => {
-            router.push('/reportpage');
+            router.push('/practicepage');
           }}
           className="cursor-pointer flex-1 flex items-center justify-between px-[16px] md:px-[28px] py-[22px] rounded-[12px] bg-bg">
-          <div className=" text-body5 text-gray700 desk2:text-title2">리포트</div>
+          <div className=" text-body5 text-gray700 desk2:text-title2">학습하기</div>
           <div>
             <img src="/images/home/paper.svg" alt="paper" className="w-10 desk2:w-full" />
           </div>
@@ -65,13 +65,13 @@ const SubMenu = () => {
         </div>
         <div
           onClick={() => {
-            router.push('/reportpage');
+            router.push('/practicepage');
           }}
           className="max-w-[110px] w-full py-4 flex flex-col justify-center items-center gap-3  rounded-[12px] border border-gray100">
           <div>
             <img src="/images/home/paper.svg" alt="paper" className="w-10 desk2:w-full" />
           </div>
-          <div className="text-mobileTitle text-gray700">리포트</div>
+          <div className="text-mobileTitle text-gray700">학습하기</div>
         </div>
       </div>
     </div>

diff --git a/src/components/practice/CategoryPractice.tsx b/src/components/practice/CategoryPractice.tsx
@@ -79,7 +79,7 @@ const CategoryPractice = () => {
           <Virtuoso
             style={{ height: 'calc(100vh - 50px)', margin: '0px' }}
             useWindowScroll
-            totalCount={subCategory === 'guide' ? allPosts.length : Math.ceil(allPosts.length / 2)} 
+            totalCount={allPosts.length}
             data={allPosts}
             endReached={loadMore}
             itemContent={(index, item) => {

diff --git a/src/components/sign/SignLayout.tsx b/src/components/sign/SignLayout.tsx
@@ -12,6 +12,7 @@ const SignLayout = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [errorMessage, setErrorMessage] = useState('');
+  const [rememberMe, setRememberMe] = useState(false); 
   const [loginType, setLoginType] = useState<'local' | 'naver' | 'google' | 'kakao'>('local'); 
   const router = useRouter();
   const { isLoggedIn, setIsLoggedIn } = useAuthStore();  
@@ -23,19 +24,10 @@ const SignLayout = () => {
     }
   }, [isLoggedIn, router]);
 
-
   const throttledHandleLogin = throttle(async () => {
     try {
-      const response = await login(email, password);
+      await login(email, password, rememberMe);
       setIsLoggedIn(true);
-
-      const userInfo = response.user;
-      setMember({
-        memberEmail: userInfo.email,
-        memberNickName: userInfo.nickname,
-        memberPhone: userInfo.phoneNumber,
-        loginType: 'local',
-      });
 
       setErrorMessage('');  
 
@@ -46,7 +38,6 @@ const SignLayout = () => {
     }
   }, 1000);
 
-
   return (
     <div className="min-h-[calc(100dvh-100px)] mb-[100px] flex flex-col items-center justify-center sm:min-h-[100vh] sm:mb-0">
       <section className="flex mt-8 mb-6">
@@ -79,6 +70,8 @@ const SignLayout = () => {
           <input 
             type="checkbox" 
             id="rememberMe" 
+            checked={rememberMe} 
+            onChange={(e) => setRememberMe(e.target.checked)}
             className="mr-2"
           />
           <label htmlFor="rememberMe" className="text-sm text-gray-700">

diff --git a/src/components/skeleton/SubLoadmapBottomArticleSkeleton.tsx b/src/components/skeleton/SubLoadmapBottomArticleSkeleton.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 
 const SubLoadmapBottomArticleSkeleton = () => {
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 gap-8 w-full">
+    <div className="grid grid-cols-1 sm:grid-cols-2 gap-0 sm:gap-8 w-full">
       {/* 첫 번째 스켈레톤 */}
-      <div className='py-5'>
+      <div className='pt-5'>
         <div className='flex gap-5 items-center cursor-pointer animate-pulse'>
           <div>
             <div className="w-[70px] h-[70px] bg-gray200 rounded-[8px]"></div>
@@ -19,7 +19,7 @@ const SubLoadmapBottomArticleSkeleton = () => {
       </div>
 
       {/* 두 번째 스켈레톤 */}
-      <div className='py-5'>
+      <div className='pt-5'>
         <div className='flex gap-5 items-center cursor-pointer animate-pulse'>
           <div>
             <div className="w-[70px] h-[70px] bg-gray200 rounded-[8px]"></div>

diff --git a/src/factory/ReportIssue.ts b/src/factory/ReportIssue.ts
@@ -4,6 +4,7 @@ import axios from 'axios';
 
 const fetchReportIssues = async () => {
   const { data } = await axios.get(`https://api.moaguide.com/`);
+  console.log('최신이슈', data);
   return data;
 };
 

diff --git a/src/factory/ReportLists.ts b/src/factory/ReportLists.ts
@@ -2,14 +2,11 @@ import { useInfiniteQuery } from '@tanstack/react-query';
 import axios from 'axios';
 
 const fetchStudyGuides = async ({ pageParam = 1 }) => {
-  const { data } = await axios.get(`https://api.moaguide.com/study/guide?page=${pageParam}&size=10`);
+  const { data } = await axios.get(`https://api.moaguide.com/study/guide`);
   return {
     content: data.roadmap, 
     nextPage: pageParam + 1,
-    totalPages: data.total,
-    totalElements: data.roadmap.length, 
-    currentPage: data.page,
-    isLast: data.page + 1 >= data.total,
+    isLast: data.roadmap.length < 10 || !data.roadmap.length || data.nextCursor === null,
   };
 };
 

diff --git a/src/service/auth.ts b/src/service/auth.ts
@@ -64,14 +64,15 @@ export const finalSignup = async (
   }
 };
 
-// 토큰 사용하는 API 함수들
-export const login = async (email: string, password: string) => {
+export const login = async (email: string, password: string, rememberMe: boolean) => {
   try {
     const formData = new FormData();
     formData.append('email', email);
     formData.append('password', password);
 
-    const response = await basicAxiosInstance.post('/login', formData, {
+    const url = `/login?rememberMe=${rememberMe}`;
+
+    const response = await basicAxiosInstance.post(url, formData, {
       headers: {
         'Content-Type': 'multipart/form-data',
       },
@@ -88,7 +89,6 @@ export const login = async (email: string, password: string) => {
     setToken(accessToken);  
     console.log('Access Token 저장 성공:', accessToken);
 
-    // 사용자 정보 업데이트
     const { setMember } = useMemberStore.getState();
     const userInfo = response.data.user;
     if (!userInfo) {
@@ -203,13 +203,13 @@ export const deleteUser = async () => {
 
       const { clearMember } = useMemberStore.getState();
       clearMember();
-      return response;  // 반환값 추가
+      return response;  
     } else {
       console.error('회원탈퇴 실패', response.status);
-      return response;  // 실패 시에도 response 반환
+      return response; 
     }
   } catch (error) {
     console.error('회원탈퇴 오류:', error);
-    throw error;  // 에러를 호출한 함수로 throw하여 catch하도록 함
+    throw error; 
   }
 };
diff --git a/src/types/homeComponentsType.ts b/src/types/homeComponentsType.ts
@@ -3,6 +3,8 @@ export interface MainReportType {
   title: string;
   category: string;
   date: string;
+  imageLink: string;
+  description: string;
 }
 
 export interface MainNews {
@@ -11,6 +13,7 @@ export interface MainNews {
   category: string;
   link: string;
   date: string;
+  imgUrl: string;
 }
 
 export interface MainReportNewsType {