- ✨ 공유노트는 개발과 관련된 유용한 정보를 공유하고, 편하게 찾아볼 수 있도록 만든
URL 아카이빙 서비스입니다. - 🙌 프론트엔드 개발자가 목표인 팀원들에게 HTML, CSS, JS, React 등 카테고리 별로 정렬된 정보를 제공합니다.
- 🔗 공유된 URL은 새창열기로 직접적인 내용확인이 가능하고, URL 자체를 복사하여 저장할 수도 있습니다.
- 👀 또한, 해당 URL을 공유한 이유를 확인하여 사용자가 URL 이동 여부를 결정할 수 있도록 하였습니다.
- 📆 기간 : 2022.02.23 - 2022.03.14
| 강지윤 | 김다님 | 이규민 | 장효순 | 조미진 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| kangjiyoun | dahhnym | Kyoo130 | sooonlog | mmcho122 |
- 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
https://tech-info-sharing-note.web.app
├─.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-
Version 1 (Demo)
-
Version 2 (Final)
| splash | Main page | Write page |
|---|---|---|
 |
 |
 |
| View page | Error | Loading |
 |
 |
 |
| 담당 | 상세내용 | 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차 시안 화면 및 프로젝트 로고 디자인 생성 |