프로젝트/보드윗 (보드게임원 매칭 서비스) (22) 썸네일형 리스트형 [ 항해99 실전프로젝트 ] 로고를 SVG로 다루어보자! (1) 우리 프로젝트의 로고가 나왔다! 이제 이 파일을 svg파일로 받아낸 다음, 네온사인 효과를 주고싶다. 위의 이미지와 같은 느낌의 네온사인으로 만들어내야 한다. 그러기 위해서는 저 로고가 텍스트가 아니기 때문에, SVG를 다룰 줄 알아야한다.. svg에 대하여 좀 알아보니 생각보다 복잡한 것 같다. 자세한 내용은 아래 블로그를 참고해보자! https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-SVG-%EB%8B%A4%EB%A3%A8%EA%B8%B0-%EC%A0%95%EB%A6%AC-%ED%81%AC%EA%B8%B0%EC%83%89%EC%83%81-%EB%B3%80%EA%B2%BD [CSS] 📚 SVG 다루기 정리 (크기/색상 변경) SVG (Scalabe Vector Gra.. [ 항해99 실전프로젝트 ] 디테일페이지를 모달창으로 바꾸기 디자인이 살짝 변경되어, 원래는 상세정보를 다른 페이지에서 보여주었는데 리스트와 같은 페이지에서 모달창으로 보여주는 것으로 바뀌었다. 현재는 그냥 다이나믹 라우팅을 통해, 리스트에서 각 카드를 누르면 다른페이지에서 상세정보를 보여주고 있다. 즉, localhost:3000/main ===> localghost:3000/posts/6377289545223 이렇게 페이지가 넘어가고 있다. 이제 바꾸어야할 점은, 페이지를 이동시키지않고 localhost:3000/main 에서 모든것을 보여주어야 한다. 기존 모달창을 이용하면 되니 복잡하지는 않을 것 같지만, 카드를 눌렀을 때 따라오는 postid를 모달창에 넘겨주는 작업이 필요하다. 지금 리스트부분은 아래와 같은 코드로 이루어져있는데 {items?.map((.. [ 항해99 실전프로젝트 ] 회원가입페이지 나누기 MVP발표까지는 일주일이 남았다. 매우 순조롭게 진행되고 있는 것 같고, 팀원들에게 항상 감사하다. 이번에는 우리의 프로젝트가 모바일웹으로 제작이 되기때문에, 모바일환경에 따른 회원가입페이지로 수정을 해야한다. 초기의 와이어프레임대로, 현재 회원가입페이지는 아래와 같다. 위와 같이, 구현이 되어 있으면 모바일에서 작동 시 키보드가 올라오기때문에 많은 화면이 가려지기때문에 사용자가 매우 불편하다는 생각이 들었다. 그래서 최대한 화면 넓이의 절반을 남겨두고 회원가입페이지를 구현하려고 한다. 구현하려는 페이지는 아래 이미지와 같다. (디자이너님이 짜주심) 한 화면에서 모든 것이 이루어졌던 기존의 회원가입과 달리, 3개의 화면으로 나누어져 있다. 생각보다 귀찮은 작업이 될 것 같다. 내가 예상한 실행순서는 아래.. [ 항해 99 실전프로젝트 ] 사용자의 아바타를 데이터로 만들자 ( 3 ) 이미지를 동적으로 입히는 기능은 생각보다 단순했다. 이제는 사용자가 선택한 아이템들이 서버단에 저장이 되어, 새로고침 시나 로그아웃 후에 다시 로그인하여도 선택했던 아바타의 이미지가 나와야 한다. 우리가 정한 카테고리는 총 4가지로 좁혀봤다. 눈 (Eye) 입 (Mouth) 머리 (Hair) 배경 (Back) 해야할 순서 사용자가 여러 아이템들을 선택할 수 있는 슬라이드를 만들어준다. 슬라이드에 이미지들을 뿌려주기 위해, map함수를 사용해야하니 이미지파일규칙이 정해져야 한다. 슬라이드에서 선택한 아이템이 위 캐릭터에 반영이 되어야한다. (변수값이 공유되야함) 각종 카테고리별로 변수를 만들어, 선택된 아이템의 변수 값을 db로 쏴주어야한다. 여러 아이템들중, 하나만 선택했을 경우에도 정상작동해야한다. (.. [ 항해 99 실전프로젝트 ] 이미지 입히기 테스트 ( 2 ) 오늘은 대충 배경이랑 악세사리 같이 2개의 다른 위치에 이미지를 계속해서 바꿔 입히는 코드를 먼저 짜보려한다. 해야할 순서 아무 이미지나 카테고리별로 2개 정도를 같은 크기의 이미지로 public 폴더에 저장 public 폴더에서 각 이미지를 불러왔을 때, 정해진 위치에 들어가도록 코드를 짜야지. 아바타만들기 틀을 빠르게 짜보았다. 먼저, 이미지는 public폴더에 넣어놓고 절대경로로 불러오도록 설정하였다. 위의 이미지와 같은 형식으로, 각 이미지 카테고리 (ex/ 눈, 코, 입, 모자, 등등) 별로 div영역을 고정시켜 그 안에 사진을 집어넣는 방식으로 짰다. 그렇다면 사용자가 입모양을 바꾸고싶으면, 빨간색 영역의 div에 있는 이미지가 바뀌고 눈을 바꾸고 싶으면 파란색 영역이 바뀌는 로직이다. 그러기.. [ 항해99 실전프로젝트 ] 아바타 페이지를 만들어보자 ( 1 ) 11월 20일 시작 참고할만한 자료를 아직 많이 찾지는 못해서, 저번 기수가 만든 프로젝트를 참고하기로 했다. 습관삼끼 https://github.com/dokyunglee0905/makehabit_FE (습관세끼) GitHub - dokyunglee0905/makehabit_FE: 갓생삼일 프로젝트 (FE) 갓생삼일 프로젝트 (FE). Contribute to dokyunglee0905/makehabit_FE development by creating an account on GitHub. github.com 일단 습관삼끼에서 구현한 캐릭터페이지는 아래와 같다. 위에 캐릭터를 다양하게 의상부터해서 악세사리까지 입힐 수 있다. 그렇다면, 이걸 어떻게 구현했냐 습관삼끼에서는 프론트에서 여러가지 이미지들을 .. 이전 1 2 3 다음
