현

[ ] 최종 구현 화면 이미지(gif 포함) / 동영상으로 제공 ⇒ 영상 ⇒ 설명이 필요하면 밑에 간략,적당히 작성
- 화면을 어떤 구조로 구성했는지에 대한 설명
- 라우트나 기능별로 구분하여 제공하면 좋습니다 👍
  
  ⇒ 유저 스토리 보드 순으로 영상을 찍으면 좋을 거 같아요
  
  컨버스 사이즈를 변경 → 배경을 변경 → 텍스트를 입력/수정 → 텍스트 레이아웃을 설정 → 텍스트 강조를 선택 → 텍스트 폰트를 설정 → 폰트 색상을 선택 → 썸네일을 저장 → 작업 내용을 초기화 → 서비스 github repository를 보고 싶다

[ ] 사용한 프레임워크 및 라이브러리 설명

package.json 참조하여 선택한 이유 작성

## ⚒사용한 기술 스택
[package.json 바로가기](<https://github.com/Yangjaecheon-Otter-Guardians/simple-thumbnail/blob/main/frontend/package.json>)
### TypeScript, eslint, prettier
- 코드의 안전성과 유지보수를 위해 채택하였습니다.
### React
선언적 프로그래밍 방식이며 SPA 구축하는데 용이하여 채택하였습니다.
### Tailwind CSS
웹 페이지 로딩 속도를 향상 시키고 유지 보수가 쉬워 채택하였습니다.
### Recoil
상태 관리의 간편성을 위하여 채택 하였습니다. +구체적으로
-> preview 설정 내용을 저장하기 위해~~
### Axios
HTTP 비동기 통신을 하기 위한 라이브러리입니다.
### downloadjs, html-to-image
이미지를 다운 받기 위한 라이브러리입니다.
### react-color
컬러 픽커 라이브러리입니다.
### react-toastify
다양한 알림 메시지를 제공하는 라이브러리입니다.
### react-icons
여러 아이콘을 제공하는 라이브러리입니다.
### react-helmet-async
HTML의 head 태그를 관리하기 위한 라이브러리입니다.

[ ] 설치, 환경설정 및 실행 방법

프로젝트 실행 시 필요한 환경 세팅 확인 (script, port, env, …)

## 🏃‍♀️실행 방법
```shell
git clone '<https://github.com/Yangjaecheon-Otter-Guardians/simple-thumbnail.git>'
npm install
npm start

맥스

[ ] 폴더 구조 설명 ⇒ https://github.com/vangona/wanted-pre-onboarding-challenge-fe-1

폴더를 구분한 기준에 대하여 설명
tree 명령어를 사용하면 간편하게 디렉토리 구조를 출력할 수 있음

📦frontend
 ┣ 📂public
 ┣ 📂src
 ┃ ┣ 📂assets  # 번들링 되어야하는 자산을 모아둔 폴더입니다.
 ┃ ┣ 📂atom  # recoil의 atom을 모아둔 폴더입니다.
 ┃ ┣ 📂components  # 대표 컴포넌트를 구성하는 컴포넌트가 모여있는 폴더입니다.
 ┃ ┃ ┣ 📂common  # 공통 컴포넌트를 모아둔 폴더입니다.
 ┃ ┃ ┣ 📂text  # 텍스트 레이아웃 및 아이템을 모아둔 폴더입니다.
 ┃ ┣ 📂constants  # 전역적으로 사용될 상수를 모아둔 폴더입니다.
 ┃ ┣ 📂features
 ┃ ┃ ┗ 📜App.tsx  # App 전체를 구성하는 컴포넌트입니다.
 ┃ ┣ 📂fonts  # 폰트 파일들이 모여있는 폴더입니다.
 ┃ ┣ 📂sections  # 화면을 구성하는 대표 컴포넌트가 모여있는 폴더입니다.
 ┃ ┣ 📂styles  # module로 작성한 css파일이 모여있는 폴더입니다.
 ┃ ┣ 📂utils  # 유틸성 함수를 위한 폴더입니다.
 ┣ 📜.eslintrc.js
 ┣ 📜.gitignore
 ┣ 📜.prettierrc
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜README.md
 ┣ 📜tailwind.config.js
 ┗ 📜tsconfig.json

[ ] 요구 사항 및 구현
- 배경
  - 컨버스 사이즈를 변경하고 싶다.
    - [x] 드롭다운을 통해 1:1, 4:3, 16:9 비율로 변경하도록 했습니다.
  - 배경을 변경하고 싶다.
    - [x] 색상 배경 : 팔레트에서 색상을 선택하거나, 그라데이션으로 변경하도록 구현했습니다.
    - [x] 이미지 배경 : Unsplash api를 이용하여 이미지를 랜덤하게 적용하였습니다. 과도한 api요청을 막기위해 디바운싱을 추가하였습니다.
    - [x] 직접 업로드 : 원하는 사진을 업로드하여 변경하도록 구현했습니다.
- 텍스트
  - 텍스트를 입력/수정하고 싶다.
    - [x] 입력창에 문구를 작성/수정하면 미리보기 화면에 반영되도록 구현하였습니다.
  - 텍스트 레이아웃을 설정하고 싶다.
    - [x] 텍스트 갯수에 알맞은 텍스트 레이아웃을 Carousel로 보여줌으로서 선택하도록 하였습니다.
  - 텍스트 폰트를 설정하고싶다.
    - [x] 모든 텍스트에 적용될 폰트를 드롭다운으로 선택하여 적용되도록 구현했습니다.
  - 텍스트 강조(굵기)를 선택하고 싶다.
    - [x] 각 텍스트의 굵기를 굵게, 보통, 얇게의 버튼을 선택하도록 하였습니다.
  - 폰트 색상을 선택하고싶다.
    - [x] 각 텍스트에 적용될 색상을 팔레트, ColorPicker를 통해 변경되도록 구현했습니다.
- 기타
  - 썸네일을 저장하고 싶다.
    - [x] 미리보기에 나온 화면을 downloadjs와 html-to-image 라이브러리를 이용하여 자동저장하도록 구현했습니다. 저장하는 작업이 길어질 경우 사용자 경험을 위해 로딩처리를 추가했습니다.
  - 작업 내용을 초기화하고싶다.
    - [ ] 각 설정된 모든 recoil값을 기본값으로 돌려놓아 초기화하도록 구현했습니다.
- 서비스
  - Github Pages 배포. + 커스텀 도메인 연결 (+ main branch의 CI/CD 파이프라인 구축)
    - [x] Github Pages workflow를 작성하여 CI/CD를 구축하였습니다.
    - [x] Github Pages로 배포된 주소를 Github Custom Domain을 설정하였습니다.
  - 반응형 웹 적용
    - [x] Mobile, Tablet, Desktop으로 나눠 범위에 속하는 사이즈에 맞게 미디어쿼리를 적용했습니다.
  - SEO 최적화
    - [ ] meta태그, title, description 등을 이용하여 Open Graph, 구조화된 마크업으로 구현했습니다.
  - Google Search Console에 페이지 등록
    - [x] 구글 검색 엔진에 웹사이트가 검색되도록 등록해주고, 구글 검색 결과가 어떻게 이뤄지고 있는지 모니터링 결과도 알기위해 등록했습니다.
  - GA(구글 애널리틱스)
    - [x] 웹사이트로 유입되는 모든 방문자의 정보를 확인하고자 사용하였습니다.

테오 스프린트 홀짝 repo 좋은 거 링크 남기기(최소 키워드)

13기
- https://github.com/NyangGleNyangGle
12기
- https://github.com/Sorin0404/nal-ggu
11기
- https://github.com/EasyAndBeauty/DailyReceipt-FE-WEB
10기
- https://github.com/gangeybob/NaengPa

현

맥스

테오 스프린트 홀짝 repo 좋은 거 링크 남기기(최소 키워드)

맥스 초안

현 초안