FE-Project

오르미 6기에서 작성한 FE 프로젝트 입니다.

목표

1. 피그마 페이지 와 요구사항 명세를 참고하여 github page 배포
2. 반응형 생성

기능

페이지 구현

• 피그마 디자인을 참고하여 페이지를 구현합니다.
• 모바일 화면에서도 적절히 표시되도록 반응형 디자인을 적용합니다.

헤더 고정 기능

• 스크롤 시 헤더가 고정되도록 설정하되, 처음에는 고정 상태가 아닙니다.

스크롤 탑 버튼

• 스크롤 시 나타나는 버튼 구현.
• 버튼은 푸터 아래로 내려가지 않도록 위치 설정.
• 버튼 클릭 시 부드럽게 최상단으로 스크롤 이동.

구독하기 모달창

• 이메일 입력 필드와 Subscribe 버튼 구현.
• 이메일 유효성 검사:
  • 값이 없거나 이메일 형식이 유효하지 않을 경우 alert 창으로 경고 문구 표시.
  • 유효한 이메일 입력 시 모달창 나타남.
• 모달창의 "OK! I love HODU" 버튼 클릭 시 form 제출 및 모달창 닫힘.

git pages url

https://j-neat.github.io/FE-Project/

요구사항 명세

1. 피그마를 참고하여 페이지 구현을 합니다.
2. 모바일 화면도 고려하여 페이지 구현을 합니다.
3. 스크롤시 헤더가 고정되게 합니다. (단, 처음에는 고정된 상태가 아닙니다.)
4. 스크롤 탑 버튼을 구현합니다.
   1. 스크롤 탑 버튼은 스크롤시 나타납니다.
   2. 스크롤 탑 버튼은 푸터 아래로 내려가지 않습니다.
   3. 스크롤 탑 버튼을 누르면 스크롤이 최상단으로 올라갑니다. (단, 부드럽게 올라가야 합니다.)
5. 구독하기 모달창
   1. 이메일을 입력하고 Subscribe 버튼을 클릭하면 모달창이 나타납니다.
   2. 이메일 유효성 검사를 진행해야 합니다.(값이 들어가지 않거나 이메일 형식이 유효하지 않으면 alert 창으로 경고 문구가 떠야합니다.)
   3. 이메일이 잘 입력되었다면 모달창이 뜹니다. 이때 모달창의 OK! I love HODU 버튼을 클릭하면 form이 제출되고 모달창이 닫힙니다.

개발 환경

1. IDE
   • VS Code
2. 배포 환경
   • Github Pages
3. 사용 마크업 언어
   • HTML, CSS, JavaScript

웹 페이지 개발 일정

개발 일정

8월 19일 ~ 20일 (월 ~ 화)

• 작업 내용:
  • Figma 디자인 분석
  • 페이지 구조 설계 (HTML 기본 골격 작성)
  • HTML 작성 완료 및 주요 섹션 추가 (헤더, 네비게이션, 콘텐츠 영역)

8월 21일 ~ 22일 (수 ~ 목)

• 작업 내용:
  • CSS 스타일링 시작 및 완료
  • 기본 레이아웃, 색상 적용, 버튼, 폼, 이미지 등 세부 스타일링

8월 23일 ~ 24일 (금 ~ 토)

• 작업 내용:
  • JavaScript 기능 구현 시작 및 완료
  • 사용자 인터랙션 및 동적 요소 추가 (스크롤 버튼 등)

8월 25일 ~ 26일 (일 ~ 월)

• 작업 내용:
  • GitHub Pages 설정 및 프로젝트 리포지토리 생성
  • 커밋 및 배포 완료
  • 배포된 페이지 테스트 및 오류 수정

8월 27일 (화)

• 작업 내용:
  • 반응형 디자인 적용 시작 및 미디어 쿼리 추가
  • 레이아웃 조정

8월 28일 (수)

• 작업 내용:
  • 반응형 디자인 마무리
  • README.md 작성 및 문서화
  • 최종 점검 및 배포 확인

에러와 문제 해결

1. 그리드 열의 너비를 설정할 때 최소 너비와 최대 너비를 지정하여 반응형 디자인을 구현 grid-template-columns: repeat(3, minmax(40px, 1fr)); 사용하여 문제 해결

2. 그리드 행의 높이를 콘텐츠에 맞춰 자동 조정하여 불필요한 여백을 제거 grid-template-rows: repeat(2, min-content); 사용하여 문제 해결

3. 스크롤 시 버튼 표시 및 위치 조정 문제 window.onscroll 이벤트를 사용하여 스크롤 위치에 따라 버튼의 표시 여부를 결정하고 위치를 조정하여 해결

   UI

main	mobile

보완해야 할 점

topBtn이 footerNav에서 사라지지 않고 우측 하단에 고정되어야 합니다. 이를 보완할 필요가 있습니다. 또한, 반응형에서 footer의 고양이 이미지가 반응형 적용 전의 이미지 비율로 나타나고 있어, 이 문제를 해결할 예정입니다. 그 외에도 프로젝트 구성을 수정할 필요가 있습니다. 또한 카카오 맵 API를 OVN을 사용하여 다시 적용시킬 예정입니다.

느낀 점

처음 프론트 프로젝트를 진행하면서 CSS 적용에 어려움이 많았습니다. 인터넷에서 검색하고 서적을 참고하며, 아는 분께도 도움을 요청하는 등 다양한 방법으로 문제를 해결하려고 했습니다. 그럼에도 불구하고 완벽하게 적용하지 못한 점이 아쉬웠습니다. 멘토님께서 처음에 개념을 잘 잡아주셔서 이 정도까지 올 수 있었습니다. 개인적으로 아쉬운 점은 JavaScript에서 코드를 작성할 때 해결하지 못한 부분이 있어 여전히 신경이 쓰인다는 것입니다. 하지만 앞으로 시간을 두고 수정해 나가며, 프론트 개념을 잘 익히고 싶습니다.