서비스 소개

🔬 연구자

연구 참여자 모집이 어렵다면?
그라밋에 공고를 등록하면 모집 대상에게 자동으로 메일이 발송돼요.

💰 참여자

가까운 실험에 참여해 용돈을 벌고 싶다면?
내 조건에 맞는 실험만 모아보고 메일로 추천받으세요.

연구자	참여자

디렉토리 구조

• 페이지 단위로 파일 분리
• 페이지 내에서만 사용되는 경우, 페이지 하위에 /utils, /types, /constants 디렉토리 분리
• 페이지 하위에 components, hooks 디렉토리 생성 후 하위에서 공용으로 관리

📦 src
 ┣ 📂 apis                     # API 호출 및 관련 설정 관리
 ┃ ┣ 📜 config.ts              # API 기본 설정 (ex: baseURL, Axios instance)
 ┃ ┗ 📜 exampleapi.ts          # 예시 API 정의 (ex: 로그인, 데이터 조회)
 ┣ 📂 app
 ┃ ┣ 📂 example                # 페이지를 정의한 폴더 (폴더 이름이 각 라우트와 대응)
 ┃ ┃ ┣ 📂 components           # 해당 페이지에서만 사용하는 컴포넌트
 ┃ ┃ ┃ ┣ 📂 ExampleComponent
 ┃ ┃ ┃ ┃ ┣ 📜 index.tsx                 # 엔트리 (import 시 폴더명만 사용)
 ┃ ┃ ┃ ┃ ┗ 📜 ExampleComponent.css.ts   # Vanilla Extract 스타일
 ┃ ┃ ┣ 📂 hooks                # 해당 페이지 전용 커스텀 훅
 ┃ ┃ ┣ 📂 utils                # 해당 페이지 전용 유틸 (파일 단위 분리)
 ┃ ┃ ┣ 📂 types                # 해당 페이지 전용 타입
 ┃ ┃ ┣ 📂 constants            # 해당 페이지 전용 상수
 ┃ ┃ ┣ 📜 layout.tsx           # 페이지 공통 레이아웃
 ┃ ┃ ┗ 📜 page.tsx             # 해당 페이지 엔트리 파일
 ┣ 📂 assets                   # 정적 자산 (이미지 등) 관리
 ┣ 📂 components               # 공통 UI 컴포넌트 관리
 ┣ 📂 constants                # 프로젝트 전역에서 사용하는 상수
 ┣ 📂 styles                   # 스타일 관련 설정 및 글로벌 테마
 ┗ 📂 types                    # 전역 타입 정의

기술 스택

• Typescript
• Next.js (14.2.25)
• Tanstack Query
• React Hook Form
• Zod
• Radix UI