오늘 한 일
- 알고리즘 문제 풀이
- 디지털콘텐츠기획 ppt 2/3 완성
- IT특강 프로젝트 레이아웃 구상
- 카공실록 로그인 페이지 구현(lottie 적용)
- 카공실록 react hook form 적용
-
카공실록 오후 11시 회의
카공실록 로그인 페이지 구현
카카오톡 로그인으로 진행하기 때문에 별다른 input은 없었다. 대신 이번에 lottie를 처음 적용해보았다.
react에 lottie를 적용하기 위해서는 라이브러리를 사용해야 한다.
react-lottie
react-lottie는 lottie를 react에서 사용할 수 있도록 도와주는 라이브러리이다.
근데 문제가 몇가지 있었다.
-
Module not found: Can't resolve 'prop-types'
그래서prop-types를 설치하니 해결은 됐다. -
Warning: componentWillUpdate has been renamed, and is not recommended for use.
이 라이브러리 자체의 문제인 것 같아 다른 라이브러리를 사용하기로 했다.
lottie-react
lottie-react도 react-lottie와 같은 기능을 하는 라이브러리이다.
이 라이브러리를 쓰니 더이상 에러가 나지 않았다.
'use client'
import * as animationData from '../../../../public/assets/lotties/prography_motion_intro.json'
import KakaoButton from '@/components/auth/KakaoButton'
import Lottie from 'lottie-react'
import Link from 'next/link'
export default function Page() {
const handleClick = () => {
// TODO: 카카오 로그인 처리
}
return (
<div className="flex h-screen flex-col items-center justify-center px-6">
<Lottie animationData={animationData} loop={true} className="h-52 flex-shrink-0" />
<KakaoButton className="mb-4 mt-5" onClick={handleClick} />
<Link
href="/"
className="cursor-pointer text-[14px] font-normal leading-6 text-bk60 underline underline-offset-2"
>
로그인 없이 둘러보기
</Link>
</div>
)
}
IT특강 프로젝트
vite + React + tailwindcss + typescript로 진행하기로 했다.
만드려는 서비스는 과거 한 시점에서 어떤 주식을 샀으면 얼마나 벌었을지를 계산해주는 서비스이다.
아직 디자인을 제대로 생각해보지 않아서 어떤 느낌으로 만들지는 모르겠지만 들어가야하는 것들은 다음과 같다.
- 주식명 검색
- 언제 샀는지
- 얼마나 샀는지
- 얼마나 벌었는지
검색하기 위해 headlessui의 combobox를 사용하기로 했다.
그리고 언제 샀는지 입력받기 위해 datepicker를 찾아보았는데, react-datepicker가 제일 많이 쓰는 것 같았다.
근데 뭔가 마음에 안 들어서 더 찾아보았는데, Flowbite 라이브러리의 datepicker가 마음에 들었다. 하지만 react에서 커스텀하기 복잡했다. 그래서 더 찾아보니 tailwind-datepicker-react 라이브러리가 Flowbite의 datepicker를 react에서 사용할 수 있도록 만든 라이브러리였다. 그래서 이걸로 결정했다.
아직 api 명세가 없기 때문에 내일 수업 때 다 같이 모여서 회의하며 api를 정하고, 그 다음에는 디자인을 생각해보아야겠다.
내일 할 일
- 알고리즘 문제 풀이
- IT특강 팀 프로젝트
- 카공실록 회원가입 페이지 구현
- 디지털콘텐츠기획 ppt 완성
- 프로그라피 오프라인 팀 회의