편지 다시 보내기
diff --git a/src/components/common/Planet.tsx b/src/components/common/Planet.tsx
index 9be66080..344da1ae 100644
--- a/src/components/common/Planet.tsx
+++ b/src/components/common/Planet.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import Image from 'next/image';
import styled from 'styled-components';
import Tag from './Tag';
-import Button from './Button';
+import Button from './Button/Button';
import { useRouter } from 'next/navigation';
import ConfirmModal from './ConfirmModal';
import { useRecoilState, useSetRecoilState } from 'recoil';
diff --git a/src/components/profile/DateModal.tsx b/src/components/profile/DateModal.tsx
index d0809606..70d6967d 100644
--- a/src/components/profile/DateModal.tsx
+++ b/src/components/profile/DateModal.tsx
@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from "react";
-import styled from "styled-components";
-import { theme } from "@/styles/theme";
-import NewItemPicker from "../signup/NewItemPicker";
-import Button from "../common/Button";
-import Calendar from "./Calendar";
-import { motion } from "framer-motion";
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { theme } from '@/styles/theme';
+import NewItemPicker from '../signup/NewItemPicker';
+import Button from '../common/Button/Button';
+import Calendar from './Calendar';
+import { motion } from 'framer-motion';
interface ModalProps {
confirmText?: string;
@@ -18,13 +18,13 @@ interface ModalProps {
const Modal = (props: ModalProps) => {
const {
- confirmText = "선택 완료",
+ confirmText = '선택 완료',
onConfirm,
onDateChange,
onClose,
initialDate,
initialMonth,
- initialYear,
+ initialYear
} = props;
const [selectedYear, setSelectedYear] = useState(initialYear);
@@ -44,7 +44,7 @@ const Modal = (props: ModalProps) => {
parseInt(selectedYear),
parseInt(selectedMonth),
0
- ).getDate(),
+ ).getDate()
},
(_, i) => (1 + i).toString()
);
@@ -65,19 +65,19 @@ const Modal = (props: ModalProps) => {
let month = selectedMonth;
let date = selecetedDate;
if (parseInt(selectedMonth) < 10) {
- month = "0" + selectedMonth;
+ month = '0' + selectedMonth;
}
if (parseInt(selecetedDate) < 10) {
- date = "0" + selecetedDate;
+ date = '0' + selecetedDate;
}
const fullDate = `${selectedYear}.${month}.${date}`;
onDateChange(fullDate);
- console.log("제출되었습니다", fullDate);
+ console.log('제출되었습니다', fullDate);
onConfirm(fullDate);
};
useEffect(() => {
- console.log(selectedYear + "." + selectedMonth + "." + selecetedDate);
+ console.log(selectedYear + '.' + selectedMonth + '.' + selecetedDate);
}, [selecetedDate, selectedYear, selectedMonth]);
useEffect(() => {
@@ -94,7 +94,7 @@ const Modal = (props: ModalProps) => {
if (!type) {
handleSelectMonthChange(intMonth.toString());
}
- console.log("leftClick" + selectedMonth);
+ console.log('leftClick' + selectedMonth);
setNewYearItem(intYear.toString());
setNewMonthItem(intMonth.toString());
} else {
@@ -103,7 +103,7 @@ const Modal = (props: ModalProps) => {
intMonth = 12;
if (!type) {
handleSelectYearChange(intYear.toString());
- handleSelectMonthChange("12");
+ handleSelectMonthChange('12');
}
}
setNewYearItem(intYear.toString());
@@ -121,7 +121,7 @@ const Modal = (props: ModalProps) => {
if (!type) {
handleSelectMonthChange(intMonth.toString());
}
- console.log("rightClick" + selectedMonth);
+ console.log('rightClick' + selectedMonth);
setNewYearItem(intYear.toString());
setNewMonthItem(intMonth.toString());
} else {
@@ -130,7 +130,7 @@ const Modal = (props: ModalProps) => {
intMonth = 1;
if (!type) {
handleSelectYearChange(intYear.toString());
- handleSelectMonthChange("1");
+ handleSelectMonthChange('1');
}
}
setNewYearItem(intYear.toString());
@@ -146,15 +146,15 @@ const Modal = (props: ModalProps) => {
transition={{ duration: 0.5 }}
>
Pages in Storybook
++ We recommend building UIs with a{' '} + + component-driven + {' '} + process starting with atomic components and ending with pages. +
++ Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page + data in Storybook: +
+-
+
- + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories + +
- + Assemble data in the page component from your services. You can mock these services out + using Storybook. + +
+ Get a guided tutorial on component-driven development at{' '} + + Storybook tutorials + + . Read more in the{' '} + + docs + + . +
+
+ Tip Adjust the width of the canvas with the{' '}
+
+ Viewports addon in the toolbar
+
+