문미새 개발일지

결제 페이지에서 배송지 변경을 위해 팝업창이 띄워져 있는 동안 기존 페이지의 기능을 막아달라는 요청을 받아 해당 기능을 구현했다.import { useLocation, useNavigate } from "react-router-dom";import AboutHeader from "../components/common/aboutHeader";import MainFooter from "../components/common/mainFooter";import BuyBtn from "../components/mart/buyBtn";import styled from "styled-components";import CertItem from "../components/mart/certItem";import { useE..

주말 동안 테스팅을 하며 버그난 부분이나 부족한 페이지들을 추가했다. 이제 기획한 부분은 다 끝났고 요청받은 페이지 수정 부분과 보안 문제만 남은 것 같다. 재희님이 보내주는 루틴 데이터에 속성 타입을 추가하여 각각 루틴의 속성이 뭐가 있는지 확인할 수 있게 수정했다. 기존에 있던 attr_key값을 없애고 객체 안에 attr_skin_relation 배열을 담아 보내줬다. 근데 이 과정에서 데이터의 구조가 바뀌었기 때문에 인터페이스의 구조를 수정해야 했다. 그리고 attr_key를 가져와 data.js에 있는 배열에서 해당 key와 동일한 인덱스의 텍스트를 가져와 화면에 출력해줬다.그에 맞게 상세 루틴도 데이터가 수정되어 인터페이스를 재수정하고 로직을 변경했다. 전체 루틴엔 속성값만 들어있으나  상세 ..

다른 필터들은 끝났고 제품 필터와 루틴 필터만 남았다. 제품 필터는 기존에 모아놨던 카테고리들을 없애고 유저의 회원가입 시의 데이터에 맞게 수정했다. 하지만 현재 서버에서 받아오는 데이터에는 기본적으로 하나의 카테고리만 들어가기 때문에 현재 작동 가능한건 중간 부분의 피부별 카테고리만 동작한다.  const filterRankingData = displayItems.filter((item) => { return subFilter ? item.category === subFilter : true; });제품 필터의 경우 현재 category의 부분이 배열이 아닌 한 가지이기 때문에, 카테고리 값이 subFilter로 가져온 value값과 동일하면 true값을 반환하며 해당 값에 맞는 제품들만 필터..

결제 페이지의 데이터가 더미로 되어있어 데이터를 수정하고 결제 성공/실패시 이동될 페이지를 간단히 구현했다.각 부분의 데이터를 가져오기 위해 axios를 중첩으로 써 데이터들을 끌어 모았다. const paymentData: PaymentData = { pg: "uplus", // PG사 pay_method: "card", // 결제수단 merchant_uid: `mid_${new Date().getTime()}`, // 주문 고유 ID amount: totalPrice, // 결제 금액 name: `${cartList[0].item.item_name}${ cartList.length > 1 ? ` 외 ${cartList.length - 1}..

이제 처음에 기획한 부분과 이 후 필요한 기획한 부분을 거의다 구현한 것 같다. 백 쪽은 남은 부분이 거의 없어 다른 학습을 하고 있고 프론트 쪽은 기능먼저 구현하느라 UI들이 망가져있기 때문에 남은 기능 및 UI를 구현 중이다. 특별한 버그가 있지 않으면 목요일정도에 끝낼 생각을 하고 있어서 그 때까진 빡세게 해야겠다.주말부터 작업한게 많은데, 메인기능 위주로 작성하려고 한다. 이번주는 정글 때보다 열심히 한 것 같은데 좀 더 성장했기를.. 루틴과 제품 페이지에 리뷰 기능을 구현했다. 리뷰는 하단에 있으며 리뷰를 쓰려면 로그인을 해야하고 로그인이 안되어있으면 아예 리뷰 작성 칸이 보이지 않는다.리뷰는 별점과 리뷰 내용을 입력할 수 있으며 리뷰 작성 버튼을 누르면 하단에 리뷰가 렌더링된다.별점은 드래그로..

오랜만에 정글 멤버 중 전주에 사는 갱민이와 성주형을 만났다. 둘 다 전혀 변한게 없어 오히려 편안재희님의 데이터 추가로 아이템에 브랜드와 용량 데이터를 추가하여 해당 데이터도 화면에 뿌려줬다. 그리고 그동안 루틴 추가를 할 때 제품을 item_key로 하여 제대로 작동이 되는지만 확인했으나 이번에 제품 검색을 구현하여 제대로 된 루틴 추가 기능을 구현했다.이 부분을 구현하면서 너무 많은 시간이 걸렸는데 간단한 방법을 늦게 알게 되어 너무 빙빙 꼬아서 짜느라 시간 소모가 컸다.현재 제품을 작성하는 입력칸을 item_key로 작성하던걸 item_name으로 변경하게 되며 해당 값의 타입이 맞지않아 발생했고입력칸엔 제품 이름이 나오게 하되 나중에 api로 데이터를 보낼땐 item_key를 보내야 한다는 것이..

주말과 추석을 쭉 쉬고 블로그 쓰려니까 너무 힘들다. 다시 열심히 해야될듯..프로젝트를 슬슬 마무리를 지으려고 해서 추석 때 틈틈히 작업을 좀 해두었고  오늘부터 다시 재희님과 작업을 병행하며 데이터를 연동했다.먼저 휴일에 메인페이지 하단의 배너 슬라이드 부분을 구현했다.import { useEffect, useState } from "react";import styled from "styled-components";import ad1 from "../../../img/adBanner/1.jpg";import ad2 from "../../../img/adBanner/2.jpg";import ad3 from "../../../img/adBanner/3.jpg";import ad4 from "../../....

오늘 백엔드를 맡은 재희님과 api연동 및 기획 변경이나 추가할 점에 대해 회의했다.본인은 이번 회의로 각자 테스팅 방식이나 백엔드에서 서버를 띄워서 프론트도 테스팅이 가능하게 할 수 있냐 물어보려 했었는데, 전날 밤을 꼴딱 새서 디비랑 클라우드로 띄워 서버가 켜있는 동안 프론트도 테스팅이 가능하게 구현해놓았더라 역시 킹갓재희덕분에 오늘 회의가 짧을까 싶었는데 의외의 에러들 때문에 회의시간을 꽉꽉 채워버렸다 일단 백과 프론트가 처음에 기획을 할 때 전달받을 데이터가 어떤 값이 있는지, 어떻게 전달되는지 미리 결정하고 그대로 했었어야 했는데 기획할 때 이 부분이 진짜 어려운 것 같다.백은 백대로 erd를 구성하고 디비 설계를 하려면 초반 기획이 확실하게 정해져야 했고 프론트는 정해진 데이터 값을 토대로 코..