v0.1.0 (#37)

* add: 기능 추가1 * add: 기능추가2 * ingress endpoint 히트 이슈 (#6) * v0.0.0 (#4) * add: 기능 추가1 * add: 기능추가2 * add: home 이동 * [ADD] 오늘 하루가 얼마나 완벽한지 알려주는 내용 추가 (#8) * [ADD] json 형식 반환값 추가 테스트입니다 * [ADD] 오늘 하루가 얼마나 완벽한지 알려주는 내용 추가 * add: ok 추가 Co-authored-by: Kyungeun <[email protected]> * home 페이지에 텍스트 추가 (#12) * add: 텍스트 추가 * add: 기능 추가2 * 브랜치 변경에 따른 테스트 (#15) * add: 텍스트 추가 * add: 기능 추가2 * add: 테스트를 위한 버튼 추가 * add: 기능 추가 * add: 기능추가2 * 디렉토리 구조설정, recoil (#27) * init: 디렉토리 구조 변경 * docs: 폴더 구조에 대한 설명 README.md에 추가 * package: recoil 패키지 설치 * docs: README.md 에 패키지 버전 관련 항목 추가 및 커밋 규칙 추가 * up: 세미 콜론 제거 * add: _app.tsx 파일 추가 및 RecoilRoot 사용 * add: recoil 테스트를 위한 코드 작성 * del: 남아있던 test script 삭 fix: 남아있는 yarn to npm 으로 마이그레이션 test: 포멧팅 검사 * test: 포멧팅 검사를 위해 텍스트 추가 * fix: push시 자동 포멧터 활성화 * docs: history 반영 * del: commit 으로 자동 포멧터 변경 docs: 문서 반영 * test: 포멧터 검사를 위해 ts 파일 확장자로 변경 * docs: 히스토리 문서 반영 * test: 포멧터를 강제로 트리거 시키기 위해 수정합니다. * style: prettier 인덴트 * up: 이전 파일으로 원상복구 Co-authored-by: Kyungeun <[email protected]> * 오늘 할일 페이지의 컴포넌트 기능 구현 (#31) * docs: 폴더구조 컴포넌트 내용 추가 * docs: #28 - 소개 타이틀 추가 Run Time 환경에 대한 내용은 추후에 추가할 예정 동시에 README 내용과 디자인에 대한 부분을 전체적으로 수정 예정입니다. * fix: #29 - 함수형 컴포넌트 및 페이지 형태 수정 * package: #19 - styled-components 패키지 설치 * package: #19 - styled-components SSR babel 설정 * add: #19 styled-components를 위한 _document.tsx 파일 추가 * package: #19 - styled-components babel 설정을 위한 패키지 설치 * add: #19 정상작동 확인 코드 작성 * fix: babelrc 파일 코드정리 * add: #26 - Representative Layout 생성 및 테스트 작성 * del: 테스트 코드 삭제 * add: #26 - Represantative Layout 세부 내용 추가 작성 및 테스트 코드 수정 공용 레이아웃에 사용되는 레이아웃 컴포넌트 생성 * add: 공용스타일 추가 적용 * add: #22 - MainTitle 스타일 추가 * fix: 코드 정리 * rename: RepresentativeLayout의 HeaderBackground 이름 수정, MainTitle => PageTitle 로 수정 * up: 스타일 수정 * up: 글로벌 , HeaderBackground 스타일 변경 * up: global style 변경 * add: #30 - 알림 컴포넌트 제작 기능은 동작하지 않음 프로토타입 이후 업데이트로 기능 추가 * add: #25 - 오늘 할일 페이지 레이아웃을 위한 대표 레이아웃에 공간 생성 * style: 코드 스타일 자동 수정 * add: #25 - 오늘 할일 페이지 레이아웃의 섹션별 스타일 지정 * refactor: 파일과 변수 이름을 바꿈 layout 컴포넌트의 각각의 컴포넌트들이 담기는 공간을 Section이라는 이름으로 통일 * add: #23 잔디 심기 컴포넌트 스타일 추가 * package: 서버와의 비동기 통신을 위한 axios 패키지 설치 * add: #23 잔디심기 컴포넌트 제작 완료 * up: layout 변경 * del: 이전에 만들었던 mock 파일 삭제 * add: #24 - 할일 목록 리스트 스타일 제작 * add: test용 json 파일 추가 * up: style 수정 * add: #24 - TodoItem용 타입 추가 * up: 테스트용 데이터 사용을 위하여 수정 기존에는 로컬 mock 서버를 통하여 수행하였지만 현재 서버에 올렸을 경우 실행되지 않기 때문에 임시로 json파일을 읽도록 수정 * refector: 변수명 수정 및 줄바꿈 수정 * add: #24 - 오늘 할일 목록을 가져오는 axios 코드와 상태 코드 작성 * add: #24 - 오늘 할일 목록을 보여주는 컴포넌트 작성 * add: #24 - 클릭에 대한 훅 작성 * add: #24 - 레이아웃에 오늘 할일 목록이 나오는 컴포넌트 추가 * add: #24 - 오늘 할일에 대한 노드 컴포넌트 제작 * refactor: 함수 명 변경 * add: #32 svg 아이콘의 타입과 각각의 아이콘을 저장하는 static 폴더 생성 * rename utils에서 libs로 변경 * refactor: urils 에서 libs로 수정 * style: 반영되지 않은 prettier 적용 * up: 서면으로 진행된 피드백 반영 * #32 theme적용을 위한 코드 작성 * up: 파비콘 아이콘 Belf로 변경 * refactor: recoil 네이밍 컨벤션에 맞춰 함수명 수정 * refactor: 전역 스타일 이외의 스타일을 컴포넌트 내부에 넣음 * refactor: 수정 * refactor: layout 디렉터리 Components 디렉토리 밖으로 뺌 * refactor: Assets 폴더를 만들어 Icons 폴더를 넣어줌 * refactor: Assets => assets * refactor: 사용하지 않는 코드 삭제 * refactor: 레이아웃 의존성이 없도록 수정 * refactor: recoil 선언 방식 수정 * refactor: asset 이름 수정1 * refactor: asset 이름 수정1 * refactor: asset 이름 수정1 Co-authored-by: Kyungeun <[email protected]> Co-authored-by: Kyungeun <[email protected]> Co-authored-by: Kyungeun Park <[email protected]> Co-authored-by: JP3Pe <[email protected]>
belf-kr · May 22, 2021 · 5dc8e7c · 5dc8e7c
1 parent 6023cfe
commit 5dc8e7c
Show file tree

Hide file tree

Showing 51 changed files with 2,095 additions and 216 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,12 @@
 {
-  "presets": ["next/babel"]
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": true,
+        "displayName": true
+      }
+    ]
+  ]
 }
diff --git a/README.md b/README.md
@@ -1,3 +1,7 @@
+# 소개
+
+Belf 프로젝트의 Front 서버입니다.
+
 # front-server
 
 front-end를 위한 repo입니다.
@@ -17,5 +21,48 @@ front-end를 위한 repo입니다.
 npx create-next-app --example with-typescript-eslint-jest front-server
 ```
 
-1. `.git`을 제외하고 숨김파일까지 모두 찾아서 마이그레이션 헀습니다.
-1. jest는 사용하지 않음으로 의존성을 제거하였습니다.
+1. `.git` 을 제외하고 숨김파일까지 모두 찾아서 마이그레이션
+1. yarn 부분 모두 npm 으로 마이그레이션
+1. jest는 사용하지 않음으로 파일 및 의존성을 제거
+
+## 폴더 구조
+
+```text
+./
+├── hooks
+├── pages
+├── public
+├── states
+├── styles
+└── utils
+```
+
+- hooks : 모든 커스텀 훅
+- pages : 외부 노출 페이지
+- public : static 에셋
+- states : recoil 전역 상태
+- styles : 스타일
+- utils : 기능 메소드들 (axios 포함)
+- components : 컴포넌트들
+
+# Commit message 컨벤션
+
+history를 트래킹 할 수 있도록 큰 이벤트마다 여러 번 구분하여 커밋하도록 합니다.
+
+> 핵심 가치는 `commit type`만으로 해당 커밋을 유추할 수 있어야 합니다.
+
+| type     | 내용                                                                   |
+| -------- | ---------------------------------------------------------------------- |
+| init     | hello, world 수준의 동작이 검증된 첫 파일을 추가할 때                  |
+| add      | 코드나 테스트, 예제, 문서 등의 추가가 있을 때                          |
+| del      | 파일 또는 코드, 리소스 제거                                            |
+| up       | 원래도 정상동작 하지만 추가 보안 하는 개념                             |
+| fix      | 올바르지 않은 동작을 고친 경우에                                       |
+| docs     | 문서 수정                                                              |
+| refactor | 코드 리팩토링 (변수명 수정 등) 기능에는 변함이 없어야합니다            |
+| style    | 코드 인덴트 변경으로 인한 코드 스타일 변경, 코드 자체 변경이 없는 경우 |
+| ci/cd    | ci/cd와 같은 행위를 강제로 수행해야 할 때 (강제로 수행한 이유 작성)    |
+| use      | 특별히 무언가를 사용해 구현을 하는 경우                                |
+| move     | 코드 및 파일의 이동이 있을 때                                          |
+| rename   | 파일명이 변경될 때                                                     |
+| package  | 패키지를 추가했을 때                                                   |
diff --git a/assets/icons/bell.ts b/assets/icons/bell.ts
@@ -0,0 +1,11 @@
+import { Icon } from "../../libs/type/Icon";
+
+const bigCheck: Icon = {
+  d:
+    "M15.45,9.32a4.61,4.61,0,0,0-.22-.51L11.78,2.12a3.59,3.59,0,0,0-6.55,0L1.78,8.81a4.67,4.67,0,0,0-.23.51A2.49,2.49,0,0,0,0,11.7v1.39a2.37,2.37,0,0,0,2.23,2.49h3.7C5.93,16.36,7.08,17,8.5,17a3.8,3.8,0,0,0,2.08-.58,1,1,0,0,0,.49-.84h3.7A2.37,2.37,0,0,0,17,13.09V11.7A2.49,2.49,0,0,0,15.45,9.32Z",
+  width: 17,
+  height: 17,
+  fill: "#ffffff",
+};
+
+export default bigCheck;
diff --git a/assets/icons/bigCheck.ts b/assets/icons/bigCheck.ts
@@ -0,0 +1,11 @@
+import { Icon } from "../../libs/type/Icon";
+
+const bigCheck: Icon = {
+  d:
+    "M9.79,22.23.75,13a2.63,2.63,0,0,1,0-3.68,2.53,2.53,0,0,1,3.57,0l0,0,7.42,7.56L27.64.76a2.51,2.51,0,0,1,3.56,0l.05,0a2.63,2.63,0,0,1,0,3.68L13.77,22.24a2.49,2.49,0,0,1-2,.75h-.19A2.5,2.5,0,0,1,9.79,22.23Z",
+  width: 32,
+  height: 23,
+  fill: "#29A4FF",
+};
+
+export default bigCheck;
diff --git a/assets/icons/bigDelete.ts b/assets/icons/bigDelete.ts
@@ -0,0 +1,12 @@
+import { Icon } from "../../libs/type/Icon";
+
+const bigDelete: Icon = {
+  d:
+    "M18.67,22.26,11.5,15.09,4.33,22.26A2.54,2.54,0,1,1,.74,18.67h0L7.91,11.5.74,4.33A2.54,2.54,0,0,1,.74.74h0a2.54,2.54,0,0,1,3.59,0L11.5,7.91,18.67.74a2.54,2.54,0,0,1,3.59,0h0a2.54,2.54,0,0,1,0,3.59L15.09,11.5l7.17,7.17a2.54,2.54,0,0,1,0,3.59,2.55,2.55,0,0,1-3.59,0Z",
+  width: 23,
+  height: 23,
+  fill: "#FF587E",
+  viewBox: "0 0 23 23",
+};
+
+export default bigDelete;
diff --git a/components/NotificationButton/index.tsx b/components/NotificationButton/index.tsx
@@ -0,0 +1,16 @@
+import bell from "../../assets/icons/bell";
+
+import { default as S } from "./style";
+
+function NotificationButton(): JSX.Element {
+  return (
+    <S.Frame>
+      <S.Display />
+      <S.Icon {...bell}>
+        <path d={bell.d} />
+      </S.Icon>
+    </S.Frame>
+  );
+}
+
+export default NotificationButton;
diff --git a/components/NotificationButton/style.ts b/components/NotificationButton/style.ts
@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import Icon from "../../styles/Icon";
+
+const Display = styled.div`
+  background-color: #ff924a;
+  border-radius: 50%;
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  transform: translate(0%, -50%);
+  left: 19px;
+  top: 13px;
+  z-index: 1;
+`;
+
+const Frame = styled.div`
+  background-color: rgba(255, 255, 255, 0.45);
+  border-radius: 10px;
+  width: 36px;
+  height: 36px;
+  position: absolute;
+  display: inline-block;
+  right: 0;
+  transform: translateY(-50%);
+  top: 50%;
+`;
+
+const style = {
+  Frame: Frame,
+  Icon: Icon,
+  Display: Display,
+};
+
+export default style;
diff --git a/components/PageTitle/index.tsx b/components/PageTitle/index.tsx
@@ -0,0 +1,11 @@
+import { default as S } from "./style";
+
+type props = {
+  titleText: string;
+};
+
+function PageTitle({ titleText }: props): JSX.Element {
+  return <S.Title>{titleText}</S.Title>;
+}
+
+export default PageTitle;
diff --git a/components/PageTitle/style.ts b/components/PageTitle/style.ts
@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+const Title = styled.a`
+  font-size: 30px;
+  font-weight: bold;
+  color: white;
+`;
+
+const style = {
+  Title: Title,
+};
+
+export default style;
diff --git a/components/PlantingGlass/Component.tsx b/components/PlantingGlass/Component.tsx
@@ -0,0 +1,43 @@
+import { useRecoilValue } from "recoil";
+
+import { getCountAvgSelector, getPlatingGlass2dArraySelector } from "../../states/plantingGlass";
+
+import { default as S } from "./style";
+
+import { Glass } from "../../libs/type/PlantingGlass";
+
+function colorGenerator(avg: number, value: number): string {
+  if (value === 0) {
+    return "#EBEDF0";
+  } else if (value <= avg / 2) {
+    return "#FFEDE2";
+  } else if (value <= avg) {
+    return "#FFD0B1";
+  } else if (value <= avg + avg / 2) {
+    return "#FF9E5F";
+  } else {
+    return "#FF8433";
+  }
+}
+
+function Component(): JSX.Element {
+  const array = useRecoilValue(getPlatingGlass2dArraySelector);
+  const avg = useRecoilValue(getCountAvgSelector);
+
+  return (
+    <S.Card>
+      <S.Grid>
+        {array.map((e: Glass[], i: number) => (
+          <S.WeekItem key={"i_" + i}>
+            <S.WeekGrid key={"g_" + i}>
+              {e.map((item: Glass, j: number) => (
+                <S.DayItem key={i + "-" + j} color={colorGenerator(avg, item.count)} id={item.date} />
+              ))}
+            </S.WeekGrid>
+          </S.WeekItem>
+        ))}
+      </S.Grid>
+    </S.Card>
+  );
+}
+export default Component;
diff --git a/components/PlantingGlass/index.tsx b/components/PlantingGlass/index.tsx
@@ -0,0 +1,20 @@
+import { useRecoilValueLoadable } from "recoil";
+
+import { getPlantingGlassSelector } from "../../states/plantingGlass";
+
+import Component from "./Component";
+
+function PlantingGlass(): JSX.Element {
+  const con = useRecoilValueLoadable(getPlantingGlassSelector);
+
+  switch (con.state) {
+    case "hasValue":
+      return <Component />;
+    case "loading":
+      return <>loading...</>;
+    case "hasError":
+      return <>error...</>;
+  }
+}
+
+export default PlantingGlass;
diff --git a/components/PlantingGlass/style.ts b/components/PlantingGlass/style.ts
@@ -0,0 +1,55 @@
+import styled, { css } from "styled-components";
+
+const Card = styled.div`
+  background-color: white;
+  padding: 3% 4%;
+  box-sizing: border-box;
+  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  height: 110px;
+`;
+
+const DayItem = styled.div<{ color: string }>`
+  display: flex;
+  justify-content: center;
+  ${(props) => {
+    if (props.color == "#EBEDF0") {
+      return css`
+        background-color: ${props.color};
+        border: solid 1px #e0e2e6;
+      `;
+    } else {
+      return css`
+        background-color: ${props.color};
+      `;
+    }
+  }}
+  border-radius: 3px;
+`;
+
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(24, 3%);
+  grid-gap: 1.215%;
+`;
+
+const WeekGrid = styled.div`
+  display: grid;
+  grid-template-columns: 10px;
+  grid-template-rows: repeat(7, 10px);
+  grid-gap: 4px;
+`;
+
+const WeekItem = styled.div`
+  display: flex;
+`;
+
+const style = {
+  Card: Card,
+  Grid: Grid,
+  WeekGrid: WeekGrid,
+  WeekItem: WeekItem,
+  DayItem: DayItem,
+};
+
+export default style;
diff --git a/components/TodayTodoItem/index.tsx b/components/TodayTodoItem/index.tsx
@@ -0,0 +1,52 @@
+import { useState } from "react";
+
+import useClick from "../../hooks/useClick";
+
+import bigCheck from "../../assets/icons/bigCheck";
+import bigDelete from "../../assets/icons/bigDelete";
+
+import { default as S } from "./style";
+
+import { TodoItem } from "../../libs/type/TodoTodayItem/indes";
+
+type props = {
+  todoItem: TodoItem;
+};
+
+function TodayTodoItem({ todoItem }: props): JSX.Element {
+  const [itemLeft, setItemLeft] = useState<number>(0);
+
+  const refClickComponent = useClick(() => {
+    if (itemLeft === 0) {
+      setItemLeft(-120);
+    } else {
+      setItemLeft(0);
+    }
+  });
+
+  return (
+    <S.TodoItemSection>
+      <S.TodoItemCard ref={refClickComponent} left={itemLeft}>
+        <S.TodoTitleSection>
+          <S.CourseColor bgColor={todoItem.color} />
+          <S.TodoTitle>{todoItem.reminder_title}</S.TodoTitle>
+        </S.TodoTitleSection>
+        <S.CourseTitle>{todoItem.course_title}</S.CourseTitle>
+      </S.TodoItemCard>
+      <S.ButtonSection>
+        <S.EventButton>
+          <S.Icon {...bigCheck}>
+            <path d={bigCheck.d} />
+          </S.Icon>
+        </S.EventButton>
+        <S.EventButton>
+          <S.Icon {...bigDelete}>
+            <path d={bigDelete.d} />
+          </S.Icon>
+        </S.EventButton>
+      </S.ButtonSection>
+    </S.TodoItemSection>
+  );
+}
+
+export default TodayTodoItem;