📗 작업 내역

• 검색시 현재 상품중에서 존재하는 상품을 필터링 키워드로 노출한다.
• 검색 결과물 클릭해 해당 상품을 화면에 노출한다.
• 검색 클릭시 해당 검색어를 필터란에 추가한다.

📕 작업 유형

• 기능구현, 기능 개선,

📘 기타

📗 작업 내역

• netlify 작업물 배포
• 배포 결과물 확인 (https://62d399be4624d4170e15404a--dott-musinsa.netlify.app/)
• 배포 관련 에러 수정

📕 작업 유형

• 배포

📘 기타

배포 관련 웹팩 에러
에러 메세지
$refreshreg$ is not defined

이유 웹팩 common 설정중 바벨 플러그인중 react-refresh 가 설정 되어있는데 이는 개발 설정 (@pmmmwh/react-refresh) 전용 이라 배포후 에러때문에 결과물을 확인 할 수 없었음 빌드 시 이설정 제거함

📗 작업 내역

• 만들어진 정적 컴포넌트 리팩토링을 진행한다.
• 재사용 가능한 요소를 점검한다.
• 폴더별 관심사와 컴포넌트의 관심사에 대해 점검한다.
• Context 폴더의 관심사를 분리한다
• 템플릿 폴더에 속한 컴포넌트 내부 로직을 분리한다.
• 페이지 폴더에 속한 컴포넌트 내부 로직을 분리한다.

📕 작업 유형

• 리팩토링, 정적 디자인, 디자인 개선, 코드 간결화, 동적 기능 개선

📘 기타

📗 작업 내역

• 상단 필터 바의 탭이 각각의 필터링 기능을 갖춰 제품 데이터를 필터링 하여 화면에 노출한다.
• 기존 무한 스크롤 기능과 필터링 기능을 접목 시킨다.
• 현재 활성화된 필터링 버튼을 화면에 노출한다.
• 활성화된 필터링의 X 버튼 클릭시 필터링 기능이 비활성화된다.
• refresh 아이콘을 클릭시 필터링 기능이 전부 비활성화 된다.

📕 작업 유형

• 동적기능, 기존 기능과 결합

📘 기타

기존 무한 스크롤 기능 과 의 작동이 정상처리 되어야한다.

📗 작업 내역

• 컴포넌트 개발 돌입전 글로벌 스타일을 설정한다
• 헤더 영역 템플릿을 개발한다.
• 레이아웃 스타일을 설정한다.
• 아이콘 사용 관련 설정을 추가한다.
• 헤더 영역의 탭 바 영역을 개발한다.
• 탭 바의 탭들을 재사용 가능하게 구현한다.

📕 작업 유형

• 정적 컴포넌트 구현, 디자인 작업

📘 기타

동적 기능추가를 위해 작은 단위로 나누는 것과 프로젝트 폴더 구조를 고려한다.

📗 작업 내역

• 리액트 관련 웹팩 환경설정
• 웹팩 설정 개발용, 배포용 나누기
• 바벨 리액트 + TS 관련 설정
• 바벨 스타일드 컴포넌트 대응
• 린트 airbnb + TS 설정

📕 작업 유형

• 환경 설정

📘 기타

1차 기본 설정으로 프로젝트 진행 과 동시에 설정 추가 및 수정이 진행 될 수 있음

📗 작업 내역

• 데이터를 지연적으로 필요한 만큼만 화면에 노출한다.
• ineterSectionObserver Api를 학습한다.
• 스크롤이 바닥까지 내려 갔을 경우 추가 상품 데이터를 화면에 노출한다.
• Suspense를 이용하여 로딩스피너를 대기 시간동안 화면에 노출한다.
• 데이터가 도착하면 로딩 스피너를 제거한다.
• 서버에 더 이상 데이터가 없을 경우 이벤트를 상품이 없음을 화면에 노출한다(에러 핸들링).

📕 작업 유형

• 동적 기능구현, 로딩 처리, 에러처리

📘 기타

📗 작업 내역

• 아이템 데이터가 들어올 것을 고려한 아이템 카드를 구현한다.
• 아이템 카드의 템플릿을 1단계로 구현한다.
• 아이템 카드 템플릿을 하위 컴포넌트로 분리한다.
• 아이템 카드의 사용할 커스텀 훅을 구현한다.
• 아이템 카드의 이미지를 데이터 통신을 이용해 구현한다..
• 아이템 카드의 이미지 에러 처리를 구현한다.
• 아이템 카드가 데이터 만큼 생성되고 그에 따라 화면 배치가 잘 되는지를 검사한다.

📕 작업 유형

• 정적 컴포넌트 구현, 디자인 작업, 데이터 처리, 에러처리

📘 기타

버그 설명

Home 컴포넌트 Import 관련 동일한 파일에서의 대소문자 관련 에러 발생

버그 상황 설명(순서)

App.tsx 에서 Home컴포넌트를 사용하려 import 한 순간 import 에러 발생함

정상 동작 설명

import 관련 에러가 없어야함 다른 파일 import 정상 작동중

스크린샷

데스크탑 환경 정보

OS

윈도 10

브라우저 종류

크롬

브라우저 버전

크롬 최신버전

모바일 환경 정보

기종

OS

브라우저

브라우저 버전

기타

해결 폴더 관련 경로중 대문자 발견 -> 기존 경로에 맞게 변경함

📗 작업 내역

• 정적 검색창을 구현한다.
• 검색창이 헤더 탭 바 및 에 배치된다.

📕 작업 유형

• 정적 컴포넌트 구현, 디자인 작업

📘 기타