π νΈλλ§μΌ λ°°ν¬ URL : https://hodumarket.netlify.app/
νΈλλ§μΌμ λꡬλ μμ λ‘κ² μνμ κ²μνμ¬ ν맀νκ³ κ΅¬λ§€ν μ μλ μ€νλ§μΌ μλΉμ€μ
λλ€.
νμμ ν맀μ/ꡬ맀μ μ νμΌλ‘ λλλ©° ν맀μλ μν μ 보λ₯Ό κ²μ,μμ ,μμ ν μ μμ΅λλ€.
ꡬ맀μλ μνλ μνμ μνλ μλλ§νΌ μ₯λ°κ΅¬λμ λ΄κ±°λ λ°λ‘ ꡬ맀λ₯Ό ν μ μμ΅λλ€.
π BackEnd : μ 곡λ API μ¬μ©
π Daum Postcode Service API μ¬μ©
π Version :
react : "18.2.0"
react-router-dom : "6.3.0"
axios: "0.27.2",
react-daum-postcode: "3.1.1"
react-intersection-observer: "9.4.0"
react-query: "3.39.2"
tailwindcss: "3.1.8"
vite: "3.0.7"
-
π κ³μ
- λ‘κ·ΈμΈ/λ‘κ·Έμμ
- ꡬ맀μ / ν맀μ νμκ°μ
- μ ν¨μ± κ²μ¦
- ν ν° κ²μ¦
-
π ν
- μν κ²μ
- μν λͺ©λ‘
- 무ν μ€ν¬λ‘€
-
π μν
- μν μμΈ νμ΄μ§
- μν μλ μ ν
- μ₯λ°κ΅¬λ μν λ΄κΈ°
- μν μ£Όλ¬Έ λ° κ²°μ
- μν μ¬κ³ μ ν¨ κ²μ¬
-
π μ₯λ°κ΅¬λ
- μ₯λ°κ΅¬λμ λ΄κΈ΄ μν λͺ©λ‘ νμΈ
- μν μλ μμ λ° μν μμ
- μν κ°λ³ / μ 체 μ ν
- μ νλ μνμ μ΄ ν μΈ / λ°°μ‘λΉ / μνκ°κ²© νμΈ
- μ νλ μν νΉμ κ°λ³ μ£Όλ¬Έ
-
π¨βπΎ ν맀μ μΌν°
- μν λ±λ‘ λ° μμ
- λ±λ‘λ μν μμ
-
ETC
- λͺ¨λ°μΌ μ μ λ₯Ό μν λ°μν λμμΈ κ΅¬ν
- api λ°μ΄ν° λ‘λ© μ€ λ‘λ© μ€νΌλ νλ©΄ ꡬν
hodu-open-market/src/pages/myCart/MyCart.jsx
Lines 26 to 63 in b53b800
ꡬ맀μκ° μ₯λ°κ΅¬λμ λ΄μ μνλͺ©λ‘μ λΆλ¬μ¨ ν,
μν μ΄λ¦, μν κ°κ²©, λ°°μ‘λΉ, ν맀μ μ΄λ¦, μ΄λ―Έμ§ μ 보λ₯Ό λ°μμ€κΈ° μν΄ μ₯λ°κ΅¬λ μνλͺ©λ‘μ μν idλ‘ λ€μ νλ² μν μ 보λ₯Ό κ°μ Έμμ΅λλ€.
μ΄ λ μλμ κ°μ΄ promise allμ μ¬μ©ν μ μμ΅λλ€.
async function getCartList() {
try {
const res = await axios.get(url + "cart/", {
headers: { Authorization: `JWT ${token}` }
});
const items = res.data.results.map((item, idx) =>
axios.get(url + "products/" + item.product_id + "/")
);
const itemsArr = await Promise.all(items);
} catch (err) {
console.errir(err);
}
}
μ΄μ²λΌ Promise.allμ ꡬννκΈ° μν΄ react-queryμ useQueries ν
μ λμ μΌλ‘ μ¬μ©νμμ΅λλ€.
hodu-open-market/src/pages/home/Products.jsx
Lines 27 to 57 in 3d59cf8
ννμ΄μ§μμ first page μν api λ°μ΄ν°μμ μνμ μ΄ κ°μλ₯Ό νλ²μ λΆλ¬μμ§λ μνλͺ©λ‘ κ°μ(15)λ‘ λλκ³ μ¬λ¦Όν΄μ€λλ€. μ΄λ₯Ό dataLengthμ ν λΉν©λλ€. κ·Έλ¦¬κ³ dataLength λ§νΌ for λ°λ³΅λ¬ΈμΌλ‘ queryClient.prefetchQueryν μ μ¬μ©ν©λλ€. prefetchλ λͺ¨λ μνμ λ°μ΄ν°λ cachedλμ΄ μν κ²μμμ μ¬μ©λ©λλ€.
hodu-open-market/src/pages/productDetail/ProductOverview.jsx
Lines 23 to 49 in 9786c51
ꡬ맀μκ° μ₯λ°κ΅¬λμ μν μΆκ° μ, μ₯λ°κ΅¬λμ ν΄λΉ μνμ΄ κΈ°μ‘΄μ μ‘΄μ¬νλμ§ κ²μ¦νκΈ° μν΄ μ¬μ©μ μ₯λ°κ΅¬λ λ°μ΄ν°λ₯Ό λΆλ¬μ΅λλ€. μ΄ λ, μ¬μ©μκ° μ₯λ°κ΅¬λ νμ΄μ§λ₯Ό μ΄λ―Έ λ°©λ¬Έν μ μ΄ μμΌλ©΄ dataλ₯Ό fetch νμ§ μκ³ , useQueryClientν μ μ¬μ©νμ¬ getQueryDataλ‘ μ₯λ°κ΅¬λ νμ΄μ§μμ cacheλ λ°μ΄ν°λ₯Ό λΆλ¬μ΅λλ€.
hodu-open-market/src/pages/home/Products.jsx
Lines 15 to 42 in a06f65b
react-queryμ useInfiniteQueryμ react-intersection-observer apiλ₯Ό μ¬μ©νμ¬ λ¬΄ν μ€ν¬λ‘€ κΈ°λ₯μ ꡬννμμ΅λλ€.
useInViewμ 'ref'λ κ° νμ΄μ§ λ§λ€ λ§μ§λ§ μν(15λ²μ§Έ)μ μ§μ νμμ΅λλ€.
hodu-open-market/src/components/Modal/PostCodeModal.jsx
Lines 1 to 41 in af4603f
hodu-open-market/src/pages/payment/Payment.jsx
Lines 81 to 91 in af4603f
λ€μμΉ΄μΉ΄μ€μμ μ 곡νλ μ°νΈλ²νΈ μ‘°ν API μλΉμ€λ₯Ό μ΄μ©νμ¬ μ°νΈ λ²νΈ κ²μ κΈ°λ₯μ ꡬννμμ΅λλ€.
ꡬ맀μκ° μν μ£Όλ¬Έ μ, λ°°μ‘ μ£Όμ μ
λ ₯μμ μ°νΈλ²νΈμ°ΎκΈ°λ₯Ό ν΄λ¦νλ©΄ μ°νΈλ²νΈ κ²μ λͺ¨λ¬μ°½μ΄ λνλ©λλ€.
μ¬μ΄νΈμ κΈ°λ³Έ 컬λ¬νλ νΈμ μ΄μΈλ¦¬λλ‘ μ£Όμ κ²μμ°½ μμμ μμ νμμ΅λλ€.
hodu-open-market/src/pages/home/ProductList.jsx
Lines 4 to 46 in 2ddbb1c
tailwindμ μ€λ₯κ° μλ κ²μΌλ‘ 보μ¬, μΈλΌμΈ μμ±μΌλ‘ background Image urlμ μ€μ ν΄ μ£Όμμ΅λλ€.
π¦ src
β£π assets
β£π components
β β£π buttons
β β£π footer
β β£π modal
β β£π navBar
β β£ NotFound.jsx
β β£ NowLoading.jsx
β β SmNowLoading.jsx
β£π context
β£π pages
β β£π auth
β β£π home
β β£π myCart
β β£π payment
β β£π productDetail
β β£π productSearch
β β£π sellerCenter
β βπ sellerProductsUpload
β£π App.jsx
β£π main.jsx
β£π index.css
βπ style.js