From c7ed2d25c7b78560e27fa47b69ec5cc4666597f9 Mon Sep 17 00:00:00 2001 From: brian <90752841+wokbjso@users.noreply.github.com> Date: Tue, 12 Sep 2023 10:49:30 +0900 Subject: [PATCH 1/6] Update prod-deploy.yml --- .github/workflows/prod-deploy.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/prod-deploy.yml b/.github/workflows/prod-deploy.yml index 1aace77..ac04b4c 100644 --- a/.github/workflows/prod-deploy.yml +++ b/.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}} From f00020707a3511f1d4ec3777f01cb3c1e358d4d7 Mon Sep 17 00:00:00 2001 From: yongun2 Date: Tue, 12 Sep 2023 10:58:04 +0900 Subject: [PATCH 2/6] =?UTF-8?q?[DOC]=20=EB=B0=B0=ED=8F=AC=EC=9A=A9=20?= =?UTF-8?q?=ED=99=98=EA=B2=BD=EB=B3=80=EC=88=98=EB=A1=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/.env b/.env index 9a24c15..4ddc384 100644 --- a/.env +++ b/.env @@ -1 +1,5 @@ -VITE_BACK_SERVER = "https://stag.2023hiufestainfo.com" \ No newline at end of file +VITE_BACK_SERVER = "https://stag.2023hiufestainfo.com" + +VITE_KAKAO_REDIRECT_URI = "http://localhost:3000/adminlogin/oauth" +VITE_KAKAO_API_KEY="53ad262f8be38fdc304d451031f1163b" +VITE_KAKAO_SECRET = "QYuE5PdBvA0g3m6HcWgsppwrKtoNDnhY" \ No newline at end of file From e964b427f92df73fe619c914847c4b540ed593d5 Mon Sep 17 00:00:00 2001 From: yongun2 Date: Tue, 12 Sep 2023 11:00:08 +0900 Subject: [PATCH 3/6] =?UTF-8?q?[FIX]=20=EB=A6=AC=EB=8B=A4=EC=9D=B4?= =?UTF-8?q?=EB=A0=89=ED=8A=B8=20=EC=A3=BC=EC=86=8C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.env b/.env index 4ddc384..287441a 100644 --- a/.env +++ b/.env @@ -1,5 +1,5 @@ VITE_BACK_SERVER = "https://stag.2023hiufestainfo.com" -VITE_KAKAO_REDIRECT_URI = "http://localhost:3000/adminlogin/oauth" +VITE_KAKAO_REDIRECT_URI = "https://2023hiufestainfo.com/adminlogin/oauth" VITE_KAKAO_API_KEY="53ad262f8be38fdc304d451031f1163b" VITE_KAKAO_SECRET = "QYuE5PdBvA0g3m6HcWgsppwrKtoNDnhY" \ No newline at end of file From 2b5d4e4aeaf0d4999f1bc0908562b079b49a711a Mon Sep 17 00:00:00 2001 From: brian <90752841+wokbjso@users.noreply.github.com> Date: Tue, 12 Sep 2023 11:33:56 +0900 Subject: [PATCH 4/6] Update prod-deploy.yml --- .github/workflows/prod-deploy.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/prod-deploy.yml b/.github/workflows/prod-deploy.yml index ac04b4c..8a03763 100644 --- a/.github/workflows/prod-deploy.yml +++ b/.github/workflows/prod-deploy.yml @@ -43,4 +43,4 @@ jobs: file: ./Dockerfile.prod platforms: linux/amd64 push: true - tags: brian990614/2023hiufestainfo-client:latest + tags: brian990614/2023hiufestainfo-client-prod:latest From 239e8b9d0c303154fce4356be72669614dc1fe60 Mon Sep 17 00:00:00 2001 From: yongun2 Date: Tue, 12 Sep 2023 14:05:48 +0900 Subject: [PATCH 5/6] =?UTF-8?q?[FIX]=20=EB=B0=B1=EC=97=94=EB=93=9C=20?= =?UTF-8?q?=EC=A3=BC=EC=86=8C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.env b/.env index 287441a..faf32aa 100644 --- a/.env +++ b/.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" From 32ad0473d6c78da6c1d6328b073112cbcf457585 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=A7=84=ED=98=B8?= Date: Fri, 22 Sep 2023 17:53:05 +0900 Subject: [PATCH 6/6] =?UTF-8?q?docs:=20=EB=A9=94=EC=9D=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A6=AC=EB=93=9C=EB=AF=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EC=95=84=EC=A7=81=20gif=EB=8A=94=20=EB=B0=98?= =?UTF-8?q?=EC=98=81=ED=95=98=EC=A7=80=20=EC=95=8A=EC=95=98=EC=8A=B5?= =?UTF-8?q?=EB=8B=88=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 171 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 170 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 0635337..98bbf3a 100644 --- a/README.md +++ b/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. 스켈레톤 이미지마저 간헐적으로 늦게 로딩되는 현상