[UI] navigation 및 Appbar 제작 (#44)

* [chore] storybook global style setting

* feat(ui): appbar 컴포넌트 제작

* refactor(ui): typo 및 컬러 팔레트 변경 대응

* refactor(ui): letter-spacing 적용 안되는 현상 해결

* feat(ui) navigation 컴포넌트 제작

.gitignore

@@ -30,4 +30,6 @@ dist-ssr
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+.yarn/install-state.gz
+.pnp.*

.storybook/main.ts

@@ -26,14 +26,3 @@ const config: StorybookConfig = {
   },
 };
 export default config;
-
-
-
-
-
-  // framework: {
-  //   name: path.dirname(
-  //     require.resolve(path.join("@storybook/react-vite", "package.json"))
-  //   ),
-  //   options: {},
-  // },

.storybook/preview.ts

@@ -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;

.storybook/style.css

@@ -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;
+}

package.json

@@ -15,8 +15,10 @@
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",
+    "@emotion/serialize": "^1.1.2",
     "@emotion/styled": "^11.11.0",
     "@storybook/addon-actions": "^7.0.24",
+    "@storybook/addons": "^7.0.27",
     "@tanstack/react-query": "^4.29.15",
     "@tanstack/react-query-devtools": "^4.29.15",
     "@types/react-router-dom": "^5.3.3",
@@ -29,6 +31,7 @@
     "@storybook/addon-essentials": "^7.0.18",
     "@storybook/addon-interactions": "^7.0.18",
     "@storybook/addon-links": "^7.0.18",
+    "@storybook/addon-styling": "^1.3.4",
     "@storybook/blocks": "^7.0.18",
     "@storybook/builder-vite": "^7.0.22",
     "@storybook/react": "^7.0.18",
@@ -43,6 +46,7 @@
     "@vitejs/plugin-react": "^4.0.0",
     "chromatic": "^6.19.9",
     "emotion-reset": "^3.0.1",
+    "emotion-theming": "^11.0.0",
     "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-typescript": "^3.5.5",

src/components/atoms/AppBar/AppBar.stories.tsx

@@ -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: '친구 목록 편집',
+  },
+};

src/components/atoms/AppBar/index.tsx

@@ -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;
+    }
+`
+