From 685fd64d153e869b8653f3e52dbebaa72883fa88 Mon Sep 17 00:00:00 2001 From: seojin kim <001106ksj@gmail.com> Date: Sun, 16 Jan 2022 14:38:22 +0900 Subject: [PATCH 01/12] =?UTF-8?q?=E2=9C=A8feat:=20=EB=AA=A9=20API=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=9E=91=EC=84=B1,=20=EC=B2=AB=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/application/stores/neososeo-form.ts | 7 ++++ src/infrastructure/api/index.ts | 6 +++- src/infrastructure/api/neososeo-form.ts | 5 +++ src/infrastructure/api/types/neososeo-form.ts | 18 ++++++++++ src/infrastructure/mock/neososeo-form.data.ts | 13 +++++++ src/infrastructure/mock/neososeo-form.ts | 13 +++++++ .../pages/NeososeoForm/Answer/index.tsx | 15 ++++++++ .../pages/NeososeoForm/Home/index.tsx | 18 ++++++++++ .../pages/NeososeoForm/Home/style.ts | 26 ++++++++++++++ .../pages/NeososeoForm/Intro/index.tsx | 15 ++++++++ src/presentation/pages/NeososeoForm/index.tsx | 35 +++++++++++++++++++ src/presentation/pages/NeososeoForm/style.ts | 27 ++++++++++++++ src/presentation/routes/FormRouter.tsx | 16 +++++++++ src/presentation/routes/HomeRouter.tsx | 1 - src/presentation/routes/Router.tsx | 2 ++ 15 files changed, 215 insertions(+), 2 deletions(-) create mode 100644 src/application/stores/neososeo-form.ts create mode 100644 src/infrastructure/api/neososeo-form.ts create mode 100644 src/infrastructure/api/types/neososeo-form.ts create mode 100644 src/infrastructure/mock/neososeo-form.data.ts create mode 100644 src/infrastructure/mock/neososeo-form.ts create mode 100644 src/presentation/pages/NeososeoForm/Answer/index.tsx create mode 100644 src/presentation/pages/NeososeoForm/Home/index.tsx create mode 100644 src/presentation/pages/NeososeoForm/Home/style.ts create mode 100644 src/presentation/pages/NeososeoForm/Intro/index.tsx create mode 100644 src/presentation/pages/NeososeoForm/index.tsx create mode 100644 src/presentation/pages/NeososeoForm/style.ts create mode 100644 src/presentation/routes/FormRouter.tsx diff --git a/src/application/stores/neososeo-form.ts b/src/application/stores/neososeo-form.ts new file mode 100644 index 00000000..007184f1 --- /dev/null +++ b/src/application/stores/neososeo-form.ts @@ -0,0 +1,7 @@ +import { NeososeoFormData } from '@api/types/neososeo-form'; +import { atom } from 'recoil'; + +export const neososeoFormState = atom({ + key: 'neososeoFormState', + default: null, +}); diff --git a/src/infrastructure/api/index.ts b/src/infrastructure/api/index.ts index e6979525..ebcad76d 100644 --- a/src/infrastructure/api/index.ts +++ b/src/infrastructure/api/index.ts @@ -1,7 +1,9 @@ import { neogaDataMock } from '../mock/neoga'; +import { neososeoFormDataMock } from '../mock/neososeo-form'; import { teamDataMock } from '../mock/team'; import { userDataMock } from '../mock/user'; import { NeogaService } from './neoga'; +import { NeososeoFormService } from './neososeo-form'; import { TeamService } from './team'; import { UserService } from './user'; @@ -15,12 +17,14 @@ function provideMockAPIService(): APIService { const teamService = teamDataMock(); const userService = userDataMock(); const neogaService = neogaDataMock(); + const neososeoFormService = neososeoFormDataMock(); - return { teamService, userService, neogaService }; + return { teamService, userService, neogaService, neososeoFormService }; } export interface APIService { teamService: TeamService; userService: UserService; neogaService: NeogaService; + neososeoFormService: NeososeoFormService; } diff --git a/src/infrastructure/api/neososeo-form.ts b/src/infrastructure/api/neososeo-form.ts new file mode 100644 index 00000000..7ff8faf1 --- /dev/null +++ b/src/infrastructure/api/neososeo-form.ts @@ -0,0 +1,5 @@ +import { NeososeoFormData } from './types/neososeo-form'; + +export interface NeososeoFormService { + getFormInfo(userID: number, formID: number): Promise; +} diff --git a/src/infrastructure/api/types/neososeo-form.ts b/src/infrastructure/api/types/neososeo-form.ts new file mode 100644 index 00000000..df3617e8 --- /dev/null +++ b/src/infrastructure/api/types/neososeo-form.ts @@ -0,0 +1,18 @@ +import { Keyword } from './user'; + +export type NeososeoFormData = { + title: string; + content: string; + imageSub: string; + imageMain: string; + relation: string[]; +}; + +export type NeososeoAnswerData = { + userID: number; + formID: number; + name: string; + relation: string; + answer: string; + keyword: Keyword[]; +}; diff --git a/src/infrastructure/mock/neososeo-form.data.ts b/src/infrastructure/mock/neososeo-form.data.ts new file mode 100644 index 00000000..fe3716d9 --- /dev/null +++ b/src/infrastructure/mock/neososeo-form.data.ts @@ -0,0 +1,13 @@ +import { NeososeoFormData } from '@api/types/neososeo-form'; + +export const NEOSOSEO_FORM_DATA: { FORM: NeososeoFormData } = { + FORM: { + title: '너가 닮고 싶은\n나의 일잘러 모습', + content: '나와 함께하며 당신이 닮고 싶었던 능력이 있었나요?', + relation: ['동네친구', '쿵짝최고', '존경해요', '찐친베프'], + imageSub: + 'https://ww.namu.la/s/61e3a8075b5aa238383c0d89badd3442f7389a0285575fc5bc5c16d2a34f22c66e57e35d568b63b706fa24750c784d55e972ceeea93fa5a91d00dab1eea37681e189ae826afe668fb379b0cb3a446f3268755691ed20c6a165185d44e2fd1029896062ed4df01a806594e35a637b2372', + imageMain: + 'https://ww.namu.la/s/fb6e8a32fae6736a8f9545e34543d9e5f8aaf9b737ba73aa9b9192e4a4e86ea71489f07c93e66055aa8790bbefea8b237268e578cbc323091b38e0c647b2037ec1cc8d56dd4fa84dfd94e2982aca769a8bbe2f8008227f386f55a9ec546b1a63ab412af0c82266c640e636d31c9d280d', + }, +}; diff --git a/src/infrastructure/mock/neososeo-form.ts b/src/infrastructure/mock/neososeo-form.ts new file mode 100644 index 00000000..e9bc6ead --- /dev/null +++ b/src/infrastructure/mock/neososeo-form.ts @@ -0,0 +1,13 @@ +import { NeososeoFormService } from '@api/neososeo-form'; +import { NEOSOSEO_FORM_DATA } from './neososeo-form.data'; + +export function neososeoFormDataMock(): NeososeoFormService { + const getFormInfo = async () => { + await wait(2000); + return NEOSOSEO_FORM_DATA.FORM; + }; + + return { getFormInfo }; +} + +const wait = (milliSeconds: number) => new Promise((resolve) => setTimeout(resolve, milliSeconds)); diff --git a/src/presentation/pages/NeososeoForm/Answer/index.tsx b/src/presentation/pages/NeososeoForm/Answer/index.tsx new file mode 100644 index 00000000..29573859 --- /dev/null +++ b/src/presentation/pages/NeososeoForm/Answer/index.tsx @@ -0,0 +1,15 @@ +import { neososeoFormState } from '@stores/neososeo-form'; +import React from 'react'; +import { useRecoilValue } from 'recoil'; + +function NeososeoFormAnswer() { + const neososeoFormData = useRecoilValue(neososeoFormState); + if (!neososeoFormData) return <>; + return ( +
+
{neososeoFormData.content}
+
+ ); +} + +export default NeososeoFormAnswer; diff --git a/src/presentation/pages/NeososeoForm/Home/index.tsx b/src/presentation/pages/NeososeoForm/Home/index.tsx new file mode 100644 index 00000000..d3602c20 --- /dev/null +++ b/src/presentation/pages/NeososeoForm/Home/index.tsx @@ -0,0 +1,18 @@ +import { neososeoFormState } from '@stores/neososeo-form'; +import { useRecoilValue } from 'recoil'; +import { StButton, StNeososeoFormHome, StImage } from './style'; + +function NeososeoFormHome() { + const neososeoFormData = useRecoilValue(neososeoFormState); + if (!neososeoFormData) return <>; + return ( + +
+ +
+ 답변 작성하기 + + ); +} + +export default NeososeoFormHome; diff --git a/src/presentation/pages/NeososeoForm/Home/style.ts b/src/presentation/pages/NeososeoForm/Home/style.ts new file mode 100644 index 00000000..6c28dc16 --- /dev/null +++ b/src/presentation/pages/NeososeoForm/Home/style.ts @@ -0,0 +1,26 @@ +import { CORAL_MAIN_BUTTON, FULL_WIDTH_BUTTON } from '@styles/common/button'; +import styled from 'styled-components'; + +export const StButton = styled.div` + ${FULL_WIDTH_BUTTON} + ${CORAL_MAIN_BUTTON} +`; + +export const StNeososeoFormHome = styled.div` + width: calc(100vw - 40px); + height: 100%; + display: grid; + grid-template-rows: auto 58px; + + & > div:nth-child(1) { + display: flex; + align-items: center; + padding-bottom: 40px; + } + + & img { + width: calc(100vw - 40px); + } +`; + +export const StImage = styled.img``; diff --git a/src/presentation/pages/NeososeoForm/Intro/index.tsx b/src/presentation/pages/NeososeoForm/Intro/index.tsx new file mode 100644 index 00000000..51ae9c7a --- /dev/null +++ b/src/presentation/pages/NeososeoForm/Intro/index.tsx @@ -0,0 +1,15 @@ +import { neososeoFormState } from '@stores/neososeo-form'; +import React from 'react'; +import { useRecoilValue } from 'recoil'; + +function NeososeoFormIntro() { + const neososeoFormData = useRecoilValue(neososeoFormState); + if (!neososeoFormData) return <>; + return ( +
+
{neososeoFormData.content}
+
+ ); +} + +export default NeososeoFormIntro; diff --git a/src/presentation/pages/NeososeoForm/index.tsx b/src/presentation/pages/NeososeoForm/index.tsx new file mode 100644 index 00000000..f5d14bf3 --- /dev/null +++ b/src/presentation/pages/NeososeoForm/index.tsx @@ -0,0 +1,35 @@ +import { api } from '@api/index'; +import FormRouter from '@routes/FormRouter'; +import { neososeoFormState } from '@stores/neososeo-form'; +import { useEffect } from 'react'; +import { useParams } from 'react-router-dom'; +import { useRecoilState } from 'recoil'; +import { StNeososeoFormPage, StNeososeoFormHeader } from './style'; + +function NeososeoFormPage() { + const { userID, formID } = useParams(); + const [neososeoForm, setNeososeoForm] = useRecoilState(neososeoFormState); + + useEffect(() => { + if (!userID || !formID) return; + if (isNaN(+userID) || isNaN(+formID)) return; + (async () => { + const data = await api.neososeoFormService.getFormInfo(+userID, +formID); + setNeososeoForm(data); + })(); + }, [userID, formID]); + + return ( + + {neososeoForm && ( + +
{neososeoForm.title}
+ {neososeoForm.title} + + )} + + + ); +} + +export default NeososeoFormPage; diff --git a/src/presentation/pages/NeososeoForm/style.ts b/src/presentation/pages/NeososeoForm/style.ts new file mode 100644 index 00000000..461f32ee --- /dev/null +++ b/src/presentation/pages/NeososeoForm/style.ts @@ -0,0 +1,27 @@ +import { FONT_STYLES } from '@styles/common/font-style'; +import styled from 'styled-components'; + +export const StNeososeoFormPage = styled.div` + min-height: 100vh; + width: calc(100vw - 40px); + padding: 50px 0; + display: grid; + grid-template-rows: 70px auto; +`; + +export const StNeososeoFormHeader = styled.div` + width: calc(100vw - 40px); + display: grid; + grid-template-columns: auto 68px; + white-space: pre; + + & div { + line-height: 33px; + ${FONT_STYLES.SB_22_BODY} + } + + & img { + width: 68px; + height: 68px; + } +`; diff --git a/src/presentation/routes/FormRouter.tsx b/src/presentation/routes/FormRouter.tsx new file mode 100644 index 00000000..ec70b09b --- /dev/null +++ b/src/presentation/routes/FormRouter.tsx @@ -0,0 +1,16 @@ +import NeososeoFormAnswer from '@pages/NeososeoForm/Answer'; +import NeososeoFormHome from '@pages/NeososeoForm/Home'; +import NeososeoFormIntro from '@pages/NeososeoForm/Intro'; +import { Route, Routes } from 'react-router-dom'; + +function FormRouter() { + return ( + + } /> + } /> + } /> + + ); +} + +export default FormRouter; diff --git a/src/presentation/routes/HomeRouter.tsx b/src/presentation/routes/HomeRouter.tsx index f08be739..b4465660 100644 --- a/src/presentation/routes/HomeRouter.tsx +++ b/src/presentation/routes/HomeRouter.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { Route, Routes } from 'react-router-dom'; import HomeMyPage from '@pages/Home/MyPage'; import HomeTeam from '@pages/Home/Team'; diff --git a/src/presentation/routes/Router.tsx b/src/presentation/routes/Router.tsx index 763a3c9d..bb116287 100644 --- a/src/presentation/routes/Router.tsx +++ b/src/presentation/routes/Router.tsx @@ -1,3 +1,4 @@ +import NeososeoFormPage from '@pages/NeososeoForm'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; import NeogaRouter from './NeogaRouter'; import TeamRouter from './TeamRouter'; @@ -10,6 +11,7 @@ const Router = () => { } /> } /> } /> + } /> ); From b036fbc24aaf9dd76cbd6f0e7f2cb6be11b6cb7e Mon Sep 17 00:00:00 2001 From: seojin kim <001106ksj@gmail.com> Date: Sun, 16 Jan 2022 15:14:37 +0900 Subject: [PATCH 02/12] =?UTF-8?q?=E2=9C=A8feat:=20=EA=B8=B0=ED=9A=8D=20?= =?UTF-8?q?=EC=A0=9C=EB=8C=80=EB=A1=9C=20=EC=9D=B4=ED=95=B4=20=EB=AA=BB?= =?UTF-8?q?=ED=95=9C=20=EB=B6=80=EB=B6=84=20=EC=88=98=EC=A0=95,=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1=20=EC=B2=AB=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EC=99=80=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/infrastructure/api/types/neososeo-form.ts | 1 - src/infrastructure/mock/neososeo-form.data.ts | 2 -- src/presentation/pages/NeososeoForm/Home/index.tsx | 9 ++++++--- src/presentation/pages/NeososeoForm/Home/style.ts | 2 -- src/presentation/routes/Router.tsx | 2 +- 5 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/infrastructure/api/types/neososeo-form.ts b/src/infrastructure/api/types/neososeo-form.ts index df3617e8..8262a5de 100644 --- a/src/infrastructure/api/types/neososeo-form.ts +++ b/src/infrastructure/api/types/neososeo-form.ts @@ -4,7 +4,6 @@ export type NeososeoFormData = { title: string; content: string; imageSub: string; - imageMain: string; relation: string[]; }; diff --git a/src/infrastructure/mock/neososeo-form.data.ts b/src/infrastructure/mock/neososeo-form.data.ts index fe3716d9..357324de 100644 --- a/src/infrastructure/mock/neososeo-form.data.ts +++ b/src/infrastructure/mock/neososeo-form.data.ts @@ -7,7 +7,5 @@ export const NEOSOSEO_FORM_DATA: { FORM: NeososeoFormData } = { relation: ['동네친구', '쿵짝최고', '존경해요', '찐친베프'], imageSub: 'https://ww.namu.la/s/61e3a8075b5aa238383c0d89badd3442f7389a0285575fc5bc5c16d2a34f22c66e57e35d568b63b706fa24750c784d55e972ceeea93fa5a91d00dab1eea37681e189ae826afe668fb379b0cb3a446f3268755691ed20c6a165185d44e2fd1029896062ed4df01a806594e35a637b2372', - imageMain: - 'https://ww.namu.la/s/fb6e8a32fae6736a8f9545e34543d9e5f8aaf9b737ba73aa9b9192e4a4e86ea71489f07c93e66055aa8790bbefea8b237268e578cbc323091b38e0c647b2037ec1cc8d56dd4fa84dfd94e2982aca769a8bbe2f8008227f386f55a9ec546b1a63ab412af0c82266c640e636d31c9d280d', }, }; diff --git a/src/presentation/pages/NeososeoForm/Home/index.tsx b/src/presentation/pages/NeososeoForm/Home/index.tsx index d3602c20..cbb986be 100644 --- a/src/presentation/pages/NeososeoForm/Home/index.tsx +++ b/src/presentation/pages/NeososeoForm/Home/index.tsx @@ -1,16 +1,19 @@ import { neososeoFormState } from '@stores/neososeo-form'; +import { useNavigate } from 'react-router-dom'; import { useRecoilValue } from 'recoil'; -import { StButton, StNeososeoFormHome, StImage } from './style'; +import { StButton, StNeososeoFormHome } from './style'; function NeososeoFormHome() { const neososeoFormData = useRecoilValue(neososeoFormState); + const navigate = useNavigate(); + if (!neososeoFormData) return <>; return (
- +
{neososeoFormData.content}
- 답변 작성하기 + navigate('intro')}>답변 작성하기 ); } diff --git a/src/presentation/pages/NeososeoForm/Home/style.ts b/src/presentation/pages/NeososeoForm/Home/style.ts index 6c28dc16..b5cf52b5 100644 --- a/src/presentation/pages/NeososeoForm/Home/style.ts +++ b/src/presentation/pages/NeososeoForm/Home/style.ts @@ -22,5 +22,3 @@ export const StNeososeoFormHome = styled.div` width: calc(100vw - 40px); } `; - -export const StImage = styled.img``; diff --git a/src/presentation/routes/Router.tsx b/src/presentation/routes/Router.tsx index bb116287..fb915baf 100644 --- a/src/presentation/routes/Router.tsx +++ b/src/presentation/routes/Router.tsx @@ -11,7 +11,7 @@ const Router = () => { } /> } /> } /> - } /> + } /> ); From 81a48125ea1ed57d46ded694ec66afdf0cdc7fb6 Mon Sep 17 00:00:00 2001 From: seojin kim <001106ksj@gmail.com> Date: Sun, 16 Jan 2022 18:55:48 +0900 Subject: [PATCH 03/12] =?UTF-8?q?=E2=9C=A8feat:=20=ED=8F=BC=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=EC=97=90=20=EC=9C=A0=EC=A0=80=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=EC=9D=B4=20=EB=93=A4=EC=96=B4=EA=B0=80=EA=B2=8C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/infrastructure/api/types/neososeo-form.ts | 1 + src/infrastructure/mock/neososeo-form.data.ts | 1 + .../pages/NeososeoForm/Home/index.tsx | 3 +- .../pages/NeososeoForm/Home/style.ts | 6 --- .../pages/NeososeoForm/Intro/index.tsx | 35 ++++++++++++- src/presentation/pages/NeososeoForm/style.ts | 50 +++++++++++++++++++ 6 files changed, 87 insertions(+), 9 deletions(-) diff --git a/src/infrastructure/api/types/neososeo-form.ts b/src/infrastructure/api/types/neososeo-form.ts index 8262a5de..4fbc43e7 100644 --- a/src/infrastructure/api/types/neososeo-form.ts +++ b/src/infrastructure/api/types/neososeo-form.ts @@ -5,6 +5,7 @@ export type NeososeoFormData = { content: string; imageSub: string; relation: string[]; + userName: string; }; export type NeososeoAnswerData = { diff --git a/src/infrastructure/mock/neososeo-form.data.ts b/src/infrastructure/mock/neososeo-form.data.ts index 357324de..01d3f7b0 100644 --- a/src/infrastructure/mock/neososeo-form.data.ts +++ b/src/infrastructure/mock/neososeo-form.data.ts @@ -7,5 +7,6 @@ export const NEOSOSEO_FORM_DATA: { FORM: NeososeoFormData } = { relation: ['동네친구', '쿵짝최고', '존경해요', '찐친베프'], imageSub: 'https://ww.namu.la/s/61e3a8075b5aa238383c0d89badd3442f7389a0285575fc5bc5c16d2a34f22c66e57e35d568b63b706fa24750c784d55e972ceeea93fa5a91d00dab1eea37681e189ae826afe668fb379b0cb3a446f3268755691ed20c6a165185d44e2fd1029896062ed4df01a806594e35a637b2372', + userName: '강쥐', }, }; diff --git a/src/presentation/pages/NeososeoForm/Home/index.tsx b/src/presentation/pages/NeososeoForm/Home/index.tsx index cbb986be..453d96b1 100644 --- a/src/presentation/pages/NeososeoForm/Home/index.tsx +++ b/src/presentation/pages/NeososeoForm/Home/index.tsx @@ -1,7 +1,8 @@ import { neososeoFormState } from '@stores/neososeo-form'; import { useNavigate } from 'react-router-dom'; import { useRecoilValue } from 'recoil'; -import { StButton, StNeososeoFormHome } from './style'; +import { StButton } from '../style'; +import { StNeososeoFormHome } from './style'; function NeososeoFormHome() { const neososeoFormData = useRecoilValue(neososeoFormState); diff --git a/src/presentation/pages/NeososeoForm/Home/style.ts b/src/presentation/pages/NeososeoForm/Home/style.ts index b5cf52b5..3acacf68 100644 --- a/src/presentation/pages/NeososeoForm/Home/style.ts +++ b/src/presentation/pages/NeososeoForm/Home/style.ts @@ -1,11 +1,5 @@ -import { CORAL_MAIN_BUTTON, FULL_WIDTH_BUTTON } from '@styles/common/button'; import styled from 'styled-components'; -export const StButton = styled.div` - ${FULL_WIDTH_BUTTON} - ${CORAL_MAIN_BUTTON} -`; - export const StNeososeoFormHome = styled.div` width: calc(100vw - 40px); height: 100%; diff --git a/src/presentation/pages/NeososeoForm/Intro/index.tsx b/src/presentation/pages/NeososeoForm/Intro/index.tsx index 51ae9c7a..2480357f 100644 --- a/src/presentation/pages/NeososeoForm/Intro/index.tsx +++ b/src/presentation/pages/NeososeoForm/Intro/index.tsx @@ -1,13 +1,44 @@ +import CommonInput from '@components/common/CommonInput'; import { neososeoFormState } from '@stores/neososeo-form'; -import React from 'react'; +import { useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import { useRecoilValue } from 'recoil'; +import { StButton, StNeososeoTitle, StRelation, StRelationWrapper, StSubTitle } from '../style'; +import { StBody } from './style'; function NeososeoFormIntro() { const neososeoFormData = useRecoilValue(neososeoFormState); + const [selectedRelation, setSelectedRelation] = useState(''); + const navigate = useNavigate(); + + useEffect(() => { + if (!neososeoFormData) return; + setSelectedRelation(neososeoFormData.relation[0]); + }, [neososeoFormData]); if (!neososeoFormData) return <>; return (
-
{neososeoFormData.content}
+ + Q. + {neososeoFormData.content} + + + 나를 소개해주세요 + + {neososeoFormData.userName}님과의 관계를 선택해주세요 + + {neososeoFormData.relation.map((relation) => ( + setSelectedRelation(relation)} + > + {relation} + + ))} + + navigate('intro')}>다음 +
); } diff --git a/src/presentation/pages/NeososeoForm/style.ts b/src/presentation/pages/NeososeoForm/style.ts index 461f32ee..0edb6ae4 100644 --- a/src/presentation/pages/NeososeoForm/style.ts +++ b/src/presentation/pages/NeososeoForm/style.ts @@ -1,3 +1,5 @@ +import { CORAL_MAIN_BUTTON, FULL_WIDTH_BUTTON } from '@styles/common/button'; +import { COLOR } from '@styles/common/color'; import { FONT_STYLES } from '@styles/common/font-style'; import styled from 'styled-components'; @@ -25,3 +27,51 @@ export const StNeososeoFormHeader = styled.div` height: 68px; } `; + +export const StNeososeoTitle = styled.div` + border-radius: 18px; + width: 100%; + display: flex; + gap: 8px; + padding: 16px 20px; + background-color: ${COLOR.GRAY_1}; + margin-top: 24px; + + & > span:nth-child(1) { + color: ${COLOR.CORAL_MAIN}; + line-height: 20px; + } + + & > span:nth-child(2) { + ${FONT_STYLES.R_15_BODY} + color: ${COLOR.GRAY_7}; + line-height: 20px; + } +`; + +export const StSubTitle = styled.div` + margin-top: 44px; + margin-bottom: 18px; + ${FONT_STYLES.SB_16_TITLE} + color: ${COLOR.GRAY_8}; +`; + +export const StRelationWrapper = styled.div` + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; +`; + +export const StRelation = styled.div<{ selected: boolean }>` + ${FONT_STYLES.R_15_TITLE} + padding: 15px 0; + border-radius: 14px; + text-align: center; + color: ${({ selected }) => (selected ? COLOR.CORAL_MAIN : COLOR.GRAY_5)}; + background-color: ${({ selected }) => (selected ? '#FFEFEF' : COLOR.GRAY_1)}; +`; + +export const StButton = styled.div` + ${FULL_WIDTH_BUTTON} + ${CORAL_MAIN_BUTTON} +`; From 87d6b75b91b3b9a05fc4252b24c9a722b222e431 Mon Sep 17 00:00:00 2001 From: seojin kim <001106ksj@gmail.com> Date: Sun, 16 Jan 2022 19:39:57 +0900 Subject: [PATCH 04/12] =?UTF-8?q?=E2=9C=A8feat:=20=EB=84=88=EC=86=8C?= =?UTF-8?q?=EC=84=9C=20=ED=8F=BC=20=EB=91=90=EB=B2=88=EC=A7=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A7=8C=EB=93=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/NeososeoForm/Answer/index.tsx | 24 +++++++++++++++---- .../pages/NeososeoForm/Answer/style.ts | 9 +++++++ .../pages/NeososeoForm/Intro/index.tsx | 20 ++++++++++------ src/presentation/pages/NeososeoForm/style.ts | 6 +++++ 4 files changed, 48 insertions(+), 11 deletions(-) create mode 100644 src/presentation/pages/NeososeoForm/Answer/style.ts diff --git a/src/presentation/pages/NeososeoForm/Answer/index.tsx b/src/presentation/pages/NeososeoForm/Answer/index.tsx index 29573859..525f107c 100644 --- a/src/presentation/pages/NeososeoForm/Answer/index.tsx +++ b/src/presentation/pages/NeososeoForm/Answer/index.tsx @@ -1,14 +1,30 @@ +import CommonInput from '@components/common/CommonInput'; import { neososeoFormState } from '@stores/neososeo-form'; -import React from 'react'; +import { useNavigate } from 'react-router-dom'; import { useRecoilValue } from 'recoil'; +import { StButton, StNeososeoFormLayout, StNeososeoTitle, StSubTitle } from '../style'; +import { StTextarea } from './style'; function NeososeoFormAnswer() { const neososeoFormData = useRecoilValue(neososeoFormState); + const navigate = useNavigate(); + if (!neososeoFormData) return <>; + return ( -
-
{neososeoFormData.content}
-
+ +
+ + Q. + {neososeoFormData.content} + + 답변 내용을 입력해주세요. + + 키워드를 입력해주세요. + +
+ navigate('intro')}>답변 작성하기 + ); } diff --git a/src/presentation/pages/NeososeoForm/Answer/style.ts b/src/presentation/pages/NeososeoForm/Answer/style.ts new file mode 100644 index 00000000..fdc62ce1 --- /dev/null +++ b/src/presentation/pages/NeososeoForm/Answer/style.ts @@ -0,0 +1,9 @@ +import { COMMON_INPUT } from '@styles/common/input'; +import styled from 'styled-components'; + +export const StTextarea = styled.textarea` + ${COMMON_INPUT} + width: 100%; + resize: unset; + height: 104px; +`; diff --git a/src/presentation/pages/NeososeoForm/Intro/index.tsx b/src/presentation/pages/NeososeoForm/Intro/index.tsx index 2480357f..47509578 100644 --- a/src/presentation/pages/NeososeoForm/Intro/index.tsx +++ b/src/presentation/pages/NeososeoForm/Intro/index.tsx @@ -3,8 +3,14 @@ import { neososeoFormState } from '@stores/neososeo-form'; import { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { useRecoilValue } from 'recoil'; -import { StButton, StNeososeoTitle, StRelation, StRelationWrapper, StSubTitle } from '../style'; -import { StBody } from './style'; +import { + StButton, + StNeososeoFormLayout, + StNeososeoTitle, + StRelation, + StRelationWrapper, + StSubTitle, +} from '../style'; function NeososeoFormIntro() { const neososeoFormData = useRecoilValue(neososeoFormState); @@ -17,12 +23,12 @@ function NeososeoFormIntro() { }, [neososeoFormData]); if (!neososeoFormData) return <>; return ( -
+ Q. {neososeoFormData.content} - +
나를 소개해주세요 {neososeoFormData.userName}님과의 관계를 선택해주세요 @@ -37,9 +43,9 @@ function NeososeoFormIntro() { ))} - navigate('intro')}>다음 - -
+
+ navigate('../answer')}>다음 + ); } diff --git a/src/presentation/pages/NeososeoForm/style.ts b/src/presentation/pages/NeososeoForm/style.ts index 0edb6ae4..3b9bcc16 100644 --- a/src/presentation/pages/NeososeoForm/style.ts +++ b/src/presentation/pages/NeososeoForm/style.ts @@ -74,4 +74,10 @@ export const StRelation = styled.div<{ selected: boolean }>` export const StButton = styled.div` ${FULL_WIDTH_BUTTON} ${CORAL_MAIN_BUTTON} + margin-top: auto; +`; + +export const StNeososeoFormLayout = styled.div` + display: flex; + flex-direction: column; `; From 2e71f767be7c46afe24ddfe0e45ab303ede4afab Mon Sep 17 00:00:00 2001 From: seojin kim <001106ksj@gmail.com> Date: Sun, 16 Jan 2022 20:41:22 +0900 Subject: [PATCH 05/12] =?UTF-8?q?=E2=9C=A8feat:=20=EB=84=88=EC=86=8C?= =?UTF-8?q?=EC=84=9C=20=ED=8F=BC=EC=97=90=EC=84=9C=20=ED=82=A4=EC=9B=8C?= =?UTF-8?q?=EB=93=9C=20=EC=97=B0=EA=B2=B0=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/infrastructure/api/types/neososeo-form.ts | 1 + src/infrastructure/mock/neososeo-form.data.ts | 1 + .../pages/NeososeoForm/Answer/index.tsx | 61 ++++++++++++++----- .../pages/NeososeoForm/Answer/style.ts | 4 ++ src/presentation/pages/NeososeoForm/style.ts | 7 ++- .../pages/Team/Issue/Keyword/style.ts | 2 + src/presentation/routes/FormRouter.tsx | 5 +- 7 files changed, 63 insertions(+), 18 deletions(-) diff --git a/src/infrastructure/api/types/neososeo-form.ts b/src/infrastructure/api/types/neososeo-form.ts index 4fbc43e7..afbcdbc9 100644 --- a/src/infrastructure/api/types/neososeo-form.ts +++ b/src/infrastructure/api/types/neososeo-form.ts @@ -6,6 +6,7 @@ export type NeososeoFormData = { imageSub: string; relation: string[]; userName: string; + userID: number; }; export type NeososeoAnswerData = { diff --git a/src/infrastructure/mock/neososeo-form.data.ts b/src/infrastructure/mock/neososeo-form.data.ts index 01d3f7b0..fef3ac3f 100644 --- a/src/infrastructure/mock/neososeo-form.data.ts +++ b/src/infrastructure/mock/neososeo-form.data.ts @@ -8,5 +8,6 @@ export const NEOSOSEO_FORM_DATA: { FORM: NeososeoFormData } = { imageSub: 'https://ww.namu.la/s/61e3a8075b5aa238383c0d89badd3442f7389a0285575fc5bc5c16d2a34f22c66e57e35d568b63b706fa24750c784d55e972ceeea93fa5a91d00dab1eea37681e189ae826afe668fb379b0cb3a446f3268755691ed20c6a165185d44e2fd1029896062ed4df01a806594e35a637b2372', userName: '강쥐', + userID: 1, }, }; diff --git a/src/presentation/pages/NeososeoForm/Answer/index.tsx b/src/presentation/pages/NeososeoForm/Answer/index.tsx index 525f107c..08528407 100644 --- a/src/presentation/pages/NeososeoForm/Answer/index.tsx +++ b/src/presentation/pages/NeososeoForm/Answer/index.tsx @@ -1,30 +1,61 @@ +import { Keyword } from '@api/types/user'; import CommonInput from '@components/common/CommonInput'; +import ImmutableKeywordList from '@components/common/Keyword/ImmutableList'; import { neososeoFormState } from '@stores/neososeo-form'; -import { useNavigate } from 'react-router-dom'; +import { useState } from 'react'; +import { Link, Outlet, useNavigate } from 'react-router-dom'; import { useRecoilValue } from 'recoil'; import { StButton, StNeososeoFormLayout, StNeososeoTitle, StSubTitle } from '../style'; -import { StTextarea } from './style'; +import { StTextarea, StKeywordListWrapper } from './style'; function NeososeoFormAnswer() { const neososeoFormData = useRecoilValue(neososeoFormState); + const [keywordList, setKeywordList] = useState([]); const navigate = useNavigate(); if (!neososeoFormData) return <>; return ( - -
- - Q. - {neososeoFormData.content} - - 답변 내용을 입력해주세요. - - 키워드를 입력해주세요. - -
- navigate('intro')}>답변 작성하기 - + <> + +
+ + Q. + {neososeoFormData.content} + + 답변 내용을 입력해주세요. + + 키워드를 입력해주세요. + + + + + null} /> + +
+ navigate('intro')}>답변 작성하기 + + + setKeywordList((prev) => + prev.map((prev) => prev.content).includes(keyword.content) + ? prev + : [...prev, keyword], + ), + removeKeyword: (targetKeyword: Keyword) => + setKeywordList((prev) => + prev.filter((keyword) => keyword.content !== targetKeyword.content), + ), + targetUser: neososeoFormData.userID, + }} + /> + ); } diff --git a/src/presentation/pages/NeososeoForm/Answer/style.ts b/src/presentation/pages/NeososeoForm/Answer/style.ts index fdc62ce1..3b5ae2aa 100644 --- a/src/presentation/pages/NeososeoForm/Answer/style.ts +++ b/src/presentation/pages/NeososeoForm/Answer/style.ts @@ -7,3 +7,7 @@ export const StTextarea = styled.textarea` resize: unset; height: 104px; `; + +export const StKeywordListWrapper = styled.div` + margin-top: 18px; +`; diff --git a/src/presentation/pages/NeososeoForm/style.ts b/src/presentation/pages/NeososeoForm/style.ts index 3b9bcc16..5ca90c49 100644 --- a/src/presentation/pages/NeososeoForm/style.ts +++ b/src/presentation/pages/NeososeoForm/style.ts @@ -5,17 +5,19 @@ import styled from 'styled-components'; export const StNeososeoFormPage = styled.div` min-height: 100vh; - width: calc(100vw - 40px); + width: 100vw; padding: 50px 0; display: grid; grid-template-rows: 70px auto; + position: relative; `; export const StNeososeoFormHeader = styled.div` - width: calc(100vw - 40px); + width: 100vw; display: grid; grid-template-columns: auto 68px; white-space: pre; + padding: 0 20px; & div { line-height: 33px; @@ -80,4 +82,5 @@ export const StButton = styled.div` export const StNeososeoFormLayout = styled.div` display: flex; flex-direction: column; + padding: 0 20px; `; diff --git a/src/presentation/pages/Team/Issue/Keyword/style.ts b/src/presentation/pages/Team/Issue/Keyword/style.ts index c5c8a208..0f805448 100644 --- a/src/presentation/pages/Team/Issue/Keyword/style.ts +++ b/src/presentation/pages/Team/Issue/Keyword/style.ts @@ -7,6 +7,8 @@ export const StAbsoluteWrapper = styled.div` position: absolute; width: 100vw; height: 100vh; + top: 0; + left: 0; background-color: ${COLOR.WHITE}; z-index: 300; animation: ${ANIMATION.SWIPE_FROM_RIGHT} 1s; diff --git a/src/presentation/routes/FormRouter.tsx b/src/presentation/routes/FormRouter.tsx index ec70b09b..d796d1ed 100644 --- a/src/presentation/routes/FormRouter.tsx +++ b/src/presentation/routes/FormRouter.tsx @@ -1,6 +1,7 @@ import NeososeoFormAnswer from '@pages/NeososeoForm/Answer'; import NeososeoFormHome from '@pages/NeososeoForm/Home'; import NeososeoFormIntro from '@pages/NeososeoForm/Intro'; +import TeamIssueKeyword from '@pages/Team/Issue/Keyword'; import { Route, Routes } from 'react-router-dom'; function FormRouter() { @@ -8,7 +9,9 @@ function FormRouter() { } /> } /> - } /> + }> + } /> + ); } From d14af5a947f6ef0d9370760fd030d66ac0fa3307 Mon Sep 17 00:00:00 2001 From: seojin kim <001106ksj@gmail.com> Date: Sun, 16 Jan 2022 23:37:16 +0900 Subject: [PATCH 06/12] =?UTF-8?q?=E2=9C=A8feat:=20=EB=84=88=EC=86=8C?= =?UTF-8?q?=EC=84=9C=20=ED=8F=BC=20=EC=9E=91=EC=84=B1=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/application/stores/neososeo-form.ts | 14 +++++- src/infrastructure/api/neososeo-form.ts | 3 +- src/infrastructure/api/types/neososeo-form.ts | 1 + src/infrastructure/mock/neososeo-form.data.ts | 1 + src/infrastructure/mock/neososeo-form.ts | 9 +++- .../pages/NeososeoForm/Answer/index.tsx | 44 ++++++++++++------- .../pages/NeososeoForm/Home/style.ts | 3 +- .../pages/NeososeoForm/Intro/index.tsx | 27 ++++++++---- src/presentation/pages/NeososeoForm/index.tsx | 6 ++- 9 files changed, 78 insertions(+), 30 deletions(-) diff --git a/src/application/stores/neososeo-form.ts b/src/application/stores/neososeo-form.ts index 007184f1..cd7e719c 100644 --- a/src/application/stores/neososeo-form.ts +++ b/src/application/stores/neososeo-form.ts @@ -1,7 +1,19 @@ -import { NeososeoFormData } from '@api/types/neososeo-form'; +import { NeososeoAnswerData, NeososeoFormData } from '@api/types/neososeo-form'; import { atom } from 'recoil'; export const neososeoFormState = atom({ key: 'neososeoFormState', default: null, }); + +export const neoseosoAnswerState = atom({ + key: 'neoseosoAnswerState', + default: { + userID: 0, + formID: 0, + name: '', + relation: '', + answer: '', + keyword: [], + }, +}); diff --git a/src/infrastructure/api/neososeo-form.ts b/src/infrastructure/api/neososeo-form.ts index 7ff8faf1..86aa6355 100644 --- a/src/infrastructure/api/neososeo-form.ts +++ b/src/infrastructure/api/neososeo-form.ts @@ -1,5 +1,6 @@ -import { NeososeoFormData } from './types/neososeo-form'; +import { NeososeoAnswerData, NeososeoFormData } from './types/neososeo-form'; export interface NeososeoFormService { getFormInfo(userID: number, formID: number): Promise; + postFormAnswer(body: NeososeoAnswerData): Promise<{ isSuccess: boolean }>; } diff --git a/src/infrastructure/api/types/neososeo-form.ts b/src/infrastructure/api/types/neososeo-form.ts index afbcdbc9..cb70999f 100644 --- a/src/infrastructure/api/types/neososeo-form.ts +++ b/src/infrastructure/api/types/neososeo-form.ts @@ -7,6 +7,7 @@ export type NeososeoFormData = { relation: string[]; userName: string; userID: number; + formID: number; }; export type NeososeoAnswerData = { diff --git a/src/infrastructure/mock/neososeo-form.data.ts b/src/infrastructure/mock/neososeo-form.data.ts index fef3ac3f..625ac769 100644 --- a/src/infrastructure/mock/neososeo-form.data.ts +++ b/src/infrastructure/mock/neososeo-form.data.ts @@ -9,5 +9,6 @@ export const NEOSOSEO_FORM_DATA: { FORM: NeososeoFormData } = { 'https://ww.namu.la/s/61e3a8075b5aa238383c0d89badd3442f7389a0285575fc5bc5c16d2a34f22c66e57e35d568b63b706fa24750c784d55e972ceeea93fa5a91d00dab1eea37681e189ae826afe668fb379b0cb3a446f3268755691ed20c6a165185d44e2fd1029896062ed4df01a806594e35a637b2372', userName: '강쥐', userID: 1, + formID: 1, }, }; diff --git a/src/infrastructure/mock/neososeo-form.ts b/src/infrastructure/mock/neososeo-form.ts index e9bc6ead..c95420f1 100644 --- a/src/infrastructure/mock/neososeo-form.ts +++ b/src/infrastructure/mock/neososeo-form.ts @@ -1,4 +1,5 @@ import { NeososeoFormService } from '@api/neososeo-form'; +import { NeososeoAnswerData } from '@api/types/neososeo-form'; import { NEOSOSEO_FORM_DATA } from './neososeo-form.data'; export function neososeoFormDataMock(): NeososeoFormService { @@ -7,7 +8,13 @@ export function neososeoFormDataMock(): NeososeoFormService { return NEOSOSEO_FORM_DATA.FORM; }; - return { getFormInfo }; + const postFormAnswer = async (body: NeososeoAnswerData) => { + console.log(body); + await wait(2000); + return { isSuccess: true }; + }; + + return { getFormInfo, postFormAnswer }; } const wait = (milliSeconds: number) => new Promise((resolve) => setTimeout(resolve, milliSeconds)); diff --git a/src/presentation/pages/NeososeoForm/Answer/index.tsx b/src/presentation/pages/NeososeoForm/Answer/index.tsx index 08528407..80dbb56c 100644 --- a/src/presentation/pages/NeososeoForm/Answer/index.tsx +++ b/src/presentation/pages/NeososeoForm/Answer/index.tsx @@ -1,18 +1,25 @@ +import { api } from '@api/index'; import { Keyword } from '@api/types/user'; import CommonInput from '@components/common/CommonInput'; import ImmutableKeywordList from '@components/common/Keyword/ImmutableList'; -import { neososeoFormState } from '@stores/neososeo-form'; -import { useState } from 'react'; +import { neoseosoAnswerState, neososeoFormState } from '@stores/neososeo-form'; import { Link, Outlet, useNavigate } from 'react-router-dom'; -import { useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue } from 'recoil'; import { StButton, StNeososeoFormLayout, StNeososeoTitle, StSubTitle } from '../style'; import { StTextarea, StKeywordListWrapper } from './style'; function NeososeoFormAnswer() { const neososeoFormData = useRecoilValue(neososeoFormState); - const [keywordList, setKeywordList] = useState([]); + const [neososeoAnswerState, setNeososeoAnswerState] = useRecoilState(neoseosoAnswerState); const navigate = useNavigate(); + const postNeososeoForm = async () => { + const response = await api.neososeoFormService.postFormAnswer(neososeoAnswerState); + if (response.isSuccess) navigate('../finish'); + }; + + const setAnswer = (answer: string) => setNeososeoAnswerState((prev) => ({ ...prev, answer })); + if (!neososeoFormData) return <>; return ( @@ -24,7 +31,7 @@ function NeososeoFormAnswer() { {neososeoFormData.content} 답변 내용을 입력해주세요. - + setAnswer(e.target.value)} /> 키워드를 입력해주세요. - null} /> + null} + /> - navigate('intro')}>답변 작성하기 + 답변 작성하기 - setKeywordList((prev) => - prev.map((prev) => prev.content).includes(keyword.content) - ? prev - : [...prev, keyword], - ), + setNeososeoAnswerState((prev) => ({ + ...prev, + keyword: prev.keyword.map((k) => k.content).includes(keyword.content) + ? prev.keyword + : [...prev.keyword, keyword], + })), removeKeyword: (targetKeyword: Keyword) => - setKeywordList((prev) => - prev.filter((keyword) => keyword.content !== targetKeyword.content), - ), + setNeososeoAnswerState((prev) => ({ + ...prev, + keyword: prev.keyword.filter((keyword) => keyword.content !== targetKeyword.content), + })), targetUser: neososeoFormData.userID, }} /> diff --git a/src/presentation/pages/NeososeoForm/Home/style.ts b/src/presentation/pages/NeososeoForm/Home/style.ts index 3acacf68..070f70c9 100644 --- a/src/presentation/pages/NeososeoForm/Home/style.ts +++ b/src/presentation/pages/NeososeoForm/Home/style.ts @@ -1,7 +1,8 @@ import styled from 'styled-components'; export const StNeososeoFormHome = styled.div` - width: calc(100vw - 40px); + width: calc(100vw); + padding: 0 20px; height: 100%; display: grid; grid-template-rows: auto 58px; diff --git a/src/presentation/pages/NeososeoForm/Intro/index.tsx b/src/presentation/pages/NeososeoForm/Intro/index.tsx index 47509578..d1f3dd82 100644 --- a/src/presentation/pages/NeososeoForm/Intro/index.tsx +++ b/src/presentation/pages/NeososeoForm/Intro/index.tsx @@ -1,8 +1,8 @@ import CommonInput from '@components/common/CommonInput'; -import { neososeoFormState } from '@stores/neososeo-form'; -import { useEffect, useState } from 'react'; +import { neoseosoAnswerState, neososeoFormState } from '@stores/neososeo-form'; +import { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; -import { useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue } from 'recoil'; import { StButton, StNeososeoFormLayout, @@ -14,13 +14,20 @@ import { function NeososeoFormIntro() { const neososeoFormData = useRecoilValue(neososeoFormState); - const [selectedRelation, setSelectedRelation] = useState(''); + const [neososeoAnswerState, setNeososeoAnswerState] = useRecoilState(neoseosoAnswerState); const navigate = useNavigate(); + const setUserName = (userName: string) => + setNeososeoAnswerState((prev) => ({ ...prev, name: userName })); + + const setRelation = (relation: string) => + setNeososeoAnswerState((prev) => ({ ...prev, relation })); + useEffect(() => { if (!neososeoFormData) return; - setSelectedRelation(neososeoFormData.relation[0]); + setRelation(neososeoFormData.relation[0]); }, [neososeoFormData]); + if (!neososeoFormData) return <>; return ( @@ -30,14 +37,18 @@ function NeososeoFormIntro() {
나를 소개해주세요 - + setUserName(name)} + /> {neososeoFormData.userName}님과의 관계를 선택해주세요 {neososeoFormData.relation.map((relation) => ( setSelectedRelation(relation)} + selected={neososeoAnswerState.relation === relation} + onClick={() => setRelation(relation)} > {relation} diff --git a/src/presentation/pages/NeososeoForm/index.tsx b/src/presentation/pages/NeososeoForm/index.tsx index f5d14bf3..43492e41 100644 --- a/src/presentation/pages/NeososeoForm/index.tsx +++ b/src/presentation/pages/NeososeoForm/index.tsx @@ -1,14 +1,15 @@ import { api } from '@api/index'; import FormRouter from '@routes/FormRouter'; -import { neososeoFormState } from '@stores/neososeo-form'; +import { neoseosoAnswerState, neososeoFormState } from '@stores/neososeo-form'; import { useEffect } from 'react'; import { useParams } from 'react-router-dom'; -import { useRecoilState } from 'recoil'; +import { useRecoilState, useSetRecoilState } from 'recoil'; import { StNeososeoFormPage, StNeososeoFormHeader } from './style'; function NeososeoFormPage() { const { userID, formID } = useParams(); const [neososeoForm, setNeososeoForm] = useRecoilState(neososeoFormState); + const setNeoseosoAnswerResponse = useSetRecoilState(neoseosoAnswerState); useEffect(() => { if (!userID || !formID) return; @@ -16,6 +17,7 @@ function NeososeoFormPage() { (async () => { const data = await api.neososeoFormService.getFormInfo(+userID, +formID); setNeososeoForm(data); + setNeoseosoAnswerResponse((prev) => ({ ...prev, userID: data.userID, formID: data.formID })); })(); }, [userID, formID]); From b957cb08ecb7118c12b02f99e3c9f4c9410aa99e Mon Sep 17 00:00:00 2001 From: seojin kim <001106ksj@gmail.com> Date: Mon, 17 Jan 2022 02:11:56 +0900 Subject: [PATCH 07/12] =?UTF-8?q?=E2=9C=A8feat:=20=EB=84=88=EC=86=8C?= =?UTF-8?q?=EC=84=9C=20=ED=8F=BC=20=EC=9E=91=EC=84=B1=20-=20=EC=84=9C?= =?UTF-8?q?=EB=B2=84=20=EC=A0=9C=EB=8C=80=EB=A1=9C=20=EB=AA=A9=ED=82=B9?= =?UTF-8?q?=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/application/stores/neososeo-form.ts | 4 +- src/infrastructure/api/neososeo-form.ts | 2 +- src/infrastructure/api/types/neososeo-form.ts | 4 +- .../pages/NeososeoForm/Answer/index.tsx | 39 ++++++++++--------- .../pages/NeososeoForm/Intro/index.tsx | 11 +++--- src/presentation/pages/NeososeoForm/index.tsx | 9 ++--- 6 files changed, 33 insertions(+), 36 deletions(-) diff --git a/src/application/stores/neososeo-form.ts b/src/application/stores/neososeo-form.ts index cd7e719c..99afbacd 100644 --- a/src/application/stores/neososeo-form.ts +++ b/src/application/stores/neososeo-form.ts @@ -6,8 +6,8 @@ export const neososeoFormState = atom({ default: null, }); -export const neoseosoAnswerState = atom({ - key: 'neoseosoAnswerState', +export const neososeoAnswerState = atom({ + key: 'neososeoAnswerState', default: { userID: 0, formID: 0, diff --git a/src/infrastructure/api/neososeo-form.ts b/src/infrastructure/api/neososeo-form.ts index 86aa6355..fd08532a 100644 --- a/src/infrastructure/api/neososeo-form.ts +++ b/src/infrastructure/api/neososeo-form.ts @@ -1,6 +1,6 @@ import { NeososeoAnswerData, NeososeoFormData } from './types/neososeo-form'; export interface NeososeoFormService { - getFormInfo(userID: number, formID: number): Promise; + getFormInfo(userID: string, formID: string): Promise; postFormAnswer(body: NeososeoAnswerData): Promise<{ isSuccess: boolean }>; } diff --git a/src/infrastructure/api/types/neososeo-form.ts b/src/infrastructure/api/types/neososeo-form.ts index cb70999f..3aebfb61 100644 --- a/src/infrastructure/api/types/neososeo-form.ts +++ b/src/infrastructure/api/types/neososeo-form.ts @@ -1,5 +1,3 @@ -import { Keyword } from './user'; - export type NeososeoFormData = { title: string; content: string; @@ -16,5 +14,5 @@ export type NeososeoAnswerData = { name: string; relation: string; answer: string; - keyword: Keyword[]; + keyword: string[]; }; diff --git a/src/presentation/pages/NeososeoForm/Answer/index.tsx b/src/presentation/pages/NeososeoForm/Answer/index.tsx index 80dbb56c..86505de1 100644 --- a/src/presentation/pages/NeososeoForm/Answer/index.tsx +++ b/src/presentation/pages/NeososeoForm/Answer/index.tsx @@ -2,7 +2,8 @@ import { api } from '@api/index'; import { Keyword } from '@api/types/user'; import CommonInput from '@components/common/CommonInput'; import ImmutableKeywordList from '@components/common/Keyword/ImmutableList'; -import { neoseosoAnswerState, neososeoFormState } from '@stores/neososeo-form'; +import { neososeoAnswerState, neososeoFormState } from '@stores/neososeo-form'; +import { useEffect, useState } from 'react'; import { Link, Outlet, useNavigate } from 'react-router-dom'; import { useRecoilState, useRecoilValue } from 'recoil'; import { StButton, StNeososeoFormLayout, StNeososeoTitle, StSubTitle } from '../style'; @@ -10,15 +11,20 @@ import { StTextarea, StKeywordListWrapper } from './style'; function NeososeoFormAnswer() { const neososeoFormData = useRecoilValue(neososeoFormState); - const [neososeoAnswerState, setNeososeoAnswerState] = useRecoilState(neoseosoAnswerState); + const [keywordList, setKeywordList] = useState([]); + const [neososeoAnswer, setNeososeoAnswer] = useRecoilState(neososeoAnswerState); const navigate = useNavigate(); const postNeososeoForm = async () => { - const response = await api.neososeoFormService.postFormAnswer(neososeoAnswerState); + const response = await api.neososeoFormService.postFormAnswer(neososeoAnswer); if (response.isSuccess) navigate('../finish'); }; - const setAnswer = (answer: string) => setNeososeoAnswerState((prev) => ({ ...prev, answer })); + const setAnswer = (answer: string) => setNeososeoAnswer((prev) => ({ ...prev, answer })); + + useEffect(() => { + setNeososeoAnswer((prev) => ({ ...prev, keyword: keywordList.map((k) => k.id) })); + }, [keywordList]); if (!neososeoFormData) return <>; @@ -41,29 +47,24 @@ function NeososeoFormAnswer() { /> - null} - /> + null} />
답변 작성하기 - setNeososeoAnswerState((prev) => ({ - ...prev, - keyword: prev.keyword.map((k) => k.content).includes(keyword.content) - ? prev.keyword - : [...prev.keyword, keyword], - })), + setKeywordList((prev) => + prev.map((prev) => prev.content).includes(keyword.content) + ? prev + : [...prev, keyword], + ), removeKeyword: (targetKeyword: Keyword) => - setNeososeoAnswerState((prev) => ({ - ...prev, - keyword: prev.keyword.filter((keyword) => keyword.content !== targetKeyword.content), - })), + setKeywordList((prev) => + prev.filter((keyword) => keyword.content !== targetKeyword.content), + ), targetUser: neososeoFormData.userID, }} /> diff --git a/src/presentation/pages/NeososeoForm/Intro/index.tsx b/src/presentation/pages/NeososeoForm/Intro/index.tsx index d1f3dd82..2d0c1dae 100644 --- a/src/presentation/pages/NeososeoForm/Intro/index.tsx +++ b/src/presentation/pages/NeososeoForm/Intro/index.tsx @@ -1,5 +1,5 @@ import CommonInput from '@components/common/CommonInput'; -import { neoseosoAnswerState, neososeoFormState } from '@stores/neososeo-form'; +import { neososeoAnswerState, neososeoFormState } from '@stores/neososeo-form'; import { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { useRecoilState, useRecoilValue } from 'recoil'; @@ -14,14 +14,13 @@ import { function NeososeoFormIntro() { const neososeoFormData = useRecoilValue(neososeoFormState); - const [neososeoAnswerState, setNeososeoAnswerState] = useRecoilState(neoseosoAnswerState); + const [neososeoAnswer, setNeososeoAnswer] = useRecoilState(neososeoAnswerState); const navigate = useNavigate(); const setUserName = (userName: string) => - setNeososeoAnswerState((prev) => ({ ...prev, name: userName })); + setNeososeoAnswer((prev) => ({ ...prev, name: userName })); - const setRelation = (relation: string) => - setNeososeoAnswerState((prev) => ({ ...prev, relation })); + const setRelation = (relation: string) => setNeososeoAnswer((prev) => ({ ...prev, relation })); useEffect(() => { if (!neososeoFormData) return; @@ -47,7 +46,7 @@ function NeososeoFormIntro() { {neososeoFormData.relation.map((relation) => ( setRelation(relation)} > {relation} diff --git a/src/presentation/pages/NeososeoForm/index.tsx b/src/presentation/pages/NeososeoForm/index.tsx index 43492e41..54d8558c 100644 --- a/src/presentation/pages/NeososeoForm/index.tsx +++ b/src/presentation/pages/NeososeoForm/index.tsx @@ -1,6 +1,6 @@ import { api } from '@api/index'; import FormRouter from '@routes/FormRouter'; -import { neoseosoAnswerState, neososeoFormState } from '@stores/neososeo-form'; +import { neososeoAnswerState, neososeoFormState } from '@stores/neososeo-form'; import { useEffect } from 'react'; import { useParams } from 'react-router-dom'; import { useRecoilState, useSetRecoilState } from 'recoil'; @@ -9,15 +9,14 @@ import { StNeososeoFormPage, StNeososeoFormHeader } from './style'; function NeososeoFormPage() { const { userID, formID } = useParams(); const [neososeoForm, setNeososeoForm] = useRecoilState(neososeoFormState); - const setNeoseosoAnswerResponse = useSetRecoilState(neoseosoAnswerState); + const setNeoseosoAnswer = useSetRecoilState(neososeoAnswerState); useEffect(() => { if (!userID || !formID) return; - if (isNaN(+userID) || isNaN(+formID)) return; (async () => { - const data = await api.neososeoFormService.getFormInfo(+userID, +formID); + const data = await api.neososeoFormService.getFormInfo(userID, formID); setNeososeoForm(data); - setNeoseosoAnswerResponse((prev) => ({ ...prev, userID: data.userID, formID: data.formID })); + setNeoseosoAnswer((prev) => ({ ...prev, userID: data.userID, formID: data.formID })); })(); }, [userID, formID]); From 104a78dd9c26a7d8c9f7bdfff1069ef2692e9108 Mon Sep 17 00:00:00 2001 From: seojin kim <001106ksj@gmail.com> Date: Mon, 17 Jan 2022 02:43:47 +0900 Subject: [PATCH 08/12] =?UTF-8?q?=E2=9C=A8feat:=20=EB=84=88=EC=86=8C?= =?UTF-8?q?=EC=84=9C=20=ED=8F=BC=20=EB=A7=88=EC=A7=80=EB=A7=89=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EB=A7=8C=EB=93=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/img_answerdone.svg | 37 +++++++++++++++++++ src/assets/images/index.ts | 1 + .../pages/NeososeoForm/Finish/index.tsx | 21 +++++++++++ .../pages/NeososeoForm/Finish/style.ts | 33 +++++++++++++++++ src/presentation/routes/Router.tsx | 2 + 5 files changed, 94 insertions(+) create mode 100644 src/assets/images/img_answerdone.svg create mode 100644 src/presentation/pages/NeososeoForm/Finish/index.tsx create mode 100644 src/presentation/pages/NeososeoForm/Finish/style.ts diff --git a/src/assets/images/img_answerdone.svg b/src/assets/images/img_answerdone.svg new file mode 100644 index 00000000..9fd2fad7 --- /dev/null +++ b/src/assets/images/img_answerdone.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/index.ts b/src/assets/images/index.ts index 98c8c8e6..4988ee99 100644 --- a/src/assets/images/index.ts +++ b/src/assets/images/index.ts @@ -2,3 +2,4 @@ export { default as imgLogo } from './img_logo.svg'; export { default as imgEmptyProfile } from './img_empty_profile.svg'; export { default as imgEmptyJoinProfile } from './img_empty_join.svg'; export { ReactComponent as ImgTeamAdd } from './img_team_add.svg'; +export { ReactComponent as ImgAnswerDone } from './img_answerdone.svg'; diff --git a/src/presentation/pages/NeososeoForm/Finish/index.tsx b/src/presentation/pages/NeososeoForm/Finish/index.tsx new file mode 100644 index 00000000..82840a30 --- /dev/null +++ b/src/presentation/pages/NeososeoForm/Finish/index.tsx @@ -0,0 +1,21 @@ +import { ImgAnswerDone } from '@assets/images'; +import { useNavigate } from 'react-router-dom'; +import { StButton } from '../style'; +import { StBody, StNeososeoFinish } from './style'; + +function NeososeoFormFinish() { + const navigate = useNavigate(); + + return ( + + + +
답변이 전달되었어요
+
너가소개서, 좀 더 둘러보실래요?
+ + navigate('/')}>서비스 둘러보기 + + ); +} + +export default NeososeoFormFinish; diff --git a/src/presentation/pages/NeososeoForm/Finish/style.ts b/src/presentation/pages/NeososeoForm/Finish/style.ts new file mode 100644 index 00000000..c0955998 --- /dev/null +++ b/src/presentation/pages/NeososeoForm/Finish/style.ts @@ -0,0 +1,33 @@ +import { COLOR } from '@styles/common/color'; +import { FONT_STYLES } from '@styles/common/font-style'; +import styled from 'styled-components'; + +export const StBody = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; + +export const StNeososeoFinish = styled.div` + height: 100vh; + width: 100vw; + padding: 50px 20px; + display: grid; + grid-template-rows: auto 58px; + & > div:nth-child(1) { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-bottom: 52px; + & > div:nth-child(2) { + color: ${COLOR.GRAY_8}; + ${FONT_STYLES.SB_20_TITLE} + } + & > div:nth-child(3) { + margin-top: 8px; + color: ${COLOR.GRAY_5}; + ${FONT_STYLES.R_15_TITLE} + } + } +`; diff --git a/src/presentation/routes/Router.tsx b/src/presentation/routes/Router.tsx index fb915baf..93bc1a0c 100644 --- a/src/presentation/routes/Router.tsx +++ b/src/presentation/routes/Router.tsx @@ -1,4 +1,5 @@ import NeososeoFormPage from '@pages/NeososeoForm'; +import NeososeoFormFinish from '@pages/NeososeoForm/Finish'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; import NeogaRouter from './NeogaRouter'; import TeamRouter from './TeamRouter'; @@ -12,6 +13,7 @@ const Router = () => { } /> } /> } /> + } /> ); From d667a47e4b3643c1a8e0cf7c170f8352c2e4672e Mon Sep 17 00:00:00 2001 From: seojin kim <001106ksj@gmail.com> Date: Mon, 17 Jan 2022 03:43:45 +0900 Subject: [PATCH 09/12] =?UTF-8?q?:nail=5Fcare:style:=20=EB=84=88=EC=86=8C?= =?UTF-8?q?=EC=84=9C=20=ED=8F=BC=20=ED=97=A4=EB=8D=94=EB=A5=BC=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/NeososeoFormHeader/index.tsx | 19 ++++++++++++++++++ .../common/NeososeoFormHeader/style.ts | 20 +++++++++++++++++++ src/presentation/pages/NeososeoForm/index.tsx | 8 +++----- src/presentation/pages/NeososeoForm/style.ts | 18 ----------------- 4 files changed, 42 insertions(+), 23 deletions(-) create mode 100644 src/presentation/components/common/NeososeoFormHeader/index.tsx create mode 100644 src/presentation/components/common/NeososeoFormHeader/style.ts diff --git a/src/presentation/components/common/NeososeoFormHeader/index.tsx b/src/presentation/components/common/NeososeoFormHeader/index.tsx new file mode 100644 index 00000000..99a36422 --- /dev/null +++ b/src/presentation/components/common/NeososeoFormHeader/index.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { StNeososeoFormHeader } from './style'; + +interface NeososeoFormHeaderProps { + title: string; + image: string; +} + +function NeososeoFormHeader(props: NeososeoFormHeaderProps) { + const { title, image } = props; + return ( + +
{title}
+ {title} + + ); +} + +export default NeososeoFormHeader; diff --git a/src/presentation/components/common/NeososeoFormHeader/style.ts b/src/presentation/components/common/NeososeoFormHeader/style.ts new file mode 100644 index 00000000..8bf7181d --- /dev/null +++ b/src/presentation/components/common/NeososeoFormHeader/style.ts @@ -0,0 +1,20 @@ +import { FONT_STYLES } from '@styles/common/font-style'; +import styled from 'styled-components'; + +export const StNeososeoFormHeader = styled.div` + width: 100vw; + display: grid; + grid-template-columns: auto 68px; + white-space: pre; + padding: 0 20px; + + & div { + line-height: 33px; + ${FONT_STYLES.SB_22_BODY} + } + + & img { + width: 68px; + height: 68px; + } +`; diff --git a/src/presentation/pages/NeososeoForm/index.tsx b/src/presentation/pages/NeososeoForm/index.tsx index 54d8558c..a92548fd 100644 --- a/src/presentation/pages/NeososeoForm/index.tsx +++ b/src/presentation/pages/NeososeoForm/index.tsx @@ -1,10 +1,11 @@ import { api } from '@api/index'; +import NeososeoFormHeader from '@components/common/NeososeoFormHeader'; import FormRouter from '@routes/FormRouter'; import { neososeoAnswerState, neososeoFormState } from '@stores/neososeo-form'; import { useEffect } from 'react'; import { useParams } from 'react-router-dom'; import { useRecoilState, useSetRecoilState } from 'recoil'; -import { StNeososeoFormPage, StNeososeoFormHeader } from './style'; +import { StNeososeoFormPage } from './style'; function NeososeoFormPage() { const { userID, formID } = useParams(); @@ -23,10 +24,7 @@ function NeososeoFormPage() { return ( {neososeoForm && ( - -
{neososeoForm.title}
- {neososeoForm.title} - + )} diff --git a/src/presentation/pages/NeososeoForm/style.ts b/src/presentation/pages/NeososeoForm/style.ts index 5ca90c49..1f18f3ef 100644 --- a/src/presentation/pages/NeososeoForm/style.ts +++ b/src/presentation/pages/NeososeoForm/style.ts @@ -12,24 +12,6 @@ export const StNeososeoFormPage = styled.div` position: relative; `; -export const StNeososeoFormHeader = styled.div` - width: 100vw; - display: grid; - grid-template-columns: auto 68px; - white-space: pre; - padding: 0 20px; - - & div { - line-height: 33px; - ${FONT_STYLES.SB_22_BODY} - } - - & img { - width: 68px; - height: 68px; - } -`; - export const StNeososeoTitle = styled.div` border-radius: 18px; width: 100%; From 3405a766011da6557a86ee872040c9a0af7c4939 Mon Sep 17 00:00:00 2001 From: seojin kim <001106ksj@gmail.com> Date: Mon, 17 Jan 2022 03:45:53 +0900 Subject: [PATCH 10/12] =?UTF-8?q?=E2=9C=A8feat:=20=EC=98=A4=EB=A5=B8?= =?UTF-8?q?=EC=AA=BD=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EB=A5=BC=20=EB=8F=99?= =?UTF-8?q?=EA=B7=B8=EB=9E=97=EA=B2=8C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/common/NeososeoFormHeader/index.tsx | 4 +++- .../components/common/NeososeoFormHeader/style.ts | 3 +++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/presentation/components/common/NeososeoFormHeader/index.tsx b/src/presentation/components/common/NeososeoFormHeader/index.tsx index 99a36422..1721e50a 100644 --- a/src/presentation/components/common/NeososeoFormHeader/index.tsx +++ b/src/presentation/components/common/NeososeoFormHeader/index.tsx @@ -11,7 +11,9 @@ function NeososeoFormHeader(props: NeososeoFormHeaderProps) { return (
{title}
- {title} +
+ {title} +
); } diff --git a/src/presentation/components/common/NeososeoFormHeader/style.ts b/src/presentation/components/common/NeososeoFormHeader/style.ts index 8bf7181d..5c5eb4c5 100644 --- a/src/presentation/components/common/NeososeoFormHeader/style.ts +++ b/src/presentation/components/common/NeososeoFormHeader/style.ts @@ -1,3 +1,4 @@ +import { COLOR } from '@styles/common/color'; import { FONT_STYLES } from '@styles/common/font-style'; import styled from 'styled-components'; @@ -16,5 +17,7 @@ export const StNeososeoFormHeader = styled.div` & img { width: 68px; height: 68px; + border-radius: 34px; + background-color: ${COLOR.GRAY_1}; } `; From 63e36750d7996cbf82f8c5310a423d21dd570c58 Mon Sep 17 00:00:00 2001 From: seojin kim <001106ksj@gmail.com> Date: Mon, 17 Jan 2022 05:13:32 +0900 Subject: [PATCH 11/12] =?UTF-8?q?=E2=9C=A8feat:=20=EB=84=88=EA=B0=80?= =?UTF-8?q?=EC=86=8C=EA=B0=9C=EC=84=9C=20=EC=9E=91=EC=84=B1=20=EC=8B=9C=20?= =?UTF-8?q?=EC=9D=B8=ED=92=8B=EC=9D=B4=20=EB=AA=A8=EB=91=90=20=EC=B1=84?= =?UTF-8?q?=EC=9B=8C=EC=A7=80=EC=A7=80=20=EC=95=8A=EC=95=98=EC=9D=84=20?= =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20=EB=B2=84=ED=8A=BC=20=EC=83=89=20=EB=B0=94?= =?UTF-8?q?=EA=BE=B8=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/application/utils/string.ts | 2 ++ src/presentation/pages/NeososeoForm/Answer/index.tsx | 8 +++++++- src/presentation/pages/NeososeoForm/Intro/index.tsx | 5 ++++- src/presentation/pages/NeososeoForm/style.ts | 9 +++++++-- 4 files changed, 20 insertions(+), 4 deletions(-) create mode 100644 src/application/utils/string.ts diff --git a/src/application/utils/string.ts b/src/application/utils/string.ts new file mode 100644 index 00000000..a4d87892 --- /dev/null +++ b/src/application/utils/string.ts @@ -0,0 +1,2 @@ +export const isAllFilled = (...args: unknown[]) => + args.every((arg) => arg !== null && arg !== undefined && arg !== ''); diff --git a/src/presentation/pages/NeososeoForm/Answer/index.tsx b/src/presentation/pages/NeososeoForm/Answer/index.tsx index 86505de1..129609f9 100644 --- a/src/presentation/pages/NeososeoForm/Answer/index.tsx +++ b/src/presentation/pages/NeososeoForm/Answer/index.tsx @@ -3,6 +3,7 @@ import { Keyword } from '@api/types/user'; import CommonInput from '@components/common/CommonInput'; import ImmutableKeywordList from '@components/common/Keyword/ImmutableList'; import { neososeoAnswerState, neososeoFormState } from '@stores/neososeo-form'; +import { isAllFilled } from '@utils/string'; import { useEffect, useState } from 'react'; import { Link, Outlet, useNavigate } from 'react-router-dom'; import { useRecoilState, useRecoilValue } from 'recoil'; @@ -50,7 +51,12 @@ function NeososeoFormAnswer() { null} /> - 답변 작성하기 + + 답변 작성하기 + - navigate('../answer')}>다음 + navigate('../answer')} disabled={!isAllFilled(neososeoAnswer.name)}> + 다음 + ); } diff --git a/src/presentation/pages/NeososeoForm/style.ts b/src/presentation/pages/NeososeoForm/style.ts index 1f18f3ef..a5671977 100644 --- a/src/presentation/pages/NeososeoForm/style.ts +++ b/src/presentation/pages/NeososeoForm/style.ts @@ -55,10 +55,15 @@ export const StRelation = styled.div<{ selected: boolean }>` background-color: ${({ selected }) => (selected ? '#FFEFEF' : COLOR.GRAY_1)}; `; -export const StButton = styled.div` +export const StButton = styled.button` ${FULL_WIDTH_BUTTON} - ${CORAL_MAIN_BUTTON} + background-color: ${COLOR.GRAY_3}; + color: ${COLOR.WHITE}; margin-top: auto; + + :not(:disabled) { + ${CORAL_MAIN_BUTTON} + } `; export const StNeososeoFormLayout = styled.div` From bb1a0ffd79fe4bd005bc1d1b13d5bd63c3c3f95d Mon Sep 17 00:00:00 2001 From: seojin kim <001106ksj@gmail.com> Date: Mon, 17 Jan 2022 05:32:59 +0900 Subject: [PATCH 12/12] =?UTF-8?q?=E2=9C=A8feat:=20=EA=B4=80=EA=B3=84?= =?UTF-8?q?=EC=9D=98=20=ED=83=80=EC=9E=85=20=EC=A4=91=EC=97=90=20id=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/application/stores/neososeo-form.ts | 2 +- src/infrastructure/api/types/neososeo-form.ts | 9 +++++++-- src/infrastructure/mock/neososeo-form.data.ts | 7 ++++++- .../pages/NeososeoForm/Intro/index.tsx | 18 +++++++++++++----- 4 files changed, 27 insertions(+), 9 deletions(-) diff --git a/src/application/stores/neososeo-form.ts b/src/application/stores/neososeo-form.ts index 99afbacd..c8685548 100644 --- a/src/application/stores/neososeo-form.ts +++ b/src/application/stores/neososeo-form.ts @@ -12,7 +12,7 @@ export const neososeoAnswerState = atom({ userID: 0, formID: 0, name: '', - relation: '', + relationID: 0, answer: '', keyword: [], }, diff --git a/src/infrastructure/api/types/neososeo-form.ts b/src/infrastructure/api/types/neososeo-form.ts index 3aebfb61..9337d177 100644 --- a/src/infrastructure/api/types/neososeo-form.ts +++ b/src/infrastructure/api/types/neososeo-form.ts @@ -1,8 +1,13 @@ +export type Relation = { + id: number; + content: string; +}; + export type NeososeoFormData = { title: string; content: string; imageSub: string; - relation: string[]; + relation: Relation[]; userName: string; userID: number; formID: number; @@ -12,7 +17,7 @@ export type NeososeoAnswerData = { userID: number; formID: number; name: string; - relation: string; + relationID: number; answer: string; keyword: string[]; }; diff --git a/src/infrastructure/mock/neososeo-form.data.ts b/src/infrastructure/mock/neososeo-form.data.ts index 625ac769..5de6cfbf 100644 --- a/src/infrastructure/mock/neososeo-form.data.ts +++ b/src/infrastructure/mock/neososeo-form.data.ts @@ -4,7 +4,12 @@ export const NEOSOSEO_FORM_DATA: { FORM: NeososeoFormData } = { FORM: { title: '너가 닮고 싶은\n나의 일잘러 모습', content: '나와 함께하며 당신이 닮고 싶었던 능력이 있었나요?', - relation: ['동네친구', '쿵짝최고', '존경해요', '찐친베프'], + relation: [ + { id: 1, content: '동네친구' }, + { id: 2, content: '쿵짝최고' }, + { id: 3, content: '존경해요' }, + { id: 4, content: '찐친베프' }, + ], imageSub: 'https://ww.namu.la/s/61e3a8075b5aa238383c0d89badd3442f7389a0285575fc5bc5c16d2a34f22c66e57e35d568b63b706fa24750c784d55e972ceeea93fa5a91d00dab1eea37681e189ae826afe668fb379b0cb3a446f3268755691ed20c6a165185d44e2fd1029896062ed4df01a806594e35a637b2372', userName: '강쥐', diff --git a/src/presentation/pages/NeososeoForm/Intro/index.tsx b/src/presentation/pages/NeososeoForm/Intro/index.tsx index b877cbd2..def82f8d 100644 --- a/src/presentation/pages/NeososeoForm/Intro/index.tsx +++ b/src/presentation/pages/NeososeoForm/Intro/index.tsx @@ -1,7 +1,8 @@ +import { Relation } from '@api/types/neososeo-form'; import CommonInput from '@components/common/CommonInput'; import { neososeoAnswerState, neososeoFormState } from '@stores/neososeo-form'; import { isAllFilled } from '@utils/string'; -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { useRecoilState, useRecoilValue } from 'recoil'; import { @@ -15,13 +16,20 @@ import { function NeososeoFormIntro() { const neososeoFormData = useRecoilValue(neososeoFormState); + const [relation, setRelation] = useState(null); const [neososeoAnswer, setNeososeoAnswer] = useRecoilState(neososeoAnswerState); const navigate = useNavigate(); const setUserName = (userName: string) => setNeososeoAnswer((prev) => ({ ...prev, name: userName })); - const setRelation = (relation: string) => setNeososeoAnswer((prev) => ({ ...prev, relation })); + const setAnswerRelation = (relationID: number) => + setNeososeoAnswer((prev) => ({ ...prev, relationID })); + + useEffect(() => { + if (!relation) return; + setAnswerRelation(relation.id); + }, [relation]); useEffect(() => { if (!neososeoFormData) return; @@ -46,11 +54,11 @@ function NeososeoFormIntro() { {neososeoFormData.relation.map((relation) => ( setRelation(relation)} > - {relation} + {relation.content} ))}