From cb7a7779473b6d924334c7421ec3929dd495cdc0 Mon Sep 17 00:00:00 2001
From: Yunseok <87839885+karpitony@users.noreply.github.com>
Date: Tue, 11 Feb 2025 14:36:00 +0900
Subject: [PATCH 01/10] =?UTF-8?q?feat:=20Union=20=EC=84=B9=EC=85=98=20?=
 =?UTF-8?q?=EA=B8=B0=EC=B4=88=20=ED=8B=80=20=EC=9E=A1=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Main/Union/ContentBox.tsx | 38 +++++++++++++++++++++++++++++
 src/pages/Main/Union/Union.tsx      | 34 +++++++++++++++++++++++---
 2 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/Main/Union/ContentBox.tsx

diff --git a/src/pages/Main/Union/ContentBox.tsx b/src/pages/Main/Union/ContentBox.tsx
new file mode 100644
index 0000000..d63ecb0
--- /dev/null
+++ b/src/pages/Main/Union/ContentBox.tsx
@@ -0,0 +1,38 @@
+import styled from "styled-components";
+
+export default function ContentBox() {
+  return (
+    <ContentBoxBorder>
+      <Content>
+      </Content>
+    </ContentBoxBorder>
+  );
+}
+
+const ContentBoxBorder = styled.div`
+  width: 700px;
+  height: 500px;
+  background: linear-gradient(
+    90deg,
+    var(--FarmSystem_Orange) 0%,
+    var(--FarmSystem_Green02) 100%
+  );
+  padding: 5px;
+  border-radius: 20px;
+  
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+const Content = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: var(--FarmSystem_White);
+  border-radius: 15px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
\ No newline at end of file
diff --git a/src/pages/Main/Union/Union.tsx b/src/pages/Main/Union/Union.tsx
index b67f0c2..8d4770d 100644
--- a/src/pages/Main/Union/Union.tsx
+++ b/src/pages/Main/Union/Union.tsx
@@ -1,7 +1,35 @@
+import styled from "styled-components";
+import ContentBox from "./ContentBox";
+
 export default function Union() {
   return (
-    <div>
-      <h2>Union Section</h2>
-    </div>
+    <section>
+      <Container>
+        <UnionText>Union</UnionText>
+        <ContentBox />
+      </Container>
+    </section>
   );
 }
+
+const Container = styled.section`
+  display: flex; 
+  flex-direction: column; 
+  justify-content: center; 
+  align-items: center; 
+  height: 1500px;
+`
+
+const UnionText = styled.h2`
+  width: 132px;
+  height: 57px;
+
+  text-align: center; 
+  color: var(--FarmSystem_Orange);
+  font-size: 48px;
+  font-weight: 700; 
+
+  margin-top: 70px;
+  margin-bottom: 50px;
+`
+

From 6e7a14d99ecd742f82b1b61063c0254da29ccfd5 Mon Sep 17 00:00:00 2001
From: Yunseok <87839885+karpitony@users.noreply.github.com>
Date: Tue, 11 Feb 2025 15:32:59 +0900
Subject: [PATCH 02/10] =?UTF-8?q?feat:=20Union=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=BD=98=ED=85=90=EC=B8=A0=20=EB=B0=95?=
 =?UTF-8?q?=EC=8A=A4=20=EC=A0=9C=EC=99=B8=ED=95=98=EA=B3=A0=20=EC=9A=94?=
 =?UTF-8?q?=EC=86=8C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Main/Union/Union.tsx | 67 ++++++++++++++++++++++++++++++++--
 1 file changed, 64 insertions(+), 3 deletions(-)

diff --git a/src/pages/Main/Union/Union.tsx b/src/pages/Main/Union/Union.tsx
index 8d4770d..908eeb4 100644
--- a/src/pages/Main/Union/Union.tsx
+++ b/src/pages/Main/Union/Union.tsx
@@ -5,7 +5,14 @@ export default function Union() {
   return (
     <section>
       <Container>
-        <UnionText>Union</UnionText>
+        <IntroduceText>
+          <p>신입생이라서</p>
+          <p>어떤 트랙을 선택할지 고민되나요?</p>
+        </IntroduceText>
+        <div>
+          <UnionText>Union</UnionText>
+          <NewBadge>New</NewBadge>
+        </div>
         <ContentBox />
       </Container>
     </section>
@@ -13,11 +20,39 @@ export default function Union() {
 }
 
 const Container = styled.section`
-  display: flex; 
+  display: flex;
   flex-direction: column; 
   justify-content: center; 
   align-items: center; 
   height: 1500px;
+
+  @media (max-width: 768px) {
+    padding: 20px; /* 모바일에서 여백 추가 */
+    height: auto;  /* 필요에 따라 높이를 자동으로 조정 */
+  }
+`
+
+const IntroduceText = styled.p`
+  width: 500px;  
+  height: 86px;
+
+  text-align: center; 
+  color: var(--FarmSystem_Black);
+  font-style: normal;
+  font-weight: 500;
+  font-size: 36px;
+  line-height: 43px;
+  
+  margin-bottom: 70px;
+
+  @media (max-width: 768px) {
+    width: 100%;  /* 화면에 맞게 폭 확장 */
+    font-size: 24px;
+    line-height: 32px;
+    margin-bottom: 50px;
+  }
+
+  
 `
 
 const UnionText = styled.h2`
@@ -29,7 +64,33 @@ const UnionText = styled.h2`
   font-size: 48px;
   font-weight: 700; 
 
-  margin-top: 70px;
   margin-bottom: 50px;
+
+  @media (max-width: 768px) {
+    width: auto;  /* 가로 제한 해제 */
+    font-size: 32px;
+    margin-bottom: 30px;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 24px;  /* 더 작은 화면에서는 폰트 크기 줄이기 */
+  }
 `
 
+const NewBadge = styled.div`  
+  width: 70px;
+  height: 25px;
+  background: var(--FarmSystem_Green02);
+  border-radius: 10px;
+
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 19px;
+  color: var(--FarmSystem_White);
+
+  display: flex;
+  align-items: center;
+  justify-content: center; 
+  text-align: center;
+`
\ No newline at end of file

From e2494d322c84abb369b8ba20a5b76c5b77032e96 Mon Sep 17 00:00:00 2001
From: Yunseok <87839885+karpitony@users.noreply.github.com>
Date: Tue, 11 Feb 2025 15:55:07 +0900
Subject: [PATCH 03/10] =?UTF-8?q?feat:=20New=20=EB=B1=83=EC=A7=80=EC=99=80?=
 =?UTF-8?q?=20=EC=9C=A0=EB=8B=88=EC=98=A8=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Main/Union/Union.tsx | 56 ++++++++++++++++++++++------------
 1 file changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/pages/Main/Union/Union.tsx b/src/pages/Main/Union/Union.tsx
index 908eeb4..9b23386 100644
--- a/src/pages/Main/Union/Union.tsx
+++ b/src/pages/Main/Union/Union.tsx
@@ -9,10 +9,10 @@ export default function Union() {
           <p>신입생이라서</p>
           <p>어떤 트랙을 선택할지 고민되나요?</p>
         </IntroduceText>
-        <div>
+        <UnionTextContainer>
           <UnionText>Union</UnionText>
           <NewBadge>New</NewBadge>
-        </div>
+        </UnionTextContainer>
         <ContentBox />
       </Container>
     </section>
@@ -25,12 +25,13 @@ const Container = styled.section`
   justify-content: center; 
   align-items: center; 
   height: 1500px;
+  user-select: none;
 
   @media (max-width: 768px) {
     padding: 20px; /* 모바일에서 여백 추가 */
     height: auto;  /* 필요에 따라 높이를 자동으로 조정 */
   }
-`
+`;
 
 const IntroduceText = styled.p`
   width: 500px;  
@@ -51,33 +52,44 @@ const IntroduceText = styled.p`
     line-height: 32px;
     margin-bottom: 50px;
   }
+`;
 
-  
-`
+/* 
+  이걸 그리드로 해결한 건 진짜 레전드 씽크빅이다... 
+  진짜 이걸 어떻게 떠올렸지?????
+*/
+const UnionTextContainer = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;  /* 4분할 */
+  justify-items: center;  /* 그리드 셀 내에서 중앙 정렬 */
+  align-items: center;
+  width: 280px;
+  margin-bottom: 50px;
 
-const UnionText = styled.h2`
-  width: 132px;
-  height: 57px;
+  @media (max-width: 768px) {
+    margin-bottom: 30px;
+    grid-template-columns: 1fr 2fr 1fr;  /* 모바일에서는 더 간결하게 조정 가능 */
+  }
+`;
 
-  text-align: center; 
+const UnionText = styled.h2`
+  grid-column: 2 / 4;  /* 두 번째에서 세 번째 그리드 셀을 차지 */
+  text-align: center;
   color: var(--FarmSystem_Orange);
   font-size: 48px;
-  font-weight: 700; 
-
-  margin-bottom: 50px;
+  font-weight: 700;
 
   @media (max-width: 768px) {
-    width: auto;  /* 가로 제한 해제 */
     font-size: 32px;
-    margin-bottom: 30px;
   }
 
   @media (max-width: 480px) {
-    font-size: 24px;  /* 더 작은 화면에서는 폰트 크기 줄이기 */
+    font-size: 24px;
   }
-`
+`;
 
-const NewBadge = styled.div`  
+const NewBadge = styled.div`
+  grid-column: 4 / 5;  /* 네 번째 그리드 셀에 배치 */
   width: 70px;
   height: 25px;
   background: var(--FarmSystem_Green02);
@@ -91,6 +103,12 @@ const NewBadge = styled.div`
 
   display: flex;
   align-items: center;
-  justify-content: center; 
+  justify-content: center;
   text-align: center;
-`
\ No newline at end of file
+
+  @media (max-width: 768px) {
+    font-size: 14px;
+    width: 60px;
+    height: 22px;
+  }
+`;
\ No newline at end of file

From ee91eea8148454c31302c963e779033bead2dd01 Mon Sep 17 00:00:00 2001
From: Yunseok <87839885+karpitony@users.noreply.github.com>
Date: Tue, 11 Feb 2025 16:16:18 +0900
Subject: [PATCH 04/10] =?UTF-8?q?feat:=20=EC=BD=98=ED=85=90=EC=B8=A0?=
 =?UTF-8?q?=EB=B0=95=EC=8A=A4=20=EB=B0=B0=EA=B2=BD=20Gradiant=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20+=20refactor:=20=EC=8A=A4=ED=83=80=EC=9D=BC?=
 =?UTF-8?q?=EB=93=9C=20=EB=94=B0=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Main/Union/ContentBox.styled.ts |  71 ++++++++++++++
 src/pages/Main/Union/ContentBox.tsx       |  45 +++------
 src/pages/Main/Union/Union.styled.ts      |  95 ++++++++++++++++++
 src/pages/Main/Union/Union.tsx            | 114 ++--------------------
 4 files changed, 188 insertions(+), 137 deletions(-)
 create mode 100644 src/pages/Main/Union/ContentBox.styled.ts
 create mode 100644 src/pages/Main/Union/Union.styled.ts

diff --git a/src/pages/Main/Union/ContentBox.styled.ts b/src/pages/Main/Union/ContentBox.styled.ts
new file mode 100644
index 0000000..bed672f
--- /dev/null
+++ b/src/pages/Main/Union/ContentBox.styled.ts
@@ -0,0 +1,71 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 100%
+  heigh: 500px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative
+
+`
+
+export const ContentBoxBorder = styled.div`
+  position: absolute;
+  top: 0px;
+
+  width: 700px;
+  height: 500px;
+  background: linear-gradient(
+    90deg,
+    var(--FarmSystem_Orange) 0%,
+    var(--FarmSystem_Green02) 100%
+  );
+  padding: 5px;
+  border-radius: 20px;
+  
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  z-index: 10;
+`;
+
+export const Content = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: var(--FarmSystem_White);
+  border-radius: 15px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const GradientContainer = styled.div`
+  position: absolute;
+  top: 0px;
+
+  height: 500px;
+  display: flex;  
+  gap: 80px; 
+  justify-content: center; 
+  align-items: center; 
+`
+
+export const GradientLeft = styled.div`
+  width: 560px;
+  height: 400px;
+  background: linear-gradient(270deg, var(--FarmSystem_Orange) 50%, var(--FarmSystem_White) 100%);
+  opacity: 0.5;
+  border-radius: 20px;
+`;
+
+export const GradientRight = styled.div`
+  width: 560px;
+  height: 400px;
+  background: linear-gradient(90deg, var(--FarmSystem_Green02) 50%, var(--FarmSystem_White) 100%);
+  opacity: 0.5;
+  border-radius: 20px;
+`;
\ No newline at end of file
diff --git a/src/pages/Main/Union/ContentBox.tsx b/src/pages/Main/Union/ContentBox.tsx
index d63ecb0..a1aeed0 100644
--- a/src/pages/Main/Union/ContentBox.tsx
+++ b/src/pages/Main/Union/ContentBox.tsx
@@ -1,38 +1,17 @@
-import styled from "styled-components";
+import * as S from './ContentBox.styled';
 
 export default function ContentBox() {
   return (
-    <ContentBoxBorder>
-      <Content>
-      </Content>
-    </ContentBoxBorder>
+    <S.Container>
+    <S.GradientContainer>
+      <S.GradientLeft />
+      <S.GradientRight />
+    </S.GradientContainer>
+    <S.ContentBoxBorder>
+      <S.Content>
+      </S.Content>
+    </S.ContentBoxBorder>
+    
+    </S.Container>
   );
 }
-
-const ContentBoxBorder = styled.div`
-  width: 700px;
-  height: 500px;
-  background: linear-gradient(
-    90deg,
-    var(--FarmSystem_Orange) 0%,
-    var(--FarmSystem_Green02) 100%
-  );
-  padding: 5px;
-  border-radius: 20px;
-  
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
-
-const Content = styled.div`
-  width: 100%;
-  height: 100%;
-  background-color: var(--FarmSystem_White);
-  border-radius: 15px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
\ No newline at end of file
diff --git a/src/pages/Main/Union/Union.styled.ts b/src/pages/Main/Union/Union.styled.ts
new file mode 100644
index 0000000..0851e6e
--- /dev/null
+++ b/src/pages/Main/Union/Union.styled.ts
@@ -0,0 +1,95 @@
+import styled from "styled-components";
+
+export const Container = styled.section`
+  display: flex;
+  flex-direction: column; 
+  justify-content: center; 
+  align-items: center; 
+  height: 1500px;
+  user-select: none;
+
+  @media (max-width: 768px) {
+    padding: 20px; /* 모바일에서 여백 추가 */
+    height: auto;  /* 필요에 따라 높이를 자동으로 조정 */
+  }
+`;
+
+export const IntroduceText = styled.p`
+  width: 500px;  
+  height: 86px;
+
+  text-align: center; 
+  color: var(--FarmSystem_Black);
+  font-style: normal;
+  font-weight: 500;
+  font-size: 36px;
+  line-height: 43px;
+  
+  margin-bottom: 70px;
+
+  @media (max-width: 768px) {
+    width: 100%;  /* 화면에 맞게 폭 확장 */
+    font-size: 24px;
+    line-height: 32px;
+    margin-bottom: 50px;
+  }
+`;
+
+/* 
+  이걸 그리드로 해결한 건 진짜 레전드 씽크빅이다... 
+  진짜 이걸 어떻게 떠올렸지?????
+*/
+export const UnionTextContainer = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;  /* 4분할 */
+  justify-items: center;  /* 그리드 셀 내에서 중앙 정렬 */
+  align-items: center;
+  width: 280px;
+  margin-bottom: 50px;
+
+  @media (max-width: 768px) {
+    margin-bottom: 30px;
+    grid-template-columns: 1fr 2fr 1fr;  /* 모바일에서는 더 간결하게 조정 가능 */
+  }
+`;
+
+export const UnionText = styled.h2`
+  grid-column: 2 / 4;  /* 두 번째에서 세 번째 그리드 셀을 차지 */
+  text-align: center;
+  color: var(--FarmSystem_Orange);
+  font-size: 48px;
+  font-weight: 700;
+
+  @media (max-width: 768px) {
+    font-size: 32px;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 24px;
+  }
+`;
+
+export const NewBadge = styled.div`
+  grid-column: 4 / 5;  /* 네 번째 그리드 셀에 배치 */
+  width: 70px;
+  height: 25px;
+  background: var(--FarmSystem_Green02);
+  border-radius: 10px;
+
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 19px;
+  color: var(--FarmSystem_White);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  @media (max-width: 768px) {
+    font-size: 14px;
+    width: 60px;
+    height: 22px;
+  }
+`;
\ No newline at end of file
diff --git a/src/pages/Main/Union/Union.tsx b/src/pages/Main/Union/Union.tsx
index 9b23386..26019f8 100644
--- a/src/pages/Main/Union/Union.tsx
+++ b/src/pages/Main/Union/Union.tsx
@@ -1,114 +1,20 @@
-import styled from "styled-components";
 import ContentBox from "./ContentBox";
+import * as S from './Union.styled';
 
 export default function Union() {
   return (
     <section>
-      <Container>
-        <IntroduceText>
+      <S.Container>
+        <S.IntroduceText>
           <p>신입생이라서</p>
           <p>어떤 트랙을 선택할지 고민되나요?</p>
-        </IntroduceText>
-        <UnionTextContainer>
-          <UnionText>Union</UnionText>
-          <NewBadge>New</NewBadge>
-        </UnionTextContainer>
+        </S.IntroduceText>
+        <S.UnionTextContainer>
+          <S.UnionText>Union</S.UnionText>
+          <S.NewBadge>New</S.NewBadge>
+        </S.UnionTextContainer>
         <ContentBox />
-      </Container>
+      </S.Container>
     </section>
   );
-}
-
-const Container = styled.section`
-  display: flex;
-  flex-direction: column; 
-  justify-content: center; 
-  align-items: center; 
-  height: 1500px;
-  user-select: none;
-
-  @media (max-width: 768px) {
-    padding: 20px; /* 모바일에서 여백 추가 */
-    height: auto;  /* 필요에 따라 높이를 자동으로 조정 */
-  }
-`;
-
-const IntroduceText = styled.p`
-  width: 500px;  
-  height: 86px;
-
-  text-align: center; 
-  color: var(--FarmSystem_Black);
-  font-style: normal;
-  font-weight: 500;
-  font-size: 36px;
-  line-height: 43px;
-  
-  margin-bottom: 70px;
-
-  @media (max-width: 768px) {
-    width: 100%;  /* 화면에 맞게 폭 확장 */
-    font-size: 24px;
-    line-height: 32px;
-    margin-bottom: 50px;
-  }
-`;
-
-/* 
-  이걸 그리드로 해결한 건 진짜 레전드 씽크빅이다... 
-  진짜 이걸 어떻게 떠올렸지?????
-*/
-const UnionTextContainer = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;  /* 4분할 */
-  justify-items: center;  /* 그리드 셀 내에서 중앙 정렬 */
-  align-items: center;
-  width: 280px;
-  margin-bottom: 50px;
-
-  @media (max-width: 768px) {
-    margin-bottom: 30px;
-    grid-template-columns: 1fr 2fr 1fr;  /* 모바일에서는 더 간결하게 조정 가능 */
-  }
-`;
-
-const UnionText = styled.h2`
-  grid-column: 2 / 4;  /* 두 번째에서 세 번째 그리드 셀을 차지 */
-  text-align: center;
-  color: var(--FarmSystem_Orange);
-  font-size: 48px;
-  font-weight: 700;
-
-  @media (max-width: 768px) {
-    font-size: 32px;
-  }
-
-  @media (max-width: 480px) {
-    font-size: 24px;
-  }
-`;
-
-const NewBadge = styled.div`
-  grid-column: 4 / 5;  /* 네 번째 그리드 셀에 배치 */
-  width: 70px;
-  height: 25px;
-  background: var(--FarmSystem_Green02);
-  border-radius: 10px;
-
-  font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 19px;
-  color: var(--FarmSystem_White);
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-
-  @media (max-width: 768px) {
-    font-size: 14px;
-    width: 60px;
-    height: 22px;
-  }
-`;
\ No newline at end of file
+};

From 9533c2c8fbc11d6fd83204c70ecfb3a1f549c680 Mon Sep 17 00:00:00 2001
From: Yunseok <87839885+karpitony@users.noreply.github.com>
Date: Tue, 11 Feb 2025 16:43:03 +0900
Subject: [PATCH 05/10] =?UTF-8?q?fix:=20=EC=98=A4=ED=83=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20+=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EC=A4=91=EC=95=99=20=EC=A0=95=EB=A0=AC=EB=90=98=EA=B2=8C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Main/Union/ContentBox.styled.ts |  6 +++---
 src/pages/Main/Union/ContentBox.tsx       | 17 ++++++++--------
 src/pages/Main/Union/Union.tsx            | 24 +++++++++++------------
 3 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/pages/Main/Union/ContentBox.styled.ts b/src/pages/Main/Union/ContentBox.styled.ts
index bed672f..9daa89c 100644
--- a/src/pages/Main/Union/ContentBox.styled.ts
+++ b/src/pages/Main/Union/ContentBox.styled.ts
@@ -1,13 +1,13 @@
 import styled from "styled-components";
 
 export const Container = styled.div`
-  width: 100%
-  heigh: 500px;
+  width: 100%;
+  height: 500px;
   display: flex;
   justify-content: center;
   align-items: center;
-  position: relative
 
+  position: relative;
 `
 
 export const ContentBoxBorder = styled.div`
diff --git a/src/pages/Main/Union/ContentBox.tsx b/src/pages/Main/Union/ContentBox.tsx
index a1aeed0..46ed33d 100644
--- a/src/pages/Main/Union/ContentBox.tsx
+++ b/src/pages/Main/Union/ContentBox.tsx
@@ -3,15 +3,14 @@ import * as S from './ContentBox.styled';
 export default function ContentBox() {
   return (
     <S.Container>
-    <S.GradientContainer>
-      <S.GradientLeft />
-      <S.GradientRight />
-    </S.GradientContainer>
-    <S.ContentBoxBorder>
-      <S.Content>
-      </S.Content>
-    </S.ContentBoxBorder>
-    
+      <S.GradientContainer>
+        <S.GradientLeft />
+        <S.GradientRight />
+      </S.GradientContainer>
+      <S.ContentBoxBorder>
+        <S.Content>
+        </S.Content>
+      </S.ContentBoxBorder>
     </S.Container>
   );
 }
diff --git a/src/pages/Main/Union/Union.tsx b/src/pages/Main/Union/Union.tsx
index 26019f8..82ded83 100644
--- a/src/pages/Main/Union/Union.tsx
+++ b/src/pages/Main/Union/Union.tsx
@@ -3,18 +3,16 @@ import * as S from './Union.styled';
 
 export default function Union() {
   return (
-    <section>
-      <S.Container>
-        <S.IntroduceText>
-          <p>신입생이라서</p>
-          <p>어떤 트랙을 선택할지 고민되나요?</p>
-        </S.IntroduceText>
-        <S.UnionTextContainer>
-          <S.UnionText>Union</S.UnionText>
-          <S.NewBadge>New</S.NewBadge>
-        </S.UnionTextContainer>
-        <ContentBox />
-      </S.Container>
-    </section>
+    <S.Container>
+      <S.IntroduceText>
+        <p>신입생이라서</p>
+        <p>어떤 트랙을 선택할지 고민되나요?</p>
+      </S.IntroduceText>
+      <S.UnionTextContainer>
+        <S.UnionText>Union</S.UnionText>
+        <S.NewBadge>New</S.NewBadge>
+      </S.UnionTextContainer>
+      <ContentBox />
+    </S.Container>
   );
 };

From 80defd9eacac5c59f1b5ed8c86a32967b4608df5 Mon Sep 17 00:00:00 2001
From: Yunseok <87839885+karpitony@users.noreply.github.com>
Date: Tue, 11 Feb 2025 20:27:33 +0900
Subject: [PATCH 06/10] =?UTF-8?q?feat:=20Union=20=EC=84=A4=EB=AA=85=20?=
 =?UTF-8?q?=EB=82=B4=EC=9A=A9=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Main/Union/ContentBox.styled.ts | 22 ++++++++++++++++++++++
 src/pages/Main/Union/ContentBox.tsx       |  8 ++++++++
 2 files changed, 30 insertions(+)

diff --git a/src/pages/Main/Union/ContentBox.styled.ts b/src/pages/Main/Union/ContentBox.styled.ts
index 9daa89c..b42cbf7 100644
--- a/src/pages/Main/Union/ContentBox.styled.ts
+++ b/src/pages/Main/Union/ContentBox.styled.ts
@@ -39,10 +39,32 @@ export const Content = styled.div`
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
 `;
 
+export const ContentInfoTextBox = styled.div`
+  width: 600px;
+  height: 210px;
+ 
+  color: var(--FarmSystem_Black);
+  font-style: normal;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 35px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+`
+
+export const HighlightOrange = styled.span`
+  font-weight: 700;
+  color: var(--FarmSystem_Orange)
+`
+
 export const GradientContainer = styled.div`
   position: absolute;
   top: 0px;
diff --git a/src/pages/Main/Union/ContentBox.tsx b/src/pages/Main/Union/ContentBox.tsx
index 46ed33d..eea3414 100644
--- a/src/pages/Main/Union/ContentBox.tsx
+++ b/src/pages/Main/Union/ContentBox.tsx
@@ -9,6 +9,14 @@ export default function ContentBox() {
       </S.GradientContainer>
       <S.ContentBoxBorder>
         <S.Content>
+          <S.ContentInfoTextBox>
+            <p><S.HighlightOrange>Union</S.HighlightOrange>은</p>
+            <p>SW/AI 기초 역량을 다지기 위한 과정으로,</p>
+            <p>트랙 구분 없이 다섯 가지 트랙의 다양한 주제에 대한</p>
+            <p>SW 기본 역량을 다집니다.</p>
+            <p>각 트랙의 멘토가 제공하는 프로젝트와 스터디에</p>
+            <p>멘티로서 참여하게 됩니다.</p>
+          </S.ContentInfoTextBox>
         </S.Content>
       </S.ContentBoxBorder>
     </S.Container>

From 88a680b5c1418e3f33af821cfb9d6658366a6675 Mon Sep 17 00:00:00 2001
From: Yunseok <87839885+karpitony@users.noreply.github.com>
Date: Tue, 11 Feb 2025 21:00:10 +0900
Subject: [PATCH 07/10] =?UTF-8?q?feat:=20=ED=95=9C=20=ED=95=99=EA=B8=B0=20?=
 =?UTF-8?q?=ED=99=9C=EB=8F=99=20=EB=82=B4=EC=9A=A9=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?+=20=EC=95=BD=EA=B0=84=EC=9D=98=20=EB=AF=B8=EB=94=94=EC=96=B4?=
 =?UTF-8?q?=EC=BF=BC=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Main/Union/ContentBox.styled.ts | 135 ++++++++++++++++++----
 src/pages/Main/Union/ContentBox.tsx       |   7 ++
 2 files changed, 121 insertions(+), 21 deletions(-)

diff --git a/src/pages/Main/Union/ContentBox.styled.ts b/src/pages/Main/Union/ContentBox.styled.ts
index b42cbf7..6692e20 100644
--- a/src/pages/Main/Union/ContentBox.styled.ts
+++ b/src/pages/Main/Union/ContentBox.styled.ts
@@ -6,14 +6,17 @@ export const Container = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-
   position: relative;
-`
+
+  @media (max-width: 768px) {
+    height: auto;
+    padding: 20px 0;
+  }
+`;
 
 export const ContentBoxBorder = styled.div`
   position: absolute;
-  top: 0px;
-
+  top: 0;
   width: 700px;
   height: 500px;
   background: linear-gradient(
@@ -23,12 +26,17 @@ export const ContentBoxBorder = styled.div`
   );
   padding: 5px;
   border-radius: 20px;
-  
   display: flex;
   justify-content: center;
   align-items: center;
-
   z-index: 10;
+
+  @media (max-width: 768px) {
+    position: relative;
+    width: 90%;
+    height: auto;
+    margin: 0 auto;
+  }
 `;
 
 export const Content = styled.div`
@@ -47,47 +55,132 @@ export const Content = styled.div`
 export const ContentInfoTextBox = styled.div`
   width: 600px;
   height: 210px;
- 
   color: var(--FarmSystem_Black);
   font-style: normal;
   font-weight: 500;
   font-size: 24px;
   line-height: 35px;
-
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
-`
+  margin-bottom: 35px;
+
+  @media (max-width: 768px) {
+    width: 90%;
+    height: auto;
+    font-size: 20px;
+    line-height: 30px;
+  }
+`;
 
 export const HighlightOrange = styled.span`
   font-weight: 700;
-  color: var(--FarmSystem_Orange)
-`
+  color: var(--FarmSystem_Orange);
+`;
+
+export const ActivityTitle = styled.h3`
+  width: 149px;
+  height: 38px;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 35px;
+  color: var(--FarmSystem_Green01);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin-bottom: 17px;
+
+  @media (max-width: 768px) {
+    width: auto;
+    font-size: 20px;
+    line-height: 30px;
+  }
+`;
+
+export const ActivityList = styled.ul`
+  width: 577px;
+  height: 80px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  align-content: flex-start;
+  padding: 0;
+  gap: 10px 20px;
+  list-style-type: disc;
+
+  @media (max-width: 768px) {
+    width: 90%;
+    height: auto;
+    justify-content: center;
+  }
+`;
+
+export const Li = styled.li`
+  height: 35px;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 35px;
+  color: var(--FarmSystem_Black);
+  list-style-type: disc;
+  list-style-position: outside;
+  margin-left: 40px;
+  text-align: center;
+
+  @media (max-width: 768px) {
+    margin-left: 20px;
+    font-size: 20px;
+    line-height: 30px;
+  }
+`;
 
 export const GradientContainer = styled.div`
   position: absolute;
-  top: 0px;
-
+  top: 0;
   height: 500px;
-  display: flex;  
-  gap: 80px; 
-  justify-content: center; 
-  align-items: center; 
-`
+  display: flex;
+  gap: 80px;
+  justify-content: center;
+  align-items: center;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
 
 export const GradientLeft = styled.div`
   width: 560px;
   height: 400px;
-  background: linear-gradient(270deg, var(--FarmSystem_Orange) 50%, var(--FarmSystem_White) 100%);
+  background: linear-gradient(
+    270deg,
+    var(--FarmSystem_Orange) 50%,
+    var(--FarmSystem_White) 100%
+  );
   opacity: 0.5;
   border-radius: 20px;
+
+  @media (max-width: 768px) {
+    width: 300px;
+    height: 250px;
+  }
 `;
 
 export const GradientRight = styled.div`
   width: 560px;
   height: 400px;
-  background: linear-gradient(90deg, var(--FarmSystem_Green02) 50%, var(--FarmSystem_White) 100%);
+  background: linear-gradient(
+    90deg,
+    var(--FarmSystem_Green02) 50%,
+    var(--FarmSystem_White) 100%
+  );
   opacity: 0.5;
   border-radius: 20px;
-`;
\ No newline at end of file
+
+  @media (max-width: 768px) {
+    width: 300px;
+    height: 250px;
+  }
+`;
diff --git a/src/pages/Main/Union/ContentBox.tsx b/src/pages/Main/Union/ContentBox.tsx
index eea3414..ae08686 100644
--- a/src/pages/Main/Union/ContentBox.tsx
+++ b/src/pages/Main/Union/ContentBox.tsx
@@ -17,6 +17,13 @@ export default function ContentBox() {
             <p>각 트랙의 멘토가 제공하는 프로젝트와 스터디에</p>
             <p>멘티로서 참여하게 됩니다.</p>
           </S.ContentInfoTextBox>
+          <S.ActivityTitle>한 학기 활동</S.ActivityTitle>
+          <S.ActivityList>
+            <S.Li>월별 기술 블로그</S.Li>
+            <S.Li>Farm System 아이디어톤 참가</S.Li>
+            <S.Li>스터디 정기 모임</S.Li>
+            <S.Li>트랙 멘토-멘티 프로그램</S.Li>
+          </S.ActivityList>
         </S.Content>
       </S.ContentBoxBorder>
     </S.Container>

From 89b7bdd5bf41c8346ef83b97815fe412edf05fc8 Mon Sep 17 00:00:00 2001
From: Yunseok <87839885+karpitony@users.noreply.github.com>
Date: Tue, 11 Feb 2025 21:13:48 +0900
Subject: [PATCH 08/10] =?UTF-8?q?feat:=20=EB=AF=B8=EB=94=94=EC=96=B4=20?=
 =?UTF-8?q?=EC=BF=BC=EB=A6=AC=20=EC=A1=B0=EC=A0=95=20=EB=B0=8F=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=84=B8=EB=B6=80=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Main/Union/ContentBox.styled.ts | 21 ++++++++++++++++++---
 src/pages/Main/Union/Union.styled.ts      | 19 +++++++++----------
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/pages/Main/Union/ContentBox.styled.ts b/src/pages/Main/Union/ContentBox.styled.ts
index 6692e20..1f44ff5 100644
--- a/src/pages/Main/Union/ContentBox.styled.ts
+++ b/src/pages/Main/Union/ContentBox.styled.ts
@@ -30,6 +30,7 @@ export const ContentBoxBorder = styled.div`
   justify-content: center;
   align-items: center;
   z-index: 10;
+  margin: 0 auto;
 
   @media (max-width: 768px) {
     position: relative;
@@ -71,6 +72,9 @@ export const ContentInfoTextBox = styled.div`
     height: auto;
     font-size: 20px;
     line-height: 30px;
+
+    padding-top: 20px;
+    padding-bottom: 20px;
   }
 `;
 
@@ -94,8 +98,9 @@ export const ActivityTitle = styled.h3`
 
   @media (max-width: 768px) {
     width: auto;
-    font-size: 20px;
+    font-size: 22px;
     line-height: 30px;
+    margin-bottom: 7px;
   }
 `;
 
@@ -107,7 +112,6 @@ export const ActivityList = styled.ul`
   flex-wrap: wrap;
   align-items: flex-end;
   align-content: flex-start;
-  padding: 0;
   gap: 10px 20px;
   list-style-type: disc;
 
@@ -115,25 +119,36 @@ export const ActivityList = styled.ul`
     width: 90%;
     height: auto;
     justify-content: center;
+    gap: 1px 10px;
   }
 `;
 
 export const Li = styled.li`
   height: 35px;
+
   font-style: normal;
   font-weight: 500;
   font-size: 24px;
   line-height: 35px;
   color: var(--FarmSystem_Black);
+  
   list-style-type: disc;
   list-style-position: outside;
   margin-left: 40px;
   text-align: center;
 
   @media (max-width: 768px) {
-    margin-left: 20px;
     font-size: 20px;
     line-height: 30px;
+    margin-left: 20px;
+  }
+
+  @media (max-width: 385px) {
+    font-size: 18px;
+    line-height: 30px;
+    margin-left: 0px;
+    list-style-type: none;
+    list-style-position: none;
   }
 `;
 
diff --git a/src/pages/Main/Union/Union.styled.ts b/src/pages/Main/Union/Union.styled.ts
index 0851e6e..39f55b3 100644
--- a/src/pages/Main/Union/Union.styled.ts
+++ b/src/pages/Main/Union/Union.styled.ts
@@ -9,8 +9,8 @@ export const Container = styled.section`
   user-select: none;
 
   @media (max-width: 768px) {
-    padding: 20px; /* 모바일에서 여백 추가 */
-    height: auto;  /* 필요에 따라 높이를 자동으로 조정 */
+    padding: 5px; /* 모바일에서 여백 추가 */
+    height: 1000px;
   }
 `;
 
@@ -43,13 +43,14 @@ export const UnionTextContainer = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;  /* 4분할 */
   justify-items: center;  /* 그리드 셀 내에서 중앙 정렬 */
-  align-items: center;
-  width: 280px;
+  align-items: top;
+  width: 300px;
   margin-bottom: 50px;
 
   @media (max-width: 768px) {
     margin-bottom: 30px;
-    grid-template-columns: 1fr 2fr 1fr;  /* 모바일에서는 더 간결하게 조정 가능 */
+    grid-template-columns: 1fr 2fr 1fr;  
+    width: 220px;
   }
 `;
 
@@ -60,12 +61,8 @@ export const UnionText = styled.h2`
   font-size: 48px;
   font-weight: 700;
 
-  @media (max-width: 768px) {
-    font-size: 32px;
-  }
-
   @media (max-width: 480px) {
-    font-size: 24px;
+    font-size: 40px;
   }
 `;
 
@@ -87,6 +84,8 @@ export const NewBadge = styled.div`
   justify-content: center;
   text-align: center;
 
+  margin-top: 10px;
+
   @media (max-width: 768px) {
     font-size: 14px;
     width: 60px;

From 352320e21fecc7f7ab0323b279738b3701197636 Mon Sep 17 00:00:00 2001
From: Yunseok <watemark1017@gmail.com>
Date: Wed, 12 Feb 2025 12:34:01 +0900
Subject: [PATCH 09/10] =?UTF-8?q?feat:=20=EB=AF=B8=EB=94=94=EC=96=B4?=
 =?UTF-8?q?=EC=BF=BC=EB=A6=AC=20=EC=BB=A4=EC=8A=A4=ED=85=80=ED=9B=85=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json            | 72 ++++++++++++++++++++++++++++++++++++
 package.json                 |  1 +
 src/hooks/.gitkeep           |  0
 src/hooks/useMediaQueries.ts | 15 ++++++++
 4 files changed, 88 insertions(+)
 delete mode 100644 src/hooks/.gitkeep
 create mode 100644 src/hooks/useMediaQueries.ts

diff --git a/package-lock.json b/package-lock.json
index 8a5ccf7..48a4df9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "axios": "^1.7.9",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-responsive": "^10.0.0",
         "react-router": "^7.1.5",
         "styled-components": "^6.1.15",
         "zustand": "^5.0.3"
@@ -1953,6 +1954,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==",
+      "license": "BSD"
+    },
     "node_modules/css-to-react-native": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
@@ -2479,6 +2486,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz",
+      "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2691,6 +2704,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/matchmediaquery": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.4.2.tgz",
+      "integrity": "sha512-wrZpoT50ehYOudhDjt/YvUJc6eUzcdFPdmbizfgvswCKNHD1/OBOHYJpHie+HXpu6bSkEGieFMYk6VuutaiRfA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-mediaquery": "^0.1.2"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2788,6 +2810,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -2935,6 +2966,17 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -2997,6 +3039,12 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -3007,6 +3055,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-responsive": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-10.0.0.tgz",
+      "integrity": "sha512-N6/UiRLGQyGUqrarhBZmrSmHi2FXSD++N5VbSKsBBvWfG0ZV7asvUBluSv5lSzdMyEVjzZ6Y8DL4OHABiztDOg==",
+      "license": "MIT",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.4.2",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-router": {
       "version": "7.1.5",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.5.tgz",
@@ -3140,6 +3206,12 @@
       "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
       "license": "MIT"
     },
+    "node_modules/shallow-equal": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-3.1.0.tgz",
+      "integrity": "sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg==",
+      "license": "MIT"
+    },
     "node_modules/shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
diff --git a/package.json b/package.json
index 6ee0811..640eb7e 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "axios": "^1.7.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-responsive": "^10.0.0",
     "react-router": "^7.1.5",
     "styled-components": "^6.1.15",
     "zustand": "^5.0.3"
diff --git a/src/hooks/.gitkeep b/src/hooks/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/hooks/useMediaQueries.ts b/src/hooks/useMediaQueries.ts
new file mode 100644
index 0000000..2b0aa8d
--- /dev/null
+++ b/src/hooks/useMediaQueries.ts
@@ -0,0 +1,15 @@
+import { useMediaQuery } from "react-responsive";
+
+const useMediaQueries = () => {
+  const isMobile = useMediaQuery({ query: "(max-width: 767px)" });
+  const isTablet = useMediaQuery({
+    query: "(min-width: 768px) and (max-width: 1023px)",
+  });
+  const isDesktop = useMediaQuery({
+    query: "(min-width: 1024px)" 
+  });
+
+  return { isMobile, isTablet, isDesktop };
+};
+
+export default useMediaQueries;
\ No newline at end of file

From 33ecf3a7eff8df7d03eb79bd88315c2c7e01ecc2 Mon Sep 17 00:00:00 2001
From: Yunseok <87839885+karpitony@users.noreply.github.com>
Date: Wed, 12 Feb 2025 13:10:40 +0900
Subject: [PATCH 10/10] =?UTF-8?q?refactor:=20=EB=AF=B8=EB=94=94=EC=96=B4?=
 =?UTF-8?q?=20=EC=BF=BC=EB=A6=AC=20=EC=BB=A4=EC=8A=A4=ED=85=80=ED=9B=85?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useMediaQueries.ts              |   7 +-
 src/pages/Main/Union/ContentBox.styled.ts | 172 +++++++++-------------
 src/pages/Main/Union/ContentBox.tsx       |  43 ++++--
 src/pages/Main/Union/Union.styled.ts      |  89 ++++-------
 src/pages/Main/Union/Union.tsx            |  13 +-
 5 files changed, 145 insertions(+), 179 deletions(-)

diff --git a/src/hooks/useMediaQueries.ts b/src/hooks/useMediaQueries.ts
index 2b0aa8d..646036b 100644
--- a/src/hooks/useMediaQueries.ts
+++ b/src/hooks/useMediaQueries.ts
@@ -1,6 +1,11 @@
 import { useMediaQuery } from "react-responsive";
 
 const useMediaQueries = () => {
+  /* 
+   * Union 작업중 콘텐츠 박스에서 767보다 더 작은 크기 조절이 필요해서 isTiny를 추가했습니다.
+   * 반응형 작업하실 때 한번더 봐주시고 고쳐주시면 좋을거 같습니다. 
+  */
+  const isTiny = useMediaQuery({ query: "(max-width: 385px)" })
   const isMobile = useMediaQuery({ query: "(max-width: 767px)" });
   const isTablet = useMediaQuery({
     query: "(min-width: 768px) and (max-width: 1023px)",
@@ -9,7 +14,7 @@ const useMediaQueries = () => {
     query: "(min-width: 1024px)" 
   });
 
-  return { isMobile, isTablet, isDesktop };
+  return { isTiny, isMobile, isTablet, isDesktop };
 };
 
 export default useMediaQueries;
\ No newline at end of file
diff --git a/src/pages/Main/Union/ContentBox.styled.ts b/src/pages/Main/Union/ContentBox.styled.ts
index 1f44ff5..421377d 100644
--- a/src/pages/Main/Union/ContentBox.styled.ts
+++ b/src/pages/Main/Union/ContentBox.styled.ts
@@ -1,24 +1,24 @@
 import styled from "styled-components";
 
-export const Container = styled.div`
+export const Container = styled.div<{ $isMobile: boolean }>`
   width: 100%;
-  height: 500px;
+  height: ${(props) => (props.$isMobile ? "auto" : "500px")};
+
   display: flex;
   justify-content: center;
   align-items: center;
-  position: relative;
 
-  @media (max-width: 768px) {
-    height: auto;
-    padding: 20px 0;
-  }
+  position: relative;
+  padding: ${(props) => (props.$isMobile ? "20px 0" : "0")};
 `;
 
-export const ContentBoxBorder = styled.div`
-  position: absolute;
+// 테두리에 Gradient가 안돼서 박스 두개를 겹쳐서 테두리 Gradient를 만들었습니다.
+export const ContentBoxBorder = styled.div<{ $isMobile: boolean }>`
+  position: ${(props) => (props.$isMobile ? "relative" : "absolute")};
   top: 0;
-  width: 700px;
-  height: 500px;
+  width: ${(props) => (props.$isMobile ? "90%" : "700px")};
+  height: ${(props) => (props.$isMobile ? "auto" : "500px")};
+
   background: linear-gradient(
     90deg,
     var(--FarmSystem_Orange) 0%,
@@ -26,23 +26,18 @@ export const ContentBoxBorder = styled.div`
   );
   padding: 5px;
   border-radius: 20px;
+
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 10;
   margin: 0 auto;
-
-  @media (max-width: 768px) {
-    position: relative;
-    width: 90%;
-    height: auto;
-    margin: 0 auto;
-  }
 `;
 
 export const Content = styled.div`
   width: 100%;
   height: 100%;
+
   background-color: var(--FarmSystem_White);
   border-radius: 15px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -53,29 +48,24 @@ export const Content = styled.div`
   align-items: center;
 `;
 
-export const ContentInfoTextBox = styled.div`
-  width: 600px;
-  height: 210px;
+export const ContentInfoTextBox = styled.div<{ $isMobile: boolean }>`
+  width: ${(props) => (props.$isMobile ? "90%" : "600px")};
+  height: ${(props) => (props.$isMobile ? "auto" : "210px")};
+
   color: var(--FarmSystem_Black);
   font-style: normal;
   font-weight: 500;
-  font-size: 24px;
-  line-height: 35px;
+  font-size: ${(props) => (props.$isMobile ? "20px" : "24px")};
+  line-height: ${(props) => (props.$isMobile ? "30px" : "35px")};
+  
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
-  margin-bottom: 35px;
-
-  @media (max-width: 768px) {
-    width: 90%;
-    height: auto;
-    font-size: 20px;
-    line-height: 30px;
 
-    padding-top: 20px;
-    padding-bottom: 20px;
-  }
+  margin-bottom: 35px;
+  padding-top: ${(props) => (props.$isMobile ? "20px" : "0")};
+  padding-bottom: ${(props) => (props.$isMobile ? "20px" : "0")};
 `;
 
 export const HighlightOrange = styled.span`
@@ -83,92 +73,83 @@ export const HighlightOrange = styled.span`
   color: var(--FarmSystem_Orange);
 `;
 
-export const ActivityTitle = styled.h3`
-  width: 149px;
-  height: 38px;
+export const ActivityTitle = styled.h3<{ $isMobile: boolean }>`
+  width: ${(props) => (props.$isMobile ? "auto" : "149px")};
+  height: ${(props) => (props.$isMobile ? "auto" : "38px")};
+
   font-weight: 700;
-  font-size: 24px;
-  line-height: 35px;
+  font-size: ${(props) => (props.$isMobile ? "22px" : "24px")};
+  line-height: ${(props) => (props.$isMobile ? "30px" : "35px")};
   color: var(--FarmSystem_Green01);
+
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
-  margin-bottom: 17px;
-
-  @media (max-width: 768px) {
-    width: auto;
-    font-size: 22px;
-    line-height: 30px;
-    margin-bottom: 7px;
-  }
+
+  margin-bottom: ${(props) => (props.$isMobile ? "7px" : "17px")};
 `;
 
-export const ActivityList = styled.ul`
-  width: 577px;
-  height: 80px;
+export const ActivityList = styled.ul<{ $isMobile: boolean }>`
+  width: ${(props) => (props.$isMobile ? "90%" : "577px")};
+  height: ${(props) => (props.$isMobile ? "auto" : "80px")};
+
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-end;
   align-content: flex-start;
-  gap: 10px 20px;
-  list-style-type: disc;
 
-  @media (max-width: 768px) {
-    width: 90%;
-    height: auto;
-    justify-content: center;
-    gap: 1px 10px;
-  }
+  gap: ${(props) => (props.$isMobile ? "1px 10px" : "10px 20px")};
+  list-style-type: disc;
+  justify-content: ${(props) => (props.$isMobile ? "center" : "initial")};
 `;
 
-export const Li = styled.li`
+export const Li = styled.li<{
+  $isMobile: boolean;
+  $isTiny?: boolean;
+}>`
   height: 35px;
 
   font-style: normal;
   font-weight: 500;
-  font-size: 24px;
-  line-height: 35px;
+  font-size: ${(props) =>
+    props.$isMobile
+      ? props.$isTiny
+        ? "18px"
+        : "20px"
+      : "24px"};
+  line-height: ${(props) => (props.$isMobile ? "30px" : "35px")};
   color: var(--FarmSystem_Black);
-  
-  list-style-type: disc;
-  list-style-position: outside;
-  margin-left: 40px;
-  text-align: center;
 
-  @media (max-width: 768px) {
-    font-size: 20px;
-    line-height: 30px;
-    margin-left: 20px;
-  }
-
-  @media (max-width: 385px) {
-    font-size: 18px;
-    line-height: 30px;
-    margin-left: 0px;
-    list-style-type: none;
-    list-style-position: none;
-  }
+  list-style-type: ${(props) =>
+    props.$isMobile && props.$isTiny ? "none" : "disc"};
+  list-style-position: ${(props) =>
+    props.$isMobile && props.$isTiny ? "none" : "outside"};
+  margin-left: ${(props) =>
+    props.$isMobile
+      ? props.$isTiny
+        ? "0px"
+        : "20px"
+      : "40px"};
+  text-align: center;
 `;
 
-export const GradientContainer = styled.div`
+export const GradientContainer = styled.div<{ $isMobile: boolean }>`
   position: absolute;
   top: 0;
   height: 500px;
-  display: flex;
+  // 배경 Gradient를 모바일에서도 보이게 하려면 이 부분 고쳐주시면 됩니다!
+  display: ${(props) => (props.$isMobile ? "none" : "flex")};
   gap: 80px;
   justify-content: center;
   align-items: center;
-
-  @media (max-width: 768px) {
-    display: none;
-  }
 `;
 
-export const GradientLeft = styled.div`
-  width: 560px;
-  height: 400px;
+export const GradientLeft = styled.div<{ $isMobile: boolean }>`
+  width: ${(props) => (props.$isMobile ? "300px" : "560px")};
+  height: ${(props) => (props.$isMobile ? "250px" : "400px")};
+
   background: linear-gradient(
     270deg,
     var(--FarmSystem_Orange) 50%,
@@ -176,16 +157,12 @@ export const GradientLeft = styled.div`
   );
   opacity: 0.5;
   border-radius: 20px;
-
-  @media (max-width: 768px) {
-    width: 300px;
-    height: 250px;
-  }
 `;
 
-export const GradientRight = styled.div`
-  width: 560px;
-  height: 400px;
+export const GradientRight = styled.div<{ $isMobile: boolean }>`
+  width: ${(props) => (props.$isMobile ? "300px" : "560px")};
+  height: ${(props) => (props.$isMobile ? "250px" : "400px")};
+  
   background: linear-gradient(
     90deg,
     var(--FarmSystem_Green02) 50%,
@@ -193,9 +170,4 @@ export const GradientRight = styled.div`
   );
   opacity: 0.5;
   border-radius: 20px;
-
-  @media (max-width: 768px) {
-    width: 300px;
-    height: 250px;
-  }
 `;
diff --git a/src/pages/Main/Union/ContentBox.tsx b/src/pages/Main/Union/ContentBox.tsx
index ae08686..46f801a 100644
--- a/src/pages/Main/Union/ContentBox.tsx
+++ b/src/pages/Main/Union/ContentBox.tsx
@@ -1,28 +1,43 @@
-import * as S from './ContentBox.styled';
+import * as S from "./ContentBox.styled";
+import useMediaQueries from "@/hooks/useMediaQueries";
 
 export default function ContentBox() {
+  const { isTiny, isMobile } = useMediaQueries();
+
   return (
-    <S.Container>
-      <S.GradientContainer>
-        <S.GradientLeft />
-        <S.GradientRight />
+    <S.Container $isMobile={isMobile}>
+      <S.GradientContainer $isMobile={isMobile}>
+        <S.GradientLeft $isMobile={isMobile} />
+        <S.GradientRight $isMobile={isMobile} />
       </S.GradientContainer>
-      <S.ContentBoxBorder>
+      <S.ContentBoxBorder $isMobile={isMobile}>
         <S.Content>
-          <S.ContentInfoTextBox>
-            <p><S.HighlightOrange>Union</S.HighlightOrange>은</p>
+          <S.ContentInfoTextBox $isMobile={isMobile}>
+            <p>
+              <S.HighlightOrange>Union</S.HighlightOrange>은
+            </p>
             <p>SW/AI 기초 역량을 다지기 위한 과정으로,</p>
             <p>트랙 구분 없이 다섯 가지 트랙의 다양한 주제에 대한</p>
             <p>SW 기본 역량을 다집니다.</p>
             <p>각 트랙의 멘토가 제공하는 프로젝트와 스터디에</p>
             <p>멘티로서 참여하게 됩니다.</p>
           </S.ContentInfoTextBox>
-          <S.ActivityTitle>한 학기 활동</S.ActivityTitle>
-          <S.ActivityList>
-            <S.Li>월별 기술 블로그</S.Li>
-            <S.Li>Farm System 아이디어톤 참가</S.Li>
-            <S.Li>스터디 정기 모임</S.Li>
-            <S.Li>트랙 멘토-멘티 프로그램</S.Li>
+          <S.ActivityTitle $isMobile={isMobile}>
+            한 학기 활동
+          </S.ActivityTitle>
+          <S.ActivityList $isMobile={isMobile}>
+            <S.Li $isMobile={isMobile} $isTiny={isTiny}>
+              월별 기술 블로그
+            </S.Li>
+            <S.Li $isMobile={isMobile} $isTiny={isTiny}>
+              Farm System 아이디어톤 참가
+            </S.Li>
+            <S.Li $isMobile={isMobile} $isTiny={isTiny}>
+              스터디 정기 모임
+            </S.Li>
+            <S.Li $isMobile={isMobile} $isTiny={isTiny}>
+              트랙 멘토-멘티 프로그램
+            </S.Li>
           </S.ActivityList>
         </S.Content>
       </S.ContentBoxBorder>
diff --git a/src/pages/Main/Union/Union.styled.ts b/src/pages/Main/Union/Union.styled.ts
index 39f55b3..bdd9369 100644
--- a/src/pages/Main/Union/Union.styled.ts
+++ b/src/pages/Main/Union/Union.styled.ts
@@ -1,81 +1,59 @@
 import styled from "styled-components";
 
-export const Container = styled.section`
+export const Container = styled.section<{ $isMobile: boolean }>`
   display: flex;
-  flex-direction: column; 
-  justify-content: center; 
-  align-items: center; 
-  height: 1500px;
-  user-select: none;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
-  @media (max-width: 768px) {
-    padding: 5px; /* 모바일에서 여백 추가 */
-    height: 1000px;
-  }
+  height: ${(props) => (props.$isMobile ? "1000px" : "1500px")};
+  user-select: none;
+  padding: ${(props) => (props.$isMobile ? "5px" : "0")};
 `;
 
-export const IntroduceText = styled.p`
-  width: 500px;  
-  height: 86px;
+export const IntroduceText = styled.p<{ $isMobile: boolean }>`
+  width: ${(props) => (props.$isMobile ? "100%" : "500px")};
+  height: ${(props) => (props.$isMobile ? "auto" : "86px")};
 
-  text-align: center; 
+  text-align: center;
   color: var(--FarmSystem_Black);
   font-style: normal;
   font-weight: 500;
-  font-size: 36px;
-  line-height: 43px;
-  
-  margin-bottom: 70px;
+  font-size: ${(props) => (props.$isMobile ? "24px" : "36px")};
+  line-height: ${(props) => (props.$isMobile ? "32px" : "43px")};
 
-  @media (max-width: 768px) {
-    width: 100%;  /* 화면에 맞게 폭 확장 */
-    font-size: 24px;
-    line-height: 32px;
-    margin-bottom: 50px;
-  }
+  margin-bottom: ${(props) => (props.$isMobile ? "50px" : "70px")};
 `;
 
-/* 
-  이걸 그리드로 해결한 건 진짜 레전드 씽크빅이다... 
-  진짜 이걸 어떻게 떠올렸지?????
-*/
-export const UnionTextContainer = styled.div`
+export const UnionTextContainer = styled.div<{ $isMobile: boolean }>`
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;  /* 4분할 */
-  justify-items: center;  /* 그리드 셀 내에서 중앙 정렬 */
-  align-items: top;
-  width: 300px;
-  margin-bottom: 50px;
+  grid-template-columns: ${(props) =>
+    props.$isMobile ? "1fr 2fr 1fr" : "1fr 1fr 1fr 1fr"};
+  justify-items: center;
+  align-items: start;
 
-  @media (max-width: 768px) {
-    margin-bottom: 30px;
-    grid-template-columns: 1fr 2fr 1fr;  
-    width: 220px;
-  }
+  width: ${(props) => (props.$isMobile ? "220px" : "300px")};
+  margin-bottom: ${(props) => (props.$isMobile ? "30px" : "50px")};
 `;
 
-export const UnionText = styled.h2`
-  grid-column: 2 / 4;  /* 두 번째에서 세 번째 그리드 셀을 차지 */
+export const UnionText = styled.h2<{ $isMobile: boolean }>`
+  grid-column: 2 / 4;
   text-align: center;
   color: var(--FarmSystem_Orange);
-  font-size: 48px;
+  font-size: ${(props) => (props.$isMobile ? "40px" : "48px")};
   font-weight: 700;
-
-  @media (max-width: 480px) {
-    font-size: 40px;
-  }
 `;
 
-export const NewBadge = styled.div`
-  grid-column: 4 / 5;  /* 네 번째 그리드 셀에 배치 */
-  width: 70px;
-  height: 25px;
+export const NewBadge = styled.div<{ $isMobile: boolean }>`
+  grid-column: 4 / 5;
+  width: ${(props) => (props.$isMobile ? "60px" : "70px")};
+  height: ${(props) => (props.$isMobile ? "22px" : "25px")};
   background: var(--FarmSystem_Green02);
   border-radius: 10px;
 
   font-style: normal;
   font-weight: 500;
-  font-size: 16px;
+  font-size: ${(props) => (props.$isMobile ? "14px" : "16px")};
   line-height: 19px;
   color: var(--FarmSystem_White);
 
@@ -83,12 +61,5 @@ export const NewBadge = styled.div`
   align-items: center;
   justify-content: center;
   text-align: center;
-
   margin-top: 10px;
-
-  @media (max-width: 768px) {
-    font-size: 14px;
-    width: 60px;
-    height: 22px;
-  }
-`;
\ No newline at end of file
+`;
diff --git a/src/pages/Main/Union/Union.tsx b/src/pages/Main/Union/Union.tsx
index 82ded83..755109e 100644
--- a/src/pages/Main/Union/Union.tsx
+++ b/src/pages/Main/Union/Union.tsx
@@ -1,16 +1,19 @@
 import ContentBox from "./ContentBox";
+import useMediaQueries from "@/hooks/useMediaQueries";
 import * as S from './Union.styled';
 
 export default function Union() {
+  const { isMobile } = useMediaQueries();
+
   return (
-    <S.Container>
-      <S.IntroduceText>
+    <S.Container $isMobile={isMobile}>
+      <S.IntroduceText $isMobile={isMobile}>
         <p>신입생이라서</p>
         <p>어떤 트랙을 선택할지 고민되나요?</p>
       </S.IntroduceText>
-      <S.UnionTextContainer>
-        <S.UnionText>Union</S.UnionText>
-        <S.NewBadge>New</S.NewBadge>
+      <S.UnionTextContainer $isMobile={isMobile}>
+        <S.UnionText $isMobile={isMobile}>Union</S.UnionText>
+        <S.NewBadge $isMobile={isMobile}>New</S.NewBadge>
       </S.UnionTextContainer>
       <ContentBox />
     </S.Container>