diff --git a/src/App.tsx b/src/App.tsx index 223c3ea..b3df802 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,7 +4,6 @@ import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import { RecoilRoot } from 'recoil'; import { ThemeProvider } from 'styled-components'; import { theme } from 'styles/colors'; -import AddGroupInputCount from './pages/AddGroupMain/AddGroupInputCount'; import AddGroupSpace from './pages/AddGroupMain/AddGroupSpace'; import AddGroupMemberName from './pages/AddGroupMain/AddGroupMemberName'; import AddGroupType from './pages/AddGroupMain/AddGroupType'; @@ -42,7 +41,6 @@ function App() { } /> } /> } /> - } /> } /> } /> } /> @@ -65,4 +63,4 @@ function App() { ); } -export default App; +export default App; \ No newline at end of file diff --git a/src/components/AddGroup/AddGroupHeadCount/HeadCount.tsx b/src/components/AddGroup/AddGroupHeadCount/HeadCount.tsx deleted file mode 100644 index 133febf..0000000 --- a/src/components/AddGroup/AddGroupHeadCount/HeadCount.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { useNavigate } from 'react-router-dom'; -import * as S from './Styles'; - -const HeadCount = () => { - const navigate = useNavigate(); - - const handleNextClick = () => { - navigate('/group/add/member'); - }; - - return ( - - - 몇 명이서 사진을 공유할 건가요? - - - 인원 수를 입력해주세요. - - - - ); -}; - -export default HeadCount; diff --git a/src/components/AddGroup/AddGroupMembername/AddGroupMembername.tsx b/src/components/AddGroup/AddGroupMembername/AddGroupMembername.tsx index 72a3f88..05697c9 100644 --- a/src/components/AddGroup/AddGroupMembername/AddGroupMembername.tsx +++ b/src/components/AddGroup/AddGroupMembername/AddGroupMembername.tsx @@ -1,6 +1,8 @@ import React from 'react'; import * as S from './Styles'; import { useNavigate } from 'react-router-dom'; +import { useRecoilValue } from 'recoil'; +import { namesState } from '../state'; import MembernameList from './membernameList/membernameList'; function MemberNameHead() { @@ -22,9 +24,16 @@ function MemberNameContent() { const AddGroupMembername = () => { const navigate = useNavigate(); + const names = useRecoilValue(namesState); const handleNextClick = () => { - navigate('/group/add/grouptype'); + // 배열이 비어 있는지 확인 + if (names.length > 0) { + console.log(`이름: ${names.join(', ')}`); + navigate('/group/add/grouptype'); + } else { + alert('이름을 입력해주세요'); + } }; return ( diff --git a/src/components/AddGroup/AddGroupMembername/Styles.ts b/src/components/AddGroup/AddGroupMembername/Styles.ts index 106dea6..e887d6f 100644 --- a/src/components/AddGroup/AddGroupMembername/Styles.ts +++ b/src/components/AddGroup/AddGroupMembername/Styles.ts @@ -35,17 +35,6 @@ export const Text = styled.p` text-underline-offset: 5px; `; -export const InportNameContainer = styled.div` - display: absolute; - justify-content: center; - z-index: 10; -`; - -export const InportNameBox = styled.div` - top: -110px; - left: 40px; -`; - export const ListLayout = styled.div` position: relative; width: 350px; diff --git a/src/components/AddGroup/AddGroupMembername/membernameList/Styles.ts b/src/components/AddGroup/AddGroupMembername/membernameList/Styles.ts index c0f8fe6..cb45b17 100644 --- a/src/components/AddGroup/AddGroupMembername/membernameList/Styles.ts +++ b/src/components/AddGroup/AddGroupMembername/membernameList/Styles.ts @@ -7,13 +7,33 @@ export const nameLayout = styled.div` flex-direction: column; min-height: 30px; align-items: center; + /* 전체 스크롤바 */ + ::-webkit-scrollbar { + width: 12px; + } + + /* 스크롤바의 트랙 */ + ::-webkit-scrollbar-track { + background: none; + } + + /* 스크롤바 핸들 */ + ::-webkit-scrollbar-thumb { + background: ${({ theme }) => theme.colors.backgroundPrimary}; + border-radius: 10px; + } + + /* 스크롤바 핸들 호버 */ + ::-webkit-scrollbar-thumb:hover { + background: ${({ theme }) => theme.colors.primary}; + } `; export const nameList = styled.div` position: relative; display: flex; flex-direction: row; - width: 180px; + width: 190px; height: 140px; overflow-y: auto; align-items: center; @@ -40,6 +60,9 @@ export const nameContainer = styled.div` margin: 1px; width: 58px; /* 고정된 너비 */ height: 20px; /* 고정된 높이 */ + &:hover .nameButton { + display: inline; + } `; export const NowImportName = styled(I.NowInportName)` @@ -68,6 +91,7 @@ export const nameButton = styled(I.xCircle)` font-size: 10; color: black; cursor: pointer; + display: none; `; /*입력 영역 */ @@ -93,12 +117,16 @@ export const inputname = styled.input` background: none; z-index: 30; align-items: center; + &::placeholder { + color: ${({ theme }) => theme.colors.tertiary}; + opacity: 1; + } `; export const inputplus = styled(I.PlusCircle)` position: absolute; top: 50%; - right: 20px; + right: 25px; margin-top: -10px; width: 26px; height: 26px; diff --git a/src/components/AddGroup/AddGroupMembername/membernameList/membernameList.tsx b/src/components/AddGroup/AddGroupMembername/membernameList/membernameList.tsx index 8bf6cef..4d3c0e0 100644 --- a/src/components/AddGroup/AddGroupMembername/membernameList/membernameList.tsx +++ b/src/components/AddGroup/AddGroupMembername/membernameList/membernameList.tsx @@ -1,39 +1,78 @@ -import { useState } from 'react'; +import React, { useState } from 'react'; import * as S from './Styles'; +import { useRecoilState } from 'recoil'; +import { namesState } from '../../state'; // Recoil 상태가 정의된 파일을 import + +interface MembernameCreateProps { + addName: (name: string) => void; +} + +const MembernameCreate: React.FC = ({ addName }) => { + const [newName, setNewName] = useState(''); /*상태타입 정의 */ + + const handleAddName = () => { + if (newName.trim() !== '') { + addName(newName.trim()); /*새로운 이름 추가함수 호출 */ + setNewName(''); /*입력 필드 초기화 */ + } + }; + + const handleKeyDown = (event: React.KeyboardEvent) => { + if (event.key === 'Enter') { + handleAddName(); // Enter 키로 이름 추가 + } + }; -function MembernameCreate() { return ( - - + setNewName(e.target.value)} + onKeyDown={handleKeyDown} + /> + 추가 ); -} +}; + +const MembernameList: React.FC = () => { + const [names, setNames] = useRecoilState(namesState); // Recoil 상태 사용 + + const addName = (name: string) => { + const newNames = [...names, name]; + setNames(newNames); + console.log(`이름: ${newNames.join(', ')}`); // 콘솔에 이름 리스트 출력 + }; + + const removeName = (index: number) => { + const newNames = names.filter((_, i) => i !== index); /*이름 제거*/ + setNames(newNames); + console.log(`이름: ${newNames.join(', ')}`); // 콘솔에 이름 리스트 출력 + }; -const membernameList = () => { return ( - - - 황지원 - ⓧ - - - - 박을순 - ⓧ - - - - 김똘똘 - + {names.map((name, index) => ( + + + {name} + removeName(index)} + > + ⓧ + + + ))} - + ); }; -export default membernameList; +export default MembernameList; diff --git a/src/components/AddGroup/AddGroupShare/AddGroupshare.tsx b/src/components/AddGroup/AddGroupShare/AddGroupshare.tsx index 53d59bd..566ed7f 100644 --- a/src/components/AddGroup/AddGroupShare/AddGroupshare.tsx +++ b/src/components/AddGroup/AddGroupShare/AddGroupshare.tsx @@ -1,12 +1,16 @@ import React from 'react'; import * as S from './Styles'; +import { useRecoilValue } from 'recoil'; +import { placeState } from '../state'; const AddGroupshare = () => { + const place = useRecoilValue(placeState); + return ( - 제주도 2024 + {place} diff --git a/src/components/AddGroup/AddGroupShare/Styles.ts b/src/components/AddGroup/AddGroupShare/Styles.ts index ae0a33e..f9e7de1 100644 --- a/src/components/AddGroup/AddGroupShare/Styles.ts +++ b/src/components/AddGroup/AddGroupShare/Styles.ts @@ -12,37 +12,44 @@ export const Layout = styled.div` export const AddFileContainer = styled.div` display: flex; + position: absolute; + align-items: center; + justify-content: center; + z-index: 0; + width: 100%; + height: 100%; `; export const File = styled(I.File)` - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); width: 60%; - height: 90%; + height: 100%; `; export const AddFileText = styled.p` font-size: 1.3rem; color: #134b80; position: absolute; - top: 50%; - left: 33%; - text-align: center; z-index: 10; font-weight: bold; + justify-content: center; + align-items: center; `; export const CopyCloudContainer = styled.div` display: flex; + z-index: 20; + position: absolute; + align-items: center; + justify-content: center; + top: 10%; + left: 40%; + width: 100%; + height: 100%; `; export const Cloud = styled(I.Cloud)` - position: absolute; - bottom: calc(43% - 132px - 36.5px); - right: calc(65% - 147.5px - 59px); - z-index: 10; + position: relative; + z-index: 20; width: 30%; height: 40%; `; @@ -50,32 +57,38 @@ export const Cloud = styled(I.Cloud)` export const CopyCloudText = styled.p` font-size: 0.9rem; color: ${({ theme }) => theme.colors.secondary}; - position: absolute; - top: 60.5%; - left: 72%; + position: relative; text-align: center; - z-index: 10; + z-index: 30; + right: 25%; + top: 1.5%; font-weight: bold; `; export const Copy = styled(I.Copy)` - position: absolute; - bottom: calc(41.5% - 132px - 36.5px); - right: calc(68% - 147.5px - 59px); - z-index: 10; + position: relative; + z-index: 30; width: 4%; + right: 25%; + top: 1.5%; height: 40%; `; export const InviteContainer = styled.div` display: flex; + flex-direction: column; + z-index: 20; + position: absolute; + align-items: center; + justify-content: center; + top: 20%; + width: 100%; + height: 100%; `; export const InviteBar = styled(I.InviteBar)` - position: absolute; - bottom: calc(33% - 132px - 36.5px); - right: calc(79% - 147.5px - 59px); - z-index: 10; + position: relative; + z-index: 20; width: 60%; height: 40%; `; @@ -83,30 +96,26 @@ export const InviteBar = styled(I.InviteBar)` export const InviteText = styled.p` font-size: 0.7rem; color: #134b80; - position: absolute; - top: 69.5%; - left: 31%; - text-align: center; - z-index: 10; + position: relative; + z-index: 30; font-weight: bold; + bottom: 21%; `; export const InviteBar2 = styled(I.InviteBar)` - position: absolute; - bottom: calc(26% - 132px - 36.5px); - right: calc(79% - 147.5px - 59px); - z-index: 10; + position: relative; + z-index: 20; width: 60%; height: 40%; + top: 10%; `; export const InviteText2 = styled.p` font-size: 0.7rem; color: #134b80; - position: absolute; - top: 76.5%; - left: 41%; + position: relative; text-align: center; - z-index: 10; + z-index: 30; font-weight: bold; + bottom: 11%; `; diff --git a/src/components/AddGroup/AddGroupSpace/Space.tsx b/src/components/AddGroup/AddGroupSpace/Space.tsx index 855cd64..2a79a23 100644 --- a/src/components/AddGroup/AddGroupSpace/Space.tsx +++ b/src/components/AddGroup/AddGroupSpace/Space.tsx @@ -1,12 +1,28 @@ -import React from 'react'; +import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import * as S from '../AddGroupHeadCount/Styles'; +import * as S from './Styles'; +import { useRecoilState, useRecoilValue } from 'recoil'; +import { namesState, newtypeState, placeState, typeState } from '../state'; -const HeadCount = () => { +const Space = () => { const navigate = useNavigate(); + const names = useRecoilValue(namesState); + const selectedTypes = useRecoilValue(typeState); + const newType = useRecoilValue(newtypeState); + const [place, setPlace] = useRecoilState(placeState); const handleNextClick = () => { - navigate('/group/add/space'); + // 입력값이 있는 경우 콘솔에 출력 + if (place.trim() !== '') { + console.log( + `이름: ${names.join(', ')} +성격: ${selectedTypes.join(', ')}, ${newType} +장소: ${place}`, + ); + navigate('/group/add/loading'); + } else { + alert('장소를 입력해주세요'); + } }; return ( @@ -15,11 +31,16 @@ const HeadCount = () => { 어디에서 찍은 사진인가요? - 공간을 입력해 주세요. + setPlace(e.target.value)} + /> ); }; -export default HeadCount; +export default Space; diff --git a/src/components/AddGroup/AddGroupHeadCount/Styles.ts b/src/components/AddGroup/AddGroupSpace/Styles.ts similarity index 73% rename from src/components/AddGroup/AddGroupHeadCount/Styles.ts rename to src/components/AddGroup/AddGroupSpace/Styles.ts index 1d36420..37320ce 100644 --- a/src/components/AddGroup/AddGroupHeadCount/Styles.ts +++ b/src/components/AddGroup/AddGroupSpace/Styles.ts @@ -12,11 +12,11 @@ export const Layout = styled.div` export const Fly = styled(I.Fly)` position: absolute; - top: 40%; + top: 38%; left: 50%; transform: translate(-50%, -50%); - width: 5%; - height: 5%; + width: 24px; /* 필요에 따라 크기 조정 */ + height: 24px; `; export const Text = styled.p` @@ -30,24 +30,30 @@ export const Text = styled.p` export const InputCountContainer = styled.div` display: flex; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; `; export const Input = styled(I.Input)` - position: absolute; - top: 53%; - left: 50%; + display: flex; + flex-direction: column; + position: relative; + top: 61%; + left: 45%; transform: translate(-50%, -50%); - width: 70%; + width: 85%; height: 90%; `; -export const InputCounterText = styled.p` +export const InputCounterText = styled.input` font-size: 0.7rem; color: ${({ theme }) => theme.colors.secondary}; - position: absolute; - top: 52%; - left: 30%; + position: relative; + bottom: 25%; text-align: center; + align-items: center; z-index: 10; `; diff --git a/src/components/AddGroup/AddGroupType/GroupType.tsx b/src/components/AddGroup/AddGroupType/GroupType.tsx index d423050..f439478 100644 --- a/src/components/AddGroup/AddGroupType/GroupType.tsx +++ b/src/components/AddGroup/AddGroupType/GroupType.tsx @@ -1,61 +1,63 @@ import React from 'react'; import * as S from './Styles'; import { useNavigate } from 'react-router-dom'; +import MemberTypeList from './MemberTypeList/MemberTypeList'; +import { useRecoilValue } from 'recoil'; +import { namesState, newtypeState, typeState } from '../state'; + +function MemberTypeHead() { + return ( + + + 모임의 성격을 알려주세요. + (중복 선택 가능) + + ); +} + +function MemberTypeContent() { + return ( + + + + ); +} const GroupType = () => { const navigate = useNavigate(); + const names = useRecoilValue(namesState); + const selectedTypes = useRecoilValue(typeState); // 선택된 타입 상태 + const newType = useRecoilValue(newtypeState); // 새로 입력된 타입 상태 const handleNextClick = () => { - navigate('/group/add/loading'); - }; + const trimmedNewType = newType ? newType.trim() : ''; + + if (selectedTypes.length > 0 || trimmedNewType !== '') { + const allTypes = [...selectedTypes]; + + // 새로 입력된 타입이 있는 경우 배열에 추가 + if (trimmedNewType !== '' && !selectedTypes.includes(trimmedNewType)) { + allTypes.push(trimmedNewType); + } + const uniqueTypes = Array.from( + new Set(allTypes.filter((type) => type.trim() !== '')), + ); + console.log( + `이름: ${names.join(', ')} +성격: ${uniqueTypes.join(', ')}`, + ); + navigate('/group/add/space'); + } else { + alert('성격을 선택하거나 입력해주세요'); + } + }; return ( - - - 모임의 성격을 알려주세요. - (중복 선택 가능) - - - 친구 - - - - 연인 - - - - 여행 - - - - 가족 - - - - 정기 모임 - - - - 동아리 - - - - 행사 - - - - 나들이 - - - - 스냅 사진 - - - - 직접 입력 - - - + + + + {/* 다음 버튼 클릭 시 처리 */} + ); }; diff --git a/src/components/AddGroup/AddGroupType/MemberTypeList/MemberTypeList.tsx b/src/components/AddGroup/AddGroupType/MemberTypeList/MemberTypeList.tsx new file mode 100644 index 0000000..b3ee8b6 --- /dev/null +++ b/src/components/AddGroup/AddGroupType/MemberTypeList/MemberTypeList.tsx @@ -0,0 +1,68 @@ +/* eslint-disable prettier/prettier */ +import React from 'react'; +import * as S from './Styles'; +import { useRecoilState } from 'recoil'; +import { newtypeState, typeState } from '../../state'; + + +const MemberTypeCreate = () => { + const [newType, setNewType] = useRecoilState(newtypeState); // Recoil 상태를 사용하여 newType을 관리합니다. + + return ( + + + setNewType(e.target.value)} + /> + + ); +}; + +const MemberTypeList: React.FC = () => { + const initialTypes = [ + '친구', + '연인', + '여행', + '가족', + '정기 모임', + '동아리', + '행사', + '나들이', + '스냅 사진', + ]; + + + const [selectedTypes, setSelectedTypes] = useRecoilState(typeState); // 선택된 타입 상태 추가 + + const handleTypeClick = (Type: string) => { + setSelectedTypes((prevSelectedTypes) => + prevSelectedTypes.includes(Type) + ? prevSelectedTypes.filter((type) => type !== Type) // 이미 선택된 경우 제거 + : [...prevSelectedTypes, Type] // 선택되지 않은 경우 추가 + ); + }; + + + return ( + + + {initialTypes.map((Type, index) => ( + handleTypeClick(Type)}> + + + {Type} + + + ))} + + + + ); +}; + +export default MemberTypeList; diff --git a/src/components/AddGroup/AddGroupType/MemberTypeList/Styles.ts b/src/components/AddGroup/AddGroupType/MemberTypeList/Styles.ts new file mode 100644 index 0000000..229558a --- /dev/null +++ b/src/components/AddGroup/AddGroupType/MemberTypeList/Styles.ts @@ -0,0 +1,109 @@ +import * as I from 'assets/icon'; +import styled from 'styled-components'; + +/*리스트 영역 */ +export const TypeLayout = styled.div` + display: flex; + flex-direction: column; + min-height: 30px; + align-items: center; + /* 전체 스크롤바 */ + ::-webkit-scrollbar { + width: 12px; + } + + /* 스크롤바의 트랙 */ + ::-webkit-scrollbar-track { + background: none; + } + + /* 스크롤바 핸들 */ + ::-webkit-scrollbar-thumb { + background: ${({ theme }) => theme.colors.Primary}; + border-radius: 10px; + } + + /* 스크롤바 핸들 호버 */ + ::-webkit-scrollbar-thumb:hover { + background: ${({ theme }) => theme.colors.primary}; + } +`; + +export const TypeList = styled.div` + position: relative; + display: flex; + flex-direction: row; + width: 300px; + height: 200px; + overflow-y: auto; + align-items: center; + justify-content: center; + z-index: 10; + background: none; + flex-wrap: wrap; + bottom: 30px; +`; + +export const TypeContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; + z-index: 30; + position: relative; + background: none; + margin: 2px; + width: 82px; /* 고정된 너비 */ + height: 30px; /* 고정된 높이 */ + &:hover .TypeButton { + display: inline; + } +`; + +export const NowImportType = styled(I.GroupBtn)` + position: absolute; + width: 71px; + z-index: 0; + align-items: center; +`; + +export const Type = styled.p` + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + z-index: 5; + font-size: 0.8rem; + color: ${({ theme }) => theme.colors.primary}; +`; + +/*입력 영역 */ + +export const TypeCreateLayout = styled.div` + display: flex; + flex-direction: column; + position: absolute; + margin-top: 210px; + align-items: center; + justify-content: center; +`; + +export const TypeInput = styled(I.InputGroupType)` + position: relative; + width: 250px; + z-index: 10; +`; + +export const inputType = styled.input` + display: inline-block; + position: relative; + padding: 0 20px 0 30px; + width: 100%; + height: 40px; + background: none; + z-index: 30; + bottom: 39px; + align-items: center; + &::placeholder { + color: ${({ theme }) => theme.colors.primary}; + opacity: 1; + } +`; diff --git a/src/components/AddGroup/AddGroupType/Styles.ts b/src/components/AddGroup/AddGroupType/Styles.ts index 6a07e9f..3279cb0 100644 --- a/src/components/AddGroup/AddGroupType/Styles.ts +++ b/src/components/AddGroup/AddGroupType/Styles.ts @@ -1,97 +1,59 @@ import * as I from 'assets/icon'; import styled from 'styled-components'; -export const Layout = styled.div` +export const MemberTypeLayout = styled.div` display: flex; flex-direction: column; + justify-content: center; align-items: center; + height: 80vh; +`; + +export const headingLayout = styled.div` + position: relative; + margin-bottom: 80px; + width: 330px; + text-align: center; justify-content: center; - width: 100%; - height: 100%; `; export const Fly = styled(I.Fly)` - position: absolute; - top: 18%; - left: 50%; - transform: translate(-50%, -50%); - width: 5%; - height: 5%; + display: inline-block; /* SVG를 인라인 블록으로 표시 */ + vertical-align: middle; /* 수직 정렬을 맞춤 */ + width: 24px; /* 필요에 따라 크기 조정 */ + height: 24px; /* 필요에 따라 크기 조정 */ + margin: 10 auto; + margin-bottom: 19px; `; export const Text = styled.p` - font-size: 0.8rem; + font-size: 0.7rem; color: ${({ theme }) => theme.colors.primary}; - position: absolute; + position: relative; top: 22%; text-decoration: underline; - text-underline-offset: 20px; + text-underline-offset: 15px; `; export const SelectText = styled.p` font-size: 0.5rem; color: ${({ theme }) => theme.colors.primary}; - position: absolute; - top: 24%; -`; - -interface ContainerProps { - top?: string; - left?: string; -} - -export const TypeContainer = styled.div` - display: flex; position: relative; - top: ${({ top }) => top || 'auto'}; - left: ${({ left }) => left || 'auto'}; -`; - -export const GroupBtn = styled(I.GroupBtn)` - position: absolute; - transform: translate(-50%, -50%); + top: 26%; `; -export const InputTypeText = styled.p` - font-size: 0.8rem; - color: ${({ theme }) => theme.colors.primary}; - position: absolute; - z-index: 10; - writing-mode: vertical-lr; - text-align: center; - transform: translate(-50%, -50%); -`; - -export const InputTypeContainer = styled.div` - display: flex; -`; - -export const InputGroupType = styled(I.InputGroupType)` - position: absolute; - top: 58%; - left: 50%; - transform: translate(-50%, -50%); - width: 70%; - height: 90%; -`; - -export const InputGroupTypeText = styled.p` - font-size: 0.8rem; - color: ${({ theme }) => theme.colors.primary}; - position: absolute; - top: 57%; - left: 30%; - text-align: center; - z-index: 10; - transform: translate(-80%, 20%); +export const TypeListLayout = styled.div` + position: relative; + width: 350px; + height: 300px; `; export const NextArrow = styled(I.NextArrowCircle)` position: absolute; - bottom: calc(36% - 12px - 36.5px); - right: calc(35% - 12.5px - 59px); + bottom: calc(25% - 12px - 36.5px); + right: calc(40% - 12.5px - 59px); z-index: 15; width: 9%; /* Adjust width as needed */ - height: 9%; + height: 20%; cursor: pointer; `; diff --git a/src/components/AddGroup/state.tsx b/src/components/AddGroup/state.tsx new file mode 100644 index 0000000..d5ab76e --- /dev/null +++ b/src/components/AddGroup/state.tsx @@ -0,0 +1,24 @@ +import { atom } from 'recoil'; + +// 이름 상태 +export const namesState = atom({ + key: 'namesState', + default: [], +}); + +//성격 상태 추가 +export const typeState = atom({ + key: 'typeState', + default: [], +}); + +export const newtypeState = atom({ + key: 'newtypeState', + default: '', +}); + +// 장소 상태 추가 +export const placeState = atom({ + key: 'placeState', + default: '', +}); diff --git a/src/pages/AddGroupMain/AddGroupInputCount.tsx b/src/pages/AddGroupMain/AddGroupInputCount.tsx deleted file mode 100644 index 153e3c0..0000000 --- a/src/pages/AddGroupMain/AddGroupInputCount.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import Header from 'components/Header/Header'; -import NavigationBar from 'components/navigationbar/NavigationBar'; -import AddGroupHeadCount from 'components/AddGroup/AddGroupHeadCount/HeadCount'; -import * as S from './Styles'; - -const AddGroupInputCount: React.FC = () => { - return ( - -
-
- - - ); -}; - -export default AddGroupInputCount;