- Hoyoverse의 게임인 "원신" 플레이어를 위해 개발하는 사이드프로젝트 웹페이지입니다.
- 본인의 UID를 입력하면 다양한 본인의 계정에 대한 Report를 제공하도록 만들어보려고 하고 있습니다.
배포 주소: https://genshin.gg.mooo.com
FE 및 BE를 https로 배포하기 위한 자세한 과정: Link
- FrontEnd
- react: 18.2.0
- react-router-dom: 6.22.3
- axios: 1.6.7
- qs: 6.12.1
- recoil: 0.7.7
- tailwindcss: 3.4.1
- postcss: 8.4.38
- autoprefixer: 10.4.19
- tailwind-scrollbar-hide: 1.1.7
- BackEnd
- python: 3.11.7
- fastapi: 0.110.0
- httpx: 0.27.0
- uvicorn: 0.28.0
- Enka.Network - API를 사용하였습니다. Enka.Network API Github
frontend
cd frontend
echo REACT_APP_API_URL=당신의 FastAPI 구동 주소 >> .env
npm install
npm startbackend
cd backend
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirement.txt
uvicorn main:app --reload |
 |
|---|
UID를 불러와 기본적인 정보를 보여주기 성공
보유 캐릭터를 불러와 보여주기 성공
 예외처리 추가 |
 상단바를 화면에 고정 |
|---|
 UID는 불러왔으나, avatarInfoList가 undefined인 경우 위와 같이 안내한다. |
 진열장에 캐릭터가 많은 경우에도 스크롤을 내렸을 때 배경색이 유지되도록 고쳤다. |
|---|
 |
 |
|---|
우측의 캐릭터 버튼을 클릭해서 해당 캐릭터 정보를 볼 수 있는 상세 컴포넌트 구현 (현재는 캐릭터 이미지와 이름 레벨 정도만 출력)
캐릭터 이미지를 구하기 위해 avatarInfo.SideIconName에서 캐릭터 이름을 따로 파싱해서 API주소로 사용함
const sideIconName = characters[avatarId]?.SideIconName;
const avatarName = sideIconName.substring("UI_AvatarIcon_Side_".length);
const url = "https://enka.network/ui/UI_Gacha_AvatarImg_" + avatarName + ".png"; |
 |
|---|
모바일, PC에 적절하게 프로필 페이지를 더 다듬고, 반응형 웹 디자인 도입
 |
 |
 |
|---|
각 캐릭터마다 무기 1개와 성유물 5개를 장착 가능한데, 장착한 장비를 이미지로 보여주며 마우스를 올리거나 클릭 시 팝업을 띄워 상세 정보를 확인할 수 있도록 구현해줬다.
단, 아직 모바일에서는 UI가 완벽하지 않아 손 볼 필요가 있다.
 |
 |
 |
|---|
 |
 |
|---|
캐릭터 이미지를 가운데 두고 position: relative; 적용, 캐릭터 소개와 장비 스펙 등의 컴포넌트에 position: absolute; 를 적용해 이미지에 대한 상대적 위치로 배치해줬다.
별 일이 없다면, 캐릭터 관련 컴포넌트의 레이아웃은 이대로 fix할 것 같다.
이번에 레이아웃 잡으면서 알게 된 사실:
- tailwindCSS에서 반응형 레이아웃을 구성할 때 주로
sm:md:lg:xl:를 사용하게 되는데 이것들은min-width기준으로 미디어 쿼리를 적용시킨다. max-width에 익숙하다 보니min-width가 잘 와닿지 않았는데, 레이아웃이 바뀌었으면 하는 기준(예를 들어640px)에서 더 작을 때 원하는 속성은 그냥 적고, 더 클 때 원하는 속성을sm:을 붙여 적으면 된다.- 즉, 작을 때 적용될 속성은 그냥 적고, 특정 width 이상일 때 적용될 속성을
md:와 같은걸 붙여 적으면 된다.
Navbar의 하단에 border를 넣어 디자인해줬고, Footer도 만들었다. 내용은 조금씩 채워나갈 예정.
border 색상과 두께 역시 좀 더 얇게 해줬다. 두꺼우니 안 예뻐서..
 |
 |
|---|
진열장 캐릭터들의 스텟 정보를 보여주는 기능 구현 완료. UI도 좀 더 수정해줘야 할 것 같고, 함께 보여주면 좋을 정보들도 고민중이다.
 |
 |
 |
|---|
전체적으로 border를 제거하고, shadow, drop-shadow를 활용한 디자인으로 변경해줬다.
캐릭터 이미지에는 max-height값을 지정해줬다. 이를 통해 가로로 긴 화면에서 캐릭터의 머리와 다리가 잘리는 문제를 해결했다.
모바일 환경에서는 캐릭터 스텟 정보를 좌하단에 배치시켜서 이미지를 가리지 않도록 해줬다.
Navbar에 Profile 버튼을 다시 추가해줬고, Recoil-persistant에 uid 데이터가 있는 경우만 동작하도록 예외처리해줬다. uid 데이터가 없는 경우, alert로 안내하고 MainPage로 다시 이동시킨다.
기존에 적용했던 Jua 폰트를 제거하고, Noto Sans KR 폰트로 변경했다. 이유는 Jua 폰트의 윗 여백과 아래 여백의 크기가 달라 중앙 정렬이 안 되는 문제가 있었기 때문이다.
NameCard 컴포넌트를 기존에는 background-image로 구현했는데, 이를 relative와 absolute를 활용하는 방향으로 리팩토링했다.
메인 페이지에서 UID를 입력하지 않았거나 잘못 입력한 경우 빨간 테두리와 함께 경고 문구가 나타나는데, 기존에는 한 번 잘못 입력한 경우 영구적으로 빨간 테두리와 경고가 나타났다. 이를 2초동안만 유지되고 다시 원래 상태로 돌아가도록 개선했다.
Google Analytics를 적용해 웹 방문자수 등을 체크할 수 있도록 해줬고, Google Search Console을 통해 구글 검색으로 웹페이지가 뜰 수 있도록 준비중이다. 이를 위해 meta 태그를 추가했고, sitemap.xml을 준비중이다.