feat : add adv-detail page (#22)

src/components/advertisement-detail/AdvAnalysis.tsx

@@ -1,32 +1,44 @@
 import styled from 'styled-components';
 
-export const AdvAnalysis = () => {
+export type AdvAnalysisProps = {
+  moodInfo: string[];
+  objectInfo: string[];
+  personInfo: string[];
+};
+
+export const AdvAnalysis = ({ data }: { data: AdvAnalysisProps }) => {
   return (
     <AdvAnalysisContainer>
       <div className="video-analysis">
         <RowBox>
           <div className="an-title">영상분위기</div>
-          <div className="an-content">#활기찬 #역동적인</div>
+
+          <div className="an-content">
+            {data?.moodInfo.map((item, idx) => <div key={idx}>#{item}</div>)}
+          </div>
         </RowBox>
         <div>
           <div className="an-title">영상 분석</div>
           <SecondBox>
             <div className="second-content">
               <div className="an-subtitle">인물</div>
-              <div className="an-content">#주현영</div>
+              <div className="an-content">
+                {data?.personInfo.map((item, idx) => (
+                  <div key={idx}>#{item}</div>
+                ))}
+              </div>
             </div>
             <div className="second-content">
               <div className="an-subtitle">사물</div>
-              <div className="an-content">#떡볶이 #그릇</div>
+              <div className="an-content">
+                {data?.objectInfo.map((item, idx) => (
+                  <div key={idx}>#{item}</div>
+                ))}
+              </div>
             </div>
           </SecondBox>
         </div>
-        <RowBox>
-          <div className="an-title">표정 분석</div>
-          <div className="an-content">#활기찬 #역동적인</div>
-        </RowBox>
       </div>
-      <div>그래픽 비율 및 차트</div>
     </AdvAnalysisContainer>
   );
 };

src/components/advertisement-detail/AdvExpression.tsx

@@ -0,0 +1,111 @@
+import styled from 'styled-components';
+import { RowBox } from './AdvAnalysis';
+import { useEffect, useState } from 'react';
+
+export type ExpressionProps = {
+  expressionList: expressionListType[];
+  sectionList: sectionListType[];
+};
+
+export type expressionListType = {
+  expression: string;
+  percentage: number;
+};
+
+export type sectionListType = {
+  expressionType: string;
+  endTime: number;
+  startTime: number;
+};
+
+export const AdvExpression = ({ data }: { data: ExpressionProps }) => {
+  console.log('exdata:', data);
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [expressionTag, setExpressionTag] = useState<string[]>(
+    data?.expressionList.map((item) => item.expression)
+  );
+
+  const [highestPercentageExpression, setHighestPercentageExpression] =
+    useState<string>('');
+
+  useEffect(() => {
+    if (data.expressionList.length > 0) {
+      let highestPercentage = 0;
+      let highestPercentageExpression = '';
+
+      data.expressionList.forEach((item) => {
+        if (item.percentage > highestPercentage) {
+          highestPercentage = item.percentage;
+          highestPercentageExpression = item.expression;
+        }
+      });
+
+      setHighestPercentageExpression(highestPercentageExpression);
+    }
+  }, [data.expressionList]);
+
+  console.log(highestPercentageExpression);
+
+  return (
+    <AdvExpressionContainer>
+      <RowBox>
+        <div className="an-title">표정 분석</div>
+        <div className="an-content">
+          {expressionTag.map((item, idx) => (
+            <div key={idx}>#{item}</div>
+          ))}
+        </div>
+      </RowBox>
+      <p>
+        이 광고에서는 <span>{highestPercentageExpression}</span> 표정이 제일
+        많아요.
+      </p>
+
+      <div>이모지 그래픽</div>
+      <div>차트</div>
+    </AdvExpressionContainer>
+  );
+};
+
+export const AdvExpressionContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 35px;
+
+  p {
+    margin-top: 5px;
+    color: ${(props) => props.theme.gray_02};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: -0.28px;
+
+    span {
+      color: ${(props) => props.theme.red_01};
+      font-weight: 600;
+    }
+  }
+
+  .an-title {
+    color: ${(props) => props.theme.gray_01};
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 180%;
+    letter-spacing: -0.32px;
+  }
+
+  .an-content {
+    color: ${(props) => props.theme.red_01};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: -0.28px;
+    //
+    display: flex;
+    gap: 13px;
+  }
+`;

src/components/advertisement-detail/AdvInfo.tsx

@@ -1,39 +1,48 @@
 import styled from 'styled-components';
 import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
-// import BookmarkIcon from '@mui/icons-material/Bookmark';
+import BookmarkIcon from '@mui/icons-material/Bookmark';
 
-export const AdvInfo = () => {
+export type AdvInfoProps = {
+  advertiser: string;
+  agency: string;
+  isArchived: boolean;
+  manufacturer: string;
+  videoUrl: string;
+  title: string;
+  createdAt: string;
+};
+
+export const AdvInfo = ({ data }: { data: AdvInfoProps }) => {
   return (
     <AdvInfoContainer>
-      {/* <VideoImg src={} alt="" /> */}
+      <VideoImg src={data?.videoUrl} alt="" />
       <TextContainer>
         <div className="title-line">
-          <div className="title">title</div>
-          <span>
-            <BookmarkBorderIcon />
-            {/* {isArchived ? (
+          <div className="title">{data?.title}</div>
+          <div>
+            {data?.isArchived ? (
               <BookmarkIcon />
             ) : (
               <BookmarkBorderIcon
               // onClick={handleScrappedClick}
               // className="fill-gray-60 mr-[20px]"
               />
-            )} */}
-          </span>
+            )}
+          </div>
         </div>
-        <p>date</p>
+        <p>{data?.createdAt}</p>
         <div className="adv-info">
-          <div>
+          <div className="adv-item">
             <p>광고주</p>
-            <span>주식회사 장스푸드</span>
+            <span>{data?.advertiser}</span>
           </div>
-          <div>
+          <div className="adv-item">
             <p>광고회사</p>
-            <span>주식회사 장스푸드</span>
+            <span>{data?.agency}</span>
           </div>
-          <div>
+          <div className="adv-item">
             <p>제작사</p>
-            <span>주식회사 장스푸드</span>
+            <span>{data?.manufacturer}</span>
           </div>
         </div>
       </TextContainer>
@@ -44,7 +53,7 @@ export const AdvInfo = () => {
 export const AdvInfoContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 20px;
 `;
 
 export const TextContainer = styled.div`
@@ -61,24 +70,40 @@ export const TextContainer = styled.div`
     margin: 3px 0px;
   }
 
-  .title {
-    color: ${(props) => props.theme.gray_01};
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
-    letter-spacing: -0.4px;
+  .title-line {
+    display: flex;
+    justify-content: space-between;
+
+    svg {
+      font-size: 30px;
+      fill: ${(props) => props.theme.gray_02};
+    }
+
+    .title {
+      color: ${(props) => props.theme.gray_01};
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: normal;
+      letter-spacing: -0.4px;
+    }
   }
 
   .adv-info {
     display: flex;
-    gap: 12px;
+    flex-direction: column;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     letter-spacing: -0.28px;
 
+    .adv-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
     p {
       color: ${(props) => props.theme.gray_02};
     }

src/components/advertisement-detail/SimilarItem.tsx

@@ -6,47 +6,62 @@ export type SimilarItemProps = {
   createdAt: string;
   moodInfo: string[];
   isArchived?: boolean;
-};
+}[];
 
-export const SimilarItem = ({ data }: { data: SimilarItemProps }) => {
+export const SimilarItem = ({
+  data,
+  mood,
+}: {
+  data: SimilarItemProps;
+  mood: string[];
+}) => {
   return (
-    <SimilarItemContainer>
-      <img src={data.videoUrl} alt="" />
-      <div className="text-box">
-        <p>{data.title}</p>
-        <span>{data.createdAt}2</span>
-        <div className="tag-box">
-          {data.moodInfo.map((item, idx) => {
-            return <div key={idx}>#{item}</div>;
-          })}
-        </div>
-      </div>
-    </SimilarItemContainer>
+    <>
+      <SimTitle>비슷한 분위기의 영상</SimTitle>
+      <SimTag>{mood?.map((item, idx) => <div key={idx}>#{item}</div>)}</SimTag>
+
+      {data?.map((item, idx) => {
+        return (
+          <SimilarItemContainer key={idx}>
+            <img src={item.videoUrl} alt="" />
+            <div className="text-box">
+              <p>{item.title}</p>
+              <span>{item.createdAt}</span>
+              <div className="tag-box">
+                {item.moodInfo.map((item, idx) => {
+                  return <div key={idx}>#{item}</div>;
+                })}
+              </div>
+            </div>
+          </SimilarItemContainer>
+        );
+      })}
+    </>
   );
 };
 
 export const SimilarItemContainer = styled.div`
   display: flex;
-  flex-direction: row;
   gap: 20px;
   width: 390px;
   height: 114px;
   /* height: 100%; */
+  padding: 10px 0px;
+  /* box-sizing: border-box; */
 
   img {
     max-width: 202px;
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border: 1px solid red;
+    border-radius: 6px;
   }
 
   .text-box {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
-    border: 1px solid blue;
     width: 100%;
 
     .tag-box {
@@ -91,3 +106,27 @@ export const SimilarItemContainer = styled.div`
     }
   }
 `;
+
+export const SimTitle = styled.div`
+  overflow: hidden;
+  color: ${(props) => props.theme.gray_01};
+  text-overflow: ellipsis;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 180%;
+  letter-spacing: -0.32px;
+`;
+
+export const SimTag = styled.div`
+  color: ${(props) => props.theme.red_01};
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 180%;
+  letter-spacing: -0.32px;
+  display: flex;
+  flex-direction: row;
+  gap: 13px;
+  align-items: center;
+`;