[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.section paddingTop="3.375rem" paddingX="6.31rem" width="100vw">
+        {children}
+      </styled.section>
     </>
   );
 };

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

@@ -1,5 +1,37 @@
-const MyHomework = () => {
-  return <div>MyHomework</div>;
+import { Flex, styled } from "@styled-system/jsx";
+import { Space } from "@wow-class/ui";
+import {
+  DefaultHomeworkBox,
+  HomeworkHistory,
+  TextFieldHomeworkBox,
+} from "components/my-homework";
+import Image from "next/image";
+
+const MyHomeworkPage = () => {
+  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">
+        <TextFieldHomeworkBox />
+        <DefaultHomeworkBox />
+      </Flex>
+      <Space height={64} />
+      <HomeworkHistory />
+    </>
+  );
 };
 
-export default MyHomework;
+export default MyHomeworkPage;

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

@@ -1,5 +1,51 @@
-const StudyApply = () => {
-  return <div>StudyApply</div>;
+import { css } from "@styled-system/css";
+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";
+
+const StudyApplyPage = () => {
+  const array = [0, 1, 2];
+  return (
+    <>
+      <Text as="h1" typo="h1">
+        신청 가능한 스터디
+      </Text>
+      <Space height={19} />
+      {array.map(() => (
+        <Table
+          center={
+            <>
+              <Table.Content
+                subText="(스터디 한 줄 소개-스터디 상세 설명 노션 링크로 연결)"
+                text="기초 웹 스터디"
+                textRight={
+                  <Tag color="yellow" variant="solid1">
+                    신규
+                  </Tag>
+                }
+              />
+              <p className={textCellStyle}>강가은 멘토</p>
+              <p className={textCellStyle}>화 18:00-19:00</p>
+              <p className={textCellStyle}>4주 코스</p>
+              <p className={textCellStyle}>06.18 개강</p>
+              <styled.div paddingX="24px">
+                <Button size="sm" variant="solid">
+                  수강 신청
+                </Button>
+              </styled.div>
+            </>
+          }
+        />
+      ))}
+    </>
+  );
 };
 
-export default StudyApply;
+export default StudyApplyPage;
+
+const textCellStyle = css({
+  color: "textBlack",
+  paddingX: "28px",
+  textStyle: "body1",
+});

apps/client/components/my-homework/DefaultHomeworkBox.tsx

@@ -0,0 +1,57 @@
+import { css } from "@styled-system/css";
+import { Flex, styled } from "@styled-system/jsx";
+import { Space, Text } from "@wow-class/ui";
+import Image from "next/image";
+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 DefaultHomeworkBox = () => {
+  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" />
+          <div className={descriptionStyle}>
+            종료 일시 : 2024년 5월 23일 23:59
+          </div>
+          <Flex className={descriptionStyle} gap="xs">
+            <div>
+              제출한 과제 :
+              <styled.span color="textBlack">
+                2024-1-Web-Study/Week4
+              </styled.span>
+            </div>
+            <Image alt="dot" height={6} src="/images/dot.svg" width={6} />
+            <styled.div color="primary">글자수 충족</styled.div>
+          </Flex>
+          <Space height={26} />
+          <Button style={{ maxWidth: "100%" }} variant="outline">
+            제출하러 가기
+          </Button>
+          <Space height={8} />
+          <Button style={{ maxWidth: "100%" }}>제출 완료</Button>
+        </>
+      }
+    />
+  );
+};
+
+const descriptionStyle = css({
+  color: "sub",
+  textStyle: "body1",
+});

apps/client/components/my-homework/HomeworkHistory.tsx

@@ -0,0 +1,51 @@
+import { styled } from "@styled-system/jsx";
+import { Space, Table } 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 (
+    <>
+      <styled.h2 textStyle="h2">과제 히스토리</styled.h2>
+      <styled.div color="sub" textStyle="body1">
+        지난 과제의 제출 내역을 확인해요.
+      </styled.div>
+      <div style={{ height: "24px" }} />
+      {array.map(() => (
+        <Table
+          left={
+            <>
+              <styled.h3 color="textBlack" textStyle="h3">
+                1주차
+              </styled.h3>
+              <Space width={50} />
+              <Table.Content
+                subText="종료 : 2024년 5월 23일 23:59"
+                text="(과제 제목) HTTP 통신 코드 작성하기"
+              />
+            </>
+          }
+          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>
+            </>
+          }
+        />
+      ))}
+    </>
+  );
+};

apps/client/components/my-homework/TextFieldHomeworkBox.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { Flex } from "@styled-system/jsx";
+import { Space, Text } from "@wow-class/ui";
+import { useState } from "react";
+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 TextFieldHomeworkBox = () => {
+  const [value, setValue] = useState("");
+  //TODO: 모달을 통해 제출 확인하는 부분 추가
+  const [isSubmit, setIsSubmit] = useState(false);
+
+  const handleChange = (value: string) => {
+    setValue(value);
+  };
+
+  return (
+    <Box
+      text={
+        <>
+          <Text color="primary" typo="label2">
+            레포지토리
+          </Text>
+          <Space height={16} />
+          <Flex gap="xs">
+            <Text as="h2" typo="h2">
+              과제 제출을 위한 레포지토리 URL 입력하기
+            </Text>
+            <Tag color="blue" variant="solid2">
+              제출 완료
+            </Tag>
+          </Flex>
+          <Space height={4} />
+          <Text color="error" typo="body1">
+            입력하지 않으면 앞으로의 과제를 제출할 수 없어요.
+          </Text>
+          <Space height={26} />
+          {!isSubmit && (
+            <TextField
+              label=""
+              placeholder="URL 을 입력하세요"
+              value={value}
+              onChange={handleChange}
+            />
+          )}
+          {isSubmit && (
+            <Flex
+              backgroundColor="backgroundAlternative"
+              borderRadius="5px"
+              color="sub"
+              paddingLeft="24px"
+              paddingY="18px"
+              textStyle="h2"
+            >
+              {value}
+              <button
+                onClick={() => {
+                  setIsSubmit(false);
+                }}
+              >
+                수정버튼
+              </button>
+            </Flex>
+          )}
+          <Space height={62} />
+          <Button
+            style={{ maxWidth: "100%" }}
+            onClick={() => {
+              setIsSubmit(true);
+            }}
+          >
+            입력하기
+          </Button>
+        </>
+      }
+    />
+  );
+};

apps/client/components/my-homework/index.ts

@@ -0,0 +1,3 @@
+export * from "./DefaultHomeworkBox";
+export * from "./HomeworkHistory";
+export * from "./TextFieldHomeworkBox";