[React-BookStore] 구현하고자 하는 기능 및 오류 수정 과정 정리

 

1. 로그인 / 회원가입 /로그아웃

    - 이메일/비밀번호 ✔

    - 구글 ✔

    - 깃허브 ✔ 

 

2. 검색창 실시간 조회 ✔

   - 검색어를 입력할 경우 알라딘 API 상품 조회를 통해서 실시간으로 오른쪽에 검색결과가 출력 ✔ 

   - 원래는 알라딘에서 권장하는 ISBN13의 값으로 검색해서 불러왔는데, 상품이나 오래된 도서의 경우에는 해당 값이 

      부여되지 않아 출력되지않는 현상이 일어남.

   - 그래서 ISBN 값으로 가져오게끔 바꾸고 상세설명이 없는 상품의 경우 상세 설명 없음 이라 표시 

 

    - 실시간 조회되는 책의 이미지나 제목을 클릭하면 해당 책의 상세보기 ( 알라딘)  홈페이지로 이동해야하는데

      이동이 안됨. 해결 필요  ✔ (해결완료 -아래에 설명추가)

 

 

3. 검색 조회 및 정렬 ✔ 

   - 포괄적으로 검색하고 싶을 경우 키워드를 검색창에 입력하고 아이콘 클릭하면 검색 결과 표시함 ✔ 

   - 알라딘 API에서 제공하는 정렬 기능으로 정렬이 가능하다. ✔ 

 

 

 

   - 원하는 도서의 경우 관심 도서에 추가 가능( 추가 시 아이콘 붉게 변함 )

      1) 추가된 도서의 경우 DB에 저장됐다가, 새로 고침하거나 다시 로그인해도 초기화 되지 않도록 함 ✔ 

      2) 이미 저장되어있는 도서의 경우 한 번 더 클릭할 경우 관심 도서에서 삭제 가능  ✔   

 

   - 검색 조회되는 상품을 장바구니/ 구매하기/ 찜하기 등으로 추가할 수 있음   ✔  

       -> 찜하기와 동일하게, 장바구니도 이미 장바구니에 추가되어있으면 이미 추가되어있다는 창과 함께 confrim으로 장바구니 페이지로 이동하면 어떨까?    ✔  

       -> 처음 장바구니에 넣을 때는 수량 하나만 넣게하고, 이후 수량을 추가하고 싶으면 장바구니에서 수량을 추가하는걸로, 장바구니 db에 수량 항목을 추가한다. 그리고 장바구니에서 수량이 바뀌면 db를 업데이트해서 수량을 조절하는게 나을거같다.    ✔  

 

 

---

🔴 Search페이지 구현한 기능 

 

→ searchbar에서 검색한 결과를 표시하는 페이지이다.

→ searchbar에서 파라미터로 검색어를 받아 알라딘 api 검색 기능을 통해서 검색 결과를 받아와서 목록으로 표시했다. 

→ 결과 값은 api 에서 제공하는 정렬 옵션을 통해서 원하는 옵션으로 정렬이 가능하다.

→또한 출력결과를 15개 또는 25개로 설정이 가능하다. 

→검색 결과로 출력되는 리스트는 아래와 같이 디자인되어 있다. 

→책의 커버사진이나 제목을 클릭하면 알라딘의 도서 상세보기 페이지로 이동한다. 

 

→오른쪽의 하트 아이콘을 클릭하면 관심 도서에 추가가 가능하며, 클릭 후에는 색상이 바뀐다. 

이미 추가되어있을 경우에 다시 아이콘을 클릭하면 관심 도서에서 제거가 가능하다. 

 

→장바구니 버튼을 클릭하면 장바구니에 추가된다. 그리고 이미 장바구니에 추가되어있는 도서의 경우 아래의  confrim창 출력 후 장바구니 페이지로 이동한다. 

 

 

→구매하기 

현재는 장바구니에 있는 모든 값을 가져오게 결제하기 화면에서 구현했는데, 

cart에 orderReady라는 필드를 만들어서 관리하면 어떨까?

검색 결과에서 결제하기를 클릭했을 때 cart 에 orderReady를 true 를 준다. 

그리고 장바구니에만 넣었을 경우에는 false를 주고, 장바구니 페이지에서는 false의 값만 가져옴 

주문하기 클릭 시 장바구니의 데이터를 true로 바꿔준다. 

결제하기 화면에서는orderReady의 값이 ture인 데이터만 가져오면 될거같음

---

→검색 결과에서 구매하기 버튼을 클릭하면 위와 같은 confirm창이 발생하는데  여기서 확인을 클릭하면 

바로 결제하기 화면으로 이동한다. 수량 선택은 불가능하다. 단품만 가능. 

 

 

 

 

---

4. 장바구니(비회원은 접근 불가능)

   

 - 검색 결과에서 장바구니 클릭하면 db에 추가  ✔ 

 

 - 각 유저별 장바구니 db에서 값 가져와서 출력하기 ✔

 

 - 유저 별 장바구니에 있는 도서 가격 합계 산정하여 결제 여부 물어보기 ✔ 

 

-> 결제 페이지로 넘어가서 주문하기 누르면 주문 내역 마이페이지에서 볼 수 있도록 함   ✔ 

 

 - 만약 중복으로 여러 개의 랙이 책이 들어가 있으면 이거는 개수 산정 가능한지 물어봐야함( 처음부터 개수를 정해서 넣던가?)   ✔ -> 처음부터 개수를 정해서 amount 항목으로 들어가고 장바구니에서 개수 조절 가능하도록 업데이트함 

 

 - 마이페이지와 동일하게  "새로고침" 할 경우 유저의 데이터를 가져오지 못하는 경우 발생함 (해결완료) ✔

---

🔴 Cart 페이지 구현한 기능 

 

→  장바구니에 추가된 상품들이 출력되는 페이지이다. 

 

→  장바구니에서 상품의 수량을 선택할 수 있다. 그리고 그 수량에 맞게 총 상품금액이 계산된다. 

→ x 아이콘을 눌러서 장바구니에서 삭제가 가능하다. 

→  만약에 장바구니에 아무런 도서가 없을 경우에 주문하기 버튼을 클릭하면  아래와 같은 경고창이 발생 후 리턴한다.

 

 

 

 

→ 상품이 있을 경우 다음 단계인 결제로 넘어간다.

 

---

5. 결제하기(비회원은 접근 불가능)

🔴 PaymentPage 구현한 기능 

→ 장바구니에 있던 상품들이 결제하기로 넘어온다. 해당 페이지에서는 수량 선택과 삭제가 불가능하다.

→ 주문자 정보와 배송지 정보를 입력해야하며,  * 표시가 있는 란은 필수적으로 입력해야 결제가 가능하다.

 

 

 

→ 우편번호 검색 기능의 경우 다음 우편번호 찾기 api 를 사용하였다.

→ 우편번호 검색 버튼을 클릭하면 아래와 같이 팝업창이 열리고 여기서 본인의 주소를 찾아서 클릭하면

아래의 예시처럼 자동으로 우편번호와 주소가 입력이된다.

 

 

 

 

→ 필수 항목을 입력한 이후 결제하기를 클릭하면 결제 진행 관련 confirm 창이 뜨게되고, 확인 버튼을 클릭하면 결제가 완료된다.

 

 

 

→  결제완료 후 출력되는 화면. 주문 상세 확인으로 이동이 가능하다. 

 

 

 

 

---

6.마이페이지 💭 (비회원은 접근 불가능)

  - 인증되지 않은 유저의 경우 ProtectedRoute를 통해서 로그인 가능한 서비스라는 경고창 발생 후 로그인 페이지로 이동함 ✔ 

-> 마이페이지에서 새로고침을 할 경우에 다시 로그인하라는 메세지와 함께 로그인 페이지로 이동한다 . 해결 필요 ✔ (해결완료)

 

  - 내가 찜한 도서( 관심 도서 ) 의 목록을 확인 할 수 있는 페이지 ✔ 

      검색 리스트에서 관심 추가 버튼을 누르면 firestore의 DB에 해당 도서의 아이디 값만 들어가도 마이페이지에서 가져와서 나열 가능 할거 같음 ..

     -> 12/13 관심 추가 버튼 클릭 시 필요한 데이터는 DB에 저장해서 마이페이지에서는 fetch 없이 db만으로 목록 생성예       정 ✔ 

 

- 마이페이지에서 관심 도서의 경우 장바구니로 이동 가능하게 함 -> 이동 후 관심 도서에서는 삭제 ✔ 

 

 

---

🔴 mypage 구현한 기능 

 

→ 현재 마이페이지에 구성되어 있는 메뉴는 총 2개이다. 기본 값은 관심 도서로 되어있다. 

→ <관심 도서> 의 경우 search 페이지에서 하트 아이콘으로 관심 도서에 추가한 도서들의 목록이 출력되는 페이지이다. 

→  x아이콘을 사용해 관심 도서에서 삭제가 가능하며, 장바구니를 클릭하여 장바구니에도 추가가 가능하다. 더불어 장바구니에 추가 될 경우 관심도서에서는 삭제된다. 

 

 

→ <주문/결제 목록>에서는 결제 성공한 주문 목록들이 출력되는 페이지이다. 

 

→ 주문번호/ 주문일자 등 주문에 관련된 정보들을 알 수 있다. 

 

 

---

 

6. 메인페이지

- 슬라이드 배너  ✔ 

- 베스트셀러 등 크기 수정하고 한 번 정리하기   ✔ 

 

 

 

---

 

구글 인증 시 해당 오류 발생 

 

---

 

깃허브 인증 시 아래의 오류 발생 (해결 완료 )

FirebaseError: Firebase: Error (auth/account-exists-with-different-credential).

 

이메일 주소당 계정 1개를 사용을 설정한 경우 발생한 에러

 

해결방법

인증-> 세팅에서 여러 계정만들기로 변경하니까 로그인 됨

 

 

---

실시간 검색창 오류( 수정 완료)

 

 

실시간 검색을 하고 원하는 도서를 클릭할 경우 해당 상세보기 링크로 이동하게 코드를 짰는데 

이동하지 않음

 

검색 결과에서는 이동이 됨

 

 

블러 이벤트 일어날 때 해당 페이지로 넘어가게 해보기;;;;

 

수정했다!!!

 

  const [link, setLink] = useState(""); //클릭 시 이동할 링크

 

  //만약 검색창에 focus가 잡히지 않으면 사라짐

  const handleFocus = (itemId, link) => {

    if (searchValue.trim() !== "") {

      setIsbnError("");

      setShowResults(true);

      fetchBookDetails(itemId);

      setOnFocus(itemId);

      setLink(link);

    }

  };

  const handleBlur = () => {

    setShowResults(false);

    if (link === "") {

      return;

    }

    location.href = link;

  };

 

   {resultBooks.map((book) => (

                  <a key={book.itemId} href={book.link}>

                    <li

                      onMouseEnter={() => handleFocus(book.isbn, book.link)}

                      onMouseLeave={() => setLink("")}

                    >

                      {book.title.trim().slice(0, 30)}

                    </li>

                  </a>

                ))}

 

 

onMosueEnter 이벤트로 포커스가 들어오면 책의 isbn번호를 전달하게끔 했었는데

 

거기에 book.link도 추가했다. 그래서 handleFocus 함수에 setlink로 해당 책의 link를 저장하도록 했음. 

 

처음에는 바로  handleBlur가 일어날때 해당 링크로 이동하게 했는데, 

 

그렇게 하니 마지막으로 포커스를 했던 책의 링크로 다른 화면의 부분을 클릭해도 이동하게 됨

 

그래서 onMouseLeave 이벤트를 사용해서 만약에 마우스가 li태그를 떠나게되면 link의 값을 공백으로 세팅함

 

그 이후 handleBlur함수에서 if문으로 만약에 링크가 공백이면 리턴하게끔 조건문을 추가하고 

 

공백이 아니면 location.href 로 해당 링크로 이동하게 하니 해결됨 

 

 

 

---

https://euni8917.tistory.com/321

 

[React-BookStore] 마이페이지 - 관심 도서

https://euni8917.tistory.com/323

[React-BookStore] 장바구니

마이페이지와 장바구니 페이지와 같이 인증된 로그인 유저의 경우 

새로고침하면 가져오지 못하는 현상이 생겨서 

코드 수정이 필요함 

 

app.jsx에서 유저의 정보가 준비되면 모든 코드 실행하도록 수정이 필요함 

 

 

(수정  완료)

 

원래는 컨텍스트로 전역으로 유저의 정보와 인증 확인을 하는게 맞다.

 

하지만 이번 프로젝트에는 아래의 방법으로 해결했음. 

 

function App() {

  const [isLoading, setIsLoading] = useState(true);

  const init = async () => {

    // 최초 인증 상태가 완료될 때 실행되는 Promise를 return

    // Firebase가 쿠키와 토큰을 읽고 백엔드와 소통해서 로그인 여부를 확인하는 동안 기다림

    await auth.authStateReady();

    setIsLoading(false);

  };

  useEffect(() => {

    init();

  }, []);

  return <>{isLoading ? <Spinner /> : <RouterProvider router={router} />}</>;

}

export default App;

 

파이어 스토어에서 로그인 여부를 확인할 때 까지 기다렸다가, 모든 페이지를 실행하도록 했음. 

그래서 그 시간동안에는 스피너를 활용해서 로딩중을 표시했음. 

 

이렇게 수정하니 새로고침을 해도 로그인 유저의 정보를 확인 한 후 모든 동작이 작동해서 

 

마이페이지와 장바구니의 정보도 잘 불러와지고, 

 

로그인이 필요하다고 로그인 창으로 튕기는 일도 사라짐 .. 

 

 

 

참고)

https://velog.io/@yeguu037/Firebase-Authentication-%EA%B5%AC%ED%98%84-%EA%B3%BC%EC%A0%95-%EC%A0%95%EB%A6%AC