Merge pull request #61 from Na-o-man/feat/#48

feat: addgroup 성격 선택 디자인 변경

src/App.tsx

@@ -65,4 +65,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

src/assets/icon.ts

@@ -12,6 +12,7 @@ export { ReactComponent as InputProfile } from './icon/add_group/InputProfile.sv
 export { ReactComponent as PlusCircle } from './icon/add_group/plusCircle.svg';
 export { ReactComponent as NowInportName } from './icon/add_group/nowinportname.svg';
 export { ReactComponent as xCircle } from './icon/add_group/xCircle.svg';
+export { ReactComponent as SelectType } from './icon/add_group/SelectType.svg';
 // common
 export { ReactComponent as Cloud } from './icon/common/cloud.svg';
 export { ReactComponent as Fly } from './icon/common/fly.svg';

src/components/AddGroup/AddGroupMembername/AddGroupMembername.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import * as S from './Styles';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
-import { namesState } from '../state';
+import { namesState } from '../../../recoil/states/addgroupState';
 import MembernameList from './membernameList/membernameList';
 
 function MemberNameHead() {

src/components/AddGroup/AddGroupMembername/membernameList/membernameList.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import * as S from './Styles';
 import { useRecoilState } from 'recoil';
-import { namesState } from '../../state'; // Recoil 상태가 정의된 파일을 import
+import { namesState } from '../../../../recoil/states/addgroupState'; // Recoil 상태가 정의된 파일을 import
 
 interface MembernameCreateProps {
   addName: (name: string) => void;

src/components/AddGroup/AddGroupShare/AddGroupshare.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import * as S from './Styles';
 import { useRecoilValue } from 'recoil';
-import { placeState } from '../state';
+import { placeState } from '../../../recoil/states/addgroupState';
 
 const AddGroupshare = () => {
   const place = useRecoilValue(placeState);

src/components/AddGroup/AddGroupSpace/Space.tsx

@@ -2,7 +2,12 @@ import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import * as S from './Styles';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { namesState, newtypeState, placeState, typeState } from '../state';
+import {
+  namesState,
+  newtypeState,
+  placeState,
+  typeState,
+} from '../../../recoil/states/addgroupState';
 
 const Space = () => {
   const navigate = useNavigate();

src/components/AddGroup/AddGroupType/GroupType.tsx

@@ -3,7 +3,11 @@ 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';
+import {
+  namesState,
+  newtypeState,
+  typeState,
+} from '../../../recoil/states/addgroupState';
 
 function MemberTypeHead() {
   return (

src/components/AddGroup/AddGroupType/MemberTypeList/MemberTypeList.tsx

@@ -2,7 +2,10 @@
 import React from 'react';
 import * as S from './Styles';
 import { useRecoilState } from 'recoil';
-import { newtypeState, typeState } from '../../state';
+import {
+  newtypeState,
+  typeState,
+} from '../../../../recoil/states/addgroupState';
 
 const MemberTypeCreate = () => {
   const [newType, setNewType] = useRecoilState(newtypeState); // Recoil 상태를 사용하여 newType을 관리합니다.
@@ -49,12 +52,12 @@ const MemberTypeList: React.FC = () => {
       <S.TypeList>
         {initialTypes.map((Type, index) => (
           <S.TypeContainer key={index} onClick={() => handleTypeClick(Type)}>
-            <S.NowImportType />
-            <S.Type
-              style={{
-                color: selectedTypes.includes(Type) ? 'skyblue' : 'white',
-              }}
-            >
+            {selectedTypes.includes(Type) ? (
+              <S.SelectType />
+            ) : (
+              <S.NowImportType />
+            )}
+            <S.Type>
               {Type}
             </S.Type>
           </S.TypeContainer>

src/components/AddGroup/AddGroupType/MemberTypeList/Styles.ts

@@ -66,6 +66,13 @@ export const NowImportType = styled(I.GroupBtn)`
   align-items: center;
 `;
 
+export const SelectType = styled(I.SelectType)`
+  position: absolute;
+  width: 71px;
+  z-index: 0;
+  align-items: center;
+`;
+
 export const Type = styled.p`
   overflow: hidden;
   white-space: nowrap;