๐ ๋ฐฐํฌ๋งํฌ ๋ฐ๋ก๊ฐ๊ธฐ
์ด๊ฐ์ค | ์ ํ๋ฆฌ | ํ์ฌ์ฑ | ์ด์ ์ฌ |
---|---|---|---|
๊ฒฐ๊ณผ์ฐฝ UI | ๊ฒ์์ฐฝ UI | ๋ธ๋๋๋ฒํผ UI | ๊ฒ์ ์์ดํ UI |
Github | Github | Github | Github |
- next.js
- typescript
- styled-component
- redux-toolkit
- mockdata๋ฅผ Next.js api์ ์ ์ฅํ์ฌ fetching ๊ตฌํ
- ๊ฒ์์ด ์
๋ ฅ
- ํ๊ธ ์ด์ฑ,์ค์ฑ,์ข ์ฑ์ด ์ ๋ ฅ๋ ๋ ๊ฒ์๊ตฌํ (๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ด์ฉ)
- ์๋ฌธ ์ ๋ ฅ๋ ๋ ๋์๋ฌธ์ ๊ตฌ๋ถ์์ด ๊ฒ์๊ตฌํ
- ๊ณต๋ฐฑ ๋ค์ด์ค๊ฑฐ๋ ๊ณต๋ฐฑ๋ง ๊ฒ์์ด์ ๋จ์ ๋ ์์ธ์ฒ๋ฆฌ
- ์ ๋ ฌ์์ :
- ์ฌ์ ์ ์ ๋ ฌ
- ์ ํ,๋ธ๋๋๋ฅผ ๋ชจ๋ ๋ณด์ฌ์ฃผ๋ ๊ตฌ๋ถํ๊ธฐ ์ํ์ฌ UI ๋ถ๋ฆฌ
- ๊ฒ์๊ฒฐ๊ณผ :
- ๋ธ๋๋ : overflow์ ์์ผ๋ก ์คํฌ๋กค
- ์ ํ : overflow์ ์์๋ ์คํฌ๋กค
- ์ฑ๋ฅ์ต์ ํ : data fetching, data ์ํ๋ฅผ ์ต์ํํ๋ ค๊ณ ๋
ธ๋ ฅ
- ์ฒ์ ๊ฒ์์ด๋ฅผ ์ ๋ ฅ์ mockdata์์ filter
- ์ถํ ๊ฒ์์ด๋ฅผ ์ ๋ ฅ์ filter๋ ๋ฐฐ์ด์ ๋ฆฌ๋์ค state์ ์ ์ฅํด์ reducer๋ก ๋ค์ filter
- ์ญ์ ์ mockdata์์ filter
- mockdata : ์ฒ์์ ๋ฐ์ดํฐ ํต์ ์ ํตํด ์ด๊ธฐ๊ฐ ํ ๋น
- brandList : mockdata์ ๊ฐ์ด ๋ค์ด์จ ๋ค ๋ธ๋๋๋ง ์ค๋ณต์์ด ์ถ์ถํ์ฌ ์ ์ฅ
- filterList :
- products : ๊ฒ์์ด์ ๋ฐ๋ผ ํํฐ๋ ์ ํ ๋ฆฌ์คํธ ์ ์ฅ, ํ์ ๊ฒ์๊ฒฐ๊ณผ๊ฐ ์ถ๋ ฅ๋ ๋๋ฅผ ๋๋นํ์ฌ ๋์ ์์กด์ฑ์ ์ ์งํ๊ธฐ ์ํด mockdata์ ๊ฐ์ ๊ฐ์ฒด๊ตฌ์กฐ ์ ์ง
- brands : ๊ฒ์์ด์ ๋ฐ๋ผ brandList์์ ํํฐ๋ ๋ธ๋๋๋ค์ string ๋ฐฐ์ด๋ก ์ ์ฅ
const initialState = {
mockdata: [] as searchInfo[],
brandList: [] as string[],
filterList: {
products: [] as searchInfo[],
brands: [] as string[],
}
interface searchInfo {
์ ํ๋ช
: string;
๋ธ๋๋: string;
}
-
๊ณตํต ์งํ
- ์ด๊ธฐ์ธํ : Next.js ์ด๊ธฐ์ธํ ๋ฐ Prettier, ESLint ์ค์
- Next.js api ์ด์ฉํด์ mockData ์ถ๊ฐ
- Redux Toolkit์ ์ด์ฉํด์ ๊ฒ์์ด ํํฐ reducer, action ์ ์ ๋ฐ state ๊ตฌ์กฐ ์ ์
- ์ ์ฒด์ ์ธ style ์์ (ํต์ผ์ฑ)
- VsCode Liveshare๋ฅผ ํ์ฉํด ํ์ดํ๋ก๊ทธ๋๋ฐ ์งํ
-
๊ฐ๋ณ ์ ๋ฌด ๋ถ๋ด : UI ๊ตฌํ
- [ํ์ฌ์ฑ] ๋ธ๋๋ ๋ฒํผ UI
- [์ ํ๋ฆฌ] ๊ฒ์์ฐฝ UI
- [์ด์ ์ฌ] ๊ฒฐ๊ณผ์์ดํ UI
- [์ด๊ฐ์ค] ๊ฒฐ๊ณผ์ฐฝ UI
- Notion: ํ ์์ด๋์ด ํ์ ๋ฐ ์ ๋ฆฌ ๐ ๋ ธ์ ๋งํฌ
- Figma: UI ๊ตฌํ ๐ ํผ๊ทธ๋ง ๋งํฌ
- Discord, Vsc Liveshare: ์ค์๊ฐ ์ํต ๋ฐ ํ์ดํ๋ก๊ทธ๋๋ฐ
Option: ๋ด์ฉ(์์ธ ๋ด์ฉ)
- Feat - ์๋ก์ด ๊ธฐ๋ฅ ์ถ๊ฐ
- Fix - ๋ฒ๊ทธ ์์
- Docs - ์ ํ ์ฝ๋ ์์ ์์
- Style - ์ฝ๋ ํ์, ์ ๋ ฌ, ์ฃผ์ ๋ฑ์ ๋ณ๊ฒฝ
- Refactor - ์ฝ๋ ๋ฆฌํฉํ ๋ง
- Test - ํ ์คํธ ์ฝ๋ ์ถ๊ฐ
- Chore - ํ๊ฒฝ์ค์ , ๋น๋ ์ ๋ฌด, ํจํค์ง ๋งค๋์ ์ค์ ๋ฑ..
โโโ pages
โ โโโ _app.tsx
โ โโโ api
โ โ โโโ mockData.ts
โ โโโ index.tsx
โโโ components
โ โโโ ResultView
โ โโโ BrandBtn
โ โ โโโ index.tsx
โ โ โโโ styled.ts
โ โโโ ProductItem
โ โ โโโ index.tsx
โ โ โโโ styled.ts
โ โโโ index.tsx
โ โโโ styled.tsx
โโโ SearchBar
โ โโโ index.tsx
โ โโโ styled.ts
โโโ public
โโโ store
โ โโโ searchList.ts
โ โโโ store.ts
โ โโโ types.ts
โโโ styles
โ โโโ globalStyle.ts
โ โโโ styled.d.ts
โ โโโ theme.ts
โโโ tsconfig.json
$ npm install
$ npm run dev