개발 내용

---

UI 추가

• 회원 정보 수정 폼
  • 닉네임, 성별, 생년월일 수정 가능
  • input placeholder에 기존에 저장된 내용 뜨도록 state 추가
• 비밀번호 수정
  • 현재 비밀번호, 새 비밀번호, 새 비밀번호 확인 입력
• 헤더
  • PC 버전 : 로고, 검색창, Navbar, 로그아웃 버튼
  • Mobile 버전 : 로고, 검색창
  • 로고 클릭 시 메인 페이지로 이동
• Navbar
  • PC 버전 Navbar / Mobile 버전 Navbar 다르게 구현
• 마이페이지
  • 상품 컴포넌트 렌더링 될 부분 제외하고 전체 레이아웃 개발 완료

디자인

• 자주 쓰이는 색상(피그마 UI 디자인 참고) tailwind custom colors 설정

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        'main-color': '#8fb357',
        'bean-color': '#c5d778',
        'bean-head-color': '#e6ecbc',
        'custom-gray': {
          50: '#f7f7f7',
          100: '#efefef',
          400: '#B2B2B2',
          500: '#adadad',
          700: '#9ca3af',
          800: '#666666',
        },
        'nav-black': '#111111',
        'button-black': '#333333',
      },
    },
  },
};

• 반응형 디자인 일부 적용 완료
• 확정된 로고로 교체
  
  

기타

• 전체 / 남성 / 여성 글로벌 필터 기능 추가
• 최근 본 상품 / 맨 위로 가기 / 맨 아래로 가기 버튼 추가
• feat: global filter/menu 추가
• 스마트폰 목업 이미지 변경 - 출처 : Apple Design Resources

배운 점 & 트러블 슈팅

---

템플릿 문자열로 Tailwind CSS 적용 시 디자인 누락 문제

기존 코드

const genderTextColor = isEditMode ? 'main-color' : 'custom-gray-700';
const selectedGenderBorderColor = isEditMode ? 'main-color' : '';
const genderBackgroundColor = isEditMode ? 'transparent' : 'neutral-50'

로 선언 후 className 템플릿 문자열에 text-${genderTextColor}와 같이 작성

해결 코드

const genderTextColor = isEditMode ? 'text-main-color' : 'text-custom-gray-700';
const selectedGenderBorderColor = isEditMode ? 'border-main-color' : 'border';
const genderBackgroundColor = isEditMode ? 'bg-transparent' : 'bg-neutral-50'

로 선언 후 className 템플릿 문자열에 ${genderTextColor}와 같이 작성

Property 'id' does not exist on type 'EventTarget'.

기존 코드

const onGlobalFilterChange = (e: React.MouseEvent<HTMLButtonElement>) => {
    const selectedButton = e.target;  // const selectedButton: EventTarget
    setSelectedFilter(selectedButton.id);
    localStorage.setItem('globalFilter', selectedButton.id);
};

e.target으로 인해 selectedButton이 EventTarget 타입을 가지게 되는데, 이때 EventTarget이라는 타입에 value라는 속성이 없기 때문

해결 코드

const onGlobalFilterChange = (e: React.MouseEvent<HTMLButtonElement>) => {
    const selectedButton = e.target as HTMLButtonElement;
    setSelectedFilter(selectedButton.id);
    localStorage.setItem('globalFilter', selectedButton.id);
};

타입 단언(Type Assertion)을 이용해 해결