배포 URL : https://chofulhana.netlify.app/
초풀하나 서비스는 코로나 시대에 집에 머무르는 시간이 많아지면서 식물을 기르는 인구의 급증을 배경으로 만들어진 식물 정보 공유 SNS입니다.
일상과 식물에 대한 정보 혹은 자문을 구하면서 SNS 활동을 할 수 있습니다.
사용자는 글과 사진들을 올려 다른 사용자들과 교류할 수 있습니다.
다른 사용자들의 글에 좋아요를 누르거나, 팔로우 하거나, 채팅을 이용해 폭 넓은 커뮤니케이션을 나눌 수 있습니다.
내가 키우는 식물에 대해 더 알아볼 수 있는 SNS, 초풀하나입니다!
| 김미리 | 김민석 | 송명석 | 양다은 |
|---|---|---|---|
 |
 |
 |
 |
| Github : ThisisMiri | Github : alstjr5949 | Github : myeong-seok | Github : dana-y |
- 아이콘과 초풀하나 로고가 뜬 후 로그인 및 회원가입으로 연결됩니다.
- 로그인 했을 경우, 초풀마켓 피드로 연결됩니다.
- 로그인을 안했을 경우, 로그인 및 회원가입으로 연결됩니다.
| 로그인 했을 때 | 로그인 안했을 때 |
|---|---|
 |
 |
- 이메일과 비밀번호를 설정하여 회원가입을 할 수 있습니다.
- 이미 가입한 이메일 주소이거나 형식에 맞지 않는 이메일 주소, 6자 이하의 비밀번호 입력시 경고메세지가 뜹니다.
- 이메일과 비밀번호를 입력하면 다음버튼이 활성화 됩니다.
| 회원가입 시도 |
|---|
 |
- 회원가입 후 연결되는 페이지입니다.
- 프로필사진, 사용자 이름, 계정ID, 사용자 소개를 입력할 수 있습니다.
- 계정ID에 영문, 숫자, 밑줄, 마침표, 사용중인 ID 입력시 경고메세지가 뜹니다.
- 입력 폼을 모두 작성하면 '초풀하나 시작하기'버튼이 활성화 됩니다.
| 프로필 설정 |
|---|
 |
- 일치하지 않는 이메일와 비밀번호로 로그인 시도시 경고 메세지가 뜹니다.
- 입력창 클릭시 border-bottom이 활성화 됩니다.
- 이메일과 패스워드를 입력하면 로그인버튼이 활성화 됩니다.
| 로그인 시도 |
|---|
 |
- 홈, 채팅, 게시물 작성, 프로필로 이동할 수 있습니다.
- 각각의 메뉴로 이동시 아이콘과 폰트가 활성화됩니다.
| 하단 메뉴 이동 |
|---|
 |
- 로그인에 성공하면 홈피드가 뜹니다.
- 팔로우하는 유저가 없다면 '유저를 검색해 팔로우 해보세요!'라는 문구와 검색하기 버튼이 나옵니다.
- 팔로우하는 유저가 있다면 유저들의 게시글들이 피드에 최신순으로 뜹니다.
| 팔로우하는 유저가 없을 때 | 팔로우하는 유저가 있을 때 |
|---|---|
 |
 |
- 검색하기 버튼과 상단 오른쪽 돋보기 버튼을 누르면 검색창으로 이동합니다.
- 검색하고자 하는 사용자를 찾았다면 사용자의 프로필을 눌러 들어갈 수 있습니다.
| 검색 기능 |
|---|
 |
- 프로필 화면에서는 소개, 내가 판매 중인 상품, 게시글, 팔로워와 팔로잉 수를 확인 할 수 있습니다.
- 게시글의 경우 리스트형과 앨범형 두 가지로 선택하여 볼 수 있습니다.
- 나의 프로필 화면에서는 프로필 수정과 상품 등록 버튼이 있습니다.
- 오른쪽 상단의 햄버거 버튼을 누르면 '설정 및 개인정보', '로그아웃'의 모달창이 뜹니다.
- 프로필 수정을 누르면 프로필 사진, 사용자 이름, 계정ID, 소개를 수정할 수 있습니다.
모든 사항을 입력하면 저장버튼이 활성화 됩니다. - 타인의 프로필 화면에는 채팅 버튼, 팔로우/언팔로우 버튼, 공유 버튼이 있습니다.
| 내 프로필 | 타 유저의 프로필 |
|---|---|
 |
 |
- 이미지, 상품명, 가격, 판매 링크 입력창이 있습니다.
- 조건에 맞게 사항들을 입력하면 저장버튼이 활성화 됩니다.
- 상품 등록이 완성되면 판매중인 상품에 등록됩니다.
| 상품등록 예시 |
|---|
 |
- 구현 예정입니다.
- 채팅 목록과 채팅방은 UI 구현만 완료된 상태입니다.
- 채팅방에서 우측 상단의 햄버거 버튼을 누르면 하단에서 모달창이 뜹니다.
| 채팅목록 | 채팅방 |
|---|---|
 |
 |
- 글을 작성할 수 있고, 이미지 첨부도 가능합니다.
- 이미지 첨부는 최대 3장까지 가능합니다.
- 게시글 하단에 게시글 업로드 날짜가 나와 있습니다.
- 업로드 된 게시글에 좋아요(하트) 버튼을 누르면 하트의 색이 채워지면서 숫자가 올라갑니다.
반면 이미 채워진 좋아요 버튼을 누르면 빈 하트가 되면서 숫자가 내려갑니다.
| 게시글 예시 |
|---|
 |
- 업로드 된 게시글에 댓글을 작성할 수 있으며, 댓글이 몇 분 전에 작성되었는지 표기됩니다.
- 댓글창에 내용을 입력하면 게시버튼이 활성화됩니다.
- 게시된 댓글의 햄버거 버튼을 누르시면 타인 댓글일 경우 '신고하기'가, 나의 댓글일 경우 '삭제하기'와 '수정하기' 모달이 뜹니다.
| 댓글 작성 | 내 댓글과 다른 유저의 댓글 모달 비교 |
|---|---|
 |
 |
- 업로드 된 게시글에 좋아요(하트) 버튼을 누르면 하트의 색이 채워지면서 숫자가 올라갑니다.
- 반면 이미 채워진 좋아요 버튼을 누르면 빈 하트가 되면서 숫자가 내려갑니다.
| 좋아요 |
|---|
 |
[기술]
- Storybook
- React
- Styled-Component
- Recoil
[개발환경]
- Github-Flow
- 초풀하나의 Jira
- Github-Wiki
- 초풀하나의 Figma
기간 : 5주 - 2022.6.27 (월) ~ 2022. 7. 29 (금)
- 프로젝트 회의 : 6. 27 (월) ~ 7. 3 (일)
- 아이디어 논의
- 코드 및 커밋 컨벤션 설정
- 기술스택 결정
- 역할 분담
- UI 구현 : 7. 4(월) ~ 7. 15 (금)
- 기능 구현 : 7. 18 (월) ~ 7. 29 (금)
-
🙋🏻♀️김미리
- UI
- 아톰 : 프로필
- 모듈 : 로그인 인풋, 로그인 폼
- 페이지 : 로그인 페이지
- 기능구현 : 로그인 기능, 좋아요 기능
- UI
-
🙋🏻♂️김민석
- UI
- 아톰 : 로고, 버튼, 인풋
- 모듈 : 커스텀 인풋, 갤러리 포스트, 포스트
- 페이지 : 404, 스플래쉬 스크린, 프로필 세팅, 프로필 수정, 상품 등록, 홈, 검색
- 기능구현 : 검색, 프로필 데이터 받아오기, 리스트뷰 갤러리뷰, 언팔로우
- UI
-
🙋🏻♂️송명석
- UI
- 아톰 : 이미지, 라벨
- 모듈 : 댓글, 포스트(유저정보), 유저정보
- 페이지 : 팔로워, 게시글 상세, sns로그인, 채팅 리스트, 채팅 방
- 기능구현 : Myprofile 정보 받아오기, 상품 업로드
- UI
-
🙋🏻♀️양다은
- UI
- 아톰 : 아이콘, SNS 버튼
- 모듈 : DropUp, 모달창, 상품리스트, Header, Nav, 프로필 Btn
- 페이지 : 프로필 페이지, 업로드
- 기능구현 : 포스트 업로드, 댓글 작성 및 삭제, 게시물 수정 및 삭제, 로그아웃
- UI
- 폴더트리
📦choful-market
┣ 📂.storybook
┣ 📂node_modules
┣ 📂public
┃ ┣ 📂assets
┃ ┗ 📜index.html
┣ 📂src
┃ ┣ 📂assets
┃ ┣ 📂components
┃ ┃ ┣ 📂atoms
┃ ┃ ┃ ┣ 📂Button
┃ ┃ ┃ ┃ ┣ 📜Button.jsx
┃ ┃ ┃ ┃ ┗ 📜Button.stories.js
┃ ┃ ┃ ┣ 📂Icon
┃ ┃ ┃ ┃ ┣ 📜Icon.jsx
┃ ┃ ┃ ┃ ┗ 📜Icon.stories.js
┃ ┃ ┃ ┣ 📂Img
┃ ┃ ┃ ┃ ┣ 📜Img.jsx
┃ ┃ ┃ ┃ ┗ 📜Img.stories.js
┃ ┃ ┃ ┣ 📂Input
┃ ┃ ┃ ┃ ┣ 📜Input.jsx
┃ ┃ ┃ ┃ ┗ 📜Input.stories.js
┃ ┃ ┃ ┣ 📂Label
┃ ┃ ┃ ┃ ┣ 📜Label.jsx
┃ ┃ ┃ ┃ ┗ 📜Label.stories.js
┃ ┃ ┃ ┣ 📂Logo
┃ ┃ ┃ ┃ ┣ 📜Logo.jsx
┃ ┃ ┃ ┃ ┗ 📜Logo.stories.js
┃ ┃ ┃ ┣ 📂Profile
┃ ┃ ┃ ┃ ┣ 📜Profile.jsx
┃ ┃ ┃ ┃ ┗ 📜Profile.stories.js
┃ ┃ ┃ ┗ 📂SnsButton
┃ ┃ ┃ ┃ ┣ 📜SnsButton.jsx
┃ ┃ ┃ ┃ ┗ 📜SnsButton.stories.js
┃ ┃ ┣ 📂common
┃ ┃ ┃ ┗ 📜commonWrapper.js
┃ ┃ ┗ 📂modules
┃ ┃ ┃ ┣ 📂Comment
┃ ┃ ┃ ┃ ┗ 📜Comment.jsx
┃ ┃ ┃ ┣ 📂CustomFileInput
┃ ┃ ┃ ┃ ┣ 📜CustomFileInput.jsx
┃ ┃ ┃ ┃ ┗ 📜CustomFileInput.stories.js
┃ ┃ ┃ ┣ 📂DropUp
┃ ┃ ┃ ┃ ┣ 📜DropUp.jsx
┃ ┃ ┃ ┃ ┗ 📜DropUp.stories.js
┃ ┃ ┃ ┣ 📂ForSale
┃ ┃ ┃ ┃ ┗ 📜ForSale.jsx
┃ ┃ ┃ ┣ 📂GalleryPost
┃ ┃ ┃ ┃ ┗ 📜GalleryPost.jsx
┃ ┃ ┃ ┣ 📂Header
┃ ┃ ┃ ┃ ┗ 📜Header.jsx
┃ ┃ ┃ ┣ 📂InputBox
┃ ┃ ┃ ┃ ┣ 📜InputBox.jsx
┃ ┃ ┃ ┃ ┗ 📜InputBox.stories.js
┃ ┃ ┃ ┣ 📂Modal
┃ ┃ ┃ ┃ ┣ 📜Modal.jsx
┃ ┃ ┃ ┃ ┗ 📜Modal.stories.js
┃ ┃ ┃ ┣ 📂MyprofileBtn
┃ ┃ ┃ ┃ ┗ 📜MyProfileBtn.jsx
┃ ┃ ┃ ┣ 📂Nav
┃ ┃ ┃ ┃ ┗ 📜Nav.jsx
┃ ┃ ┃ ┣ 📂Post
┃ ┃ ┃ ┃ ┣ 📜Post.jsx
┃ ┃ ┃ ┃ ┗ 📜Post.stories.js
┃ ┃ ┃ ┣ 📂PostCommentInput
┃ ┃ ┃ ┃ ┗ 📜PostCommentInput.jsx
┃ ┃ ┃ ┣ 📂PostUserInfo
┃ ┃ ┃ ┃ ┗ 📜PostUserInfo.jsx
┃ ┃ ┃ ┣ 📂ProfileInfo
┃ ┃ ┃ ┃ ┗ 📜ProfileInfo.jsx
┃ ┃ ┃ ┣ 📂ProfilePost
┃ ┃ ┃ ┃ ┗ 📜ProfilePost.jsx
┃ ┃ ┃ ┣ 📂UserInformation
┃ ┃ ┃ ┃ ┗ 📜UserInformation.jsx
┃ ┃ ┃ ┗ 📂YourProfileBtn
┃ ┃ ┃ ┃ ┗ 📜YourProfileBtn.jsx
┃ ┣ 📂font
┃ ┃ ┗ 📜font.css
┃ ┣ 📂pages
┃ ┃ ┣ 📂404
┃ ┃ ┃ ┗ 📜404.jsx
┃ ┃ ┣ 📂EmailLogin
┃ ┃ ┃ ┗ 📜EmailLogin.jsx
┃ ┃ ┣ 📂EmailSignUp
┃ ┃ ┃ ┗ 📜EmailSignUp.jsx
┃ ┃ ┣ 📂Followers
┃ ┃ ┃ ┗ 📜Followers.jsx
┃ ┃ ┣ 📂Home
┃ ┃ ┃ ┗ 📜Home.jsx
┃ ┃ ┣ 📂MyProfile
┃ ┃ ┃ ┗ 📜MyProfile.jsx
┃ ┃ ┣ 📂MyProfileAddProduct
┃ ┃ ┃ ┗ 📜MyProfileAddProduct.jsx
┃ ┃ ┣ 📂MyProfileEdit
┃ ┃ ┃ ┗ 📜MyProfileEdit.jsx
┃ ┃ ┣ 📂PostDetail
┃ ┃ ┃ ┗ 📜PostDetail.jsx
┃ ┃ ┣ 📂PostUpload
┃ ┃ ┃ ┗ 📜PostUpload.jsx
┃ ┃ ┣ 📂SNSLogin
┃ ┃ ┃ ┗ 📜SNSLogin.jsx
┃ ┃ ┣ 📂Search
┃ ┃ ┃ ┗ 📜Search.jsx
┃ ┃ ┣ 📂SetProfile
┃ ┃ ┃ ┗ 📜SetProfile.jsx
┃ ┃ ┣ 📂SplashScreen
┃ ┃ ┃ ┗ 📜SplashScreen.jsx
┃ ┃ ┣ 📂YourProfile
┃ ┃ ┃ ┗ 📜YourProfile.jsx
┃ ┃ ┣ 📜ChatList.jsx
┃ ┃ ┗ 📜ChatRoom.jsx
┃ ┣ 📜App.jsx
┃ ┣ 📜atoms.js
┃ ┣ 📜index.jsx
┃ ┗ 📜theme.js
┣ 📜.gitignore
┣ 📜.gitmessage.txt
┣ 📜.prettierrc
┣ 📜README.md
┣ 📜package-lock.json
┗ 📜package.json