Skip to content

Commit 7db87a0

Browse files
hyo-4hyo-4
committed
✨feat(#176):Button Style file, Button 폴더 추가
1 parent a95c3e2 commit 7db87a0

40 files changed

Lines changed: 336 additions & 265 deletions

File tree

‎.storybook/preview.ts‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎.storybook/preview.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ThemeProvider } from 'styled-components';
2+
import type { Preview } from '@storybook/react';
3+
import { theme } from '../src/styles/theme';
4+
5+
const preview: Preview = {
6+
parameters: {
7+
actions: { argTypesRegex: '^on[A-Z].*' },
8+
controls: {
9+
matchers: {
10+
color: /(background|color)$/i,
11+
date: /Date$/
12+
}
13+
}
14+
}
15+
};
16+
17+
export const decorators = [
18+
(Story) => (
19+
<ThemeProvider theme={theme}>
20+
<Story />
21+
</ThemeProvider>
22+
)
23+
];
24+
25+
export default preview;

‎src/app/error/letter/page.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
1-
"use client";
1+
'use client';
22

3-
import { getMainId } from "@/api/planet/space/space";
4-
import Button from "@/components/common/Button";
5-
import Loader, { LoaderContainer } from "@/components/common/Loader";
6-
import { useRouter, useSearchParams } from "next/navigation";
7-
import { Suspense } from "react";
8-
import styled from "styled-components";
3+
import { getMainId } from '@/api/planet/space/space';
4+
import Button from '@/components/common/Button/Button';
5+
import Loader, { LoaderContainer } from '@/components/common/Loader';
6+
import { useRouter, useSearchParams } from 'next/navigation';
7+
import { Suspense } from 'react';
8+
import styled from 'styled-components';
99

1010
const ErrorLetterPage = () => {
1111
const router = useRouter();
1212
const searchParams = useSearchParams();
13-
const url = searchParams.get("url");
13+
const url = searchParams.get('url');
1414

1515
const goToHome = async () => {
1616
try {
1717
await getMainId();
18-
router.push("/planet");
18+
router.push('/planet');
1919
} catch (error) {
20-
console.error("유효한 회원이 아닌 것으로 판단:", error);
20+
console.error('유효한 회원이 아닌 것으로 판단:', error);
2121
router.push(`/login?url=${url}`);
2222
}
2323
};

‎src/app/error/network/page.tsx‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
"use client";
1+
'use client';
22

3-
import Button from "@/components/common/Button";
4-
import styled from "styled-components";
3+
import Button from '@/components/common/Button/Button';
4+
import styled from 'styled-components';
55

66
export default function Error() {
77
return (
@@ -22,48 +22,48 @@ export default function Error() {
2222
}
2323

2424
const Container = styled.div`
25-
display: flex;
26-
flex-direction: column;
27-
justify-content: space-between;
28-
min-height: 100%;
29-
color: white;
30-
background:${(props) => props.theme.colors.bg};
31-
padding: 25px;
32-
padding-bottom: 40px;
25+
display: flex;
26+
flex-direction: column;
27+
justify-content: space-between;
28+
min-height: 100%;
29+
color: white;
30+
background: ${(props) => props.theme.colors.bg};
31+
padding: 25px;
32+
padding-bottom: 40px;
3333
`;
3434

3535
const MainWrapper = styled.div`
36-
display: flex;
37-
flex-direction: column;
38-
justify-content: center;
39-
align-items: center;
36+
display: flex;
37+
flex-direction: column;
38+
justify-content: center;
39+
align-items: center;
4040
`;
4141

4242
const Header = styled.div`
43-
display: flex;
44-
width: 100%;
45-
flex-direction: column;
46-
padding: 10px;
47-
margin-bottom: 5rem;
48-
justify-content: center;
49-
align-items: center;
50-
text-align: center;
43+
display: flex;
44+
width: 100%;
45+
flex-direction: column;
46+
padding: 10px;
47+
margin-bottom: 5rem;
48+
justify-content: center;
49+
align-items: center;
50+
text-align: center;
5151
`;
5252

5353
const HeaderTitle = styled.div`
54-
width: 100%;
55-
${(props) => props.theme.fonts.heading01};
56-
margin-top: 5rem;
54+
width: 100%;
55+
${(props) => props.theme.fonts.heading01};
56+
margin-top: 5rem;
5757
`;
5858

5959
const HeaderSubTitle = styled.div`
60-
width: 100%;
61-
${(props) => props.theme.fonts.body09};
62-
color: ${(props) => props.theme.colors.gray300};
63-
padding-top: 10px;
60+
width: 100%;
61+
${(props) => props.theme.fonts.body09};
62+
color: ${(props) => props.theme.colors.gray300};
63+
padding-top: 10px;
6464
`;
6565

6666
const ErrorImage = styled.img`
67-
width: 204px;
68-
height: auto;
67+
width: 204px;
68+
height: auto;
6969
`;

‎src/app/error/page.tsx‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
"use client";
1+
'use client';
22

3-
import Button from "@/components/common/Button";
4-
import { useRouter } from "next/navigation";
5-
import styled from "styled-components";
3+
import Button from '@/components/common/Button/Button';
4+
import { useRouter } from 'next/navigation';
5+
import styled from 'styled-components';
66

77
export default function Error() {
88
const router = useRouter();
99
const goToHome = () => {
10-
router.push("/planet");
10+
router.push('/planet');
1111
};
1212
return (
1313
<Container>
@@ -35,48 +35,48 @@ export default function Error() {
3535
}
3636

3737
const Container = styled.div`
38-
display: flex;
39-
flex-direction: column;
40-
justify-content: space-between;
41-
min-height: 100%;
42-
color: white;
43-
background:${(props) => props.theme.colors.bg};
44-
padding: 25px;
45-
padding-bottom: 40px;
38+
display: flex;
39+
flex-direction: column;
40+
justify-content: space-between;
41+
min-height: 100%;
42+
color: white;
43+
background: ${(props) => props.theme.colors.bg};
44+
padding: 25px;
45+
padding-bottom: 40px;
4646
`;
4747

4848
const MainWrapper = styled.div`
49-
display: flex;
50-
flex-direction: column;
51-
justify-content: center;
52-
align-items: center;
49+
display: flex;
50+
flex-direction: column;
51+
justify-content: center;
52+
align-items: center;
5353
`;
5454

5555
const Header = styled.div`
56-
display: flex;
57-
width: 100%;
58-
flex-direction: column;
59-
padding: 10px;
60-
margin-bottom: 5rem;
61-
justify-content: center;
62-
align-items: center;
63-
text-align: center;
56+
display: flex;
57+
width: 100%;
58+
flex-direction: column;
59+
padding: 10px;
60+
margin-bottom: 5rem;
61+
justify-content: center;
62+
align-items: center;
63+
text-align: center;
6464
`;
6565

6666
const HeaderTitle = styled.div`
67-
width: 100%;
68-
${(props) => props.theme.fonts.heading01};
69-
margin-top: 5rem;
67+
width: 100%;
68+
${(props) => props.theme.fonts.heading01};
69+
margin-top: 5rem;
7070
`;
7171

7272
const HeaderSubTitle = styled.div`
73-
width: 100%;
74-
${(props) => props.theme.fonts.body09};
75-
color: ${(props) => props.theme.colors.gray300};
76-
padding-top: 10px;
73+
width: 100%;
74+
${(props) => props.theme.fonts.body09};
75+
color: ${(props) => props.theme.colors.gray300};
76+
padding-top: 10px;
7777
`;
7878

7979
const ErrorImage = styled.img`
80-
width: 204px;
81-
height: auto;
80+
width: 204px;
81+
height: auto;
8282
`;

‎src/app/guide/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import BlinkTag from '@/components/common/BlinkingTag';
4-
import Button from '@/components/common/Button';
4+
import Button from '@/components/common/Button/Button';
55
import Check from '@/components/common/Check';
66
import ConfirmModal from '@/components/common/ConfirmModal';
77
import GuideText from '@/components/common/GuideText';

‎src/app/independent/[id]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import { getIndependentLetter } from '@/api/letter/letter';
4-
import Button from '@/components/common/Button';
4+
import Button from '@/components/common/Button/Button';
55
import Loader from '@/components/common/Loader';
66
import NavigatorBar from '@/components/common/NavigatorBar';
77
import Letter from '@/components/letter/Letter';

‎src/app/info/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import Button from '@/components/common/Button';
3+
import Button from '@/components/common/Button/Button';
44
import NavigatorBar from '@/components/common/NavigatorBar';
55
import styled from 'styled-components';
66
import { useRouter } from 'next/navigation';

‎src/app/letter/[id]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import { deleteLetter, getSpaceLetter } from '@/api/letter/letter';
4-
import Button from '@/components/common/Button';
4+
import Button from '@/components/common/Button/Button';
55
import ConfirmModal from '@/components/common/ConfirmModal';
66
import Loader from '@/components/common/Loader';
77
import NavigatorBar from '@/components/common/NavigatorBar';

‎src/app/mypage/delete/page.tsx‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
1-
"use client";
2-
3-
import { deleteUser, logout } from "@/api/mypage/user";
4-
import Button from "@/components/common/Button";
5-
import Check from "@/components/common/Check";
6-
import Dropdown from "@/components/common/Dropdown";
7-
import Input from "@/components/common/Input";
8-
import Loader, { LoaderContainer } from "@/components/common/Loader";
9-
import NavigatorBar from "@/components/common/NavigatorBar";
10-
import { theme } from "@/styles/theme";
1+
'use client';
2+
3+
import { deleteUser, logout } from '@/api/mypage/user';
4+
import Button from '@/components/common/Button/Button';
5+
import Check from '@/components/common/Check';
6+
import Dropdown from '@/components/common/Dropdown';
7+
import Input from '@/components/common/Input';
8+
import Loader, { LoaderContainer } from '@/components/common/Loader';
9+
import NavigatorBar from '@/components/common/NavigatorBar';
10+
import { theme } from '@/styles/theme';
1111
import {
1212
clearOnboarding,
1313
clearTokens,
1414
getRefreshToken,
15-
removeCookie,
16-
} from "@/utils/storage";
17-
import { useRouter } from "next/navigation";
18-
import { Suspense, useEffect, useState } from "react";
19-
import styled from "styled-components";
15+
removeCookie
16+
} from '@/utils/storage';
17+
import { useRouter } from 'next/navigation';
18+
import { Suspense, useEffect, useState } from 'react';
19+
import styled from 'styled-components';
2020

2121
const DeleteAccount = () => {
22-
const [selectedOption, setSelectedOption] = useState(""); //드롭다운
22+
const [selectedOption, setSelectedOption] = useState(''); //드롭다운
2323
const options = [
24-
"개인정보를 삭제하고 싶어요",
25-
"서비스 이용이 불편해요",
26-
"탈퇴 후 다시 가입할 예정이에요",
27-
"서비스를 이용하지 않아요",
28-
"그 외 기타",
24+
'개인정보를 삭제하고 싶어요',
25+
'서비스 이용이 불편해요',
26+
'탈퇴 후 다시 가입할 예정이에요',
27+
'서비스를 이용하지 않아요',
28+
'그 외 기타'
2929
];
30-
const [textarea, setTextarea] = useState(""); //질문2
30+
const [textarea, setTextarea] = useState(''); //질문2
3131
const [isCheckedBox, setIsCheckedBox] = useState(false); // 체크박스
3232
const [isAbled, setisAbled] = useState(false);
3333
const router = useRouter();
@@ -56,7 +56,7 @@ const DeleteAccount = () => {
5656
console.log(res.data);
5757
clearTokens();
5858
clearOnboarding();
59-
router.push("/login");
59+
router.push('/login');
6060
})
6161
.catch((err) => {
6262
console.log(err);
@@ -98,7 +98,7 @@ const DeleteAccount = () => {
9898
<SubTitle>
9999
회원 탈퇴 후에는 레터링에 저장된 행성과 편지들이
100100
<br />
101-
모두 삭제되며, 삭제된 내용은 복구할 수 없어요{" "}
101+
모두 삭제되며, 삭제된 내용은 복구할 수 없어요{' '}
102102
</SubTitle>
103103
<QuestionWrapper>
104104
<QuestionText>레터링을 탈퇴하는 이유를 말씀해주세요</QuestionText>
@@ -112,7 +112,7 @@ const DeleteAccount = () => {
112112
<QuestionWrapper>
113113
<QuestionText>
114114
더 나은 서비스를 위해 의견을 남겨주세요
115-
<span>{textarea.length + " / 500"}</span>
115+
<span>{textarea.length + ' / 500'}</span>
116116
</QuestionText>
117117
<InputWrapper>
118118
<Input

0 commit comments

Comments
 (0)