🎁 소품샵 여정의 이야기를 담다

2022.01.02 ~ 2022.01.22 - SOPT 29th APP-JAM

우리의 소품샵 방문 경험을 더욱 가치있게 만들어 주는 소담입니다!

소담과 함께 우리의 소품샵 추억을 간직해 보는건 어떠세요?

✨ 핵심 기능 소개

1. 카카오맵 API를 활용한 지역별 소품샵 기능

• 위치를 기반으로 소품샵을 추천하여 편의성을 제공하고 있습니다.
• 각 행정구 svg 컴포넌트를 클릭하여 해당하는 행정구에 있는 소품샵 리스트를 보여주는 기능입니다.

2. 목적에 맞는 소품샵 필터링 기능

• 다양한 목적을 가지고 소품샵을 찾는 유저들을 위해서 다양한 기준을 제시하고 있습니다.
• 소품샵의 테마, 인기도, 리뷰 등을 통해 필터링하여 소품샵 리스트를 보여주는 기능입니다.

3. 사용자 리뷰 기능

• 소품샵 이용에 있어 소품샵에서 제공해주는 정보 이외에 더 많은 정보를 제공하고 있습니다.
• 서비스가 유저에게 소품샵 정보를 제공함과 동시에 유저로부터 리뷰데이터를 제공받을 수 있는 기능입니다.

📐 WorkFlow

🧑🏻‍💻 웹푸미들

jjinny	sohee-K	huiseon37	Juhee-Hwang
찐 Web FE	쏘 Web FE	썬 Web FE	쮜 Web FE

🛠️ 사용 기술 스택

📚 사용 라이브러리

"dependencies": {
  "@reduxjs/toolkit": "1.7.1",
  "@types/react-redux": "7.1.21",
  "@types/styled-components": "5.1.19",
  "axios": "0.24.0",
  "next": "12.0.7",
  "next-redux-wrapper": "7.0.5",
  "react": "17.0.2",
  "react-dom": "17.0.2",
  "react-redux": "7.2.6",
  "styled-components": "5.3.3",
  "styled-reset": "4.3.4"
 },
"devDependencies": {
  "@types/node": "17.0.8",
  "@types/react": "17.0.38",
  "babel-plugin-module-resolver": "4.1.0",
  "babel-plugin-styled-components": "2.0.2",
  "typescript": "4.5.4"
}

🗂 폴더 구조

📂 src
├── 📂 app
│   ├── hook.ts
│   └── store.ts
├── 📂 components
│   ├── 📁 BannerList
│   ├── 📁 ImageMap
│   ├── 📁 MapSidebar
│   ├── 📂 ShopDetail
│   │   ├── 📁 DetailImageGrid
│   │   ├── 📁 DetailInfo
│   │   └── 📁 DetailShopAddress
│   ├── 📁 ThemeSelector
│   ├── 📂 common
│   │   ├── Banner.tsx
│   │   ├── DropDownFilter.tsx
│   │   ├── EmptyContent.tsx
│   │   ├── FilterDiv.tsx
│   │   ├── Footer.tsx
│   │   ├── ImageDiv.tsx
│   │   ├── MainSlider.tsx
│   │   ├── MoreFilter.tsx
│   │   ├── 📁 Navbar
│   │   ├── PageNaviagator.tsx
│   │   ├── ReviewCard.tsx
│   │   ├── ShopCard.tsx
│   │   ├── ShopCardRank.tsx
│   │   └── WriteReviewBtn.tsx
│   └── 📂 review
│       ├── ImageCard.tsx
│       ├── ImageSlider.tsx
│       ├── OtherReviewCard.tsx
│       ├── ReviewDetailCard.tsx
│       ├── ShopSearch.tsx
│       ├── ShopSearchList.tsx
│       ├── 📁 WriteItems
│       └── 📁 write
├── 📁 constants
├── 📂 features
│   ├── 📂 map
│   │   └── mapSlice.ts
│   ├── 📂 reviews
│   │   └── reviewApi.ts
│   ├── 📂 shops
│   │   └── shopApi.ts
│   └── 📂 users
│       └── userSlice.ts
├── 📂 hooks
│   └── useMap.tsx
├── 📂 libs
│   └── api.ts
├── 📂 map
│   ├── 📁 overlays
│   └── 📁 utils
├── 📂 pages
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── 📂 auth
│   │   ├── join.tsx
│   │   └── login.tsx
│   ├── index.tsx
│   ├── 📂 map
│   │   ├── [areaId].tsx
│   │   ├── index.tsx
│   │   └── list.tsx
│   ├── mypage.tsx
│   ├── 📂 review
│   │   ├── 📂 detail
│   │   │   └── [reviewId].tsx
│   │   ├── 📂 my
│   │   │   ├── emptyScrap.tsx
│   │   │   ├── emptyWrite.tsx
│   │   │   ├── scrap.tsx
│   │   │   └── write.tsx
│   │   └── write.tsx
│   └── 📂 shop
│       ├── collect.tsx
│       ├── collectEmpty.tsx
│       ├── 📂 detail
│       │   └── [id].tsx
│       └── 📂 theme
│           └── [type].tsx
├── 📂 reducers
│   └── index.ts
├── 📁 styles
├── 📂 types
│   ├── api.ts
│   ├── image.d.ts
│   ├── map.ts
│   ├── review.ts
│   ├── shop.ts
│   ├── styled.d.ts
│   └── user.ts
└── 📁 utils