Docs: 메인페이지 리드미 추가

.env

@@ -1,4 +1,4 @@
-VITE_BACK_SERVER = "https://stag.2023hiufestainfo.com"
+VITE_BACK_SERVER = "https://2023hiufestainfo.com"
 
 VITE_KAKAO_REDIRECT_URI = "https://2023hiufestainfo.com/adminlogin/oauth"
 VITE_KAKAO_API_KEY="53ad262f8be38fdc304d451031f1163b"

.github/workflows/prod-deploy.yml

@@ -20,7 +20,7 @@ jobs:
       #   id: docker_meta
       #   uses: crazy-max/ghaction-docker-meta@v1
       #   with:
-      #     images: brian990614/2023hiufestainfo-client
+      #     images: brian990614/2023hiufestainfo-client-prod
       #     tag-semver: |
       #       {{version}}
       #       {{major}}.{{minor}}
@@ -43,4 +43,4 @@ jobs:
           file: ./Dockerfile.prod
           platforms: linux/amd64
           push: true
-          tags: brian990614/2023hiufestainfo-client:latest
+          tags: brian990614/2023hiufestainfo-client-prod:latest

README.md

@@ -1 +1,170 @@
-# 홍익대학교 대동제 사이트
+# 홍익대학교 대동제 프로젝트
+
+## 프로젝트 소개
+
+## 메인페이지
+
+담당자 : 김진호 ([jinhokim98](https://github.com/jinhokim98))
+
+## 주요 기능
+
+1. 랜딩
+
+2. 로드맵
+
+3. 라인업 소개
+
+4. 일정 소개
+
+5. 운영 시간
+
+### 1. 랜딩
+
+- 상단에 애니메이션 (gif)가 들어가며 그라데이션 효과가 적용되어있습니다.
+
+- 아래로 스크롤하면 애니메이션이 블랙아웃되며 점점 사라집니다.
+
+- 애니메이션 위로 2023 홍익대동제 화양연화 ; Page 화면이 덮습니다.
+
+- 화양연화 화면이 고정되며 나머지 설명이 위로 올라옵니다.
+
+### 2. 로드맵
+
+- 학교 축제 내 위치들을 한 눈에 볼 수 있는 지도와 해당 위치 버튼이 있습니다.
+
+- 전체, 수익부스, 무대, 홍익존, 주점, 푸트드럭, 기타 편의시설, 와우 디제이 페스티벌 구역이 있으며, 해당 버튼을 누르면 지도가 그에 맞게 변경됩니다.
+
+- 지도의 핀을 누르게 되면 해당 페이지로 이동하게 됩니다.
+
+### 3. 라인업
+
+- 9월 13, 14, 15일 3일로 구성되며, 각 칸에는 아티스트 사진과 설명이 들어옵니다.
+
+- 사진 상단 좌우에 검은색 삼각형을 주어 포인트를 주었습니다 (뉴진스의 경우 사진 잘림 현상이 있어 제외)
+
+- 차트맨과 함께한 아티스트는 문구를 넣어 사진 위에 강조했습니다.
+
+- 펼치기 접기 기능을 만들어 라인업을 선택적으로 확인할 수 있습니다.
+
+- 접기 기능을 할 때 라인업 펼치기 위치로 자동 스크롤 됩니다.
+
+### 4. 일정 소개
+
+- 9.13, 14, 15일의 일정을 타임테이블로 보여주는 화면입니다.
+
+- 이 기능을 통해 전체적으로 일정을 확인할 수 있습니다
+
+### 5. 운영 시간
+
+- 각 운영 부스의 운영시간을 확인할 수 있습니다.
+
+- 각 부스 별로 시간과 특이사항을 확인할 수 있습니다.
+
+## 어려웠던 점
+
+### 요구사항 변화
+
+총학의 요구사항 변경이 정말 많았습니다.
+
+전체적인 디자인부터 세부 내용 (특히 아티스트 소개 글, 시간)의 변동이 수도 없이 많았습니다.
+
+전체적인 디자인 변경은 아직 프레임을 구성한 단계에서 일어나 무리 없이 대처할 수 있었지만. 그 뒤에 발생한 수정사항에 대해서는 대처하기 쉽지 않았습니다.
+
+커밋을 한 후 반영을 할 때 바로 수정사항이 발생하여 다시 반영한 경우도 있었으며, 이동 중, 식당에 있는 도중에도 수정사항을 반영해달라는 요청이 있어, 그 자리에서 노트북을 열어 수정사항을 반영했을 정도로 요구사항 변화에 많이 시달렸습니다.
+
+프론트 팀장님이 변경사항이 발생할 때마다 이를 정리하여 반영했음에도 너무 많은 수정사항이 발생하여 프론트 개발팀 사이에서도 혼동이 생겨 엉키는 문제도 발생했습니다.
+
+커뮤니케이션을 통해 수정사항을 모두가 알고, 헷갈리지 않도록 해야한다는 것을 이번 프로젝트를 통해 몸으로 깨닫게 되었습니다.
+
+### 기술적인 어려움
+
+1. 상단 애니메이션 스크롤 문제
+
+```
+20px 스크롤 후 아래가 위를 덮는 효과를 넣는 것에 대한 고민이 많았습니다. 다른 개발자가 사용하고 있는 애니메이션 라이브러리인 aos로 해결해보고자 열심히 서치해봤지만 알맞은 것이 없어, 어떻게 구현해야할까 고민이 많았습니다.
+
+그러다 현재 스크롤 값을 읽어와 각 컨테이너에 window.scrollY값을 주며 top 속성을 scrollY값에 따라 변화를 주고, 특정 scroll값에서 display: relative -> fixed로 처리했더니 원하는 결과를 얻을 수 있었습니다. 이후로 스크롤에 대한 effect를 활용할 때 이렇게 적용하면 된다는 것을 알게 되었습니다.
+
+하지만 특정 기기에서 버벅임 이슈가 발생하여 조금 아쉬운 점이기도 합니다.
+```
+
+2. 그림 로드 문제
+
+```
+그림이 용량이 커서 빠르게 로드되지 않아 뒷 배경이 보이는 문제가 생겼습니다.
+
+이를 해결하기 위해 lazy loading이라는 기법을 찾아보게되었고, 이미지가 다 로드되었는지를 감지할 수 있는 IntersectionObserver JS api를 알게되었습니다.
+
+이는 안에 있는 요소들이 다 준비가 되었는지를 판단할 수 있으며, 이를 활용하여 준비가 되지 않았을 때는 스켈레톤 이미지를 준비가 되면 이미지를 보여주는 기능을 넣을 수 있었습니다. IntersectionObserver api를 활용하여 이미지가 준비되었는지를 판단하는 커스텀 훅을 아래에 올립니다.
+```
+
+```js
+import { useState, useEffect } from 'react';
+
+/**
+ * useLazyLoading
+ *
+ * 로딩 중이면 스켈레톤 이미지, 아니면 실제 이미지를 보여주는 것을 판단해주는 custom hook
+ * @param observerRef 이미지를 포함하는 ref
+ * @returns loading 로딩 중 boolean
+ */
+function useLazyLoading(observerRef) {
+  const [loading, setLoading] = useState(true);
+
+  let observer = null;
+
+  useEffect(() => {
+    if (observerRef.current && loading) {
+      observer = new IntersectionObserver(([entries]) => {
+        if (entries.isIntersecting) {
+          setLoading(false);
+        }
+      });
+
+      observer.observe(observerRef.current);
+    }
+
+    return () => {
+      if (observer) {
+        observer.disconnect(observerRef);
+      }
+    };
+  }, [loading, observerRef]);
+
+  return loading;
+}
+
+export default useLazyLoading;
+```
+
+3. 반응형 문제
+
+```
+많은 사람들이 쓰는 화면이고, 사람들마다 기기가 천차만별로 다르기 때문에 프로젝트에 반응형 적용은 필수였습니다. 때문에 모든 size를 rem으로 변환하여 적용을 했습니다.
+
+또한 미디어쿼리로 450 600 그 이상을 나누어 font-size: 10, 13, 16으로 주었고, 이를 따라서 다른 모든 크기 요소를 rem으로 적용하니 450px이상이 되면 자동으로 모든 요소가 커지고 작아지면 작아지는 효과를 볼 수 있었습니다.
+```
+
+4. 그림 내 마커 문제
+
+```
+그림안에 마커를 넣고 마커를 클릭하면 이동하는 이벤트를 구현할 때의 이슈입니다.
+그림이 가만히 있으면 문제가 없지만, 모든 사람들의 기기의 너비가 다르고, 450, 600px일 때마다 사이즈가 커지므로 그림의 크기가 달라질 수 밖에 없었습니다.
+
+처음에 그냥 top, left로 조정해보려했지만 너비가 달라지면 마커의 위치가 달라져 원하는 곳에 마커가 위치할 수 없던 문제가 있었습니다.그림이 커지거나 작아질 때 마커가 그에 맞추어 따라가게 하는 방법에 대해 열심히 조사를 해봤습니다.
+
+해결 방법은 top과 left속성을 단순 rem으로 하는 것이 아니라 calc(50% - 1.2rem)이런 식으로 적용을 하면 그림이 커지거나 작아져도 마커가 그 위치를 지킬 수 있다는 것을 알게되었고, 이를 적용하여 성공적으로 지도 위에 마커를 배치할 수 있었습니다.
+```
+
+5. width 100%에 대한 고찰
+
+```
+부모가 100%가 되어있지 않으면 자식들이 부모의 크기를 넘어서는 경우가 생겨, 엉뚱한 컴포넌트가 잘못 적용되었다고 오해를 한 상황이 발생했습니다.
+꼭 부모를 100%로 적용해주어 자식이 이를 넘어서는 일이 발생하지 않도록 해야한다는 것을 알게 되었습니다.
+```
+
+## 보완할 점
+
+1. 상단 애니메이션 특정 기기에서의 스크롤 문제
+
+2. 스켈레톤 이미지마저 간헐적으로 늦게 로딩되는 현상