반응형 Project/final Project/final 2023. 10. 5. [10.4(수) 북스탁 프로젝트] 메인페이지 | 실시간 인기 도서 컴포넌트 css수정 및 소셜로그인(카카오, 네이버) 버튼 교체하기~ 원래 실시간 인기도서 컴포넌트 저 도서표지위에 떠 있는 숫자ㅠㅠㅠ 인기순위를 저렇게 꼭 넣고 싶었다. 그런데 슬라이더로 바꾼 후 ,, 수정 중 실시간 인기도서 컴포넌트 따흐흑,, 넘우 못생겨졌다,,,, absolute로 넣으려니 레이아웃이 깨져서 사진위에 순위를 구현 할 수 없었다.... 최종(?) 실시간 인기도서 컴포넌트 뭔가 아쉽단 말이지... 그래도 깔꼼해졌다는 것에 감격ㅠㅠ 사진위에 순위 올리고 싶었는데ㅠㅠ 이렇게 메인페이지 숙원사업 끝냈다~!~! 소셜 로그인버튼은 정해진 규정의 이미지만을 사용해야한다는 것을 강사님께서 알려주셔서 전격 교체에 나섰다! 로그인페이지와 ! 회원가입페이지의 버튼을 이미지로 교체했다~! 이제 다음에는 도서등록페이지 공사에 들어갈 것이다~! Project/final 2023. 10. 5. [10.3(화) 북스탁 프로젝트] 메인페이지 | slider슬라이더를 활용해서 새로올라온 도서보여주기 수정 전 새로 올라온 도서 컴포넌트 드디어 애써 외면하고있던 메인페이지 대공사를 시작했다... 원래 state로 버튼형식으로 책을 보여줬었다. 근데 다른 도서판매사이트들을 레퍼런스한 결과 슬라이더형식이 많은 것을 발견했다. 그래서 기존코드를 싹다 버리고 슬라이더로 교체하는 작업에 들어갔다. !! const settings = { dots: true, infinite: true, speed: 500, slidesToShow: bookData.length > 4 ? 4 : bookData.length, slidesToScroll: 2 }; 이렇게 옵션값들을 마음대로 설정하고 안에 코드를 작성해주면된다. 수정 후 새로 올라온 도서 컴포넌트 나는 이렇게 화면을 구성했다. 아래 점을 누르면 아이템이 2개씩 이동하.. Project/final 2023. 10. 5. [10.2(월) 북스탁 프로젝트] 메인페이지 | header헤더 공사하기 ~~ 몇 번을 수정하는건지ㅎㅎ 원래 헤더 이 느낌 나쁘지는 않았다. 디테일이 많이 떨어질뿐. (등록하기, 카테고리버튼 등) 그런데 여기서 점점 더 깔끔, 심플한걸 찾다보니 점점 이상해져갔다ㅠㅠ 1차 수정 헤더 (망,,) 하하,,, 이게 그 심플을 표방한 헤더다,,,ㅋㅋㅋㅋ ux는 어디다 팔아먹은 건지~~ 지금보니 정말 최악이다. ㅋㅋㅋㅋㅋㅋ 최종 헤더 (바뀔 수도 있지만) 짜잔!!! 결국 완전히 다시 갈아엎은 헤더의 최종본이다. 하 넘넘 맘에 든다ㅎㅎ 드디어 진짜 웹사이트 같아보인다! 호버를 아이콘마다 넣어서 보다 시각적으로 풍성해보이게 만들었다!! 다음에는 미루고 미뤘더 메인페이지 대공사를 할 예정이다 ㅠㅠㅠㅠㅠ ! 이번 북스탁프로젝트의 모든 css파일은 내가 만들고 작성한 것 같다... 아니다 진짜 내가 다했다. 나.... 디자이.. Project/final 2023. 9. 28. [9.27(수) 북스탁 프로젝트] 거래 페이지(auctionTrading) | 판매자 정보입력받기 이번엔 판매자 컴포넌트를 만들어봤다! 판매자에는 운송장 번호입력란과 계좌번호란이 있다! 구매자 컴포넌트와 통일성있는 css를 구현하고자 노력했다! 계좌번호는 아예 코드를 재사용했다! const [trackingNumber, setTrackingNumber] = useState(""); // 운송장 번호 const [isSaved, setIsSaved] = useState(false); // 송장번호 저장 여부 const [selectedBank, setSelectedBank] = useState('');//선택된 은행 저장 const [accountNumber, setAccountNumber] = useState('');//입력된 계좌번호 저장 이렇게 useState를 설정해준다!(운송장,계좌) cons.. Project/final 2023. 9. 27. [9.26(화) 북스탁 프로젝트] 거래 페이지(auctionTrading) | 구매자 정보입력받기 목업페이지에서 시작해 현재 가장 발전이 없는페이지는 '마이페이지'이다.... 그 이유는 우리 북스탁에서 가장 주요한 기능인 '거래'를 진행하는 페이지이기때문이다.(짜잘한 기능들 다 모이는 페이지) 프로젝트 후반에 접어들어 미루고 미뤘던 마이페이지를 손보려고한다. 수많은 컴포넌트로 이루어질 예정이라 나는 일단 거레중 -> 구매자, 판매자 정보입력부분을 구현하기로했다. 일단 이 마이페이지 첫화면도 대공사를 해야하는데ㅠㅠㅠㅠㅠ 일단 컴포넌트들을 완성하고 UI를 생각해봐야겠다,, 거래중을 누르면 토글 형식으로 구매자/판매자 버튼이 나오고 구매자는 구매자버튼을 눌러서 정보를 저장하고 판매자는 판매자버튼을 눌러서 정보를 저장한다.(판매자 부분은 내일 구현예정) return ( 구매자 {" "} 판매자 {isBuye.. Project/final 2023. 9. 27. [9.25(월) 북스탁 프로젝트] 챗봇(카카오채널API?채널톡?) | 관심(선호) 카테고리 입력받기 챗봇(카카오채널?채널톡?) 경매사이트 그리고 돈이 오고가는 서비스이다보니 고객센터는 무조건 필요하다고 생각했다. 보통 웹사이트내의 게시판형 고객센터는 답변도 느리고 접속하는 과정도 귀찮아서 카카오채널같이 모바일로 가능하게 기능을 추가하고 싶었다. 그래서! 카카오API로 우하단에 카카오채널로 바로갈 수 있는 버튼을 생성하려고 했는데! 이렇게까지 코드를 작성했는데 ..! 그냥 채널톡으로 하기로했다..ㅋㅋㅋ... 우리가 회원들을 관리하기도 편하고 회원들의 UX측면에도 좋다고 생각했다. 이렇게 우하단에 귀여운 버튼이 떠있다!> { // 이미 선택된 카테고리인지 확인 if (selectedCategories.includes(categoryName)) { // 이미 선택된 경우, 해당 카테고리 제거 setSelec.. Project/final 2023. 9. 25. [9.23(토) 북스탁 프로젝트] 3차 멘토링 피드백 정리 첫 번째 멘토님 일련의 과정 구현 성공 시작가격 비밀번호 중복 체크!! 비밀번호 제한사항 -> 만족될 때 마다 밑에 표시해주는것 구현하기 (비밀번호 는 정호가함) 주소 우편번호 등 -> 우편번호 API 사용하기 계좌번호 -> 은행 넣기!! 수집할 필요가 있는가? 도서 등록할 때 계좌정보 넣는게 편하지 않을까? 구경만 하는 회원을 생각하기 필요할 때만 수집하는 정책으로 가자 검색창 CSS 이상 수정하기 이미지가 너무 심하게 안나온다 -> 이건 문제 가끔 안나오는정도만 해야함 API 교체 반드시 쓰거나 여러 API를 조인해서 쓰기 데이터를 꼭 체울 수 있도록 하기! 글자 줄바꿈 가로폭 안맞거나 하는부분 반응형 (핸드폰으로 바로 사진찍고 입찰하기 편한가? 핸드폰용 페이지를 두거나) 두 번째 멘토님 채팅 스크롤.. Project/final 2023. 9. 25. [9.22(금) 북스탁 프로젝트] 도서 역경매 등록 | 경매 마감기한 설정 구현 매번 수정전 css캡처하는 걸 까먹는다ㅠㅠ 원래는 정말,, 인풋박스 나부랭이들만있었다 ! 들쑥날쑥 정말,, 이정도 수정하는데도 꽤,, 걸린다ㅠㅠ rem의 늪에 빠진 나 ~ㅎㅎ ㅠ.,ㅠ 각설하고! 여기서 내가 구현하고 싶은건! 크림사이트에서 레퍼런스하여 입찰 마감기한을 버튼으로 설정하는 것! useEffect(() => { const currentDate = new Date(); currentDate.setDate(currentDate.getDate() + selectedDays); const formattedDate = currentDate.toLocaleDateString("en-US", { year: "numeric", month: "2-digit", day: "2-digit", }); setProd.. Project/final 2023. 9. 22. [9.21(목) 북스탁 프로젝트] 실시간 인기도서 순위 보여주기 | MainRanking 첫 번째 페이지에서는 이전버튼이 비활성화! const [currentPage, setCurrentPage] = useState(1); currentPage는 현재 페이지번호를 저장하는 상태, 초기값을 1로 설정했다! const getPageData = (data, itemsPerPage, page) => { const startIndex = (page - 1) * itemsPerPage; const endIndex = startIndex + itemsPerPage; return data.slice(startIndex, endIndex); }; getPageData 함수는 데이터 배열(data), 페이지당 표시할 아이템 개수(itemsPerPage), 그리고 현재 페이지 번호(page)를 매개변수로 받는다.. Project/final 2023. 9. 21. [9.20(수) 북스탁 프로젝트] Category Modal 카테고리 모달창 구현 | 메인카테고리와 서브카테고리 보여주기 도서 역경매 사이트이다보니 도서 카테고리는 정말정말 중요하다고 생각한다! 일단 리디북스의 카테고리를 참고해서 데려왔다! import React, { useState } from 'react'; function CategoryList({ onCategoryClick }) { const [selectedCategory, setSelectedCategory] = useState(null); useState(null) 초기 상태 값을 null로 설정해서 처음에는 선택된 카테고리가 없게한다! selectedCategory는 현재 선택된 카테고리 정보를 저장하는 상태 변수고 setSelectedCategory는 selectedCategory에서 선택된 카테고리 정보를 업데이트할 수 있다! const categori.. Project/final 2023. 9. 20. [9.19(화) 북스탁 프로젝트] 로그인 접근제어(로그인한 사람만 마이페이지에 접근하기!) | RequireLogin.js const { isLoggedIn } = useAuth(); useAuth 훅을 사용해서 isLoggedIn 상태값을 가져오고 이걸로 현재 사용자가 로그인되어 있는지 확인할 수 있다! const navigate = useNavigate(); useNavigate 훅을 사용해서 페이지 간 이동을 처리할 수 있다! useEffect(() => { if (!isLoggedIn) { navigate('/signin'); alert('로그인이 필요합니다. 로그인 페이지로 이동합니다.'); } }, [isLoggedIn, navigate]); useEffect를 사용해서 컴포넌트가 렌더링될 때마다 로그인 여부를 체크한다! useEffect 내에서 if문을 사용해서 만약 현재 사용자가 로그인되어 있지 않은 경우에는 .. Project/final 2023. 9. 20. [9.18(월) 북스탁 프로젝트] 네이버 소셜로그인 구현 | 네이버 간편로그인API연결하기(node.js) 네이버 개발자에서 등록 먼저 하기 !! https://developers.naver.com/apps/#/myapps/YP_J3Qwb0dVPZzak0x8Q/overview 애플리케이션 - NAVER Developers developers.naver.com const axios = require('axios'); axios는 HTTP 요청을 보내기 위한 라이브러리다! const NAVER_OAUTH_TOKEN_API_URL = "https://nid.naver.com/oauth2.0/token"; const NAVER_USER_PROFILE_API_URL = "https://openapi.naver.com/v1/nid/me"; const NAVER_CLIENT_ID = ""; const NAVER_REDIR.. 이전 1 2 다음 반응형
![[10.4(수) 북스탁 프로젝트] 메인페이지 | 실시간 인기 도서 컴포넌트 css수정 및 소셜로그인(카카오, 네이버) 버튼 교체하기~](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/yZ9ap/btswPW0wynX/OjQxNZbdtA2ZUuWy7VX0V1/img.png)
![[10.3(화) 북스탁 프로젝트] 메인페이지 | slider슬라이더를 활용해서 새로올라온 도서보여주기](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/bGzU3Z/btsxgWc0cXK/YqyDg2hTA9rxRRKJT2B5z0/img.png)
![[10.2(월) 북스탁 프로젝트] 메인페이지 | header헤더 공사하기 ~~ 몇 번을 수정하는건지ㅎㅎ](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/dux7rX/btsw0hb2v2F/bSkQKeSC3R6S50KIsksRf0/img.png)
![[9.27(수) 북스탁 프로젝트] 거래 페이지(auctionTrading) | 판매자 정보입력받기](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/cQryZX/btsv5iO1m9F/Z2Auxme7AL69BUgQNXzf4K/img.png)
![[9.26(화) 북스탁 프로젝트] 거래 페이지(auctionTrading) | 구매자 정보입력받기](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/owIwr/btsvMFTmUJv/ZwF54ZKASDY1812s0qNFL0/img.png)
![[9.25(월) 북스탁 프로젝트] 챗봇(카카오채널API?채널톡?) | 관심(선호) 카테고리 입력받기](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/dVSrny/btsvNP84dmX/2vELb1KV8V25P9lGXABmgK/img.png)
![[9.23(토) 북스탁 프로젝트] 3차 멘토링 피드백 정리](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/cKnBwl/btsvnbjYOz9/JgKpqu8VwigpBeUDiBUgxk/img.png)
![[9.22(금) 북스탁 프로젝트] 도서 역경매 등록 | 경매 마감기한 설정 구현](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/bX73xr/btsvaHcMavB/Gvm33eEmfCFBUVNg76ufr0/img.png)
![[9.21(목) 북스탁 프로젝트] 실시간 인기도서 순위 보여주기 | MainRanking](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/pl83A/btsu2bktJsC/PCUTPtjr8gyTyl2jvKXAj0/img.png)
![[9.20(수) 북스탁 프로젝트] Category Modal 카테고리 모달창 구현 | 메인카테고리와 서브카테고리 보여주기](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/m6atv/btsu8juKU1Y/B8WAvWvekShfcFHuajD25k/img.png)
![[9.19(화) 북스탁 프로젝트] 로그인 접근제어(로그인한 사람만 마이페이지에 접근하기!) | RequireLogin.js](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/yiXHC/btsuWYExwCM/lFKjWIgwgoAj2Amp2BpPak/img.png)
![[9.18(월) 북스탁 프로젝트] 네이버 소셜로그인 구현 | 네이버 간편로그인API연결하기(node.js)](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/Rp6Ua/btsuIyme89q/POiAiYSBZmXbPnoNsVAFy0/img.png)