하비슬은 이용자들의 취미 생활을 카운슬링 해주는 웹 사이트입니다.
바쁘디 바쁜 현대 사회에서 사람들은 매 순간 에너지를 잃어버린다. 어떠한 행동을 하면서 에너지를 얻을 수 있는지 궁금한 당신! 취미 생활을 가지고 싶지만 내가 무엇을 좋아하는 지 모르겠어서 시작부터 막막한 당신! 삶에 무력감을 느끼고 무엇을 해야할 지 모르겠는 당신을 위한 취미 카운슬링 사이트! 나에게 어울리는 취미 생활은 무엇일지, 나와 다른 사람들은 어떤 취미 활동을 하는지 취미 생활에 대한 모든 것을 알아보자.
- 질의응답을 이용한 취미 카운슬링
- 각종 취미 생활 추천
- 취미와 관련된 설명 열람
- 언어: TypeScript
- 웹 프레임워크: Next.js(App Router 방식)
- 라이브러리: tailwind.css
- 제품 시안: HobbyFigma시안
- 제품 문서: HobbyNotion문서
위치: | src/styles/GlobalStyles.css |
---|
전역 CSS 설정 항목은 프로젝트 설계 당시 컴포넌트화 하기로 한 항목중 전역적으로 컨트롤 해야하는 항목을 추려 설정한다. 전역적으로 설정할 디자인 항목은 아래의 항목들이며, 개발 단계에서 항목이 추가될 경우 ReadMe에 기록하길 바란다.
- 프로젝트 메인 색상 정의
- 폰트 사이즈 정의
상세 디자인은 피그마의 Components 시안 중 [Colors, Fonts] 항목을 참조바란다.
위치: | tailwind.config.ts |
---|
- 반응형 사이즈 설정
- 색상 클래스명 설정
- 폰트 설정
상세 설정 내용은 해당 파일 참조
이 프로젝트는 노드 모듈과 제작한 폴더를 구분하기 위해 alias(@)를 이용해서 src 내부의 폴더에 접근한다. 따라서 src 바로 아래에 폴더를 추가할 경우, 접근하기 편하도록 tsconfig.json 파일의 paths에 해당 폴더의 경로를 추가해야한다.