Merge pull request #16 from New-Syatte/ParkChoulMin/footer

Park choul min/footer
New-Syatte · Feb 22, 2024 · 0b100ba · 0b100ba
2 parents b3912f9 + 2eb1fd1
commit 0b100ba
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 34 deletions.
diff --git a/public/social_facebook.svg b/public/social_facebook.svg
diff --git a/public/social_instagram.svg b/public/social_instagram.svg
diff --git a/public/social_youtube.svg b/public/social_youtube.svg
diff --git a/public/syatt_footer_logo.svg b/public/syatt_footer_logo.svg
diff --git a/src/app/(brand)/modern-masters/page.tsx b/src/app/(brand)/modern-masters/page.tsx
@@ -52,7 +52,7 @@ const Modernmasters = () => {
   return (
     <>
       {/* 최상단 배너 영역 */}
-      <div className="flex w-full flex-col bg-[#F6F6F6] h-[890px]">
+      <div className="flex w-full flex-col bg-[#F6F6F6] min-h-[890px]">
         <div className="flex flex-col my-auto">
           <div className="flex">
             <div className="flex w-full justify-center items-center">
@@ -65,15 +65,15 @@ const Modernmasters = () => {
               <div className="flex text-[100px] font-[GmarketSansMedium] font-bold">
                 모던마스터즈
               </div>
-              <div className="flex text-[18px] max-w-[767px] h-[140px] mb-[36px]">
+              <div className="flex text-[18px] max-w-[767px] mr-[140px] mb-[36px]">
                 {TITLE_BANNER_TEXT}
               </div>
               <div className="flex text-[18px] w-[200px] h-[50px] border-[1px] border-[#000000] justify-center items-center cursor-pointer">
                 제품 더 알아보기
               </div>
             </div>
           </div>
-          <div className="flex w-full h-[246px] justify-between mt-[60px]">
+          <div className="flex w-full h-[246px] justify-between mt-[60px] overflow-hidden">
             <div className="flex items-center px-10 text-[24px] hover:bg-[#e5e5e5] cursor-pointer">
               <GrPrevious />
             </div>
@@ -116,15 +116,18 @@ const Modernmasters = () => {
             <div className="flex text-[70px] font-[GmarketSans] font-bold mb-[40px]">
               모던마스터즈
             </div>
-            <div className="flex w-[760px] text-[18px] mb-[40px]">
-              {MODERN_MASTERS_INFO_TEXT_1}
-            </div>
-            <div className="flex w-[760px] text-[18px] mb-[40px]">
-              {MODERN_MASTERS_INFO_TEXT_2}
-            </div>
-            <div className="flex w-[760px] text-[18px] mb-[50px]">
-              {MODERN_MASTERS_INFO_TEXT_3}
+            <div className="flex flex-col max-w-[760px] mr-10">
+              <div className="flex text-[18px] mb-[40px]">
+                {MODERN_MASTERS_INFO_TEXT_1}
+              </div>
+              <div className="fle] text-[18px] mb-[40px]">
+                {MODERN_MASTERS_INFO_TEXT_2}
+              </div>
+              <div className="flex text-[18px] mb-[50px]">
+                {MODERN_MASTERS_INFO_TEXT_3}
+              </div>
             </div>
+
             <div className="flex text-[24px] items-center cursor-pointer">
               STORE
               <div className="flex text-[20px] ml-2 pt-[1px]">

diff --git a/src/components/youTubeVideo/YouTubeVideo.tsx b/src/components/youTubeVideo/YouTubeVideo.tsx
@@ -10,8 +10,10 @@ interface Props {
 const YouTubeVideo = (urlId:Props) => {
   const data = urlId.urlId
   const opts = {
-    height: "360",
-    width: "650",
+    playerVars: {
+      // width를 100%로 설정하여 화면 크기를 100%로 만듭니다.
+      width: "100%",
+    },
   };
 
   const onReady = (event: any) => {
@@ -20,7 +22,7 @@ const YouTubeVideo = (urlId:Props) => {
 
   return (
     <div>
-      <YouTube videoId={data} opts={opts} onReady={onReady} className="flex"/>
+      <YouTube videoId={data} opts={opts} onReady={onReady} className="flex w-full"/>
     </div>
   );
 };

diff --git a/src/layouts/footer/Footer.module.scss b/src/layouts/footer/Footer.module.scss
@@ -1,12 +1,16 @@
 .container {
   width: 100%;
-  height: var(--footer-height);
-  background-color: black;
-  color: white;
   display: flex;
-  justify-content: center;
+  color: white;
   align-items: center;
+  justify-content: center;
+  background-color: black;
+  height: var(--footer-height);
   .footer {
-    width: var(--content-width);
+    width: 100%;
+    display: flex;
+    padding: 0 40px;
+    justify-content: space-between;
+    // width: var(--content-width);
   }
 }