Merge branch 'dev' into feat/be-refactor

softeerbootcamp-2nd · Aug 23, 2023 · 32f7807 · 32f7807
2 parents bf6dffa + cd45c9e
commit 32f7807
Show file tree

Hide file tree

Showing 31 changed files with 607 additions and 398 deletions.
diff --git a/README.md b/README.md
@@ -2,101 +2,32 @@
 
 안녕하세요🙌🏻 현대 오토에버 2팀 **CarTag** 🚙 (~~칼퇴~~)입니다.
 
-## 프로젝트 소개
-
-> 내가 탈 차, 이제 감이 아닌 **데이터**로.
-
-현대만의 데이터로 차량견적을 산출할 수 있는 서비스를 개발하였습니다.
-
-[기획/디자인 링크](https://www.figma.com/file/UPMMnkNQegdhJXFuZqQqph/Car-ta-log_Hand-off?type=design&node-id=1-6&mode=design&t=sBmZzwne4kOQ0Cub-0)
-
-## 팀원 소개
+### 팀원 소개
 
 | <img src="https://avatars.githubusercontent.com/u/63107805?s=400&u=a6d46e70c79e2efbe7baf3c1f41eea4196306a63&v=4" width="100px"> | <img src="https://avatars.githubusercontent.com/u/77661228?v=4" width="100px"> | <img src="https://avatars.githubusercontent.com/u/43626362?v=4" width="100px"> | <img src="https://item.kakaocdn.net/do/93f6fdee16edbf3cb096127b68c495bdce9463e040a07a9462a54df43e1d73f1" width="100px"> |
 | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- |
 | [FE-김다예](https://github.com/kimdaye77)                                                                                       | [FE-박지성](https://github.com/jijiseong)                                      | [BE-김종원](https://github.com/tank3a)                                         | [BE-이용재](https://github.com/dydwo0740)                                                                               |
+## 프로젝트 소개
 
-## 👇🏻 그라운드 룰
-
-### Check In/Out
-
-- 10:00 까지 모든 준비(노트북 세팅등 작업을 시작할 준비, 스크럼 시작전 코멘트 준비 등)가 완료된 상태로 프로젝트 룸에서 대기합니다.
-- 12:30 부터 14:00 까지 점심 식사 및 휴식을 취합니다.
-- 18:00 이전까지 회고를 할 준비를 끝내도록 합니다. 단, 그룹 내 피어세션은 동일 시간 금요일에 진행되므로 제외합니다.
-- 19:00 까지 스크럼에서 정한 일들을 모두 끝냈을 때 귀가합니다. 단, 그렇지 못한 경우에는 그룹 구성원 모두 남아서 과제를 수행합니다.
-- **귀가 관련 사항은 2주차부터 적용됩니다. 1주차에는 자율적으로 목표를 맞추어 일정에 차질이 생기지 않도록 합니다.**
-
-### 팀 내에서 태도
-
-- 소통을 통해 모르는 내용을 바로 물어보는 태도를 취합니다. (단, 팀원들에게 부담을 줄이기 위해서 질문 이전에 찾아보려는 노력을 하도록 합니다.)
-- 러버덕 디버깅을 적용하여 팀원들과 소통하면서 문제 해결능력을 높이는 방안을 채택합니다.
-- 프로젝트 기간동안 좋은 분위기를 위해서 팀원을 배려하는 태도를 가집니다.
-- 계획 수정시에는 팀원과 협의를 통해 수정합니다.
-
-### 팀 내 규칙
-
-- 1일 1커밋하기 (최소 기준이기 때문에 더 많은 과제를 수행하도록 노력합니다.)
-- 이슈를 만들고 팀원들과 함께 각 이슈의 소요시간 예측하도록 합니다.
-- 프론트/백엔드 간 데이터 전달 시 API 명세 반드시 하도록 합니다.
-- 수정사항은 수정 시작 전에 미리 팀원들에게 알리도록 합니다.
-- 도메인 네임 규칙 지켜서 개발하도록 합니다.
-
-## 📝 Convention
-
-### Commit Convention
-
-- 커밋 메시지 첫 줄 컨벤션은 다음과 같습니다.
-  `[태그] #{issue number}: 커밋 메시지`의 형태이며 `:`뒤에만 space가 있음에 유의합니다.
-
-#### 예시
-
-`[FEAT] #1: 작업 내용`
-
-#### Commit Tag
-
-- 태그는 영어로 쓰되 대문자로 합니다.
-- 태그 종류는 다음과 같습니다.
-  - `FEAT`: 기능 구현
-  - `FIX`: 버그 수정
-  - `DOCS`: 문서 작업
-  - `REFACTOR`: 리팩토링
-  - `TEST`: 테스트 코드
-  - `CHORE`: 빌드 업무 수정, 패키지 매니저 수정
-  - `ADD`: assets, data 파일 추가하는 경우
-  - `STYLE`: 코드 포맷팅, 세미콜론 누락, UI 디자인 변경 &rarr; 코드 변경이 없는 경우
-
-## 🤝 협업 전략
-
-### branch 전략
-
-- Git Flow 전략을 응용합니다.
-
-### Pull Request
-
-- Pull Request 같은 파트 다른 팀원이 리뷰 후 approve/revert 합니다.
-
-### 매주 계획하기
-
-- 매주 월요일 스프린트 계획 회의에 정한 내용을 Github Issue로 정리합니다.
-
-## 📖 브랜치 룰
+> 내가 탈 차, 이제 감이 아닌 **데이터**로.
 
-### Branch Type
+현대만의 데이터로 차량 견적을 산출할 수 있는 서비스를 개발하였습니다.<br>
+ ### 👉🏻 [내 차 만들기 - A2 Cartag](http://www.a2cartag.com/) 👈🏻
+ <img width="300px" src="https://github.com/softeerbootcamp-2nd/A2-CarTag/assets/63107805/39cd4f27-e1d3-462f-b719-33c44078b1fc"/><br>
+🐜 저희 팀 `칼퇴`가 개발한 서비스로 **합리적인 내 차**를 만들어 보세요!
 
-- `main` : 배포 가능한 상태의 브랜치
-- `dev` : 개발 과정 중 하나의 feature/bug를 완료하고 merge하는 브랜치
-- `feat` : 하나의 기능을 구현하는 브랜치
-- `hotfix` : main에서 긴급한 수정사항이 생겼을 때 수정하는 브랜치
-- `bugfix` : 개발 과정 중 발생한 버그를 수정하는 브랜치
 
-### Naming method
+### 주요 기능
 
-- branch 양식
-  `{옵션}/{브랜치 명}` (소문자, kebab-case)
-  ex) `feat/option-selection`
+### Preview
 
+### 기술 스택
 
-## 📁설계 문서
+### 프로젝트 구조
 
-### ERD
-ERD가 생성되었습니다.(2023.08.02) : [Wiki 링크](https://github.com/softeerbootcamp-2nd/A2-CarTag.wiki.git)
+### 👇🏻 링크
+- [그라운드 룰 🗣️](https://github.com/softeerbootcamp-2nd/A2-CarTag/wiki/%EA%B7%B8%EB%9D%BC%EC%9A%B4%EB%93%9C-%EB%A3%B0)
+- [기획/디자인 링크 👩‍🎨](https://www.figma.com/file/UPMMnkNQegdhJXFuZqQqph/Car-ta-log_Hand-off?type=design&node-id=1-6&mode=design&t=sBmZzwne4kOQ0Cub-0)
+- [컨벤션 ✅](https://github.com/softeerbootcamp-2nd/A2-CarTag/wiki/Convention)
+- [ERD 버전 관리 📜](https://github.com/softeerbootcamp-2nd/A2-CarTag/wiki/ERD)
+- [용어 사전 📋](https://github.com/softeerbootcamp-2nd/A2-CarTag/wiki/%EC%9A%A9%EC%96%B4%EC%82%AC%EC%A0%84)
diff --git a/frontend/public/images/logo.svg b/frontend/public/images/logo.svg
diff --git a/frontend/src/components/common/banner/Banner.tsx b/frontend/src/components/common/banner/Banner.tsx
@@ -62,7 +62,7 @@ const InfoWrapper = styled.div`
   position: absolute;
   top: 72px;
   width: 448px;
-  overflow-x: hidden;
+  overflow: hidden;
 `;
 
 const SubTitle = styled.p`

diff --git a/frontend/src/components/common/icons/Icons.tsx b/frontend/src/components/common/icons/Icons.tsx
@@ -229,3 +229,19 @@ export function CopyIcon() {
     </svg>
   );
 }
+
+export function NorthWest({ active, ...props }: ISvg) {
+  const color = active ? theme.color.white : theme.color.gray200;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      {...props}
+    >
+      <path d="M0 8H1.6V2.728L10.872 12L12 10.872L2.728 1.6H8V0H0V8Z" fill={color} />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/common/navbar/CarSelectContainer.tsx b/frontend/src/components/common/navbar/CarSelectContainer.tsx
@@ -2,7 +2,7 @@ import { styled } from 'styled-components';
 import CenterWrapper from '../layout/CenterWrapper';
 import { useFetch } from '../../../hooks/useFetch';
 import { CAR_LIST_API, IMG_URL } from '../../../utils/apis';
-import { useState } from 'react';
+import { Dispatch, useState } from 'react';
 import { flexCenterCss } from '../../../utils/commonStyle';
 import { BodyKrMedium3, BodyKrMedium4 } from '../../../styles/typefaces';
 import DefaultCardStyle from '../card/DefaultCardStyle';
@@ -16,16 +16,20 @@ interface ICar {
 
 interface ICarSelectContainer {
   visible: boolean;
+  setMenuVisible: Dispatch<React.SetStateAction<boolean>>;
 }
 
-export default function CarSelectContainer({ visible }: ICarSelectContainer) {
+export default function CarSelectContainer({ visible, setMenuVisible }: ICarSelectContainer) {
   const { data } = useFetch<ICar[]>(CAR_LIST_API);
   const [active, setActive] = useState(3); // 3: SUV
   const categoryList = ['수소/전기차', 'N', '승용', 'SUV', 'MVP', '소형트럭/택시', '트럭', '버스'];
 
   const handleCategoryClick = (idx: number) => {
     setActive(idx);
   };
+  const handleDimmedClick = () => {
+    setMenuVisible((cur) => !cur);
+  };
   const isActive = (idx: number) => idx === active;
 
   const categoryItemComponents = categoryList?.map((category, idx) => {
@@ -51,19 +55,21 @@ export default function CarSelectContainer({ visible }: ICarSelectContainer) {
           <CarListWrapper>{carItemComponents}</CarListWrapper>
         </CetnerWrapper>
       </Wrapper>
-      <CarSelectDimmedBackground $displayDimmed={visible} />
+      <CarSelectDimmedBackground $displayDimmed={visible} onClick={handleDimmedClick} />
     </>
   );
 }
-
 const Wrapper = styled.div<{ $visible: boolean }>`
-  display: ${({ $visible }) => ($visible ? 'block' : 'none')};
   position: fixed;
   top: 60px;
   z-index: 99999999;
-  height: 220px;
+  height: ${({ $visible }) => ($visible ? '220px' : '0')};
   width: 100%;
   background-color: ${({ theme }) => theme.color.white};
+  display: block;
+  opacity: ${({ $visible }) => ($visible ? '1' : '0')};
+  overflow: hidden;
+  transition: height 0.5s ease;
 `;
 
 const CetnerWrapper = styled(CenterWrapper)``;

diff --git a/frontend/src/components/common/navbar/NavBar.tsx b/frontend/src/components/common/navbar/NavBar.tsx
@@ -2,7 +2,7 @@ import React, { useContext, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { css, styled, useTheme } from 'styled-components';
 import { BodyKrMedium3, BodyKrRegular3, HeadingKrMedium6 } from '../../../styles/typefaces';
-import { ArrowDown, CancelIcon } from '../icons/Icons';
+import { ArrowDown, ArrowUp, CancelIcon } from '../icons/Icons';
 import hyundaiLogo from '/images/logo.svg';
 import { MESSAGE, PATH } from '../../../utils/constants';
 import { CloseModalContext } from '../../../context/CloseModalProvider';
@@ -41,50 +41,71 @@ export default function NavBar() {
     <Wrapper>
       <NavContainer $menuVisible={menuVisible}>
         <Body>
-          <HyundaiLogo src={hyundaiLogo} alt="" />
+          <HyundaiLogo src={hyundaiLogo} alt="" onClick={() => handleNavItemClick(PATH.home)} />
+
           <CarSelect onClick={handleCarSelectClick}>
             <span>펠리세이드</span>
-            <ArrowDown fill={theme.color.gray800} />
+            {menuVisible ? (
+              <ArrowUp fill={theme.color.primaryColor800} width={20} height={20} />
+            ) : (
+              <ArrowDown fill={theme.color.primaryColor800} width={20} height={20} />
+            )}
           </CarSelect>
-          <NavList>
-            <NavItem
-              onClick={() => handleNavItemClick(PATH.trim)}
-              active={isActive(PATH.trim) || isActive(PATH.home)}
-            >
-              트림
-            </NavItem>
-            <NavItem
-              onClick={() => handleNavItemClick(PATH.modelType)}
-              active={isActive(PATH.modelType)}
-            >
-              타입
-            </NavItem>
-            <NavItem
-              onClick={() => handleNavItemClick(PATH.outerColor)}
-              active={isActive(PATH.outerColor)}
-            >
-              외장
-            </NavItem>
-            <NavItem
-              onClick={() => handleNavItemClick(PATH.innerColor)}
-              active={isActive(PATH.innerColor)}
-            >
-              내장
-            </NavItem>
-            <NavItem onClick={() => handleNavItemClick(PATH.option)} active={isActive(PATH.option)}>
-              옵션
-            </NavItem>
-            <NavItem onClick={() => handleNavItemClick(PATH.result)} active={isActive(PATH.result)}>
-              완료
-            </NavItem>
-          </NavList>
-          <CancelButton onClick={handleCloseButtonClick}>
-            <Span>종료</Span>
-            <CancelIcon width={12} height={12} />
-          </CancelButton>
+
+          {!menuVisible && (
+            <NavList>
+              <NavItem
+                onClick={() => handleNavItemClick(PATH.trim)}
+                active={isActive(PATH.trim) || isActive(PATH.home)}
+              >
+                트림
+              </NavItem>
+              <NavItem
+                onClick={() => handleNavItemClick(PATH.modelType)}
+                active={isActive(PATH.modelType)}
+              >
+                타입
+              </NavItem>
+              <NavItem
+                onClick={() => handleNavItemClick(PATH.outerColor)}
+                active={isActive(PATH.outerColor)}
+              >
+                외장
+              </NavItem>
+              <NavItem
+                onClick={() => handleNavItemClick(PATH.innerColor)}
+                active={isActive(PATH.innerColor)}
+              >
+                내장
+              </NavItem>
+              <NavItem
+                onClick={() => handleNavItemClick(PATH.option)}
+                active={isActive(PATH.option)}
+              >
+                옵션
+              </NavItem>
+              <NavItem
+                onClick={() => handleNavItemClick(PATH.result)}
+                active={isActive(PATH.result)}
+              >
+                완료
+              </NavItem>
+            </NavList>
+          )}
+          {!menuVisible ? (
+            <CancelButton onClick={handleCloseButtonClick}>
+              <Span>종료</Span>
+              <CancelIcon width={12} height={12} />
+            </CancelButton>
+          ) : (
+            <CancelButton onClick={handleCarSelectClick}>
+              <CancelIcon width={12} height={12} />
+            </CancelButton>
+          )}
         </Body>
       </NavContainer>
-      <CarSelectContainer visible={menuVisible} />
+
+      <CarSelectContainer visible={menuVisible} setMenuVisible={setMenuVisible} />
     </Wrapper>
   );
 }
@@ -154,6 +175,7 @@ const CarSelect = styled.div`
   position: absolute;
   left: 0;
   bottom: 0;
+  gap: 4px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -185,7 +207,7 @@ const HyundaiLogo = styled.img`
   bottom: 0;
   width: 39px;
   height: 22px;
-
+  cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/frontend/src/components/modal/GuideModal.tsx b/frontend/src/components/modal/GuideModal.tsx
@@ -14,7 +14,7 @@ export default function GuideModal({ ...props }: IGuideModal) {
   const hmgDataBgRef = useRef<HTMLDivElement>(null);
   const { visible, setVisible } = useContext(GuideModalContext);
   const { pathname } = useLocation();
-
+  const isSelectedTrim = localStorage.getItem('isSelectedTrim');
   const stopEvent: MouseEventHandler<HTMLDivElement> = (e) => {
     e.stopPropagation();
   };
@@ -23,7 +23,10 @@ export default function GuideModal({ ...props }: IGuideModal) {
     if (!(pathname === PATH.home || pathname === PATH.trim)) {
       setVisible(false);
     }
-  }, [pathname, setVisible]);
+    if (isSelectedTrim && isSelectedTrim === 'true') {
+      setVisible(false);
+    }
+  }, [pathname, setVisible, isSelectedTrim]);
 
   return (
     <DimmedBackground $displayDimmed={visible} {...props}>

diff --git a/frontend/src/components/modal/QuoteSummaryModal.tsx b/frontend/src/components/modal/QuoteSummaryModal.tsx
@@ -125,9 +125,9 @@ export default function QuoteSummaryModal({ ...props }: IQuoteSummaryModal) {
 function Detail({ title, name, price }: IDetail) {
   return (
     <DetailWrapper>
-      <DetailTitle>{title}</DetailTitle>
-      <DetailName>{name}</DetailName>
-      <DetailPrice>+ {price.toLocaleString()} 원</DetailPrice>
+      {title && <DetailTitle>{title}</DetailTitle>}
+      {name && <DetailName>{name}</DetailName>}
+      {price && <DetailPrice>+ {price.toLocaleString()} 원</DetailPrice>}
     </DetailWrapper>
   );
 }

diff --git a/frontend/src/components/modal/SimilarQuoteModal.tsx b/frontend/src/components/modal/SimilarQuoteModal.tsx
@@ -43,7 +43,7 @@ export default function SimilarQuoteModal({ ...props }: ISimilarQuoteModal) {
               <br />내 견적과 해시태그 유사도가 높은 다른 사람들의 실제 출고 견적이에요.
             </DescText>
           </TextWrapper>
-          <SimilarPriceBar />
+          <SimilarPriceBar similarPrice={50_000_000} />
         </InfoWrapper>
         <CardWrapper>
           <CarInfo>