feat: 동아리 정보 수정 페이지 연결

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.mouseWheelZoom": true
+}

src/App.jsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { ThemeProvider } from 'styled-components';
-import { GlobalStyle } from './styles/global-style';
-import theme from './styles/theme';
-import { RouterProvider } from 'react-router-dom';
-import { router } from './routes/router';
+import React from "react";
+import { ThemeProvider } from "styled-components";
+import { GlobalStyle } from "./styles/global-style";
+import theme from "./styles/theme";
+import { RouterProvider } from "react-router-dom";
+import { router } from "./routes/router";
 
 function App() {
   console.log("App 실행");
@@ -16,6 +16,4 @@ function App() {
   );
 }
 
-
-
 export default App;

src/pages/group/Group.jsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Outlet } from 'react-router-dom';
-import GroupHeader from './group_components/GroupHeader';
-import GroupTabBar from './group_components/GroupTabBar';
+import React from "react";
+import styled from "styled-components";
+import { Outlet } from "react-router-dom";
+import GroupHeader from "./group_components/GroupHeader";
+import GroupTabBar from "./group_components/GroupTabBar";
 
 const FixedContainer = styled.div`
   top: 0;
@@ -31,6 +31,6 @@ const Group = () => {
       </ContentContainer>
     </>
   );
-}
+};
 
 export default Group;

src/pages/group/basicinfo/ModiComponent/CharacterWrapper.jsx

@@ -0,0 +1,16 @@
+import Tag from './ModifyTagItem';
+import { Wrapper, WrapperContent, WrapperTitle } from './WrapperStyled';
+
+const Character = () => {
+  return (
+    <Wrapper>
+      <WrapperTitle>성격</WrapperTitle>
+      <WrapperContent>
+        <Tag text={'서울시'} />
+        <Tag text={'마포구'} />
+      </WrapperContent>
+    </Wrapper>
+  );
+};
+
+export default Character;

src/pages/group/basicinfo/ModiComponent/Comment.jsx

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+
+const Comment = ({ content }) => {
+  return (
+    <Container>
+      <Title>동아리 한마디</Title>
+      <Content>{content}</Content>
+    </Container>
+  );
+};
+
+export default Comment;
+const Container = styled.div`
+  width: 100%;
+  border-radius: 8px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background-color: #ffffff;
+  box-shadow: 0px 0px 8px 0px #9499cc3b;
+  box-sizing: border-box;
+`;
+const Title = styled.div`
+  color: #98a2b3;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 18px;
+`;
+const Content = styled.input`
+  /* outline: none; */
+  border: none;
+  color: #475420;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 30px;
+
+  &:focus {
+    outline: 1px solid #ff760a;
+  }
+`;

src/pages/group/basicinfo/ModiComponent/ImgWrapper.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+const ImgWrapper = () => {
+  return (
+    <ImgContainer>
+      <ImgModify>이미지 변경하기</ImgModify>
+    </ImgContainer>
+  );
+};
+
+export default ImgWrapper;
+const ImgContainer = styled.div`
+  width: 100%;
+  height: 180.12px;
+  border-radius: 8px;
+  background-color: black;
+  display: flex;
+  align-items: self-end;
+  justify-content: center;
+  padding: 10px;
+`;
+
+const ImgModify = styled.div`
+  width: 80%;
+  height: 40px;
+  padding: 8px;
+  border-radius: 8px;
+  box-shadow: 0px 2px 10px 0px #555ba03b;
+  background: #ffffff;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: center;
+`;

src/pages/group/basicinfo/ModiComponent/MaxPeople.jsx

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+import React from 'react';
+import { Wrapper, WrapperTitle } from './WrapperStyled';
+import { ReactComponent as UpIcon } from '../../../../assets/group/UpIcon.svg';
+import { ReactComponent as DownIcon } from '../../../../assets/group/DownIcon.svg';
+const MaxPeople = () => {
+  return (
+    <Wrapper>
+      <WrapperTitle>최대 인원 수</WrapperTitle>
+      <MaxPeopleContent>
+        <Input type="number" />
+        <Regulate>
+          <UpIcon />
+          <DownIcon />
+        </Regulate>
+      </MaxPeopleContent>
+    </Wrapper>
+  );
+};
+
+export default MaxPeople;
+
+const Input = styled.input`
+  width: 53px;
+  height: 38px;
+  padding: 8px 16px;
+  gap: 6px;
+  border-radius: 12px;
+  border: 1px;
+  border: 1px solid #e4e7ec;
+`;
+
+const Regulate = styled.div`
+  width: 16px;
+  height: 32px;
+`;
+
+const MaxPeopleContent = styled.div`
+  width: 100%;
+  height: 38px;
+  gap: 7px;
+  display: flex;
+`;

src/pages/group/basicinfo/ModiComponent/ModifyTagItem.jsx

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+import React from 'react';
+
+const Tag = ({ text }) => {
+  return <Container>{text}</Container>;
+};
+
+export default Tag;
+
+const Container = styled.div`
+  height: 38px;
+  padding: 8px 16px;
+  gap: 6px;
+  border-radius: 12px;
+  border: 1px;
+  border: 1px solid #e4e7ec;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+  text-align: center;
+  color: #1d2939;
+`;

src/pages/group/basicinfo/ModiComponent/RegionWrapper.jsx

@@ -0,0 +1,16 @@
+import Tag from './ModifyTagItem';
+import { Wrapper, WrapperContent, WrapperTitle } from './WrapperStyled';
+
+const Region = () => {
+  return (
+    <Wrapper>
+      <WrapperTitle>지역</WrapperTitle>
+      <WrapperContent>
+        <Tag text={'서울시'} />
+        <Tag text={'마포구'} />
+      </WrapperContent>
+    </Wrapper>
+  );
+};
+
+export default Region;

src/pages/group/basicinfo/ModiComponent/WrapperStyled.jsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  width: 353px;
+  height: 68px;
+  padding: 4px 0px;
+  gap: 8px;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const WrapperContent = styled.div`
+  width: 100%;
+  height: 38px;
+  gap: 4px;
+  display: flex;
+`;
+
+export const WrapperTitle = styled.div`
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 14px;
+  text-align: left;
+
+  color: #98a2b3;
+`;

src/pages/group/basicinfo/ModifyInfo.jsx

@@ -0,0 +1,60 @@
+import styled from 'styled-components';
+import React from 'react';
+import {
+  AddButton,
+  BaseContainer,
+  CloseButton,
+  ModalNavi,
+} from '../group_components/ModalHeader';
+import ImgWrapper from './ModiComponent/ImgWrapper';
+import Region from './ModiComponent/RegionWrapper';
+import Character from './ModiComponent/CharacterWrapper';
+import Comment from './ModiComponent/Comment';
+import MaxPeople from './ModiComponent/MaxPeople';
+
+const ModifyInfo = ({ isOpen, onClose }) => {
+  return (
+    <>
+      {isOpen && (
+        <Container>
+          <ModalNavi>
+            <CloseButtonStyled onClick={onClose}>X</CloseButtonStyled>
+            <ModalTitle>기본 정보 수정</ModalTitle>
+            <AddButton>완료</AddButton>
+          </ModalNavi>
+          <EntireContainer>
+            <ImgWrapper />
+            <Region />
+            <Character />
+            <MaxPeople />
+            <Comment />
+          </EntireContainer>
+        </Container>
+      )}
+    </>
+  );
+};
+
+export default ModifyInfo;
+
+const CloseButtonStyled = styled(CloseButton)`
+  font-size: 14px;
+`;
+const ModalTitle = styled.div`
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 22px;
+  text-align: center;
+  color: #475467;
+`;
+
+const EntireContainer = styled.div`
+  width: 100%;
+  gap: 10px;
+  display: flex;
+  flex-direction: column;
+`;
+
+const Container = styled(BaseContainer)`
+  border-radius: 0px;
+`;