Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE] 2차 스프린트 디자인 시스템 수정 #83

Merged
merged 80 commits into from
Jul 29, 2024
Merged
Changes from 1 commit
Commits
Show all changes
80 commits
Select commit Hold shift + click to select a range
bd0db86
design: Title Component width 100%로 수정
Todari Jul 22, 2024
146e577
design: TopNav width 100%로 수정
Todari Jul 22, 2024
13bb6de
fix: index.tsx export 수정
Todari Jul 22, 2024
5fad906
chore: v0.1.2 배포
Todari Jul 22, 2024
1c6a1e0
design: input 좌우 1rem 추가
Todari Jul 22, 2024
bb4218c
feat: MainLayout 추가
Todari Jul 22, 2024
3f6f3ca
chore: v0.1.3 배포
Todari Jul 22, 2024
6a2a49f
feat: TopNav none 타입 추가
jinhokim98 Jul 23, 2024
d0a80d0
chore: storybook-addon-react-router-v6 dev dependency 추가
jinhokim98 Jul 23, 2024
a57bc5a
fix: ExpenseItem button props 넣을 수 있도록 수정
jinhokim98 Jul 23, 2024
c7d56d5
design: button cursor pointer 전역설정
jinhokim98 Jul 23, 2024
7e1723d
refactor: BottomSheet component 구조 수정
Todari Jul 23, 2024
75885d0
chore: v0.1.4 배포
Todari Jul 23, 2024
f389b25
refactor: tab components 합성방식으로 변경
jinhokim98 Jul 23, 2024
53e8943
Merge branch 'feature/#61' of https://github.com/woowacourse-teams/20…
jinhokim98 Jul 23, 2024
ae377d6
feat: Flex component backgroundColor 받을 수 있도록 변경
Todari Jul 23, 2024
51cdeb5
fix: 주석이 xml 내부에서 적용안되던 오류 해결
Todari Jul 23, 2024
ca7b98c
chore: v0.1.5 배포
Todari Jul 23, 2024
72f879e
refactor: flex background prop 로직 처리 방법 변경
Todari Jul 23, 2024
da1a8f2
feat: MainLayout backgroundColor prop 추가
Todari Jul 23, 2024
59c8d9e
fix: flex backgroundColor defaultValue 제거
Todari Jul 23, 2024
f09caa2
chore: v0.1.6 배포
Todari Jul 23, 2024
f26f19f
fix: MainLayout margin padding으로 변경
Todari Jul 23, 2024
0fad857
fix: Switch 및 TopNav 내부 로직 변경
Todari Jul 23, 2024
655b9e1
test: Switch storybook 수정
Todari Jul 23, 2024
c0d85c3
fix: TopNav navigate currentPath를 이용하도록 수정
Todari Jul 23, 2024
29bfb4c
feat: v0.1.18 배포
Todari Jul 23, 2024
7ba559e
fix: TopNav navigate 변경
Todari Jul 23, 2024
d443700
Merge branch 'develop' of https://github.com/woowacourse-teams/2024-h…
jinhokim98 Jul 24, 2024
5beec10
design: tab item과 panel 사이에 gap 넣을 수 있도록 설정 및 flex container 사용
jinhokim98 Jul 24, 2024
3329cae
refactor: in out type uppercase로 수정
jinhokim98 Jul 24, 2024
ae60c1f
design: in out item font size 변경 및 텍스트 바꿔서 작성한 내용 수정
jinhokim98 Jul 24, 2024
f53f11e
Merge branch 'develop' of https://github.com/woowacourse-teams/2024-h…
jinhokim98 Jul 24, 2024
512760c
Merge branch 'develop' of https://github.com/woowacourse-teams/2024-h…
jinhokim98 Jul 24, 2024
e7ecb3c
test: InOutItem storybook 수정
Todari Jul 24, 2024
b253160
chore: v0.1.20 배포
Todari Jul 24, 2024
75d5c4c
Merge branch 'feature/#61' of https://github.com/woowacourse-teams/20…
jinhokim98 Jul 24, 2024
98a4698
design: hasDragableItem 비활성화 시 마진 수정
jinhokim98 Jul 24, 2024
b6bdcad
chore: 충돌해결
jinhokim98 Jul 24, 2024
19d2c5c
fix: props 네이밍 스토리북에 반영
jinhokim98 Jul 24, 2024
ee0e0dc
fix: navigate 뒤로가기 3번 발생하는 이슈 해결
jinhokim98 Jul 24, 2024
2e5e579
chore: v0.1.22 배포
Todari Jul 24, 2024
4b5a416
fix: Switch 내부의 불필요한 로직 제거
Todari Jul 24, 2024
0548366
chore: v0.1.23 배포
Todari Jul 24, 2024
fefabfb
fix: navigate path 로직 변경
jinhokim98 Jul 24, 2024
a60f39e
fix: 새로고침 됐을 때 해당 location 페이지를 유지하도록 수정
jinhokim98 Jul 24, 2024
3d12c84
style: children이 없는 태그 스스로 닫도록 수정
jinhokim98 Jul 24, 2024
05a6d2e
style: todo 주석 제거
jinhokim98 Jul 24, 2024
96fd931
chore: v0.1.25 배포
Todari Jul 24, 2024
8ab9717
design: fixedButton position 변경
Todari Jul 25, 2024
2d39267
chore: v0.1.26 배포
Todari Jul 25, 2024
6794598
fix: 라우팅 변경 이동 오류 해결
jinhokim98 Jul 25, 2024
5a5c47c
Merge branch 'feature/#61' of https://github.com/woowacourse-teams/20…
jinhokim98 Jul 25, 2024
d97cf14
chore: v0.1.27 배포
Todari Jul 25, 2024
daa3dbb
chore: v0.1.28 배포
Todari Jul 25, 2024
d9fc789
Merge branch 'develop' of https://github.com/woowacourse-teams/2024-h…
jinhokim98 Jul 25, 2024
689cf4c
fix: location set 로직을 home 모드에서만 작동하도록 변경
jinhokim98 Jul 25, 2024
6e50b1d
Merge branch 'feature/#61' of https://github.com/woowacourse-teams/20…
jinhokim98 Jul 25, 2024
abfdea9
chore: v0.1.29 배포
Todari Jul 25, 2024
fc5900a
Merge branch 'develop' of https://github.com/woowacourse-teams/2024-h…
jinhokim98 Jul 25, 2024
b131140
fix: TopNav navigation 로직 외부에서 넣도록 변경
jinhokim98 Jul 25, 2024
66e5c68
Merge branch 'feature/#61' of https://github.com/woowacourse-teams/20…
jinhokim98 Jul 25, 2024
5f28bc1
chore: v0.1.30 배포
Todari Jul 25, 2024
b66e94a
fix: index.ts 경로 문제로 제거
jinhokim98 Jul 25, 2024
f7d4d79
Merge branch 'feature/#61' of https://github.com/woowacourse-teams/20…
jinhokim98 Jul 25, 2024
a5614a8
chore: v0.1.13 배포
Todari Jul 25, 2024
7878939
chore: v0.1.32 배포
Todari Jul 25, 2024
1a28863
fix: Fixed Button 하단 고정되도록 변경
Todari Jul 26, 2024
db7a1a6
chore: v0.1.33 배포
Todari Jul 26, 2024
d2ba05e
v0.1.35 배포
Todari Jul 26, 2024
747de08
fix: 가격과 원을 붙여서 표기
Todari Jul 27, 2024
a758316
fix: TopNav가 children이 없어도 작동하도록 변경
jinhokim98 Jul 27, 2024
8dd3ecd
fix: children이 필수가 아니도록 변경
jinhokim98 Jul 27, 2024
21a2e5c
remove: 사용하지 않는 NavSwitch 제거
jinhokim98 Jul 27, 2024
7faab2e
chore: 파이프라인 테스트를 위한 push
pakxe Jul 27, 2024
0aea8ef
chore: 파이프라인 테스트를 위한 push
pakxe Jul 27, 2024
65db70a
remove: merge를 위한 /sever dir 삭제
Todari Jul 28, 2024
cd8c922
Merge branch 'feature/#61' of github.com:woowacourse-teams/2024-haeng…
Todari Jul 28, 2024
286ae97
style: lint 적용
Todari Jul 29, 2024
181e0f3
Merge branch 'develop' into feature/#61
Todari Jul 29, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor: tab components 합성방식으로 변경
jinhokim98 committed Jul 23, 2024
commit f389b25e8bbd7d7dd9b39b2e0576ba1d2d93e80e
25 changes: 0 additions & 25 deletions HDesign/src/components/Tab/Tab.stories.tsx

This file was deleted.

54 changes: 0 additions & 54 deletions HDesign/src/components/Tab/Tab.tsx

This file was deleted.

8 changes: 8 additions & 0 deletions HDesign/src/components/Tabs/Tab.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/** @jsxImportSource @emotion/react */
import {TabProps} from './Tab.type';

const Tab: React.FC<TabProps> = () => {
return <></>;
};

export default Tab;
Original file line number Diff line number Diff line change
@@ -4,5 +4,5 @@ export interface TabProps {
}

export interface TabsProps {
tabs: TabProps[];
children: React.ReactElement<TabProps>[];
}
26 changes: 26 additions & 0 deletions HDesign/src/components/Tabs/Tabs.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react';
import type {Meta, StoryObj} from '@storybook/react';

import Tabs from '@/components/Tabs/Tabs';
import Tab from './Tab';

const meta = {
title: 'Components/Tabs',
component: Tabs,
tags: ['autodocs'],
parameters: {
// layout: 'centered',
},
args: {
children: [
<Tab key={0} label="전체 지출 내역" content={<div>없지롱</div>} />,
<Tab key={1} label="참여자 별 정산" content={<div>있지롱</div>} />,
],
},
} satisfies Meta<typeof Tabs>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Playground: Story = {};
File renamed without changes.
48 changes: 48 additions & 0 deletions HDesign/src/components/Tabs/Tabs.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/** @jsxImportSource @emotion/react */
import React, {useState} from 'react';
import {css} from '@emotion/react';

import {useTheme} from '@theme/HDesignProvider';
import {tabListStyle, tabStyle, indicatorStyle, tabItemStyle, tabTextStyle} from './Tabs.style';
import {TabsProps} from './Tab.type';
import Text from '../Text/Text';

const Tabs: React.FC<TabsProps> = ({children}) => {
const {theme} = useTheme();
const [activeTabIndex, setActiveTabIndex] = useState(0);

const isActive = (index: number) => activeTabIndex === index;
const tabItemCount = children.length;

return (
<section css={tabStyle}>
<ul role="tablist" css={tabListStyle(theme)}>
{children.map((tabItem, index) => (
<li
key={tabItem.props.label}
role="tab"
id={`tab-${tabItem.props.label}`}
css={tabItemStyle}
aria-selected={isActive(index)}
onClick={() => setActiveTabIndex(index)}
aria-controls={`tabpanel-${tabItem.props.label}`}
>
<Text css={tabTextStyle(theme, isActive(index))} size={isActive(index) ? 'bodyBold' : 'body'}>
{tabItem.props.label}
</Text>
</li>
))}
<div css={indicatorStyle(theme, `${(activeTabIndex * 100) / tabItemCount}%`, tabItemCount)} />
</ul>
<section
role="tabpanel"
id={`tabpanel-${children[activeTabIndex].props.label}`}
aria-labelledby={`tab-${children[activeTabIndex].props.label}}`}
>
{children[activeTabIndex].props.content}
</section>
</section>
);
};

export default Tabs;
4 changes: 3 additions & 1 deletion HDesign/src/index.tsx
Original file line number Diff line number Diff line change
@@ -10,7 +10,8 @@ import InOutItem from '@components/InOutItem/InOutItem';
import Input from '@components/Input/Input';
import StepItem from '@components/StepItem/StepItem';
import Switch from '@components/Switch/Switch';
import Tab from '@components/Tab/Tab';
import Tab from './components/Tabs/Tab';
import Tabs from '@/components/Tabs/Tabs';
import Text from '@components/Text/Text';
import TextButton from '@components/TextButton/TextButton';
import Title from '@components/Title/Title';
@@ -34,6 +35,7 @@ export {
StepItem,
Switch,
Tab,
Tabs,
Text,
TextButton,
Title,