'The Salt' is a shopping mall that sells a selected high quality products.
THE SALT or http://the-salt.co.uk/
ํ์๊ฐ์ or ํ ์คํธ ID๋ฅผ ํตํด ์๋น์ค๋ฅผ ์ด์ฉํ ์ ์์ต๋๋ค.
Test accountID โบ test@gmail.com
PW โบ test1234
- Django REST API ์ JWT authentication ํต์ ์ ํฉ๋๋ค.
- ๋ก๊ทธ์ธ ์ฑ๊ณต์ Token, user ์ ๋ณด๋ฅผ ๋ฐ์์ store์ ์ ์ฅํฉ๋๋ค.
- store์ Token, user ์ ๋ณด persist ํ๊ฒ ์ ์งํฉ๋๋ค.
- login์ ํ ์ดํ navigation์ login ๋ถ๋ถ์ logout๊ณผ profile icon์ผ๋ก ๋ณ๊ฒฝ๋ฉ๋๋ค.
- ํ์๊ฐ์ ์ email, password repeat field๋ validation ์ฒ๋ฆฌ ๋์ด์์ต๋๋ค.
- the-salt url์ ์ ๋ ฅํ ๊ฐ์ฅ ๋จผ์ ๋ณด๊ฒ๋๋ ํ์ด์ง์ ๋๋ค.
- show more button์ ํตํด home ํ์ด์ง๋ก ์ด๋ํ ์ ์์ต๋๋ค.
- navigation์ ํตํด ํ๋ซํผ์ ์ด์ฉํ ์ ์์ต๋๋ค.
- scrollable navigation์ผ๋ก ์คํฌ๋กค์ ๋ด๋ฆด์ shrink ๋ฉ๋๋ค.
- product page๋ category tab์ ํตํด ์ํ๊ณ ์ ํ๋ ์๋ฅ๋ฅผ ๋ถ๋ฅํด ๋ณผ ์ ์์ต๋๋ค.
- product ์์ธ ํ์ด์ง์์ ์ ํ์ ์นดํธ์ ์ถ๊ฐํ ์ ์์ต๋๋ค.
- ์นดํธ ๋ด์ 'x'๋ฒํผ์ ํตํด ์ ํ์ ์นดํธ์์ ์ญ์ ํ ์ ์์ต๋๋ค.
- ๋์ผํ ์ ํ์ ์ถ๊ฐ๋ ์๋์ผ๋ก ์ ๋ฐ์ดํธ ๋ฉ๋๋ค.
- ์นดํธ๋ด์ ๋ฒํผ์ ํตํด ์ฃผ๋ฌธ์ ์์ฑ ํ์ด์ง๋ก ๋์ด๊ฐ ์ ์์ต๋๋ค.
- ์ฃผ๋ฌธ์ ์์ฑํ์ด์ง๋ ์ฃผ๋ฌธํ ์ ํ๋ค์ ์ด๊ฐ๊ฒฉ, ๋ฐฐ์ก๋น(์ด ๊ฐ๊ฒฉ์ด $150 ๋ฏธ๋ง์ผ์ ์ ์ฉ)๋ฅผ ํ์ธํฉ๋๋ค.
- ์ด ํ์ ๋ฒํผ์ ํตํด ์ฃผ๋ฌธ์ ์์ฑ์ ์๋ฃํ๊ธฐ ์ํ Shipping Page๋ก ๋์ด๊ฐ๋๋ค.
- ์ฃผ๋ฌธ์ ์์ฑ ์๋ฃ ํ์ด์ง(Shipping)๋ ๋ก๊ทธ์ธ์ด ํ์ํฉ๋๋ค. -> ๋ก๊ทธ์ธ์ด ์๋์ด์๋ ์ฌ์ฉ์๋ ๋ก๊ทธ์ธ ํ์ด์ง๋ก ์ด๋๋ฉ๋๋ค.
- ์ฃผ๋ฌธ์ ์์ฑ form์ field๋ค์ ๋ชจ๋ ์์ฑํด์ผํฉ๋๋ค.
- ์ฃผ๋ฌธ์ ์ ์ถ์ store์์ token์ ์ฌ์ฉํด REST API ์ ๊ทผ๊ถํ์ ์ป์ด ํด๋น ์ ์ ์ ์ฃผ๋ฌธ์๋ฅผ create ํฉ๋๋ค.
- navigation์ ์ผ๊ตด ์์ด์ฝ์ ํตํด Profile ํ์ด์ง๋ก ์ด๋ํ ์ ์์ต๋๋ค.
- profile ํ์ด์ง๋ ๋ด์ ๋ณด ์์ ํ์ด์ง์ ์ฃผ๋ฌธํ์ธ ํ์ด์ง๋ก ์ด๋ํ๊ธฐ ์ํ ๋ฒํผ์ด ์์ต๋๋ค.
- ๋ด ์ ๋ณด ํ์ด์ง๋ ๋ก๊ทธ์ธํ ์ ์ ์ ์ ๋ณด๋ฅผ ์์ ํ ์ ์์ต๋๋ค.
- ์ฃผ๋ฌธํ์ธ ํ์ด์ง๋ ์ ์ ์ ์ฃผ๋ฌธ๋ด์ญ์ ํ์ธํ ์ ์์ต๋๋ค.
- Fix: ๋ฒ๊ทธ ์์ ๋ฐ ์ค๋ฅ ๊ฐ์
- Feat: ๊ธฐ๋ฅ ์ถ๊ฐ, ๋ผ์ธ ์ ๋ฆฌ
- Refactor: ํจ์, ์ปดํฌ๋ํธ ์ฌ์ ์
- Style: CSS ์ ๋ฐ์ดํธ
- Init: Initializing
- Build: Build ์์
- Dependency: ์์กด์ฑ ์ถ๊ฐ
๐ Backend - BE ๐ Frontend - FE
Deploy demo version 1.0
- BE. DRF permission, token authentication ๊ธฐ๋ฅ ์ถ๊ฐ
- FE. Account component ์ ์ ๋ฐ ์ ๋ฐ์ดํธ (action, reducers, saga)
- update.. DRF์ user model view -> permission allow
- update.. Token headers๋ฅผ ํ์ฉํ Authentication
- BE. Create Account view ์์ฑ => http://.../register
- BE. Order ๋ชจ๋ธ ์ ์ ๋ฐ ์ ๋ฐ์ดํธ (id, user, orderProducts)
- FE. Order component ์ ์ ๋ฐ ์ ๋ฐ์ดํธ (ํ์ด์ง ๊ตฌ์ฑ ๋ฐ cart item ์ฒ๋ฆฌ)
- FE. Screen, Profile, Account component responsible UI ์ ๋ฐ์ดํธ
- FE. react-hook-form version ์ ๋ฐ์ดํธ์ ๋ฐ๋ฅธ ์์ ์ฌํญ ์ ์ฉ
- ----> input={register(...)} => {...register('...')}
- FE. SignUp ๊ธฐ๋ฅ ์ ๋ฐ์ดํธ (signUp action, reducers(with signIn), signUp saga, signUp api)
- FE. TextField validation ์ฒ๋ฆฌ in SignUp component -> react-hook-form
- FE. Home, HomePagination, Products, Footer, Order component responsible UI ์ ๋ฐ์ดํธ
- FE. HomePagination hover effect ์ ์ฉ
- BE. Order, OrderProduct ๋ชจ๋ธ ์ฌ์ ์
- FE. Order, Shipping Component ์ ์ ๋ฐ ๊ธฐ๋ฅ ์ ๋ฐ์ดํธ (pusOrder action, order reducers, orderSaga, order api)
- BE. Order request์ ๋ฐ๋ฅธ backend create method ์ ์
- FE. Order request ํ cart initialized action ์ ๋ฐ์ดํธ (REMOVE_PRODUCT_FROM_CART)
- FE. Error Handling (Console Err)
- # 1. Strict Mode Issues -> Delete `React.strictMode>` tag in App.js
- # 2. Grid issues justify -> justifyContent
- # 3. Typography descendant issues
Version 2.0 Update
- FE. Apply webkit line clamp -> Products, Screen
- FE. Appending status in Order request data
- FE. Fixed computedMatch Err -> App.js
- FE. Fixed pagination length
- BE. Apply authentication, permission class to OrderView
- FE. MyOrder component ์ ์ ๋ฐ ๊ธฐ๋ฅ ์ ๋ฐ์ดํธ (show order, orderProducts list)
- FE. Logo size ์์
- FE. Footer navigation isLoggedIn state ์ ์ฉ