Surf.

🏄‍♂️  내 인생 성장곡선 사이트  Surf.

인생은 surfing 을 타는 것처럼 즐겁지만,

suffering 또한 피할 수 없다.

피할 수 없다면 기록하고 공유하자! Surf 를 통해 🌊🏄‍♀️🏄🏄🏻‍♂️

✏️ 기획 배경 및 동기

열심히 달려온 나 자신! 열심히는 하고 있는데 내가 얼마나 발전했는지 기록하는 공간은 없을까?
그냥 일기는 메모장에라도 적을 수 있고, 블로그는 이미 무수히 존재하고, 색다른 방법으로 동기부여 받고 기록하고 공유하는 그런 공간이 필요해! 🙆‍♀️

• 성장곡선으로 한눈에 내 인생을 돌아보기
• 남들의 성장곡선을 보며 동기부여도 받기
• 곡선의 특정 구간마다 기록도 남기기
• 곡선이 아닌 기록들만 모아서 보기
• 필요하다면 포트폴리오로도 사용 가능하기

👥  TEAM 착한 김, 나쁜 김, 이상한 김

김예임 😇	김찬민 😈	김지영 😜

🎉  실행 스크립트

> yarn install

> yarn build
> yarn dev

💻  기술 스택

📚  Frameworkes & Libraries

• 리액트 프레임워크: Next.js@12.0.4
• 상태(데이터) 관리 : swr@1.1.0
• CSS-IN-JS : emotion/styled@11.6.0
• HTTP 클라이언트 라이브러리 : axios@0.24.0

🔧  Tools

• 모듈 번들링 : Webpack@5.64.4
• 트랜스파일러 : Babel@7.16.0
• 의존성 관리 및 스크립팅 : yarn@1.22.17
• 컴포넌트 테스트 툴 : storybook@6.4.0
• 런타임 : node@14(LTS)

🖼 프로토타입

피그마 바로가기 👈🏻

🗣 배포

프로젝트 보러가기 👈🏻

🗂 협업 문서

노션 구경가기 👈🏻
원본 branch 바로가기 👈🏻

🪞 데모

로그인	메인 화면 - Surf 첫 페이지	메인 화면 - 특정 category 선택

게시글 작성	무한 스크롤	마이 페이지 - 내 정보 수정

대시보드	카드 페이지	카드 페이지 - 해당 월별 기록 리스트
마이 페이지에서 이동	연도별 필터링, 해당 달의 작성 일수 확인 가능	카드 선택시

📂 디렉토리 구조

.
├── README.md
├── __mocks__
│   └── next
├── components
│   ├── base					
│   │   ├── Avatar
│   │   ├── Badge
│   │   ├── Dropdown
│   │   ├── Input
│   │   ├── Loading
│   │   ├── Logo
│   │   ├── MainDropdown
│   │   ├── Modal
│   │   ├── Text
│   │   ├── Textarea
│   │   ├── Toggle
│   │   ├── Upload
│   │   └── index.js
│   ├── common            		
│   │   ├── Header
│   │   ├── Navbar
│   │   └── index.js
│   └── domain				
│       ├── AddSurfModal
│       ├── AreaChartComponent
│       ├── AreaChartModule
│       ├── Calendar
│       ├── CalendarCard
│       ├── Carot
│       ├── CategoryCard
│       ├── ContentBox
│       ├── DashboardCard
│       ├── DatePicker
│       ├── EditAboutMe
│       ├── FollowCard
│       ├── FollowModal
│       ├── HeatmapChartComponent
│       ├── InputItem
│       ├── NoticeCard
│       ├── Post
│       ├── PostDetail
│       ├── Profile
│       ├── RadialBarChartComponent
│       ├── ScoreSlider
│       ├── SkeletonBox
│       ├── Tabs
│       ├── UpdateCategoryModal
│       ├── Welcome
│       └── index.js
├── constants             		
│   ├── apiPath.js
│   ├── environment.js
│   └── inputLength.js
├── hooks					
│   ├── index.js
│   ├── useForm.js
│   ├── useHover.js
│   └── useToggle.js
├── jsconfig.json
├── netlify.toml
├── next.config.js
├── package.json
├── pages
│   ├── 404
│   │   └── index.jsx
│   ├── _app.jsx
│   ├── _document.jsx
│   ├── categorymanage
│   │   └── index.jsx
│   ├── dashboard
│   │   └── index.jsx
│   ├── explore
│   │   └── index.jsx
│   ├── index.jsx
│   ├── login
│   │   └── index.jsx
│   ├── mypage
│   │   ├── [userId]
│   │   ├── alarm
│   │   ├── edit
│   │   └── index.jsx
│   ├── posts
│   │   ├── [year]
│   │   └── new
│   └── signup
│       └── index.jsx
├── public
├── stories               		
│   ├── base
│   ├── common
│   ├── domain
│   └── hooks
├── styles
│   ├── globals.css
│   ├── pageStyles				
│   └── theme.js
├── utils
│   ├── apis
│   ├── common            	
│   └── validation             
├── .env		
└── yarn.lock