diff --git a/sprint4/.gitignore b/.gitignore
similarity index 100%
rename from sprint4/.gitignore
rename to .gitignore
diff --git a/sprint4/.prettierrc b/.prettierrc
similarity index 100%
rename from sprint4/.prettierrc
rename to .prettierrc
diff --git a/sprint4/eslint.config.js b/eslint.config.js
similarity index 100%
rename from sprint4/eslint.config.js
rename to eslint.config.js
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..72e95e3
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ 판다마켓
+
+
+
+
+
+
diff --git a/sprint4/package-lock.json b/package-lock.json
similarity index 90%
rename from sprint4/package-lock.json
rename to package-lock.json
index d997222..f6820ad 100644
--- a/sprint4/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,10 @@
"version": "0.0.0",
"dependencies": {
"@tailwindcss/vite": "^4.1.18",
+ "axios": "^1.13.2",
"react": "^19.2.0",
"react-dom": "^19.2.0",
- "tailwindcss": "^4.1.18",
+ "react-router-dom": "^7.13.0",
"use-debounce": "^10.0.6"
},
"devDependencies": {
@@ -1693,6 +1694,23 @@
"dev": true,
"license": "Python-2.0"
},
+ "node_modules/asynckit": {
+ "version": "0.4.0",
+ "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+ "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+ "license": "MIT"
+ },
+ "node_modules/axios": {
+ "version": "1.13.2",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
+ "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+ "license": "MIT",
+ "dependencies": {
+ "follow-redirects": "^1.15.6",
+ "form-data": "^4.0.4",
+ "proxy-from-env": "^1.1.0"
+ }
+ },
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1756,6 +1774,19 @@
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
}
},
+ "node_modules/call-bind-apply-helpers": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+ "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0",
+ "function-bind": "^1.1.2"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
"node_modules/callsites": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -1824,6 +1855,18 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/combined-stream": {
+ "version": "1.0.8",
+ "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+ "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+ "license": "MIT",
+ "dependencies": {
+ "delayed-stream": "~1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
"node_modules/concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1838,6 +1881,19 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/cookie": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+ "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=18"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/express"
+ }
+ },
"node_modules/cross-spawn": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -1885,6 +1941,15 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/delayed-stream": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+ "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.4.0"
+ }
+ },
"node_modules/detect-libc": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -1894,6 +1959,20 @@
"node": ">=8"
}
},
+ "node_modules/dunder-proto": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+ "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+ "license": "MIT",
+ "dependencies": {
+ "call-bind-apply-helpers": "^1.0.1",
+ "es-errors": "^1.3.0",
+ "gopd": "^1.2.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
"node_modules/electron-to-chromium": {
"version": "1.5.267",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
@@ -1914,6 +1993,51 @@
"node": ">=10.13.0"
}
},
+ "node_modules/es-define-property": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+ "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/es-errors": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+ "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/es-object-atoms": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+ "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/es-set-tostringtag": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+ "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0",
+ "get-intrinsic": "^1.2.6",
+ "has-tostringtag": "^1.0.2",
+ "hasown": "^2.0.2"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
"node_modules/esbuild": {
"version": "0.27.2",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz",
@@ -2252,6 +2376,42 @@
"dev": true,
"license": "ISC"
},
+ "node_modules/follow-redirects": {
+ "version": "1.15.11",
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+ "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+ "funding": [
+ {
+ "type": "individual",
+ "url": "https://github.com/sponsors/RubenVerborgh"
+ }
+ ],
+ "license": "MIT",
+ "engines": {
+ "node": ">=4.0"
+ },
+ "peerDependenciesMeta": {
+ "debug": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/form-data": {
+ "version": "4.0.5",
+ "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+ "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+ "license": "MIT",
+ "dependencies": {
+ "asynckit": "^0.4.0",
+ "combined-stream": "^1.0.8",
+ "es-set-tostringtag": "^2.1.0",
+ "hasown": "^2.0.2",
+ "mime-types": "^2.1.12"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2266,6 +2426,15 @@
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
+ "node_modules/function-bind": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+ "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+ "license": "MIT",
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
"node_modules/gensync": {
"version": "1.0.0-beta.2",
"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -2276,6 +2445,43 @@
"node": ">=6.9.0"
}
},
+ "node_modules/get-intrinsic": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+ "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+ "license": "MIT",
+ "dependencies": {
+ "call-bind-apply-helpers": "^1.0.2",
+ "es-define-property": "^1.0.1",
+ "es-errors": "^1.3.0",
+ "es-object-atoms": "^1.1.1",
+ "function-bind": "^1.1.2",
+ "get-proto": "^1.0.1",
+ "gopd": "^1.2.0",
+ "has-symbols": "^1.1.0",
+ "hasown": "^2.0.2",
+ "math-intrinsics": "^1.1.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/get-proto": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+ "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+ "license": "MIT",
+ "dependencies": {
+ "dunder-proto": "^1.0.1",
+ "es-object-atoms": "^1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
"node_modules/glob-parent": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -2302,6 +2508,18 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/gopd": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+ "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
"node_modules/graceful-fs": {
"version": "4.2.11",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -2318,6 +2536,45 @@
"node": ">=8"
}
},
+ "node_modules/has-symbols": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+ "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/has-tostringtag": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+ "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+ "license": "MIT",
+ "dependencies": {
+ "has-symbols": "^1.0.3"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/hasown": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+ "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+ "license": "MIT",
+ "dependencies": {
+ "function-bind": "^1.1.2"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
"node_modules/hermes-estree": {
"version": "0.25.1",
"resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
@@ -2793,6 +3050,36 @@
"@jridgewell/sourcemap-codec": "^1.5.5"
}
},
+ "node_modules/math-intrinsics": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+ "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/mime-db": {
+ "version": "1.52.0",
+ "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+ "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/mime-types": {
+ "version": "2.1.35",
+ "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+ "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+ "license": "MIT",
+ "dependencies": {
+ "mime-db": "1.52.0"
+ },
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
"node_modules/minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2985,6 +3272,12 @@
"node": ">= 0.8.0"
}
},
+ "node_modules/proxy-from-env": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+ "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+ "license": "MIT"
+ },
"node_modules/punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3010,6 +3303,7 @@
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
"integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
"license": "MIT",
+ "peer": true,
"dependencies": {
"scheduler": "^0.27.0"
},
@@ -3027,6 +3321,44 @@
"node": ">=0.10.0"
}
},
+ "node_modules/react-router": {
+ "version": "7.13.0",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.0.tgz",
+ "integrity": "sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw==",
+ "license": "MIT",
+ "dependencies": {
+ "cookie": "^1.0.1",
+ "set-cookie-parser": "^2.6.0"
+ },
+ "engines": {
+ "node": ">=20.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=18",
+ "react-dom": ">=18"
+ },
+ "peerDependenciesMeta": {
+ "react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/react-router-dom": {
+ "version": "7.13.0",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.0.tgz",
+ "integrity": "sha512-5CO/l5Yahi2SKC6rGZ+HDEjpjkGaG/ncEP7eWFTvFxbHP8yeeI0PxTDjimtpXYlR3b3i9/WIL4VJttPrESIf2g==",
+ "license": "MIT",
+ "dependencies": {
+ "react-router": "7.13.0"
+ },
+ "engines": {
+ "node": ">=20.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=18",
+ "react-dom": ">=18"
+ }
+ },
"node_modules/resolve-from": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3094,6 +3426,12 @@
"semver": "bin/semver.js"
}
},
+ "node_modules/set-cookie-parser": {
+ "version": "2.7.2",
+ "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+ "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+ "license": "MIT"
+ },
"node_modules/shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
diff --git a/sprint4/package.json b/package.json
similarity index 91%
rename from sprint4/package.json
rename to package.json
index 14a155f..a6abadc 100644
--- a/sprint4/package.json
+++ b/package.json
@@ -11,9 +11,10 @@
},
"dependencies": {
"@tailwindcss/vite": "^4.1.18",
+ "axios": "^1.13.2",
"react": "^19.2.0",
"react-dom": "^19.2.0",
- "tailwindcss": "^4.1.18",
+ "react-router-dom": "^7.13.0",
"use-debounce": "^10.0.6"
},
"devDependencies": {
diff --git a/sprint4/public/logo.svg b/public/logo.svg
similarity index 100%
rename from sprint4/public/logo.svg
rename to public/logo.svg
diff --git a/sprint4/README.md b/sprint4/README.md
deleted file mode 100644
index cf4013c..0000000
--- a/sprint4/README.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# React + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## React Compiler
-
-The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
-
-Note: This will impact Vite dev & build performances.
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
diff --git a/sprint4/index.html b/sprint4/index.html
deleted file mode 100644
index fe55fbf..0000000
--- a/sprint4/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-
-
-
-
-
- 판다마켓
-
-
-
-
-
-
diff --git a/sprint4/src/App.jsx b/sprint4/src/App.jsx
deleted file mode 100644
index 0c3db53..0000000
--- a/sprint4/src/App.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Footer } from './components/Footer';
-import { Header } from './components/Header';
-import { BestProductList } from './components/BestProductList';
-import { ProductList } from './components/ProductList';
-import { ProductListSection } from './components/ProductListSection';
-
-function App() {
- return (
- <>
-
-
-
- 중고마켓 - 판다마켓
-
-
-
-
-
-
- >
- );
-}
-
-export default App;
diff --git a/sprint4/src/api/Products.js b/sprint4/src/api/Products.js
deleted file mode 100644
index bc8622e..0000000
--- a/sprint4/src/api/Products.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import axios from 'axios';
-
-export const getProducts = async () => {
- try {
- const { data } = await axios.get('https://panda-market-api.vercel.app/api/products');
- return data;
- } catch (error) {
- console.error('API 에러:', error);
- return [];
- }
-};
diff --git a/sprint4/src/components/BestProductList.jsx b/sprint4/src/components/BestProductList.jsx
deleted file mode 100644
index 83f02b6..0000000
--- a/sprint4/src/components/BestProductList.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import likeIcon from '../assets/icons/like.svg';
-import { useEffect, useState } from 'react';
-import { priceFormat } from '../utils/format';
-
-export function BestProductList() {
- //
- //
- const [products, setProducts] = useState([]);
-
- useEffect(() => {
- const getBestProducts = async () => {
- const params = new URLSearchParams({
- page: 1,
- pageSize: 4,
- orderBy: 'favorite',
- });
-
- const res = await fetch(
- `https://panda-market-api.vercel.app/products?${params.toString()}`,
- );
- const data = await res.json();
- setProducts(data.list);
- };
-
- getBestProducts();
- }, []);
-
- return (
-
- {products.map((product) => {
- const [imgSrc] = product.images;
-
- return (
- -
-
-
-
{product.name}
-
{priceFormat(product.price)}원
-
-

{product.favoriteCount}
-
-
-
- );
- })}
-
- );
-}
diff --git a/sprint4/src/components/Footer.jsx b/sprint4/src/components/Footer.jsx
deleted file mode 100644
index b6f499d..0000000
--- a/sprint4/src/components/Footer.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import facebook from '../assets/icons/facebook.svg';
-import instagram from '../assets/icons/instagram.svg';
-import twitter from '../assets/icons/twitter.svg';
-import youtube from '../assets/icons/youtube.svg';
-
-export function Footer() {
- return (
-
- );
-}
diff --git a/sprint4/src/components/Header.jsx b/sprint4/src/components/Header.jsx
deleted file mode 100644
index eabd963..0000000
--- a/sprint4/src/components/Header.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import logo from '../assets/logo-with-text.svg';
-
-export function Header() {
- return (
-
- );
-}
diff --git a/sprint4/src/components/Pagination.jsx b/sprint4/src/components/Pagination.jsx
deleted file mode 100644
index 4629536..0000000
--- a/sprint4/src/components/Pagination.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import arrowRightIcon from '../assets/icons/arrow-right.svg';
-
-const PAGE_BUTTONS = 5;
-
-export function Pagination({
- totalCount,
- pageSize,
- currentPage,
- handlePageChange,
-}) {
- const totalPages = Math.ceil(totalCount / pageSize);
-
- let startPage = currentPage - Math.floor(PAGE_BUTTONS / 2);
- startPage = Math.max(1, startPage);
- startPage = Math.min(startPage, totalPages - PAGE_BUTTONS + 1);
- startPage = Math.max(1, startPage);
-
- const allPages = Array.from(
- { length: Math.min(PAGE_BUTTONS, totalPages) },
- (_, i) => startPage + i,
- );
-
- return (
-
- );
-}
diff --git a/sprint4/src/components/ProductList.jsx b/sprint4/src/components/ProductList.jsx
deleted file mode 100644
index 73103c7..0000000
--- a/sprint4/src/components/ProductList.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import likeIcon from '../assets/icons/like.svg';
-import { priceFormat } from '../utils/format';
-
-export function ProductList({ products }) {
- const productList = products || [];
-
- return (
-
- {productList.map((product) => {
- const [imgSrc] = product.images;
-
- return (
- -
-
-
-
{product.name}
-
{priceFormat(product.price)}원
-
-

{product.favoriteCount}
-
-
-
- );
- })}
-
- );
-}
diff --git a/sprint4/src/components/ProductListSection.jsx b/sprint4/src/components/ProductListSection.jsx
deleted file mode 100644
index ca246ea..0000000
--- a/sprint4/src/components/ProductListSection.jsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { ProductList } from './ProductList';
-import searchIcon from '../assets/icons/search.svg';
-import arrowDownIcon from '../assets/icons/arrow-down.svg';
-import { useEffect, useState } from 'react';
-import { useDebouncedCallback } from 'use-debounce';
-import { Pagination } from './Pagination';
-
-const DELAY = 300;
-
-export function ProductListSection() {
- const [products, setProducts] = useState([]);
- const [orderBy, setorderBy] = useState('recent');
- const [isOpen, setIsOpen] = useState(false);
- const [keyword, setKeyword] = useState('');
- const [currentPage, setCurrentPage] = useState(1);
-
- const handleOrderBy = (orderBy) => {
- setorderBy(orderBy);
- setIsOpen(false);
- };
- const handleIsOpen = () => {
- setIsOpen(!isOpen);
- };
- const handleSearch = useDebouncedCallback((e) => {
- const value = e.target.value;
- setKeyword(value);
- }, DELAY);
- const handlePageChange = (page) => {
- setCurrentPage(page);
- };
-
- useEffect(() => {
- const getProducts = async () => {
- const params = new URLSearchParams({
- page: currentPage,
- pageSize: 10,
- orderBy,
- keyword,
- });
-
- const res = await fetch(
- `https://panda-market-api.vercel.app/products?${params.toString()}`,
- );
- const data = await res.json();
- setProducts(data);
- };
-
- getProducts();
- }, [orderBy, keyword]);
- // 1.디바운싱
- // - 연속적인 이벤트가 발생했을 때 이 이 벤트들을 하나로 취합해서 마지막에 실행
- // 2. 쓰로틀링
- // - 연속적인 이벤트가 발생했을 때 이벤트의 주기조절
-
- return (
-
-
-
- 판매 중인 상품
-
-
-
-

-
-
-
-
- 상품 등록하기
-
-
-
-
-
- {isOpen ? (
-
- -
-
-
- -
-
-
-
- ) : null}
-
-
-
-
-
-
-
- );
-}
diff --git a/sprint4/src/main.jsx b/sprint4/src/main.jsx
deleted file mode 100644
index b9a1a6d..0000000
--- a/sprint4/src/main.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
-
-createRoot(document.getElementById('root')).render(
-
-
- ,
-)
diff --git a/sprint4/vite.config.js b/sprint4/vite.config.js
deleted file mode 100644
index 6e7f528..0000000
--- a/sprint4/vite.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import tailwindcss from '@tailwindcss/vite';
-
-// https://vite.dev/config/
-export default defineConfig({
- plugins: [react(), tailwindcss()],
-});
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..ab5af78
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,26 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Header from './components/Header/Header.jsx';
+import Main from './components/Main/Main.jsx';
+import Footer from './components/Footer/Footer.jsx';
+import Registration from './components/Main/Registration.jsx';
+
+function App() {
+ return (
+
+
+
+
+
+ } />
+ } />
+
+
+
+
+
+ );
+}
+
+export default App;
diff --git a/src/App.moudule.css b/src/App.moudule.css
new file mode 100644
index 0000000..682a67a
--- /dev/null
+++ b/src/App.moudule.css
@@ -0,0 +1,12 @@
+.appContainer {
+ margin: 0 auto;
+ background-color: #fcfcfc;
+ width: 120rem;
+}
+
+main {
+ padding: 5.87rem 22.5rem 8.75rem;
+ font-size: 1.25rem;
+ font-weight: 700;
+ line-height: 160%;
+}
diff --git a/src/api/products.js b/src/api/products.js
new file mode 100644
index 0000000..4514fa9
--- /dev/null
+++ b/src/api/products.js
@@ -0,0 +1,14 @@
+import axios from 'axios';
+
+export const getProducts = async (params = {}) => {
+ try {
+ const { data } = await axios.get(
+ 'https://panda-market-api.vercel.app/products',
+ { params }
+ );
+ return data;
+ } catch (error) {
+ console.error('API 에러:', error);
+ return { list: [], totalCount: 0 };
+ }
+};
diff --git a/sprint4/src/assets/icons/arrow-down.svg b/src/assets/icons/arrow-down.svg
similarity index 100%
rename from sprint4/src/assets/icons/arrow-down.svg
rename to src/assets/icons/arrow-down.svg
diff --git a/sprint4/src/assets/icons/arrow-right.svg b/src/assets/icons/arrow-right.svg
similarity index 100%
rename from sprint4/src/assets/icons/arrow-right.svg
rename to src/assets/icons/arrow-right.svg
diff --git a/sprint4/src/assets/icons/facebook.svg b/src/assets/icons/facebook.svg
similarity index 100%
rename from sprint4/src/assets/icons/facebook.svg
rename to src/assets/icons/facebook.svg
diff --git a/sprint4/src/assets/icons/instagram.svg b/src/assets/icons/instagram.svg
similarity index 100%
rename from sprint4/src/assets/icons/instagram.svg
rename to src/assets/icons/instagram.svg
diff --git a/sprint4/src/assets/icons/like.svg b/src/assets/icons/like.svg
similarity index 100%
rename from sprint4/src/assets/icons/like.svg
rename to src/assets/icons/like.svg
diff --git a/sprint4/src/assets/icons/search.svg b/src/assets/icons/search.svg
similarity index 100%
rename from sprint4/src/assets/icons/search.svg
rename to src/assets/icons/search.svg
diff --git a/sprint4/src/assets/icons/sort.svg b/src/assets/icons/sort.svg
similarity index 100%
rename from sprint4/src/assets/icons/sort.svg
rename to src/assets/icons/sort.svg
diff --git a/sprint4/src/assets/icons/twitter.svg b/src/assets/icons/twitter.svg
similarity index 100%
rename from sprint4/src/assets/icons/twitter.svg
rename to src/assets/icons/twitter.svg
diff --git a/sprint4/src/assets/icons/youtube.svg b/src/assets/icons/youtube.svg
similarity index 100%
rename from sprint4/src/assets/icons/youtube.svg
rename to src/assets/icons/youtube.svg
diff --git a/src/assets/img/img_default.svg b/src/assets/img/img_default.svg
new file mode 100644
index 0000000..1f15577
--- /dev/null
+++ b/src/assets/img/img_default.svg
@@ -0,0 +1,16 @@
+
diff --git a/sprint4/src/assets/logo-with-text.svg b/src/assets/logo-with-text.svg
similarity index 100%
rename from sprint4/src/assets/logo-with-text.svg
rename to src/assets/logo-with-text.svg
diff --git a/sprint4/src/assets/thumbnail.png b/src/assets/thumbnail.png
similarity index 100%
rename from sprint4/src/assets/thumbnail.png
rename to src/assets/thumbnail.png
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
new file mode 100644
index 0000000..e0188bb
--- /dev/null
+++ b/src/components/Footer/Footer.jsx
@@ -0,0 +1,37 @@
+import facebook from '../../assets/icons/facebook.svg';
+import instagram from '../../assets/icons/instagram.svg';
+import twitter from '../../assets/icons/twitter.svg';
+import youtube from '../../assets/icons/youtube.svg';
+import styles from './Footer.module.css';
+
+function Footer() {
+ return (
+ <>
+
+ >
+ );
+}
+
+export default Footer;
diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css
new file mode 100644
index 0000000..6edee85
--- /dev/null
+++ b/src/components/Footer/Footer.module.css
@@ -0,0 +1,31 @@
+.footerContainer {
+ background-color: #111827;
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ height: 160px;
+ padding: 32px 200px;
+}
+
+.footerLogo {
+ display: flex;
+ font-size: 16px;
+ color: #9ca3af;
+}
+
+.footerCenter {
+ display: flex;
+ gap: 30px;
+ color: #e5e7eb;
+}
+
+.footerIcon {
+ display: flex;
+ gap: 12px;
+}
+
+.footerIcon img {
+ width: 24px;
+ height: 24px;
+ display: block;
+}
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
new file mode 100644
index 0000000..0bb3f2e
--- /dev/null
+++ b/src/components/Header/Header.jsx
@@ -0,0 +1,35 @@
+import logo from '../../assets/logo-with-text.svg';
+import styles from './Header.module.css';
+import { Link, useLocation } from 'react-router-dom';
+
+function Header() {
+ const location = useLocation();
+ const isItemsPage = location.pathname === '/items';
+
+ return (
+
+
+
+

+
+
+
+ 자유게시판
+
+
+ 중고마켓
+
+
+
+
+ 로그인
+
+
+ );
+}
+
+export default Header;
diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
new file mode 100644
index 0000000..a7dd0db
--- /dev/null
+++ b/src/components/Header/Header.module.css
@@ -0,0 +1,43 @@
+.header {
+ display: flex;
+ font-family: Pretendard;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 26px;
+ color: #4b5563;
+}
+
+.container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.free {
+ padding: 21px 15px;
+}
+
+.sell {
+ padding: 21px 15px;
+}
+
+.headerLink {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding-left: 24px;
+}
+
+.loginBtn {
+ display: flex;
+ height: 42px;
+ padding: 12px 23px;
+ justify-content: center;
+ align-items: center;
+ color: white;
+ background-color: var(--primary-100);
+ border-radius: 8px;
+ font-weight: 600;
+ font-size: 16px;
+}
diff --git a/src/components/Main/BestProductList.jsx b/src/components/Main/BestProductList.jsx
new file mode 100644
index 0000000..85dc20f
--- /dev/null
+++ b/src/components/Main/BestProductList.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { useProducts } from '../hooks/useProducts';
+import ProductCard from './ProductCard.jsx';
+import styles from './BestProductList.module.css';
+
+const BestProductList = () => {
+ const { products, error } = useProducts({
+ sort: 'favorite',
+ page: 1,
+ size: 8,
+ });
+ if (error) return {error}
;
+
+ return (
+
+ 베스트 상품
+
+ {products.slice(0, 4).map((product, idx) => (
+ -
+
+
+ ))}
+
+
+ );
+};
+
+export default BestProductList;
diff --git a/src/components/Main/BestProductList.module.css b/src/components/Main/BestProductList.module.css
new file mode 100644
index 0000000..b99f247
--- /dev/null
+++ b/src/components/Main/BestProductList.module.css
@@ -0,0 +1,50 @@
+.error {
+ text-align: center;
+ padding: 40px;
+ font-size: 18px;
+}
+
+.section {
+ --card-image-height: 282px; /* 베스트 282px */
+}
+
+.grid {
+ display: grid;
+ gap: 24px;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+/* Desktop: 4열 */
+@media (min-width: 1200px) {
+ .grid {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+/* Tablet: 2열 */
+@media (min-width: 768px) and (max-width: 1199px) {
+ .grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+/* Mobile: 1열 */
+@media (max-width: 767px) {
+ .grid {
+ grid-template-columns: 1fr;
+ }
+}
+
+.h2 {
+ color: var(--Secondary-900, #111827);
+ /* pretendard/xl-20px-bold */
+ font-family: Pretendard;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 32px;
+ margin-bottom: 16px;
+}
+
diff --git a/src/components/Main/Main.jsx b/src/components/Main/Main.jsx
new file mode 100644
index 0000000..a5bc48c
--- /dev/null
+++ b/src/components/Main/Main.jsx
@@ -0,0 +1,16 @@
+import SalesProduct from './SalesProduct.jsx';
+import BestProductList from './BestProductList.jsx';
+import styles from './Main.module.css';
+
+export default function Main() {
+ return (
+
+
+
+
+ );
+}
diff --git a/src/components/Main/Main.module.css b/src/components/Main/Main.module.css
new file mode 100644
index 0000000..2604568
--- /dev/null
+++ b/src/components/Main/Main.module.css
@@ -0,0 +1,34 @@
+.mainContainer {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 0 1rem;
+}
+
+.bestSection {
+ margin-bottom: 40px;
+ margin-top: 94px;
+}
+
+.sectionTitle {
+ color: #111827;
+ font-weight: bold;
+ font-size: 1.25rem; /* 20px */
+ line-height: 2rem;
+ margin-bottom: 1.5rem;
+}
+
+.salesSection {
+ margin-top: 2.5rem; /* mt-10 */
+}
+
+/* 반응형 */
+@media (min-width: 640px) {
+ .mainContainer {
+ padding: 0 1.5rem;
+ }
+}
+@media (min-width: 1024px) {
+ .mainContainer {
+ padding: 0 2rem;
+ }
+}
diff --git a/src/components/Main/Pagination.jsx b/src/components/Main/Pagination.jsx
new file mode 100644
index 0000000..0c6103f
--- /dev/null
+++ b/src/components/Main/Pagination.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import styles from './Pagination.module.css';
+
+const Pagination = ({
+ currentPage,
+ totalPages,
+ onPageChange,
+ loading = false,
+}) => {
+ if (totalPages <= 1) return null;
+
+ const pages = [];
+ const maxVisible = 5;
+ let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+ let endPage = Math.min(totalPages, startPage + maxVisible - 1);
+
+ if (endPage - startPage + 1 < maxVisible) {
+ startPage = Math.max(1, endPage - maxVisible + 1);
+ }
+
+ for (let i = startPage; i <= endPage; i++) {
+ pages.push(i);
+ }
+
+ return (
+
+
+
+ {pages.map((page) => (
+
+ {page === currentPage ? (
+
+ ) : (
+
+ )}
+
+ ))}
+
+
+
+ );
+};
+
+export default Pagination;
diff --git a/src/components/Main/Pagination.module.css b/src/components/Main/Pagination.module.css
new file mode 100644
index 0000000..21845d1
--- /dev/null
+++ b/src/components/Main/Pagination.module.css
@@ -0,0 +1,89 @@
+.pagination {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 4px;
+ margin-top: 40px;
+ margin-bottom: 140px;
+ padding: 20px 0;
+}
+
+.prevBtn {
+ width: 44px;
+ height: 44px;
+ border: 2px solid #ddd;
+ background: white;
+ border-radius: 50%;
+ cursor: pointer;
+ font-size: 18px;
+ font-weight: bold;
+ color: #666;
+ transition: all 0.2s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.nextBtn {
+ width: 44px;
+ height: 44px;
+ border: 2px solid #ddd;
+ background: white;
+ border-radius: 50%;
+ cursor: pointer;
+ font-size: 18px;
+ font-weight: bold;
+ color: #666;
+ transition: all 0.2s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.pageBtn {
+ width: 40px;
+ height: 40px;
+ border: 2px solid #ddd;
+ background: white;
+ border-radius: 50%;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 600;
+ color: #666;
+ transition: all 0.2s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.activeBtn {
+ width: 40px;
+ height: 40px;
+ border: 2px solid #007bff !important;
+ background: #007bff !important;
+ border-radius: 50%;
+ font-size: 14px;
+ font-weight: 600;
+ color: white !important;
+ cursor: default;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3) !important;
+}
+
+.prevBtn:hover:not(:disabled),
+.nextBtn:hover:not(:disabled),
+.pageBtn:hover:not(:disabled) {
+ border-color: #007bff;
+ color: #007bff;
+ background: #f8f9ff;
+ box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
+}
+
+.prevBtn:disabled,
+.nextBtn:disabled,
+.pageBtn:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+}
diff --git a/src/components/Main/ProducList.jsx b/src/components/Main/ProducList.jsx
new file mode 100644
index 0000000..e6e47eb
--- /dev/null
+++ b/src/components/Main/ProducList.jsx
@@ -0,0 +1,57 @@
+import { useState, useEffect } from 'react';
+import { getProducts } from '../api/products';
+import styles from './ProductList.module.css';
+
+const ProductList = () => {
+ const [products, setProducts] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const fetchProducts = async () => {
+ try {
+ setLoading(true);
+ const data = await getProducts();
+ setProducts(data.list || []);
+ } catch (err) {
+ setError('제품 목록을 불러오지 못했습니다.');
+ console.error(err);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchProducts();
+ }, []);
+
+ if (loading) return 로딩 중...
;
+ if (error) return {error}
;
+
+ return (
+
+
제품 목록 ({products.length}개)
+
+ {products.map((product) => (
+ -
+
+
+
{product.name || product.title}
+
{product.description}
+
+ {product.price
+ ? `${product.price.toLocaleString()}원`
+ : '가격 미정'}
+
+
+
+ ))}
+
+
+ );
+};
+
+export default ProductList;
diff --git a/src/components/Main/ProductCard.jsx b/src/components/Main/ProductCard.jsx
new file mode 100644
index 0000000..187125a
--- /dev/null
+++ b/src/components/Main/ProductCard.jsx
@@ -0,0 +1,20 @@
+import styles from './ProductCard.module.css';
+import defaultImg from '@/assets/img/img_default.svg';
+
+const ProductCard = ({ product }) => {
+ return (
+
+

+
+
{product.name}
+
{product.price?.toLocaleString()}원
+
+
+ );
+};
+
+export default ProductCard;
diff --git a/src/components/Main/ProductCard.module.css b/src/components/Main/ProductCard.module.css
new file mode 100644
index 0000000..920f7d0
--- /dev/null
+++ b/src/components/Main/ProductCard.module.css
@@ -0,0 +1,39 @@
+.card {
+ overflow: hidden;
+ transition: all 0.2s ease;
+ width: 100%;
+ background: white;
+}
+
+.image {
+ border-radius: 16px;
+ width: 100% !important;
+ height: var(--card-image-height, 220px); /* 베스트와 동일 */
+ object-fit: cover;
+ background-color: #f8f9fa;
+ display: block !important;
+}
+
+.info {
+ padding: 20px;
+}
+
+.name {
+ color: var(--Secondary-800, #1f2937);
+ /* pretendard/md-14px-medium */
+ font-family: Pretendard;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 24px;
+}
+
+.price {
+ color: var(--Secondary-800, #1f2937);
+ /* pretendard/lg-16px-bold */
+ font-family: Pretendard;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 26px;
+}
diff --git a/src/components/Main/ProductList.module.css b/src/components/Main/ProductList.module.css
new file mode 100644
index 0000000..044100a
--- /dev/null
+++ b/src/components/Main/ProductList.module.css
@@ -0,0 +1,70 @@
+.productList {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 20px;
+}
+
+.title {
+ font-size: 24px;
+ margin-bottom: 20px;
+ text-align: center;
+}
+
+.list {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ gap: 20px;
+ list-style: none;
+ padding: 0;
+}
+
+.item {
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ overflow: hidden;
+ transition: box-shadow 0.3s;
+}
+
+.item:hover {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.image {
+ width: 100%;
+ height: 200px;
+ object-fit: cover;
+ background-color: #f5f5f5;
+}
+
+.info {
+ padding: 15px;
+}
+
+.name {
+ font-size: 18px;
+ margin: 0 0 10px;
+}
+
+.description {
+ color: #666;
+ margin: 0 0 10px;
+ font-size: 14px;
+}
+
+.price {
+ font-size: 20px;
+ font-weight: bold;
+ color: #e74c3c;
+ margin: 0;
+}
+
+.loading,
+.error {
+ text-align: center;
+ font-size: 18px;
+ padding: 40px;
+}
+
+.error {
+ color: #e74c3c;
+}
diff --git a/src/components/Main/Registration.jsx b/src/components/Main/Registration.jsx
new file mode 100644
index 0000000..5c7687b
--- /dev/null
+++ b/src/components/Main/Registration.jsx
@@ -0,0 +1,242 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Header from '../Header/Header.jsx';
+import styles from './Registration.module.css';
+
+const useRegistrationValidation = (formData) => {
+ const [errors, setErrors] = useState({});
+
+ const validate = useCallback(() => {
+ const newErrors = {};
+
+ if (!formData.name?.trim() || formData.name.length > 10) {
+ newErrors.name = '10자 이내로 입력해주세요.';
+ }
+
+ if (!formData.description || formData.description.length < 10) {
+ newErrors.description = '10자 이상 입력해주세요.';
+ }
+
+ const price = parseInt(formData.price);
+ if (!formData.price || isNaN(price) || price < 1000) {
+ newErrors.price = '숫자로 입력해주세요';
+ }
+
+ const invalidTag = formData.tags.find((tag) => tag.length > 5);
+ if (invalidTag) {
+ newErrors.tags = '5글자 이내로 입력해주세요';
+ }
+
+ setErrors(newErrors);
+ return Object.keys(newErrors).length === 0;
+ }, [formData]);
+
+ return { errors, validate };
+};
+
+const Registration = () => {
+ const navigate = useNavigate();
+ const [formData, setFormData] = useState({
+ name: '',
+ description: '',
+ price: '',
+ tags: [],
+ });
+ const { errors, validate } = useRegistrationValidation(formData);
+ const [tagInput, setTagInput] = useState('');
+
+ const [hasInteracted, setHasInteracted] = useState({
+ name: false,
+ description: false,
+ price: false,
+ tags: false,
+ });
+
+ const handleInputBlur = useCallback((field) => {
+ setHasInteracted((prev) => ({ ...prev, [field]: true }));
+ }, []);
+
+ useEffect(() => {
+ validate();
+ }, [formData, validate]);
+
+ const handleInputChange = (e) => {
+ const { name, value } = e.target;
+ setFormData((prev) => ({ ...prev, [name]: value }));
+ };
+
+ const handleTagKeyDown = (e) => {
+ if (e.key === 'Enter' && tagInput.trim()) {
+ e.preventDefault();
+ setFormData((prev) => ({
+ ...prev,
+ tags: [...prev.tags, '#' + tagInput.trim()],
+ }));
+ setTagInput('');
+ setHasInteracted((prev) => ({ ...prev, tags: true }));
+ }
+ };
+
+ const handleRemoveTag = (index) => {
+ setFormData((prev) => ({
+ ...prev,
+ tags: prev.tags.filter((_, i) => i !== index),
+ }));
+ setHasInteracted((prev) => ({ ...prev, tags: true }));
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ if (!validate()) return;
+
+ try {
+ const submitData = new FormData();
+ submitData.append('title', formData.name);
+ submitData.append('description', formData.description);
+ submitData.append('price', formData.price);
+ formData.tags.forEach((tag) => submitData.append('tags', tag));
+
+ const response = await fetch(
+ 'https://panda-market-api.vercel.app/products',
+ {
+ method: 'POST',
+ body: submitData,
+ },
+ );
+
+ if (response.ok) {
+ alert('상품 등록 성공!');
+ navigate('/products/1');
+ } else {
+ const errorText = await response.text();
+ alert(`${response.status}\n${errorText}`);
+ }
+ } catch (error) {
+ console.error('오류:', error);
+ alert('네트워크 오류');
+ }
+ };
+
+ const isFormValid =
+ formData.name.trim() &&
+ formData.description.length >= 10 &&
+ !isNaN(parseInt(formData.price)) &&
+ parseInt(formData.price) >= 1000 &&
+ formData.tags.length > 0 &&
+ Object.keys(errors).length === 0;
+
+ return (
+
+
+
+
+
상품 등록하기
+
+
+
+
+
+
+ );
+};
+
+export default Registration;
diff --git a/src/components/Main/Registration.module.css b/src/components/Main/Registration.module.css
new file mode 100644
index 0000000..aa484b7
--- /dev/null
+++ b/src/components/Main/Registration.module.css
@@ -0,0 +1,213 @@
+.page {
+ max-width: 1200px;
+ margin: 0 auto;
+ font-family:
+ 'Pretendard',
+ -apple-system,
+ BlinkMacSystemFont,
+ sans-serif;
+}
+
+.mainContent {
+ max-width: 100%;
+ margin: 100px auto 162px;
+}
+
+.registBtn {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 32px;
+}
+
+.title {
+ font-size: 28px;
+ font-weight: 700;
+ color: #1f2937;
+ margin: 0;
+}
+
+.submitBtn {
+ padding: 12px 24px;
+ font-size: 16px;
+ font-weight: 600;
+ color: #ffffff;
+ background: #3692ff;
+ border: none;
+ border-radius: 12px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.submitBtn.disabled {
+ background: #9ca3af;
+ cursor: not-allowed;
+ transform: none;
+ box-shadow: none;
+}
+
+.form {
+ background: #ffffff;
+ border-radius: 24px;
+ border: none;
+}
+
+.inputGroup {
+ margin-bottom: 32px;
+}
+
+.inputGroup label {
+ display: block;
+ font-size: 16px;
+ font-weight: 600;
+ color: #1f2937;
+ margin-bottom: 12px;
+}
+
+.inputGroup input,
+.inputGroup textarea {
+ width: 100%;
+ padding: 16px 20px;
+ border: none;
+ border-radius: 16px;
+ font-size: 16px;
+ background: var(--Cool-Gray-100, #f3f4f6);
+
+ transition: all 0.2s ease;
+ box-sizing: border-box;
+ font-family: inherit;
+ resize: none;
+}
+
+.inputGroup input:focus,
+.inputGroup textarea:focus {
+ outline: none;
+ border-color: #3b82f6;
+ background: #ffffff;
+ box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+}
+
+.errorInput {
+ border-color: #ef4444;
+}
+
+.tagContainer.errorInput,
+.errorInput {
+ border: 2px solid #ef4444 !important;
+ border-radius: 16px;
+}
+
+.errorMsg {
+ color: #dc2626;
+ font-size: 14px;
+ margin-top: 8px;
+ font-weight: 500;
+}
+
+.tagInputContainer {
+ display: flex;
+ flex-direction: column;
+}
+
+.tagContainer {
+ position: relative;
+}
+
+.tagList {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ border-radius: 16px;
+ min-height: 56px;
+ align-items: center;
+}
+
+.tag {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 16px;
+ background: #f3f4f6;
+ color: #1f2937;
+ border-radius: 26px;
+ font-size: 16px;
+ font-weight: 400;
+}
+
+.tag button {
+ background: rgba(255, 255, 255, 0.2);
+ border: none;
+ color: black;
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 16px;
+}
+
+@media (max-width: 768px) {
+ .mainContent {
+ margin: 60px auto 100px;
+ padding: 0 16px;
+ }
+
+ .form {
+ padding: 32px 24px;
+ border-radius: 20px;
+ }
+
+ .registBtn {
+ flex-direction: column;
+ gap: 16px;
+ align-items: stretch;
+ }
+
+ .title {
+ font-size: 24px;
+ text-align: center;
+ }
+
+ .submitBtn {
+ width: 100%;
+ padding: 16px;
+ }
+
+ .inputGroup input,
+ .inputGroup textarea {
+ padding: 14px 16px;
+ font-size: 16px;
+ }
+
+ .tagList {
+ padding: 14px 16px;
+ gap: 8px;
+ }
+
+ .tag {
+ padding: 6px 12px;
+ font-size: 13px;
+ }
+}
+
+@media (max-width: 480px) {
+ .form {
+ padding: 24px 20px;
+ }
+
+ .title {
+ font-size: 22px;
+ }
+}
+
+.submitBtn.disabled {
+ background: #9ca3af;
+ cursor: not-allowed;
+ transform: none;
+ box-shadow: none;
+}
+
+.tagInput::placeholder {
+ color: #9ca3af;
+}
diff --git a/src/components/Main/SalesProduct.jsx b/src/components/Main/SalesProduct.jsx
new file mode 100644
index 0000000..992059e
--- /dev/null
+++ b/src/components/Main/SalesProduct.jsx
@@ -0,0 +1,131 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { getProducts } from '../../api/products';
+import ProductCard from './ProductCard';
+import Pagination from './Pagination';
+import SearchIcon from '../../assets/icons/search.svg';
+import styles from './SalesProduct.module.css';
+import { useNavigate } from 'react-router-dom';
+
+const SalesProduct = () => {
+ const [isSortOpen, setIsSortOpen] = useState(false);
+ const [products, setProducts] = useState({ list: [], totalCount: 0 });
+ const [currentPage, setCurrentPage] = useState(1);
+ const [searchKeyword, setSearchKeyword] = useState('');
+ const [sortOption, setSortOption] = useState('latest');
+ const pageSize = 10;
+
+ const fetchProducts = useCallback(
+ async (page = 1) => {
+ try {
+ const params = {
+ page,
+ size: pageSize,
+ sort: sortOption,
+ };
+ if (searchKeyword.trim()) {
+ params.search = searchKeyword.trim();
+ }
+ const data = await getProducts(params);
+ setProducts(data);
+ } catch (error) {
+ console.error('상품 로드 에러:', error);
+ } finally {
+ //
+ }
+ },
+ [pageSize, sortOption, searchKeyword],
+ );
+
+ useEffect(() => {
+ fetchProducts(1);
+ setCurrentPage(1);
+ }, [fetchProducts]);
+
+ const handlePageChange = useCallback(
+ (page) => {
+ setCurrentPage(page);
+ fetchProducts(page);
+ },
+ [fetchProducts],
+ );
+ const navigate = useNavigate();
+
+ const handleRegister = () => {
+ navigate('/registration');
+ };
+
+ const toggleSort = () => {
+ setIsSortOpen(!isSortOpen);
+ };
+
+ const handleSortSelect = (option) => {
+ setSortOption(option);
+ setIsSortOpen(false);
+ fetchProducts(1);
+ };
+
+ const totalPages = Math.ceil(products.totalCount / pageSize);
+
+ return (
+
+
+
판매중인 상품
+
+
+
+

+
setSearchKeyword(e.target.value)}
+ className={styles.searchInput}
+ />
+
+
+
+
+
+ {isSortOpen && (
+
+
+
+
+ )}
+
+
+
+
+
+ {products.list.map((product) => (
+ -
+
+
+ ))}
+
+
+
+
+ );
+};
+
+export default SalesProduct;
diff --git a/src/components/Main/SalesProduct.module.css b/src/components/Main/SalesProduct.module.css
new file mode 100644
index 0000000..5c8d681
--- /dev/null
+++ b/src/components/Main/SalesProduct.module.css
@@ -0,0 +1,189 @@
+.section {
+ max-width: 1200px;
+}
+
+.controls {
+ display: flex !important;
+ justify-content: space-between !important;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 32px;
+}
+
+.rightControls {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ flex: 1;
+ justify-content: flex-end;
+}
+
+.searchBox {
+ display: flex;
+ gap: 12px;
+ align-items: end;
+}
+
+.searchInputContainer {
+ position: relative;
+ display: flex;
+ align-items: center;
+ flex: 1;
+ max-width: 325px;
+}
+
+.searchIcon {
+ position: absolute;
+ left: 16px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 24px;
+ height: 24px;
+ z-index: 2;
+ pointer-events: none;
+}
+
+.searchInput {
+ width: 100%;
+ height: 42px;
+ padding: 9px 16px 9px 52px;
+ border-radius: 12px;
+ background: #f3f4f6;
+ border: none;
+ font-size: 16px;
+ outline: none;
+}
+
+.searchBtn {
+ color: #f3f4f6;
+ display: flex;
+ height: 42px;
+ padding: 12px 23px;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ border-radius: 8px;
+ background: var(--Primary-100, #3692ff);
+ border: none;
+ cursor: pointer;
+ font-size: 14px;
+ white-space: nowrap;
+ flex-shrink: 0;
+}
+
+.sortContainer {
+ position: relative;
+ display: inline-block;
+}
+
+.sortButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 130px;
+ height: 42px;
+ padding: 12px 16px;
+ border: 1px solid var(--Cool-Gray-200, #e5e7eb);
+ border-radius: 12px;
+ background: #fff;
+ cursor: pointer;
+ font-size: 16px;
+ font-weight: 400;
+}
+
+.sortDropdown {
+ position: absolute;
+ top: 100%;
+ right: 0;
+ width: 130px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background: #fff;
+ border: 1px solid var(--Cool-Gray-200, #e5e7eb);
+ border-radius: 12px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ z-index: 1000;
+ margin-top: 4px;
+}
+
+.sortOption {
+ width: 100%;
+ padding: 12px 16px;
+ border: 1px solid var(--Cool-Gray-200, #e5e7eb);
+ background: none;
+ text-align: left;
+ font-size: 16px;
+ cursor: pointer;
+ border-radius: inherit;
+}
+
+.sortOption:hover {
+ background: #f8f9fa;
+}
+
+.sortOption:first-child {
+ border-radius: 12px 12px 0 0;
+}
+
+.sortOption:last-child {
+ border-radius: 0 0 12px 12px;
+}
+
+.searchInput:focus,
+.sortButton:focus,
+.searchBtn:focus {
+ outline: none;
+}
+
+.grid {
+ display: grid !important;
+ grid-template-columns: repeat(5, 1fr) !important;
+ grid-template-rows: repeat(2, 1fr) !important;
+ gap: 20px !important;
+ list-style: none !important;
+ padding: 0 !important;
+ margin: 0 0 40px 0 !important;
+}
+
+@media (max-width: 1199px) and (min-width: 768px) {
+ .grid {
+ grid-template-columns: repeat(3, 1fr) !important;
+ }
+}
+
+@media (max-width: 767px) {
+ .grid {
+ grid-template-columns: repeat(2, 1fr) !important;
+ }
+ .controls {
+ justify-content: center;
+ flex-direction: column;
+ gap: 12px;
+ }
+ .searchBox {
+ width: 100%;
+ }
+ .searchInputContainer {
+ max-width: none;
+ }
+ .sortContainer {
+ align-self: center;
+ }
+}
+
+.item {
+ width: 100%;
+}
+
+.h2 {
+ color: var(--Secondary-900, #111827);
+ font-family: Pretendard;
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 32px;
+ margin: 0;
+ height: 42px;
+ display: flex;
+ align-items: center;
+}
diff --git a/src/components/hooks/useProducts.js b/src/components/hooks/useProducts.js
new file mode 100644
index 0000000..2f1ab68
--- /dev/null
+++ b/src/components/hooks/useProducts.js
@@ -0,0 +1,33 @@
+import { useState, useEffect, useCallback } from 'react';
+import { getProducts } from '../../api/products';
+
+export const useProducts = (params = {}) => {
+ const [data, setData] = useState({ list: [], totalCount: 0 });
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ const fetchProducts = useCallback(async (queryParams) => {
+ try {
+ setLoading(true);
+ setError(null);
+ const result = await getProducts(queryParams);
+ setData(result);
+ } catch {
+ setError('데이터를 불러오지 못했습니다.');
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ fetchProducts(params);
+ }, [fetchProducts, params.sort, params.page, params.size]);
+
+ return {
+ products: data.list,
+ totalCount: data.totalCount,
+ loading,
+ error,
+ refetch: fetchProducts,
+ };
+};
diff --git a/sprint4/src/index.css b/src/index.css
similarity index 88%
rename from sprint4/src/index.css
rename to src/index.css
index 8e2f02f..72bc6f3 100644
--- a/sprint4/src/index.css
+++ b/src/index.css
@@ -1,7 +1,7 @@
-@import 'tailwindcss';
-
@layer base {
- html, body, #root{
+ html,
+ body,
+ #root {
height: 100%;
}
body {
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100644
index 0000000..11c381b
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,11 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './styles/reset.css';
+import './styles/global.css';
+import App from './App.jsx';
+
+createRoot(document.getElementById('root')).render(
+
+
+ ,
+);
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..2510fff
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,214 @@
+:root {
+ --bg-blue: #cfe5ff;
+ --bg-gray: #fcfcfc;
+ --bg-whith: #ffffff;
+
+ --Cool-Gray-100: #f3f4f6;
+ --Cool-Gray-200: #e5e7eb;
+
+ --gray-50: #f9fafb;
+ --gray-100: #f3f4f6;
+ --gray-200: #e5e7eb;
+ --gray-400: #9ca3af;
+ --gray-500: #6b7280;
+ --gray-600: #4b5563;
+ --gray-700: #374151;
+ --gray-800: #1f2937;
+ --gray-900: #111827;
+
+ --secondary-100: #f3f4f6;
+ --secondary-200: #e5e7eb;
+ --secondary-400: #9ca3af;
+ --secondary-600: #4b5563;
+ --secondary-800: #1f2937;
+ --secondary-900: #111827;
+
+ --primary-100: #3692ff;
+ --primary-200: #1967d6;
+ --primary-300: #1251aa;
+
+ --error: #f74747;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+a {
+ text-decoration: none;
+ color: inherit;
+}
+
+button,
+input,
+textarea,
+select {
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ color: inherit;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
+
+button {
+ background: none;
+ border: none;
+ outline: none;
+ box-shadow: none;
+ cursor: pointer;
+}
+
+img,
+svg {
+ vertical-align: bottom;
+}
+
+body {
+ font-family: 'Pretendard Variable', Pretendard, sans-serif;
+ margin: 0;
+ background: #fcfcfc;
+}
+
+header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: var(--header-height);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 16px;
+ background-color: #ffffff;
+ border-bottom: 1px solid #dfdfdf;
+ z-index: 999;
+}
+
+.withHeader {
+ margin-top: var(--header-height);
+}
+
+footer {
+ background-color: #111827;
+ color: #9ca3af;
+ font-size: 16px;
+ padding: 32px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 60px;
+}
+
+#copyright {
+ order: 3;
+ flex-basis: 100%;
+}
+
+#footerMenu {
+ display: flex;
+ gap: 30px;
+ color: var(--gray-200);
+}
+
+#socialMedia {
+ display: flex;
+ gap: 12px;
+}
+
+.wrapper {
+ width: 100%;
+ padding: 0 16px;
+}
+
+h1 {
+ font-size: 40px;
+ font-weight: 700;
+ line-height: 56px;
+ letter-spacing: 0.02em;
+}
+
+.button {
+ background-color: var(--blue);
+ color: #ffffff;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.button:hover {
+ background-color: #1967d6;
+}
+
+.button:focus {
+ background-color: #1251aa;
+}
+
+.button:disabled {
+ background-color: #9ca3af;
+ cursor: default;
+ pointer-events: none;
+}
+
+.pill-button {
+ font-size: 16px;
+ font-weight: 600;
+ border-radius: 999px;
+ padding: 14.5px 33.5px;
+}
+
+.full-width {
+ width: 100%;
+}
+
+.break-on-desktop {
+ display: none;
+}
+
+@media (min-width: 744px) {
+ header {
+ padding: 0 24px;
+ }
+
+ .wrapper {
+ padding: 0 24px;
+ }
+
+ .pill-button {
+ font-size: 20px;
+ font-weight: 700;
+ padding: 16px 126px;
+ }
+
+ footer {
+ padding: 32px 104px 108px 104px;
+ }
+
+ #copyright {
+ flex-basis: auto;
+ order: 0;
+ }
+}
+
+@media (min-width: 1280px) {
+ header {
+ padding: 0 200px;
+ }
+
+ .wrapper {
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .break-on-desktop {
+ display: inline;
+ }
+
+ footer {
+ padding: 32px 200px 108px 200px;
+ }
+}
diff --git a/src/styles/reset.css b/src/styles/reset.css
new file mode 100644
index 0000000..4e96ea0
--- /dev/null
+++ b/src/styles/reset.css
@@ -0,0 +1,124 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol,
+ul {
+ list-style: none;
+}
+blockquote,
+q {
+ quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
diff --git a/sprint4/src/utils/format.js b/src/utils/format.js
similarity index 100%
rename from sprint4/src/utils/format.js
rename to src/utils/format.js
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..3d15685
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'node:path';
+
+export default defineConfig({
+ plugins: [
+ react({
+ // babel: {
+ // plugins: [['babel-plugin-react-compiler']],
+ // },
+ }),
+ ],
+ resolve: {
+ alias: {
+ '@': path.resolve('src'),
+ },
+ },
+});