🔨 프로젝트 소개

🥕 세컨드 핸드

동네를 기준으로 중고 물품을 올리고 거래할 수 있는 당근마켓 클론 프로젝트

🔨 프로젝트 데모

메인 페이지

동네 설정 페이지

카테고리 페이지

상품 등록 및 상품 카테고리 페이지

판매 목록 페이지

관심 목록 페이지

🔨 프로젝트 주요 기능

카카오 로그인을 통해 로그인할 수 있습니다.
현재 동네를 기준으로 등록된 상품을 볼 확인할 수 있습니다.
지원하는 동네에 한해서 유저의 동네를 변경할 수 있습니다.
상품을 카테고리 별로 확인할 수 있습니다.
각 상품의 상세정보를 확인할 수 있으며 좋아요를 눌러 찜할 수 있습니다.
사진과 함께 판매를 원하는 물품을 등록할 수 있습니다.
현재 유저가 판매중인 상품을 확인할 수 있습니다.
유저가 좋아요를 누른 상품을 확인할 수 있습니다.
상품에 대한 판매자와의 채팅을 할 수 있습니다.(리팩토링 후 구현 예정)

🔨 프로젝트 구조 및 기술 스택

1. 프로젝트 구조

📦
├─ .github
├─ .gitignore
├─ README.md
├─ be
├─ fe
│  ├─ .eslintrc.json
│  ├─ .gitignore
│  ├─ .prettierrc
│  ├─ .storybook
│  ├─ README.md
│  ├─ craco.config.js
│  ├─ package-lock.json
│  ├─ package.json
│  ├─ public
│  │  ├─ assets
│  ├─ src
│  │  ├─ App.test.tsx
│  │  ├─ App.tsx
│  │  ├─ apis
│  │  │  ├─ api
│  │  │  └─ instances
│  │  ├─ assets
│  │  │  └─ Icons
│  │  ├─ components
│  │  │  ├─ Detail
│  │  │  │  ├─ DetailHeader
│  │  │  │  └─ DetailMain
│  │  │  ├─ Home
│  │  │  │  ├─ HomeCategory
│  │  │  │  │  ├─ HomeCategoryHeader
│  │  │  │  │  └─ HomeCategoryMain
│  │  │  │  ├─ HomeMain
│  │  │  │  │  ├─ HomeMainHeader
│  │  │  │  │  └─ HomeMainMain
│  │  │  │  ├─ TownSearching
│  │  │  │  │  ├─ TownSearchingFooter
│  │  │  │  │  ├─ TownSearchingHeader
│  │  │  │  │  └─ TownSearchingMain
│  │  │  │  └─ TownSetting
│  │  │  │     ├─ TownSettingFooter
│  │  │  │     ├─ TownSettingHeader
│  │  │  │     └─ TownSettingMain
│  │  │  ├─ Like
│  │  │  │  ├─ LikeHeader
│  │  │  │  └─ LikeMain
│  │  │  ├─ Loading
│  │  │  │  └─ Skeleton
│  │  │  │     ├─ SkeletonHeader
│  │  │  │     └─ SkeletonListItem
│  │  │  ├─ Login
│  │  │  │  ├─ LoginHeader
│  │  │  │  └─ LoginMain
│  │  │  ├─ Sale
│  │  │  │  ├─ SaleCategory
│  │  │  │  │  ├─ SaleCategoryHeader
│  │  │  │  │  └─ SaleCategoryMain
│  │  │  │  ├─ SaleHeader
│  │  │  │  └─ SaleMain
│  │  │  ├─ SalesHistory
│  │  │  │  ├─ SalesHistoryHeader
│  │  │  │  └─ SalesHistoryMain
│  │  │  ├─ atoms
│  │  │  │  ├─ Buttons
│  │  │  │  │  ├─ Button
│  │  │  │  │  └─ CircleButton
│  │  │  │  ├─ Chip
│  │  │  │  ├─ Icon
│  │  │  │  └─ Inputs
│  │  │  │     ├─ ImageInput
│  │  │  │     └─ TextInput
│  │  │  ├─ molecules
│  │  │  │  ├─ Carousel
│  │  │  │  ├─ Chips
│  │  │  │  ├─ Dialog
│  │  │  │  ├─ Dropdown
│  │  │  │  ├─ ImagePreviews
│  │  │  │  ├─ ListItem
│  │  │  │  ├─ Modal
│  │  │  │  ├─ Navbar
│  │  │  │  ├─ SegmentedControl
│  │  │  │  │  └─ SegmentedButton
│  │  │  │  ├─ StatusModal
│  │  │  │  └─ TabBars
│  │  │  │     ├─ ChatTabBar
│  │  │  │     ├─ DetailTabBar
│  │  │  │     ├─ MainTabBar
│  │  │  │     └─ SaleTabBar
│  │  │  └─ portals
│  │  ├─ constants
│  │  ├─ crawl
│  │  ├─ hooks
│  │  │  ├─ useCurrentLocation.ts
│  │  │  ├─ useCurrentRegion.ts
│  │  │  ├─ useIntersectionObserver.ts
│  │  │  └─ useOutsideClick.ts
│  │  ├─ index.tsx
│  │  ├─ pages
│  │  │  ├─ Auth
│  │  │  ├─ Detail
│  │  │  ├─ Home
│  │  │  │  ├─ HomeCategory
│  │  │  │  ├─ HomeMain
│  │  │  │  ├─ TownSearching
│  │  │  │  └─ TownSetting
│  │  │  ├─ Like
│  │  │  ├─ Loading
│  │  │  │  └─ Skeleton
│  │  │  ├─ Login
│  │  │  ├─ Ready
│  │  │  ├─ Sale
│  │  │  │  └─ SaleCategory
│  │  │  └─ SalesHistory
│  │  ├─ router
│  │  ├─ styles
│  │  ├─ type
│  │  └─ utils
│  │     ├─ convertPriceFormat.ts
│  │     ├─ getStatusWord
│  │     └─ getTimeAgo
│  ├─ tsconfig.json
│  └─ tsconfig.paths.json
└─ ios

©generated by Project Tree Generator

2. 주요 기술 스택

목적	이름	버전
언어	TypeScript	^4.9.5
UI	React	^18.2.0
스타일	styled-components	^6.0.8
상태관리	Tanstack Query	^4.29.15
서버 통신	Axios	^1.4.0
테스트	Storybook	^7.0.20
환경 설정	prettier	^2.8.8
환경 설정	eslint	^8.42.0