Merge pull request #48 from Kusitms-28th-Kobaco-B/feat/#45

[feat] 최종 작업

src/app/trend/compare/page.tsx

@@ -1,10 +1,12 @@
 import NOSSR from "@/components/common/NOSSR";
+import Footer from "@/components/footer/Footer";
 import ComparePage from "@/components/trend/ComparePage";
 
 const Compare = async () => {
   return (
     <NOSSR>
       <ComparePage />
+      <Footer />
     </NOSSR>
   );
 };

src/components/adCopy/GalleryCards.tsx

@@ -18,7 +18,7 @@ const GalleryCards = () => {
     recentSavedCopy().then((result) => {
       setCopy(result);
     });
-  });
+  }, []);
 
   return (
     <Layout length={copy.length}>
@@ -41,7 +41,7 @@ const GalleryCards = () => {
               </Tag>
             </TagBox>
             {v.message}
-            <EditWrapper>조회 1900</EditWrapper>
+            <EditWrapper>{`조회 5`}</EditWrapper>
           </CopyWrapper>
         ))}
       </BoxContents>

src/components/main/CardSlider.tsx

@@ -36,7 +36,14 @@ export const CardSlider = () => {
       <SwiperSlide>
         <CardRegion>
           <CardWrapper>
-            <CategoryButton>지역</CategoryButton>
+            <TagWrapper>
+              <Tag color={colors.main} background={colors.mainLight6}>
+                헤드카피
+              </Tag>
+              <Tag color={colors.grey1} background={colors.grey5}>
+                기본형
+              </Tag>
+            </TagWrapper>
             <CardContents>
               ‘내가 사는 지역을 더 살기 좋게, 더 매력 있게’
             </CardContents>
@@ -50,7 +57,14 @@ export const CardSlider = () => {
       <SwiperSlide>
         <CardRegion>
           <CardWrapper>
-            <CategoryButton>가구패키지</CategoryButton>
+            <TagWrapper>
+              <Tag color={colors.secondary} background={colors.secondaryLight3}>
+                바디카피
+              </Tag>
+              <Tag color={colors.grey1} background={colors.grey5}>
+                행동촉구형
+              </Tag>
+            </TagWrapper>
             <CardContents>
               {`‘새학기 새출발엔 역시 가구지!
                 책상부터 의자까지 한번에 해결할 수 있는 패키지 상품 출시!
@@ -66,43 +80,64 @@ export const CardSlider = () => {
       <SwiperSlide>
         <CardRegion>
           <CardWrapper>
-            <CategoryButton>가구</CategoryButton>
+            <TagWrapper>
+              <Tag color={colors.main} background={colors.mainLight6}>
+                헤드카피
+              </Tag>
+              <Tag color={colors.grey1} background={colors.grey5}>
+                언어유희형
+              </Tag>
+            </TagWrapper>
             <CardContents>
               {`‘내 방에서 만나는 예술 작품, 내 꿈과 미래를 그리는 공간,
                 멋진 가구 하나면 충분하다.’`}
             </CardContents>
           </CardWrapper>
           <CardInfoBlock>
             <CardInfo>박예진 | 2024.09.07</CardInfo>
-            <CardInfo>조회 1900</CardInfo>
+            <CardInfo>조회 1200</CardInfo>
           </CardInfoBlock>
         </CardRegion>
       </SwiperSlide>
       <SwiperSlide>
         <CardRegion>
           <CardWrapper>
-            <CategoryButton>간장치킨</CategoryButton>
+            <TagWrapper>
+              <Tag color={colors.secondary} background={colors.secondaryLight3}>
+                바디카피
+              </Tag>
+              <Tag color={colors.grey1} background={colors.grey5}>
+                행동촉구형
+              </Tag>
+            </TagWrapper>
             <CardContents>
               {`‘오늘 저녁은 치킨이다! 바삭한 튀김옷과\n단짠단짠 간장소스의 환상적인 조합’`}
             </CardContents>
           </CardWrapper>
           <CardInfoBlock>
             <CardInfo>백건우 | 2024.09.07</CardInfo>
-            <CardInfo>조회 1900</CardInfo>
+            <CardInfo>조회 2100</CardInfo>
           </CardInfoBlock>
         </CardRegion>
       </SwiperSlide>
       <SwiperSlide>
         <CardRegion>
           <CardWrapper>
-            <CategoryButton>서비스 선택</CategoryButton>
+            <TagWrapper>
+              <Tag color={colors.secondary} background={colors.secondaryLight3}>
+                바디카피
+              </Tag>
+              <Tag color={colors.grey1} background={colors.grey5}>
+                기본형
+              </Tag>
+            </TagWrapper>
             <CardContents>
               {`‘아이들 학습 수준에 맞춰 개별 맞춤 수업이 가능해요.\n체계적인 관리를 통해 성적 향상도 쑥쑥!’`}
             </CardContents>
           </CardWrapper>
           <CardInfoBlock>
             <CardInfo>유해령 | 2024.09.07</CardInfo>
-            <CardInfo>조회 1900</CardInfo>
+            <CardInfo>조회 600</CardInfo>
           </CardInfoBlock>
         </CardRegion>
       </SwiperSlide>
@@ -155,14 +190,7 @@ const CategoryButton = styled.div`
   line-height: normal;
 `;
 const CardContents = styled.div`
-  /* color: ${colors.greyTypeMain};
-  text-align: center;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 1.375rem; */
   white-space: pre-line;
-
   color: var(--Basic-White, #fff);
   text-align: center;
   font-size: 1.125rem;
@@ -182,3 +210,23 @@ const CardInfo = styled.div`
   font-weight: 400;
   line-height: normal;
 `;
+const TagWrapper = styled.div`
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  display: inline-flex;
+  gap: 0.5rem;
+`;
+const Tag = styled.div<{ color: string; background: string }>`
+  padding: 0.375rem 0.875rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 1.375rem;
+  border: 1px solid ${(props) => props.color};
+  background: ${(props) => props.background};
+  color: ${(props) => props.color};
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+`;

src/components/main/ContentBlock.tsx

@@ -3,6 +3,7 @@
 import { colors } from "@/styles/theme";
 import { motion } from "framer-motion";
 import Image from "next/image";
+import Link from "next/link";
 import styled from "styled-components";
 
 interface ContentBlockProps {
@@ -16,6 +17,7 @@ interface Card {
   title: string;
   description: string;
   img: string;
+  link: string;
 }
 
 export default function ContentBlock(props: ContentBlockProps) {
@@ -32,38 +34,73 @@ export default function ContentBlock(props: ContentBlockProps) {
         delay: 0,
       },
     },
+    offscreen: {
+      y: +50,
+      opacity: 0,
+    },
+    onscreen: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.8,
+        delay: 0,
+      },
+    },
   };
 
   return (
-    <Layout>
+    <Layout initial="offscreen" whileInView="onscreen" variants={Variants}>
       <Title>{title}</Title>
       <Description>{description}</Description>
       <CardBlock>
-        {card.map((v, i) => (
-          <CardWrapper
-            key={i}
-            initial="default"
-            whileHover="scaleUp"
-            variants={Variants}
-            trend={isTrend}
-          >
-            <ImageWrapper>
-              <Image
-                src={v.img}
-                alt={`card-image.${i}`}
-                width={336}
-                height={210}
-              />
-            </ImageWrapper>
-            <CardTitle>{v.title}</CardTitle>
-            <CardDescription>{v.description}</CardDescription>
-          </CardWrapper>
-        ))}
+        {card.map((v, i) =>
+          v.link == "" ? (
+            <CardWrapper
+              key={i}
+              initial="default"
+              whileHover="scaleUp"
+              variants={Variants}
+              trend={isTrend}
+            >
+              <ImageWrapper>
+                <Image
+                  src={v.img}
+                  alt={`card-image.${i}`}
+                  width={336}
+                  height={210}
+                />
+              </ImageWrapper>
+              <CardTitle>{v.title}</CardTitle>
+              <CardDescription>{v.description}</CardDescription>
+            </CardWrapper>
+          ) : (
+            <Link href={v.link}>
+              <CardWrapper
+                key={i}
+                initial="default"
+                whileHover="scaleUp"
+                variants={Variants}
+                trend={isTrend}
+              >
+                <ImageWrapper>
+                  <Image
+                    src={v.img}
+                    alt={`card-image.${i}`}
+                    width={336}
+                    height={210}
+                  />
+                </ImageWrapper>
+                <CardTitle>{v.title}</CardTitle>
+                <CardDescription>{v.description}</CardDescription>
+              </CardWrapper>
+            </Link>
+          )
+        )}
       </CardBlock>
     </Layout>
   );
 }
-const Layout = styled.div`
+const Layout = styled(motion.div)`
   display: flex;
   flex-direction: column;
   width: 100%;

src/components/main/CopyBlock.tsx

@@ -27,11 +27,23 @@ export default function CopyBlock() {
         delay: 0,
       },
     },
+    offscreen: {
+      y: +50,
+      opacity: 0,
+    },
+    onscreen: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.8,
+        delay: 0,
+      },
+    },
   };
 
   return (
     <>
-      <Layout>
+      <Layout initial="offscreen" whileInView="onscreen" variants={Variants}>
         <Title>광고 카피 제작</Title>
         <Description>
           {
@@ -71,7 +83,7 @@ export default function CopyBlock() {
     </>
   );
 }
-const Layout = styled.div`
+const Layout = styled(motion.div)`
   display: flex;
   flex-direction: column;
   width: 100%;

src/components/main/Intro.tsx

@@ -7,13 +7,20 @@ import styled from "styled-components";
 import { Button } from "../common/ButtonStyle";
 import { useState } from "react";
 import IntroModal from "./IntroModal";
+import VideoModal from "../common/VideoModal";
+import { guideKey } from "@/constants/videoKey";
 
 export default function Intro() {
   // 모달 버튼 클릭 유무를 저장할 state
   const [showModal, setShowModal] = useState(false);
   // 버튼 클릭시 모달 버튼 클릭 유무를 설정하는 state 함수
   const clickModal = () => setShowModal(!showModal);
 
+  // 모달 버튼 클릭 유무를 저장할 state
+  const [showModal2, setShowModal2] = useState(false);
+  // 버튼 클릭시 모달 버튼 클릭 유무를 설정하는 state 함수
+  const clickModal2 = () => setShowModal2(!showModal2);
+
   const Variants = {
     offscreen: {
       y: +50,
@@ -94,6 +101,7 @@ export default function Intro() {
           initial="default"
           whileHover="scaleUp"
           variants={Variants}
+          onClick={clickModal2}
         >
           아이작 소개 영상 바로가기
           <Image
@@ -103,6 +111,13 @@ export default function Intro() {
             height={18}
           />
         </LinkButtonWrapper>
+        {showModal2 && (
+          <VideoModal
+            title="아이작 소개 영상"
+            clickModal={clickModal2}
+            videoKey={guideKey}
+          />
+        )}
         <IntroMiniTextBlock onClick={clickModal}>
           광고 제작이 처음이신가요?
         </IntroMiniTextBlock>

src/components/main/StoryBlock.tsx

@@ -27,9 +27,21 @@ export default function StoryBlock() {
         delay: 0,
       },
     },
+    offscreen: {
+      y: +50,
+      opacity: 0,
+    },
+    onscreen: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.8,
+        delay: 0,
+      },
+    },
   };
   return (
-    <Layout>
+    <Layout initial="offscreen" whileInView="onscreen" variants={Variants}>
       <Title>스토리보드 제작</Title>
       <Description>
         {
@@ -101,7 +113,7 @@ export default function StoryBlock() {
     </Layout>
   );
 }
-const Layout = styled.div`
+const Layout = styled(motion.div)`
   display: flex;
   flex-direction: column;
   width: 100%;