💄 ui: add workspace layout&styles #17

src/workspace/components/TurmRangeSelector.tsx

@@ -0,0 +1,96 @@
+import { sidebarSection, selectorList, listStyle } from '@workspace/styles/sidebarStyle';
+import { titleWrapper } from '@workspace/styles/sharedStyle';
+import { Text, Radio } from '@jdesignlab/react';
+
+export const TurmRangeSelector = () => (
+  <section css={sidebarSection}>
+    <div css={titleWrapper}>
+      <Text variant="heading" color="shades-white">
+        TIL
+      </Text>
+    </div>
+    <ul css={listStyle}>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>{' '}
+      <li css={selectorList}>
+        <Radio>1주차</Radio>
+      </li>
+    </ul>
+  </section>
+);

src/workspace/styles/layout.ts

@@ -0,0 +1,13 @@
+import { mq } from '@shared/styles/mixins/responsive';
+import { css } from '@emotion/react';
+
+export const workspaceLayout = css({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100vh',
+  [mq.md]: {},
+  [mq.lg]: {
+    flexDirection: 'row'
+  },
+  [mq.xl]: {}
+});

src/workspace/styles/sharedStyle.ts

@@ -0,0 +1,20 @@
+import { mq } from '@shared/styles/mixins/responsive';
+import { css } from '@emotion/react';
+
+export const titleWrapper = css({
+  backgroundColor: '#fff',
+  position: 'static',
+  [mq.md]: {},
+  [mq.lg]: {
+    position: 'sticky',
+    top: '0px',
+    zIndex: '2',
+    paddingLeft: '8px',
+    paddingTop: '8px',
+    backgroundColor: '#4695E5',
+    height: '36px',
+    border: '1px solid #fff',
+    borderRadius: '8px'
+  },
+  [mq.xl]: {}
+});

src/workspace/styles/sidebarStyle.ts

@@ -0,0 +1,76 @@
+import { mq } from '@shared/styles/mixins/responsive';
+import { SCROLLBAR_COLOR } from '@layout/constant';
+import { css } from '@emotion/react';
+
+export const sidebarStyle = css({
+  backgroundColor: '#fff',
+  [mq.md]: {},
+  [mq.lg]: {
+    backgroundColor: '##FAF8FF',
+    maxWidth: '256px',
+    flexGrow: 1
+  },
+  [mq.xl]: {}
+});
+
+export const sidebarSection = css({
+  position: 'static',
+  [mq.md]: {},
+  [mq.lg]: {
+    position: 'relative',
+    maxHeight: '50%',
+    overflow: 'auto',
+    '&:last-child': {
+      marginTop: '8px'
+    },
+    // scroll
+    '&::-webkit-scrollbar': {
+      width: '8px'
+    },
+    '&::-webkit-scrollbar-thumb': {
+      borderRadius: '5px',
+      background: `${SCROLLBAR_COLOR}`
+    }
+  },
+  [mq.xl]: {}
+});
+
+export const listStyle = css({
+  padding: '0 8px'
+});
+
+export const userCard = css({
+  marginTop: '4px',
+  boxShadow: 'rgba(33, 35, 38, 0.1) 0px 10px 10px -10px',
+  display: 'flex',
+  padding: '4px',
+  [mq.md]: {},
+  [mq.lg]: {},
+  [mq.xl]: {}
+});
+
+export const selectorList = css({
+  [mq.md]: {},
+  [mq.lg]: {
+    marginTop: '8px'
+  },
+  [mq.xl]: {}
+});
+
+export const userInfo = css({
+  [mq.md]: {},
+  [mq.lg]: {
+    width: '160px',
+    maxHeight: '36px',
+    display: 'block',
+    marginLeft: '8px',
+    '& p': {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      wordBreak: 'break-all',
+      WebkitLineClamp: 2
+    }
+  },
+  [mq.xl]: {}
+});

src/workspace/styles/statisticsStyle.ts

@@ -0,0 +1,11 @@
+import { mq } from '@shared/styles/mixins/responsive';
+import { css } from '@emotion/react';
+
+export const statisticsWrapper = css({
+  [mq.md]: {},
+  [mq.lg]: {
+    border: '1px solid yellow',
+    flexGrow: 4
+  },
+  [mq.xl]: {}
+});

src/workspace/styles/workspaceStyle.ts

@@ -0,0 +1,11 @@
+import { mq } from '@shared/styles/mixins/responsive';
+import { css } from '@emotion/react';
+
+export const workspaceMainWrapper = css({
+  [mq.md]: {},
+  [mq.lg]: {
+    border: '1px solid yellow',
+    flexGrow: 9
+  },
+  [mq.xl]: {}
+});