tech-info-sharing-note

목차

1. 프로젝트 소개
   • 개요
   • 팀원
2. 개발 환경 및 배포
   • 사용 기술
   • 개발 환경
   • 배포 바로가기
3. 전체 구조 및 시안
   • 프로젝트 구조
   • 시안
4. 세부 기능
5. 작업상세내용

📝 개요

• ✨ 공유노트는 개발과 관련된 유용한 정보를 공유하고, 편하게 찾아볼 수 있도록 만든 URL 아카이빙 서비스 입니다.
• 🙌 프론트엔드 개발자가 목표인 팀원들에게 HTML, CSS, JS, React 등 카테고리 별로 정렬된 정보를 제공합니다.
• 🔗 공유된 URL은 새창열기로 직접적인 내용확인이 가능하고, URL 자체를 복사하여 저장할 수도 있습니다.
• 👀 또한, 해당 URL을 공유한 이유를 확인하여 사용자가 URL 이동 여부를 결정할 수 있도록 하였습니다.
• 📆 기간 : 2022.02.23 - 2022.03.14

🧑‍🤝‍🧑 팀원

강지윤	김다님	이규민	장효순	조미진
kangjiyoun	dahhnym	Kyoo130	sooonlog	mmcho122

[TOP]

💻 사용기술

• JavaScript
• 웹앱 구현과 폭넓은 커뮤니티로 원활한 디버깅이 가능한 React
• 효율적이고 간단한 상태관리를 위한 Redux
• 로딩 없이 페이지 별 컴포넌트 라우팅을 위한 React-Router-Dom
• 자유로운 css 컴포넌트 사용과 scss 적용을 위한 Styled-components
• 빠른 백엔드 작업과 간단한 데이터베이스 작업을 위한 Firebase

🏚 개발 환경

• OS : Mac, Window
• Frontend: React
• Backend : Firebase
• IDE : VS Code
• Team Collaboration Tool : Git, Git Projects, Discord
• Platform : WebApp
• Test Browser : Chrome v.99.0.4844.74, Samsung Internet Browser v.16.2.1.56
• Test Device : iPhone 8/12 mini/13 Pro, Gallaxy S20 FE

🔗 배포 URL

https://tech-info-sharing-note.web.app

[TOP]

💬 프로젝트 구조

├─.firebase
├─node_modules
├─public
│  │  favicon.ico
│  │  index.html
│  │  logo192.png
│  │  logo512.png
│  │  manifest.json
│  │  robots.txt
│  │
│  └─images
│          header_logo.png
│          icon-arrow-down.svg
│          icon-arrow-left.svg
│          icon-edit.png
│          logo.svg
│
└─src
    │  App.css
    │  App.js
    │  index.css
    │  index.js
    │
    ├─components
    │      ClipboardCopy.js
    │      Footer.js
    │      Header.js
    │      index.js
    │      ListItem.js
    │      ListOption.js
    │      ListOptionGroup.js
    │      Spinner.js
    │      Svg.js
    │
    ├─elements
    │      Button.js
    │      CategoryTag.js
    │      index.js
    │      NextBtn.js
    │      Text.js
    │
    ├─pages
    │      Edit.js
    │      Home.js
    │      index.js
    │      Loading.js
    │      New.js
    │      NotFound.js
    │      Splash.js
    │      ViewPage.js
    │
    ├─shared
    │  │  firebase.js
    │  │
    │  └─redux
    │      │  configStore.js
    │      │
    │      └─modules
    │              techInfo.js
    │
    └─Util
            Common.js
            timeForToday.js

[TOP]

✏️ 시안

🔗 Figma Link

• Version 1 (Demo)
  
  

• Version 2 (Final)
  

[TOP]

🛠 세부 기능

splash	Main page	Write page
View page	Error	Loading

[TOP]

🖐️ 작업상세내용

담당	상세내용	URL	경로
강지윤	카테고리별 게시글 필터링 기능 개발	src/pages/Home.js	/home
	작성자, 스킬 카테고리 그룹 컴포넌트 개발	src/components/ListOptionGroup.js
	작성자, 스킬 카테고리 옵션 컴포넌트 개발	src/components/ListOption.js
	고정 헤더 및 푸터 제외한 컨텐츠 영역 조절 관련 코드 개발	src/util/Common.js
	1차 시안 화면 기획 및 디자인 생성
김다님	게시글 상세 조회 페이지 개발	src/pages/ViewPage.js	/view
	아이콘 이미지 SVG 컴포넌트화	src/components/Svg.js
	카테고리 태그 모듈화 코드 개발	src/elements/CategoryTag.js
	URL 클립보드 복사 컴포넌트 개발	src/elements/ClipboardCopy.js
	URL 프로토콜 유효성 검사	src/pages/New.js	/new
	게시글 목록 카테고리 및 작성일 표시 기능	src/components/ListItem.js
이규민	게시글 작성 페이지 개발	src/pages/New.js	/new
	게시글 수정 페이지 개발	src/pages/Edit.js	/edit
	버튼 컴포넌트 모듈화 코드 개발	src/elements/Button.js
	텍스트 컴포넌트 모듈화 코드 개발	src/elements/Text.js
	Redux 액션, 액션 생성 함수, 리듀서, 미들웨어 코드 개발	src/shared/redux/techInfo.js
	Redux 스토어 코드 개발	src/shared/redux/configStore.js
	Firebase 서버 연결 코드 개발	src/shared/firebase.js
	Today 시간 표시 기능 유틸 코드 개발	src/util/timeForToday.js
	전체 게시글 CRUD 개발 총괄
장효순	게시글 목록 data 출력 기능 개발	src/pages/Home.js	/home
	README file 작성	/README.md
	Git 협업 가이드 작성
조미진	초기 화면 이동 Splash 페이지 개발	src/pages/Splash.js	/
	NotFound 페이지 개발	src/pages/NotFound.js	/*
	Loading 페이지 개발	src/pages/Loading.js
	접속 URL에 따른 반응형 Header 컴포넌트 개발	src/components/Header.js
	Footer 컴포넌트 코드 개발	src/components/Footer.js
	2차 시안 화면 및 프로젝트 로고 디자인 생성

[TOP]