Merge pull request #3 from Konkuk-KUIT/dainn

AddHabit, Myprogress 페이지

package.json

@@ -12,10 +12,15 @@
   "dependencies": {
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.34",
+
+    "chart.js": "^4.4.3",
     "date-fns": "^3.6.0",
+
     "react": "^18.3.1",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.1",
+    "recharts": "^2.12.7",
     "styled-components": "^6.1.11",
     "vite-plugin-svgr": "^4.2.0"
   },

src/App.tsx

@@ -3,6 +3,10 @@ import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
 import HomePage from "./pages/HomePage";
 import HabitDetailPage from "./pages/HabitDetailPage/HabitDetailPage";
 import FeedPage from "./pages/FeedPage/FeedPage";
+
+import AddHabit from "./pages/AddHabit/addHabit";
+import MyProgress from "./pages/MyProgress/myProgress";
+
 import BottomNavBar from "./components/BottomNavBar";
 import Header from "./components/Header";
 import styled from "styled-components";
@@ -32,15 +36,16 @@ function App() {
 				</>
 			),
 			children: [
-				{ path: "/", element: <HomePage /> },
-				{ path: "/habitDetail", element: <HabitDetailPage /> },
-				{ path: "/feed", element: <FeedPage /> },
-				{ path: "/addHabit" },
-				{ path: "/myprogress" },
-				{ path: "/store" },
-				{ path: "/option" },
-			],
+      { path: "/", element: <HomePage /> },
+      { path: "/habitDetail", element: <HabitDetailPage /> },
+      { path: "/feed", element: <FeedPage /> },
+      { path: "/addHabit", element: <AddHabit />}, 
+      { path: "/myProgress", element: <MyProgress />},
+      { path: "/store" },
+      { path: "/option" },
+        ],
 		},
+
 	];
 	const router = createBrowserRouter(routes, { basename: "/KUIT3_Hackathon_Team5-Web/" });
 

src/pages/AddHabit/addHabit.tsx

@@ -0,0 +1,111 @@
+//import React, { useEffect } from "react";
+// import { useParams } from "react-router-dom";
+import styled from 'styled-components';
+import arrowImg from "@/assets/period.svg";
+import characterImg from "@/assets/character.svg";
+
+const StyledTotal = styled.div`
+    width: 390px;
+    height: 844px;
+    align-items: center;
+    background-color: #65A55B;
+`;
+
+const StyledInputBox = styled.div`
+    width: 328px;
+    height: 44px;
+    flex-shrink: 0;
+    background-color: #F8F7F7;
+    border-radius: 8px;
+    justify-content: center;
+    margin-left: 31px
+`;
+
+const StyledBox = styled.div`
+    width: 124px;
+    height: 44px;
+    flex-shrink: 0;
+    margin-right: 20px;
+    margin-left: 10px;
+    background-color: #F8F7F7;
+    border-radius: 8px;
+`;
+
+const StyledPeriod = styled.div`
+    display: flex;
+    justify-content: space-around;
+    margin-left: 31px
+    
+`;
+
+const StyledMemoBox = styled.div`
+    width: 328px;
+    height: 150px;
+    flex-shrink: 0;
+    background-color: #F8F7F7;
+    border-radius: 8px;
+    margin-left: 31px
+
+`;
+
+const AddButton = styled.div`
+    align-content: center;
+    width: 328px;
+    height: 48px;
+    border-radius: 12px;
+    background: #D5CCEE;
+    gap: 10px;
+    margin-left: 31px;
+
+`;
+const TextContent = styled.p`
+  text-align: center;
+  font-size: 17px;
+  margin-top: 11px;
+  align-items: 
+`;
+
+const handleClick = () => {
+    console.log(1);
+};
+
+// function setHabbitName(){
+//     console.log(1);
+
+// }
+
+//const [habitName, sethabitName] = useState("");
+
+export default function addHabit() {
+	return (
+    <StyledTotal>
+        <p className="text-left text-[17px] ">
+            습관 이름
+        </p>
+        <StyledInputBox><input type="text"></input></StyledInputBox>
+        {/* <StyledInputBox type="text" placeholder="이름을 입력하세요."></StyledInputBox> */}
+
+        <p className="text-left text-[17px]">기간</p>
+        <StyledPeriod>
+        <StyledBox  onClick={handleClick}>
+            <input type="date"></input>
+        </StyledBox>
+        <img src={arrowImg}></img>
+        <StyledBox>
+            <input type="date"></input>
+        </StyledBox>
+        </StyledPeriod>
+
+
+        <p className="text-left text-[17px]">스티커 선택</p>
+        <img src={characterImg}></img>
+
+        <p className="text-left text-[17px]">배경색 선택</p>
+
+        <p className="text-left text-[17px]">메모</p>
+        <StyledMemoBox><textarea></textarea></StyledMemoBox>
+        <AddButton onClick={handleClick}><TextContent>습관 등록</TextContent></AddButton>
+    </StyledTotal>
+
+    ) 
+}

src/pages/HomePage.tsx

@@ -158,6 +158,7 @@ function HabitComponent({ habitData }: HabitComponentProps) {
 }
 
 export default function HomePage() {
+
 	const sampleRes: ResponseData = {
 		code: "string",
 		message: "string",

src/pages/MyProgress/DoughnutChart.tsx

@@ -0,0 +1,36 @@
+// DoughnutChart.tsx
+import React from 'react';
+import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+
+interface DoughnutChartProps {
+  data: { name: string; value: number; color: string }[];
+}
+
+const DoughnutChart: React.FC<DoughnutChartProps> = ({ data }) => {
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <PieChart>
+        <Pie
+          data={data}
+          dataKey="value"
+          nameKey="name"
+          cx="50%"
+          cy="50%"
+          innerRadius={60}
+          outerRadius={100}
+
+          paddingAngle={5}
+          label
+        >
+          {data.map((entry, index) => (
+            <Cell key={`cell-${index}`} fill={entry.color} />
+          ))}
+        </Pie>
+        <Tooltip />
+        <Legend />
+      </PieChart>
+    </ResponsiveContainer>
+  );
+};
+
+export default DoughnutChart;

src/pages/MyProgress/ProgressBar.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface ProgressBarProps {
+  progress: number;
+}

src/pages/MyProgress/myProgress.tsx

@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+import React from 'react';
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
+import DoughnutChart from './DoughnutChart';
+
+interface DoughnutChartProps {
+  data: number[];
+  labels: string[];
+  backgroundColors: string[];
+}
+
+const StyledTotal= styled.div`
+width: 390px;
+height: 844px;
+align-items: center;
+background-color: #65A55B;
+`;
+
+const StyledText1 = styled.div`
+display: flex;
+width: 328px;
+height: 30px;
+flex-direction: column;
+justify-content: center;
+flex-shrink: 0;
+`;
+
+const StyledText2 = styled.div`
+display: flex;
+width: 328px;
+height: 30px;
+flex-direction: column;
+justify-content: center;
+flex-shrink: 0;
+`;
+
+const StyledTprogress = styled.div`
+
+`;
+
+const Doughnut = styled.div`
+  width: 100%;
+  height: 300px;
+`;
+
+export default function myProgress() {
+    const data = [
+        { name: '도전중', value: 10, color: '#782EBF' },
+        { name: '도전 성공', value: 20, color: '#8E9EE9' },
+        { name: '도전 실패', value: 30, color: '#9D80E0' },
+      ];
+
+	return (
+    <StyledTotal>
+    <StyledText1>현재 90% 성공률로 </StyledText1>
+    <StyledText1>습관 형성중이에요!</StyledText1>
+    <StyledTprogress>
+    <progress id="progress" value="50" max="100"></progress>
+    </StyledTprogress>
+
+
+
+    <StyledText2>지금까지</StyledText2>
+    <StyledText2>11개의 습관을 형성했어요!</StyledText2>
+
+    <Doughnut>
+        <DoughnutChart data={data} />
+    </Doughnut>
+
+    </StyledTotal>
+    );
+}