오늘은 저번 1차 과제 이후 멘토님을 비롯하여 팀원들께서 주신 피드백을 토대로 리팩토링을 진행하였습니다.
1차 과제 글: https://velog.io/@yangjaehyuk/1%EC%B0%A8-%EA%B3%BC%EC%A0%9C-%EB%A6%AC%EB%B7%B0
원본 사이트 처럼 사이드 여백 줄이기
기존 css 코드에선 html과 body 태그 내부에 margin값을 부여하지 않았습니다.
html, body {
margin: 0;
}초기 css값을 위와 같이 설정해주었고,
.Right > .material-symbols-outlined {
height: 48px;
right: calc(50% - 35px);
position: absolute;
top: calc(50% - 24px);
width: 48px;
}
본래 차량 모델 넘기는 오른쪽 버튼의 right값으로 인해 좌우 스크롤이 생겼습니다.
.Right > .material-symbols-outlined {
height: 48px;
position: absolute;
top: calc(50% - 24px);
width: 48px;
}right값을 제거해줌으로 인해 원본 사이트랑 동일하게 나타내어 지게 되었습니다.
화면 구조 변경
기존 화면 구조는
위와 같은 형태를 띄었습니다.
난잡한 section 태그들을 하나의 main 태그 내부에 존재하도록 리팩토링 하였습니다.
- 기존코드
<section>
<div class="SectionContainer">
<img src="./image/1920x1080.jpg" alt="section_img" class="SectionContainerImg">
<div class="SectionSubContainer">
<div class="SectionTitle">Audi RS 3</div>
<div class="SectionDescription">컴팩트 스포츠 세단, 퍼포먼스로 완성되다</div>
<button class="SectionLook">자세히 보기</button>
</div>
</div>
<div class="SectionSearchContainer">
<div class="SearchTitle">차량 재고 검색</div>
<div class="SectionDropdown">
<div class="SectionText">
<span class="SectionDropdownTitle">Model</span>
<span class="SectionCarsCategory">Q4 e-tron</span>
<ul class="Dropdownlayout">
<li class="group">
<span class="title">
Audi e-tron GT
</span>
<div class="subgroup">
<span class="sub">e-tron GT quattro</span>
</div>
<div class="subgroup">
<span class="sub">RS e-tron GT</span>
</div>
</li>
<li class="group">
<span class="title">
Audi e-tron
</span>
<div class="subgroup">
<span class="sub">Audi e-tron</span>
</div>
<div class="subgroup">
<span class="sub">Audi e-tron Sportback</span>
</div>
<div class="subgroup">
<span class="sub">e-tron S</span>
</div>
<div class="subgroup">
<span class="sub">Audi e-tron S Sportback</span>
</div>
</li>
<li class="group">
<span class="title">
Audi A3
</span>
<div class="subgroup">
<span class="sub">A3</span>
</div>
<div class="subgroup">
<span class="sub">S3</span>
</div>
<div class="subgroup">
<span class="sub">RS 3</span>
</div>
</li>
<li class="group">
<span class="title">
Audi A4
</span>
<div class="subgroup">
<span class="sub">A4</span>
</div>
<div class="subgroup">
<span class="sub">S4</span>
</div>
</li>
<li class="group">
<span class="title">
Audi A5
</span>
<div class="subgroup">
<span class="sub">A5 Coupe</span>
</div>
<div class="subgroup">
<span class="sub">A5 Sportback</span>
</div>
<div class="subgroup">
<span class="sub">A5 Cabriolet</span>
</div>
<div class="subgroup">
<span class="sub">S5 Coupe</span>
</div>
<div class="subgroup">
<span class="sub">S5 Sportback</span>
</div>
<div class="subgroup">
<span class="sub">RS 5 Sportback</span>
</div>
</li>
<li class="group">
<span class="title">
Audi A6
</span>
<div class="subgroup">
<span class="sub">A6</span>
</div>
<div class="subgroup">
<span class="sub">S6</span>
</div>
<div class="subgroup">
<span class="sub">RS 6</span>
</div>
</li>
<li class="group">
<span class="title">
Audi A7
</span>
<div class="subgroup">
<span class="sub">A7 Sportback</span>
</div>
<div class="subgroup">
<span class="sub">A7 Sportback TFSL e</span>
</div>
<div class="subgroup">
<span class="sub">S7</span>
</div>
<div class="subgroup">
<span class="sub">RS 7 Sportback</span>
</div>
</li>
<li class="group">
<span class="title">
Audi A8
</span>
<div class="subgroup">
<span class="sub">A8 L</span>
</div>
<div class="subgroup">
<span class="sub">S8 L</span>
</div>
<div class="subgroup">
<span class="sub">A8</span>
</div>
</li>
<li class="group">
<span class="title">
Audi Q2
</span>
<div class="subgroup">
<span class="sub">Q2</span>
</div>
</li>
<li class="group">
<span class="title">
Audi Q3
</span>
<div class="subgroup">
<span class="sub">Q3</span>
</div>
<div class="subgroup">
<span class="sub">Q3 Sportback</span>
</div>
</li>
<li class="group">
<span class="title">
Audi Q4
</span>
<div class="subgroup" aria-selected="true">
<span class="sub">Q4 e-tron</span>
</div>
<div class="subgroup">
<span class="sub">Q4 Sportback e-tron</span>
</div>
</li>
<li class="group">
<span class="title">
Audi Q5
</span>
<div class="subgroup">
<span class="sub">Q5</span>
</div>
<div class="subgroup">
<span class="sub">SQ5</span>
</div>
<div class="subgroup">
<span class="sub">Q5 Sportback</span>
</div>
<div class="subgroup">
<span class="sub">SQ5 Sportback</span>
</div>
</li>
<li class="group">
<span class="title">
Audi Q7
</span>
<div class="subgroup">
<span class="sub">Q7</span>
</div>
</li>
<li class="group">
<span class="title">
Audi Q8
</span>
<div class="subgroup">
<span class="sub">Q8</span>
</div>
<div class="subgroup">
<span class="sub">RS Q8</span>
</div>
</li>
</ul>
</div>
<div class="material-symbols-outlined">expand_more</div>
</div>
<div class="SectionCarNums">
<a href="javascript:void(0)" class="SectionNewCarsContainer">
<span class="SectionNumOfNewcars">15</span>
<span class="SectionNewCars">대의 신차</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</a>
<pre> </pre>
<a href="javascript:void(0)" class="SectionOldCarsContainer">
<span class="SectionNumOfOldcars">7</span>
<span class="SectionOldCars">대의 인증 중고차</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</a>
</div>
</div>
<ul class="SectionModelList">
<li class="SectionModel" aria-selected="true">
<span class="Model">모델</span>
</li>
<li class="SectionModelType" aria-selected="false">
<span class="Model">모델 유형</span>
</li>
</ul>
<div class="CarList">
<div class="CarListSroll">
<ul class="CarListModels">
<li class="Cars">
<div class="CarImg">
<img src="./image/2023.png" alt="" class="CarImage">
<span class="CarName">Audi e-tron GT</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2019.png" alt="" class="CarImage">
<span class="CarName">Audi e-tron</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2022.png" alt="" class="CarImage">
<span class="CarName">Audi A3</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2021.png" alt="" class="CarImage">
<span class="CarName">Audi A4</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2020.png" alt="" class="CarImage">
<span class="CarName">Audi A5</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2023 (1).png" alt="" class="CarImage">
<span class="CarName">Audi A6</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2019 (1).png" alt="" class="CarImage">
<span class="CarName">Audi A7</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2022 (1).png" alt="" class="CarImage">
<span class="CarName">Audi A8</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2023 (2).png" alt="" class="CarImage">
<span class="CarName">Audi Q2</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2022 (2).png" alt="" class="CarImage">
<span class="CarName">Audi Q3</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2022 (3).png" alt="" class="CarImage">
<span class="CarName">Audi Q4</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2021 (1).png" alt="" class="CarImage">
<span class="CarName">Audi Q5</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2020 (1).png" alt="" class="CarImage">
<span class="CarName">Audi Q7</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2022 (4).png" alt="" class="CarImage">
<span class="CarName">Audi Q8</span>
</div>
</li>
</ul>
</div>
<div class="Left">
<span class="material-symbols-outlined">
arrow_back_ios
</span>
</div>
<div class="Right">
<span class="material-symbols-outlined">
arrow_forward_ios
</span>
</div>
</div>
<div class="CarType">
<ul class="CarListModels">
<li class="Cars">
<div class="CarImg">
<img src="./image/sportback.png" alt="" class="CarImage">
<span class="CarName">스포트백</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/suv.png" alt="" class="CarImage">
<span class="CarName">SUV</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/sedan.png" alt="" class="CarImage">
<span class="CarName">세단</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/cooper.png" alt="" class="CarImage">
<span class="CarName">쿠페</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/Cabriolet.png" alt="" class="CarImage">
<span class="CarName">카브리올레</span>
</div>
</li>
</ul>
<div class="RightType">
<span class="material-symbols-outlined">
arrow_forward_ios
</span>
</div>
</div>
<div class="specific_cartype">
<div class="btnspancontainer">
<span class="xbtn">
<img src="./image/X_Button.svg" alt="" class="btn">
</span>
<span class="first"></span>
</div>
<ul class="list">
<li class="second">
<img src="" alt="" class="third1">
<span class="fourth1"></span>
</li>
<li class="second">
<img src="" alt="" class="third2">
<span class="fourth2"></span>
</li>
<li class="second">
<img src="" alt="" class="third3">
<span class="fourth3"></span>
</li>
<li class="second">
<img src="" alt="" class="third4">
<span class="fourth4"></span>
</li>
<li class="second">
<img src="" alt="" class="third5">
<span class="fourth5"></span>
</li>
<li class="second">
<img src="" alt="" class="third6">
<span class="fourth6"></span>
</li>
<li class="second">
<img src="" alt="" class="third7">
<span class="fourth7"></span>
</li>
<li class="second">
<img src="" alt="" class="third8">
<span class="fourth8"></span>
</li>
<li class="second">
<img src="" alt="" class="third9">
<span class="fourth9"></span>
</li>
<li class="second">
<img src="" alt="" class="third10">
<span class="fourth10"></span>
</li>
<li class="second">
<img src="" alt="" class="third11">
<span class="fourth11"></span>
</li>
<li class="second">
<img src="" alt="" class="third12">
<span class="fourth12"></span>
</li>
<li class="second">
<img src="" alt="" class="third13">
<span class="fourth13"></span>
</li>
<li class="second">
<img src="" alt="" class="third14">
<span class="fourth14"></span>
</li>
<li class="second">
<img src="" alt="" class="third15">
<span class="fourth15"></span>
</li>
</ul>
</div>
</section>
<section>
<div class="AD">
<div class="AD1">
<img src="./image/a7sbetron_570x857.jpg" alt="" class="AD1pic">
</div>
<div class="AD1text">
<span class="AD1title">Audi A7 Sportback TFSI e</span>
<span class="AD1des">플러그인 하이브리드, 디자인으로 완성되다</span>
<button class="AD1btn">
<span style="color: white;">자세히보기</span>
</button>
</div>
</div>
<div class="AD">
<div class="AD1">
<img src="./image/q8edition_570x857.jpg" alt="" class="AD1pic">
</div>
<div class="AD1text">
<span class="AD1title">Audi Q8 execlusive<br> edition</span>
<span class="AD1des">완벽한 프리미엄 SUV</span>
<button class="AD1btn">
<span style="color: white;">자세히보기</span>
</button>
</div>
</div>
<div class="AD">
<div class="AD1">
<img src="./image/s8l_570x857.jpg" alt="" class="AD1pic">
</div>
<div class="AD1text">
<span class="AD1title">Audi S8 L</span>
<span class="AD1des">Progress, 퍼포먼스로 완성되다</span>
<button class="AD1btn">
<span style="color: white;">자세히보기</span>
</button>
</div>
</div>
<div class="AD">
<div class="AD1">
<img src="./image/Q4_e-tron_570x857.jpg" alt="" class="AD1pic">
</div>
<div class="AD1text">
<span class="AD1title">Audi Q4 e-tron</span>
<span class="AD1des">진보된 미래를 먼저 만나보세요</span>
<button class="AD1btn">
<span style="color: white;">자세히보기</span>
</button>
</div>
</div>
</section>
<section>
<div class="Service">
<div class="Servicetitle">Audi Korea Service</div>
<ul class="Compos">
<a href="javascript:void(0)" class="ServiceComponent1">
<img src="./image/883x496_3.jpg" alt="" class="CompoImg1">
<div class="CompoText">
<p style="margin-top: 5px;">아우디 브랜드 소개<br>아우디는 세상을 이해하는 통찰력을 바탕으로 영감을 얻고, 미래를 그려 나갑니다.</p>
</div>
<div class="CompoLook">
<span>자세히 보기</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
</a>
<a href="javascript:void(0)" class="ServiceComponent2">
<img src="./image/img_883x496_2.jpg" alt="" class="CompoImg2">
<div class="CompoText">
<p style="margin-top: 5px;">Audi Service<br>당신이 일상에 집중할 수 있도록<br>처음부터 끝까지</p>
</div>
<div class="CompoLook">
<span>자세히 보기</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
</a>
<a href="javascript:void(0)" class="ServiceComponent3">
<img src="./image/img_883x496.jpg" alt="" class="CompoImg3">
<div class="CompoText">
<p style="margin-top: 5px;">Audi Connect<br>서비스 이용 제한 안내</p>
</div>
<div class="CompoLook">
<span>자세히 보기</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
</a>
</ul>
</div>
</section>
<section>
<div class="SNS">
<div class="Servicetitle">SNS @AudiKorea</div>
<ul class="Compos">
<a href="javascript:void(0)" class="ServiceComponent1_2">
<img src="./image/인스타그램_0724.jpg" alt="" class="CompoImg1">
<div class="SocialText1">
<p>더욱 강력한 존재감의 완벽한 프리미엄 SUV<br>Audi Q8 50 TDI quattro exclusive edition</p>
</div>
<div class="SocialDes">
<p>#Audi #아우디 #FutureIsAnAttitude #Progressyoucanfeel #exclusiveedition #exclusiveorder #Q8</p>
</div>
<div class="SocialLogo">
<img src="./image/Instagram-Free-Icon-rdfd.svg" alt="" class="LogoImg">
<div class="LogoText">
24.07.2023
</div>
</div>
</a>
<a href="javascript:void(0)" class="ServiceComponent2_2">
<img src="./image/페이스북_0724.jpg" alt="" class="CompoImg2">
<div class="SocialText2">
<p>[아우디 침수 차량 지원 서비스]<br>전국 아우디 공식 서비스센터에서 집중 호우로 인해 침수 피해가 발생한 차량의 무상점검 서비스를 제공합니다.</p>
</div>
<div class="SocialDes">
<p>#Audi #아우디 #AudiService #FutureIsAnAttitude #Progressyoucanfeel</p>
</div>
<div class="SocialLogo">
<img src="./image/facebook-svgrepo-com.svg" alt="" class="LogoImg">
<div class="LogoText">
24.07.2023
</div>
</div>
</a>
<a href="javascript:void(0)" class="ServiceComponent3_2">
<div class="YoutubeContainer">
<div class="material-symbols-outlined">
play_circle
</div>
<img src="./image/유튜브(쇼츠)_0703.jpg" alt="" class="CompoImg3">
</div>
<div class="SocialText3">
<p>Greentech Festival Berlin, e-tron의 현재와 미래를 그리다.</p>
</div>
<div class="SocialDes">
<p>#Audi #아우디 #FutureIsAnAttitude #GreentechFestival #GreentechFest #CelebrateChange #eMobility</p>
</div>
<div class="SocialLogo">
<img src="./image/youtube-123.svg" alt="" class="LogoImg">
<div class="LogoText">
03.07.2023
</div>
</div>
</a>
</ul>
</div>
</section>
<section>
<div class="Space"></div>
<div class="Space"></div>
</section>
<section>
<div class="Quickmenu">
<ul>
<li>
<div class="menucontainer">
<div class="Textmenu">
시승신청
</div>
<i class="icons">
<img src="./image/icon_testdrive.png" alt="" class="icon">
</i>
</div>
</li>
<li>
<div class="menucontainer">
<div class="Textmenu">
예약금 결제
</div>
<i class="icons">
<img src="./image/icon_pay.png" alt="" class="icon">
</i>
</div>
</li>
<li>
<div class="menucontainer">
<div class="Textmenu">
전시장 / AS센터
</div>
<i class="icons">
<img src="./image/icon_showroom2.png" alt="" class="icon">
</i>
</a>
</li>
<li>
<div class="menucontainer">
<div class="Textmenu">
서비스예약
</div>
<i class="icons">
<img src="./image/ico_quick_sv.png" alt="" class="icon">
</i>
</div>
</li>
<li>
<div class="menucontainer">
<div class="Textmenu">
채팅상담
</div>
<i class="icons">
<img src="./image/icon_chat.png" alt="" class="icon">
</i>
</div>
</li>
</ul>
</div>
</section>- 리팩토링 드
<main>
<section>
<div class="SectionContainer">
<img src="./image/1920x1080.jpg" alt="section_img" class="SectionContainerImg">
<div class="SectionSubContainer">
<div class="SectionTitle">Audi RS 3</div>
<div class="SectionDescription">컴팩트 스포츠 세단, 퍼포먼스로 완성되다</div>
<button class="SectionLook">자세히 보기</button>
</div>
</div>
<div class="SectionSearchContainer">
<div class="SearchTitle">차량 재고 검색</div>
<div class="SectionDropdown">
<div class="SectionText">
<span class="SectionDropdownTitle">Model</span>
<span class="SectionCarsCategory">Q4 e-tron</span>
<ul class="Dropdownlayout">
<li class="group">
<span class="title">
Audi e-tron GT
</span>
<div class="subgroup">
<span class="sub">e-tron GT quattro</span>
</div>
<div class="subgroup">
<span class="sub">RS e-tron GT</span>
</div>
</li>
<li class="group">
<span class="title">
Audi e-tron
</span>
<div class="subgroup">
<span class="sub">Audi e-tron</span>
</div>
<div class="subgroup">
<span class="sub">Audi e-tron Sportback</span>
</div>
<div class="subgroup">
<span class="sub">e-tron S</span>
</div>
<div class="subgroup">
<span class="sub">Audi e-tron S Sportback</span>
</div>
</li>
<li class="group">
<span class="title">
Audi A3
</span>
<div class="subgroup">
<span class="sub">A3</span>
</div>
<div class="subgroup">
<span class="sub">S3</span>
</div>
<div class="subgroup">
<span class="sub">RS 3</span>
</div>
</li>
<li class="group">
<span class="title">
Audi A4
</span>
<div class="subgroup">
<span class="sub">A4</span>
</div>
<div class="subgroup">
<span class="sub">S4</span>
</div>
</li>
<li class="group">
<span class="title">
Audi A5
</span>
<div class="subgroup">
<span class="sub">A5 Coupe</span>
</div>
<div class="subgroup">
<span class="sub">A5 Sportback</span>
</div>
<div class="subgroup">
<span class="sub">A5 Cabriolet</span>
</div>
<div class="subgroup">
<span class="sub">S5 Coupe</span>
</div>
<div class="subgroup">
<span class="sub">S5 Sportback</span>
</div>
<div class="subgroup">
<span class="sub">RS 5 Sportback</span>
</div>
</li>
<li class="group">
<span class="title">
Audi A6
</span>
<div class="subgroup">
<span class="sub">A6</span>
</div>
<div class="subgroup">
<span class="sub">S6</span>
</div>
<div class="subgroup">
<span class="sub">RS 6</span>
</div>
</li>
<li class="group">
<span class="title">
Audi A7
</span>
<div class="subgroup">
<span class="sub">A7 Sportback</span>
</div>
<div class="subgroup">
<span class="sub">A7 Sportback TFSL e</span>
</div>
<div class="subgroup">
<span class="sub">S7</span>
</div>
<div class="subgroup">
<span class="sub">RS 7 Sportback</span>
</div>
</li>
<li class="group">
<span class="title">
Audi A8
</span>
<div class="subgroup">
<span class="sub">A8 L</span>
</div>
<div class="subgroup">
<span class="sub">S8 L</span>
</div>
<div class="subgroup">
<span class="sub">A8</span>
</div>
</li>
<li class="group">
<span class="title">
Audi Q2
</span>
<div class="subgroup">
<span class="sub">Q2</span>
</div>
</li>
<li class="group">
<span class="title">
Audi Q3
</span>
<div class="subgroup">
<span class="sub">Q3</span>
</div>
<div class="subgroup">
<span class="sub">Q3 Sportback</span>
</div>
</li>
<li class="group">
<span class="title">
Audi Q4
</span>
<div class="subgroup" aria-selected="true">
<span class="sub">Q4 e-tron</span>
</div>
<div class="subgroup">
<span class="sub">Q4 Sportback e-tron</span>
</div>
</li>
<li class="group">
<span class="title">
Audi Q5
</span>
<div class="subgroup">
<span class="sub">Q5</span>
</div>
<div class="subgroup">
<span class="sub">SQ5</span>
</div>
<div class="subgroup">
<span class="sub">Q5 Sportback</span>
</div>
<div class="subgroup">
<span class="sub">SQ5 Sportback</span>
</div>
</li>
<li class="group">
<span class="title">
Audi Q7
</span>
<div class="subgroup">
<span class="sub">Q7</span>
</div>
</li>
<li class="group">
<span class="title">
Audi Q8
</span>
<div class="subgroup">
<span class="sub">Q8</span>
</div>
<div class="subgroup">
<span class="sub">RS Q8</span>
</div>
</li>
</ul>
</div>
<div class="material-symbols-outlined">expand_more</div>
</div>
<div class="SectionCarNums">
<a href="javascript:void(0)" class="SectionNewCarsContainer">
<span class="SectionNumOfNewcars">15</span>
<span class="SectionNewCars">대의 신차</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</a>
<pre> </pre>
<a href="javascript:void(0)" class="SectionOldCarsContainer">
<span class="SectionNumOfOldcars">7</span>
<span class="SectionOldCars">대의 인증 중고차</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</a>
</div>
</div>
<ul class="SectionModelList">
<li class="SectionModel" aria-selected="true">
<span class="Model">모델</span>
</li>
<li class="SectionModelType" aria-selected="false">
<span class="Model">모델 유형</span>
</li>
</ul>
<div class="CarList">
<div class="CarListSroll">
<ul class="CarListModels">
<li class="Cars">
<div class="CarImg">
<img src="./image/2023.png" alt="" class="CarImage">
<span class="CarName">Audi e-tron GT</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2019.png" alt="" class="CarImage">
<span class="CarName">Audi e-tron</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2022.png" alt="" class="CarImage">
<span class="CarName">Audi A3</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2021.png" alt="" class="CarImage">
<span class="CarName">Audi A4</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2020.png" alt="" class="CarImage">
<span class="CarName">Audi A5</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2023 (1).png" alt="" class="CarImage">
<span class="CarName">Audi A6</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2019 (1).png" alt="" class="CarImage">
<span class="CarName">Audi A7</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2022 (1).png" alt="" class="CarImage">
<span class="CarName">Audi A8</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2023 (2).png" alt="" class="CarImage">
<span class="CarName">Audi Q2</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2022 (2).png" alt="" class="CarImage">
<span class="CarName">Audi Q3</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2022 (3).png" alt="" class="CarImage">
<span class="CarName">Audi Q4</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2021 (1).png" alt="" class="CarImage">
<span class="CarName">Audi Q5</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2020 (1).png" alt="" class="CarImage">
<span class="CarName">Audi Q7</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/2022 (4).png" alt="" class="CarImage">
<span class="CarName">Audi Q8</span>
</div>
</li>
</ul>
</div>
<div class="Left">
<span class="material-symbols-outlined">
arrow_back_ios
</span>
</div>
<div class="Right">
<span class="material-symbols-outlined">
arrow_forward_ios
</span>
</div>
</div>
<div class="CarType">
<ul class="CarListModels">
<li class="Cars">
<div class="CarImg">
<img src="./image/sportback.png" alt="" class="CarImage">
<span class="CarName">스포트백</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/suv.png" alt="" class="CarImage">
<span class="CarName">SUV</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/sedan.png" alt="" class="CarImage">
<span class="CarName">세단</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/cooper.png" alt="" class="CarImage">
<span class="CarName">쿠페</span>
</div>
</li>
<li class="Cars">
<div class="CarImg">
<img src="./image/Cabriolet.png" alt="" class="CarImage">
<span class="CarName">카브리올레</span>
</div>
</li>
</ul>
<div class="RightType">
<span class="material-symbols-outlined">
arrow_forward_ios
</span>
</div>
</div>
<div class="specific_cartype">
<div class="btnspancontainer">
<span class="xbtn">
<img src="./image/X_Button.svg" alt="" class="btn">
</span>
<span class="first"></span>
</div>
<ul class="list">
<li class="second">
<img src="" alt="" class="third1">
<span class="fourth1"></span>
</li>
<li class="second">
<img src="" alt="" class="third2">
<span class="fourth2"></span>
</li>
<li class="second">
<img src="" alt="" class="third3">
<span class="fourth3"></span>
</li>
<li class="second">
<img src="" alt="" class="third4">
<span class="fourth4"></span>
</li>
<li class="second">
<img src="" alt="" class="third5">
<span class="fourth5"></span>
</li>
<li class="second">
<img src="" alt="" class="third6">
<span class="fourth6"></span>
</li>
<li class="second">
<img src="" alt="" class="third7">
<span class="fourth7"></span>
</li>
<li class="second">
<img src="" alt="" class="third8">
<span class="fourth8"></span>
</li>
<li class="second">
<img src="" alt="" class="third9">
<span class="fourth9"></span>
</li>
<li class="second">
<img src="" alt="" class="third10">
<span class="fourth10"></span>
</li>
<li class="second">
<img src="" alt="" class="third11">
<span class="fourth11"></span>
</li>
<li class="second">
<img src="" alt="" class="third12">
<span class="fourth12"></span>
</li>
<li class="second">
<img src="" alt="" class="third13">
<span class="fourth13"></span>
</li>
<li class="second">
<img src="" alt="" class="third14">
<span class="fourth14"></span>
</li>
<li class="second">
<img src="" alt="" class="third15">
<span class="fourth15"></span>
</li>
</ul>
</div>
</section>
<section>
<div class="AD">
<div class="AD1">
<img src="./image/a7sbetron_570x857.jpg" alt="" class="AD1pic">
</div>
<div class="AD1text">
<span class="AD1title">Audi A7 Sportback TFSI e</span>
<span class="AD1des">플러그인 하이브리드, 디자인으로 완성되다</span>
<button class="AD1btn">
<span style="color: white;">자세히보기</span>
</button>
</div>
</div>
<div class="AD">
<div class="AD1">
<img src="./image/q8edition_570x857.jpg" alt="" class="AD1pic">
</div>
<div class="AD1text">
<span class="AD1title">Audi Q8 execlusive<br> edition</span>
<span class="AD1des">완벽한 프리미엄 SUV</span>
<button class="AD1btn">
<span style="color: white;">자세히보기</span>
</button>
</div>
</div>
<div class="AD">
<div class="AD1">
<img src="./image/s8l_570x857.jpg" alt="" class="AD1pic">
</div>
<div class="AD1text">
<span class="AD1title">Audi S8 L</span>
<span class="AD1des">Progress, 퍼포먼스로 완성되다</span>
<button class="AD1btn">
<span style="color: white;">자세히보기</span>
</button>
</div>
</div>
<div class="AD">
<div class="AD1">
<img src="./image/Q4_e-tron_570x857.jpg" alt="" class="AD1pic">
</div>
<div class="AD1text">
<span class="AD1title">Audi Q4 e-tron</span>
<span class="AD1des">진보된 미래를 먼저 만나보세요</span>
<button class="AD1btn">
<span style="color: white;">자세히보기</span>
</button>
</div>
</div>
</section>
<section>
<div class="Service">
<div class="Servicetitle">Audi Korea Service</div>
<ul class="Compos">
<a href="javascript:void(0)" class="ServiceComponent1">
<img src="./image/883x496_3.jpg" alt="" class="CompoImg1">
<div class="CompoText">
<p style="margin-top: 5px;">아우디 브랜드 소개<br>아우디는 세상을 이해하는 통찰력을 바탕으로 영감을 얻고, 미래를 그려 나갑니다.</p>
</div>
<div class="CompoLook">
<span>자세히 보기</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
</a>
<a href="javascript:void(0)" class="ServiceComponent2">
<img src="./image/img_883x496_2.jpg" alt="" class="CompoImg2">
<div class="CompoText">
<p style="margin-top: 5px;">Audi Service<br>당신이 일상에 집중할 수 있도록<br>처음부터 끝까지</p>
</div>
<div class="CompoLook">
<span>자세히 보기</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
</a>
<a href="javascript:void(0)" class="ServiceComponent3">
<img src="./image/img_883x496.jpg" alt="" class="CompoImg3">
<div class="CompoText">
<p style="margin-top: 5px;">Audi Connect<br>서비스 이용 제한 안내</p>
</div>
<div class="CompoLook">
<span>자세히 보기</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
</a>
</ul>
</div>
</section>
<section>
<div class="SNS">
<div class="Servicetitle">SNS @AudiKorea</div>
<ul class="Compos">
<a href="javascript:void(0)" class="ServiceComponent1_2">
<img src="./image/인스타그램_0724.jpg" alt="" class="CompoImg1">
<div class="SocialText1">
<p>더욱 강력한 존재감의 완벽한 프리미엄 SUV<br>Audi Q8 50 TDI quattro exclusive edition</p>
</div>
<div class="SocialDes">
<p>#Audi #아우디 #FutureIsAnAttitude #Progressyoucanfeel #exclusiveedition #exclusiveorder #Q8</p>
</div>
<div class="SocialLogo">
<img src="./image/Instagram-Free-Icon-rdfd.svg" alt="" class="LogoImg">
<div class="LogoText">
24.07.2023
</div>
</div>
</a>
<a href="javascript:void(0)" class="ServiceComponent2_2">
<img src="./image/페이스북_0724.jpg" alt="" class="CompoImg2">
<div class="SocialText2">
<p>[아우디 침수 차량 지원 서비스]<br>전국 아우디 공식 서비스센터에서 집중 호우로 인해 침수 피해가 발생한 차량의 무상점검 서비스를 제공합니다.</p>
</div>
<div class="SocialDes">
<p>#Audi #아우디 #AudiService #FutureIsAnAttitude #Progressyoucanfeel</p>
</div>
<div class="SocialLogo">
<img src="./image/facebook-svgrepo-com.svg" alt="" class="LogoImg">
<div class="LogoText">
24.07.2023
</div>
</div>
</a>
<a href="javascript:void(0)" class="ServiceComponent3_2">
<div class="YoutubeContainer">
<div class="material-symbols-outlined">
play_circle
</div>
<img src="./image/유튜브(쇼츠)_0703.jpg" alt="" class="CompoImg3">
</div>
<div class="SocialText3">
<p>Greentech Festival Berlin, e-tron의 현재와 미래를 그리다.</p>
</div>
<div class="SocialDes">
<p>#Audi #아우디 #FutureIsAnAttitude #GreentechFestival #GreentechFest #CelebrateChange #eMobility</p>
</div>
<div class="SocialLogo">
<img src="./image/youtube-123.svg" alt="" class="LogoImg">
<div class="LogoText">
03.07.2023
</div>
</div>
</a>
</ul>
</div>
</section>
<section>
<div class="Space"></div>
<div class="Space"></div>
</section>
<section>
<div class="Quickmenu">
<ul>
<li>
<div class="menucontainer">
<div class="Textmenu">
시승신청
</div>
<i class="icons">
<img src="./image/icon_testdrive.png" alt="" class="icon">
</i>
</div>
</li>
<li>
<div class="menucontainer">
<div class="Textmenu">
예약금 결제
</div>
<i class="icons">
<img src="./image/icon_pay.png" alt="" class="icon">
</i>
</div>
</li>
<li>
<div class="menucontainer">
<div class="Textmenu">
전시장 / AS센터
</div>
<i class="icons">
<img src="./image/icon_showroom2.png" alt="" class="icon">
</i>
</a>
</li>
<li>
<div class="menucontainer">
<div class="Textmenu">
서비스예약
</div>
<i class="icons">
<img src="./image/ico_quick_sv.png" alt="" class="icon">
</i>
</div>
</li>
<li>
<div class="menucontainer">
<div class="Textmenu">
채팅상담
</div>
<i class="icons">
<img src="./image/icon_chat.png" alt="" class="icon">
</i>
</div>
</li>
</ul>
</div>
</section>
</main>class로 관리
기존 코드
HeadMenuEls.addEventListener('click', function(e) {
i++;
if(i%2!=0){
NaviEl.style.display="block";
HeadLogoEl.style.display='none';
SearchEl.style.display='block';
SectionEls.style.display='none';
SectionSearchEls.style.display='none';
SectionModelEl.style.display='none';
CarListEl.style.display='none';
CarList.style.display='none';
CarTypeEl.style.display='none';
ServiceEl.style.display='none';
SnsEl.style.display='none';
specific.style.display='none';
ADEl.forEach(element => {
element.style.display = 'none';
});
SpaceEls.forEach(element => {
element.style.display='none';
});
FooterEl.style.display='none';
menuEl.style.display='none';
HeadLines1.style.animation='420ms ease 0s 1 normal forwards running disappear';
HeadLines2.style.animation='240ms ease 180ms 1 normal forwards running leftX';
HeadLines3.style.animation='240ms ease 180ms 1 normal forwards running rightX';
HeadLines4.style.animation='420ms ease 0s 1 normal forwards running disappear';
}
else{
NaviEl.style.display='none';
HeadLogoEl.style.display='block';
SearchEl.style.display='none';
SectionEls.style.display='block';
SectionSearchEls.style.display='flex';
SectionModelEl.style.display='inline-block';
CarListEl.style.display='flex';
CarList.style.display='block';
ServiceEl.style.display='block';
SnsEl.style.display='block';
specific.style.display='block';
ADEl.forEach(element => {
element.style.display = 'flex';
});
SpaceEls.forEach(element => {
element.style.display='block';
});
FooterEl.style.display='block';
menuEl.style.display='block';
if(ModelTypeEl.getAttribute('aria-selected')=='true'){
CarTypeEl.style.display='block';
}
HeadLines1.style.animation='420ms ease 0s 1 normal none running disappearback';
HeadLines2.style.animation='240ms ease 0s 1 normal none running leftbackX';
HeadLines3.style.animation='240ms ease 0s 1 normal none running rightbackX';
HeadLines4.style.animation='420ms ease 0s 1 normal none running disappearback';
}
});리팩토링 코드
class MenuHandler {
constructor() {
this.i = 0;
this.HeadMenuEls = HeadMenuEls;
this.NaviEl = NaviEl;
this.HeadLogoEl = HeadLogoEl;
this.SearchEl = SearchEl;
this.HeadLines1 = HeadLines1;
this.HeadLines2 = HeadLines2;
this.HeadLines3 = HeadLines3;
this.HeadLines4 = HeadLines4;
this.SectionEls = SectionEls;
this.SectionModelEl = SectionModelEl;
this.SectionSearchEls = SectionSearchEls;
this.CarListEl = CarListEl;
this.CarList = CarList;
this.CarTypeEl = CarTypeEl;
this.ADEl = ADEl;
this.ServiceEl = ServiceEl;
this.SpaceEls = SpaceEls;
this.SnsEl = SnsEl;
this.FooterEl = FooterEl;
this.menuEl = menuEl;
this.specific = specific;
this.HeadMenuEls.addEventListener('click', this.toggleMenu.bind(this));
}
toggleMenu() {
this.i++;
if (this.i % 2 !== 0) {
this.NaviEl.style.display = "block";
this.HeadLogoEl.style.display = 'none';
this.SearchEl.style.display = 'block';
this.SectionEls.style.display = 'none';
this.SectionSearchEls.style.display = 'none';
this.SectionModelEl.style.display = 'none';
this.CarListEl.style.display = 'none';
this.CarList.style.display = 'none';
this.CarTypeEl.style.display = 'none';
this.ServiceEl.style.display = 'none';
this.SnsEl.style.display = 'none';
this.specific.style.display = 'none';
this.ADEl.forEach(element => {
element.style.display = 'none';
});
this.SpaceEls.forEach(element => {
element.style.display = 'none';
});
this.FooterEl.style.display = 'none';
this.menuEl.style.display = 'none';
this.HeadLines1.style.animation = '420ms ease 0s 1 normal forwards running disappear';
this.HeadLines2.style.animation = '240ms ease 180ms 1 normal forwards running leftX';
this.HeadLines3.style.animation = '240ms ease 180ms 1 normal forwards running rightX';
this.HeadLines4.style.animation = '420ms ease 0s 1 normal forwards running disappear';
} else {
this.NaviEl.style.display = 'none';
this.HeadLogoEl.style.display = 'block';
this.SearchEl.style.display = 'none';
this.SectionEls.style.display = 'block';
this.SectionSearchEls.style.display = 'flex';
this.SectionModelEl.style.display = 'inline-block';
this.CarListEl.style.display = 'flex';
this.CarList.style.display = 'block';
this.ServiceEl.style.display = 'block';
this.SnsEl.style.display = 'block';
this.specific.style.display = 'block';
this.ADEl.forEach(element => {
element.style.display = 'flex';
});
this.SpaceEls.forEach(element => {
element.style.display = 'block';
});
this.FooterEl.style.display = 'block';
this.menuEl.style.display = 'block';
if (ModelTypeEl.getAttribute('aria-selected') == 'true') { // Commented out because ModelTypeEl is not defined in the code snippet
this.CarTypeEl.style.display = 'block';
}
this.HeadLines1.style.animation = '420ms ease 0s 1 normal none running disappearback';
this.HeadLines2.style.animation = '240ms ease 0s 1 normal none running leftbackX';
this.HeadLines3.style.animation = '240ms ease 0s 1 normal none running rightbackX';
this.HeadLines4.style.animation = '420ms ease 0s 1 normal none running disappearback';
}
}
}
const menuHandler = new MenuHandler();기존 코드
DownEl.addEventListener('click',function(e){
j++;
if(j%2!=0){
DownEl.style.transform='rotate(180deg)';
dropdownEl.style.display='block';
}
else{
DownEl.style.transform='none';
dropdownEl.style.display='none';
}
})리팩토링 코드
class DropdownHandler {
constructor() {
this.j = 0;
this.DownEl = DownEl;
this.dropdownEl = dropdownEl;
this.DownEl.addEventListener('click', this.toggleDropdown.bind(this));
}
toggleDropdown() {
this.j++;
if (this.j % 2 !== 0) {
this.DownEl.style.transform = 'rotate(180deg)';
this.dropdownEl.style.display = 'block';
} else {
this.DownEl.style.transform = 'none';
this.dropdownEl.style.display = 'none';
}
}
}
const dropdownHandler = new DropdownHandler();멘토님께서 클래스로 관리하는 것이 좋다고 하셔서 클래스로 만들어 보았습니다.
느낀점
첫 과제에 대한 리팩토링을 진행하였습니다. 비효율적이고 화면 구조도 올바르지 않아 리팩토링 하는 데 많은 시간을 소요하였습니다. 아무래도 올바른 설계 없이 무작정 구현에 집중한 것이 원인이라고 생각합니다. 다음 과제부턴 설계 이후에 구현을 할 계획입니다.
Frontend developer