어느덧 2번째 편 !!
지난 1편에는 개발하는 과정에서 겪은 이슈를 이야기해보았는데
이젠 학교에 배포 후 겪은 것들을 이야기해보고자 한다!!
⚠️ 이슈 1
공유하기 버튼을 통해 들어온 유저는 .. 뒤로가기 버튼이 안된다 ??
우리 사이트에는 부스 디테일 페이지에서 링크를 복사해 다른 사람에게 그 부스를 공유할 수 있는 기능이 있었다!!
그리고 그 부스 디테일 페이지에는 뒤로 가기 버튼도 존재했다.
그 기능은
const handleClick = () => {
if (isDepthPage()) {
history.length > 0 ? navigate(-1) : navigate("/");
} else {
navigate("/");
}
};이렇게 구현이 되어있었다.
유저가 history.length에 따라 부스 디테일 페이지 들어오기 전에 머물러 있던 위치로 이동하게 된다.
그런데 사실 이 코드만 보면 공유 링크를 타고 들어온 사용자는 history.length > 0에 만족하지 않기에
/ 즉, home page로 이동하는게 맞다.
하지만 왜인지!!! 공유 링크를 타고 들어오면
뒤로 가기 버튼이 작동하지 않았다 🥺
(왜 이런지 아시는 분은.. 알려주시면 감사하겠듭니다 ..)
그렇게 되면 우리 서비스 구조상 공유 링크를 타고 들어온 유저는 그 페이지만 볼 수 있고 다른 페이지로 넘어가지 못했다.. (밑 nav바는 부스 디테일 페이지에는 존재하지 않았기 때문!)
그래서 사용자가 공유 링크를 타고 들어온 유저인지 확인하는 방식을 다르게 바꾸어 보았다.
const handleClick = () => {
if (isDepthPage() && location.key !== "default") {
navigate(-1);
} else {
navigate("/");
}
};location.key 를 활용한다.
👩🏻💻 location.key: React Router 등에서 각 경로 변경 시 고유하게 할당되는 문자열로 동일한 경로를 여러 번 방문하더라도 각 방문이 구별될 수 있다.
🧑🏻💻 location.key !== "default"
: 페이지가 기본 상태(예: 처음 로드된 상태)인지 아닌지를 확인하기 위한 것이다. 이 조건은 페이지가 처음 로드된 상태가 아니면(즉, 사용자가 이전에 다른 페이지를 방문한 후 다시 이 페이지에 왔다면) 뒤로 가기(navigate(-1)) 동작을 수행하고, 처음 로드된 상태라면 경로 "/"로 이동한다.
사실 이건 누가 발견해서 보내준 이슈라기보단 그냥 내가 사용하다보니 불편해서 고친 에러다 !! 물론 누군가에는 사소한 것일 수 있지만 ux를 개선했다는 점에서 뿌듯해 기록해본다.
⚠️ 이슈 2
home 페이지 TOP3 부스 -> 디테일 부스 페이지로 연결이 안된다구?
이건 .. 나의 패착이다...
백엔드에서 보내주는 데이터를 더 상세하게 살펴봤어야 하는데..
우리의 home 페이지에는 좋아요 수에 따라 1, 2, 3등의 부스를 보여주는데,
이때 축제 당일이었던 28, 29, 30일에는 각각 해당하는 부스만 보여주고, 그 외의 날짜에는 28일을 디폴트로 설정해놓았다.
그리고 부스를 누르면 해당 부스 디테일 페이지로 이동한다.
또한, 우리는 28, 29, 30에 대한 페이지가 따로 파져있었다.
(같은 부스가 다른 위치에서 다일 진행되는 경우가 있어서 동일한 부스이되, 다른 날짜 처리 필요해졌다 !! 그래서 백엔드 모델이 수정되었구.. 부스 api 보낼 때 ?date={date} 가 필수적으로 들어가줘야 했다는 사실 !!)
그런데 백엔드가 보내주는 데이터에서는
이렇게 되어있었다! 즉, int형태의 date값을 response하고 있지 않았다!!
그치만.. 부스 디테일 페이지로 넘어가는 router 는
/booths/${날짜}/${해당 부스 id값}
like this...
사실 백엔드에 date 값을 추가해달라고 하면 되는거지만
그냥 프론트단에서 처리하는게 더 나을 것 같아
(왜냐면.. 이미 학생들에게 배포된 상태였기에 백엔드 서버가 cicd 중에 잠깐 중단되면 ... 큰일나기에 ..)
호다닥 수정해보았다.
const getFormattedDate = (during) => {
if (during.includes("화")) {
return 28;
} else if (during.includes("수")) {
return 29;
} else if (during.includes("목")) {
return 30;
}
return 28;
};이렇게 받아오는 데이터의 during에서 해당 요일이 포함되어있는지 확인하고 해당 요일에 28, 29, 30을 매칭시켜주었다.
이렇게 하면 해결 완 !!
⚠️ 이슈 3
부스 상세 페이지 slide 보완하기!!
사실 이건 이슈라기 보다 유저가 더 편하게 볼 수 있도록
수정한 경우다.
부스 상세 페이지에는 이렇게 부스의 홍보 이미지 여러개를 볼 수 있었다.
약간의 불편했던 점은 저 화살표를 눌러야지만 옆으로 넘어가진다는점!!
그래서 옆으로 슬라이드 해도 볼 수 있고 밑에 pagination 점들을 눌러도 해당 이미지로 넘어가게 하고 싶었다!!
이 기능은 home 페이지에서도 활용한 react-slick 기능을 활용했다.
const sliderRef = useRef(null);
const handlePrevClick = () => {
sliderRef.current.slickPrev();
};
const handleNextClick = () => {
sliderRef.current.slickNext();
};
const handleDotClick = (index) => {
setCurrentIndex(index);
sliderRef.current.slickGoTo(index);
};이렇게 기능을 정의해주고
<Slider {...settings} ref={sliderRef}>
{images.map((image, index) => (
<S.ImageNotice
key={index}
src={image}
alt={`Booth image ${index + 1}`}
className={image === placeholderImage ? "placeholder" : ""}
onError={(e) => {
e.target.onerror = null;
e.target.src = placeholderImage;
}}
/>
))}
</Slider>이렇게 슬라이드 부분을 구현해주었다.
<S.Dot
key={index}
active={index === currentIndex}
onClick={() => handleDotClick(index)}
/>이 부분은 밑에 pagination 눌렀을 때 해당 index의 이미지로 이동하는 부분이다!!
이렇게 함으로써 유저가 이미지가 여러개 있을 때 화살표 클릭 뿐만 아니라 옆으로 슬라이드하거나 밑에 점들을 눌러서 이미지를 둘러볼 수 있도록 개선했다.
사실 벌써 축제 사이트 개발한게 약 2달 전이어서 .. 기억이 가물가물하다 ㅠ (이래서 미리미리 썼어야 했는데 !!)
이번 축제 사이트를 하면서 아쉬웠던 것은
시간이 너무 타이트해서 서로 코드 리뷰를 못한 것!!
그래도 끝나고 나서 첫 회고를 진행했었는데 너무 재밌었다 !!!
아 갑자기 개발 하러 가고 싶다 .. 그치만 잘래 안뇽
이번 축제 사이트 하면서 다른 학교 축제 사이트도 막 찾아봤는데 학교마다 중요시하는 기능이 다르고 디자인도 당연히 달라서 보는 재미가 있었다
여러분은 축제사이트에 어떤 기능이 있으면 유용할 것 같나요 ??
이상 축제 개인 회고 끝 ~~
만약 더 기억이 나면 다시 보충하러 오도록 하겠다!!
