[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 핫딜 페이지(2)

🔥 핫딜 페이지(2) 여기서는 제품 상세 페이지와 결제 페이지 장바구니 기능등을 소개 할 예정이다. 모든 모달 뒷 배경은 흐리게 만들어 사용자가 모달 창에 집중할 수 있게 만들었다. 1️⃣제품 상세 모달 제품 상세를 모달로 띄우는데는 어려움이 없었다. 핫딜 페이지에서 상품을 클릭하면 props로 상품의 id값을 넘겨줘서 그 상품에 대한 정보를 axios 호출을 해주면 되었기 때문이다. 또한 UI상으로 제품 상세 모달이 나왔는데 뒷 배경에 스크롤이 있으면 이상하다고 생각하여 스크롤을 막고 없애버렸다. // shoppingDetail 모달 생기면 뒷 배경 스크롤 막는 함수 useEffect(() => { if (isOpenModal === true) { document.body.style.cssText = ..

• format_list_bulleted 프로젝트
• · 2023. 12. 12.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 핫딜 페이지(1)

🔥 핫딜 페이지 핫딜 페이지에는 제품 상세 모달, 장바구니 모달, 결제 모달까지 한 페이지 안에서 결제까지 할 수 있도록 만들었다. 초반 기획을 했을 때 최소한으로 페이지를 만들자고 해서 대부분을 모달로 만들었다. (그러지 말았어야 했다.) 1️⃣ 수정 전 핫딜 페이지 처음에 기획할 때는 원래 이런 페이지가 아니였다. 이전까지의 프로젝트와 비슷한 느낌의 쇼핑몰을 만들려고 했으나 막상 다 만들고 나니 너무 허전했다. 기능도 이전 프로젝트와 다를게 없었고 차별화 되는 느낌이 없었다. 그리고 기간도 아직 많이 남아 있어서 삭제하고 다시 만들었다. (이전 파일은 배포 과정에서 삭제하는 바람에 없어졌다..) 2️⃣ 수정 후 핫딜 페이지 사용한 라이브러리: react-daum-postcode(우편번호 검색), Sw..

• format_list_bulleted 프로젝트
• · 2023. 12. 12.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 회고록(1)

배포 링크 : https://doongg.site/ 깃 허브 : https://github.com/orgs/DoongG/repositories 🐣 DoongG(둥지) 드디어 부트캠프의 마지막 프로젝트가 시작되었다. 기간이 긴 만큼 기획과 개발까지 차근차근 시작했다. 팀원은 자유였으며 나는 원래 친한 5명의 크루들과 함께 프로젝트를 시작했다. 총 5명이었으며 프론트 3명 백엔드 2명으로 이루었다. 주제를 정해야 했다. 팀원 모두의 흥미를 이끌 수 있는 주제를 생각해봤다. 우리 팀원들 과반 수 이상이 혼자 산 경험이 있었다. 그래서 자취생들을 위한 플랫폼을 만들기로 했다. 플랫폼에 어떤 것을 넣을 까 생각을 해봤는데 자취생들은 일반적으로 돈이 부족하기 때문에 '핫딜 상품'만 모아둔 쇼핑 페이지, 자취생들끼리..

• format_list_bulleted 프로젝트
• · 2023. 12. 11.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 회고록(feat. 최우수상)

이번 회고록은 내가 팀 적으로 성장한 점과 아쉬웠던 점에 대해 써볼려고 한다. 내가 혼자 기능 구현 하며 성장한 것과 아쉬웠던 점은 아래 블로그를 참고 하면 좋을 것 같다.😊 2023.07.27 - [포스코x코딩온] - [포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 프론트엔드(1) [포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 프론트엔드(1) 1️⃣ 프로젝트 소개 우리팀은 '국내 주류'와 관련된 정보를 소개해주는 서비스를 계획했다. 크게 주요 페이지는 4개로 나눴고 부가 서비스 페이지는 5개로 만들었다. 주요 페이지 - 메인페이지, jin99.tistory.com 2023.07.29 - [포스코x코딩온] - [포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 프론트엔드(2..

• format_list_bulleted 프로젝트
• · 2023. 7. 30.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 프론트엔드(2)

1️⃣ 두번째 페이지 메인페이지를 만들고 또 다른 페이지를 각각 맡아서 제작하기로 했다. 나는 그중에서 페스티벌 페이지를 담당했고 디자인을 먼저 고려했다. 지역을 선택할 수 있는 필터를 만들고 그 아래에는 슬라이드를 사용해서 현재 진행중인 페스티벌을 보여줄 계획했다. 특히 이번 슬라이드는 스와이퍼를 사용해서 만들었다. 처음써보는 라이브러리라서 커스텀이 어디까지가능하고 사용 방법이 어떤지 몰랐기 때문에 기대됬다. 2️⃣ 스와이퍼 사용 방법 스와이퍼를 불러오는 방법은 2가지가 있다. https://swiperjs.com/get-started Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slide..

• format_list_bulleted 프로젝트
• · 2023. 7. 29.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 프론트엔드(1)

1️⃣ 프로젝트 소개 우리팀은 '국내 주류'와 관련된 정보를 소개해주는 서비스를 계획했다. 크게 주요 페이지는 4개로 나눴고 부가 서비스 페이지는 5개로 만들었다. 주요 페이지 - 메인페이지, 지역별로 보기 페이지, 주류 MBTI 페이지, 주류 페스티벌 페이지 부가 페이지 - 로그인 및 회원가입 페이지, 상품후기 페이지, 공지사항 페이지, 1:1문의 페이지, FAQ 페이지 이렇게 나눈 페이지를 각각 나눠서 맡고 메인페이지만 같이 만들었다. 메인페이지를 만들때도 서로 코드가 겹치지 않게 section별로 나눠서 각각 만들었다. 나는 이중에서 Main페이지의 section-2를 만들었고 주류 페스티벌 페이지, 상품후기 페이지, 1:1 문의 페이지를 만들었다. 뒤로 갈 수록 페이지의 퀄리티가 떨어진다...😂(..

• format_list_bulleted 프로젝트
• · 2023. 7. 27.
• textsms