목차

1. 프로젝트 기획의도

2. 프로젝트에 사용된 기술스펙

3. 프로젝트 구성

3-1. Common 폴더

• Common/Button
• Common/Footer
• Common/GuideSection
• Common/Header
• Common/Modal
• Common/Wrapper

3-2. Pages 폴더

• Pages/FirstPage
• Pages/BackgroundPage
• Pages/InfoPage
• Pages/WritingPage
• Pages/ImagePage
• Pages/BgmPage
• Pages/CheckPage
• Pages/TestPage

4. 프로젝트 후기

1. 프로젝트 기획의도

• 2023년 작업했던 편지작성 페이지인 'Project_Touched'를 Remaster함
  Project_Touched 시연 링크 : https://seunggyu-jung.github.io/Project-Touched-Sample/
• 기존 프로젝트의 경우, 편지의 내용을 직접 코드로 작성해야 작성이 가능
• 홈페이지 내에서 직접 편지를 작성할 수 있는 SPA 프로젝트로 Remaster를 진행

2. 프로젝트에 사용된 기술스펙

1. 언어 : TypeScript

• 현재 프론트 엔드 실무에 있어 객체 지향의 장점과 협업을 효율을 향상시켜주는 TypeScript를 주 언어로 사용하여 코드의 가독성및 에러를 최소화 시킴

2. 라이브러리 : React

• 다양한 라이브러리를 사용하여 보다 페이지를 다체롭게 꾸밀 수 있은 React를 사용

3. 상태관리 : Recoil

• React과의 호환성이 좋고 Redux보다 훨씬 가볍고 실용적인 Recoil을 사용하여 전역 상태 관리를 진행함

3. 프로젝트 구조

• 본 프로젝트는 크게 FirstPage, BackgroundPage, InfoPage, WritingPage, ImagePage, BgmPage, CheckPage, TestPage로 총 8개의 페이지로 구성되어있는 Pages 폴더와 버튼, 헤더, 풋터, 모달, 레이아웃 등 공통적으로 사용할 수 있는 Common 폴더로 구성되어있다.

3-1. Common/Button

• 편지를 작성하는 순서가 정해져있으며, 순서 이전과 이후로 넘어갈 수 있게 해주는 버튼을 구현
• 해당 버튼은 작성 페이지들(5개)에서 사용하기에 공용 컴퍼넌트로 제작
• 몇몇 페이지는 편지를 작성할때 반드시 작성해야 하는 내용(기본정보, 편지내용)들을 넘기는 일이 없도록 제약을 거는 함수가 구현되어 있음
• 따라서 다음으로 넘어가는 버튼의 경우, 전달값이 함수인지 아닌지를 판별하는 로직을 구현
  사진과 같이 필수 조건을 충족하지 못하면
  팝업 경고창이 나오고 다음 단계로 넘어가지 못하게 제한함
  

3-2. Common/Footer

• 프로젝트에 대한 인적사항이나 개발자에 대한 정보를 더 알아볼 수 있는 풋터 구현
• 페이지의 height값이 낮은 경우, height값에 맞게 올라오지 않고 항상 하단에 고정 할 수 있도록 공용 레이아웃에 min-height와 padding-bottom으로 값을 조정하고 풋터에 position: relative와 translateY(-100%)을 넣음
  공용 레이아웃에 min-height와 padding-bottom으로 값을 조정
  풋터에 position: relative와 translateY(-100%)을 넣음
  height 공간이 남아도 항상 하단에 고정

3-3. Common/GuideSection

• 편지 작성 방법을 안내해주는 section은 작성 페이지에 공통적으로 들어가기에 구현
• 페이지 명과 가이드 내용을 props로 전달받는 구조로 사용하여 코드의 재사용성을 높임
• 만약 가이드에 설명 내용이 한 줄로 짧은 경우는 어떻게 해야하는가?
• 2단계부터 인터페이스에 null 값도 포함하여 불필요한 곳에 null을 전달시켜 해결
  가이드가 긴 경우에는 상관없지만
  이렇게 짧은 경우 문제가 발생한다.
  2단계부터 인터페이스에 null 값도 포함
  

3-4 . Common/Header

• 작성 페이지가 어떤 페이지인지 명시해주며, 각 페이지를 이동할 수 있도록 리모컨 역할을 하는 버튼을 갖는 헤더 구현
• PC 버전의 경우, height값이 충분히 크기 때문에 fixed된 헤더가 불필요하다 느껴 값을 고정
• 모바일 버전의 경우, heigth값이 기종마다 다르기에, max-width: 500px로 고정하여 스크롤을 따라다니는 헤더를 구현
  PC버전
  모바일 버전

• 클릭하면 동적으로 변하는 햄버거 버튼 스타일링 구현
• @keyframes를 통해, 자연스럽게 내려오는 ul,li태그 구현
  
• 슬라이더의 경우, props를 styled에서 선언하여 tsx로 전달될 수 있도록 구현
• ease forwards를 통해 @keyframe에서 변경된 값을 유지하도록 구현
  

3-5. Common/Modal

• 웹에서 제공하는 alert를 사용하는 것이 단조롭고, 다양한 기능을 넣을 수 없다고 판단하여 별도의 alert역할을 하는 modal창 구현
  
• dom트리에 직접적으로 접근하여 modal창이 열렸을때, 키보드나 마우스의 스크롤을 이동시킬 수 없도록 구현
  
• 모달창이 아닌 곳을 클릭하거나, useEffect를 사용하여 esc키를 눌러 모달창을 끌 수 있도록 구현
  

3-6. Common/Wrapper

• 편지 작성을 담당하는 모든 페이지의 레이아웃을 공용 컴퍼넌트로 제작
• props로 children을 전달하고 각 페이지에 필요한 태그들을 담는 로직으로 작동
  

3-7. Pages/FirstPage

• 사용자가 가장 먼저 접하는 페이지
• react-responsive-carousel라이브러리를 사용하여 반응형에 적합한 Carousel로 여타 홈페이지의 WelcomePage와 유사한 UI를 구현함
  
  출처 : https://programmers.co.kr/
  
• Carousel에서 사용한 속성 :
  showArrows={false} : Carousel 양 옆의 화살표 제거
  showStatus={false} : Carousel 상단의 이미지의 번호 제거
  autoPlay={true} : 자동으로 이미지들을 순환
  infiniteLoop={true} : 순환을 무한히 진행
  interval={3000} : 이미지 전환 주기를 3초로 실행
  showThumbs={false} : 이미지 미리보기를 보여주지 않음
  showIndicators={false} : 이미지 전환을 할 수 있는 리모컨을 숨김
  stopOnHover={false} : 호버시 이미지 전환이 멈추는 것을 제거
  selectedItem={currentIndex} : currentIndex에 해당하는 화면을 보여줌
• 이미지를 배열로 전달받아 이를 map을 통해 순환시킴
  
• useState를 이용하여 인덱스의 상태를 관리하고, 해당 인덱스가 곧 Carousel에 보여지는 이미지의 번호
  

3-8. Pages/BackgroundPage

• 전송될 편지의 배경화면 색상을 선택하는 페이지
• react-colorful라이브러리를 사용하여 색상 팔레트를 사용
• 2가지 색의 그라데이션으로 구성되어있으며, 원하는 색을 2개 선택하여 조합하는 방식
• 색상을 선택하면, 기존의 2가지 색 중, 가장 먼저 선택한 색부터 사라지는 방식
• 색들은 배열 형태로 되어있기에, 이를 반전시킬 수 있는 기능도 구현
  
• 이렇게 선택된 색상들은 배열 형태로 Recoil 파일에 저장
  
• 배경색은 welcomePage를 제외한 나머지 페이지에 globalStyle의 Before가상요소로 적용
  

3-9. Pages/InfoPage

• 발신자와 수신자의 이름을 작성하는 페이지

• input태그에 정보를 입력하여 전달하기에 form태그를 사용

• 프로젝트에서 반드시 필요한 정보이기에 input태그에 p태그를 absolute로 강조

• 내용을 입력하면 p태그가 민트색의 체크표시로 변경
  

• 조건을 충족하지 않을 경우, 그 조건을 충족시키라는 팝업창이 나타나도록 구현

• 내용을 작성하지 않아도, 헤더의 리모컨 버튼을 통해 다른 페이지로 넘어갈 수 있게 구현하여 사용에 대한 불쾌감 제거
  

• 두 p태그의 로직은 같지만, 각자 참조하는 상태가 다르기 때문에 따로 분리하여 구현
  

3-10. Pages/WritingPage

• 편지의 내용을 작성하는 페이지
  
• 편지에 담길 텍스트의 폰트, 크기, 편지 section의 배경을 선택할 수 있음
• 선택로직은 select태그와 option태그로 구현
  
• 배경이미지는 내장된 이미지를 사용(추후에 변경 예정)
• 선택로직이 구현된 section은 숨기기 버튼을 통해 사용자에게 보다 쾌적한 UI를 제공
  
• 편지내용 또한 필요한 요소이기에 필수적으로 작성하도록 설정
  

3-11. Pages/ImagePage

• 편지에 장식할 이미지를 업로드 하는 페이지
• 업로드 전에는 별도의 section이 생기지 않고, 업로드하면 보이는 로직 적용
• 이미지의 오른쪽 상단에 삭제버튼 구현
• '파일 선택'버튼을 클릭하고, 원하는 이미지를 선택하여 업로드 하는 방식
• 희망하는 경우, 한 번에 여러 사진을 함께 업로드 가능
  
• react-responsive-carousel라이브러리를 사용하여 반응형에 적합한 Carousel을 사용
• 이미지는 배열 타입이며, Carousel에 담겨 map으로 조회가능
  

3-12. Pages/BGM_Page

• 편지를 열자마자 재생될 BGM을 유튜브에서 가져와 업로드하는 페이지
• react-youtube라이브러리를 사용하여 유튜브 url에 해당하는 영상을 상영해주는 기능 구현
• 처음 저복할때는 설정되어있는 url이 따로 존재하지 않음
  
• 사용자가 원하는 유튜브 영상의 url을 input태그에 업로드하면 recoil에서 관리가 됨
  
• 이는 모바일 사용자도 함께 사용할 수 있도록 정규표현식으로 나누어 처리함
  
• 이 페이지가 편지 구성 작업의 마지막 단계라서, 기존에 작성해야했던 필수 정보들의 작성 유무를 recoil을 조회하여 검토해줌(수신자 정보, 발신자 정보, 편지내용)
  
• 조건을 만족하면 수신자용 welcomePage로 이동할 수 있게 해주는 팝업창이 나타남
  

3-13. Pages/CheckPage

• 수신자가 처음으로 접하게 될 welcomePage
• 본인이 수신자가 맞는지에 대한 진위 판단 여부를 알아야하기 때문에 CheckPage로 네이밍함
  
• '맞아'버튼을 클릭하면 커스텀된 편지를 확인할 수 있게 해주는 페이지로 전환
  
• '...아닌데?'버튼을 클릭하면 '맞아'버튼과 기능이 같은 '생각해보니 맞는 것 같아'버튼이 있는 페이지로 전환
  
• 결국 본인이 수신자가 아닐 경우, 웹페이지를 종료할 것이라 판단하여, 관심이 있다면 편지내용을 볼 수 있도록 설정함

3-14. Pages/TestPage

• 수신자가 보게 될 커스텀 된 편지를 미리 확인하고, 이상이 없으면 앞의 checkPage url을 복사해주는 페이지
• 위에서 아래방향으로 자동으로 글씨가 써지는 이미지를 구현
  => keyframes를 통해 스크롤 아래 방향으로 천천히 글씨가 써지는 로직
  
• 이미지를 추가하고, BGM을 설정하면 보다 풍성하게 커스터마이징 가능
  
• 'url 복사'버튼을 클릭하면 자동으로 클립보드에 checkPage의 url이 복사가 되며, 성공완료 팝업창이 나타남
  
• 거의 가능성은 없지만, 복사에 에러가 발생하면 console창에 에러를 출력해주는 로직 구현
  

4. 프로젝트 후기

4-1. 장점

• 타인에게 감동을 준다는 취지에 걸맞게 다양하게 커스터마이징 할 수 있는 편지 홈페이지를 만들어 홈페이지의 정체성을 잘 살렸다고 판단
• 반응형 웹페이지로 제작하여, 모바일 버전에서도 쾌적하게 사용할 수 있음
• 다양한 React 라이브러리를 활용하여, 기존의 메신지 시스템이 구사하지 못하는 기능들을 넣음(그라데이션 배경, 유튜브 자동재생기능...)
• TypeScript와 Recoil을 활용하여 어느정도 상업용 웹페이지의 틀을 갖춘 SPA를 개발했다고 판단
• 공통으로 사용할 수 있는 코드는 최대한 재사용하는 방향으로 작업 => 불필요한 코드가 거의 없는 클린 코딩을 진행

4-2. 아쉬운 점

• 별도의 서버를 운영하지 않아, Recoil이 로컬에서만 저장이 됨
  => 수신자에게 전송을 하면 Recoil에 담긴 내용 없이 default 값으로 전송됨
  => 이는 firebase와 같은 백엔드 서포트 어플을 활용하여 개선할 계획

• 현제 이 페이지의 오류는 지속되는 새로고침과 리렌더링을 진행하면, recoil에 저장된 이미지가 렌더링 되지 않음 => 이미지 데이터는 존재하지만, 렌더링을 하지 못하는 것
  => 예상되는 원인 : 임의로 생성한 이미지 url주소가 렌더링 될때마다 변경되기 때문이라 판단
  => 이 부분은 주변 지인들과 상의를 해서 해결해봐야 할 듯 하다.