wise sayings (위대한 말)
※ 명언은 계속 추가 됩니다.
- 약 800개가 넘는 명언 목록을 조회하고, 자신만의 명언 카드를 커스텀하여 공유할 수 있는 차분한 앱 디자인 느낌의 웹 사이트
- [목적] 국내, 국외에도 많은 명언 웹이나 앱이 존재 합니다. 하지만, 너무 번잡하고 광범위한 정보를 다루려다 보니 마음에 드는 명언을 곱심으며 감상하기에는 사용자의 시선을 많이 분산시킵니다. 따라서 저는 마음에 드는 명언을 선택하여 차분한 마음으로 집중할 수 있는 환경을 만들고자 했습니다.
- (개발기간) 2023년 12월 15일 ~ 2024년 4월 21일
- (유지보수) 2024년 4월 15일 ~
- 배포 과정 : https://duklook.tistory.com/563
- 배포: https://wise-sayings.com
- 배포 아키텍처
sequenceDiagram
participant Dev as Developer
participant GH as GitHub
participant GHA as GitHub Actions
participant S3
participant CP as CodePipeline
participant CD as CodeDeploy
participant EC2
Dev->>GH: Push code
GH->>GHA: Trigger workflow
GHA->>GHA: Build Next.js app
GHA->>S3: Upload build artifacts
S3->>CP: Trigger pipeline
CP->>S3: Fetch artifacts
CP->>CD: Start deployment
CD->>EC2: Deploy application
EC2->>EC2: Start Next.js server
Dev->>EC2: Access application
-
- 일반적인 공지사항 게시판 입니다. Editor.js 를 이용해 편집기를 구현하였습니다.
-
- SWR 의 useInfiniteQuery 를 사용하여 구현되었습니다.
- 조회된 명언의 끝 지점에 도달하면, 더보기 버튼을 클릭하여 추가 목록을 불러오도록 구현되어 있습니다. 해당 기능은 목록을 조회하는 모든 페이지에 공통되게 적용됩니다.
-
- HTML5 스피치 API 를 사용하여 구현되었습니다.
- 각 명언을 음성으로 들을 수 있고, 현재 음성의 진행도를 시각적으로 확인할 수도록 하여 사용성을 높였습니다.
-
- 마음에 드는 명언을 선택하여 꾸밀 수 있습니다. HTML5 의 Canvas API 를 사용하여 구현되었으며, 각 편집 도구의 상태를 전역 관리하기 위해 Zustand 를 사용하였습니다.
- 24개의 기본 이미지를 통해 카드의 배경을 만들 수 있으며, 사용자가 원한다면 추가적인 이미지를 업로드하여 사용할 수 있습니다.
- 완성된 명언은 .png 형식으로 다운로드할 수 있습니다.
- 현재 기능은 마우스를 통해서 편집해야 하는 사용성이 제한 되는 문제가 있어서, 기능 개선을 고려중입니다.
-
- 보다 분위기 있는 상태에서 명언을 감상하기 위해 별도의 확대 기능을 제공합니다.
- 확대 시 리스트에 있는 명언 카드가 사라지고, 어두워진 화면에 카드가 나타나며 분절된 텍스트가 순차적으로 렌더링 되며 밑줄이 끄어지는 애니메이션이 보여집니다.
-
- 사용자는 자신이 원하는 명언을 발견하면, 좋아요 기능을 통해 평가할 수 있습니다.
-
- 명언 세부 페이지에 접속하면, 해당 명언에 대한 감상을 댓글로 남길 수 있고, 다른 유저가 해당 댓글에 대댓글을 남길 수 있습니다.
-
- 사용자는 자신이 원하는 명언을 선택하여 북마크에 저장할 수 있습니다. 저장된 명언을 클릭하면, 해당 명언의 세부 페이지로 이동합니다.
-
- AI 명언 해석 기능: GPT 4o mini 를 연동하여, 현재 사용자가 감상하고 있는 명언이 어떤 의미인지 궁금하다면 해석된 데이터를 받아볼 수 있습니다.
- 욕설 필터링 기능: GPT 4o mini 를 연동하여, 사용자가 부정적 용어를 입력하면 사전에 차단하여 등록, 수정, 추가하지 못하도록 막습니다.
- 명언 챗봇 기능: GPT 4o mini 를 연동하여, 사용자가 원하는 주제의 명언을 생성하여 받아볼 수 있습니다.
-
-
- 회원가입 시 본인인증을 위해 이메일 인증을 거쳐야 합니다. 이메일의 도메인의 유효성 및 DNS 조회를 통해 유효한 경우에만 4자리 번호를 사용자의 이메일로 전송합니다.
- 시간 제한이 있고, 해당 시간 내에 인증을 완료하지 못하면, 인증번호가 메모리 상(Redis 메모리)에서 제거되므로 재인증 요청을 해야 합니다.
-
- 비밀번호 찾기 기능 시 DB에 저장이 되어 있고, 유효한 이메일 도메인인 경우에 해당 이메일로 비밀번호를 재설정할 수 있는 주소를 전달합니다.
- 임시 토큰 형태(accessToklen 을 재사용한 형태)로 7분 이내 만료하지 못하면, 토큰이 만료되어 인증 절차를 재시도해야 합니다.
-
-
- 프로필: 사용자는 자신의 프로필 이미지와 닉네임을 확인하고, 필요하다면 변경할 수 있습니다. 이미지 파일은 firebase store 에 보관됩니다(향후 AWS S3 로 이전할 생각입니다.).
- 나의 명언: 사용자가 북마크에 추가한 명언을 확인할 수 있습니다. 필요하다면 그 자리에서 수정 및 삭제가 가능합니다.
- 비밀번호 수정/탈퇴: 사용자는 비밀번호 수정과 탈퇴가 가능합니다. 탈퇴 시 본인이 작성한 모든 명언 목록도 같이 삭제 됩니다.
-
- 사용자가 로그인하게 되면 액세스 토큰과 리프레쉬 토큰을 발급받아 리프레쉬 토큰은 쿠키에 저장되고, 액세스 토큰은 클라이언트의 sessionStorage 에 저장됩니다.
- 액세스 토큰은 최소 7분 이상 유효하게 설정해두며, 만료 1분 전에 재발급 됩니다.
- 권한이 필요한 모든 요청에는 액세스 토큰에 대한 검증을 실시하고, 통과하지 못한 경우에는 클라이언트의 요청을 처리하지 않습니다.
| 사용 스텍 | 비고 |
|---|---|
| Typeccript(^5.4.2) | (언어) 타입 안정성을 높이고, 코드 가독성 향상 이점 및 Next 팀에서 적용할 것을 권장하는 점을 참고 후 적용 |
| ReactJS(^18) | (SPA) SPA를 통해 빠른 페이지 전환으로 사용자 경험을 향상시키기 위해 적용 |
| NextJS(^14.1.4) | (리액트 프레임워크) SSR 기반의 RSC의 이점으로 빌드 시 SSG 를 통한 사전 로드를 통한 초기 렌더링 및 번들 사이즈 최적화를 위해 적용 |
| Tailwindcss(^3.4.1) | (CSS 프레임워크) 미리 스타일이 정의된 클래스를 기반으로 빠르게 CSS를 프로젝트에 적용하기 위해 적용 |
| Zustand(^4.5.2) | (전역 상태관리) 단순한 상태의 전역 관리를 컴포넌트 단위로 쉽고, 빠르게 적용할 수 있는 이점이 있어서 활용 |
| Swr(^2.2.5) | (서버 상태관리) Tanstack Query/react에 비해 가볍고, NextJS 팀에서 개발하여 기존 프로젝트와의 호환성이나 유지보수 측면에서도 유리할 것으로 판단하였고, 실시간 데이터 처리 및 캐싱처리가 필요한 기능처리를 위해 활용 |
| React icons(^5.0.1) | 다양한 아이콘을 하나의 패키지에서 고 |
| :------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------- |
| Github Actions | 레포지토리에 저장된 프로젝트 파일을 빌드하고, .zip 으로 압축 후 AWS S3에 배포하는 전 과정을 자동화하기 위해 사용 |
- ※ 현재 리팩터링과 추가적인 기능 개선에 따라서 달라질 수 있습니다.
📦src
┣ 📂app
┃ ┣ 📂 (ai) -----------→ AI 명언 생성 챗봇(완료) 및 명언이미지 생성(계획중)
┃ ┃ ┗ 📂ai-quote
┃ ┣ 📂(gallery) -----------→ 커스텀 명언 카드 갤러리(계획중)
┃ ┃ ┗ 📂gallery
┃ ┣ 📂(post) --------------→ 포스트 수정 및 업데이트 페이지 그룹
┃ ┃ ┣ 📂add-wisesaying
┃ ┃ ┗ 📂update-wisesaying
┃ ┣ 📂(quotes) ------------→ 명언 관련 페이지 그룹
┃ ┃ ┃ 📂search
┃ ┃ ┣ 📂quotes
┃ ┃ ┃ ┗ 📂populars
┃ ┃ ┃ ┗ 📂[category]
┃ ┃ ┃ ┗ 📂[name]
┃ ┃ ┃ ┣ 📂[id]
┃ ┃ ┗ 📂user-quotes
┃ ┃ ┗📂[category]
┃ ┣ 📂(user) -------------→ 유저 관련 페이지 그룹
┃ ┃ ┣ 📂forgot
┃ ┃ ┣ 📂login
┃ ┃ ┣ 📂logout
┃ ┃ ┣ 📂mypage
┃ ┃ ┗ 📂signin
┃ ┣ 📂api ----------------→ API Routes
┃ ┃ ┣ 📂auth -- 인증
┃ ┃ ┃ ┣ 📂access
┃ ┃ ┃ ┣ 📂refresh
┃ ┃ ┃ ┣ 📂clear-token
┃ ┃ ┃ ┣ 📂forgot
┃ ┃ ┃ ┣ 📂login
┃ ┃ ┃ ┗ 📂signin
┃ ┃ ┣ 📂bookmark -- 북마크
┃ ┃ ┃ ┗ 📂[id]
┃ ┃ ┣ 📂quotes -- 명언
┃ ┃ ┃ ┣ 📂authors
┃ ┃ ┃ ┃ ┗ 📂[category]
┃ ┃ ┃ ┣ 📂random
┃ ┃ ┃ ┣ 📂search
┃ ┃ ┃ ┣ 📂topics
┃ ┃ ┃ ┃ ┗ 📂[category]
┃ ┃ ┃ ┣ 📂users
┃ ┃ ┃ ┃ ┗ 📂post
┃ ┃ ┃ ┃ ┣ 📂categories
┃ ┃ ┃ ┃ ┃ ┣ 📂[category]
┃ ┃ ┃ ┃ ┣ 📂[id]
┃ ┃ ┃ ┗ 📂[id]
┃ ┃ ┃ ┗ 📂comments
┃ ┃ ┃ ┃ ┗ 📂reply
┃ ┃ ┃ ┗ 📂likes
┃ ┃ ┣ 📂sitemap
┃ ┃ ┗ 📂users
┃ ┃ ┗ 📂mypage
┃ ┃ ┣ 📂posts
┃ ┃ ┗ 📂upload
┃ ┗ 📂quotes-styler
┃ ┗ 📂[name]
┃ ┗ 📂[id]
┣ 📂components -------------→ 컴포넌트들
┃ ┣ 📂layout
┃ ┗ 📂UI
┃ ┣ 📂auth
┃ ┣ 📂bookmark
┃ ┣ 📂comment
┃ ┣ 📂common
┃ ┣ 📂detail-quote
┃ ┣ 📂header
┃ ┣ 📂mypage
┃ ┣ 📂quote
┃ ┣ 📂quote-editor
┃ ┣ 📂reply
┃ ┣ 📂search
┃ ┗ 📂styler
┣ 📂configs ----------------→ 프로젝트 환경 설정 관련 처리
┣ 📂custom -----------------→ 커스텀 훅
┣ 📂services ---------------→ 클라이언트 측 서비스 로직 처리
┃ ┣ 📂data
┃ ┗ 📂user
┣ 📂store ------------------→ Zustand 상태관리
┣ 📂types ------------------→ 타입 관리
┣ 📂utils ------------------→ 공통 함수 관리
┗ 📂validation -------------→ joi 유효성 검사