20241025(금) ▶️ 개인프로젝트 메인페이지 만들기

 

20241025(금) - TIL

메인페이지의 레이아웃을 고민하고, 여러 레퍼런스를 참고하면서 만들다보니 시간이 많이 소요되었다🥲

디자인이 있고 없고 차이가 이렇게 컸고, 여기저기 디자인을 먼저 입혀보고 몇번이나 갈아엎었는지 모르겠다.ㅜㅜ

테일윈드로 러닝커브 이슈가 있어서 레이아웃 잡는데 더 오래걸린 것 같다. 

그래도 계속 하다보니 이제는 테일윈드 Docs 안찾아보고 바로바로 적용할 수 있게 되었다✨

종종 뭐였더라...?가 나오긴 하지만 계속 반복하다보면 익숙해질 것 같다!

그래도 메인페이지 반응형까지는 완성했고, 데이터만 불러오면 되도록 만들어놨다.

 

메인페이지를 만들면서 먼저 퍼블리싱을 전체 다 해놓고 개발을 입힐지, 

아니면 개발을 입히면서 할지에 대한 고민을 했었는데

 

결국 기능 개발이 우선이긴 하지만

일단 완성하고나서 이력서를 돌릴게 아니라 만들면서 이력서를 넣을 예정으로 잡았어서

레이아웃을 먼저 쭉 만들고 기능개발을 해야겠다고 생각했다.

일단 기능개발도 안되어있는데 퍼블리싱도 안되어있으면

여기에서는 어떻게 기능을 추가할 예정이고 여기는 무엇이 들어간다라는

면접때 설명할 수 없기 때문(...)

 

그래서 결국은 기능 개발을 하기 전에 먼저 레이아웃을 잡아야겠다는 생각을 했다..!

레이아웃만 잡는다고 해서 CSS만 입히는게 아닌것을 깨달았기 때문이다.

 

 

 

 

메인페이지 레이아웃은 이렇게 꾸며보았다.

 

 

 

 

 

 

 

자유게시판은 더미데이터를 2개만 넣었는데, 완성하면 총 6개로 불러올 예정이다..!

 

 

 

 

 

 

 

 

 

앨범 섹션 같은 경우에는 swiper 슬라이드를 사용해서 만들어 보았다.

여기 부분에서 시간이 많이 소요된 것 같다. 🥲 

메인페이지에서 슬라이드로 보여주는 요소가 많아서

같은 슬라이드를 반복하니 메인페이지만의 디자인적 요소가 너무 진부해 보였기 때문에(...) 여기서 많이 디자인적으로 갈아 엎은 것 같다.

앨범 리스트들을 슬라이드 형식으로 보게 만들었고, db에 데이터를 저장해서 보여줄 예정이다.

 

 

 

 

 

 

 

shop부분에는 shadcnUI 캐러셀을 적용해여 만들었다.

여기는 pc버전에서는 4개를 보여주고, 모바일로 넘어가면 슬라이드 형식으로 바뀐다!

여기서는 인기순으로 4개만 보여줄 예정..!

 

 

그래서 메인페이지까지는 여차저차 완성했고, 이제 회원가입이랑 로그인 만들러 가야겠다😊