[Feat] 수강신청 페이지 & 내 과제 페이지 마크업

apps/admin/styled-system/tokens/index.js

@@ -475,6 +475,30 @@ const tokens = {
     value: "#000000",
     variable: "var(--colors-github)",
   },
+  "colors.secondaryYellow": {
+    value: "#F9AB00",
+    variable: "var(--colors-secondary-yellow)",
+  },
+  "colors.secondaryGreen": {
+    value: "#34A853",
+    variable: "var(--colors-secondary-green)",
+  },
+  "colors.secondaryRed": {
+    value: "#EA4335",
+    variable: "var(--colors-secondary-red)",
+  },
+  "colors.errorBackground": {
+    value: "#FBD9D7",
+    variable: "var(--colors-error-background)",
+  },
+  "colors.blueDisabled": {
+    value: "#D7E9FD",
+    variable: "var(--colors-blue-disabled)",
+  },
+  "colors.textBlueDisabled": {
+    value: "#AFD2FC",
+    variable: "var(--colors-text-blue-disabled)",
+  },
   "spacing.-xxs": {
     value: "calc(var(--spacing-xxs) * -1)",
     variable: "var(--spacing-xxs)",

apps/admin/styled-system/tokens/tokens.d.ts

@@ -119,6 +119,12 @@ export type Token =
   | "colors.blueShadow"
   | "colors.discord"
   | "colors.github"
+  | "colors.secondaryYellow"
+  | "colors.secondaryGreen"
+  | "colors.secondaryRed"
+  | "colors.errorBackground"
+  | "colors.blueDisabled"
+  | "colors.textBlueDisabled"
   | "spacing.-xxs"
   | "spacing.-xs"
   | "spacing.-sm"
@@ -170,7 +176,13 @@ export type ColorPalette =
   | "shadowMedium"
   | "blueShadow"
   | "discord"
-  | "github";
+  | "github"
+  | "secondaryYellow"
+  | "secondaryGreen"
+  | "secondaryRed"
+  | "errorBackground"
+  | "blueDisabled"
+  | "textBlueDisabled";
 
 export type ColorToken =
   | "red.50"
@@ -262,6 +274,12 @@ export type ColorToken =
   | "blueShadow"
   | "discord"
   | "github"
+  | "secondaryYellow"
+  | "secondaryGreen"
+  | "secondaryRed"
+  | "errorBackground"
+  | "blueDisabled"
+  | "textBlueDisabled"
   | "colorPalette.50"
   | "colorPalette.100"
   | "colorPalette.150"

apps/admin/styled-system/types/prop-type.d.ts

@@ -663,7 +663,13 @@ export interface UtilityValues {
     | "shadowMedium"
     | "blueShadow"
     | "discord"
-    | "github";
+    | "github"
+    | "secondaryYellow"
+    | "secondaryGreen"
+    | "secondaryRed"
+    | "errorBackground"
+    | "blueDisabled"
+    | "textBlueDisabled";
   textStyle:
     | "display1"
     | "display2"

apps/client/app/(afterLogin)/layout.tsx

@@ -1,10 +1,13 @@
+import { styled } from "@styled-system/jsx";
 import Navbar from "components/Navbar";
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
     <>
       <Navbar />
-      {children}
+      <styled.main paddingTop="3.375rem" paddingX="6.31rem" width="100vw">
+        {children}
+      </styled.main>
     </>
   );
 };

apps/client/app/(afterLogin)/my-study/my-homework/_components/HomeworkHistory.tsx

@@ -0,0 +1,49 @@
+import { styled } from "@styled-system/jsx";
+import { Space, Table, Text } from "@wow-class/ui";
+import Button from "wowds-ui/Button";
+import Tag from "wowds-ui/Tag";
+import TextButton from "wowds-ui/TextButton";
+
+export const HomeworkHistory = () => {
+  const array = [0, 1, 2];
+  return (
+    <>
+      <Text as="h2" typo="h2">
+        과제 히스토리
+      </Text>
+      <Text color="sub" typo="body1">
+        지난 과제의 제출 내역을 확인해요.
+      </Text>
+      <Space height={24} />
+      {array.map(() => (
+        <Table>
+          <Table.Left>
+            <Text as="h3" typo="h3">
+              1주차
+            </Text>
+            <Space width={50} />
+            <Table.Content
+              subText="종료 : 2024년 5월 23일 23:59"
+              text="(과제 제목) HTTP 통신 코드 작성하기"
+            />
+          </Table.Left>
+          <Table.Right>
+            <styled.div paddingX="36px">
+              <TextButton text="과제 명세 확인" />
+            </styled.div>
+            <styled.div paddingX="32px">
+              <Tag color="grey" variant="solid2">
+                과제 휴강
+              </Tag>
+            </styled.div>
+            <styled.div paddingX="25px">
+              <Button size="sm" variant="outline">
+                제출한 과제 확인
+              </Button>
+            </styled.div>
+          </Table.Right>
+        </Table>
+      ))}
+    </>
+  );
+};

apps/client/app/(afterLogin)/my-study/my-homework/_components/HomeworkOverviewBox.tsx

@@ -0,0 +1,56 @@
+import { Flex, styled } from "@styled-system/jsx";
+import { Space, Text } from "@wow-class/ui";
+import Image from "next/image";
+import { Link, Reload } from "wowds-icons";
+import Box from "wowds-ui/Box";
+import Button from "wowds-ui/Button";
+import Tag from "wowds-ui/Tag";
+import TextButton from "wowds-ui/TextButton";
+
+export const HomeworkOverviewBox = () => {
+  return (
+    <Box
+      text={
+        <>
+          <Text color="primary" typo="label2">
+            4주차
+          </Text>
+          <Space height={16} />
+          <Flex gap="xs">
+            <Text as="h2" typo="h2">
+              HTTP 통신 코드 작성하기
+            </Text>
+            <Tag color="blue" variant="solid2">
+              제출 완료
+            </Tag>
+          </Flex>
+          <TextButton style={{ paddingLeft: "0px" }} text="과제 명세 확인" />
+          <Space height="xs" />
+          <Text color="sub">종료 일시 : 2024년 5월 23일 23:59</Text>
+          <Flex gap="xs">
+            <Text as="div" color="sub">
+              제출한 과제 :
+              <Text as="span" color="textBlack">
+                2024-1-Web-Study/Week4
+              </Text>
+            </Text>
+            <Image alt="dot" height={6} src="/images/dot.svg" width={6} />
+            <styled.div color="primary">글자수 충족</styled.div>
+          </Flex>
+          <Space height={26} />
+          <Button
+            icon={<Link stroke="primary" />}
+            style={{ maxWidth: "100%" }}
+            variant="outline"
+          >
+            제출하러 가기
+          </Button>
+          <Space height={8} />
+          <Button icon={<Reload />} style={{ maxWidth: "100%" }}>
+            제출 완료
+          </Button>
+        </>
+      }
+    />
+  );
+};

apps/client/app/(afterLogin)/my-study/my-homework/_components/RepositorySubmissionBox.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { Flex } from "@styled-system/jsx";
+import { Space, Text } from "@wow-class/ui";
+import { useState } from "react";
+import { Edit, Trash, Warn } from "wowds-icons";
+import Box from "wowds-ui/Box";
+import Button from "wowds-ui/Button";
+import Tag from "wowds-ui/Tag";
+import TextField from "wowds-ui/TextField";
+
+export const RepositorySubmissionBox = () => {
+  const [url, setUrl] = useState("");
+  const [isEditing, setIsEditing] = useState(true);
+  const [isInitialSubmit, setIsInitialSubmit] = useState(true);
+
+  const handleChange = (value: string) => {
+    setUrl(value);
+  };
+
+  const handleEditButtonClick = () => {
+    setIsEditing(true);
+  };
+
+  const handleSubmitButtonClick = () => {
+    if (isInitialSubmit) {
+      setIsInitialSubmit(false);
+    } else {
+      console.log("모달 오픈");
+    }
+    setIsEditing(false);
+  };
+
+  return (
+    <Box
+      text={
+        <>
+          <Text color="primary" typo="label2">
+            레포지토리
+          </Text>
+          <Space height={16} />
+          <Flex gap="xs">
+            <Text as="h2" typo="h2">
+              과제 제출을 위한 레포지토리 URL 입력하기
+            </Text>
+            {!isEditing && (
+              <Tag color="blue" variant="solid2">
+                제출 완료
+              </Tag>
+            )}
+          </Flex>
+          <Space height={4} />
+          {isEditing && isInitialSubmit && (
+            <Flex alignItems="center" gap="xxs">
+              <Warn fill="error" stroke="error" />
+              <Text color="error" typo="body1">
+                입력하지 않으면 앞으로의 과제를 제출할 수 없어요.
+              </Text>
+            </Flex>
+          )}
+          {!isEditing && !isInitialSubmit && (
+            <Text color="sub">최초 과제 제출 전 까지만 수정이 가능해요.</Text>
+          )}
+          <Space height={26} />
+          {isEditing && (
+            <TextField
+              label=""
+              placeholder="URL 을 입력하세요"
+              value={url}
+              onChange={handleChange}
+            />
+          )}
+          {!isEditing && (
+            <Flex
+              backgroundColor="backgroundAlternative"
+              borderRadius="5px"
+              color="sub"
+              justifyContent="space-between"
+              paddingX="24px"
+              paddingY="18px"
+              textStyle="h2"
+            >
+              {url}
+              <Flex gap="xs" marginLeft="auto">
+                <Edit stroke="textBlack" onClick={handleEditButtonClick} />
+                <Trash stroke="textBlack" />
+              </Flex>
+            </Flex>
+          )}
+          <Space height={62} />
+          <Button
+            style={{ maxWidth: "100%" }}
+            onClick={handleSubmitButtonClick}
+          >
+            입력하기
+          </Button>
+        </>
+      }
+    />
+  );
+};

apps/client/app/(afterLogin)/my-study/my-homework/_components/index.ts

@@ -0,0 +1,3 @@
+export * from "./HomeworkHistory";
+export * from "./HomeworkOverviewBox";
+export * from "./RepositorySubmissionBox";

apps/client/app/(afterLogin)/my-study/my-homework/page.tsx

@@ -1,5 +1,38 @@
+import { Flex, styled } from "@styled-system/jsx";
+import { Space } from "@wow-class/ui";
+import Image from "next/image";
+
+import {
+  HomeworkHistory,
+  HomeworkOverviewBox,
+  RepositorySubmissionBox,
+} from "@/(afterLogin)/my-study/my-homework/_components";
+
 const MyHomeworkPage = () => {
-  return <div>MyHomework</div>;
+  return (
+    <>
+      <Flex gap="sm" textStyle="h1">
+        <styled.h1 color="textBlack">나의 과제</styled.h1>
+        <Image alt="dot" height={6} src="/images/dot.svg" width={6} />
+        <styled.h1 color="primary">기초 웹 스터디</styled.h1>
+      </Flex>
+      <Space height={8} />
+      <div>
+        제출 완료하기 버튼을 누르면 등록한
+        <styled.span color="blueHover"> GitHub 레포지토리</styled.span>의 main
+        브랜치에서 가장 최신 상태의 WIL.md 파일이 제출돼요. <br />
+        과제는 기한 내에 여러 번 제출할 수 있으나, 가장 마지막 제출만 최종
+        제출로 인정해요.
+      </div>
+      <Space height={48} />
+      <Flex gap="lg">
+        <RepositorySubmissionBox />
+        <HomeworkOverviewBox />
+      </Flex>
+      <Space height={64} />
+      <HomeworkHistory />
+    </>
+  );
 };
 
 export default MyHomeworkPage;