goumi1009 / tomorrow-house

🏡내일의 집

goormedu의 '김버그의 UI 개발 부트캠프 - 경력같은 신입으로 레벨업' 강의를 보고 클론코딩한 Repository입니다.

배포주소

https://goumi1009.github.io/tomorrow-house/

1. GNB

• 로그인을 하지 않은 경우

<div class="button-group">
  <button
    class="gnb-icon-button is-search lg-hidden"
    type="button"
    aria-label="검색창 열기 버튼"
  >
    <i class="ic-search"></i>
  </button>

  <a
    class="gnb-icon-button is-cart"
    href="/"
    aria-label="장바구니 페이지로 이동"
  >
    <i class="ic-cart"></i>
  </a>
  <div class="gnb-auth sm-hidden">
    <a href="/">로그인</a>
    <a href="/">회원가입</a>
  </div>
</div>

• 로그인을 했을 경우

<div class="button-group">
  <button
    class="gnb-icon-button is-search lg-hidden"
    type="button"
    aria-label="검색창 열기 버튼"
  >
    <i class="ic-search"></i>
  </button>
  <a
    class="gnb-icon-button sm-hidden"
    href="/"
    aria-label="스크랩 페이지로 이동"
  >
    <i class="ic-bookmark"></i>
  </a>

  <a
    class="gnb-icon-button sm-hidden"
    href="/"
    aria-label="내소식 페이지로 이동"
  >
    <i class="ic-bell"></i>
  </a>

  <a
    class="gnb-icon-button is-cart"
    href="/"
    aria-label="장바구니 페이지로 이동"
  >
    <i class="ic-cart"></i>
    <strong class="badge">5</strong>
  </a>

  <button
    class="gnb-avatar-button sm-hidden"
    type="button"
    aria-label="마이메뉴 열기 버튼"
  >
    <div class="avatar-32">
      <img src="./assets/images/img-user-01.jpg" alt="사달라아저씨" />
    </div>
  </button>
</div>

2. Sidebar

• 로그인을 하지 않은 경우

<div class="sidebar-auth">
  <a class="btn-40 btn-outlined" href="/">로그인</a>
  <a class="btn-40 btn-primary" href="/">회원가입</a>
</div>

• 로그인을 한 경우

<div class="sidebar-user">
  <a href="/">
    <div class="avatar-24">
      <img src="./assets/images/img-user-01.jpg" alt="사달라 아저씨" />
    </div>
    <strong class="username">사달라아자씨</strong>
  </a>
</div>

tomorrow-house's Issues

Product Show > Review Card Variations

Review Card Variations

1. Review Card Header

Avatar	Username	Rating	Timestamp	Vender	Desc.	✅
O	필수	필수	필수	필수	유저프로필 이미지가 있는 경우	✅
X	필수	필수	필수	필수	유저프로필 이미지가 없는 경우	✅

2. Review Card Body

Image	Text Content	Desc.	✅
X	필수	유저가 리뷰 이미지를 올리지 않은 경우	✅
O	필수	유저가 리뷰 이미지를 올린 경우	✅

3. Review Card Footer

Help Button	Helped	Desc.	✅
True	O	사용자가 도움됨을 체크, 도움됨 1이상	✅
False	O	사용자가 도움됨을 미체크, 도움됨 1이상	✅
False	X	사용자가 도움됨을 미체크, 도움됨 0	✅

Product Show > Inquiry Card Variations

#Inquiry Card Variations

Public	Question	Anser	Desc.	✅
X	비밀글입니다.	미노출	문의가 비공개일 경우	✅
O	노출	X	문의 공개, 답변 미완료	✅
O	노출	O	문의 공개, 답변 완료	✅

Product Show > Product Section Checklist

Checklist

• Tab + TabPanel 구조
  • role을 사용해서 유기적으로 연결관계 구축
• 공통 컴포넌트
  • Tabpanel 내 헤더영역
    • 텍스트 만
    • 텍스트 + 뱃지 + 아이콘 링크
    • 텍스트 + 뱃지 + 텍스트 링크
    • 텍스트 + 뱃지 + 아이콘 버튼 (드랍다운, 모바일 only)
  • Tabpanel 내 table