초풀하나 서비스는 코로나 시대에 집에 머무르는 시간이 많아지면서 식물을 기르는 인구의 급증을 배경으로 만들어진 식물 정보 공유 SNS입니다.
팀 : 얼레디꼴레디(Already Goal Ready) (17팀)🌳
아이콘과 초풀하나 로고가 뜬 후 로그인 및 회원가입으로 연결됩니다.
로그인 했을 경우, 초풀마켓 피드로 연결됩니다.
로그인을 안했을 경우, 로그인 및 회원가입으로 연결됩니다.
로그인 했을 때
로그인 안했을 때
이메일과 비밀번호를 설정하여 회원가입을 할 수 있습니다.
이미 가입한 이메일 주소이거나 형식에 맞지 않는 이메일 주소, 6자 이하의 비밀번호 입력시 경고메세지가 뜹니다.
이메일과 비밀번호를 입력하면 다음버튼이 활성화 됩니다.
회원가입 시도
회원가입 후 연결되는 페이지입니다.
프로필사진, 사용자 이름, 계정ID, 사용자 소개를 입력할 수 있습니다.
계정ID에 영문, 숫자, 밑줄, 마침표, 사용중인 ID 입력시 경고메세지가 뜹니다.
입력 폼을 모두 작성하면 '초풀하나 시작하기'버튼이 활성화 됩니다.
프로필 설정
일치하지 않는 이메일와 비밀번호로 로그인 시도시 경고 메세지가 뜹니다.
입력창 클릭시 border-bottom이 활성화 됩니다.
이메일과 패스워드를 입력하면 로그인버튼이 활성화 됩니다.
로그인 시도
홈, 채팅, 게시물 작성, 프로필로 이동할 수 있습니다.
각각의 메뉴로 이동시 아이콘과 폰트가 활성화됩니다.
하단 메뉴 이동
로그인에 성공하면 홈피드가 뜹니다.
팔로우하는 유저가 없다면 '유저를 검색해 팔로우 해보세요!'라는 문구와 검색하기 버튼이 나옵니다.
팔로우하는 유저가 있다면 유저들의 게시글들이 피드에 최신순으로 뜹니다.
팔로우하는 유저가 없을 때
팔로우하는 유저가 있을 때
검색 기능
프로필 화면에서는 소개, 내가 판매 중인 상품, 게시글, 팔로워와 팔로잉 수를 확인 할 수 있습니다.
게시글의 경우 리스트형과 앨범형 두 가지로 선택하여 볼 수 있습니다.
나의 프로필 화면에서는 프로필 수정과 상품 등록 버튼이 있습니다.
오른쪽 상단의 햄버거 버튼을 누르면 '설정 및 개인정보', '로그아웃'의 모달창이 뜹니다.
프로필 수정을 누르면 프로필 사진, 사용자 이름, 계정ID, 소개를 수정할 수 있습니다.
타인의 프로필 화면에는 채팅 버튼, 팔로우/언팔로우 버튼, 공유 버튼이 있습니다.
내 프로필
타 유저의 프로필
이미지, 상품명, 가격, 판매 링크 입력창이 있습니다.
조건에 맞게 사항들을 입력하면 저장버튼이 활성화 됩니다.
상품 등록이 완성되면 판매중인 상품에 등록됩니다.
상품등록 예시
구현 예정입니다.
채팅 목록과 채팅방은 UI 구현만 완료된 상태입니다.
채팅방에서 우측 상단의 햄버거 버튼을 누르면 하단에서 모달창이 뜹니다.
채팅목록
채팅방
글을 작성할 수 있고, 이미지 첨부도 가능합니다.
이미지 첨부는 최대 3장까지 가능합니다.
게시글 하단에 게시글 업로드 날짜가 나와 있습니다.
업로드 된 게시글에 좋아요(하트) 버튼을 누르면 하트의 색이 채워지면서 숫자가 올라갑니다.
게시글 예시
업로드 된 게시글에 댓글을 작성할 수 있으며, 댓글이 몇 분 전에 작성되었는지 표기됩니다.
댓글창에 내용을 입력하면 게시버튼이 활성화됩니다.
게시된 댓글의 햄버거 버튼을 누르시면 타인 댓글일 경우 '신고하기'가, 나의 댓글일 경우 '삭제하기'와 '수정하기' 모달이 뜹니다.
댓글 작성
내 댓글과 다른 유저의 댓글 모달 비교
업로드 된 게시글에 좋아요(하트) 버튼을 누르면 하트의 색이 채워지면서 숫자가 올라갑니다.
반면 이미 채워진 좋아요 버튼을 누르면 빈 하트가 되면서 숫자가 내려갑니다.
좋아요
[기술]
Storybook
React
Styled-Component
Recoil
[개발환경]
기간 : 5주 - 2022.6.27 (월) ~ 2022. 7. 29 (금)
프로젝트 회의 : 6. 27 (월) ~ 7. 3 (일)
아이디어 논의
코드 및 커밋 컨벤션 설정
기술스택 결정
역할 분담
UI 구현 : 7. 4(월) ~ 7. 15 (금)
기능 구현 : 7. 18 (월) ~ 7. 29 (금)
🙋🏻♀️김미리
UI
아톰 : 프로필
모듈 : 로그인 인풋, 로그인 폼
페이지 : 로그인 페이지
기능구현 : 로그인 기능, 좋아요 기능
🙋🏻♂️김민석
UI
아톰 : 로고, 버튼, 인풋
모듈 : 커스텀 인풋, 갤러리 포스트, 포스트
페이지 : 404, 스플래쉬 스크린, 프로필 세팅, 프로필 수정, 상품 등록, 홈, 검색
기능구현 : 검색, 프로필 데이터 받아오기, 리스트뷰 갤러리뷰, 언팔로우
🙋🏻♂️송명석
UI
아톰 : 이미지, 라벨
모듈 : 댓글, 포스트(유저정보), 유저정보
페이지 : 팔로워, 게시글 상세, sns로그인, 채팅 리스트, 채팅 방
기능구현 : Myprofile 정보 받아오기, 상품 업로드
🙋🏻♀️양다은
UI
아톰 : 아이콘, SNS 버튼
모듈 : DropUp, 모달창, 상품리스트, Header, Nav, 프로필 Btn
페이지 : 프로필 페이지, 업로드
기능구현 : 포스트 업로드, 댓글 작성 및 삭제, 게시물 수정 및 삭제, 로그아웃
폴더트리
