[#109] 마이페이지 6-2 분할 첫번째

package.json

@@ -29,6 +29,7 @@
     "react-router-dom": "6.15.0",
     "recoil": "0.7.7",
     "recoil-persist": "5.1.0",
+    "styled-components": "^6.0.8",
     "typescript": "5.1.3",
     "zod": "3.21.4"
   },

src/components/myPage/assignesAbout/Header/Header.styles.tsx

@@ -0,0 +1,55 @@
+import { COLORS } from '@/styles/constants/colors';
+import styled from '@emotion/styled';
+
+// 가독성을 위해 스타일 파일은 별도로 둡니다.
+
+interface SubmitBoxnProps {
+  width?: number; 
+  height?: number;
+  color?: string; 
+  margin?:number;
+}
+
+export const SubmitBox = styled.div<SubmitBoxnProps>`
+  width: ${(props) => (props.width ? `${props.width}px` : '390px')};
+  height: ${(props) => (props.height ? `${props.height}px` : '46px')};
+  margin-top: ${(props) => (props.margin ? `${props.margin}px` : '0px')};
+  border-radius: 12px;
+  text-align: center;
+  margin-right:17px;
+
+  display: flex;
+  align-items: center; 
+  justify-content: space-between; 
+
+`;
+
+
+interface SubmitBoxButtonnProps {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+export const SubmitBoxButton = styled.div<SubmitBoxButtonnProps>`
+  width: ${(props) => (props.width ? `${props.width}px` : '18px')};
+  height: ${(props) => (props.height ? `${props.height}px` : '18px')};
+  display: flex;
+  align-items: center; 
+  justify-content: center;
+  font-size:18px;
+`;
+
+interface SubmitBoxTitleProps {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+export const SubmitBoxTitle = styled.div<SubmitBoxTitleProps>`
+  width: ${(props) => (props.width ? `${props.width}px` : '52px')};
+  height: ${(props) => (props.height ? `${props.height}px` : '30px')};
+  display: flex;
+  align-items: center; 
+  justify-content: center;
+  font-size:20px;
+`;
+

src/components/myPage/assignesAbout/Header/Header.tsx

@@ -0,0 +1,26 @@
+import { SubmitBox,SubmitBoxButton,SubmitBoxTitle } from "./Header.styles";
+
+interface SubmitHeadernProps {
+  label?: string;
+  width?: number;
+  height?: number;
+  color?: string;
+
+  onClose?:()=>void;
+}
+
+const SubmitHeader = ({onClose,width,label}: SubmitHeadernProps) => (
+  <>
+    <SubmitBox width={width}>
+        <SubmitBoxButton width={28} onClick={onClose}>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <path d="M12 2l-10 10 10 10 2-2-8-8 8-8z"/>
+          </svg>
+        </SubmitBoxButton>
+        <SubmitBoxTitle width={100}>{label}</SubmitBoxTitle>
+        <SubmitBoxTitle width={28}></SubmitBoxTitle>
+    </SubmitBox>
+  </>
+);
+
+export default SubmitHeader;

src/components/myPage/assignesAbout/HorizontalLine/HorizontalLine.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { COLORS } from '@/styles/constants/colors';
+// HorizontalLine.js
+import styled from 'styled-components';
+interface HorizontalLineProps {
+  width?: number;
+  color?: string;
+  height?:number;
+}
+
+const HorizontalLineWrapper = styled.div<HorizontalLineProps>`
+  width: ${(props) => (props.width ? `${props.width}px` : '400px')};
+  height: ${(props) => (props.height ? `${props.height}px` : '1px')};
+  background-color: ${(props) => (props.color ? `${props.color}` : `${COLORS.grayscale.Gray1}`)};
+  margin: 10px 0;
+`;
+const HorizontalLine = ({ width, height }: HorizontalLineProps) => {
+  return <HorizontalLineWrapper width={width} height={height} />;
+};
+
+export default HorizontalLine;

src/components/myPage/assignesAbout/ann_card.styles.tsx

@@ -0,0 +1,44 @@
+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` : '100px')};
+  height: ${(props) => (props.height ? `${props.height}px` : '73px')};
+  margin-left:${(props) => (props.margin ? `${props.margin}px` : '5px')};
+
+  border-radius: 15px;
+  background-color: ${(props) => (props.color ? `${props.color}` : `${COLORS.grayscale.Gray5}`)};
+
+  display: flex; 
+  flex-direction: row;
+  align-items: center;
+
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+`;
+
+interface Props2 {
+  fontSize?: number;
+  color?:string;
+  fontFamily?: string;
+  letterSpacing?: number;
+  fontWeight?: number;
+
+}
+export const SubjectCardText = styled.div<Props2>`
+  width:80px;
+  color: ${(props) => (props.color ? `${props.color}` : COLORS.grayscale.Gray1)};
+  font-size: ${(props) => (props.fontSize ? `${props.fontSize+3}px` : `${TEXT_STYLES.CapR14.fontSize}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)};
+  margin-bottom: 10px;
+`;

src/components/myPage/assignesAbout/attendance_table/each_week.styles.tsx

@@ -0,0 +1,47 @@
+import { COLORS } from '@/styles/constants/colors';
+import styled from '@emotion/styled';
+import { TEXT_STYLES } from '@/styles/constants/textStyles';
+
+// 가독성을 위해 스타일 파일은 별도로 둡니다.
+
+interface weekBoxProps {
+  width?: number; 
+  height?: number;
+  color?: string; 
+  text?:keyof typeof TEXT_STYLES;
+}
+
+
+export const weekBox = styled.td<weekBoxProps>`
+  width: ${(props) => (props.width ? `${props.width}px` : '155px')};
+  height: ${(props) => (props.height ? `${props.height}px` : '74px')};
+  text-align: left;
+
+  color: ${(props) => (props.color ? `${props.color}` : COLORS.grayscale.Gray1)};
+  font-size: ${(props) => (props.text ? `${TEXT_STYLES[props.text!].fontSize}px` : `${TEXT_STYLES.CapM14.fontSize}px` )};
+  font-weight: ${(props) => (props.text? `${TEXT_STYLES[props.text!].fontWeight}` : TEXT_STYLES.CapM14.fontWeight)};
+  letter-spacing: ${(props) => (props.text ? `${TEXT_STYLES[props.text!].letterSpacing}` : TEXT_STYLES.CapM14.letterSpacing)};
+  font-family: ${(props) => (props.text ? `${TEXT_STYLES[props.text!].fontFamily}` : TEXT_STYLES.CapM14.fontFamily)};
+  margin-top:5px;
+  padding-left:15px
+`;
+
+export const smallBox = styled.td<weekBoxProps>`
+  width: ${(props) => (props.width ? `${props.width}px` : '155px')};
+  height: ${(props) => (props.height ? `${props.height}px` : '37px')};
+  text-align: left;
+
+  color: ${(props) => (props.color ? `${props.color}` : COLORS.grayscale.Gray1)};
+  font-size: ${(props) => (props.text ? `${TEXT_STYLES[props.text!].fontSize}px` : `${TEXT_STYLES.CapR12.fontSize}px` )};
+  font-weight: ${(props) => (props.text? `${TEXT_STYLES[props.text!].fontWeight}` : TEXT_STYLES.CapR12.fontWeight)};
+  letter-spacing: ${(props) => (props.text ? `${TEXT_STYLES[props.text!].letterSpacing}` : TEXT_STYLES.CapR12.letterSpacing)};
+  font-family: ${(props) => (props.text ? `${TEXT_STYLES[props.text!].fontFamily}` : TEXT_STYLES.CapR12.fontFamily)};
+  margin-top:5px
+`;
+
+export const smallBox2 = styled.td<weekBoxProps>`
+  width: ${(props) => (props.width ? `${props.width}px` : '80px')};
+  height: ${(props) => (props.height ? `${props.height}px` : '37px')};
+  text-align: center;
+`;
+

src/components/myPage/assignesAbout/attendance_table/each_week.tsx

@@ -0,0 +1,46 @@
+import * as styles from "./each_week.styles"
+
+interface SubmitHeadernProps {
+  label?: string;
+  width?: number;
+  height?: number;
+  color?: string;
+
+  weekN:number;
+  attList:Array<number>
+
+}
+
+const EachWeekAttendance = ({weekN,attList,color}: SubmitHeadernProps) => {
+  const rows_num=attList.length;
+  const mapNumberToText = (number:number) => {
+    switch (number) {
+      case 1:
+        return '/assets/icon/Shape/Ellipse.svg'; //출석
+      case 2:
+        return '/assets/icon/Shape/Triangle.svg'; //지각
+      case 3:
+        return '/assets/icon/Shape/X.svg';//결석
+      default:
+        return ;
+    }
+  };
+  const attIconList=attList.map(mapNumberToText)
+  const smallBoxHeight=74/rows_num;
+  return (<>
+    <tr style={{backgroundColor:color}}>
+      <styles.weekBox rowSpan={rows_num}>{weekN}주차</styles.weekBox>
+      <styles.smallBox height={smallBoxHeight}>1차시</styles.smallBox>
+      <styles.smallBox2 height={smallBoxHeight}><img src={attIconList[0]}/></styles.smallBox2>
+    </tr>
+
+   {attIconList.slice(1,rows_num).map((item, index)  => (
+      <tr style={{backgroundColor:color}}>
+        <styles.smallBox height={smallBoxHeight}>{index+2}차시</styles.smallBox>
+        <styles.smallBox2 height={smallBoxHeight}><img src={item}/></styles.smallBox2>
+      </tr>
+      ))}
+  </>)
+};
+
+export default EachWeekAttendance;

src/components/myPage/assignesAbout/my_assign_comps/my_page_ann_view.tsx

@@ -0,0 +1,91 @@
+
+import React, { ChangeEvent, useState } from 'react';
+import { Subject } from '@/components/myPage/assignesAbout/subjects_data';
+import SubmitHeader from '@/components/myPage/assignesAbout/Header/Header';
+import { COLORS } from '@/styles/constants/colors';
+import HorizontalLine from '@/components/myPage/assignesAbout/HorizontalLine/HorizontalLine';
+import * as style from "@/components/myPage/assignesAbout/total.styles"
+import { TEXT_STYLES } from '@/styles/constants/textStyles';
+import AnnouncemeDownLoadFile from '@/components/myPage/assignesAbout/my_page_announce/donwload_file_ann';
+interface FormData_d {
+  subject:Subject;
+  width:number;
+  assIndex:number;
+}
+const MypageAssignList: React.FC<FormData_d> = ({ width,subject,assIndex }) => {
+  const [formData, setFormData] = useState<FormData_d>({
+    subject:subject,
+    width: width,
+    assIndex: assIndex,
+  });
+  const text_m="information my information, your information shallo \n infor infor";
+  formData.subject= new Subject("웹프로그래밍 (가)","2028년 19학기-34",1241523);
+  formData.subject.add_assign_data("과제1",new Date(2023,4,5),new Date(2023,12,3),new Date(2023,12,29),"information","cor",10,8)
+  formData.subject.add_assign_data("과제2",new Date(2023,4,5),new Date(2223,3),new Date(2023,12,29),"information","cor",10,8)
+  formData.subject.add_assign_data("기말고사 공지",new Date(2023,4,5),new Date(2223,3),new Date(2023,12,29),text_m,"cor",10,8)
+  formData.width=390;
+  formData.assIndex=0;
+
+  function load_subjects(){
+    //subject API로 받아와야됨
+  }
+  function before_page(){
+    //이전페이지로
+  }
+  return (
+    <div style={{display: "flex",
+    flexDirection: "column", 
+    alignItems: "center", width:`${formData.width}`}}>
+      <SubmitHeader width={formData.width} onClose={before_page} label="공지"/>
+
+      <style.MyAssignTitleBox height={84}> 
+        <style.MyAssignTitleBoxText color={COLORS.grayscale.Black} 
+          fontSize={TEXT_STYLES.HeadM18.fontSize+5} fontFamily={TEXT_STYLES.HeadM18.fontFamily}
+          fontWeight={TEXT_STYLES.HeadM18.fontWeight} letterSpacing={TEXT_STYLES.HeadM18.letterSpacing}
+          > {formData.subject.get_assign_title(2)}
+        </style.MyAssignTitleBoxText>
+        <div style={{height:"5px"}}></div>
+        <div style={{ width:"80px" ,display: "flex", 
+        justifyContent: "space-between", alignItems: "center"}}>
+            <img src="/assets/icon/Nav/calendar_off.svg" style={{marginTop:"2px",
+            alignSelf: "flex-start", 
+            width: "20px", marginRight:"4px"}}/>
+            <style.MyAssignTitleBoxText>{formData.subject.get_assign_startdate(2)}</style.MyAssignTitleBoxText>
+        </div>
+      </style.MyAssignTitleBox>
+
+      <HorizontalLine height={1}></HorizontalLine>
+
+      <style.MyAssignTitleBox height={254} style={{
+        justifyContent:"flex-start", }}>
+        <style.MyAssignTitleBoxText color={COLORS.grayscale.Black} 
+          fontSize={TEXT_STYLES.HeadM18.fontSize+5} fontFamily={TEXT_STYLES.HeadM18.fontFamily}
+          fontWeight={TEXT_STYLES.HeadM18.fontWeight} letterSpacing={TEXT_STYLES.HeadM18.letterSpacing}
+          style={{marginTop:"5px"}}> {formData.subject.get_assign_information(2)}
+        </style.MyAssignTitleBoxText>
+      </style.MyAssignTitleBox>
+
+      <HorizontalLine height={1}></HorizontalLine>
+
+
+      <style.MyAssignTitleBox height={43} style={{
+        justifyContent:"flex-start", }}> 
+        <div style={{height:"5px"}}></div>
+        <div style={{ width:"150px" ,display: "flex", 
+        justifyContent: "space-between", alignItems: "center"}}>
+            <img src="/assets/icon/Icon24/AttachedFile.svg" style={{marginTop:"2px",
+            alignSelf: "flex-start", 
+            width: "20px", marginRight:"4px"}}/>
+            <style.MyAssignTitleBoxText color={COLORS.grayscale.Black} 
+            fontSize={TEXT_STYLES.HeadM18.fontSize+3} fontFamily={TEXT_STYLES.HeadM18.fontFamily}
+            fontWeight={TEXT_STYLES.HeadM18.fontWeight} letterSpacing={TEXT_STYLES.HeadM18.letterSpacing}
+            style={{width:"150px", marginTop:"0px" }} >첨부파일
+            </style.MyAssignTitleBoxText>
+        </div>
+      </style.MyAssignTitleBox>
+
+      <AnnouncemeDownLoadFile title="첨부파일" file_link="dd" color={COLORS.grayscale.Black}></AnnouncemeDownLoadFile>
+    </div>
+  );
+}
+export default MypageAssignList;