[기동 2팀] ReacTree

기동 2팀 프로젝트 기획서

🧭 리액트 가꿈이가 되어 나만의 리액트 나무를 키워보세요! 🥳

팀 소개

• 팀명 : 가꿈이 (gakkum2)

• 팀원 : 윤승록, 문승희, 김다슬

• 프로젝트 명 : ReacTree

프로젝트 개요

데브코스를 진행하면서 누군가에게 내가 공부한 내용을 설명 할 때, 내 지식이 더욱 공고해지는 경험을 하게 되었다 다른 사람의 글을 읽고, 소통하는 과정을 통해 내 지식의 공백을 메울 수 있는 경험 또한 하게 되었다 그래서 우리는 이 둘을 한 곳에 아우를 수 있는 서비스를 기획했다

• 사용자는 30일 동안 매일 리액트 관련 키워드에 대한 질문을 부여받는다. 사용자는 매일 주어진 질문에 대해 스스로 학습해 나가며 나름의 답변을 작성하여 제출한다

• 또한, SNS 기능을 활용하여, 동일한 키워드를 학습하고 있는 다른 사용자의 답변이 공유되며 '댓글'과 '좋아요'를 통한 소통이 가능하다. 이를 통해 사용자는 해당 키워드에 대한 지식의 완성도를 높일 수 있다

• 답변 내용이 트리 형태로 저장되어 나만의 리액트리(정리 노트)를 만들 수 있다

• 사용자는 리액트 관련 키워드에 관한 자기주도적인 학습 경험을 토대로 이후 학습 계획 수립에 도움을 얻을 수 있음

• 동일 키워드를 학습 중인 사용자들과의 소통을 통해서 지식의 완성도를 높일 수 있음

• 30일 동안 진행되는 일련의 과제 수행을 통해, 성취감 고취 및 꾸준한 학습 습관 배양

기술 스택

• 라이브러리: React,

• 컴포넌트관리: StoryBook

• 상태 관리: ContextAPI

• 배포: Netlify

로고

'매일매일 나는 성장 할 수 있어!'

 

대표 색상

• FFF8BC

• EEF2BB

💾 기능 명세

사용 API 기능 : 인증, 유저, 설정, 채널, 포스트, 좋아요, 댓글

페이지 별 상세 기능 스펙

🔍 UI 와이어 프레임

⚙️ 컴포넌트 구조

.
└── pjt
    ├── README.md
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── manifest.json
    │   └── robots.txt
    ├── src
    │   ├── App.css
    │   ├── App.js
    │   ├── App.test.js
    │   ├── Components
    │   │   ├── base
    │   │   │   ├── Alert
    │   │   │   ├── Avatar
    │   │   │   ├── Badge
    │   │   │   ├── Button
    │   │   │   ├── Divider
    │   │   │   ├── Form
    │   │   │   ├── Input
    │   │   │   ├── Logo
    │   │   │   ├── ModalContainer
    │   │   │   ├── Question
    │   │   │   ├── SearchBar
    │   │   │   ├── Spinner
    │   │   │   ├── Text
    │   │   │   └── image
    │   │   └── domain
    │   │       ├── FeedcontentsContainer
    │   │       ├── Header
    │   │       ├── MaincontentsContainer
    │   │       ├── MyInfoContainer
    │   │       ├── NavChannel
    │   │       ├── Navsocial
    │   │       ├── SignInModal
    │   │       ├── SignUpModal
    │   │       ├── TreeCover
    │   │       ├── TreeModal
    │   │       ├── Node
    │   │       └── UnitContainer
    │   ├── assets
    │   │   ├── BigLogoImage
    │   │   └── LogoImage
    │   ├── contexts
    │   ├── hooks
    │   ├── index.css
    │   ├── index.js
    │   ├── logo.svg
    │   ├── pages
    │   │   ├── FEED
    │   │   │   ├── FeedcontentsContainer
    │   │   │   ├── Header
    │   │   │   ├── NavChannel
    │   │   │   └── Navsocial
    │   │   ├── INTRO
    │   │   │   ├── Alert
    │   │   │   ├── Button
    │   │   │   ├── Form
    │   │   │   ├── Logo
    │   │   │   ├── SignInModal
    │   │   │   ├── SignUpModal
    │   │   │   └── Text
    │   │   ├── MAIN
    │   │   │   ├── Alert
    │   │   │   ├── Header
    │   │   │   ├── MaincontentsContainer
    │   │   │   ├── NavChannel
    │   │   │   └── Navsocial
    │   │   ├── MYTREE
    │   │   │   ├── Header
    │   │   │   ├── NavChannel
    │   │   │   ├── TreeCover
		│   │   │   ├── UnitContainer
    │   │   │   └── TreeModal
    │   │   └── SETTING
    │   │       ├── Header
    │   │       └── MyInfoContainer
    │   ├── reportWebVitals.js
    │   └── setupTests.js
    └── yarn.lock

💘 협업 준비

코드 스타일 합의 (Eslint, Prettier)

// 예시
	printWidth: 100, // 코드 라인 길이
  tabWidth: 2, // 탭 간격, 스페이스 설정 시 2칸 띄어쓰기
  singleQuote: true, // '' 작은 따옴표 사용
  trailingComma: 'all', // , 자동으로 붙이기
  semi: false, // ; 사용 안 함
  useTabs: false, // tab키 사용. false 추천 == space 대체
  arrowParens: 'always', // (x) => x, x => x로 전자처럼 괄호 유지
  endOfLine: 'auto',
  bracketSpacing: true, // 대괄호 {} 사이 공백
  jsxBracketSameLine: true, // JSX 요소 > 줄바꿈

네이밍 컨벤션

• Component 는 Pascal Case (ex. Divider)

• 변수명의 경우 Camel Case (ex. useForm)

• 함수명의 경우 동사+목적어 (ex. useForm, displayHeader)

• .으로 세 번 이상 depth 로 진입해서 접근하는 경우는 별도의 변수 선언하여 사용

• 상수 변수는 대문자로 명명 (ex. ROOT_URL, API_KEY)

깃, 깃허브 관련 협의 - 이슈 기반

✅ API 추가 기능 요청 사항