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

feat: 메인페이지

src/app/mypage/edit/changepassword/page.tsx

@@ -19,7 +19,7 @@ const ChangePasswordPage = () => {
   }, [isLoggedIn, router]);
 
   return (
-    <div>
+    <div className='min-h-[calc(100dvh-160px)] mb-[20px] sm:mb-0'>
       <div className="w-[90%] mt-5 w-full mx-auto max-w-[340px] sm:max-w-[640px] sm:mt-10 sm:px-0">
         {step === 2 ? null : (
           <div onClick={() => router.back()} className="py-[14px]">

src/app/mypage/edit/changephone/page.tsx

@@ -139,7 +139,7 @@ const ChangePhonePage = () => {
   }, [isError]);
 
   return (
-    <div>
+    <div className='min-h-[calc(100dvh-160px)] mb-[20px] sm:mb-0'>
       <div className="w-[90%] mt-5 w-full mx-auto max-w-[340px] sm:max-w-[640px] sm:mt-10 sm:px-0">
         <div onClick={() => router.back()} className="py-[14px]">
           <img src="/images/mypage/left_password.svg" alt="" className="cursor-pointer" />

src/app/mypage/edit/page.tsx

@@ -84,7 +84,7 @@ const Editpage = () => {
   }, [open]);
 
   return (
-    <div className="px-5 mt-5 w-full mx-auto sm:max-w-[640px] sm:mt-10 sm:px-0">
+    <div className="min-h-[calc(100dvh-160px)] mb-[20px] sm:mb-0 px-5 mt-5 w-full mx-auto sm:max-w-[640px] sm:mt-10 sm:px-0">
       <div onClick={() => router.back()} className="py-[14px]">
         <img src="/images/mypage/left.svg" alt="" className="cursor-pointer" />
       </div>
@@ -206,7 +206,6 @@ const Editpage = () => {
           </div>
         )}
       </div>
-      <div className="h-[140px]" />
     </div>
   );
 };

src/app/mypage/page.tsx

@@ -44,7 +44,7 @@ const Mypage = () => {
   }
 
   return (
-    <div className="px-5 mt-5 w-full mx-auto sm:max-w-[640px] sm:mt-10 sm:px-0">
+    <div className="min-h-[calc(100dvh-160px)] flex flex-col sm:min-h-[calc(100vh-160px)] sm:mb-0 mt-5 w-[90%] mx-auto sm:max-w-[640px] sm:mt-10">
       <header>
         <MypageHeader />
       </header>
@@ -57,7 +57,6 @@ const Mypage = () => {
       >
         <span className="max-w-max">로그아웃</span>
       </div>
-      <div className="h-[140px]" />
     </div>
   );
 };

src/app/practicepage/page.tsx

@@ -3,7 +3,7 @@ import PracticeIndex from '@/components/practice/PracticeIndex';
 
 const PracticePage = () => {
   return (
-    <div>
+    <div className='min-h-[calc(100dvh-100px)] flex flex-col sm:min-h-[100vh] sm:mb-0'>
       <Navbar />
       <PracticeIndex />
     </div>

src/components/home/Guide.tsx

@@ -3,12 +3,12 @@ import React from 'react';
 
 const Guide = () => {
   return (
-    <div className="mx-auto flex-1 rounded-[12px] h-[200px] sm:max-w-[692px] w-full sm:h-[290px] bg-[url('/images/home/guide.svg')] desk:min-w-[390px]">
-      <div className="text-white text-heading3 sm:text-heading1 mt-[76px] sm:mt-[117px] ml-11">
+    <div className="mx-auto flex-1 rounded-[12px] h-[200px] sm:max-w-[692px] w-full sm:h-[290px] bg-[url('/images/home/guide.svg')]">
+      <div className="text-white text-heading3 sm:text-heading1 mt-[76px] sm:mt-[117px] ml-5 md:ml-11">
         <div>투자 가이드로</div>
         <div>소액 투자 시작해보자!</div>
       </div>
-      <div className="flex items-center gap-1 ml-11 mt-5 cursor-pointer max-w-max">
+      <div className="flex items-center gap-1 ml-5 md:ml-11 mt-5 cursor-pointer max-w-max">
         <div className="text-white text-body7 sm:text-body2">가이드 보러가기</div>
         <div>
           <img src="/images/home/guide_right.svg" alt="guide_right" />

src/components/home/HomeFooter.tsx

@@ -4,7 +4,7 @@ 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-full mx-auto desk:max-w-[1000px]">
+      <div className="flex justify-between items-center py-[52px] w-[90%] lg:w-full mx-auto desk:max-w-[1000px]">
         {/* 왼쪽 */}
         <div className="flex flex-col gap-6">
           <div>
@@ -23,16 +23,16 @@ const HomeFooter = () => {
         </div>
 
         {/* 오른쪽 */}
-        <div>
-          <div className="cursor-pointer flex gap-2 px-[28px] py-4 bg-white border border-gray200 rounded-[12px]">
+        <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="text-body5 text-gray400">카카오톡으로 1:1 문의</div>
             <div>
               <img src="/images/home/footer_right.svg" alt="" />
             </div>
           </div>
-          <div className="flex gap-3 text-body1 text-gray300 mt-[165px]">
+          <div className="flex flex-col md:flex-row gap-3 text-body1 text-gray300 mt-[165px]">
             <div className="cursor-pointer">개인정보처리방침</div>
-            <div>|</div>
+            <div className="hidden md:block">|</div>
             <div className="cursor-pointer">이용약관</div>
           </div>
         </div>

src/components/home/Index.tsx

@@ -13,7 +13,7 @@ import MoblieRank from './MoblieRank';
 const HomeIndex = () => {
   return (
     <div className="overflow-x-hidden">
-      <section className="max-w-[1000px] mx-auto flex items-center desk:min-w-[390px] gap-[28px] sm:mt-[29px] w-[90%] lg:w-[100%]">
+      <section className="max-w-[1000px] mx-auto flex items-center justify-center gap-[28px] sm:mt-[29px] w-[90%] lg:w-[100%]">
         <Guide />
         <RealtimeRank />
       </section>

src/components/home/MainList.tsx

@@ -13,7 +13,7 @@ const MainList = () => {
   return (
     <div>
       {/* title */}
-      <div className="flex items-center justify-between px-5 sm:px-0">
+      <div className="flex items-center justify-between">
         <div className="text-heading4">주요 상품 현황</div>
         <div
           onClick={() => {
@@ -24,7 +24,7 @@ const MainList = () => {
         </div>
       </div>
       {/* nav */}
-      <div className="mt-5 sm:mt-8 flex justify-between sm:justify-start items-center gap-5 border-b border-gray100 text-mobileTitle sm:text-title2 px-5 sm:px-0">
+      <div className="mt-5 sm:mt-8 flex items-center gap-5 border-b border-gray100 text-mobileTitle sm:text-title2 overflow-x-auto whitespace-nowrap">
         <div
           onClick={() => {
             setCategory('all');
@@ -69,7 +69,7 @@ const MainList = () => {
         </div>
       </div>
       {/* item */}
-      <div className="px-5 sm:px-0">
+      <div className="">
         {isLoading
           ? Array.from({ length: 3 }).map((_, i) => <MainListItemSkeleton key={i} />)
           : data?.map((item, i) => <MainListItem key={i} {...item} />)}

src/components/home/MainListItem.tsx

@@ -1,6 +1,7 @@
 import type { MainProductItem } from '@/types/homeComponentsType';
 
 import { formatCategory } from '@/utils/formatCategory';
+import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import React from 'react';
 
@@ -23,11 +24,13 @@ const MainListItem = ({
       <div className="flex gap-4 sm:gap-5">
         {/* 이미지 */}
         <div>
-          <img
-            src={'/images/home/mock.jpeg'}
-            alt=""
-            className="w-[82px] h-[82px] rounded-[8px]"
-          />
+        <Image
+          src={`https://d2qf2amuam62ps.cloudfront.net/img/${product_Id}.jpg`}
+          width={82}
+          height={82}
+          alt="Profile Image"
+          className='rounded-[8px] object-cover w-[82px] h-[82px]'
+        />
         </div>
         {/* 메인정보 */}
         <div className="flex-1 flex flex-col gap-[10px]">

src/components/home/MainReport.tsx

@@ -12,7 +12,7 @@ const MainReport = () => {
   const router = useRouter();
 
   return (
-    <div className="px-5 sm:px-0">
+    <div className="">
       {/* 타이틀 */}
       <div className="flex items-center justify-between">
         <div className="text-heading4">주요 리포트</div>

src/components/home/MoblieRank.tsx

@@ -30,7 +30,7 @@ const MoblieRank = () => {
   }, [data]);
 
   return (
-    <div className="sm:hidden px-5 py-[28px]">
+    <div className="sm:hidden py-[28px]">
       <div className="text-heading4">실시간 검색 순위</div>
       <div className="mt-[28px]">
         {isLoading ? (

src/components/home/RealtimeRank.tsx

@@ -17,9 +17,9 @@ const RealtimeRank = () => {
   }
 
   return (
-    <div className="max-w-[280px] w-full h-[291px] hidden desk2:block">
+    <div className="max-w-[280px] w-full h-[291px] hidden sm:block">
       <div className="flex flex-col gap-5">
-        <div className="mt-1 text-body5 text-black desk2:text-heading4">
+        <div className="mt-1 text-body5 text-black sm:text-heading4">
           실시간 검색 순위
         </div>
         <div className="p-5 shadow-custom-normal rounded-[12px] flex-1">

src/components/home/RecentlyIssue.tsx

@@ -10,7 +10,7 @@ const RecentlyIssue = () => {
   const router = useRouter();
 
   return (
-    <div className="px-5 pb-[120px] sm:px-0 sm:pb-0">
+    <div className="pb-[50px] sm:pb-0">
       {/* 타이틀 */}
       <div className="flex items-center justify-between">
         <div className="text-heading4">최신 이슈</div>

src/components/home/SubMenu.tsx

@@ -12,7 +12,7 @@ const SubMenu = () => {
           onClick={() => {
             router.push('/newissue');
           }}
-          className="cursor-pointer flex-1 flex items-center justify-between px-[28px] py-[22px] rounded-[12px] bg-bg">
+          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>
             <img src="/images/home/phone.svg" alt="phone" className="w-10 desk2:w-full" />
@@ -22,7 +22,7 @@ const SubMenu = () => {
           onClick={() => {
             router.push('/product');
           }}
-          className="cursor-pointer flex-1 flex items-center justify-between px-[28px] py-[22px] rounded-[12px] bg-bg">
+          className="cursor-pointer flex-1 flex items-center justify-between px-[16px] md:px-[28px] py-[22px] rounded-[12px] bg-bg">
           <div className=" text-caption1 text-gray700 desk2:text-title2">
             조각투자 상품
           </div>
@@ -34,7 +34,7 @@ const SubMenu = () => {
           onClick={() => {
             router.push('/reportpage');
           }}
-          className="cursor-pointer flex-1 flex items-center justify-between px-[28px] py-[22px] rounded-[12px] bg-bg">
+          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>
             <img src="/images/home/paper.svg" alt="paper" className="w-10 desk2:w-full" />
@@ -47,7 +47,7 @@ const SubMenu = () => {
           onClick={() => {
             router.push('/newissue');
           }}
-          className="max-w-[110px] w-full px-[27px] py-4 flex flex-col justify-center items-center gap-3   rounded-[12px] border border-gray100">
+          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/phone.svg" alt="phone" className="w-10 desk2:w-full" />
           </div>
@@ -57,7 +57,7 @@ const SubMenu = () => {
           onClick={() => {
             router.push('/product');
           }}
-          className="max-w-[110px] w-full px-[16px] py-4 flex flex-col justify-center items-center gap-3  rounded-[12px] border border-gray100">
+          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/box.svg" alt="box" className="w-10 desk2:w-full" />
           </div>
@@ -67,7 +67,7 @@ const SubMenu = () => {
           onClick={() => {
             router.push('/reportpage');
           }}
-          className="max-w-[110px] w-full px-[27px] py-4 flex flex-col justify-center items-center gap-3  rounded-[12px] border border-gray100">
+          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>