[#110] 홈화면 오늘마감

src/components/Home/to_do_compo/my_page_main/Category.styles.ts

@@ -0,0 +1,26 @@
+import { COLORS } from '@/styles/constants/colors';
+import styled from '@emotion/styled';
+import { TEXT_STYLES } from '@/styles/constants/textStyles';
+
+// 가독성을 위해 스타일 파일은 별도로 둡니다.
+
+interface CategoryProps {
+  /** 상태값 종류, true->채워진 배경 | false->흰 배경 */
+  BgColor: boolean;
+}
+
+export const Category = styled.div<CategoryProps>`
+  height: 35px;
+  padding: 0 15px;
+  line-height: 35px;
+  border-radius: 20px;
+  text-align: center;
+  display: inline-block;
+  color: ${(props) =>
+    props.BgColor ? COLORS.grayscale.white : COLORS.SSU.primary};
+  background-color: ${(props) =>
+    props.BgColor ? COLORS.SSU.primary : COLORS.grayscale.white};
+  border: 1px solid
+    ${(props) => (props.BgColor ? COLORS.SSU.primary : COLORS.SSU.primary)};
+  ${TEXT_STYLES.CapM14};
+`;

src/components/Home/to_do_compo/my_page_main/subject_card.styles.tsx

@@ -0,0 +1,74 @@
+import { COLORS } from '@/styles/constants/colors';
+import {TEXT_STYLES} from '@/styles/constants/textStyles';
+import styled from '@emotion/styled';
+import React from 'react'; // React import 추가
+
+interface Props {
+  width?: number;
+  height?: number;
+  color?:string;
+  margin?:number;
+}
+
+export const SubjectCard = styled.div<Props>`
+  width: ${(props) => (props.width ? `${props.width}px` : '171px')};
+  height: ${(props) => (props.height ? `${props.height}px` : "auto")};
+  padding: 15px;
+  margin-left:${(props) => (props.margin ? `${props.margin}px` : '5px')};
+
+  border-radius: 15px;
+  background-color: ${(props) => (props.color ? `${props.color}` : `${COLORS.SSU.accept}`)};
+
+  outline: 1px solid ${COLORS.grayscale.white}; 
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+`;
+
+export const NoticeNumRound = styled.div<Props>`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: ${(props) => (props.width ? `${props.width}px` : '24px')};
+  height: ${(props) => (props.height ? `${props.height}px` : '24px')};
+  border-radius: 12px;
+  color: ${COLORS.grayscale.white};
+  font-size: 12px; /* font-size 값 수정 */
+  background-color: ${(props) => (props.color ? `${props.color}` : `${COLORS.SSU.error}`)};
+
+`;
+interface Props2 {
+  fontSize?: number;
+  color?:string;
+  fontFamily?: string;
+  letterSpacing?: number;
+  fontWeight?: number;
+
+}
+export const SubjectCardText = styled.div<Props2>`
+  color: ${(props) => (props.color ? `${props.color}` : COLORS.grayscale.Gray1)};
+  font-size: ${(props) => (props.fontSize ? `${props.fontSize+3}px` : `${TEXT_STYLES.CapR14.fontSize+3}px` )};
+  font-weight: ${(props) => (props.fontWeight ? `${props.fontWeight}` : TEXT_STYLES.CapR14.fontWeight)};
+  letter-spacing: ${(props) => (props.letterSpacing ? `${props.letterSpacing}` : TEXT_STYLES.CapR14.letterSpacing)};
+  font-family: ${(props) => (props.fontFamily ? `${props.fontFamily}` : TEXT_STYLES.CapR14.fontFamily)};
+`;
+
+interface CategoryProps {
+  /** 상태값 종류, true->채워진 배경 | false->흰 배경 */
+  BgColor: boolean;
+}
+
+export const Category = styled.div<CategoryProps>`
+  height: 35px;
+  padding: 0 15px;
+  line-height: 35px;
+  border-radius: 20px;
+  text-align: center;
+  display: inline-block;
+  color: ${(props) =>
+    props.BgColor ? COLORS.grayscale.white : COLORS.SSU.primary};
+  background-color: ${(props) =>
+    props.BgColor ? COLORS.SSU.primary : COLORS.grayscale.white};
+  border: 1px solid
+    ${(props) => (props.BgColor ? COLORS.SSU.primary : COLORS.SSU.primary)};
+  ${TEXT_STYLES.CapM14};
+`;

src/components/Home/to_do_compo/my_page_main/subject_card.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import {TEXT_STYLES} from '@/styles/constants/textStyles';
+import { useState } from "react";
+import * as styles from "./subject_card.styles";
+import { COLORS } from "@/styles/constants/colors";
+
+
+interface FormData {
+  title?: string;
+  time?: string;
+  color:string;
+  width?:number;
+  height?:number;
+  errN?:number
+}
+
+export default function SubjectHomeCard(f:FormData) {
+  const [formData, setFormData] = useState<FormData>({
+    title: f.title,
+    time: f.time,
+    errN:f.errN,
+    color: f.color,
+    width:f.width,
+    height:f.height
+  });
+  return (
+
+      <styles.SubjectCard color={formData.color} width={formData.width} height={formData.height}
+      onClick={()=>{console.log("clicked")}}>
+        <div style={{ width:"170px" ,display: "flex", 
+            justifyContent: "space-between", alignItems: "center"}}>
+            <styles.SubjectCardText color={COLORS.grayscale.Black} 
+            fontSize={TEXT_STYLES.HeadM18.fontSize} fontFamily={TEXT_STYLES.HeadM18.fontFamily}
+            fontWeight={TEXT_STYLES.HeadM18.fontWeight} letterSpacing={TEXT_STYLES.HeadM18.letterSpacing}
+            >{formData.title}</styles.SubjectCardText>
+            <styles.NoticeNumRound>
+              <styles.SubjectCardText color={COLORS.grayscale.white} 
+              fontSize={TEXT_STYLES.CapM12.fontSize} fontFamily={TEXT_STYLES.CapM12.fontFamily}
+              fontWeight={TEXT_STYLES.CapM12.fontWeight} letterSpacing={TEXT_STYLES.CapM12.letterSpacing}
+              >{formData.errN}</styles.SubjectCardText>
+            </styles.NoticeNumRound>
+        </div>
+        <styles.SubjectCardText> {formData.time}</styles.SubjectCardText>
+      </styles.SubjectCard>
+  );
+}

src/components/Home/to_do_compo/my_to_do.tsx

@@ -0,0 +1,84 @@
+
+import React, { ChangeEvent, useState } from 'react';
+import SubjectHomeCard from './my_page_main/subject_card';
+import Category from '@/components/common/Category';
+interface FormData {
+  lectures?:Array<Array<string>>;
+  assigns?:Array<Array<string>>;
+  width?:number;
+}
+const ThingsEndedToday: React.FC<FormData> = () => {
+  const [formData, setFormData] = useState<FormData>({
+    lectures:[["일본어 입문","23:00까지","1"],["웹 프로그래밍","23:00까지","3"]],
+    assigns:[["Ui/UX디자인","23:00까지","3"],["웹 프로그래밍","23:00까지","2"]],
+    width: 390
+  });
+  const colorList=["#FFD4D4","#FFDDED","#FFE2D2","#FFF1CD","#E9F7C1","#C2F0D7","#D0E0FF",
+    "#D5F3F2","#E4DAD5","#E9E1F7","#EBEBEB" ]
+
+  return (
+    <div style={{display: "flex",
+    flexDirection: "column", 
+    alignItems: "center", width:`${formData.width}`}}>
+
+      <div style={{
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "flex-start", // 왼쪽 정렬을 위해 flex-start 사용
+        alignItems: "center", // 수직 정렬은 중앙 정렬 (선택사항)
+        width: `${formData.width}px`, marginBottom:"10px"
+      }}>
+        <Category BgColor={false} label={"과목"} ></Category>
+      </div>
+
+
+      <div style={{display: "flex",
+      flexDirection: "row", 
+      alignItems: "center", width:`${formData.width}`}}>
+        {formData.lectures!.slice(0,2).map((lecture, index) => (
+            <>
+                <SubjectHomeCard
+                  key={index}
+                  color={colorList[index]}
+                  title={lecture[0]}
+                  time={lecture[1]}
+                  errN={parseInt(lecture[2])}
+                  width={171}
+                />
+            </>
+        ))}
+      </div>
+
+          <div style={{height:"10px"}}></div>
+      <div style={{
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "flex-start", // 왼쪽 정렬을 위해 flex-start 사용
+        alignItems: "center", // 수직 정렬은 중앙 정렬 (선택사항)
+        width: `${formData.width}px`, marginBottom:"10px"
+      }}>
+        <Category BgColor={false} label={"과목"} ></Category>
+      </div>
+
+
+      <div style={{display: "flex",
+      flexDirection: "row", 
+      alignItems: "center", width:`${formData.width}`}}>
+        {formData.assigns!.slice(0,2).map((lecture, index) => (
+            <>
+                <SubjectHomeCard
+                  key={index}
+                  color={colorList[index+2]}
+                  title={lecture[0]}
+                  time={lecture[1]}
+                  errN={parseInt(lecture[2])}
+                  width={171}
+                />
+            </>
+        ))}
+      </div>
+
+    </div>
+  );
+}
+export default ThingsEndedToday;