-
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 #46 from Team-INSERT/component/aside
feat: Aside 컴포넌트 퍼블리싱
- Loading branch information
Showing
7 changed files
with
134 additions
and
9 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import React from "react"; | ||
| import Link from "next/link"; | ||
| import { ArrowIcon } from "@/assets"; | ||
| import { theme } from "@/styles"; | ||
| import * as styles from "./style.css"; | ||
|
|
||
| const Aside = () => { | ||
| return ( | ||
| <aside className={styles.container}> | ||
| <div className={styles.titleBox}> | ||
| <span className={styles.titleText}>최근 수정된 문서</span> | ||
| </div> | ||
| {Array.from({ length: 12 }, (_, i) => ( | ||
| <div key={i} className={styles.docs}> | ||
| <Link className={styles.docsName} href="/"> | ||
| 한예준(학생) | ||
| </Link> | ||
| <span className={styles.docsLastModified}>3시간 전</span> | ||
| </div> | ||
| ))} | ||
| <div className={styles.pageBox}> | ||
| <button className={styles.pageButton}> | ||
| <span className={styles.pageButtonText}> | ||
| <ArrowIcon | ||
| direction="left" | ||
| width={11} | ||
| height={11} | ||
| viewBox="0 0 11 20" | ||
| fill={theme.primary} | ||
| /> | ||
| 이전 | ||
| </span> | ||
| </button> | ||
| <button className={styles.pageButton}> | ||
| <span className={styles.pageButtonText}> | ||
| 다음 | ||
| <ArrowIcon | ||
| direction="right" | ||
| width={11} | ||
| height={11} | ||
| viewBox="0 0 11 20" | ||
| fill={theme.primary} | ||
| /> | ||
| </span> | ||
| </button> | ||
| </div> | ||
| </aside> | ||
| ); | ||
| }; | ||
|
|
||
| export default Aside; |
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,68 @@ | ||
| import { style } from "@vanilla-extract/css"; | ||
| import { flex, font, theme } from "@/styles"; | ||
|
|
||
| export const container = style({ | ||
| position: "sticky", | ||
| width: "240px", | ||
| height: "fit-content", | ||
| marginTop: "20px", | ||
| top: "74px", | ||
| }); | ||
|
|
||
| export const titleBox = style({ | ||
| backgroundColor: theme.primary, | ||
| border: `2px solid ${theme.gray}`, | ||
| width: "100%", | ||
| height: "50px", | ||
| ...flex.VERTICAL, | ||
| }); | ||
|
|
||
| export const titleText = style({ | ||
| marginLeft: "20px", | ||
| color: theme.white, | ||
| ...font.H5, | ||
| }); | ||
|
|
||
| export const docs = style({ | ||
| width: "100%", | ||
| height: "40px", | ||
| backgroundColor: theme.white, | ||
| border: `2px solid ${theme.gray}`, | ||
| borderTop: "none", | ||
| ...flex.VERTICAL, | ||
| }); | ||
|
|
||
| export const docsName = style({ | ||
| color: theme.primary, | ||
| marginLeft: "10px", | ||
| fontSize: "14px", | ||
| fontWeight: 600, | ||
| }); | ||
|
|
||
| export const docsLastModified = style({ | ||
| marginLeft: "5px", | ||
| color: theme.boldgray, | ||
| fontSize: "10px", | ||
| }); | ||
|
|
||
| export const pageBox = style({ | ||
| ...flex.FLEX, | ||
| }); | ||
|
|
||
| export const pageButton = style({ | ||
| width: "56px", | ||
| height: "24px", | ||
| backgroundColor: theme.white, | ||
| margin: "6px 2px", | ||
| border: `2px solid ${theme.gray}`, | ||
| borderRadius: "3px", | ||
| ...flex.CENTER, | ||
| }); | ||
|
|
||
| export const pageButtonText = style({ | ||
| color: theme.primary, | ||
| fontWeight: 600, | ||
| fontSize: "12px", | ||
| gap: "2.5px", | ||
| ...flex.CENTER, | ||
| }); |
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