Git Product home page Git Product logo

hobbysel-web's Introduction

HobbySel

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

📖 프로젝트 소개

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

📌 주요 기능

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

📀 프로젝트 설치 및 실행

제품 스펙

🗂️ 폴더 구조

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에 해당 폴더의 경로를 추가해야한다.

hobbysel-web's People

Contributors

leesongmi avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.