[윤혜림] Sprint6 (#226)

* chore: NavLink 추가하여 해당 페이지 버튼 Active 처리

* chore: 불필요한 코드 정리 및 파일 경로 정리

* chore: Footer 분리 및 디렉토리 경로 정리

* chore: 디렉토리명 변경

* chore: Router futer flag warning 메세지 출력으로 인해 v7 관련 코드 추가 및 불필요한 prop 삭제

* feat: 스프린트 미션6

* chore: 이미지 디렉토리 정리

* refactor(mentor): 패키지 이름 변경

* refactor(mentor): 불필요 fragment 삭제

* refactor(mentor): 콤포넌트명과 파일명 일치 하도록 변경

* refactor(mentor): button 태그 제거 후 a태그 자체를 버튼과 동일한 스타일을 지닐 수 있도록 클래스 적용

* refactor(mentor): 추후 고려사항 주석 추가

* refactor(mentor): Pagination 콤포넌트명 handlePagination에서 PaginationContainer로 변경

* refactor(mentor): 단순 값만 꺼내는 용도의 불필요한 변수 선언 제거

* refactor(mentor): UI적인 부분을 보여주기 위한 전처리 데이터로, priceNum에서 formattedPrice로 변수명 변경

* refatcor(mentor): 불필요한 데이터 존재 여부 체크 코드 삭제

* refactor(mentor): 검색 기능까지 있는 비지니스적 로직들이 담겨 있으므로 productList에서 productContainer로 state명 변경

* chore:불필요한 class 삭제

* chore: 불필요한 변수 할당 수정 누락 건 추가

* chore: CSS 파일명 직관적인 네임으로 변경 및 Loading 페이지 추가

* perf: Suspense 사용으로 네트워크 속도 저하에 UI적 대응

* chore: loader CSS 수정

* chore: 상품 등록하기 이미지 preview 관련 CSS 수정

* chore: 상품 썸네일 CSS 누락 건 추가

* chore: 불필요한 CSS 제거

* chore: 이미지 썸네일 임시 배경색 제거

* chore: 중고마켓 전체 상품 출력할 데이터가 없을 시 UI 추가

* chore: 테스트용 console.log 삭제

* chore: 상품 등록하기 input 조건 충족 시 등록 버튼 활성화 버그 수정 및 로그인 페이지 UI 추가

* feat: Javascript로 제작했던 로그인 페이지를 리액트 버전으로 추가

* chore: 상품 등록하기 input 조건 충족 시 등록 버튼 활성화 버그 수정 및 회원가입 페이지 리액트 버전으로 추가

* chore: UI 관련 CSS 누락건 추가

* chore: 사용하지 않는 hook 및 prop 제거

* chore: Pagination 반응형 버그 수정

* chore: 페이지네이션 라이브러리 제거 및 새로 구현

* chore: 주석 추가

* chore: 미디어쿼리 중복 계산식 삭제

* chore: pagination 첫 렌더링 시 나오지 않는 버그 수정

package.json

@@ -1,18 +1,22 @@
 {
-  "name": "sprint5",
+  "name": "pandamarket",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.7",
+    "format": "^0.2.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-js-pagination": "^3.0.3",
+    "react-number": "^0.0.1-alpha4",
+    "react-number-format": "^5.4.2",
     "react-responsive": "^10.0.0",
     "react-router-dom": "^6.28.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.13",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/api.js → src/Api/api.js

@@ -1,4 +1,4 @@
-async function productData({ orderBy, pageSize, search, page }) {
+async function getProductData({ orderBy, pageSize, search, page }) {
   const query = `page=${page}&orderBy=${orderBy}&pageSize=${pageSize}&keyword=${search}`;
   const response = await fetch(
     `https://panda-market-api.vercel.app/products?${query}`
@@ -11,4 +11,4 @@ async function productData({ orderBy, pageSize, search, page }) {
   return body;
 }
 
-export default productData;
+export default getProductData;