-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* [chore] storybook global style setting * feat(ui): appbar 컴포넌트 제작 * refactor(ui): typo 및 컬러 팔레트 변경 대응 * refactor(ui): letter-spacing 적용 안되는 현상 해결 * feat(ui) navigation 컴포넌트 제작
- Loading branch information
Showing
69 changed files
with
1,680 additions
and
149 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,42 @@ | ||
import type { Preview } from '@storybook/react'; | ||
import { Preview } from '@storybook/react'; | ||
import { BrowserRouter } from 'react-router-dom'; | ||
import './style.css'; | ||
|
||
const customViewports = { | ||
iPhone13: { | ||
name: 'iPhone 13', | ||
styles: { | ||
width: '390px', | ||
height: '844px' | ||
}, | ||
type: 'mobile' | ||
}, | ||
tablet: { | ||
name: 'iPad Pro 11', | ||
styles: { | ||
width: '834px', | ||
height: '1194px', | ||
}, | ||
type: 'tablet', | ||
}, | ||
} | ||
|
||
const preview: Preview = { | ||
parameters: { | ||
actions: { argTypesRegex: '^on[A-Z].*' }, | ||
layout: 'fullscreen', | ||
actions: { argTypesRegex: '^on.*' }, | ||
controls: { | ||
matchers: { | ||
color: /(background|color)$/i, | ||
date: /Date$/, | ||
}, | ||
}, | ||
viewport: { | ||
viewports: customViewports, | ||
defaultViewport: 'iPhone13' | ||
}, | ||
}, | ||
}; | ||
|
||
|
||
export default preview; |
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,76 @@ | ||
html, body, div, span, applet, object, iframe, | ||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | ||
a, abbr, acronym, address, big, cite, code, | ||
del, dfn, em, img, ins, kbd, q, s, samp, | ||
small, strike, strong, sub, sup, tt, var, | ||
b, u, i, center, | ||
dl, dt, dd, ol, ul, li, | ||
fieldset, form, label, legend, | ||
table, caption, tbody, tfoot, thead, tr, th, td, | ||
article, aside, canvas, details, embed, | ||
figure, figcaption, footer, header, hgroup, | ||
menu, nav, output, ruby, section, summary, | ||
time, mark, audio, video { | ||
margin: 0; | ||
padding: 0; | ||
border: 0; | ||
font-size: 100%; | ||
font: inherit; | ||
vertical-align: baseline; | ||
} | ||
/* HTML5 display-role reset for older browsers */ | ||
article, aside, details, figcaption, figure, | ||
footer, header, hgroup, menu, nav, section { | ||
display: block; | ||
} | ||
body { | ||
line-height: 1; | ||
} | ||
ol, ul { | ||
list-style: none; | ||
} | ||
blockquote, q { | ||
quotes: none; | ||
} | ||
blockquote:before, blockquote:after, | ||
q:before, q:after { | ||
content: ''; | ||
content: none; | ||
} | ||
table { | ||
border-collapse: collapse; | ||
border-spacing: 0; | ||
} | ||
|
||
body { | ||
font-family: 'SpoqaHanSansNeo', SpoqaHanSansNeo, -apple-system, BlinkMacSystemFont, | ||
system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', | ||
'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', | ||
'Segoe UI Symbol', sans-serif !important; | ||
box-sizing: border-box; | ||
|
||
-webkit-tap-highlight-color: transparent; | ||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); | ||
background-color:#17171C; | ||
} | ||
div{ | ||
box-sizing: border-box; | ||
} | ||
button { | ||
background: inherit; | ||
border: none; | ||
box-shadow: none; | ||
border-radius: 0; | ||
padding: 0; | ||
overflow: visible; | ||
cursor: pointer; | ||
} | ||
button:focus { | ||
outline: none; | ||
} | ||
input:focus { | ||
outline: none; | ||
} | ||
textarea:focus { | ||
outline: none; | ||
} |
Binary file added
BIN
+490 KB
.yarn/cache/@storybook-addon-styling-npm-1.3.4-26fe56a6af-0ec9270747.zip
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file added
BIN
+7.37 KB
.yarn/cache/@storybook-channel-postmessage-npm-7.0.27-572509173c-f5d10bec68.zip
Binary file not shown.
Binary file not shown.
Binary file added
BIN
+4.68 KB
.yarn/cache/@storybook-client-logger-npm-7.0.27-1f9a1997e4-ee611ffd34.zip
Binary file not shown.
Binary file added
BIN
+1.46 MB
.yarn/cache/@storybook-components-npm-7.0.27-4297ce24e2-2e345fd5a6.zip
Binary file not shown.
Binary file added
BIN
+25.7 KB
.yarn/cache/@storybook-core-common-npm-7.0.27-f3b9371dbe-456b5d1035.zip
Binary file not shown.
Binary file added
BIN
+5.41 KB
.yarn/cache/@storybook-core-events-npm-7.0.27-a120140f76-ca5fe8e791.zip
Binary file not shown.
Binary file added
BIN
+45.5 KB
.yarn/cache/@storybook-manager-api-npm-7.0.27-13ac7bb40b-18b4e74f4d.zip
Binary file not shown.
Binary file added
BIN
+4.21 KB
.yarn/cache/@storybook-node-logger-npm-7.0.27-a9eefd8f72-d055dd00c6.zip
Binary file not shown.
Binary file added
BIN
+222 KB
.yarn/cache/@storybook-preview-api-npm-7.0.27-1622dcf38d-f82f22f2c4.zip
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file added
BIN
+25 KB
.yarn/cache/adjust-sourcemap-loader-npm-4.0.0-c8b560af8c-d524ae2358.zip
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file added
BIN
+5.8 KB
.yarn/cache/postcss-modules-extract-imports-npm-3.0.0-619311282d-4b65f2f138.zip
Binary file not shown.
Binary file added
BIN
+7.15 KB
.yarn/cache/postcss-modules-local-by-default-npm-4.0.3-f6674d7148-2f8083687f.zip
Binary file not shown.
Binary file added
BIN
+6.23 KB
.yarn/cache/postcss-modules-scope-npm-3.0.0-0678040a26-330b9398db.zip
Binary file not shown.
Binary file added
BIN
+4.84 KB
.yarn/cache/postcss-modules-values-npm-4.0.0-63d7ec543a-f7f2cdf14a.zip
Binary file not shown.
Binary file not shown.
Binary file added
BIN
+58.8 KB
.yarn/cache/postcss-selector-parser-npm-6.0.13-f732d92326-f89163338a.zip
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,42 @@ | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
import { BrowserRouter, Routes, Route } from 'react-router-dom'; | ||
import { AppBar } from '.'; | ||
|
||
const meta = { | ||
title: 'Atom/AppBar', | ||
component: AppBar, | ||
tags: ['autodocs'], | ||
argTypes: { onClickOption: {action: 'clicked'}}, | ||
decorators: [ | ||
(Story) => ( | ||
<BrowserRouter> | ||
<Routes> | ||
<Route path="*" element={<Story/>}/> | ||
</Routes> | ||
</BrowserRouter> | ||
), | ||
], | ||
} satisfies Meta<typeof AppBar>; | ||
|
||
export default meta; | ||
type Story = StoryObj<typeof meta>; | ||
|
||
export const LogoWithAlarm: Story = { | ||
args: { | ||
variant:'logoWithAlarm', | ||
}, | ||
}; | ||
|
||
export const BackPushWithMenu: Story = { | ||
args: { | ||
variant:'backPushWithMenu', | ||
label: '데일리 질문', | ||
}, | ||
}; | ||
|
||
export const backPush: Story = { | ||
args: { | ||
variant:'backPush', | ||
label: '친구 목록 편집', | ||
}, | ||
}; |
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,80 @@ | ||
import { FlexBox } from "@components/layouts/FlexBox"; | ||
import { Text } from "../Text"; | ||
import styled from "@emotion/styled"; | ||
import { theme, media } from "@styles/theme"; | ||
import tify_logo from '../../../assets/icons/tify_logo.svg'; | ||
import three_dots from '../../../assets/icons/three_dots.svg'; | ||
import alert_icon from '../../../assets/icons/alert.svg'; | ||
import left_arrow from '../../../assets/icons/left_arrow.svg'; | ||
import { useNavigate } from "react-router-dom"; | ||
|
||
type AppBarType = 'logoWithAlarm' | 'backPush' | 'backPushWithMenu' | ||
|
||
/** | ||
* @param variant AppBar의 type을 나타냄 'logoWithAlarm' | 'backPush' | 'backPushWithMenu' | ||
* @param label 'backPush' | 'backPushWithMenu' 사용 시 Appbar에 나타날 문구 | ||
* @param beforeUrl (optional) BackArrow를 통하여 이동할 url (기본값은 뒤로가기) | ||
* @param onClickOption 두번째 버튼을 눌렀을 때 발생할 이벤트를 넘겨주는 함수 | ||
*/ | ||
|
||
interface AppBarProps { | ||
variant : AppBarType; | ||
label?: string; | ||
beforeUrl?: string; | ||
onClickOption?: () => void; | ||
} | ||
|
||
export const AppBar = ({ | ||
variant='logoWithAlarm', | ||
label, | ||
beforeUrl, | ||
onClickOption | ||
}: AppBarProps) => { | ||
const navigate = useNavigate(); | ||
const onClickBackBar = () => { | ||
beforeUrl ? navigate(beforeUrl) : navigate(-1) | ||
} | ||
const onClickLogo = () => { | ||
navigate('/') | ||
} | ||
return( | ||
<Wrapper> | ||
{variant === 'logoWithAlarm' ? | ||
<img style={{cursor:'pointer'}} src = {tify_logo} onClick={onClickLogo}/> : | ||
<FirstElement> | ||
<img style={{cursor:'pointer'}} src ={left_arrow} onClick={onClickBackBar}/> | ||
<Text typo={'Subhead_16'} color={'gray_200'}>{label}</Text> | ||
</FirstElement> | ||
} | ||
|
||
{variant === 'logoWithAlarm' ? | ||
<img style={{cursor:'pointer'}} src={alert_icon} onClick = {onClickOption}/> : | ||
(variant === 'backPushWithMenu' ? | ||
<img style={{cursor:'pointer'}} src ={three_dots} onClick ={onClickOption}/> | ||
: null)} | ||
</Wrapper> | ||
)} | ||
|
||
const Wrapper = styled(FlexBox)` | ||
height: 80px; | ||
width: 100%; | ||
justify-content: space-between; | ||
top: 0; | ||
padding: 40px 16px 16px 16px; | ||
background-color: ${theme.palette.background}; | ||
position: fixed; | ||
z-index: 1; | ||
${media.pc} { | ||
position: sticky; | ||
} | ||
` | ||
|
||
const FirstElement = styled(FlexBox)` | ||
justify-content: center; | ||
align-items: center; | ||
gap: 8px; | ||
& > h1:nth-of-type(1){ | ||
padding-top: 3px; | ||
} | ||
` | ||
|
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.