From 7f0ed5f8e7b4a223d76710a2b5a0dd63d26ff74c Mon Sep 17 00:00:00 2001
From: seoyeon-jung <jungluchia1204@gmail.com>
Date: Sun, 8 Oct 2023 16:45:52 +0900
Subject: [PATCH 1/8] =?UTF-8?q?design:=20=EC=8A=A4=ED=84=B0=EB=94=94?=
 =?UTF-8?q?=EB=B0=A9=20=EB=A7=8C=EB=93=A4=EA=B8=B0=20=ED=8B=80=20=EC=9E=A1?=
 =?UTF-8?q?=EA=B8=B0=20#19?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/StudyMake.jsx | 44 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/pages/StudyMake.jsx b/src/pages/StudyMake.jsx
index 860bc15..9340d6b 100644
--- a/src/pages/StudyMake.jsx
+++ b/src/pages/StudyMake.jsx
@@ -1,5 +1,47 @@
+import styled from "styled-components";
+
 const StudyMake = () => {
-  return <div>스터디방 만들기 페이지입니다</div>;
+  return (
+    <Wrapper>
+      <div>
+        <div>그룹명*</div>
+        <input />
+        <button>중복 확인</button>
+      </div>
+
+      <div>
+        <div>그룹 카테고리*</div>
+        {/* select (front/back) */}
+      </div>
+
+      <div>
+        <div>제한 인원수*</div>
+        {/* select (1~50) */}
+      </div>
+
+      <div>
+        <div>
+          참여코드 (선택사항) 공개 스터디방으로 원할 경우 빈칸으로 제출하세요.
+        </div>
+        <input
+          text="password"
+          placeholder="참여코드 설정은 숫자 4자리 입니다."
+        />
+      </div>
+
+      <div>
+        <div>소개글</div>
+        <textarea placeholder="궁금할 스터디원들에게 어떤 스터디방인지 설명해주세요. ex) 규칙사항, 준비하는 문제에 대해 간략하게 적어보세요." />
+      </div>
+
+      <button>방 만들기</button>
+    </Wrapper>
+  );
 };
 
 export default StudyMake;
+
+const Wrapper = styled.div`
+  max-width: 1090px;
+  margin: 0 auto;
+`;

From ebd8db77ca7846976ba80e3283268ba62bed8a57 Mon Sep 17 00:00:00 2001
From: seoyeon-jung <jungluchia1204@gmail.com>
Date: Sun, 8 Oct 2023 17:17:52 +0900
Subject: [PATCH 2/8] =?UTF-8?q?design:=20selectBox=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?#19?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 그룹 카테고리 selectbox를 생성했습니다
- 인원수 selectbox를 생성했습니다
---
 .../studyroomMake/SelectCategory.jsx          |  79 ++++++++++++++
 src/components/studyroomMake/SelectPeople.jsx | 101 ++++++++++++++++++
 src/pages/StudyMake.jsx                       |  15 ++-
 3 files changed, 194 insertions(+), 1 deletion(-)
 create mode 100644 src/components/studyroomMake/SelectCategory.jsx
 create mode 100644 src/components/studyroomMake/SelectPeople.jsx

diff --git a/src/components/studyroomMake/SelectCategory.jsx b/src/components/studyroomMake/SelectCategory.jsx
new file mode 100644
index 0000000..1874fd3
--- /dev/null
+++ b/src/components/studyroomMake/SelectCategory.jsx
@@ -0,0 +1,79 @@
+import { useState } from "react";
+import styled from "styled-components";
+import DropDownIcon from "../../assets/dropdown2.png";
+
+export default function SelectCategory() {
+  const [isShowOption, setShowOptions] = useState(false);
+  const [currentValue, setCurrentValue] = useState("카테고리 선택");
+
+  const handleSelectValue = (e) => {
+    const { innerText } = e.target;
+    setCurrentValue(innerText);
+  };
+
+  return (
+    <SelectContainer onClick={() => setShowOptions((prev) => !prev)}>
+      <Label>
+        {currentValue}
+        <Icon src={DropDownIcon} alt="dropdown" />
+      </Label>
+      <SelectOptions show={isShowOption}>
+        <Option onClick={handleSelectValue}>프론트엔드</Option>
+        <Option onClick={handleSelectValue}>백엔드</Option>
+      </SelectOptions>
+    </SelectContainer>
+  );
+}
+
+const SelectContainer = styled.div`
+  position: relative;
+  width: 866px;
+  height: 42px;
+  padding: 8px;
+  background-color: #3f424e;
+  align-self: center;
+  border-radius: 6px;
+  cursor: pointer;
+`;
+
+const Label = styled.label`
+  font-size: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-right: 20px;
+  margin-top: 10px;
+`;
+
+const Icon = styled.img`
+  margin-left: 2d5px;
+  margin-right: 20px;
+  //margin-top: 15px;
+`;
+
+const SelectOptions = styled.ul`
+  position: absolute;
+  list-style: none;
+  top: 18px;
+  left: 0;
+  width: 100%;
+  overflow: hidden;
+  height: 90px;
+  max-height: ${(props) => (props.show ? "none" : "0")};
+  padding: 0;
+  border-radius: 8px;
+  background-color: #222222;
+  color: #fefefe;
+  transition: max-height 0.2s ease-in-out;
+`;
+
+const Option = styled.li`
+  font-size: 14px;
+  padding: 6px 8px;
+  text-align: center;
+  margin-top: 10px;
+  transition: background-color 0.2s ease-in;
+  &:hover {
+    background-color: #595959;
+  }
+`;
diff --git a/src/components/studyroomMake/SelectPeople.jsx b/src/components/studyroomMake/SelectPeople.jsx
new file mode 100644
index 0000000..b90c1cc
--- /dev/null
+++ b/src/components/studyroomMake/SelectPeople.jsx
@@ -0,0 +1,101 @@
+import { useState } from "react";
+import styled from "styled-components";
+import DropDownIcon from "../../assets/dropdown2.png";
+
+export default function SelectPeople() {
+  const [isShowOption, setShowOptions] = useState(false);
+  const [currentValue, setCurrentValue] = useState("인원수 선택 (1 ~ 50명)");
+
+  const handleSelectValue = (e) => {
+    const { innerText } = e.target;
+    setCurrentValue(innerText);
+  };
+
+  return (
+    <SelectContainer onClick={() => setShowOptions((prev) => !prev)}>
+      <Label>
+        {currentValue}
+        <Icon src={DropDownIcon} alt="dropdown" />
+      </Label>
+      <SelectOptions show={isShowOption}>
+        {Array.from({ length: 50 }, (_, index) => (
+          <Option key={index} onClick={handleSelectValue}>
+            {index + 1}
+          </Option>
+        ))}
+      </SelectOptions>
+    </SelectContainer>
+  );
+}
+
+const SelectContainer = styled.div`
+  position: relative;
+  width: 866px;
+  height: 42px;
+  padding: 8px;
+  background-color: #3f424e;
+  align-self: center;
+  border-radius: 6px;
+  cursor: pointer;
+`;
+
+const Label = styled.label`
+  font-size: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-right: 20px;
+  margin-top: 10px;
+`;
+
+const Icon = styled.img`
+  margin-left: 2d5px;
+  margin-right: 20px;
+  //margin-top: 15px;
+`;
+
+const SelectOptions = styled.ul`
+  position: absolute;
+  list-style: none;
+  top: 18px;
+  left: 0;
+  width: 100%;
+  overflow: hidden;
+  height: 130px;
+  max-height: ${(props) => (props.show ? "none" : "0")};
+  overflow-y: auto;
+  padding: 0;
+  border-radius: 8px;
+  background-color: #222222;
+  color: #fefefe;
+  transition: max-height 0.2s ease-in-out;
+
+  /* Webkit (Chrome, Safari) 스크롤바 스타일링 */
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #5263ff; /* 스크롤바 색상 */
+    border-radius: 10px;
+  }
+
+  /* Firefox 스크롤바 스타일링 */
+  scrollbar-width: thin;
+  scrollbar-color: #5263ff transparent;
+
+  & {
+    scrollbar-color: #5263ff transparent;
+  }
+`;
+
+const Option = styled.li`
+  font-size: 14px;
+  padding: 6px 8px;
+  text-align: center;
+  margin-top: 10px;
+  transition: background-color 0.2s ease-in;
+  &:hover {
+    background-color: #595959;
+  }
+`;
diff --git a/src/pages/StudyMake.jsx b/src/pages/StudyMake.jsx
index 9340d6b..9675c83 100644
--- a/src/pages/StudyMake.jsx
+++ b/src/pages/StudyMake.jsx
@@ -1,4 +1,6 @@
 import styled from "styled-components";
+import SelectCategory from "../components/studyroomMake/SelectCategory";
+import SelectPeople from "../components/studyroomMake/SelectPeople";
 
 const StudyMake = () => {
   return (
@@ -12,11 +14,13 @@ const StudyMake = () => {
       <div>
         <div>그룹 카테고리*</div>
         {/* select (front/back) */}
+        <SelectCategory />
       </div>
 
       <div>
         <div>제한 인원수*</div>
         {/* select (1~50) */}
+        <SelectPeople />
       </div>
 
       <div>
@@ -34,7 +38,7 @@ const StudyMake = () => {
         <textarea placeholder="궁금할 스터디원들에게 어떤 스터디방인지 설명해주세요. ex) 규칙사항, 준비하는 문제에 대해 간략하게 적어보세요." />
       </div>
 
-      <button>방 만들기</button>
+      <MakeBtn>방 만들기</MakeBtn>
     </Wrapper>
   );
 };
@@ -45,3 +49,12 @@ const Wrapper = styled.div`
   max-width: 1090px;
   margin: 0 auto;
 `;
+
+const MakeBtn = styled.button`
+  width: 866px;
+  height: 39px;
+  border: none;
+  border-radius: 6px;
+  background-color: #5263ff;
+  color: #ffffff;
+`;

From ac01106464134fc518100c8bb8a497f9d325e052 Mon Sep 17 00:00:00 2001
From: seoyeon-jung <jungluchia1204@gmail.com>
Date: Sun, 8 Oct 2023 17:25:05 +0900
Subject: [PATCH 3/8] =?UTF-8?q?design:=20selectBox=20style=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20#19?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- padding을 5px로 변경
- z-index 추가로 맨 위에 selectbot가 오도록 변경
---
 src/components/studyroomMake/SelectCategory.jsx | 3 ++-
 src/components/studyroomMake/SelectPeople.jsx   | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/studyroomMake/SelectCategory.jsx b/src/components/studyroomMake/SelectCategory.jsx
index 1874fd3..2db5d15 100644
--- a/src/components/studyroomMake/SelectCategory.jsx
+++ b/src/components/studyroomMake/SelectCategory.jsx
@@ -29,11 +29,12 @@ const SelectContainer = styled.div`
   position: relative;
   width: 866px;
   height: 42px;
-  padding: 8px;
+  padding: 5px;
   background-color: #3f424e;
   align-self: center;
   border-radius: 6px;
   cursor: pointer;
+  z-index: 1;
 `;
 
 const Label = styled.label`
diff --git a/src/components/studyroomMake/SelectPeople.jsx b/src/components/studyroomMake/SelectPeople.jsx
index b90c1cc..6520f5c 100644
--- a/src/components/studyroomMake/SelectPeople.jsx
+++ b/src/components/studyroomMake/SelectPeople.jsx
@@ -32,11 +32,12 @@ const SelectContainer = styled.div`
   position: relative;
   width: 866px;
   height: 42px;
-  padding: 8px;
+  padding: 5px;
   background-color: #3f424e;
   align-self: center;
   border-radius: 6px;
   cursor: pointer;
+  z-index: 1;
 `;
 
 const Label = styled.label`

From a8b57f17631950f3cebd93980e816ea6d09a099c Mon Sep 17 00:00:00 2001
From: seoyeon-jung <jungluchia1204@gmail.com>
Date: Sun, 8 Oct 2023 17:28:22 +0900
Subject: [PATCH 4/8] =?UTF-8?q?design:=20input,=20textarea=20style=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20#19?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/StudyMake.jsx | 70 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 66 insertions(+), 4 deletions(-)

diff --git a/src/pages/StudyMake.jsx b/src/pages/StudyMake.jsx
index 9675c83..2cb08e6 100644
--- a/src/pages/StudyMake.jsx
+++ b/src/pages/StudyMake.jsx
@@ -7,8 +7,11 @@ const StudyMake = () => {
     <Wrapper>
       <div>
         <div>그룹명*</div>
-        <input />
-        <button>중복 확인</button>
+        <div>
+          <GroupNameInput />
+          <ConfirmBtn>중복 확인</ConfirmBtn>
+        </div>
+        <div>사용 가능한 특수문자는 (_/-/@/.)입니다.</div>
       </div>
 
       <div>
@@ -27,7 +30,7 @@ const StudyMake = () => {
         <div>
           참여코드 (선택사항) 공개 스터디방으로 원할 경우 빈칸으로 제출하세요.
         </div>
-        <input
+        <CodeInput
           text="password"
           placeholder="참여코드 설정은 숫자 4자리 입니다."
         />
@@ -35,7 +38,7 @@ const StudyMake = () => {
 
       <div>
         <div>소개글</div>
-        <textarea placeholder="궁금할 스터디원들에게 어떤 스터디방인지 설명해주세요. ex) 규칙사항, 준비하는 문제에 대해 간략하게 적어보세요." />
+        <IntroduceArea placeholder="궁금할 스터디원들에게 어떤 스터디방인지 설명해주세요. ex) 규칙사항, 준비하는 문제에 대해 간략하게 적어보세요." />
       </div>
 
       <MakeBtn>방 만들기</MakeBtn>
@@ -50,6 +53,63 @@ const Wrapper = styled.div`
   margin: 0 auto;
 `;
 
+const GroupNameInput = styled.input`
+  width: 642px;
+  height: 42px;
+  padding: 5px;
+  background-color: #3f424e;
+  border: none;
+  border-radius: 6px;
+  margin-right: 20px;
+  color: #ffffff;
+`;
+
+const ConfirmBtn = styled.button`
+  width: 180px;
+  height: 42px;
+  border: none;
+  border-radius: 5px;
+  background-color: #5263ff;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 600;
+  margin-left: 20px;
+`;
+
+const CodeInput = styled.input`
+  width: 866px;
+  height: 42px;
+  padding: 5px;
+  background-color: #3f424e;
+  border: none;
+  border-radius: 6px;
+  color: #ffffff;
+
+  &::placeholder {
+    color: #ffffff;
+    padding: 5px;
+    font-size: 14px;
+    font-weight: 400;
+  }
+`;
+
+const IntroduceArea = styled.textarea`
+  width: 866px;
+  height: 93px;
+  padding: 5px;
+  background-color: #3f424e;
+  border: none;
+  border-radius: 6px;
+  color: #ffffff;
+
+  &::placeholder {
+    color: #ffffff;
+    padding: 5px;
+    font-size: 14px;
+    font-weight: 400;
+  }
+`;
+
 const MakeBtn = styled.button`
   width: 866px;
   height: 39px;
@@ -57,4 +117,6 @@ const MakeBtn = styled.button`
   border-radius: 6px;
   background-color: #5263ff;
   color: #ffffff;
+  font-size: 14px;
+  font-weight: 500;
 `;

From 5405011218261fceaf9e9fddd70ede434c21e2e3 Mon Sep 17 00:00:00 2001
From: seoyeon-jung <jungluchia1204@gmail.com>
Date: Tue, 10 Oct 2023 15:20:44 +0900
Subject: [PATCH 5/8] =?UTF-8?q?design:=20=EC=A0=84=EC=B2=B4=20style=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20#19?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 중복 확인 버튼 클릭시의 안내 문구를 추가했습니다
- 비밀코드 입력 시 유효성 검사(4개의 숫자)를 추가했습니다
- 비밀코드 유효성 검사 실패 시 안내 문구를 추가했습니다
---
 src/pages/StudyMake.jsx | 140 +++++++++++++++++++++++++++++++++-------
 1 file changed, 118 insertions(+), 22 deletions(-)

diff --git a/src/pages/StudyMake.jsx b/src/pages/StudyMake.jsx
index 2cb08e6..75680be 100644
--- a/src/pages/StudyMake.jsx
+++ b/src/pages/StudyMake.jsx
@@ -1,45 +1,86 @@
 import styled from "styled-components";
 import SelectCategory from "../components/studyroomMake/SelectCategory";
 import SelectPeople from "../components/studyroomMake/SelectPeople";
+import { useState } from "react";
 
 const StudyMake = () => {
+  const [isDuplicate, setIsDuplicate] = useState(false); // 중복 확인 상태관리
+  const [code, setCode] = useState(""); // 비공개 코드 상태관리
+  const [isCodeValid, setIsCodeValid] = useState(true); // 비공개 코드 유효성 검사
+
+  // 중복 확인 버튼
+  const handleCheckDuplicate = () => {
+    // 중복 확인 로직 추가 예정
+    setIsDuplicate(true);
+  };
+
+  const handleCode = (event) => {
+    const inputValue = event.target.value;
+
+    // 정규식으로 유효성 검사
+    const isValid = /^\d{4}$/.test(inputValue);
+    setIsCodeValid(isValid);
+    setCode(inputValue);
+  };
+
   return (
     <Wrapper>
-      <div>
-        <div>그룹명*</div>
-        <div>
+      <Container>
+        <Title>
+          그룹명<span>*</span>
+        </Title>
+        <GroupNameContainer>
           <GroupNameInput />
-          <ConfirmBtn>중복 확인</ConfirmBtn>
-        </div>
-        <div>사용 가능한 특수문자는 (_/-/@/.)입니다.</div>
-      </div>
+          <ConfirmBtn onClick={handleCheckDuplicate}>중복 확인</ConfirmBtn>
+        </GroupNameContainer>
+        <GrouptNameText>사용 가능한 특수문자는 (_/-/@/.)입니다.</GrouptNameText>
+        {isDuplicate && (
+          <CheckText>
+            현재 입력한 그룹방은 이미 있는 그룹방 입니다. 새로 입력해주세요.
+          </CheckText>
+        )}
+      </Container>
 
-      <div>
-        <div>그룹 카테고리*</div>
+      <Container>
+        <Title>
+          그룹 카테고리<span>*</span>
+        </Title>
         {/* select (front/back) */}
         <SelectCategory />
-      </div>
+      </Container>
 
-      <div>
-        <div>제한 인원수*</div>
+      <Container>
+        <Title>
+          제한 인원수<span>*</span>
+        </Title>
         {/* select (1~50) */}
         <SelectPeople />
-      </div>
+      </Container>
 
-      <div>
-        <div>
-          참여코드 (선택사항) 공개 스터디방으로 원할 경우 빈칸으로 제출하세요.
-        </div>
+      <Container>
+        <CodeTitle>
+          참여코드{"   "}
+          <CodeText>
+            (선택사항) 공개 스터디방으로 원할 경우 빈칸으로 제출하세요.
+          </CodeText>
+        </CodeTitle>
         <CodeInput
-          text="password"
+          type="password"
           placeholder="참여코드 설정은 숫자 4자리 입니다."
+          value={code}
+          onChange={handleCode}
         />
-      </div>
+        {!isCodeValid && (
+          <CodeErrorMessage>
+            참여코드는 4자리 숫자로 입력해야 합니다.
+          </CodeErrorMessage>
+        )}
+      </Container>
 
-      <div>
-        <div>소개글</div>
+      <Container>
+        <Title>소개글</Title>
         <IntroduceArea placeholder="궁금할 스터디원들에게 어떤 스터디방인지 설명해주세요. ex) 규칙사항, 준비하는 문제에 대해 간략하게 적어보세요." />
-      </div>
+      </Container>
 
       <MakeBtn>방 만들기</MakeBtn>
     </Wrapper>
@@ -51,6 +92,27 @@ export default StudyMake;
 const Wrapper = styled.div`
   max-width: 1090px;
   margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Container = styled.div`
+  margin-bottom: 50px;
+`;
+
+const Title = styled.div`
+  fontsize: 16px;
+  font-weight: 600;
+  margin-bottom: 15px;
+
+  span {
+    color: #ff0000;
+  }
+`;
+
+const GroupNameContainer = styled.div`
+  margin-bottom: 15px;
 `;
 
 const GroupNameInput = styled.input`
@@ -76,6 +138,18 @@ const ConfirmBtn = styled.button`
   margin-left: 20px;
 `;
 
+const GrouptNameText = styled.div`
+  font-size: 13px;
+  font-weight: 400;
+  color: #939393;
+`;
+
+const CheckText = styled.div`
+  font-size: 13px;
+  font-weight: 400;
+  color: #ff0000;
+`;
+
 const CodeInput = styled.input`
   width: 866px;
   height: 42px;
@@ -93,6 +167,26 @@ const CodeInput = styled.input`
   }
 `;
 
+const CodeTitle = styled.div`
+  fontsize: 16px;
+  font-weight: 600;
+  margin-bottom: 15px;
+`;
+
+const CodeText = styled.span`
+  font-size: 10px;
+  font-weight: 400;
+  color: #939393;
+  margin-left: 10px;
+`;
+
+const CodeErrorMessage = styled.div`
+  font-size: 13px;
+  font-weight: 600;
+  color: #ff0000;
+  margin-top: 5px;
+`;
+
 const IntroduceArea = styled.textarea`
   width: 866px;
   height: 93px;
@@ -119,4 +213,6 @@ const MakeBtn = styled.button`
   color: #ffffff;
   font-size: 14px;
   font-weight: 500;
+  margin-top: 20px;
+  margin-bottom: 50px;
 `;

From 36c681026e91e4db8e37a899d37cfbe4befa1436 Mon Sep 17 00:00:00 2001
From: seoyeon-jung <jungluchia1204@gmail.com>
Date: Tue, 10 Oct 2023 15:34:25 +0900
Subject: [PATCH 6/8] =?UTF-8?q?design:=20textarea=20style=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20#19?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 글자수 제한 코드를 추가했습니다
- 실시간으로 글자수 반영하는 코드를 추가했습니다
---
 src/pages/StudyMake.jsx | 34 +++++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/pages/StudyMake.jsx b/src/pages/StudyMake.jsx
index 75680be..234b735 100644
--- a/src/pages/StudyMake.jsx
+++ b/src/pages/StudyMake.jsx
@@ -7,6 +7,7 @@ const StudyMake = () => {
   const [isDuplicate, setIsDuplicate] = useState(false); // 중복 확인 상태관리
   const [code, setCode] = useState(""); // 비공개 코드 상태관리
   const [isCodeValid, setIsCodeValid] = useState(true); // 비공개 코드 유효성 검사
+  const [introduction, setIntroduction] = useState(""); // textarea 글자 제한 유효성 검사
 
   // 중복 확인 버튼
   const handleCheckDuplicate = () => {
@@ -23,6 +24,13 @@ const StudyMake = () => {
     setCode(inputValue);
   };
 
+  const handleIntroduction = (event) => {
+    const inputValue = event.target.value;
+    setIntroduction(inputValue);
+  };
+
+  const isIntroductionTooLong = introduction.length > 100000;
+
   return (
     <Wrapper>
       <Container>
@@ -79,7 +87,17 @@ const StudyMake = () => {
 
       <Container>
         <Title>소개글</Title>
-        <IntroduceArea placeholder="궁금할 스터디원들에게 어떤 스터디방인지 설명해주세요. ex) 규칙사항, 준비하는 문제에 대해 간략하게 적어보세요." />
+        <IntroduceArea
+          placeholder="궁금할 스터디원들에게 어떤 스터디방인지 설명해주세요. ex) 규칙사항, 준비하는 문제에 대해 간략하게 적어보세요."
+          value={introduction}
+          onChange={handleIntroduction}
+        />
+        <CharCountText>{introduction.length} / 100,000</CharCountText>
+        {isIntroductionTooLong && (
+          <IntroductionErrorMessage>
+            해당 글자수를 초과하였습니다. 글자수를 줄여주세요.
+          </IntroductionErrorMessage>
+        )}
       </Container>
 
       <MakeBtn>방 만들기</MakeBtn>
@@ -204,6 +222,20 @@ const IntroduceArea = styled.textarea`
   }
 `;
 
+const CharCountText = styled.div`
+  font-size: 13px;
+  color: #939393;
+  margin-top: 5px;
+  text-align: right;
+`;
+
+const IntroductionErrorMessage = styled.div`
+  font-size: 13px;
+  font-weight: 600;
+  color: #ff0000;
+  margin-top: 5px;
+`;
+
 const MakeBtn = styled.button`
   width: 866px;
   height: 39px;

From 4a64a42c287ec4224f5d91819ef8a5eb03d72724 Mon Sep 17 00:00:00 2001
From: seoyeon-jung <jungluchia1204@gmail.com>
Date: Tue, 10 Oct 2023 16:13:07 +0900
Subject: [PATCH 7/8] =?UTF-8?q?feat:=20useModal=20style=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/hooks/useModal.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useModal.js b/src/hooks/useModal.js
index 6ee4c57..0074d96 100644
--- a/src/hooks/useModal.js
+++ b/src/hooks/useModal.js
@@ -61,8 +61,10 @@ const Background = styled.div`
 `;
 
 const ModalBlock = styled.div`
-  position: absolute;
-  top: 6.5rem;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   border-radius: 13px;
   padding: 1.5rem;
   background-color: #262631;

From bb421481bdad7c4fd36a4c6b93a6af7c022e758a Mon Sep 17 00:00:00 2001
From: seoyeon-jung <jungluchia1204@gmail.com>
Date: Tue, 10 Oct 2023 16:13:36 +0900
Subject: [PATCH 8/8] =?UTF-8?q?design:=20=EB=B0=A9=EB=A7=8C=EB=93=A4?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20#19?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/StudyMake.jsx | 94 +++++++++++++++++++++++++++++++++++++++--
 1 file changed, 90 insertions(+), 4 deletions(-)

diff --git a/src/pages/StudyMake.jsx b/src/pages/StudyMake.jsx
index 234b735..e9089a3 100644
--- a/src/pages/StudyMake.jsx
+++ b/src/pages/StudyMake.jsx
@@ -2,12 +2,19 @@ import styled from "styled-components";
 import SelectCategory from "../components/studyroomMake/SelectCategory";
 import SelectPeople from "../components/studyroomMake/SelectPeople";
 import { useState } from "react";
+import useModal from "../hooks/useModal";
 
 const StudyMake = () => {
   const [isDuplicate, setIsDuplicate] = useState(false); // 중복 확인 상태관리
   const [code, setCode] = useState(""); // 비공개 코드 상태관리
   const [isCodeValid, setIsCodeValid] = useState(true); // 비공개 코드 유효성 검사
   const [introduction, setIntroduction] = useState(""); // textarea 글자 제한 유효성 검사
+  const [groupName, setGroupName] = useState(""); // 그룹명 상태관리
+  const [category, setCategory] = useState(""); // 카테고리 상태관리
+  const [peopleLimit, setPeopleLimit] = useState(""); // 제한 인원수 상태관리
+
+  // useModal 사용해서 그룹방 탈퇴 모달 구현
+  const { openModal, Modal } = useModal();
 
   // 중복 확인 버튼
   const handleCheckDuplicate = () => {
@@ -29,8 +36,42 @@ const StudyMake = () => {
     setIntroduction(inputValue);
   };
 
+  // 그룹명 입력 시 상태 업데이트
+  const handleGroupName = (event) => {
+    const inputValue = event.target.value;
+    setGroupName(inputValue);
+  };
+
+  // 카테고리 선택 시 상태 업데이트
+  const handleCategory = (selectedCategory) => {
+    setCategory(selectedCategory);
+  };
+
+  // 제한 인원수 선택 시 상태 업데이트
+  const handlePeopleLimit = (selectedLimit) => {
+    setPeopleLimit(selectedLimit);
+  };
+
+  // 버튼 활성화 조건
+  // const isButtonEnabled =
+  //   groupName !== "" && category !== "" && peopleLimit !== "";
+
+  // textarea 글자수 제한
   const isIntroductionTooLong = introduction.length > 100000;
 
+  // 만들기 btn 클릭
+  const handleCreateStudy = () => {
+    // if (!isButtonEnabled) {
+    //   alert("그룹명, 카테고리, 제한 인원수를 모두 입력해야 합니다");
+    //   return;
+    // }
+
+    // modal open
+    openModal();
+
+    console.log("click");
+  };
+
   return (
     <Wrapper>
       <Container>
@@ -38,7 +79,7 @@ const StudyMake = () => {
           그룹명<span>*</span>
         </Title>
         <GroupNameContainer>
-          <GroupNameInput />
+          <GroupNameInput value={groupName} onChange={handleGroupName} />
           <ConfirmBtn onClick={handleCheckDuplicate}>중복 확인</ConfirmBtn>
         </GroupNameContainer>
         <GrouptNameText>사용 가능한 특수문자는 (_/-/@/.)입니다.</GrouptNameText>
@@ -54,7 +95,10 @@ const StudyMake = () => {
           그룹 카테고리<span>*</span>
         </Title>
         {/* select (front/back) */}
-        <SelectCategory />
+        <SelectCategory
+          selectedCategory={category}
+          onCategoryChange={handleCategory}
+        />
       </Container>
 
       <Container>
@@ -62,7 +106,10 @@ const StudyMake = () => {
           제한 인원수<span>*</span>
         </Title>
         {/* select (1~50) */}
-        <SelectPeople />
+        <SelectPeople
+          selectedLimit={peopleLimit}
+          onPeopleLimitChange={handlePeopleLimit}
+        />
       </Container>
 
       <Container>
@@ -100,7 +147,17 @@ const StudyMake = () => {
         )}
       </Container>
 
-      <MakeBtn>방 만들기</MakeBtn>
+      <MakeBtn onClick={handleCreateStudy}>방 만들기</MakeBtn>
+
+      {/* modal */}
+      <Modal style={{ width: "400px", height: "220px" }}>
+        <ModalContent>
+          <div>
+            <ModalBody>축하합니다! 스터디방이 만들어졌습니다.</ModalBody>
+          </div>
+          <Button>스터디방으로 이동하기</Button>
+        </ModalContent>
+      </Modal>
     </Wrapper>
   );
 };
@@ -248,3 +305,32 @@ const MakeBtn = styled.button`
   margin-top: 20px;
   margin-bottom: 50px;
 `;
+
+const ModalContent = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  margin-top: 60px;
+  font-size: 14px;
+  text-align: center;
+`;
+
+const ModalBody = styled.div`
+  margin-bottom: 20px;
+  color: #c7c7c7;
+  text-align: center;
+  margin-bottom: 30px;
+`;
+
+const Button = styled.button`
+  width: 301px;
+  height: 37px;
+  background-color: #5263ff;
+  font-size: 14px;
+  color: #ffffff;
+  border: none;
+  border-radius: 6px;
+  margin-top: 20px;
+`;