From 57c4a8751caa608478b602f276736fb90a0eee9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=97=88=EC=9E=AC1?= Date: Sat, 23 Sep 2023 04:49:39 +0000 Subject: [PATCH 01/19] =?UTF-8?q?design:=20=EB=A9=94=EC=9D=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20css=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/EmptyView/EmptyView.module.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/EmptyView/EmptyView.module.scss b/src/components/EmptyView/EmptyView.module.scss index 9f33e54..07bb50d 100644 --- a/src/components/EmptyView/EmptyView.module.scss +++ b/src/components/EmptyView/EmptyView.module.scss @@ -1,4 +1,6 @@ .emptyView { + display: flex; + flex-direction: column; padding-top: 4.5rem /* 72px -> 4.5rem */; padding-bottom: 4.5rem /* 72px -> 4.5rem */; gap: .5rem /* 8px -> .5rem */; From 78cbefde61aa9e8cfd8828d57d15259a43723db8 Mon Sep 17 00:00:00 2001 From: JangAyeon <67853616+JangAyeon@users.noreply.github.com> Date: Sat, 23 Sep 2023 13:57:13 +0900 Subject: [PATCH 02/19] add Context API for form value --- src/App.jsx | 56 +++++++++++++++++++++++--- src/components/EmptyView/EmptyView.jsx | 6 +++ 2 files changed, 56 insertions(+), 6 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 41ccabc..a114f7d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,15 +1,59 @@ +import { createContext, useState } from 'react'; + import { EmptyView, Header } from '@/components'; import styles from './App.module.scss'; +export const FormContext = createContext(); + function App() { + const [form, setForm] = useState({ + // 1번 + name: '이름', + phone: '01012345678', + email: 'test@email.com', + permissions: { + privacyApproval: false, + marketingApproval: false, + marketingMediaApproval: { + email: false, + sms: false, + }, + }, + + // 2번 + + swMajored: true, + groomUsed: true, + groomService: { + edu: false, + level: false, + devth: false, + ide: false, + exp: false, + }, + groomWhy: '', + + // 3번 + + expect1: '기대1', + expect2: '기대2', + expect3: '기대3', + expect4: '기대4', + + // 4번 + + freeMessage: '파이팅~~', + }); return ( -
-
-
- -
-
+ +
+
+
+ +
+
+ ); } diff --git a/src/components/EmptyView/EmptyView.jsx b/src/components/EmptyView/EmptyView.jsx index fa09372..355c6fd 100644 --- a/src/components/EmptyView/EmptyView.jsx +++ b/src/components/EmptyView/EmptyView.jsx @@ -1,12 +1,17 @@ +import { useContext } from 'react'; import cn from 'classnames'; import { Card } from '@/components'; import { Typography } from '@goorm-dev/gds-challenge'; +import { FormContext } from '../../App'; + import styles from './EmptyView.module.scss'; const EmptyView = () => { + const { form } = useContext(FormContext); + return ( { src="https://statics.goorm.io/images/gds/empty_task.svg" alt="empty view" /> + {form.name} 응답한 참여자가 없습니다. From 72c9f465fb66674a84fb33bcc46d8a937232d21a Mon Sep 17 00:00:00 2001 From: teawon Date: Sat, 23 Sep 2023 14:07:44 +0900 Subject: [PATCH 03/19] =?UTF-8?q?feat=20:=20=EA=B8=B0=EB=B3=B8=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=8B=80=20?= =?UTF-8?q?=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header/Header.jsx | 22 +++++++++- src/components/Modal/components/Modal1.jsx | 17 ++++++++ src/components/Modal/index.jsx | 51 ++++++++++++++++++++++ 3 files changed, 89 insertions(+), 1 deletion(-) create mode 100644 src/components/Modal/components/Modal1.jsx create mode 100644 src/components/Modal/index.jsx diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index cb03179..1a64252 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -1,18 +1,38 @@ +import React, { useState } from 'react'; import cn from 'classnames'; import { Button, Typography } from '@goorm-dev/gds-challenge'; +import CustomModal from '../Modal'; + import styles from './Header.module.scss'; const Header = () => { + const [modalOpen, setModalOpen] = useState(false); + + const toggle = () => { + setModalOpen((prevModalOpen) => { + return !prevModalOpen; + }); + }; + + const handleCloseModal = () => { + // Store값 초기화 + toggle(); + }; + return (
구름톤 챌린지 참여자 정보 수집 - +
+ +
); }; diff --git a/src/components/Modal/components/Modal1.jsx b/src/components/Modal/components/Modal1.jsx new file mode 100644 index 0000000..d61b201 --- /dev/null +++ b/src/components/Modal/components/Modal1.jsx @@ -0,0 +1,17 @@ +import React, { useState } from 'react'; + +import { Button, Modal } from '@goorm-dev/gds-challenge'; + +const Modal1 = ({ onClose, headerName }) => { + return ( + <> + {headerName} + 컨텐츠를 넣어주세요. + + + + + ); +}; + +export default Modal1; diff --git a/src/components/Modal/index.jsx b/src/components/Modal/index.jsx new file mode 100644 index 0000000..a98f40e --- /dev/null +++ b/src/components/Modal/index.jsx @@ -0,0 +1,51 @@ +import React, { useState } from 'react'; +import cn from 'classnames'; + +import { Modal } from '@goorm-dev/gds-challenge'; + +import Modal1 from './components/Modal1'; + +const CustomModal = ({ isOpen, onClose }) => { + const curIndex = 3; // context로 가져오도록 수정필요 + + const renderComponent = () => { + switch (curIndex) { + case 1: + return ( + + ); + case 2: + return ( + + ); + // 추가 케이스 + case 3: + return ( + + ); + + case 4: + return ( + + ); + default: + return '에러'; + } + }; + + return {renderComponent()}; +}; + +export default CustomModal; From 50112b008cb753e674d06fbc0a2ac2129b306602 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=97=88=EC=9E=AC1?= Date: Sat, 23 Sep 2023 05:31:58 +0000 Subject: [PATCH 04/19] =?UTF-8?q?feat:=20=EC=B1=8C=EB=A6=B0=EC=A7=80=20?= =?UTF-8?q?=EC=B0=B8=EA=B0=80=EC=9E=90=20=EB=AA=A9=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 10 ++++++++-- src/components/ListView/ListView.jsx | 21 +++++++++++++++++++++ src/components/index.js | 1 + 3 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 src/components/ListView/ListView.jsx diff --git a/src/App.jsx b/src/App.jsx index 41ccabc..95e978d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,13 +1,19 @@ -import { EmptyView, Header } from '@/components'; +import { EmptyView, Header, ListView } from '@/components'; import styles from './App.module.scss'; function App() { + const users = localStorage.getItem("goormUsers") + ? JSON.parse(localStorage.getItem("goormUsers")) + : []; + return (
- + {users.length > 0 + ? + : }
); diff --git a/src/components/ListView/ListView.jsx b/src/components/ListView/ListView.jsx new file mode 100644 index 0000000..b4f0629 --- /dev/null +++ b/src/components/ListView/ListView.jsx @@ -0,0 +1,21 @@ +import { Button, Collapse } from '@goorm-dev/gds-challenge'; +import { ChevronDoubleLeftIcon, ChevronUpIcon } from '@goorm-dev/gds-icons'; +import { Card } from '@/components'; + +const ListView = ({ users }) => { + + return ( + <> + {users.map((user, idx) => ( +
+ + + 1 + +
+ ))} + + ) +}; + +export default ListView; \ No newline at end of file diff --git a/src/components/index.js b/src/components/index.js index ad78ab9..80004b7 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,3 +1,4 @@ export { default as Card } from './Card/Card'; export { default as EmptyView } from './EmptyView/EmptyView'; export { default as Header } from './Header/Header'; +export { default as ListView } from './ListView/ListView'; \ No newline at end of file From 632b7681d762b112bba7fba3a974b246f2e0865d Mon Sep 17 00:00:00 2001 From: Yoonkyoung Kim <100656920+Yoonkyoungme@users.noreply.github.com> Date: Sat, 23 Sep 2023 15:23:16 +0900 Subject: [PATCH 05/19] =?UTF-8?q?feat:=20Modal1=20=EA=B8=B0=EB=B3=B8=20?= =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EB=B0=8F=20=EC=B2=B4=ED=81=AC=20=EB=B0=95?= =?UTF-8?q?=EC=8A=A4=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Card/Modal1.jsx | 80 +++++++++ src/components/Modal/components/Modal1.jsx | 196 ++++++++++++++++++++- 2 files changed, 273 insertions(+), 3 deletions(-) create mode 100644 src/components/Card/Modal1.jsx diff --git a/src/components/Card/Modal1.jsx b/src/components/Card/Modal1.jsx new file mode 100644 index 0000000..e8fcff5 --- /dev/null +++ b/src/components/Card/Modal1.jsx @@ -0,0 +1,80 @@ +import React from 'react'; + +import { Label, Input } from '@goorm-dev/gds-challenge'; + +const Modal1 = () => { + return ( +
+ {/* title & sub title */} +
+
참여자 정보를 입력해주세요.
+
오프라인 팀 챌린지 참여자의 정보를 수집하려고 해요.
+
+ + + + + + + +
+ + + + + + ※ 광고성 정보 수신에 동의하시면 챌린지에 꾸준히 참여하실 수 있도록 + 리마인드 알림을 보내드려요. +
+ ); +}; + +export default Modal1; diff --git a/src/components/Modal/components/Modal1.jsx b/src/components/Modal/components/Modal1.jsx index d61b201..eb8cdb3 100644 --- a/src/components/Modal/components/Modal1.jsx +++ b/src/components/Modal/components/Modal1.jsx @@ -1,12 +1,202 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; -import { Button, Modal } from '@goorm-dev/gds-challenge'; +import { Button, Modal, Label, Input } from '@goorm-dev/gds-challenge'; const Modal1 = ({ onClose, headerName }) => { + // name + const [name, setName] = useState(''); + + // phone + const [phone, setPhone] = useState(''); + + // email + const [email, setEmail] = useState(''); + + // permissions + const [allChecked, setAllChecked] = useState(true); + const [privacyChecked, setPrivacyChecked] = useState(true); + const [marketingChecked, setMarketingChecked] = useState(true); + const [adChecked, setAdChecked] = useState(true); + const [emailChecked, setEmailChecked] = useState(true); + const [snsChecked, setSnsChecked] = useState(true); + + const handleNameChange = (e) => { + const input = e.target.value; + setName(input); + console.log(name); + }; + + const handlePhoneChange = (e) => { + const input = e.target.value; + setPhone(input); + console.log(phone); + }; + + // "이메일" 입력란에서 변경 사항을 처리하는 함수 + const handleEmailChange = (e) => { + const input = e.target.value; + setEmail(input); + console.log(email); + }; + + useEffect(() => { + setName(name); + setPhone(phone); + setEmail(email); + }, [name, phone, email]); + + // 전체 동의 + const handleAllCheckboxChange = () => { + const newState = !allChecked; + setAllChecked(newState); + setPrivacyChecked(newState); + setMarketingChecked(newState); + setAdChecked(newState); + setEmailChecked(newState); + setSnsChecked(newState); + }; + + // 개인정보처리방침 + const handleprivacyCheckedChange = () => { + const newState = !privacyChecked; + setAllChecked(false); + setPrivacyChecked(newState); + }; + + // 마케팅 목적의 개인 정보 수집 및 이용 + const handlemarketingCheckedChange = () => { + const newState = !marketingChecked; + setAllChecked(false); + setMarketingChecked(newState); + }; + + // 광고성 정보 수신 + const handleadCheckedChange = () => { + const newState = !adChecked; + setAllChecked(false); + setAdChecked(newState); + setEmailChecked(newState); + setSnsChecked(newState); + }; + + // email 정보 수신 + const handleEmailChecked = () => { + const newState = !emailChecked; + setAllChecked(false); + setAdChecked(newState); + setEmailChecked(newState); + }; + + // SNS 정보 수신 + const handleSnsChecked = () => { + const newState = !snsChecked; + setAllChecked(false); + setAdChecked(newState); + setSnsChecked(newState); + }; + return ( <> {headerName} - 컨텐츠를 넣어주세요. + +
+ {/* title & sub title */} +
+
참여자 정보를 입력해주세요.
+
+ 오프라인 팀 챌린지 참여자의 정보를 수집하려고 해요. +
+
+ + + + + + + +
+ + +
+ +
+ + +
+
+ ※ 광고성 정보 수신에 동의하시면 챌린지에 꾸준히 참여하실 수 + 있도록 리마인드 알림을 보내드려요. +
+ From efc1173e850faa8066a88476ae7b92becd2189a0 Mon Sep 17 00:00:00 2001 From: teawon Date: Sat, 23 Sep 2023 15:29:49 +0900 Subject: [PATCH 06/19] =?UTF-8?q?feat:=203=EB=B2=88=20=EB=AA=A8=EB=8B=AC?= =?UTF-8?q?=20Props=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 1009d6c..505e4fc 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,13 +1,14 @@ -import { EmptyView, Header, ListView } from '@/components'; import { createContext, useState } from 'react'; +import { EmptyView, Header, ListView } from '@/components'; + import styles from './App.module.scss'; export const FormContext = createContext(); function App() { - const users = localStorage.getItem("goormUsers") - ? JSON.parse(localStorage.getItem("goormUsers")) + const users = localStorage.getItem('goormUsers') + ? JSON.parse(localStorage.getItem('goormUsers')) : []; const [form, setForm] = useState({ @@ -39,10 +40,7 @@ function App() { // 3번 - expect1: '기대1', - expect2: '기대2', - expect3: '기대3', - expect4: '기대4', + expect: -1, // 4번 @@ -53,9 +51,11 @@ function App() {
- {users.length > 0 - ? - : } + {users.length > 0 ? ( + + ) : ( + + )}
From f341a876a0576df1d7f38c30cca9f830298e8e38 Mon Sep 17 00:00:00 2001 From: teawon Date: Sat, 23 Sep 2023 15:35:22 +0900 Subject: [PATCH 07/19] =?UTF-8?q?Modal=204=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Modal/components/Modal4.jsx | 89 ++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 src/components/Modal/components/Modal4.jsx diff --git a/src/components/Modal/components/Modal4.jsx b/src/components/Modal/components/Modal4.jsx new file mode 100644 index 0000000..666bcf1 --- /dev/null +++ b/src/components/Modal/components/Modal4.jsx @@ -0,0 +1,89 @@ +import React, { useContext, useState } from 'react'; + +import { + Button, + CarouselIndicators, + Modal, + TextArea, + Typography, +} from '@goorm-dev/gds-challenge'; + +import { FormContext } from '../../../App'; + +const Modal4 = ({ onClose, headerName }) => { + const { form, setForm, modal, setModal } = useContext(FormContext); + + const [freeMessage, setFreeMessage] = useState(form.freeMessage); + const handleFormSubmit = () => { + console.log(form); + localStorage.setItem('goormUsers', JSON.stringify(form)); + onClose(); + }; + + const moveIndex = (index) => { + setForm({ + ...form, + freeMessage, + }); + setModal({ + index, + }); + }; + + return ( + <> + + + {headerName} + + + 더 좋은 챌린지가 될 수 있도록 데이터를 수집하려고 해요. + + + + +