[#110] 홈화면 오늘마감

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

@@ -0,0 +1,25 @@
+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;
+  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,86 @@
+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 {
+  isBgColor: 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.isBgColor ? COLORS.grayscale.white : COLORS.SSU.primary};
+  background-color: ${(props) =>
+    props.isBgColor ? COLORS.SSU.primary : COLORS.grayscale.white};
+  border: 1px solid
+    ${(props) => (props.isBgColor ? COLORS.SSU.primary : COLORS.SSU.primary)};
+  ${TEXT_STYLES.CapM14};
+`;
+
+
+interface SubjectCardOuterProps {
+  width?:number;
+
+}
+
+export const SubjectCardOuter = styled.div<SubjectCardOuterProps>`
+    width: ${(props) => (props.width ? `${props.width}px` : '171px')};
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`;

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

@@ -0,0 +1,45 @@
+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;
+  alarmN?:number
+}
+
+export default function SubjectHomeCard(f:FormData) {
+  const [formData, setFormData] = useState<FormData>({
+    title: f.title,
+    time: f.time,
+    alarmN:f.alarmN,
+    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")}}>
+        <styles.SubjectCardOuter>
+            <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.alarmN}</styles.SubjectCardText>
+            </styles.NoticeNumRound>
+          </styles.SubjectCardOuter>
+        <styles.SubjectCardText> {formData.time}</styles.SubjectCardText>
+      </styles.SubjectCard>
+  );
+}

src/components/Home/to_do_compo/my_to_do.styles.tsx

@@ -0,0 +1,20 @@
+
+import styled from '@emotion/styled';
+
+interface CardDisplaysProps {
+  width?:number,
+  margin?:number
+}
+
+export const CardDisplays = styled.div<CardDisplaysProps>`
+display: flex;
+flex-direction: row; 
+align-items: center;
+justify-content: flex-start, 
+
+
+width:${(props) =>
+  props.width ?  `${props.width}px`  : "390px"};
+margin-bottom:${(props) =>
+  props.margin ?  `${props.margin}px`  : "0px"};
+`;

src/components/Home/to_do_compo/my_to_do.tsx

@@ -0,0 +1,76 @@
+
+import React, { ChangeEvent, useState } from 'react';
+import SubjectHomeCard from './my_page_main/subject_card';
+import Category from '@/components/common/Category';
+import * as styled from '@/components/Home/to_do_compo/my_to_do.styles';
+interface FormData {
+  lectures?:Array<Array<string>>;
+  assigns?:Array<Array<string>>;
+  width?:number;
+}
+const ThingsEndedToday: React.FC<FormData> = ({lectures,assigns,width}: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 [formData, setFormData] = useState<FormData>({
+    lectures:lectures,
+    assigns:assigns,
+    width: width
+  });
+  데이터 받아올 때는 위의 코드 대신 사용
+  */
+  const colorList=["#FFD4D4","#FFDDED","#FFE2D2","#FFF1CD","#E9F7C1","#C2F0D7","#D0E0FF",
+    "#D5F3F2","#E4DAD5","#E9E1F7","#EBEBEB" ]
+
+  return (
+    <div>
+
+      <styled.CardDisplays width={formData.width} margin={10} >
+        <Category BgColor={false} label={"과목"} ></Category>
+      </styled.CardDisplays>
+
+
+      <styled.CardDisplays width={formData.width} margin={10} >
+        {formData.lectures!.slice(0,2).map((lecture, index) => (
+            <>
+                <SubjectHomeCard
+                  key={index}
+                  color={colorList[index]}
+                  title={lecture[0]}
+                  time={lecture[1]}
+                  alarmN={parseInt(lecture[2])}
+                  width={171}
+                />
+            </>
+        ))}
+      </styled.CardDisplays>
+
+      <div style={{height:"10px"}}></div>
+
+
+      <styled.CardDisplays width={formData.width} margin={10} >
+        <Category BgColor={false} label={"과목"} ></Category>
+      </styled.CardDisplays>
+
+      <styled.CardDisplays width={formData.width} margin={10} >
+        {formData.assigns!.slice(0,2).map((lecture, index) => (
+            <>
+                <SubjectHomeCard
+                  key={index}
+                  color={colorList[index+2]}
+                  title={lecture[0]}
+                  time={lecture[1]}
+                  alarmN={parseInt(lecture[2])}
+                  width={171}
+                />
+            </>
+        ))}
+      </styled.CardDisplays>
+
+    </div>
+  );
+}
+export default ThingsEndedToday;