HanCook은 전 세계 외국인들을 대상으로 한 한국 요리 커뮤니티 플랫폼입니다.
- 사용자는 한식과 관련된 다양한 챌린지를 만들기도 하고, 참여할 수 있습니다.
- 요리 경험을 공유하고 서로 피드백을 주고받는 공간입니다.
- 정기적으로 업로드되는 한식 레시피를 통해 한국 음식 문화를 쉽게 접할 수 있습니다.
HanCook은 한국 요리를 배우고 싶은 사람들과 한식을 널리 알리고자 하는 이들을 연결하는 가교 역할을 합니다.
한식은 독특한 풍미와 건강한 재료로 전 세계적으로 큰 관심을 받고 있습니다.
하지만 외국인들이 한식을 직접 요리하거나 새로운 요리 도전에 나설 때 정보나 커뮤니티가 부족한 경우가 많습니다.
HanCook은 이러한 문제를 해결하기 위해 탄생했습니다.
- 외국인 사용자들이 한식을 배우고 즐길 수 있도록 돕는 플랫폼입니다.
- 한식에 대한 접근성을 높이고, 보다 많은 사람들이 한국 음식을 이해하고 즐기게 하는 것을 목표로 합니다.
- 한식의 글로벌 확산
- 한식 레시피와 요리 챌린지를 통해 한국 음식을 세계적으로 알립니다.
- 참여형 커뮤니티 형성
- 사용자가 요리 경험을 공유하고 피드백을 통해 함께 성장할 수 있는 참여형 플랫폼을 제공합니다.
- 사용자 친화적 플랫폼 제공
- 한식을 처음 접하는 외국인들도 쉽게 요리하고 학습할 수 있도록 직관적이고 접근성 높은 웹사이트를 만듭니다.
- 정기적인 콘텐츠 업로드
- 한식 요리의 다양성과 매력을 보여줄 수 있도록, 새로운 레시피와 챌린지를 정기적으로 업데이트합니다.
HanCook 사이트 바로가기
백엔드 배포 사이트
HanCook Figma 바로가기
HanCook API 명세서
HanCook 팀 협업 문서 Notion
FrontEnd
Infrastructure
Tools
Etc
김재원
- 발표자료 제작
- 프론트엔드 깃허브 README.md
- 프론트엔드 진행 상황 리마인더
이도엽
- 노션 프론트엔드 페이지 정리
- 프론트엔드 일정 관리
박효빈
- 노션 정리
- 발표
- 프론트엔드 aws 배포
- S3 버킷 작업
- Light House 성능 개선 작업
- 백엔드 깃허브 액션 사용해서 리뷰어 랜덤 뽑기
- 피그마 제작
- Zustand 초기 세팅
챌린지 리스트 페이지
- 이달의 챌린지 카드 컴포넌트
- 일반 챌린지 카드 컴포넌트
- 이달의 랭커 카드 컴포넌트
- 칩 카테고리 컴포넌트
- Cancel/Abort 토글
- Abort 모달 컴포넌트
- 필터바(sort/keyword) 및 드롭다운
챌린지 신청 페이지
- datepicker 사용한 달력 컴포넌트
- EC2 이미지 PUT 메소드 추상화
권한에 따른 페이지 설정
- 어드민/유저 권한에 따른 챌린지 리스트 페이지
- NAV UI (페이지, 프로필, 알림)
App router layout 페이지
- ClientSync Hook 적용
- 전체 기본 배경색 설정
로그인 페이지
- 로그인/회원가입 인풋 컴포넌트
로그인/로그아웃/유저 상태 관리
- Zustand + 로컬스토리지 관리
accessToken&refreshToken 관련 처리
- AccessToken 및 RefreshToken 관리
실시간 Socket 알림
- 알림 컴포넌트
- 클라이언트 코드 작성
- Server HTTPS SSL 문제 발견 → HTTP로 수정
- CORS 문제 발견 및 해결
- Nginx Socket 권한 설정
기타
- CSS 디테일 관리
- 이달의 랭커 SSR Next.js 캐싱 문제 해결
- 제작한 컴포넌트 스토리북 테스트
- 반응형 디자인 구현 (랜딩, 로그인, 챌린지 리스트, 챌린지 신청 페이지)
- iframe 임베드 유튜브 영상 페이지 구현
작업물 페이지
- 작업물 페이지 컴포넌트 및 반응형 구현
- 댓글 무한스크롤 기능 구현
- 작업물 좋아요 기능
- 공통 취소 확인 및 이미지 확대 모달 컴포넌트 제작
- 작업물 수정 & 삭제 기능
- 댓글 수정 & 삭제 기능
- 공통 수정 & 삭제 드롭다운 제작
- 이미지 전환 기능
로그인 및 회원가입
- Validation 처리 및 에러 구현
- API 요청에 따른 에러 메세지 alert로 표시
- 회원가입 페이지 반응형 구현
어드민 작업물 페이지
- 검색, 정렬, 비동기 페이지네이션 기능 구현
- data list 불러올 때 tanstack query의 prefetching 이용하여 SSR 구현
작업물 수정 페이지
- 유저 권한이 admin일 때 작업물 및 댓글 수정 & 삭제 기능 구현
레시피 리스트 페이지
- 검색, 정렬, 비동기 페이지네이션 기능 구현
- data list 불러올 때 tanstack query의 prefetching 이용하여 SSR 구현
챌린지 리스트 페이지
- 비동기 페이지네이션 기능 구현
권한 기반 라우터 설정
- 페이지 권한에 따른 라우터 설정
반응형 디자인 구현
- 레시피 리스트 및 상세, 챌린지 도전하기 페이지
기타
- React Quill 텍스트 편집기로 생성한 HTML DOM에 직접 삽입
- Axios Interceptor를 활용한 AccessToken 및 RefreshToken 처리
- Tanstack Query layout 페이지에 초기 설정
- TanStack Query hook & formatter hook 제작
- Lighthouse 성능 개선
공통 컴포넌트 제작
- Nav바
- 언어 모달 컴포넌트
- 프로필 모달 컴포넌트
- 거절 모달 컴포넌트
- 필터바 컴포넌트
- Dropdown 컴포넌트
- 페이지네이션 컴포넌트
- 반응형 제작
레시피 리스트 페이지
- 레시피 카드 컴포넌트
- 레시피 리스트 페이지 제작
레시피 상세 페이지
- 텍스트 컴포넌트
- 레시피 상세 페이지 제작
챌린지 상세 페이지
- 참여자 카드 컴포넌트
- 참여자 현황 컴포넌트
- 옵션 박스
- 챌린지 상세 페이지 제작
- 반응형 제작
나의 챌린지 페이지
- 헤더 컴포넌트
- 챌린지 카드 컴포넌트
- 신청한 목록 컴포넌트
- 상세 보기 헤더
- 상세 보기 바디
- 상세 보기 삭제 기능
- 페이지 제작
- 반응형 제작
챌린지 도전하기 페이지
- 헤더 및 바디 제작
- Ref 컴포넌트 제작
- 임시저장 토스트 제작
- 페이지 제작
- 반응형 제작
어드민 신청 관리 페이지
- 헤더 및 바디 제작
- UI 제작
- 반응형 제작
어드민 신청 관리 상세 페이지
- 헤더 및 바디 제작
- Status 변경 API 연결
- Abort Reason API 연결
- 반응형 제작