-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #24 from GDSC-Hongik/feat/client-study-apply-ui
[Feat] 수강신청 페이지 & 내 과제 페이지 마크업
- Loading branch information
Showing
28 changed files
with
8,669 additions
and
8,766 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
49 changes: 49 additions & 0 deletions
49
apps/client/app/(afterLogin)/my-study/my-homework/_components/HomeworkHistory.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ))} | ||
| </> | ||
| ); | ||
| }; |
56 changes: 56 additions & 0 deletions
56
apps/client/app/(afterLogin)/my-study/my-homework/_components/HomeworkOverviewBox.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| </> | ||
| } | ||
| /> | ||
| ); | ||
| }; |
101 changes: 101 additions & 0 deletions
101
apps/client/app/(afterLogin)/my-study/my-homework/_components/RepositorySubmissionBox.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| </> | ||
| } | ||
| /> | ||
| ); | ||
| }; |
3 changes: 3 additions & 0 deletions
3
apps/client/app/(afterLogin)/my-study/my-homework/_components/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export * from "./HomeworkHistory"; | ||
| export * from "./HomeworkOverviewBox"; | ||
| export * from "./RepositorySubmissionBox"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
Oops, something went wrong.