- ✨ 공유노트는 개발과 관련된 유용한 정보를 공유하고, 편하게 찾아볼 수 있도록 만든
URL 아카이빙 서비스
입니다.
- 🙌 프론트엔드 개발자가 목표인 팀원들에게 HTML, CSS, JS, React 등 카테고리 별로 정렬된 정보를 제공합니다.
- 🔗 공유된 URL은 새창열기로 직접적인 내용확인이 가능하고, URL 자체를 복사하여 저장할 수도 있습니다.
- 👀 또한, 해당 URL을 공유한 이유를 확인하여 사용자가 URL 이동 여부를 결정할 수 있도록 하였습니다.
- 📆 기간 : 2022.02.23 - 2022.03.14
[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
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
[TOP]
splash |
Main page |
Write page |
![splash](https://user-images.githubusercontent.com/93389773/159398760-6bb711a3-dcfb-49cf-9747-b65ec73b0ab1.gif) |
![main-sorting](https://user-images.githubusercontent.com/93389773/159398774-d5e3cff3-f2ca-44da-93b2-dcbc0b8e1b51.gif) |
![write](https://user-images.githubusercontent.com/93389773/159398791-0dfbd432-fca7-4c89-811b-ac93ae2304fb.gif) |
View page |
Error |
Loading |
![view](https://user-images.githubusercontent.com/93389773/159398848-cbdb63e7-feef-4505-8f67-d2aec6f762f7.gif) |
![error](https://user-images.githubusercontent.com/93389773/159398861-1a6c593b-2e39-4ffc-ad5b-fe093f16ab65.gif) |
![loading](https://user-images.githubusercontent.com/93389773/159398878-42e58d82-3320-4405-a3ad-5f4181210bdf.gif) |
[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]