depromeet/antoon-web

📈 개미는툰툰 :: 웹툰 독자를 위한 커뮤니티 플랫폼

antoon

웹툰의 새로운 덕질 문화

Behance · Final Presentation

개미는 툰툰

💡 서비스 개요

웹툰 플랫폼 댓글, 커뮤니티에서 독자들이 스토리 전개와 등장인물, 이들 간의 관계를 주식 용어로 표현하며 소통하는 걸 볼 수 있습니다. 주식 용어로 웹툰을 소비하는 형태에서 아이디어를 얻어 서비스 기능을 주식 컨셉으로 표현한 색다른 웹툰 커뮤니티 서비스를 만들고자 했습니다.

개미는 툰툰은 주식 컨셉을 바탕으로 웹툰의 새로운 덕질 문화를 만들고자 하는 웹툰 커뮤니티 서비스입니다.

🎯 프로젝트 목표

🌳 IA

💯 서비스 핵심 포인트

다양한 주제로 소통할 수 있는 투표에 댓글과 좋아요 반응을 남길 수 있습니다. 실제 주식처럼 웹툰, 최애 인물/커플에 탑승해 순위를 올리고 투표/탑승을 통해 안트코인을 모을 수 있습니다. 주식 컨셉을 더한 기능이 생소할 수 있는 사용자들에게 서비스의 개념과 기능을 친절하게 알려주는 온보딩도 제공합니다.

메인 기능

📊 웹툰 탑승/하차 그래프 💬 댓글

재미있는 웹툰에는 탑승, 아쉬웠던 웹툰에 하차로 웹툰 차트를 움직일 수 있습니다. 웹툰 점수는 웹툰 플랫폼 별점, 탑승/하차 수와 댓글 수를 합산한 점수입니다. 최근 1시간 집계로 차트에 반영되고, 1일/1주/1달/3달 주기로 상승/하락 그래프를 볼 수 있습니다. 댓글 기능을 '개미들의 행진'으로 표현했습니다. 웹툰을 보는 다른 개미들과 소통하며 웹툰 감상평, 스토리 전개, 궁금한 떡밥 등 다양한 정보를 공유할 수 있습니다.

🗣️ 커뮤니티

웹툰뿐만 아니라 내 최애 웹툰의 인물과 커플에 탑승할 수 있습니다. 다양한 주제의 투표도 참여할 수 있습니다.

🚗 등장인물/커플 탑승 📬 투표

최애 인물/커플에 하루 한 번 안트코인을 투자해서 탑승하면 내 최애의 순위를 직접 올릴 수 있습니다. 다양한 웹툰 캐릭터의 재밌는 주제들을 확인하고 안트코인을 사용해서 투표할 수 있습니다. 본인이 투표한 결과가 이기면 30 안트코인을 보상으로 지급합니다.

🪙 안트코인 🙍 마이페이지

안트코인은 개미는 툰툰에서 사용하는 화폐 단위입니다. 안트코인을 모아 거지개미에서 일개미를 거쳐 여왕개미까지 도달할 수 있습니다. 보유한 안트코인을 이용해 더 많은 투표에 참여할 수 있습니다. 안트코인 지갑에서 사용 내역을 확인해볼 수 있습니다.

프론트엔드

🛠 개발 스택

TypeScript와 Next.js, React Query, Recoil 등을 사용하였고, Lint와 Husky를 통해 팀의 코드 컨벤션을 유지하고 있습니다. UI 컴포넌트 테스트와 디자이너 파트의 QA 작업을 원활하게 진행하기 위해 Storybook을 사용하였습니다.

⚙️ 인프라

AWS에 여러 환경으로 배포하기 위해 Serverless Framework로 IaC 하였고, GitHub Actions를 통해 3개의 환경으로 배포되고 있습니다.

🖥 모니터링

Sentry, Hotjar, Mixpanel 등을 사용하여 개발과 기획을 용이하게 하려고 했습니다. Hotjar와 Mixpanel의 데이터를 기반으로 MVP 2차 진행 방향을 결정하였습니다.

개발자

이병현	김민지	최푸름
Tolluset	mnxmnz	choipureum

antoon-web's Issues

🐛 [빌트인 컴포넌트] 헤드 컴포넌트 에러

🐛 버그 내용

https://sentry.io/organizations/antoon/issues/3390237262/?project=6406864&referrer=webhooks_plugin

헤드 컴포넌트을 잘 못된 곳에서 두어서 생긴 버그로 보여짐
vercel/next.js#8220

👊 올바른 동작

해당 에러가 발생하지 않음.

[CI/CD] CI/CD 추가

💡 개요

AWS에 배포하는 CI/CD 추가

📑 작업 사항

• nextjs-serverless-component 사용
• github actions 추가

🔎 기타

계정은 제 계정에 해둘게영

[홈 페이지] 요일별 컴포넌트 구성

💡 개요

• 요일별 컴포넌트 추가

📑 작업 사항

🔎 기타

🩹 [마이페이지] 분기 처리 기준 수정

🐛 버그 내용

• QA
• 서버가 다운됐을 때 마이페이지에 접속하면 로그인 버튼이 아닌 로그아웃 버튼이 보임

👊 올바른 동작

• 서버가 다운됐을 때 로그인 전 마이페이지가 보이도록 수정

🔎 기타

[로그인] 카카오 소셜 로그인 / 로그아웃 기능 생성

💡 개요

• 카카오 소셜 로그인 / 로그아웃 기능 생성

📑 작업 사항

• 로그인
• 로그아웃

🔎 기타

• 기능 생성 이후 스토리북 작성

[feature] 웹툰 상세 페이지 구현

💡 개요

• 웹툰 상세 페이지 구현

📑 작업 사항

• 와이어 프레임 나올시 디자인 구체화

[테마] 디자인 시스템, 폰트 설정

💡 개요

• 피그마의 디자인 시스템을 themes.colors에 설정하기
• 컬러 설정 내용을 컴포넌트에 반영하기
• Pretendard 폰트를 전역으로 설정하기

📑 작업 사항

• 디자인 시스템 설정
• 디자인 시스템 컴포넌트에 반영
• 폰트 설정

🔎 기타

[사용자 프로필 이미지] default size 에서 props 값으로 변경

💡 개요

• 피그마에서 사용자 이미지 컴포넌트 크기가 각 페이지마다 다르게 설정되는 것을 보고 default 사이즈에서 props 값으로 변경했습니다.

📑 작업 사항

• 이미지 css 수정

🔎 기타

✨ 이미지 크기 선언하실 때 단위 작성 없이 px 기준으로 작성 부탁드립니다 👀

📝 관련 링크 : [내보내번] Next.js docs - next/image

[마이 페이지] 스크린 디자인 반영

💡 개요

• 마이 페이지 스크린 디자인 반영해서 수정하기

📑 작업 사항

• 마이 페이지 배너 width 값 100% 설정
• 프로필 이미지 width 값 props 값으로 유동적으로 변경
• 헤더 access token 유무에 따른 routing 분기 처리
• 공통 컴포넌트 Hr 생성
• 사용하지 않는 패키지 제거, 쿠키 관리 패키지 설치

🔎 기타

[feature] 차트 탭 데이터 연동 및 애니메이션 설계

💡 개요

• 탭 변경시 차트 데이터 마운트 및 애니메이션 구현

📑 작업 사항

• 아자아자

[feature] 상세 페이지 - 구축

💡 개요

• 상세 페이지 - 상세페이지 구축

📑 작업 사항

• 상세 페이지 구축 및 리팩토링

[feature] 댓글 input 컴포넌트 설계 및 구현

💡 개요

• 댓글 input 컴포넌트 설계 및 구현
• 댓글 컴포넌트 상세 결합 및 css 수정

📑 작업 사항

• 댓글 상단 완료

🔎 기타

[bug] 웹툰 상세페이지 장르별 카드 양옆 padding 제거

🐛 버그 내용

• 오른쪽 패딩값 처리 => 0
  

[홈 페이지] 상승중인 툰툰 컴포넌트 구성

💡 개요

• 웹툰 이름, 상승 퍼센트 추가

📑 작업 사항

🔎 기타

[공통 컴포넌트] 레이아웃 생성

💡 개요

• 레이아웃 생성

📑 작업 사항

• 헤더
• 푸터
• 라우팅

🔎 기타

[사용자 프로필 이미지] 크기 변동 문제 해결

💡 개요

• 사용자 댓글이 한 줄 이상 넘어갈 때 이미지 크기가 무너지는 현상을 해결했습니다.

📑 작업 사항

• 이미지 css 수정

🔎 기타

[Bug] `_app.tsx` 빌드 실패

🐛 버그 내용

👊 올바른 동작

빌드에 성공한다

🔎 기타

이전에는 저 부분 문제없었던 것 같은데... 🤔

🍱 [README] README에서 사용하는 이미지 저장

README에서 사용하는 이미지 저장

로고

개미는 툰툰

다운로드

서비스 개요

프로젝트 목표

IA

서비스 핵심 포인트

메인 기능

웹툰 탑승/하차 그래프 & 댓글

커뮤니티

등장인물/커플 탑승 & 투표

안트코인 & 마이페이지

프론트엔드

개발 스택

인프라

모니터링

[버튼] 메일 플로팅 버튼 생성

💡 개요

• 메인 페이지의 메일 플로팅 버튼 생성하기

📑 작업 사항

• 플로팅 버튼 생성
• 클릭하면 구글폼 링크로 이동

🔎 기타

[프로젝트 세팅] 허스키 추가

💡 개요

프리티어가 자동 적용이 필요해보임

📑 작업 사항

• 허스키 추가

🔎 기타

지금 파일들이 다 깨져있는 것 같음...

[마이페이지] 레이아웃 마크업

💡 개요

• 마이페이지 레이아웃 생성하기

📑 작업 사항

• 레이아웃 생성
• 임시 링크 연결

🔎 기타

• 사진 수정이나 닉네임 수정 기능은 생성하지 않고 레이아웃 마크업만 작업했습니다 👀

• 임시 정책 링크는 일단 저희 깃허브 레포로 설정했습니다 ,, ㅎㅎ 🙄

[로그인] 로그인 페이지 레이아웃 생성

💡 개요

• 로그인 페이지 레이아웃 생성하기

📑 작업 사항

• 레이아웃 생성
• 로그인 버튼, 메인으로 돌아가기 버튼 생성

🔎 기타

추후 API 나오면 로그인 기능 연결하겠습니다 🔐

[공통 컴포넌트] 레이아웃 업데이트

💡 개요

• 모든 페이지에서 공통으로 사용하는 레이아웃 컴포넌트를 생성하기

📑 작업 사항

• 각 페이지에서 헤더 왼쪽 영역 설정 (로고 아이콘 or 뒤로가기 아이콘)
• 레이아웃 컴포넌트 생성
• 임시 파비콘 파일 변경

🔎 기타

[로그인] 소셜 로그인 구현 방식 변경

💡 개요

• 기존 NextAuth 구현 방식에서 REST API 방식으로 변경

📑 작업 사항

• 카카오 인증 코드 전달
• 토큰 관리

🔎 기타

구현 우선순위 변경

서버에게 API 받은 이후 구현

[정책 동의] 정책 동의 페이지 구성

💡 개요

• 정책 동의 체크박스 컴포넌트를 이용하여 정책 동의 페이지 구성

📑 작업 사항

• 정책 동의 체크박스를 사용
• 하단에 확인 버튼 추가

🔎 기타

• 세밀한 디자인은 차후

[QA] 댓글 부분 훌라후프 렌더스피너 이슈

🐛 버그 내용

• 댓글 로딩스피너가 훌라후프 춤

[feature] storybook 스켈레톤 작성

💡 개요

• storybook 스켈레톤 세팅

📑 작업 사항

• : storybook 세팅 및 테스팅

🔎 기타

• x

[검색] 검색 기능 구현

💡 개요

• 검색 기능 구현하기

📑 작업 사항

• 헤더 컴포넌트 검색창 구현
• 검색 페이지 기능 구현

🔎 기타

[검색 결과 페이지] 검색 결과 (웹툰 목록) 구현

💡 개요

• 검색 결과 페이지 구현하기

📑 작업 사항

• 사용자가 웹툰 제목 검색할 때 입력한 값에 대한 자동 완성 컴포넌트 생성하기
• 사용자가 서치 바에서 엔터키를 눌렀을 때, 클릭했을 때 등등 케이스 분리해서 구현하기
• 자동 완성 리스트에서 웹툰 제목 클릭하면 검색 결과 컴포넌트 보여주기
• 검색 결과에서 웹툰 제목 클릭하면 해당 상세 페이지로 이동하기

🔎 기타

✨ [헤더] URL 공유하기 버튼

💡 개요

📑 작업 사항

• 공유하기 버튼 기능 생성하기
• 참고 자료: Navigator.share

🔎 기타

✨ [장르별 웹툰] 장르별 웹툰 페이지 추가

💡 개요

장르별 웹툰 페이지를 추가합니다.

📑 작업 사항

• 장르별 웹툰 페이지 추가
• 홈 화면의 장르별 웹툰에서 장르별 웹툰 페이지로 이동

[회원가입] 스크린 디자인 반영

💡 개요

• 사용자 회원 가입 페이지의 스크린 디자인 변경 사항 반영하기

📑 작업 사항

• 회원가입 페이지의 css를 수정했습니다.

🔎 기타

[헤더] 각 페이지 별 헤더 대응

💡 개요

• 각 페이지 별 헤더 대응하기

📑 작업 사항

• 각 페이지마다 props 값으로 헤더 대응할 수 있도록 설정
• 페이지 라우팅

🔎 기타

🩹 [마이페이지] 사용자 이름 수정하기 버그 픽스

🐛 버그 내용

• QA
• 마이페이지 이름 오른쪽 아이콘을 클릭했을 때만 수정하기 페이지로 이동하는데, 이름을 클릭해도 수정하기 페이지로 이동할 수 있도록 변경이 필요함

👊 올바른 동작

• 사용자 이름을 클릭해도 수정하기 페이지로 이동하도록 변경

🔎 기타

[정책 동의] 체크박스 컴포넌트

💡 개요

• 정책 동의 화면에서 재사용 가능한 체크박스 컴포넌트

📑 작업 사항

• 체크박스와 라벨을 클릭하여 체크할 수 있다
• 오른쪽 끝에 존재하는 보기 버튼을 클릭하여 해당 동의서의 원문 노션링크로 이동한다

🔎 기타

정책 동의 페이지는 임시로 구현

[프로젝트 세팅] 세팅 오류 해결

💡 개요

[bug] 세팅 오류 해결

📑 작업 사항

• duplicate page detected (signin 파일 중복)
• 각 파일에서 상대 경로 import 절대 경로로 변경
• package.json 중복 제거

🔎 기타

• 이외에도 세부 오류 해결

[프로젝트 세팅] 초기 세팅 추가 설정

💡 개요

• Emotion GlobalStyle, theme 생성
• Stylelint 설정
• README 작성
• CODEOWNERS 설정
• vscode settings.json 설정

📑 작업 사항

• Emotion Reset CSS 포함해서 GlobalStyle 생성
• Storybook 에서 GlobalStyle 포함해서 기본 설정
• Stylelint 설정
• README 작성
• CODEOWNERS 설정
• vscode settings.json 설정

{
  "extends": ["stylelint-config-concentric-order"]
}

🔎 기타

• 퍼블리싱 단위 px or rem or em 결정 필요

[로그인] 로그인 임시 설정

💡 개요

• 서버 클라 연결 확인 용도로 임시 로그인 설정했습니다.

📑 작업 사항

• 임시 로그인 설정

🔎 기타

[bug] 페이지 렌더 시 에러메세지 노출 제거 및 스피너 영역 추가

🐛 버그 내용

• 렌더 이전 에러 메세지 출력 (상세, 댓글) 표시 영역 처리

💄 [메인페이지] 피드백 버튼

💡 개요

• QA
• 피드백 버튼 그림자 값 수정

📑 작업 사항

• 피드백 버튼 그림자 값 수정하기

🔎 기타

[상세 페이지] 댓글 컴포넌트 (좋아요 버튼, 사용자 프로필 사진) 생성

💡 개요

• 웹툰 상세 페이지의 댓글 컴포넌트를 구현했습니다.

📑 작업 사항

• Global Style margin 속성 변경
• 댓글 컴포넌트 생성
• 사용자 프로필 사진 컴포넌트 생성
• 좋아요 버튼 컴포넌트 생성
• 좋아요 버튼 스토리북 작성
• 스토리북 context 설정 변경
• next config 파일 img domain 추가

🔎 기타

✨ [마이페이지] 안트코인 내역

💡 개요

📑 작업 사항

• 마이페이지 코인 히스토리 작업하기

🔎 기타

[feature] Chart 컴포넌트 추가

💡 개요

• 웹툰 상세 페이지 : 차트 컴포넌트 도입

📑 작업 사항

• : Echarts 세팅 및 차트 컴포넌트 스켈레톤 작성
• : 차트 컴포넌트 구체화

🔎 기타

• 1차 스켈레톤 작성 및 데이터 프로퍼티 확정 이후 컴포넌트 구체화 예정

[feature] Lint, Prettier 환경세팅

💡 개요

• Lint, Prettier 환경세팅

📑 작업 사항

{
 "printWidth": 80,
 "tabWidth": 2,
 "singleQuote": true,
 "trailingComma": "all",
 "bracketSpacing": true, 
 "semi": true,
 "useTabs": true,
 "arrowParens": "avoid", 
 "endOfLine": "lf"
}

[네이밍] 장르 카테고리 타입 네이밍 통일

여러 곳에서 사용하는 장르 타입을 통일시키기

Originally posted by @choipureum in #97 (comment)

[메인 페이지] 레이아웃 구성

💡 개요

간단한 레이아웃을 구성한다

📑 작업 사항

• 왓챠피디아, 키노라이츠 등을 참고할 예정
• 카드 리스트 정도 사용할 예정

🔎 기타

• 캐러셀이 아마 필요할 것 같음

[CI/CD] Chromatic 추가

💡 개요

스토리북 공유를 위한 크로마틱 추가

📑 작업 사항

• 빌드 성공 시 크로마틱에 배포
• 환경 변수 파일 사용

🔎 기타

추가 후 팀원들 초대하기

[feature] 댓글 무한스크롤 구현

💡 개요

• 댓글 페이지네이션 무한스크롤 구현