초풀하나🌳

배포 URL : https://chofulhana.netlify.app/

초풀하나 서비스는 코로나 시대에 집에 머무르는 시간이 많아지면서 식물을 기르는 인구의 급증을 배경으로 만들어진 식물 정보 공유 SNS입니다.
일상과 식물에 대한 정보 혹은 자문을 구하면서 SNS 활동을 할 수 있습니다.
사용자는 글과 사진들을 올려 다른 사용자들과 교류할 수 있습니다.
다른 사용자들의 글에 좋아요를 누르거나, 팔로우 하거나, 채팅을 이용해 폭 넓은 커뮤니케이션을 나눌 수 있습니다.
내가 키우는 식물에 대해 더 알아볼 수 있는 SNS, 초풀하나입니다!

미리보기 아이디 및 비밀번호

• ID : choful@naver.com
• Password: 1234
  

팀 : 얼레디꼴레디(Already Goal Ready) (17팀)🌳

김미리	김민석	송명석	양다은
Github : ThisisMiri	Github : alstjr5949	Github : myeong-seok	Github : dana-y

1. 기능🌳

---

[스플래쉬]

• 아이콘과 초풀하나 로고가 뜬 후 로그인 및 회원가입으로 연결됩니다.
• 로그인 했을 경우, 초풀마켓 피드로 연결됩니다.
• 로그인을 안했을 경우, 로그인 및 회원가입으로 연결됩니다.

로그인 했을 때	로그인 안했을 때

---

[회원가입]

• 이메일과 비밀번호를 설정하여 회원가입을 할 수 있습니다.
• 이미 가입한 이메일 주소이거나 형식에 맞지 않는 이메일 주소, 6자 이하의 비밀번호 입력시 경고메세지가 뜹니다.
• 이메일과 비밀번호를 입력하면 다음버튼이 활성화 됩니다.

회원가입 시도

---

[프로필 설정]

• 회원가입 후 연결되는 페이지입니다.
• 프로필사진, 사용자 이름, 계정ID, 사용자 소개를 입력할 수 있습니다.
• 계정ID에 영문, 숫자, 밑줄, 마침표, 사용중인 ID 입력시 경고메세지가 뜹니다.
• 입력 폼을 모두 작성하면 '초풀하나 시작하기'버튼이 활성화 됩니다.

프로필 설정

---

[로그인]

• 일치하지 않는 이메일와 비밀번호로 로그인 시도시 경고 메세지가 뜹니다.
• 입력창 클릭시 border-bottom이 활성화 됩니다.
• 이메일과 패스워드를 입력하면 로그인버튼이 활성화 됩니다.

로그인 시도

---

[하단 메뉴]

• 홈, 채팅, 게시물 작성, 프로필로 이동할 수 있습니다.
• 각각의 메뉴로 이동시 아이콘과 폰트가 활성화됩니다.

하단 메뉴 이동

---

[홈피드]

• 로그인에 성공하면 홈피드가 뜹니다.
• 팔로우하는 유저가 없다면 '유저를 검색해 팔로우 해보세요!'라는 문구와 검색하기 버튼이 나옵니다.
• 팔로우하는 유저가 있다면 유저들의 게시글들이 피드에 최신순으로 뜹니다.

팔로우하는 유저가 없을 때	팔로우하는 유저가 있을 때

---

[검색하기]

- 검색하기 버튼과 상단 오른쪽 돋보기 버튼을 누르면 검색창으로 이동합니다.
- 검색하고자 하는 사용자를 찾았다면 사용자의 프로필을 눌러 들어갈 수 있습니다.

검색 기능

---

[프로필]

• 프로필 화면에서는 소개, 내가 판매 중인 상품, 게시글, 팔로워와 팔로잉 수를 확인 할 수 있습니다.
• 게시글의 경우 리스트형과 앨범형 두 가지로 선택하여 볼 수 있습니다.
• 나의 프로필 화면에서는 프로필 수정과 상품 등록 버튼이 있습니다.
• 오른쪽 상단의 햄버거 버튼을 누르면 '설정 및 개인정보', '로그아웃'의 모달창이 뜹니다.
• 프로필 수정을 누르면 프로필 사진, 사용자 이름, 계정ID, 소개를 수정할 수 있습니다.
  모든 사항을 입력하면 저장버튼이 활성화 됩니다.
• 타인의 프로필 화면에는 채팅 버튼, 팔로우/언팔로우 버튼, 공유 버튼이 있습니다.

내 프로필	타 유저의 프로필

---

[상품 등록]

• 이미지, 상품명, 가격, 판매 링크 입력창이 있습니다.
• 조건에 맞게 사항들을 입력하면 저장버튼이 활성화 됩니다.
• 상품 등록이 완성되면 판매중인 상품에 등록됩니다.

상품등록 예시

---

[채팅]

• 구현 예정입니다.
• 채팅 목록과 채팅방은 UI 구현만 완료된 상태입니다.
• 채팅방에서 우측 상단의 햄버거 버튼을 누르면 하단에서 모달창이 뜹니다.

채팅목록	채팅방

---

[게시글]

• 글을 작성할 수 있고, 이미지 첨부도 가능합니다.
• 이미지 첨부는 최대 3장까지 가능합니다.
• 게시글 하단에 게시글 업로드 날짜가 나와 있습니다.
• 업로드 된 게시글에 좋아요(하트) 버튼을 누르면 하트의 색이 채워지면서 숫자가 올라갑니다.
  반면 이미 채워진 좋아요 버튼을 누르면 빈 하트가 되면서 숫자가 내려갑니다.

게시글 예시

---

[댓글]

• 업로드 된 게시글에 댓글을 작성할 수 있으며, 댓글이 몇 분 전에 작성되었는지 표기됩니다.
• 댓글창에 내용을 입력하면 게시버튼이 활성화됩니다.
• 게시된 댓글의 햄버거 버튼을 누르시면 타인 댓글일 경우 '신고하기'가, 나의 댓글일 경우 '삭제하기'와 '수정하기' 모달이 뜹니다.

댓글 작성	내 댓글과 다른 유저의 댓글 모달 비교

---

[좋아요]

• 업로드 된 게시글에 좋아요(하트) 버튼을 누르면 하트의 색이 채워지면서 숫자가 올라갑니다.
  
• 반면 이미 채워진 좋아요 버튼을 누르면 빈 하트가 되면서 숫자가 내려갑니다.

좋아요

2. 기술 및 개발환경🌳

[기술]

• Storybook
• React
• Styled-Component
• Recoil

[개발환경]

• Github-Flow
• 초풀하나의 Jira
• Github-Wiki
• 초풀하나의 Figma

3. 개발일정🌳

기간 : 5주 - 2022.6.27 (월) ~ 2022. 7. 29 (금)

• 프로젝트 회의 : 6. 27 (월) ~ 7. 3 (일)
  
  • 아이디어 논의
  • 코드 및 커밋 컨벤션 설정
  • 기술스택 결정
  • 역할 분담
• UI 구현 : 7. 4(월) ~ 7. 15 (금)
  
• 기능 구현 : 7. 18 (월) ~ 7. 29 (금)

4. 역할분담🌳

• 🙋🏻‍♀️김미리

  • UI
    • 아톰 : 프로필
    • 모듈 : 로그인 인풋, 로그인 폼
    • 페이지 : 로그인 페이지
  • 기능구현 : 로그인 기능, 좋아요 기능

• 🙋🏻‍♂️김민석

  • UI
    • 아톰 : 로고, 버튼, 인풋
    • 모듈 : 커스텀 인풋, 갤러리 포스트, 포스트
    • 페이지 : 404, 스플래쉬 스크린, 프로필 세팅, 프로필 수정, 상품 등록, 홈, 검색
  • 기능구현 : 검색, 프로필 데이터 받아오기, 리스트뷰 갤러리뷰, 언팔로우

• 🙋🏻‍♂️송명석

  • UI
    • 아톰 : 이미지, 라벨
    • 모듈 : 댓글, 포스트(유저정보), 유저정보
    • 페이지 : 팔로워, 게시글 상세, sns로그인, 채팅 리스트, 채팅 방
  • 기능구현 : Myprofile 정보 받아오기, 상품 업로드

• 🙋🏻‍♀️양다은

  • UI
    • 아톰 : 아이콘, SNS 버튼
    • 모듈 : DropUp, 모달창, 상품리스트, Header, Nav, 프로필 Btn
    • 페이지 : 프로필 페이지, 업로드
  • 기능구현 : 포스트 업로드, 댓글 작성 및 삭제, 게시물 수정 및 삭제, 로그아웃

5. 폴더트리
   📦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