Merge pull request #34 from flowerseok/style/QA2

[style] 로딩페이지 광고 추가구현

components/matchingtest/Loading.tsx

@@ -1,7 +1,15 @@
-import { Loading1, Loading2, Loading3, Loading4 } from '@/public/images';
+import {
+  Loading1,
+  Loading2,
+  Loading3,
+  Loading4,
+  Orange,
+} from '@/public/images';
 import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import Header from '@/components/matchingtest/Header';
+import Image from 'next/image';
+import Link from 'next/link';
 
 interface LoadingPageProps {
   setIsDone: React.Dispatch<React.SetStateAction<boolean>>;
@@ -49,9 +57,39 @@ const Loading = ({ setIsDone }: LoadingPageProps) => {
       <div className="flex justify-center items-center mt-[126px] mb-[110px]">
         {icons[currentIconIndex]}
       </div>
-      <div className="border text-[#909090] text-2xl border-acodegray-100 bg-acodegray-100 flex justify-center items-center h-[106px]">
-        광고
-      </div>
+      <Link
+        href="https://www.instagram.com/p/C2ubAbGvtYB/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA=="
+        className="relative shrink-0 w-full h-[106px] text-acodewhite flex flex-col overflow-hidden"
+        target="_blank"
+      >
+        <Image
+          src={Orange}
+          className="h-[106px] w-full"
+          alt="loading ad"
+          height={106}
+          quality={50}
+        />
+        <span className="absolute font-bold w-full h-full h2 mt-[26px] pl-[16px]">
+          하늘 아래
+          <br />
+          같은 오렌지는 없다
+        </span>
+        <span className="absolute caption1 text-[#DBDBDB] w-full h-full flex mt-[26px] pr-[16px] justify-end items-cencter">
+          더 보러 가기
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            fill="none"
+          >
+            <path
+              d="M12.129 8.24952L8.106 4.22652L9.1665 3.16602L15 8.99952L9.1665 14.833L8.106 13.7725L12.129 9.74952H3V8.24952H12.129Z"
+              fill="#DBDBDB"
+            />
+          </svg>
+        </span>
+      </Link>
     </div>
   );
 };

public/images/index.ts

@@ -82,6 +82,34 @@ export { default as Fruit } from './fruit.jpg';
 export { default as Testing } from './testing.svg';
 
 export { default as AcodeLogo } from './AcodeLogo.svg';
+
+export { default as Loading1} from './Loading1.svg';
+export { default as Loading2} from './Loading2.svg';
+export { default as Loading3} from './Loading3.svg';
+export { default as Loading4} from './Loading4.svg';
+
+export { default as Klogo} from './klogo.svg';
+export { default as LinkLogo} from './linklogo.svg';
+export {default as AcodeLogoSmallBlack} from './AcodeLogobaby.svg';
+export {default as RealArrow} from './realArrow.svg';
+
+
+export { default as WoodyGray} from './Woody-gray.png';
+export { default as EarthyGray} from './Earthy-gray.png';
+export { default as FloralGray} from './Floral-gray.png';
+export { default as GreenGray} from './Green-gray.png';
+export { default as CitrusGray} from './Citrus-gray.png';
+export { default as ChypreGray} from './Chypre-gray.png';
+export { default as AldehydeGray} from './Aldehyde-gray.png';
+export { default as AromaticGray} from './Aromatic-gray.png';
+export { default as LeatherGray} from './Leather-gray.png';
+export { default as SpicyGray} from './Spicy-gray.png';
+export { default as FruityGray} from './Fruity-gray.png';
+export { default as FougereGray} from './Fougere-gray.png';
+
+export {default as KakaoShare} from './KakaoShare.png';
+
+
 export { default as Loading1 } from './Loading1.svg';
 export { default as Loading2 } from './Loading2.svg';
 export { default as Loading3 } from './Loading3.svg';
@@ -106,3 +134,4 @@ export { default as FruityGray } from './Fruity-gray.png';
 export { default as FougereGray } from './Fougere-gray.png';
 
 export { default as KakaoShare } from './KakaoShare.png';
+export {default as Orange} from './Orange.png';