diff --git a/README.md b/README.md index 392858bd..d117c937 100644 --- a/README.md +++ b/README.md @@ -1,75 +1,228 @@ -# 모여라IT -## 프로젝트 소개 +## 📌 프로젝트 개요 -### 시작하기 +🔗 https://my.sjcpop.com/ -```bash +**개발자를 위한 스터디, 프로젝트 모집 서비스** -yarn dev +😵‍💫 스터디 구하려다가 오픈카톡 타고, 디스코드 들어가고… 시작도 전에 지쳐보신 적 있으신가요? +🤔 신청은 왔는데 내가 찾는 신청자가 아니라서 난감했던 경험도 한 번쯤 있으셨죠? + +**모여라IT**은 ‘참여하기’ 버튼 한 번이면 신청 끝! 🙌 + +원하는 **기술 스택이나 포지션**이 모임에 표시되어 있으니까 딱 맞는 사람을 찾기 쉬워요 🔍 + +신청자의 프로필도 확인할 수 있고, 궁금한 점은 댓글로 가볍게 소통할 수도 있어요 💬😊 + +[메인 사진] + +### 🔄 서비스 흐름도 + +[플로우차트] + +
+ +## 🚀 설치 및 실행 + + + +```jsx +$ yarn install +$ yarn dev ``` -- 배포 url -- test id/password +### 1. 로컬 개발 환경에서 쿠키 사용을 위한 설정 -## 아키텍처 +`SameSite=None` 및 `Secure=true` 쿠키를 정상적으로 사용하려면 다음과 같은 환경 구성이 필요합니다. -**화면 구성/API** +### ✅ `SameSite=None` 대응 – 커스텀 도메인 설정 -- 파일 구조도 +`SameSite=None` 속성이 설정된 쿠키는 **도메인이 다를 경우**에도 전송되므로, 로컬에서도 실제 배포 도메인(`sjcpop.com`)과 유사한 도메인을 사용해야 합니다. -### components - atomic 디자인 : 중복되는 컴포넌트들 간의 재사용성을 높이기 위해 채택하였습니다. +1. `/etc/hosts` 파일 수정: + + ```bash + $ sudo vi /etc/hosts + ``` + +2. 다음 라인을 추가: + + ```bash + 127.0.0.1 local.sjcpop.com + ``` + + +### ✅ `Secure=true` 대응 – HTTPS 개발 서버 실행 + +`Secure=true`가 설정된 쿠키는 **HTTPS 환경에서만** 전송됩니다. 로컬 개발 서버도 HTTPS로 실행해야 합니다. + +1. Next.js를 HTTPS로 실행: + + ```bash + $ yarn install + $ yarn dev // => next dev --experimental-https + ``` + +2. 브라우저에서 접속: https://local.sjcpop.com:3000 + +위 설정을 통해 로컬 환경에서도 실제 배포 환경처럼 쿠키 기반 인증과 API 요청을 테스트할 수 있습니다. + +### 1-2. 환경변수 설정 + +`.env.local` 파일 생성 후 아래와 같이 추가합니다. + +```jsx +NEXT_PUBLIC_API_BASE_URL=https://my-api.sjcpop.com/api +ACCESS_TOKEN=accessToken +REFRESH_TOKEN=refreshToken ``` -─ components/ - ├── ui/ -> shadcn/ui - ├── atoms/ -> 더 이상 분리될 수 없는 component - ├── molecules/ -> atoms가 조합된 UI, 단일 기능을 수행하는 컴포넌트 - ├── organisms/ -> molecules & atoms가 조합된 UI 영역, 페이지 내에서 독립적인 구조를 가짐 - └── templates/ +### 1-1. 사용 ID, PW + +- ID +- Password + +## **사용 기술** + + + + +
+ +## 📐 아키텍처 + +### 1. 폴더 구조 + +```jsx +📦src + ┣ 📂__mocks__ + ┣ 📂actions + ┣ 📂api + ┣ 📂app + ┃ ┣ 📂bookmark + ┣ 📂components + ┃ ┣ 📂atoms + ┃ ┣ 📂error-boundary + ┃ ┣ 📂error-fallback + ┃ ┣ 📂molecules + ┃ ┣ 📂organisms + ┃ ┗ 📂ui + ┣ 📂features + ┣ 📂hooks + ┣ 📂lib + ┣ 📂mocks + ┃ ┗ 📂handler + ┣ 📂providers + ┣ 📂stores + ┣ 📂types + ┗ 📂utils ``` +### 2. 컴포넌트 설계 + +`components/` 디렉토리는 **Atomic Design** 패턴에 따라 다음과 같이 구성됩니다: + +- `ui/` : Shadcn UI 컴포넌트가 설치되는 디렉토리 +- `atoms/` : 더 이상 분해할 수 없는 최소 단위 컴포넌트 +- `molecules/` : atoms를 조합하여 단일 기능을 수행하는 컴포넌트 +- `organisms/` : atoms + molecules 조합, 독립적인 UI 영역 구성 + +`features/` 디렉토리는 기능 단위의 코드를 분리하려 관련 로직을 관리합니다. + +`mocks/` 디렉토리는 API 서버 없이도 프론트엔드 개발 및 테스트가 가능하도록 MSW를 활용해 가짜 API를 구성할 수 있습니다 + +### 3. 상태 관리 + +- **Zustand**를 사용하여 전역 상태를 관리하고 있습니다. +- 서버 상태 관리 및 데이터 패칭은 **Tanstack Query**를 활용하여 캐싱 및 비동기 상태를 효율적으로 처리합니다. + +### 4. API 통신 구조 + +- `fetch`를 기반으로 데이터를 요청하며, 공통 요청 로직은 `request.ts`에 정의되어 있습니다. + +### 5. UI 디자인 시스템 + +- **Shadcn UI**와 **Tailwind CSS**를 사용하여 일관된 UI 컴포넌트를 구성하고 있습니다. +- Shadcn 컴포넌트는 `components/ui/` 폴더에 설치되며, Tailwind 유틸리티 클래스를 기반으로 커스터마이징합니다. + +### 6. 테스트 구조 + +- API 서버가 준비되기 전까지는 **MSW(Mock Service Worker)**를 사용하여 목 데이터를 기반으로 개발 및 테스트를 진행했습니다. +- 각 페이지 라우트 하위에 `__test__/` 폴더를 두고 테스트 코드를 작성하고 있습니다. + + 예: `app/group/[id]/__test__/` + + ```bash + $ yarn test + ``` + +- E2E 테스트는 `cypress` 를 통해 진행했습니다. + + ```bash + $ yarn cypress:open + ``` + + +### 7. CI/CD + +- **GitHub Actions**를 이용하여 CI(테스트/빌드) 및 배포를 자동화하고 있습니다. +- `dev` 브랜치에 푸시되면 자동으로 배포가 진행됩니다. + + +### 7. CI/CD + +- **GitHub Actions**를 이용하여 CI(테스트/빌드) 및 배포를 자동화하고 있습니다. +- `dev` 브랜치에 푸시되면 자동으로 배포가 진행됩니다. + +
+ ## 주요 기능 +### 홈 +- 추천 모임을 보여줍니다. +- 스터디, 프로젝트 목록을 조회합니다. +- 로그인한 유저는 모임을 만들거나 참여할 수 있습니다. -- **프로젝트 주요 기능** -- 프론트의 경우 이미지를 함께 첨부해도 좋습니다. +### 회원가입 +- 이메일과 비밀번호로 계정을 생성합니다. -### 그룹 만들기 +### 로그인 +- 가입한 이메일과 비밀번호로 로그인할 수 있습니다. -로그인 한 유저가 정보를 입력하여 그룹을 생성할 수 있습니다. +### 이메일/비밀번호 찾기 +- 해당 이메일로 가입했는지 여부를 확인할 수 있습니다. +- 이메일로 임시 비밀번호를 발송해줍니다. 받은 임시 비밀번호로 로그인 할 수 있습니다. -원하는 날짜, 그룹 타입, 기술 스택, 자동 참가 여부를 선택할 수 있습니다. -``` -* 제목 : 30자 이하 -* 모집 마감일 : 오늘+7일부터 선택 가능합니다. -* 모임 시작일 : 모집 마감일+1일부터 선택 가능합니다. -* 모임 종료일 : 모임 시작일+7일부터 선택 가능합니다. -* 정원 : 2명 ~ 30명 -* 그룹 타입 : 스터디, 프로젝트 중에 선택 가능합니다. -* 기술 스택 : 1개 이상 중복 선택 가능합니다. -* 상세 내용 : 10자 이상 -* 작성일자 : 오늘 -* 모임 참가 자동 수락여부 - - 자동 수락 선택 시 주최자의 수락이 없어도 신청자가 자동으로 참가할 수 있게 됩니다. - - 자동 수락 미선택 시 주최자의 수락이 있는 경우에만 신청자가 참가할 수 있게 됩니다. -``` +### 모임 만들기 +- 원하는 태그를 설정하여 모임을 만듭니다. +### 모임 상세 페이지 +- 모임 상세 정보를 확인하고 참여 신청을 할 수 있습니다. +- 주최자는 모임 취소/공유를 할 수 있습니다. +- 모임 관련 댓글을 달 수 있습니다. -## 트러블 슈팅 +### 찜한 모임 +- 관심있는 모임을 찜하기 할 수 있습니다. +- 찜한 모임들만 보여집니다. -- 트러블 슈팅 경험에 대해 기술해 주세요. +### 유저 페이지 +- 유저의 상세 정보를 보여줍니다. +[ 마이 페이지 ] +- 프로필 수정을 할 수 있습니다. +- 내가 개설한 모임을 보여줍니다. +- 팔로잉, 팔로워 목록을 보여줍니다. +- 비밀번호 수정을 할 수 있습니다. +- 회원 탈퇴를 할 수 있습니다. -## 사용 기술 +[ 다른 유저 페이지 ] +- 팔로우/언팔로우를 할 수 있습니다. -**기술 스택, 사용 기술** -- 사용한 기술과 라이브러리 -## 환경 변수 -.env 파일 설정해두셔야합니다. -``` -NEXT_PUBLIC_API_BASE_URL=base api server -ACCESS_TOKEN=access token name -REFRESH_TOKEN=refresh token name -``` \ No newline at end of file +## ✨ 기능 상세 설명 +[🔗 Link](https://thrilling-cough-c32.notion.site/21b091373e7180ada9cae55ccb740bbb?source=copy_link) + + +## 🐞 트러블 슈팅 +[🔗 Link](https://thrilling-cough-c32.notion.site/218091373e7180388816effc11ca98c6?source=copy_link) +