HobbySel

하비슬은 이용자들의 취미 생활을 카운슬링 해주는 웹 사이트입니다.

📖 프로젝트 소개

바쁘디 바쁜 현대 사회에서 사람들은 매 순간 에너지를 잃어버린다. 어떠한 행동을 하면서 에너지를 얻을 수 있는지 궁금한 당신! 취미 생활을 가지고 싶지만 내가 무엇을 좋아하는 지 모르겠어서 시작부터 막막한 당신! 삶에 무력감을 느끼고 무엇을 해야할 지 모르겠는 당신을 위한 취미 카운슬링 사이트! 나에게 어울리는 취미 생활은 무엇일지, 나와 다른 사람들은 어떤 취미 활동을 하는지 취미 생활에 대한 모든 것을 알아보자.

📌 주요 기능

• 질의응답을 이용한 취미 카운슬링
• 각종 취미 생활 추천
• 취미와 관련된 설명 열람

📀 프로젝트 설치 및 실행

제품 스펙

• 언어: TypeScript
• 웹 프레임워크: Next.js(App Router 방식)
• 라이브러리: tailwind.css
• 제품 시안: HobbyFigma시안
• 제품 문서: HobbyNotion문서

🗂️ 폴더 구조

Tailwind.css

전역 CSS 설정

위치:	src/styles/GlobalStyles.css

전역 CSS 설정 항목

전역 CSS 설정 항목은 프로젝트 설계 당시 컴포넌트화 하기로 한 항목중 전역적으로 컨트롤 해야하는 항목을 추려 설정한다. 전역적으로 설정할 디자인 항목은 아래의 항목들이며, 개발 단계에서 항목이 추가될 경우 ReadMe에 기록하길 바란다.

1. 프로젝트 메인 색상 정의
2. 폰트 사이즈 정의

상세 디자인은 피그마의 Components 시안 중 [Colors, Fonts] 항목을 참조바란다.

theme 설정

위치:	tailwind.config.ts

theme 설정 항목

1. 반응형 사이즈 설정
2. 색상 클래스명 설정
3. 폰트 설정

상세 설정 내용은 해당 파일 참조

🤔 개발시 참고사항

src 폴더 내부에 신규 폴더 생성 시

이 프로젝트는 노드 모듈과 제작한 폴더를 구분하기 위해 alias(@)를 이용해서 src 내부의 폴더에 접근한다. 따라서 src 바로 아래에 폴더를 추가할 경우, 접근하기 편하도록 tsconfig.json 파일의 paths에 해당 폴더의 경로를 추가해야한다.