그날의 공부기록

seokachu's Front-End Archive 🙂

✨ 기억보다 기록을/프로젝트

장바구니 기능을 완성하고 이제 결제페이지를 구현할 차례가 다가왔다. 😊결제페이지를 구현하다보면서 내가 제대로 된 설계를 안하고 진행했다보니 결제페이지를 구현할 때배송정보와 주문자 정보를 빼먹었다는 치명적인 실수를 했다는 것을 알게 되었다...결제페이지는 다시 배송지 먼저 받아오고 구현해야 해서 완벽하게 100% 구현한 내용은 아닌 내용...오늘은 일단 토스페이먼츠와 연결만 해두기로 했다. 토스페이먼츠 구현 내용은 나중에 적어보고, 약관동의 체크를 해야 결제페이지가 나오도록 구현해보았다.😊 결제약관 동의 구조메인 체크박스: "[필수] 주문 내역에 대한 필수 동의"하위 체크박스 2개를 한 번에 체크할 수 있는 상위 체크박스클릭하면 오른쪽에 있는 화살표가 회전하면서 하위 항목들이 나타남하위 체크박스 2개..

2024. 12. 2.

✨ 기억보다 기록을/프로젝트

구현을 마치고 보니 장바구니에서도 수량을 선택해서 업데이트 해주는 로직을 빼먹어서 수량도 조절할 수 있도록 구현해 보았다.먼저 기존에 수량 컴포넌트 UI를 분리시켜 주는 것 부터 시작했다😊    수량 조절 UI를 담당하는 공통 컴포넌트//QuantitySelector.tsxconst QuantitySelector = ({ className, quantity, increase, decrease,}: QuantitySelectorProps) => { return ( 수량 {quantity} = 5 ? "opacity-50 " : "hover:text-purple"}`} > ..

2024. 11. 29.

✨ 기억보다 기록을/프로젝트

checkbox를 클릭하면, item들을 전체 선택할 수 있도록 구현해 보았다.이미 장바구니에 담은 내용들은 전역상태인 Recoil로 쓰고 있기 때문에현재 전체 item내용을 불러오고, 체크한 내용의 배열의 id를 담는 리스트를 전역으로 추가했다.    전역상태 추가 stateexport const selectedItemState = atom({ key: "selectedItemsState", default: [],}); CartItem의 id타입의 배열을 저장하는 atom을 생성했다.      selected 컴포넌트//SelectionControl.tsxconst SelectionControl = () => { const id = useId(); const [cartItems, setCartI..

2024. 11. 28.

✨ 기억보다 기록을/프로젝트

장바구니를 구현하면서 데이터를 먼저 불러오기로 했다!이미 글로벌 스테이트로 저장해놔서, 불러오는 과정은 어렵지 않았다.    //CartList.tsxconst CartList = () => { const [cartItems] = useRecoilState(cartState); const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); return ( 장바구니 {mounted && cartItems.length > 0 ? ( {cartItems.map((item) => ( ..

2024. 11. 27.

✨ 기억보다 기록을/프로젝트

장바구니 버튼을 클릭할 때 로컬스토리지에 저장해서 비회원도 장바구니에 담을 수 있도록 구현해 보았다. 장바구니 담을 시 고려할 사항같은 상품 담을 시 최대 수량 5개로 제한, 더 담으려고 할때 toast 창으로 더이상 담을 수 없다고 알림창 띄워줌장바구니 아이콘에 총 수량 표시(header)  먼저 로컬스토리지에 담을 유틸리티 함수를 만든다.//utils/cartStorage.tsimport type { CartItem } from "@/types";export const cartStorage = { getCart: (): CartItem[] => { if (typeof window === "undefined") return []; const cart = localStorage.getItem..

2024. 11. 26.

✨ 기억보다 기록을/프로젝트

리뷰 탭에 있는 페이지네이션을 구현해 보려고 한다.내가 생각하는 리뷰는 5개 까지 불러오고, 5개 이상이면 페이지네이션으로 다음 페이지로 이동할 수 있게 구현해 보려고했다.이번에 TanStack Query에서 제공해주는 라이브러리로 적용해 보려고 한다😊    supabase 데이터 불러오기이전 코드import { supabase } from "@/lib/supabase/client";export const getGoodsReviews = async (goodsId: string) => { try { const { data, error } = await supabase .from("goods_reviews") .select( `*, user:user_id..

2024. 11. 25.

✨ 기억보다 기록을/프로젝트

상세보기 페이지 탭 메뉴들 작업을 진행했다.상세보기 페이지 같은 경우에는 관리자(판매자)가 직접 판매를 할 예정이면 관리자 페이지가 별도로 있고,그 데이터를 입력해야 했었는데 관리자 페이지가 별도로 없어서(...) supabase에서 데이터를 임의로 넣어 보았다.supabase에서 image는 json 형식으로 만들어서 첫번째, 두번째, 세번째…등등 순서대로 가져오고상세 설명도 json형식으로 첫번째 내용, 두번째 내용, 세번째 내용… 등을 순서대로 가져왔다!   상세보기 탭 페이지//상품 상세export const useShop = (id: string) => { return useQuery({ queryKey: ["shop", id], queryFn: () => getGoodsShopD..

2024. 11. 25.

✨ 기억보다 기록을/프로젝트

상세보기 페이지에 있는 탭 메뉴를 구현해 보려고 한다.탭 메뉴는 `상세보기`와 `리뷰` 탭 이렇게 두개가 있는데, 해당 버튼을 클릭하면 해당 내용이 보이도록 조건부 랜더링을 작성해 보았다.     //ProductDescription.tsxconst ProductDescription = ({ id }: ShopMenuProps) => { const [activeTab, setActiveTab] = useState( "description" ); return ( {activeTab === "description" ? ( ) : ( )} );};export default ProductDescription; 상세보기 ..

2024. 11. 22.

✨ 기억보다 기록을/프로젝트

굿즈샵 상세보기 페이지에서 가격 정보 데이터를 불러오는 작업을 하였다.할인율을 계산한 결과를 반영해서 사용자가 수량을 선택할 때 마다 카운팅을 해서 total(총 상품금액)을 보여줘야 하는 작업을 진행했다!    상품 상세보기 query//상품 상세export const useShop = (id: string) => { return useQuery({ queryKey: ["shop", id], queryFn: () => getGoodsShopDetail(id), });}; 현재 상세보기 페이지의 id를 매개변수로 받아온다.       굿즈샵 상세보기 - Info페이지//ProductInfo.tsxconst ProductInfo = ({ id }: ShopMenuProps) => { con..

2024. 11. 21.

✨ 기억보다 기록을/프로젝트

sort 정렬을 다 해놓고 보니, `가격 낮은 순` 정렬과 `가격 높은 순` 정렬이 할인 안한 가격으로 나오고 있었다.가격과 할인 값을 받아서 계산한 것은 클라이언트에서 처리해주고 있기 때문에할인을 받은 최종 결과도 클라이언트에서 처리해줘야 했던 것이었다.열심히 구현해봤는데 다시 처음부터 시작하게 되었다 🥲   할인가격 계산 포스팅 : https://seokachu.tistory.com/281정렬 포스팅 : https://seokachu.tistory.com/284   기존 코드//데이터 불러와서 정렬하기export const getGoodsShop = async (sortBy: SortOptionList) => { try { const sortOption = SORT_OPTIONS[sortBy..

2024. 11. 20.