목적 이미 등록한 회원이 등록연장을 할 때에 온라인으로 편리하게 결제할 수 있게 함 서비스 로직 회원이 로그인한 상태에서 결제 페이지로 이동 원하는 수업을 선택하고 해당 가격 결제 진행 관리자에게 해당 회원의 결제 정보가 전달됨 관리자가 회원의 잔여수업을 업데이트함 주요기능 결제 결제 수업 선택 시 자동으로 금액 계산 결제방법 선택(카드, 무통장입금...) 쿠폰 / 포인트 쿠폰 적용 및 자신이 가지고 있는 쿠폰 목록 확인 쿠폰은 두 가지 유형(퍼센티지 할인, 포인트 지급)이 있음 보유 포인트 확인 및 결제 시 포인트 원하는만큼 사용 가능

🚀 Today I Studied Projects: danmi lauout: footer 추가 timetable: frame deploy ⚡️ Today I Learned 시간표 외부라이브러리 schad/ui를 사용해본 후에 외부라이브러리 사용에 대한 자신감이 폭발해버림 schad/ui에 있는 calendar로는 원하는 기능 구현이 어려워 적절한 외부 라이브러리를 직접 찾아 적용하기로 시도 얼핏 눈에 보이는 것들은 대부분 부분 유료화가 많이 있었음. 첫 번째 찾은 외부라이브러리는 예제를 다운받아 npm 설치 후 component를 구성해서 실행해본 결과, license가 없으면 완전 깨져서 나옴 다시 찾은 라이브러리로 frame은 만들었으나, 문제가 있음 (fullcalendar) license를 요구하는..

🚀 Today I Studied Projects: Danmi 문서작업 로그인: frame, 유효성검사 완료 ⚡️ Today I Learned Projects: Danmi 문서작업 ==> https://terryehlee.tistory.com/232 next와 nest 연동 .svg file metadata 오늘의 고민 BE 개발자가 외부형태의 api를 만들어주길 기대하였으나, local 형식의 api를 줌 BE 개발자에게 회부형태 api 변경요청 ==> 좀 더 현업에 가까움 BE 코드를 next.js에 연동 ==> 개인 프로젝트에 모르는 코드가 늘어남... 당장의 서버와 연동시켜 로그인 및 회원추가 기능을 완성하기 전에 먼저 각 페이지별 frame 만들기 진행하기로 함 SEO 개선에 metadata는 중..

서비스 회원 관리 및 회원들에게 자신의 다음 수업 일정, 수업이력, 잔여수업 등의 정보제공 서비스 서비스링크: (배포예정) 서비스 소스코드: https://github.com/TerryEHLee/Danmi figma: https://www.figma.com/file/aDv7EUWO6WMo90nCJvC3ri/Danmi?type=whiteboard&node-id=0-1&t=NRGgk7CbHT5FkjHh-0 개발일정: 24.01.25 ~ 진행중(4월에 정식 시작 예정) 개발인원: FE 1인, BE 1인 (2인) 기술스택: next.js, typescript, Nest.js, figma MVP 스팩 로그인 편리한 로그인을 위해 전화번호 4자리가 비밀번호 로그인 시, 회원과 관리자 강사에게 보여지는 화면이 다름 ..

개요: 'form'을 쉽게 만드는데 유용한 라이브러리 사용 라이브러리 설치 npm install react-hook-form zod와 결합하여 shema에 저장해둔 유효성 검사를 불러와 Form을 만들어 랜더링부에 도입 import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import * as z from 'zod'; const schema = z.object({ name: z.string().min(1, { message: 'Required' }), age: z.number().min(10), }); const ..

개요 TS를 위한 data schema 및 유효성 검사 라이브러리 BE와 FE 사이에서 데이터를 검증하고 정의하는데 사용되기도 함 TS 타입을 사용하여 데이터 구조를 정의하고, Zod schema를 통해 데이터 유효성 검사 입력값의 유효성을 확인하고 에러 메시지 제공 사용 src/validator 디렉토리에 .ts 파일생성 라이브러리 import 후에, 에러메시지 밑 데이터 유효 형식 작성import { z } from "zod"; const passwordRegex = /^(?=.[a-zA-Z])(?=.*\d)(?=.[@$!%?&])[A-Za-z\d@$!%?&]{8,}$/; const phoneRegex = /^010\d{8}$/; export const registerSchema = z.object(..