✂️ 헤어스타일 커뮤니티앱 HAIRWHERE

• 배포 URL : https://hairwhere.vercel.app

프로젝트 소개

• HAIRWHERE는 헤어스타일에 관심있는 사람들이 헤어스타일에 대한 정보를 공유하는 SNS입니다.
• 본인의 헤어스타일 사진과 함께 헤어스타일 이름, 기장, 색, 미용실 정보를 공유할 수 있습니다.
• 검색을 통해 여러 유저들의 헤어스타일을 볼 수 있습니다.
• 마음에 드는 게시글에 좋아요를 누르거나 댓글을 작성할 수 있습니다.

팀원 구성

Frontend

김산호	이서영
@coral0723	@iamseoyoung

Backend

박동준
@qkrehdwns032

1. 개발 스택

Frontend

Backend

2. 브랜치 전략

• Git-flow 전략을 기반으로 main, develop 브랜치와 feature, fix, style 등의 보조 브랜치를 운용했습니다.
• main, develop 브랜치로 나누고 develop 브랜치에서 이슈의 종류에 맞는 브랜치를 다시 나누어 개발을 하였습니다.
  • main 브랜치는 배포 단계에서만 사용하는 브랜치입니다.
  • develop 브랜치는 개발 단계에서 git-flow의 master 역할을 하는 브랜치입니다.
  • feature, fix, style 브랜치는 기능 단위로 독립적인 개발 환경을 위하여 사용하고 merge 후 각 브랜치를 삭제해주었습니다.

3. 역할 분담

🪸김산호

• UI
  • 페이지 : 홈, 검색, 게시글, 유저, 미용실, 미용실 검색, 프로필 수정
  • 공용 컴포넌트 : NavBar, Post, 남녀 카테고리 버튼, 검색 카테고리, 댓글/대댓글, Alert 모달, Loading
• 기능
  • 로그인/로그아웃, 회원가입, 남녀 게시글 변경, 유저 프로필 불러오기, 게시글 상세 확인, 검색 기능, 게시글 등록 및 삭제, 미용실 검색, 프로필 수정, 댓글/대댓글 등록, 좋아요 기능

🐩이서영

• UI
  • 페이지 : 로그인, 회원가입, 게시글 작성, 좋아요, 프로필
  • 공용 컴포넌트 : Header, Avatar, 카테고리 태그
• 기능
  • 게시글 인피니트 스크롤링

😸박동준

• 기능
  • 로그인/로그아웃, 회원가입, 게시글 불러오기, 게시글 등록 및 삭제, 검색, 좋아요, 프로필 수정, 댓글/대댓글 등의 전체적인 백엔드 기능 담당

4. 페이지별 기능

[홈 피드]

• 유저의 게시글들이 최신순으로 보여집니다.
• 우측 하단의 성별 버튼을 통해 남성, 여성 게시글을 필터링 하여 볼 수 있습니다.
• 로그인 후 좋아요를 누를 수 있고 게시글 클릭 시 게시글 상세 페이지로 이동합니다.

홈 피드	좋아요&페이지 이동

[회원가입]

• 아이디, 비밀번호, 닉네임, 이메일, 프로필 사진을 입력하면 가입할 수 있습니다.

회원가입

[로그인]

• 아이디와 비밀번호를 입력하면 입력창에서 유효성 검사를 통해 통과하지 못 할 경우 경고 문구가 나타나게 됩니다.
• 아이디 형식이 유효하지 않거나 비밀번호가 틀렸을 경우에는 하단에 경구 문구가 나타납니다.
• 로그인에 성공하면 홈 피드 화면으로 이동합니다.

로그인	아이디 형식 틀림	아이디/비밀번호 틀림

[로그아웃]

• 우측 상단의 로그아웃 버튼을 클릭하면 로그아웃이 진행됩니다.
• 로그아웃시 쿠키를 삭제하고 초기화면으로 이동합니다.

로그아웃

[검색]

• 헤어스타일로 게시글을 검색할 수 있습니다.
• 왼쪽 상단의 필터 버튼을 눌러 성별, 기장, 색을 선택할 수 있습니다.

검색

[게시글]

1. 게시글 작성

• 모든 항목이 입력되면 업로드 버튼이 활성화됩니다.
• 최대 세 장까지 이미지 첨부가 가능하며 첨부한 파일을 취소할 수 있습니다.

게시글 작성

2. 게시글 삭제

• 자신의 게시글일 경우 삭제가 가능합니다.
• 게시글 삭제 버튼 클릭 시, 게시글을 삭제하고 페이지를 리렌더링하여 삭제된 내용을 페이지에 반영합니다.

게시글 삭제

3. 댓글/대댓글

• 게시글에 댓글을 등록할 수 있습니다.
• 대댓글을 등록할 수 있습니다.

댓글	대댓글

4. 유저 프로필

• 게시글의 유저 프로필을 누르면 이동합니다.
• 유저가 올린 게시글을 볼 수 있습니다.

유저 프로필

5. 미용실

• 게시글에 등록된 미용실 이름을 클릭하면 등록된 다른 글들을 볼 수 있습니다.

프로필 설정

[좋아요]

• 사용자가 좋아요를 누른 게시글들을 볼 수 있습니다.

상품 등록

[프로필]

• 본인이 업로드한 게시글 들을 볼 수 있습니다.
• 닉네임, 프로필 사진 변경을 할 수 있습니다.

프로필 수정

[하단 탭 메뉴]

• 하단 탭 메뉴 : 홈, 검색, 게시물 작성, 좋아요 페이지, 내 프로필 페이지로 이동합니다.

하단 탭

5. ERD

6. 프로젝트 구조

[Frontend]

├── .eslintrc.json
├── .gitignore
├── .prettierrc.json
├── package-lock.json
├── package.json
├── next.config.json
├── tailwind.config.json
├── tsconfig.json
├── public
│    ├── logo.svg
│    └── mockServiceWorker.js
└── src
     └── app
          ├── _component
          │    ├── mockServiceWorker.tsx
          │    └── MSWcomponent.tsx
          ├── api\auth\[...nextauth]
          │    └── route.ts
          ├── globals.css
          ├── layout.tsx
          ├── notFound.tsx
          ├── components\ui
          ├── lib
          ├── mocks
          ├── model
          ├── store
          └── (main)
               ├── _component
               ├── _lib
               ├── [username]
               ├── @modal
               ├── likes
               ├── login
               ├── myPage
               ├── notice
               ├── post
               ├── recomment
               ├── register
               ├── salon
               ├── search
               ├── searchResult
               ├── error.tsx
               ├── page.tsx
               ├── home.module.css
               ├── layout.tsx
               ├── layout.module.css
               └── loading.tsx

[Backend]

└──src
  └──main
    └──java
      └──com.example.neulbom
        └──config
          └──NCPConfig
          └──SecurityConfig
        └──controller
          └──CommentController
          └──GlobalExeptionHandler
          └──LikeController
          └──PhotoController
          └──UserController
        └──domain
          └──Comment
          └──Like
          └──Photo
          └──User
        └──dto
          └──CommentRequest
          └──CommentResponse
          └──LoginRequest
          └──PhotoResponse
          └──Register
          └──Upload
          └──UserUploadResponse
        └──repository
          └──CommentRepository
          └──LikeRepository
          └──PhotoRepository
          └──UserRepository
        └──service
          └──CommentService
          └──LikeService
          └──NCPStorageService
          └──PhotoService
          └──UserService
      └──NeulbomApplication
    └──resources
      application.yml
  └──test