Merge pull request #413 from softeerbootcamp-2nd/dev

MAIN MERGE
softeerbootcamp-2nd · Aug 22, 2023 · aa8233e · aa8233e
2 parents d4e1c46 + 803842d
commit aa8233e
Show file tree

Hide file tree

Showing 14 changed files with 225 additions and 49 deletions.
diff --git a/backend-recommend/recommend.py b/backend-recommend/recommend.py
@@ -54,7 +54,7 @@ def recByApriori(body):
         antecedents = set(row.antecedents)
         consequents = set(row.consequents)
 
-        if antecedents.issubset(input) and len(consequents) <= 2 and not antecedents.union(consequents).issubset(input):
+        if antecedents.isdisjoint(input) and len(consequents) <= 2 and antecedents.union(consequents).isdisjoint(input):
             key = tuple(consequents)
             if key not in matching_itemsets or confidence > matching_itemsets[key]:
                 matching_itemsets[key] = confidence

diff --git a/backend/src/main/java/autoever2/cartag/domain/quote/HistorySearchDto.java b/backend/src/main/java/autoever2/cartag/domain/quote/HistorySearchDto.java
@@ -5,6 +5,7 @@
 import lombok.NoArgsConstructor;
 
 import java.util.ArrayList;
+import java.util.Collections;
 import java.util.List;
 import java.util.Objects;
 
@@ -31,6 +32,7 @@ public HistorySearchDto(int carId, int powerTrainId, int bodyTypeId, int operati
 
     public void addAllOption(List<Integer> optionId) {
         optionIds.addAll(optionId);
+        Collections.sort(optionIds);
     }
 
     public String getOptionIds() {

diff --git a/backend/src/main/java/autoever2/cartag/service/QuoteService.java b/backend/src/main/java/autoever2/cartag/service/QuoteService.java
@@ -13,6 +13,7 @@
 import lombok.RequiredArgsConstructor;
 import org.springframework.stereotype.Service;
 
+import java.util.Collections;
 import java.util.List;
 import java.util.stream.Collectors;
 
@@ -26,6 +27,7 @@ public class QuoteService {
 
     public HistoryShortDto findMyQuote(QuoteDataDto quoteDataDto) {
         List<Integer> optionIds = quoteDataDto.getOptionIdList();
+        Collections.sort(optionIds);
 
         HistorySearchDto historyData = HistorySearchDto.builder()
                 .carId(quoteDataDto.getCarId())
@@ -40,6 +42,7 @@ public HistoryShortDto findMyQuote(QuoteDataDto quoteDataDto) {
     public List<HistoryShortDto> findTopHistory(QuoteDataDto quoteDataDto) {
 
         List<Integer> optionIds = quoteDataDto.getOptionIdList();
+        Collections.sort(optionIds);
 
         if(optionIds.isEmpty()) {
             throw new InvalidDataException(ErrorCode.INVALID_PARAMETER);

diff --git a/frontend/src/components/cards/OptionCard.tsx b/frontend/src/components/cards/OptionCard.tsx
@@ -3,24 +3,25 @@ import { BodyKrRegular4, HeadingKrMedium6, HeadingKrMedium7 } from '../../styles
 import { CheckIcon } from '../common/icons/Icons';
 import DefaultCardStyle from '../common/card/DefaultCardStyle';
 import { HTMLAttributes, useContext } from 'react';
-import { IMG_URL } from '../../utils/apis';
 import { flexCenterCss } from '../../utils/commonStyle';
 import { ItemContext } from '../../context/ItemProvider';
 import { IDefaultOption } from '../../context/DefaultOptionProvider';
 import { ISubOption } from '../../context/SubOptionProvider';
-
+import { PERCENTAGE_LIMIT_VALUE } from '../../utils/constants';
 interface IOptionCard extends HTMLAttributes<HTMLDivElement> {
   type: 'default' | 'sub';
   active: boolean;
   option: ISubOption | IDefaultOption;
   handleSelectOption?: React.MouseEventHandler<HTMLDivElement>;
+  imgBlobUrl: { [key: string]: string };
 }
 
 export default function OptionCard({
   type,
   active,
   option,
   handleSelectOption,
+  imgBlobUrl,
   ...props
 }: IOptionCard) {
   const { selectedItem } = useContext(ItemContext);
@@ -45,16 +46,18 @@ export default function OptionCard({
   return (
     <Card active={active} {...props}>
       <ImgWrapper>
-        <OptionImg src={`${IMG_URL}${option.optionImage}`} />
+        <OptionImg src={`${imgBlobUrl[option.optionImage]}`} loading="lazy" alt="" />
         <HashTagWrapper>{displayHashTag}</HashTagWrapper>
       </ImgWrapper>
       <OptionCardInfo>
         <div>
-          {type === 'sub' && option.percentage !== null && (
-            <OptionDesc>
-              <BlueText>{option.percentage}%</BlueText>가 선택했어요
-            </OptionDesc>
-          )}
+          {type === 'sub' &&
+            option.percentage !== null &&
+            option.percentage > PERCENTAGE_LIMIT_VALUE && (
+              <OptionDesc>
+                <BlueText $active={active}>{option.percentage}%</BlueText>가 선택했어요.
+              </OptionDesc>
+            )}
           <OptionTitle>{option.optionName}</OptionTitle>
         </div>
         {displayCaption}
@@ -122,8 +125,8 @@ const OptionPrice = styled.div`
 const DefaultInfo = styled.div`
   color: ${({ theme }) => theme.color.gray500};
 `;
-const BlueText = styled.span`
-  color: ${({ theme }) => theme.color.activeBlue2};
+const BlueText = styled.span<{ $active: boolean }>`
+  color: ${({ $active, theme }) => $active && theme.color.activeBlue};
 `;
 
 const OptionDesc = styled.div`

diff --git a/frontend/src/components/cards/OuterColorCard.tsx b/frontend/src/components/cards/OuterColorCard.tsx
@@ -31,7 +31,7 @@ export default function OuterColorCard({
       </ColorWrapper>
       <DescWrapper>
         <ColorDesc>
-          <PointText $active={active}>{desc}%</PointText>가 선택했어요.
+          <BlueText $active={active}>{desc}%</BlueText>가 선택했어요.
         </ColorDesc>
         <ColorName>{name}</ColorName>
         <Row>
@@ -73,7 +73,7 @@ const ColorBorder = styled.div<{ $active: boolean }>`
 const ColorDesc = styled.div`
   ${BodyKrMedium4}
 `;
-const PointText = styled.span<{ $active: boolean }>`
+const BlueText = styled.span<{ $active: boolean }>`
   color: ${({ $active, theme }) => $active && theme.color.activeBlue};
 `;
 const ColorName = styled.div`

diff --git a/frontend/src/components/common/banner/Banner.tsx b/frontend/src/components/common/banner/Banner.tsx
@@ -1,5 +1,7 @@
-import { styled } from 'styled-components';
+import { css, keyframes, styled } from 'styled-components';
 import { BodyKrRegular3, HeadingKrBold1 } from '../../../styles/typefaces';
+import { useCallback, useEffect, useState } from 'react';
+import { MAX_TEXT_CNT } from '../../../utils/constants';
 import CenterWrapper from '../layout/CenterWrapper';
 
 interface IBanner extends React.HTMLAttributes<HTMLDivElement> {
@@ -8,13 +10,34 @@ interface IBanner extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export default function Banner({ subtitle, title, ...props }: IBanner) {
+  const [displayText, setDisplayText] = useState('');
+  const isOverflow = title && title.length > MAX_TEXT_CNT ? true : false;
+
+  const displayOverflow = useCallback(() => {
+    if (!title) return;
+    const txt = title.length > MAX_TEXT_CNT ? title.substring(0, MAX_TEXT_CNT) + '...' : title;
+    setDisplayText(txt);
+  }, [title]);
+
+  useEffect(() => {
+    displayOverflow();
+  }, [title, displayOverflow]);
+
   return (
     <>
       <BannerBg {...props}>
         <CenterWrapper>
           <InfoWrapper>
             {subtitle && <SubTitle>{subtitle}</SubTitle>}
-            {title && <Title>{title}</Title>}
+            {title && (
+              <Title
+                onMouseOver={() => setDisplayText(title)}
+                onMouseLeave={displayOverflow}
+                $isOverflow={isOverflow}
+              >
+                {displayText}
+              </Title>
+            )}
           </InfoWrapper>
         </CenterWrapper>
         {props.children}
@@ -38,15 +61,41 @@ const BannerBg = styled.div`
 const InfoWrapper = styled.div`
   position: absolute;
   top: 72px;
+  width: 448px;
+  overflow-x: hidden;
 `;
 
 const SubTitle = styled.p`
   color: ${({ theme }) => theme.color.gray900};
   ${BodyKrRegular3}
 `;
 
-const Title = styled.p`
+const textLoop = keyframes`
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    -webkit-transform: translate3d(-130%, 0, 0);
+    transform: translate3d(-130%, 0, 0);
+  }
+`;
+
+const Title = styled.p<{ $isOverflow: boolean }>`
   position: relative;
   color: ${({ theme }) => theme.color.primaryColor700};
   ${HeadingKrBold1}
+
+  white-space: nowrap;
+  ${({ $isOverflow }) => {
+    if ($isOverflow)
+      return css`
+        z-index: 1;
+        animation-play-state: paused;
+        &:hover {
+          cursor: pointer;
+          animation: ${textLoop} 10s linear infinite;
+        }
+      `;
+  }}
 `;
diff --git a/frontend/src/containers/OptionPage/OptionBannerContainer.tsx b/frontend/src/containers/OptionPage/OptionBannerContainer.tsx
@@ -63,7 +63,11 @@ export default function OptionBannerContainer({
   const handleScroll = () => {
     setWinY(window.scrollY);
   };
+  const [visibleDesc, setVisibleDesc] = useState(false);
 
+  const handleDescVisibility = (visible: boolean) => {
+    setVisibleDesc(visible);
+  };
   useEffect(() => {
     window.addEventListener('scroll', handleScroll);
     return () => {
@@ -73,7 +77,6 @@ export default function OptionBannerContainer({
 
   useEffect(() => {
     const target = optionDetail.subOptionList ? optionDetail.subOptionList[0] : optionDetail;
-
     setBannerInfo({
       categoryName: target.categoryName,
       hmgData: target.hmgData,
@@ -100,17 +103,23 @@ export default function OptionBannerContainer({
                     />
                   )}
                   {bannerInfo.optionDescription && (
-                    <Description>
+                    <Description
+                      onMouseLeave={() => handleDescVisibility(false)}
+                      onMouseOver={() => handleDescVisibility(true)}
+                    >
                       <AdditionalText>{bannerInfo.optionDescription}</AdditionalText>
-                      <HoverCaption>{bannerInfo.optionDescription}</HoverCaption>
+
+                      <HoverCaption $visible={visibleDesc}>
+                        {bannerInfo.optionDescription}
+                      </HoverCaption>
                     </Description>
                   )}
 
                   {bannerInfo.hmgData && (
                     <HmgDataSection>
                       <HmgTag size="small" />
                       <DataList>
-                        {bannerInfo.hmgData.overHalf !== null && (
+                        {bannerInfo.hmgData.optionBoughtCount !== null && (
                           <Data>
                             <DataTitle>
                               {bannerInfo.hmgData.overHalf
@@ -157,18 +166,18 @@ export default function OptionBannerContainer({
     </>
   );
 }
-const HoverCaption = styled.div`
-  display: none;
+const HoverCaption = styled.div<{ $visible: boolean }>`
   white-space: pre-wrap;
-  position: absolute;
   padding: 4px 12px;
   border-radius: 10px;
-  top: 120%;
+  position: relative;
   color: ${({ theme }) => theme.color.gray50};
   opacity: 90%;
+  margin-top: 10px;
+  z-index: 1;
+  width: 448px;
   background-color: ${({ theme }) => theme.color.gray900};
   ${BodyKrRegular4}
-
   &:after {
     content: '';
     position: absolute;
@@ -181,6 +190,7 @@ const HoverCaption = styled.div`
     border-bottom-color: ${({ theme }) => theme.color.gray900};
     border-width: 3px;
   }
+  visibility: ${({ $visible }) => ($visible ? 'visible' : 'hidden')};
 `;
 const Wrapper = styled.div<{ $isBannerVisible: boolean }>`
   z-index: 5;
@@ -208,12 +218,6 @@ const Container = styled(CenterWrapper)`
 
 const Description = styled.div`
   position: relative;
-
-  &:hover {
-    ${HoverCaption} {
-      display: block;
-    }
-  }
 `;
 
 const AdditionalText = styled.div`
@@ -227,6 +231,7 @@ const AdditionalText = styled.div`
   width: 456px;
   color: ${({ theme }) => theme.color.gray800};
   ${BodyKrRegular4}
+  cursor: pointer;
 `;
 
 const InfoWrapper = styled.div`
@@ -257,7 +262,8 @@ const ToastPopup = styled.button<{ $offsetY: number; $isBannerVisible: boolean }
     ($offsetY >= 200 && !$isBannerVisible) || $offsetY ? 'block' : 'none'};
 `;
 const HmgDataSection = styled.div`
-  margin-top: 12px;
+  position: absolute;
+  top: 80px;
 `;
 const DataList = styled.ul`
   display: flex;

diff --git a/frontend/src/containers/OptionPage/OptionSelectContainer/DefaultOptionContainer.tsx b/frontend/src/containers/OptionPage/OptionSelectContainer/DefaultOptionContainer.tsx
@@ -9,11 +9,13 @@ interface IDefaultOptionContainer {
   query: string;
   setQuery: Dispatch<React.SetStateAction<string>>;
   setResult: Dispatch<React.SetStateAction<string[]>>;
+  imgBlobUrl: { [key: string]: string };
 }
 export default function DefaultOptionContainer({
   query,
   setQuery,
   setResult,
+  imgBlobUrl,
 }: IDefaultOptionContainer) {
   const [filteredByCategory, setFilteredByCategory] = useState<IDefaultOption[]>([]);
   const [currentCategory, setCurrentCategory] = useState('전체');
@@ -105,6 +107,7 @@ export default function DefaultOptionContainer({
         type="default"
         active={currentOptionIdx === option.optionId}
         option={option}
+        imgBlobUrl={imgBlobUrl}
       />
       {option.hasHmgData && (
         <HmgWrapper>