8000 refactor: rearrange solution-pass codes · codeisneverodd/home@d105980 · GitHub
[go: up one dir, main page]
Skip to content

Commit d105980

Browse files
codeisneveroddcodeisneverodd
committed
refactor: rearrange solution-pass codes
1 parent eaca842 commit d105980

File tree

17 files changed

+138
-153
lines changed

17 files changed

+138
-153
lines changed

‎src/lib/@common/components/Logo.tsx renamed to ‎src/lib/components/Logo.tsx

File renamed without changes.

‎src/lib/@common/layouts/MainLayout.tsx renamed to ‎src/lib/components/MainLayout.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import useColor from "@/hooks/useColor";
1+
import useColor from "@/lib/hooks/useColor";
22
import {
33
Box,
44
Button,
@@ -10,6 +10,7 @@ import {
1010
} from "@chakra-ui/react";
1111
import {
1212
faClock,
13+
faCode,
1314
faHome,
1415
faMoon,
1516
faSun
@@ -18,7 +19,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
1819
import Head from "next/head";
1920
import { useRouter } from "next/router";
2021
import { ComponentProps, useRef } from "react";
21-
import Logo from "../components/Logo";
22+
import Logo from "./Logo";
2223

2324
export default function MainLayout({
2425
title,
@@ -83,6 +84,7 @@ function Menu() {
8384
{ icon: typeof faClock; title: string; href: string }[]
8485
>([
8586
{ icon: faHome, title: "Home", href: "/" },
87+
{ icon: faCode, title: "Solution Pass", href: "/solution-pass" },
8688
{ icon: faClock, title: "Timer", href: "/timer" }
8789
]);
8890

‎src/hooks/useColor.ts renamed to ‎src/lib/hooks/useColor.ts

File renamed without changes.

‎src/lib/solution-pass/Main/Results/ProblemList/ProblemCard/index.tsx

Lines changed: 0 additions & 41 deletions
This file was deleted.

‎src/lib/solution-pass/Main/Results/ProblemList/index.tsx

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎src/lib/solution-pass/Main/Results/Solutions/index.tsx

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/lib/solution-pass/Main/Results/Submit/index.tsx

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/lib/solution-pass/Main/Results/index.tsx

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎src/lib/solution-pass/Main/index.tsx

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎src/lib/solution-pass/Aside/index.tsx renamed to ‎src/lib/solution-pass/components/Aside.tsx

File renamed without changes.

‎src/lib/solution-pass/components/ProblemResult.tsx

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import useColor from "@/lib/hooks/useColor";
2+
import useRepo from "@/lib/solution-pass/hooks/useRepo";
3+
import { Prob } from "@/types/solutions";
4+
import { Flex, IconButton, Icon, Text } from "@chakra-ui/react";
5+
import { faChevronCircleRight } from "@fortawesome/free-solid-svg-icons";
6+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7+
8+
export default function ProblemResult() {
9+
const { repoQuery } = useRepo();
10+
11+
const { subtleBg } = useColor();
12+
13+
if (!repoQuery.data) return null;
14+
15+
return (
16+
<Flex
17+
direction="column"
18+
rounded="12px"
19+
overflow="hidden"
20+
bg={subtleBg}
21+
boxShadow="dark-sm"
22+
>
23+
<Flex
24+
w="full"
25+
px="20px"
26+
h="60px"
27+
alignItems="center"
28+
textAlign="center"
29+
fontWeight="bold"
30+
>
31+
<Text w="60px">난이도</Text>
32+
<Text flex="1">제목</Text>
33+
<Text>정답</Text>
34+
</Flex>
35+
{repoQuery.data.probs
36+
.sort((a, b) => a.level - b.level)
37+
.map(prob => (
38+
<ProblemCard key={prob.id} probData={prob} />
39+
))}
40+
</Flex>
41+
);
42+
}
43+
44+
type ProblemCardProps = {
45+
probData: Prob;
46+
};
47+
48+
function ProblemCard({ probData: { title, level } }: ProblemCardProps) {
49+
const { levelColors } = useColor();
50+
51+
return (
52+
<Flex
53+
alignItems="center"
54+
gap="20px"
55+
h="60px"
56+
px="20px"
57+
borderTop="0.5px solid gray"
58+
cursor="pointer"
59+
>
60+
<Text
61+
textAlign="center"
62+
w="60px"
63+
fontSize="lg"
64+
color={levelColors[level]}
65+
fontWeight="bold"
66+
>
67+
{level}
68+
</Text>
69+
<Text flex="1">{title}</Text>
70+
<IconButton
71+
icon={<Icon as={FontAwesomeIcon} icon={faChevronCircleRight} />}
72+
aria-label="정답 보기"
73+
/>
74+
</Flex>
75+
);
76+
}

‎src/lib/solution-pass/components/ResultSection.tsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import {
2+
Box,
3+
Icon,
4+
Tab,
5+
TabList,
6+
TabPanel,
7+
TabPanels,
8+
Tabs
9+
} from "@chakra-ui/react";
10+
import { faBook, faCode } from "@fortawesome/free-solid-svg-icons";
11+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
12+
import { useRef } from "react";
13+
import ProblemResult from "./ProblemResult";
14+
import SolutionResult from "./SolutionResult";
15+
16+
export default function Main() {
17+
const tabs = useRef<
18+
{ icon: typeof faBook; title: string; Panel: JSX.Element }[]
19+
>([
20+
{ icon: faBook, title: "문제", Panel: <ProblemResult /> },
21+
{ icon: faCode, title: "정답", Panel: <SolutionResult /> }
22+
]);
23+
24+
return (
25+
<Box
26+
ml={{ sm: "0", md: "120px" }}
27+
minW="xl"
28+
maxW="800px"
29+
w="full"
30+
zIndex="base"
31+
>
32+
<Tabs isLazy>
33+
<TabList>
34+
{tabs.current.map(({ icon, title }) => (
35+
<Tab gap="8px">
36+
<Icon as={FontAwesomeIcon} icon={icon} />
37+
{title}
38+
</Tab>
39+
))}
40+
</TabList>
41+
<TabPanels>
42+
{tabs.current.map(({ Panel }) => (
43+
<TabPanel>{Panel}</TabPanel>
44+
))}
45+
</TabPanels>
46+
</Tabs>
47+
</Box>
48+
);
49+
}

‎src/lib/solution-pass/components/SolutionResult.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function SolutionResult() {
2+
return <div>정답</div>;
3+
}

‎src/hooks/useRepo.ts renamed to ‎src/lib/solution-pass/hooks/useRepo.ts

File renamed without changes.

‎src/pages/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import MainLayout from "@/lib/@common/layouts/MainLayout";
1+
import MainLayout from "@/lib/components/MainLayout";
22
import { Center, Text } from "@chakra-ui/react";
33

44
export default function Home() {

‎src/pages/solution-pass/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import MainLayout from "@/lib/@common/layouts/MainLayout";
2-
import Aside from "@/lib/solution-pass/Aside";
3-
import Main from "@/lib/solution-pass/Main";
1+
import MainLayout from "@/lib/components/MainLayout";
2+
import Aside from "@/lib/solution-pass/components/Aside";
3+
import ResultSection from "@/lib/solution-pass/components/ResultSection";
44
import { Flex } from "@chakra-ui/react";
55

66
export default function Home() {
77
return (
88
<MainLayout title="Solution Pass">
99
<Flex w="full" direction={{ sm: "column-reverse", md: "row" }} pt="20px">
10-
<Main />
10+
<ResultSection />
1111
<Aside />
1212
</Flex>
1313
</MainLayout>

‎src/pages/timer/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import MainLayout from "@/lib/@common/layouts/MainLayout";
1+
import MainLayout from "@/lib/components/MainLayout";
22

33
export default function Timer() {
44
return <MainLayout title="Timer">타이머</MainLayout>;

0 commit comments

Comments
 (0)
0