[Jace] Amazon W3 PR #67

jacenam · 2023-04-18T12:41:41Z

📝 계획

네비게이션 바 및 모달, 사이드 바 등의 기본적인 UI(HTML, CSS) 구현 완료
이번 주부터 UX 기능(모달, 검색, API)을 구현하기 위한 JS 학습 및 구현에 몰입할 예정

📌 기능 요구사항

⌗ Side-bar

네비게이션 바 서브의 [모두] 버튼 클릭 시 좌측에서 사이드바가 애니메이션과 함께 나타나며 배경은 딤처리([X] 버튼 클릭 시 사이드바 close)
사이드바 내 [모두 보기] 버튼 클릭 시 애니메이션과 함께 모든 카테고리 메뉴가 unfold되며 [모두 보기] 버튼은 [간략히 보기]로 변경(반대로, [간략히 보기] 버튼 클릭 시 모든 카테고리 메뉴 fold)
'부서별 쇼핑' 하위 카테고리 클릭 시 상세 카테고리 레이어가 우측에서 좌측으로 애니메이션과 함께 나타나며 [주메뉴] 영역 클릭 시 애니메이션과 함께 좌측에서 우측으로 해당 레이어 제거

⌗ Search-input

검색바 클릭 시 추천 검색어 10개가 표시된 레이어가 나타나며 배경은 딤처리(레이어 외 영역 클릭 시 레이어 close)
키보드 [↓, ↑, ←, →] 방향키를 통해 추천 검색어 목록 간 이동 기능 및 목록 배경색 포커싱 색상 표시
검색어 입력 시 연관 자동완성 검색어 10개가 표시된 레이어가 나타나며 배경은 딤처리(레이어 외 영역 클릭 시 레이어 close)
키보드 [↓, ↑, ←, →] 방향키를 통해 자동완성 검색어 목록 간 이동 기능 및 목록 배경색 포커싱 색상 표시
검색어 검색 후 검색 내역 단어 5개가 추천 검색어 레이어 위에 추가되며, [X] 버튼 클릭 시 목록에서 해당 검색어 삭제
키보드 [↓, ↑, ←, →] 방향키를 통해 검색 내역 & 추천 검색어 목록 간 이동 기능 및 목록 배경색 포커싱 색상 표시

⌗ Modal

페이지 최초 진입 후 1초 뒤 [로그인] 버튼 천천히 표시([로그인] 영역 마우스 호버 전까지 유지)
[로그인] 영역 마우스 호버 시 계정 관련 확장 레이어가 나타나고 배경은 딤처리(마우스 out 시 레이어 & 딤처리 효과 제거)
[배송처] 영역 마우스 호버 시 주소 관련 확장 레이어가 나타나고 배경은 딤처리(마우스 out 시 레이어 & 딤처리 효과 제거)

📌 프로그래밍 요구사항

검색창의 자동완성 검색어, 사이드바 카테고리(상세/간략) 메뉴 데이터를 json-server와 연동해서 get
fetch API를 활용한 데이터 통신 방식으로 개발(XHR, axios 사용 금지)
promise 패턴에 대한 이해가 없다면 then 메서드 활용
서버 데이터 구성은 mock data로 활용 가능

hjsong333 · 2023-04-19T02:46:28Z

index.html

+      </nav>
+    </header>
+    <main id="content-wrap"></main>
+    <aside id="side-bar">


이 부분만 id인 이유가 있을까요?

크롤링할 때 id값을 가진 것의 우선순위가 높은건 처음 알았네요! 👍

정확한 내용인지는 더블체크해서 다시 말씀드리겠습니다~

hjsong333

공부한 것들을 바탕으로 레이아웃을 빠르게 잡아가고 계신 것 같아요!
질문했을 때 흔들림없이 대답하시는 모습 인상 깊었습니다. 남은 미션도 화이팅!

hjsong333 · 2023-04-19T07:25:11Z

index.html

+        <div class="shipping-address">
+          <div class="shipping-address__label">
+            <img src="./src/assets/location.svg" />
+            <p>배송처</p>
          </div>
-          <div class="shipping-address">
-            <div class="shipping-address__label">
-              <img src="./src/assets/location.svg" />
-              <p>배송처</p>
+          <div class="shipping-address__country">
+            <p>대한민국</p>
+          </div>
+          <div class="shipping-address__modal">
+            <div class="shipping-modal-content__msg">
+              <p>KR로 배송할 품목을 표시하겠습니다. 다른 국가로 배송되는 품목을 보려면 배송 주소를 변경하십시오.</p>
            </div>
-            <div class="shipping-address__country">
-              <p>대한민국</p>
+            <div class="shipping-modal-content__btn">


BEM 적용하셨네요! 언젠가 Sass도 같이 사용해보시면 좋을 것 같습니다.
개인적으로 스타일 코드가 컴팩트하게 정리된 경험이 있어서 추천합니다. 👍

BEM을 아직 제대로 숙지하지는 못해서 최대한 잘 짜신 분들 코드 보면서 따라해보고 있었네요. 젤로의 코드를 개인적으로 좋아해서 자주 참고하겠습니다 :)

hjsong333 · 2023-04-19T07:26:41Z

index.html

+              <div class="menu__your-list">
+                <p>귀하의 목록</p>
+                <p>목록 생성</p>
+                <p>목록 또는 레지스트리 찾기</p>
+                <p>AmazonSmile 자선 품목 목록</p>
+              </div>
+              <div class="menu__account">
+                <p>계정</p>
+                <p>계정</p>
+                <p>주문</p>
+                <p>권장 사항</p>
+                <p>검색 기록</p>
+                <p>워치리스트</p>
+                <p>비디오 구매 및 대여</p>
+                <p>Kindle 언리미티드</p>
+                <p>콘텐츠 및 기기</p>
+                <p>항목 구독 및 저장</p>
+                <p>멤버십 및 구독</p>
+                <p>음악 라이브러리</p>
+              </div>


데이터간의 관계를 생각해서 ul 태그를 사용해보시는건 어떨까요?

넵 그렇게 하겠습니다! 저 때는 아무 생각 없이 급하게 짜느라 고려치 못했던 부분이네요! 짚어주셔서 감사합니다

hjsong333 · 2023-04-19T07:30:34Z

src/style/style.css

+.logo,
+.shipping-address__label,
+.shipping-address__country,
+.nation,
+.login__label p,
+.my-page,
+.cart,
+.sub-menu__left,
+.sub-menu__right,
+.search-bar__expand-auto,
+.recommend-items,
+.category-digita,
+.category-section,
+.category-section__default {
+  cursor: pointer;
+}


커서를 포인터로 보이게해야하는 요소가 계속 늘어나면 관리하기가 어려워질 것 같아요 😢

안그래도 다른 분들은 어떻게 이 부분을 처리했는지 고민 되었네요. 실제로 어떤 요소들을 포인터로 보이게 했는지 기억도 잘 안났구요.. 혹시 그럼 각 요소의 스타일링 안에 매번 커서 - 포인터 지정해주는건 괜찮은 방법일까요?

개인적으로 생각했던 방식은 이런 방식이에요.

.clickable { cursor: pointer; }

이런 셀렉터를 하나 만들어서 포인터로 변환이 필요한 요소의 클래스에 추가해주는 방식입니다.
부트스트랩 같은 프레임워크에서 많이 사용하는 방식인데, 좋은 방식인지는 잘 모르겠습니다. 클래스 이름이 길어지거든요.

실제로 개인 작업과 협업 시 무엇이 더 편리할지 사용해 보고 판단해볼 수 있겠네요. 일단 커서 포인터가 필요한 요소들만 따로 빼서 관리하는 기존 방법이 실제로 편리하진 않았던 거 같습니다. 셀렉터를 따로 하나 빼서 사용해보는 방식으로 이번에 고쳐봐야겠어요! 해보고 후기 들려드릴게요!

hjsong333 · 2023-04-19T07:34:46Z

src/style/style.css

+  height: 0;
+  border-right: 20.15px solid transparent;
+  border-left: 20.15px solid transparent;
+  border-bottom: calc(20.15px * 1.732) solid var(--color-white);


연산이 필요한 속성값이 여러군데에서 보이네요. 이러면 매번 계산이 되지 않을까요?

오... 그 부분은 생각하지 못했네요. 아예 연산을 해버린채로 고정값을 넣어야겠습니다!

코드의 중복을 줄일 수 있는 방법을 적용해봐도 괜찮을 것 같습니다.
변수화라거나...

jacenam added 4 commits April 18, 2023 21:00

style: common style 업데이트

7702c09

style: reset style 업데이트

bd03a5f

style: theme style 업데이트

96900e1

feat: 모달, 사이드바 UI 구현

83b1a53

jacenam self-assigned this Apr 18, 2023

jacenam marked this pull request as draft April 18, 2023 12:49

hjsong333 reviewed Apr 19, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Jace] Amazon W3 PR #67

[Jace] Amazon W3 PR #67

jacenam commented Apr 18, 2023 •

edited

Loading

hjsong333 Apr 19, 2023

hjsong333 Apr 19, 2023

jacenam Apr 19, 2023

hjsong333 left a comment

hjsong333 Apr 19, 2023

jacenam Apr 19, 2023

hjsong333 Apr 19, 2023

jacenam Apr 19, 2023

hjsong333 Apr 19, 2023

jacenam Apr 19, 2023

hjsong333 Apr 19, 2023

jacenam Apr 19, 2023

hjsong333 Apr 19, 2023

jacenam Apr 19, 2023

hjsong333 Apr 19, 2023

[Jace] Amazon W3 PR #67

Are you sure you want to change the base?

[Jace] Amazon W3 PR #67

Conversation

jacenam commented Apr 18, 2023 • edited Loading

📝 계획

📌 기능 요구사항

📌 프로그래밍 요구사항

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hjsong333 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jacenam commented Apr 18, 2023 •

edited

Loading