From be08ad1f1e6013ed23a488366604d97b373497a8 Mon Sep 17 00:00:00 2001 From: anyl92 Date: Sat, 19 Aug 2023 19:45:58 +0900 Subject: [PATCH 1/8] feat(active): apply title in active page --- src/features/setting/Container.tsx | 16 ++++++++++------ src/features/shared/layout/layout.scss | 1 + 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/features/setting/Container.tsx b/src/features/setting/Container.tsx index 35df6c2..9d26f3b 100644 --- a/src/features/setting/Container.tsx +++ b/src/features/setting/Container.tsx @@ -1,12 +1,21 @@ import { Controller } from 'react-hook-form'; +import { useAtom } from 'jotai'; +import { useLayoutEffect } from 'react'; + +import { titleAtom } from '../shared/layout/atom'; -import './style/index.scss'; import { colorset } from './constants'; import useSetting from './hooks/useSetting'; +import './style/index.scss'; const Container = () => { + const [, setTitle] = useAtom(titleAtom); const { register, handleSubmit, control, onSubmit } = useSetting(); + useLayoutEffect(() => { + setTitle({ title: 'Active', back: true }); + }, []); + return (
@@ -16,11 +25,6 @@ const Container = () => {
- {/* */} Date: Sat, 19 Aug 2023 20:09:34 +0900 Subject: [PATCH 2/8] feat(active): preview component --- src/features/setting/Container.tsx | 2 + .../setting/components/PreviewSection.tsx | 17 +++++++ src/features/setting/constants.ts | 4 ++ src/features/setting/hooks/useSetting.ts | 8 ++++ src/features/setting/style/index.scss | 47 +++++++++++++++++++ 5 files changed, 78 insertions(+) create mode 100644 src/features/setting/components/PreviewSection.tsx diff --git a/src/features/setting/Container.tsx b/src/features/setting/Container.tsx index 9d26f3b..c1b3c80 100644 --- a/src/features/setting/Container.tsx +++ b/src/features/setting/Container.tsx @@ -7,6 +7,7 @@ import { titleAtom } from '../shared/layout/atom'; import { colorset } from './constants'; import useSetting from './hooks/useSetting'; import './style/index.scss'; +import PreviewSection from './components/PreviewSection'; const Container = () => { const [, setTitle] = useAtom(titleAtom); @@ -18,6 +19,7 @@ const Container = () => { return (
+
Today's comment: diff --git a/src/features/setting/components/PreviewSection.tsx b/src/features/setting/components/PreviewSection.tsx new file mode 100644 index 0000000..e0f8139 --- /dev/null +++ b/src/features/setting/components/PreviewSection.tsx @@ -0,0 +1,17 @@ +import { previewSubText, previewTitleText } from '../constants'; +import useSetting from '../hooks/useSetting'; + +const PreviewSection = () => { + const { handlePreviewClick } = useSetting(); + return ( +
+
{previewTitleText}
+
{previewSubText}
+ +
+ ); +}; + +export default PreviewSection; diff --git a/src/features/setting/constants.ts b/src/features/setting/constants.ts index b4ca5bd..9e0c05e 100644 --- a/src/features/setting/constants.ts +++ b/src/features/setting/constants.ts @@ -1 +1,5 @@ export const colorset = ['red', 'yellow', 'green']; + +export const previewTitleText = 'What is the Active Setting?'; +export const previewSubText = + 'Congratulations on winning! Press the button to get a giftCongratulations on winning! Press the button to get a giftCongratulations on winning!'; diff --git a/src/features/setting/hooks/useSetting.ts b/src/features/setting/hooks/useSetting.ts index f739f74..87f526c 100644 --- a/src/features/setting/hooks/useSetting.ts +++ b/src/features/setting/hooks/useSetting.ts @@ -1,6 +1,8 @@ import { useForm, SubmitHandler } from 'react-hook-form'; +import { useNavigate } from 'react-router-dom'; import { Inputs } from '../types'; +import { URL } from '../../shared/constants/url'; const useSetting = () => { const { register, handleSubmit, control } = useForm({ @@ -9,13 +11,19 @@ const useSetting = () => { comment: '퇴근!', }, }); + const navigate = useNavigate(); const onSubmit: SubmitHandler = (data) => console.log(data); + const handlePreviewClick = () => { + navigate(URL.preview); + }; + return { register, handleSubmit, control, onSubmit, + handlePreviewClick, }; }; diff --git a/src/features/setting/style/index.scss b/src/features/setting/style/index.scss index c81079f..fd5aa49 100644 --- a/src/features/setting/style/index.scss +++ b/src/features/setting/style/index.scss @@ -1,5 +1,52 @@ .setting { &-container { width: 100%; + height: calc(100% - 78px); + background: #F7F7F7; + margin-bottom: 12px; + } + + &-preview-box { + height: 176px; + display: flex; + padding: 24px 16px; + flex-direction: column; + align-items: center; + align-self: stretch; + background-color: #FFFFFF; + } + + &-preview-title-text { + height: 36px; + margin-bottom: 4px; + color: #191919; + text-align: center; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 36px; /* 150% */ + } + + &-preview-sub-text { + height: 72px; + margin-bottom: 16px; + color: #9797AE; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 24px; /* 171.429% */ + } + + &-preview-button { + display: flex; + width: 100%; + height: 48px; + padding: 0px 14px; + justify-content: center; + align-items: center; + align-self: stretch; + border: 1px solid #191919; + color: #191919; + background-color: #FFFFFF; } } \ No newline at end of file From 41a9431d637d94d824237dd2ddc476ffad0057b0 Mon Sep 17 00:00:00 2001 From: anyl92 Date: Sat, 19 Aug 2023 21:07:37 +0900 Subject: [PATCH 3/8] feat(active): apply form ui --- public/png/mood_BAD.png | Bin 0 -> 8982 bytes public/png/mood_GOOD.png | Bin 0 -> 12296 bytes src/features/setting/Container.tsx | 41 +---------- .../setting/components/PreviewSection.tsx | 2 +- .../components/SubmitForm/DailySticker.tsx | 46 ++++++++++++ .../components/SubmitForm/DailyWord.tsx | 15 ++++ .../setting/components/SubmitForm/index.tsx | 21 ++++++ src/features/setting/constants.ts | 4 ++ src/features/setting/hooks/useSetting.ts | 4 +- src/features/setting/style/index.scss | 68 +++++++++++++++++- 10 files changed, 158 insertions(+), 43 deletions(-) create mode 100644 public/png/mood_BAD.png create mode 100644 public/png/mood_GOOD.png create mode 100644 src/features/setting/components/SubmitForm/DailySticker.tsx create mode 100644 src/features/setting/components/SubmitForm/DailyWord.tsx create mode 100644 src/features/setting/components/SubmitForm/index.tsx diff --git a/public/png/mood_BAD.png b/public/png/mood_BAD.png new file mode 100644 index 0000000000000000000000000000000000000000..0926ec939f7d4a64f6f47eb0f845b31327cfbb63 GIT binary patch literal 8982 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 literal 0 HcmV?d00001 diff --git a/public/png/mood_GOOD.png b/public/png/mood_GOOD.png new file mode 100644 index 0000000000000000000000000000000000000000..ccdb08041d38a581727e02591f6e87a6c5d91add GIT binary patch literal 12296 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 AQ2+n{ literal 0 HcmV?d00001 diff --git a/src/features/setting/Container.tsx b/src/features/setting/Container.tsx index c1b3c80..76fdf7c 100644 --- a/src/features/setting/Container.tsx +++ b/src/features/setting/Container.tsx @@ -1,17 +1,14 @@ -import { Controller } from 'react-hook-form'; import { useAtom } from 'jotai'; import { useLayoutEffect } from 'react'; import { titleAtom } from '../shared/layout/atom'; -import { colorset } from './constants'; -import useSetting from './hooks/useSetting'; import './style/index.scss'; import PreviewSection from './components/PreviewSection'; +import SubmitForm from './components/SubmitForm'; const Container = () => { const [, setTitle] = useAtom(titleAtom); - const { register, handleSubmit, control, onSubmit } = useSetting(); useLayoutEffect(() => { setTitle({ title: 'Active', back: true }); @@ -20,41 +17,7 @@ const Container = () => { return (
- -
- Today's comment: - -
- -
- ( -
- {colorset.map((color) => ( - - ))} -
- )} - /> -
- - - +
); }; diff --git a/src/features/setting/components/PreviewSection.tsx b/src/features/setting/components/PreviewSection.tsx index e0f8139..f6107f4 100644 --- a/src/features/setting/components/PreviewSection.tsx +++ b/src/features/setting/components/PreviewSection.tsx @@ -4,7 +4,7 @@ import useSetting from '../hooks/useSetting'; const PreviewSection = () => { const { handlePreviewClick } = useSetting(); return ( -
+
{previewTitleText}
{previewSubText}
diff --git a/src/features/setting/components/SubmitForm/index.tsx b/src/features/setting/components/SubmitForm/index.tsx index 15c9bcb..4a54b76 100644 --- a/src/features/setting/components/SubmitForm/index.tsx +++ b/src/features/setting/components/SubmitForm/index.tsx @@ -1,20 +1,30 @@ +import { useAtom } from 'jotai'; +import { useEffect } from 'react'; + +import LayoutBottomBtn from '../../../shared/layout/components/BottomBtn'; import useSetting from '../../hooks/useSetting'; +import { activeSaveAtom } from '../../../shared/layout/atom'; import DailySticker from './DailySticker'; import DailyWord from './DailyWord'; const SubmitForm = () => { const { handleSubmit, onSubmit } = useSetting(); + const [activeSave] = useAtom(activeSaveAtom); + + useEffect(() => { + if (activeSave) { + console.log('touched?'); + handleSubmit(onSubmit); + } + }, [activeSave]); + return ( - <> -
- - - {/*
- -
*/} - - +
+ + + + ); }; diff --git a/src/features/setting/constants.ts b/src/features/setting/constants.ts index 668e07f..d957670 100644 --- a/src/features/setting/constants.ts +++ b/src/features/setting/constants.ts @@ -1,5 +1,5 @@ export const colorset = ['red', 'yellow', 'green']; -export const stickerList = ['mood_BAD', 'mood_GOOD', 'mood_BAD', 'mood_GOOD']; +export const stickerList = ['mood_BAD', 'mood_GOOD']; export const previewTitleText = 'What is the Active Setting?'; export const previewSubText = diff --git a/src/features/setting/style/index.scss b/src/features/setting/style/index.scss index 60b5cc0..ab91c42 100644 --- a/src/features/setting/style/index.scss +++ b/src/features/setting/style/index.scss @@ -36,7 +36,7 @@ line-height: 24px; /* 171.429% */ } - &-preview-button { + &-preview-btn { display: flex; width: 100%; height: 48px; @@ -47,6 +47,7 @@ border: 1px solid #191919; color: #191919; background-color: #FFFFFF; + cursor: pointer; } &-word-container { diff --git a/src/features/shared/layout/atom.ts b/src/features/shared/layout/atom.ts index 7183909..b2c99d0 100644 --- a/src/features/shared/layout/atom.ts +++ b/src/features/shared/layout/atom.ts @@ -12,3 +12,5 @@ type BottomBtnAtom = { add?: boolean; }; export const bottomBtnAtom = atom({}); + +export const activeSaveAtom = atom(false); diff --git a/src/features/shared/layout/components/BottomBtn.tsx b/src/features/shared/layout/components/BottomBtn.tsx index 8178769..39926f0 100644 --- a/src/features/shared/layout/components/BottomBtn.tsx +++ b/src/features/shared/layout/components/BottomBtn.tsx @@ -1,18 +1,19 @@ import { useAtom } from 'jotai'; import { FunctionComponent } from 'react'; -import { bottomBtnAtom } from '../atom'; +import { activeSaveAtom, bottomBtnAtom } from '../atom'; import addLogo from '/svg/add.svg'; const LayoutBottomBtn: FunctionComponent = () => { const [{ text, add }] = useAtom(bottomBtnAtom); + const [, setActiveSave] = useAtom(activeSaveAtom); if (!text) return
; return (
-
+
setActiveSave(true)}>
{add && Add Logo}
From bffa1deaa349b74760fc31ee2fc0f339fb5950e5 Mon Sep 17 00:00:00 2001 From: anyl92 Date: Sun, 20 Aug 2023 01:02:27 +0900 Subject: [PATCH 7/8] feat(active): change type --- src/features/setting/Container.tsx | 14 +++++++-- .../setting/components/PreviewSection.tsx | 12 +++++-- .../components/SubmitForm/DailySticker.tsx | 16 +++++++--- .../components/SubmitForm/DailyWord.tsx | 12 +++++-- .../setting/components/SubmitForm/index.tsx | 31 ++++++++++++++----- src/features/setting/style/index.scss | 14 ++++++--- 6 files changed, 75 insertions(+), 24 deletions(-) diff --git a/src/features/setting/Container.tsx b/src/features/setting/Container.tsx index 822853b..530abf1 100644 --- a/src/features/setting/Container.tsx +++ b/src/features/setting/Container.tsx @@ -3,6 +3,7 @@ import { useLayoutEffect } from 'react'; import { bottomBtnAtom, titleAtom } from '../shared/layout/atom'; +import useSetting from './hooks/useSetting'; import './style/index.scss'; import PreviewSection from './components/PreviewSection'; import SubmitForm from './components/SubmitForm'; @@ -10,6 +11,10 @@ import SubmitForm from './components/SubmitForm'; const Container = () => { const [, setTitle] = useAtom(titleAtom); const [, setBottomBtn] = useAtom(bottomBtnAtom); + + const { handlePreviewClick, handleSubmit, onSubmit, register, control } = + useSetting(); + useLayoutEffect(() => { setTitle({ title: 'Active', back: true }); setBottomBtn({ text: 'Save' }); @@ -17,8 +22,13 @@ const Container = () => { return (
- - + +
); }; diff --git a/src/features/setting/components/PreviewSection.tsx b/src/features/setting/components/PreviewSection.tsx index d9fd707..3ae1db0 100644 --- a/src/features/setting/components/PreviewSection.tsx +++ b/src/features/setting/components/PreviewSection.tsx @@ -1,8 +1,14 @@ +import { FunctionComponent } from 'react'; + import { previewSubText, previewTitleText } from '../constants'; -import useSetting from '../hooks/useSetting'; -const PreviewSection = () => { - const { handlePreviewClick } = useSetting(); +type PreviewSectionProps = { + handlePreviewClick: () => void; +}; + +const PreviewSection: FunctionComponent = ({ + handlePreviewClick, +}) => { return (
{previewTitleText}
diff --git a/src/features/setting/components/SubmitForm/DailySticker.tsx b/src/features/setting/components/SubmitForm/DailySticker.tsx index aa38cd1..29614e7 100644 --- a/src/features/setting/components/SubmitForm/DailySticker.tsx +++ b/src/features/setting/components/SubmitForm/DailySticker.tsx @@ -1,13 +1,17 @@ +import { FunctionComponent } from 'react'; import { Controller } from 'react-hook-form'; +import { Control } from 'react-hook-form'; +import { Inputs } from '../../types'; import { stickerList, wordStickerText } from '../../constants'; -import useSetting from '../../hooks/useSetting'; import '../../style/index.scss'; -const DailySticker = () => { - const { control } = useSetting(); +type DailyStickerProps = { + control: Control; +}; +const DailySticker: FunctionComponent = ({ control }) => { return (
{wordStickerText} @@ -18,7 +22,11 @@ const DailySticker = () => { render={({ field }) => (
{stickerList.map((sticker) => ( -