From 0e29f69c906f842253f4aef1d68db82754603e4c Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Fri, 2 Feb 2024 03:10:16 +0900
Subject: [PATCH 01/18] =?UTF-8?q?feat(icon):=20=EC=95=84=EC=9D=B4=EC=BD=98?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20=EC=A2=85,=20=ED=82=A4=EB=B3=B4?=
 =?UTF-8?q?=EB=93=9C,=20=EB=8A=90=EB=82=8C=ED=91=9C=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EC=BD=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@types/styles/icon.ts            | 5 ++++-
 src/components/Common/Icon/index.tsx | 6 ++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/@types/styles/icon.ts b/src/@types/styles/icon.ts
index 364cad69..d55fe87b 100644
--- a/src/@types/styles/icon.ts
+++ b/src/@types/styles/icon.ts
@@ -27,4 +27,7 @@ export type IconKind =
   | 'location'
   | 'warning'
   | 'account'
-  | 'language';
+  | 'language'
+  | 'keyboard'
+  | 'exclamation'
+  | 'bell';
diff --git a/src/components/Common/Icon/index.tsx b/src/components/Common/Icon/index.tsx
index 06c0a05e..d41b2414 100644
--- a/src/components/Common/Icon/index.tsx
+++ b/src/components/Common/Icon/index.tsx
@@ -30,6 +30,9 @@ import {
   MdOutlineKeyboardArrowDown,
   MdAssignmentInd,
   MdLanguage,
+  MdKeyboard,
+  MdError,
+  MdDoorbell,
 } from 'react-icons/md';
 
 const ICON: { [key in IconKind]: IconType } = {
@@ -62,6 +65,9 @@ const ICON: { [key in IconKind]: IconType } = {
   warning: MdOutlineError,
   account: MdAssignmentInd,
   language: MdLanguage,
+  keyboard: MdKeyboard,
+  exclamation: MdError,
+  bell: MdDoorbell,
 };
 
 interface IconProps {

From 8dbcb9f7a4e514a712fc1b1e7dd2022d09162bad Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Fri, 2 Feb 2024 03:12:55 +0900
Subject: [PATCH 02/18] =?UTF-8?q?feat(My):=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=20=EC=8B=A0=EA=B7=9C=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80=20=EC=95=8C=EB=A6=BC=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95,=20=ED=82=A4=EC=9B=8C=EB=93=9C=20=EC=95=8C=EB=A6=BC?=
 =?UTF-8?q?=20=EC=84=A4=EC=A0=95,=20=EC=9E=90=EC=A3=BC=20=EB=AC=BB?=
 =?UTF-8?q?=EB=8A=94=20=EC=A7=88=EB=AC=B8=EC=9C=BC=EB=A1=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8A=94=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/My/index.tsx | 109 +++++++++++++++++++++++++----------------
 1 file changed, 66 insertions(+), 43 deletions(-)

diff --git a/src/pages/My/index.tsx b/src/pages/My/index.tsx
index 567dae49..40451aee 100644
--- a/src/pages/My/index.tsx
+++ b/src/pages/My/index.tsx
@@ -149,42 +149,55 @@ const My = () => {
 
   return (
     <>
-      <Title>마이페이지</Title>
-      <Major>
-        <MajorCard>
-          <CardList>
-            {major ? (
-              <>
-                <div>{major}</div>
-                <Icon
-                  kind="edit"
-                  onClick={routerToMajorDecision}
-                  color={THEME.TEXT.GRAY}
-                  data-testid="edit"
-                />{' '}
-              </>
-            ) : (
-              <div
-                onClick={() => routerToMajorDecision()}
-                css={css`
-                  opacity: 0.5;
-                  width: 100%;
-                `}
-              >
-                학과 선택하러가기
-              </div>
-            )}
-          </CardList>
-          <CardList>
-            <span>학과 공지사항 알림받기</span>
-            <ToggleButton
-              isOn={Boolean(subscribe)}
-              changeState={handleNotiModal}
-              animation={animation}
-            />
-          </CardList>
-        </MajorCard>
-      </Major>
+      <MajorCard>
+        <Title>마이페이지</Title>
+        <CardList>
+          {major ? (
+            <>
+              <div>{major}</div>
+              <Icon
+                kind="edit"
+                onClick={routerToMajorDecision}
+                color={THEME.TEXT.GRAY}
+                data-testid="edit"
+              />{' '}
+            </>
+          ) : (
+            <div
+              onClick={() => routerToMajorDecision()}
+              css={css`
+                opacity: 0.5;
+                width: 100%;
+              `}
+            >
+              학과 선택하러가기
+            </div>
+          )}
+        </CardList>
+        <CardList>
+          <span>학과 공지사항 알림받기</span>
+          <ToggleButton
+            isOn={Boolean(subscribe)}
+            changeState={handleNotiModal}
+            animation={animation}
+          />
+        </CardList>
+      </MajorCard>
+      <MajorCard>
+        <Title>관리</Title>
+        <CardIconList>
+          <Icon kind="bell" color={THEME.PRIMARY} size="35" />{' '}
+          <ListText>알림 설정</ListText>
+        </CardIconList>
+        <CardIconList onClick={() => routerTo('/keyword')}>
+          <Icon kind="keyboard" color={THEME.PRIMARY} size="35" />{' '}
+          <ListText>키워드 알림 설정</ListText>
+        </CardIconList>
+        <CardIconList>
+          <Icon kind="exclamation" color={THEME.PRIMARY} size="35" />{' '}
+          <ListText>자주 묻는 질문</ListText>
+        </CardIconList>
+      </MajorCard>
       <Suggestion>
         <Button data-testid="modal">
           <Icon kind="suggest" color={THEME.TEXT.WHITE} />
@@ -205,13 +218,6 @@ const Title = styled.div`
   margin-bottom: 5%;
 `;
 
-const Major = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  padding: 15px;
-`;
-
 const Suggestion = styled.div`
   position: fixed;
   bottom: 100px;
@@ -227,6 +233,7 @@ const MajorCard = styled.div`
   border-radius: 0.5rem;
   align-items: center;
   font-size: 1rem;
+  margin-top: 8%;
 `;
 
 const CardList = styled.div`
@@ -236,3 +243,19 @@ const CardList = styled.div`
   justify-content: space-between;
   align-items: center;
 `;
+
+const CardIconList = styled.div`
+  padding: 5%;
+  display: flex;
+  align-items: center;
+
+  transition: 0.3s;
+  &:active {
+    transform: scale(0.95);
+    opacity: 0.6;
+  }
+`;
+
+const ListText = styled.p`
+  padding-left: 1rem;
+`;

From c14b527fecc2bb486957116518759c237c1c37f1 Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Fri, 2 Feb 2024 03:14:01 +0900
Subject: [PATCH 03/18] =?UTF-8?q?feat(My):=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20faq=EB=A1=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EC=9E=90=EC=A3=BC=20=EB=AC=BB=EB=8A=94=20=EC=A7=88?=
 =?UTF-8?q?=EB=AC=B8=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20faq=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EB=9D=BC=EC=9A=B0=ED=8C=85?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/My/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/My/index.tsx b/src/pages/My/index.tsx
index 40451aee..c05bdb08 100644
--- a/src/pages/My/index.tsx
+++ b/src/pages/My/index.tsx
@@ -193,7 +193,7 @@ const My = () => {
           <Icon kind="keyboard" color={THEME.PRIMARY} size="35" />{' '}
           <ListText>키워드 알림 설정</ListText>
         </CardIconList>
-        <CardIconList>
+        <CardIconList onClick={() => routerTo('/faq')}>
           <Icon kind="exclamation" color={THEME.PRIMARY} size="35" />{' '}
           <ListText>자주 묻는 질문</ListText>
         </CardIconList>

From b7b7a556460aba1ca3e09bc797ed9541ab7cc4a7 Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Fri, 2 Feb 2024 03:17:31 +0900
Subject: [PATCH 04/18] =?UTF-8?q?test(subscribeHandler):=20=ED=82=A4?=
 =?UTF-8?q?=EC=9B=8C=EB=93=9C=20=EA=B4=80=EB=A0=A8=20API=20=EB=AA=A8?=
 =?UTF-8?q?=ED=82=B9=20=EA=B5=AC=EB=8F=85=ED=95=9C=20=ED=82=A4=EC=9B=8C?=
 =?UTF-8?q?=EB=93=9C=20=EC=A1=B0=ED=9A=8C,=20=EC=8B=A0=EA=B7=9C=20?=
 =?UTF-8?q?=ED=82=A4=EC=9B=8C=EB=93=9C=20=EA=B5=AC=EB=8F=85,=20=ED=82=A4?=
 =?UTF-8?q?=EC=9B=8C=EB=93=9C=20=EC=82=AD=EC=A0=9C=20=EC=9A=94=EC=B2=AD=20?=
 =?UTF-8?q?=EB=AA=A8=ED=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mocks/handlers/subscribeHandler.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/mocks/handlers/subscribeHandler.ts b/src/mocks/handlers/subscribeHandler.ts
index 03542204..892cade0 100644
--- a/src/mocks/handlers/subscribeHandler.ts
+++ b/src/mocks/handlers/subscribeHandler.ts
@@ -8,4 +8,15 @@ export const subscribeHandler: RequestHandler[] = [
   rest.delete(SERVER_URL + '/api/subscription', (req, res, ctx) => {
     return res(ctx.status(200));
   }),
+  rest.get(SERVER_URL + '/api/subscription/keyword', (req, res, ctx) => {
+    const mockData = ['장학', '등록', '네이버'];
+
+    return res(ctx.status(200), ctx.json(mockData));
+  }),
+  rest.post(SERVER_URL + '/api/subscription/keyword', (req, res, ctx) => {
+    return res(ctx.status(200));
+  }),
+  rest.delete(SERVER_URL + '/api/subscription/keyword', (req, res, ctx) => {
+    return res(ctx.status(200));
+  }),
 ];

From 93fe6e7e2d16fda94a5862004f195f1c7d9c9837 Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Fri, 2 Feb 2024 03:18:23 +0900
Subject: [PATCH 05/18] =?UTF-8?q?feat(constants=20keyword):=20=ED=82=A4?=
 =?UTF-8?q?=EC=9B=8C=EB=93=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20?=
 =?UTF-8?q?=ED=95=84=EC=9A=94=ED=95=9C=20=EB=AC=B8=EA=B5=AC=EB=A5=BC=20?=
 =?UTF-8?q?=EC=83=81=EC=88=98=EB=A1=9C=20=EC=A0=95=EC=9D=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/keyword.ts | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 src/constants/keyword.ts

diff --git a/src/constants/keyword.ts b/src/constants/keyword.ts
new file mode 100644
index 00000000..be839f42
--- /dev/null
+++ b/src/constants/keyword.ts
@@ -0,0 +1,7 @@
+export const KEYWORD_PAGE = {
+  TITLE: '키워드 알림 설정',
+  SUB_TITLE:
+    '키워드를 설정하시면 키워드가 포함된 공지사항이 올라올 때마다 알림을 보내드려요.',
+  PLACEHOLDER: '키워드를 입력해주세요. (예 : 장학금)',
+  REGISTERED_KEYWORD: '등록한 키워드',
+};

From 03bdb246a00662b6b7f6252e6fe0ce98414824a1 Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Fri, 2 Feb 2024 03:25:09 +0900
Subject: [PATCH 06/18] =?UTF-8?q?feat(App):=20=ED=82=A4=EC=9B=8C=EB=93=9C?=
 =?UTF-8?q?=20=EC=95=8C=EB=A6=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=9D=BC?=
 =?UTF-8?q?=EC=9A=B0=ED=8C=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/App.tsx b/src/App.tsx
index 01c9c664..c35b9048 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import Header from '@components/Header';
 import Announcement from '@pages/Announcement';
 import FAQPage from '@pages/FAQ';
 import Home from '@pages/Home';
+import KeywordSubscribe from '@pages/KeywordSubscribe';
 import MajorDecision from '@pages/MajorDecision';
 import MapPage from '@pages/Map';
 import My from '@pages/My';
@@ -24,6 +25,7 @@ const App = () => {
           <Route path="/announcement/*" element={<Announcement />} />
           <Route path="/major-decision/*" element={<MajorDecision />} />
           <Route path="/my" element={<My />} />
+          <Route path="/keyword" element={<KeywordSubscribe />} />
           <Route path="/tip/:type" element={<Tip />} />
           <Route path="/FAQ" element={<FAQPage />} />
           <Route path="/suggestion" element={<SuggestionPage />} />

From 6a9300ecdcc296247c0ca7f15e520e5848f8b546 Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Sat, 3 Feb 2024 00:26:34 +0900
Subject: [PATCH 07/18] =?UTF-8?q?feat(useInput):=20=EC=9E=85=EB=A0=A5?=
 =?UTF-8?q?=EC=9D=84=20=EC=B2=98=EB=A6=AC=ED=95=98=EB=8A=94=20=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

---
 src/hooks/useInput.ts | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 src/hooks/useInput.ts

diff --git a/src/hooks/useInput.ts b/src/hooks/useInput.ts
new file mode 100644
index 00000000..ae807bda
--- /dev/null
+++ b/src/hooks/useInput.ts
@@ -0,0 +1,19 @@
+import { ChangeEvent, useCallback, useState } from 'react';
+
+const useInput = () => {
+  const [inputValue, setInputValue] = useState<string>('');
+
+  const handleValue = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+
+    setInputValue(value);
+  }, []);
+
+  const resetValue = useCallback(() => {
+    setInputValue('');
+  }, []);
+
+  return [inputValue, handleValue, resetValue] as const;
+};
+
+export default useInput;

From ea369af2f48ec4012a58417c23b460b88c3cb63e Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Sat, 3 Feb 2024 00:29:16 +0900
Subject: [PATCH 08/18] =?UTF-8?q?feat(toast-message):=20=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=ED=86=A0=EC=8A=A4=ED=8A=B8=EB=A9=94=EC=8B=9C?=
 =?UTF-8?q?=EC=A7=80=20=EC=83=81=EC=88=98=20=EC=B6=94=EA=B0=80=20=EA=B5=AC?=
 =?UTF-8?q?=EB=8F=85=EC=9D=B4=20=EC=95=88=EB=90=9C=20=EA=B2=BD=EC=9A=B0,?=
 =?UTF-8?q?=202=EA=B8=80=EC=9E=90=20=EC=9D=B4=EC=83=81=EC=9D=B4=20?=
 =?UTF-8?q?=EC=95=88=EB=90=98=EB=8A=94=20=EA=B2=BD=EC=9A=B0,=20=EC=A4=91?=
 =?UTF-8?q?=EB=B3=B5=EB=90=9C=20=ED=82=A4=EC=9B=8C=EB=93=9C=EB=A5=BC=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=ED=95=98=EB=A0=A4=EB=8A=94=20=EA=B2=BD?=
 =?UTF-8?q?=EC=9A=B0,=20=EC=B5=9C=EB=8C=80=20=ED=82=A4=EC=9B=8C=EB=93=9C?=
 =?UTF-8?q?=20=EA=B0=9C=EC=88=98=EB=A5=BC=20=EB=84=98=EC=9D=80=20=EA=B2=BD?=
 =?UTF-8?q?=EC=9A=B0,=20=EC=84=9C=EB=B2=84=20=EC=97=90=EB=9F=AC=EA=B0=80?=
 =?UTF-8?q?=20=EB=B0=9C=EC=83=9D=ED=95=9C=20=EA=B2=BD=EC=9A=B0=EC=97=90=20?=
 =?UTF-8?q?=EB=8C=80=ED=95=9C=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/toast-message.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/constants/toast-message.ts b/src/constants/toast-message.ts
index 08f04ef3..d3c00065 100644
--- a/src/constants/toast-message.ts
+++ b/src/constants/toast-message.ts
@@ -3,6 +3,11 @@ const TOAST_MESSAGES = {
   OUT_OF_SHOOL: '학교 밖에서는 내 위치 정보를 제공하지 않아요!',
   SHARE_LOCATION: '위치 정보를 공유해 주세요',
   SEARCH_KEYWORD: '검색어를 입력해주세요',
+  NEED_SUBSCRIBE: '알림 설정을 먼저 해주세요',
+  NEED_MORE_TEXT: '2글자 이상 입력해주세요',
+  DUPLICATE_KEYWORD: '중복된 키워드가 설정되어있습니다',
+  EXCEED_SUBSCRIBE_MAX_COUNT: '키워드는 최대 5개까지 설정 가능합니다',
+  ERROR_MESSAGE: '일시적인 에러발생',
 } as const;
 
 export default TOAST_MESSAGES;

From 25019fe8c4b36c180ad9c6d7453f40c51d2861bd Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Sat, 3 Feb 2024 00:35:50 +0900
Subject: [PATCH 09/18] =?UTF-8?q?test(subscribeHandler):=20=EB=AA=A8?=
 =?UTF-8?q?=ED=82=B9=20=EC=84=9C=EB=B2=84=20=EC=9A=94=EC=B2=AD=EC=9D=98=20?=
 =?UTF-8?q?path=20=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95=20/major=20?=
 =?UTF-8?q?=EC=A3=BC=EC=86=8C=EA=B0=80=20=EB=88=84=EB=9D=BD=EB=90=9C=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mocks/handlers/subscribeHandler.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/mocks/handlers/subscribeHandler.ts b/src/mocks/handlers/subscribeHandler.ts
index 892cade0..8bd5dcb2 100644
--- a/src/mocks/handlers/subscribeHandler.ts
+++ b/src/mocks/handlers/subscribeHandler.ts
@@ -2,10 +2,10 @@ import { SERVER_URL } from '@config/index';
 import { RequestHandler, rest } from 'msw';
 
 export const subscribeHandler: RequestHandler[] = [
-  rest.post(SERVER_URL + '/api/subscription', (req, res, ctx) => {
+  rest.post(SERVER_URL + '/api/subscription/major', (req, res, ctx) => {
     return res(ctx.status(200));
   }),
-  rest.delete(SERVER_URL + '/api/subscription', (req, res, ctx) => {
+  rest.delete(SERVER_URL + '/api/subscription/major', (req, res, ctx) => {
     return res(ctx.status(200));
   }),
   rest.get(SERVER_URL + '/api/subscription/keyword', (req, res, ctx) => {

From 1f9bdf0f016e7d7e96c5237b469155324dd6e124 Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Sat, 3 Feb 2024 00:37:21 +0900
Subject: [PATCH 10/18] =?UTF-8?q?feat(apis=20subscribeKeyword):=20?=
 =?UTF-8?q?=EA=B5=AC=EB=8F=85=20=EA=B4=80=EB=A0=A8=ED=95=9C=20=EC=84=9C?=
 =?UTF-8?q?=EB=B2=84=20=EC=9A=94=EC=B2=AD=20=EC=B6=94=EA=B0=80=20=EC=9C=A0?=
 =?UTF-8?q?=EC=A0=80=EA=B0=80=20=EA=B5=AC=EB=8F=85=ED=95=9C=20=ED=82=A4?=
 =?UTF-8?q?=EC=9B=8C=EB=93=9C=EB=A5=BC=20=EC=A1=B0=ED=9A=8C=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EC=83=88=EB=A1=9C=20=ED=82=A4?=
 =?UTF-8?q?=EC=9B=8C=EB=93=9C=EB=A5=BC=20=EA=B5=AC=EB=8F=85=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=EB=8F=85=ED=95=9C=20?=
 =?UTF-8?q?=ED=82=A4=EC=9B=8C=EB=93=9C=EB=A5=BC=20=EC=B7=A8=EC=86=8C?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/subscribe/subscribeKeyword.ts | 40 ++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/apis/subscribe/subscribeKeyword.ts

diff --git a/src/apis/subscribe/subscribeKeyword.ts b/src/apis/subscribe/subscribeKeyword.ts
new file mode 100644
index 00000000..a9dd9740
--- /dev/null
+++ b/src/apis/subscribe/subscribeKeyword.ts
@@ -0,0 +1,40 @@
+import http from '@apis/http';
+
+export const fetchSubscribeKeyword = async () => {
+  const userToken = localStorage.getItem('subscribe');
+  if (!userToken) return;
+
+  const res = await http.get<string[]>(
+    '/api/subscription/keyword?userToken=' + userToken,
+  );
+
+  return res.data;
+};
+
+export const postSubscribeKeyword = async (keyword: string) => {
+  const userToken = localStorage.getItem('subscribe');
+  if (!userToken) return;
+
+  const res = await http.post('/api/subscription/keyword', {
+    data: {
+      subscription: JSON.parse(userToken),
+      keyword,
+    },
+  });
+
+  return res;
+};
+
+export const deleteSubscribeKeyword = async (keyword: string) => {
+  const userToken = localStorage.getItem('subscribe');
+  if (!userToken) return;
+
+  const res = await http.delete('/api/subscription/keyword', {
+    data: {
+      subscription: JSON.parse(userToken),
+      keyword,
+    },
+  });
+
+  return res;
+};

From 9123331483cef3dbcdb6be9e06706577931068bb Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Sat, 3 Feb 2024 00:38:43 +0900
Subject: [PATCH 11/18] =?UTF-8?q?fix(My):=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EA=B5=AC=EB=8F=85?=
 =?UTF-8?q?=ED=95=9C=20=EA=B2=BD=EC=9A=B0=EC=97=90=EB=A7=8C=20=EC=95=8C?=
 =?UTF-8?q?=EB=A6=BC=20=EC=84=A4=EC=A0=95=EC=9D=B4=20=EA=B0=80=EB=8A=A5?=
 =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95=20=EC=A0=84?=
 =?UTF-8?q?=EC=B2=B4=20=EA=B5=AC=EB=8F=85=20=EC=95=8C=EB=A6=BC=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=EC=9D=84=20=ED=95=B4=EC=95=BC=20=ED=82=A4=EC=9B=8C?=
 =?UTF-8?q?=EB=93=9C=20=EC=84=A4=EC=A0=95=EC=9D=B4=20=EB=B3=B4=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/My/index.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/pages/My/index.tsx b/src/pages/My/index.tsx
index c05bdb08..e8786ae2 100644
--- a/src/pages/My/index.tsx
+++ b/src/pages/My/index.tsx
@@ -5,12 +5,14 @@ import Icon from '@components/Common/Icon';
 import Modal from '@components/Common/Modal';
 import { SERVER_URL } from '@config/index';
 import { MODAL_BUTTON_MESSAGE, MODAL_MESSAGE } from '@constants/modal-messages';
+import TOAST_MESSAGES from '@constants/toast-message';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import urlBase64ToUint8Array from '@hooks/urlBase64ToUint8Array';
 import useMajor from '@hooks/useMajor';
 import useModals from '@hooks/useModals';
 import useRouter from '@hooks/useRouter';
+import useToasts from '@hooks/useToast';
 import { THEME } from '@styles/ThemeProvider/theme';
 import { MouseEventHandler, useEffect, useState } from 'react';
 
@@ -20,6 +22,7 @@ const My = () => {
   const { major } = useMajor();
   const { routerTo } = useRouter();
   const { openModal } = useModals();
+  const { addToast } = useToasts();
 
   const routerToMajorDecision = () => routerTo('/major-decision');
 
@@ -185,15 +188,23 @@ const My = () => {
       </MajorCard>
       <MajorCard>
         <Title>관리</Title>
-        <CardIconList>
+        <CardIconList isSubscribe={!!subscribe}>
           <Icon kind="bell" color={THEME.PRIMARY} size="35" />{' '}
           <ListText>알림 설정</ListText>
         </CardIconList>
-        <CardIconList onClick={() => routerTo('/keyword')}>
+        {/* 토스트 메시지는 실제 사용되는 기능은 아니지만 혹시 구독을 안한 유저가 접근하려고 할 때 접근을 막고 토스트메시지를 보여주기 위해 존재 */}
+        <CardIconList
+          isSubscribe={!!subscribe}
+          onClick={() =>
+            subscribe
+              ? routerTo('/keyword')
+              : addToast(TOAST_MESSAGES.NEED_SUBSCRIBE)
+          }
+        >
           <Icon kind="keyboard" color={THEME.PRIMARY} size="35" />{' '}
           <ListText>키워드 알림 설정</ListText>
         </CardIconList>
-        <CardIconList onClick={() => routerTo('/faq')}>
+        <CardIconList isSubscribe={true} onClick={() => routerTo('/faq')}>
           <Icon kind="exclamation" color={THEME.PRIMARY} size="35" />{' '}
           <ListText>자주 묻는 질문</ListText>
         </CardIconList>
@@ -244,7 +255,7 @@ const CardList = styled.div`
   align-items: center;
 `;
 
-const CardIconList = styled.div`
+const CardIconList = styled.div<{ isSubscribe?: boolean }>`
   padding: 5%;
   display: flex;
   align-items: center;
@@ -254,6 +265,7 @@ const CardIconList = styled.div`
     transform: scale(0.95);
     opacity: 0.6;
   }
+  display: ${(prop) => (prop.isSubscribe ? 'flex' : 'none')};
 `;
 
 const ListText = styled.p`

From cbcdd2fb1da71787e2e57479cae1e08c4e9fcfb9 Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Sat, 3 Feb 2024 00:41:12 +0900
Subject: [PATCH 12/18] =?UTF-8?q?feat(keywordSubscribe):=20=ED=82=A4?=
 =?UTF-8?q?=EC=9B=8C=EB=93=9C=20=EA=B5=AC=EB=8F=85=20=EA=B4=80=EB=A0=A8?=
 =?UTF-8?q?=ED=95=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20=EB=B0=8F=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20=EA=B0=81=20=ED=82=A4?=
 =?UTF-8?q?=EC=9B=8C=EB=93=9C=EC=9D=98=20=EC=B5=9C=EB=8C=80=20=EA=B8=80?=
 =?UTF-8?q?=EC=9E=90=EC=88=98=EB=8A=94=20=EC=B5=9C=EB=8C=80=2015=EA=B8=80?=
 =?UTF-8?q?=EC=9E=90=EB=A1=9C=20=EC=84=A4=EC=A0=95=20=ED=82=A4=EC=9B=8C?=
 =?UTF-8?q?=EB=93=9C=20=EC=84=A4=EC=A0=95=EC=9D=80=20=EC=B5=9C=EB=8C=80=20?=
 =?UTF-8?q?5=EA=B0=9C=EA=B9=8C=EC=A7=80=20=EC=84=A4=EC=A0=95=20=ED=82=A4?=
 =?UTF-8?q?=EC=9B=8C=EB=93=9C=EC=9D=98=20=EA=B8=80=EC=9E=90=EC=88=98?=
 =?UTF-8?q?=EB=8A=94=20=EC=B5=9C=EC=86=8C=202=EA=B8=80=EC=9E=90=20?=
 =?UTF-8?q?=EC=A4=91=EB=B3=B5=EB=90=9C=20=ED=82=A4=EC=9B=8C=EB=93=9C=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EB=B6=88=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/KeywordSubscribe/index.tsx | 141 +++++++++++++++++++++++++++
 1 file changed, 141 insertions(+)
 create mode 100644 src/pages/KeywordSubscribe/index.tsx

diff --git a/src/pages/KeywordSubscribe/index.tsx b/src/pages/KeywordSubscribe/index.tsx
new file mode 100644
index 00000000..a94f39d2
--- /dev/null
+++ b/src/pages/KeywordSubscribe/index.tsx
@@ -0,0 +1,141 @@
+import {
+  deleteSubscribeKeyword,
+  fetchSubscribeKeyword,
+  postSubscribeKeyword,
+} from '@apis/subscribe/subscribeKeyword';
+import InformUpperLayout from '@components/InformUpperLayout';
+import { KEYWORD_PAGE } from '@constants/keyword';
+import TOAST_MESSAGES from '@constants/toast-message';
+import styled from '@emotion/styled';
+import useInput from '@hooks/useInput';
+import useToasts from '@hooks/useToast';
+import RegisteredKeywordList from '@pages/KeywordSubscribe/components/RegisteredKeywordList';
+import { THEME } from '@styles/ThemeProvider/theme';
+import { KeyboardEventHandler, useEffect, useState } from 'react';
+
+const KeywordSubscribe = () => {
+  const [keywords, setKeywords] = useState<string[]>([]);
+  const [inputKeyword, setInputKeyword, resetKeywords] = useInput();
+  const { addToast } = useToasts();
+
+  const fetchKeywords = async () => {
+    const data = await fetchSubscribeKeyword();
+    if (data) setKeywords(data);
+  };
+
+  const deleteKeyword = async (keyword: string) => {
+    const res = await deleteSubscribeKeyword(keyword);
+
+    if (res?.status !== 200) {
+      addToast(TOAST_MESSAGES.ERROR_MESSAGE);
+      return;
+    }
+
+    setKeywords((prevKeyword) => prevKeyword.filter((key) => key !== keyword));
+  };
+
+  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (e) => {
+    if (e.key !== 'Enter' || e.nativeEvent.isComposing) return;
+    e.preventDefault();
+    onClickSubmit();
+  };
+
+  const onClickSubmit = async () => {
+    if (keywords.length > 4) {
+      addToast(TOAST_MESSAGES.EXCEED_SUBSCRIBE_MAX_COUNT);
+      resetKeywords();
+      return;
+    }
+
+    if (inputKeyword.length < 2) {
+      addToast(TOAST_MESSAGES.NEED_MORE_TEXT);
+      resetKeywords();
+      return;
+    }
+
+    if (keywords.includes(inputKeyword)) {
+      addToast(TOAST_MESSAGES.DUPLICATE_KEYWORD);
+      resetKeywords();
+      return;
+    }
+
+    const res = await postSubscribeKeyword(inputKeyword);
+    if (res && res.status === 200) {
+      setKeywords((prevKeywords) => [...prevKeywords, inputKeyword]);
+      resetKeywords();
+      return;
+    }
+
+    addToast(TOAST_MESSAGES.ERROR_MESSAGE);
+  };
+
+  useEffect(() => {
+    fetchKeywords();
+  }, []);
+
+  const checkIsAvailable = () => (inputKeyword.length > 1 ? true : false);
+
+  return (
+    <>
+      <InformUpperLayout>
+        <InformUpperLayout.InformTitle title={KEYWORD_PAGE.TITLE} />
+        <InformUpperLayout.InformSubTitle subTitle={KEYWORD_PAGE.SUB_TITLE} />
+      </InformUpperLayout>
+
+      <InputWrapper>
+        <KeywordInput
+          onChange={setInputKeyword}
+          placeholder={KEYWORD_PAGE.PLACEHOLDER}
+          maxLength={15}
+          onKeyDown={handleKeyDown}
+          value={inputKeyword}
+        />
+        <KeywordSubmit
+          disabled={!checkIsAvailable()}
+          isAvailable={checkIsAvailable()}
+          onClick={onClickSubmit}
+        >
+          등록
+        </KeywordSubmit>
+      </InputWrapper>
+
+      <RegisteredKeywordList
+        keywords={keywords}
+        deleteKeyword={deleteKeyword}
+      />
+    </>
+  );
+};
+
+export default KeywordSubscribe;
+
+const InputWrapper = styled.div`
+  padding: 0 20px 0 20px;
+  position: relative;
+`;
+
+const KeywordInput = styled.input`
+  width: 90%;
+  border: none;
+  border-bottom: 1.5px solid;
+  padding: 10px;
+
+  &:focus {
+    border: none;
+    outline: none;
+    border-bottom: 1.5px solid;
+  }
+`;
+
+const KeywordSubmit = styled.button<{ isAvailable: boolean }>`
+  color: ${(prop) => (prop.isAvailable ? THEME.PRIMARY : THEME.TEXT.GRAY)};
+  border: none;
+  background-color: transparent;
+  position: absolute;
+  top: 10px;
+  right: 10%;
+
+  &: hover {
+    cursor: pointer;
+  }
+`;

From 8964dcf0157ad73166b2057752d1ffc97724ec54 Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Sat, 3 Feb 2024 00:41:58 +0900
Subject: [PATCH 13/18] =?UTF-8?q?feat(RegisteredKeywordList):=20=EC=9C=A0?=
 =?UTF-8?q?=EC=A0=80=EA=B0=80=20=EA=B5=AC=EB=8F=85=ED=95=9C=20=ED=82=A4?=
 =?UTF-8?q?=EC=9B=8C=EB=93=9C=EB=93=A4=EC=9D=84=20=EB=B3=B4=EC=97=AC?=
 =?UTF-8?q?=EC=A3=BC=EB=8A=94=20UI=20=EC=B6=94=EA=B0=80=20X=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=ED=95=B4=EB=8B=B9?=
 =?UTF-8?q?=20=ED=82=A4=EC=9B=8C=EB=93=9C=EB=A5=BC=20=EC=82=AD=EC=A0=9C?=
 =?UTF-8?q?=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8A=94=20=EA=B8=B0=EB=8A=A5?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/RegisteredKeywordList.tsx      | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/pages/KeywordSubscribe/components/RegisteredKeywordList.tsx

diff --git a/src/pages/KeywordSubscribe/components/RegisteredKeywordList.tsx b/src/pages/KeywordSubscribe/components/RegisteredKeywordList.tsx
new file mode 100644
index 00000000..d70515f0
--- /dev/null
+++ b/src/pages/KeywordSubscribe/components/RegisteredKeywordList.tsx
@@ -0,0 +1,62 @@
+import { KEYWORD_PAGE } from '@constants/keyword';
+import styled from '@emotion/styled';
+import { THEME } from '@styles/ThemeProvider/theme';
+
+interface RegisteredKeywordListProps {
+  keywords: string[];
+  deleteKeyword: (keyword: string) => void;
+}
+
+const RegisteredKeywordList = ({
+  keywords,
+  deleteKeyword,
+}: RegisteredKeywordListProps) => {
+  return (
+    <Container>
+      {KEYWORD_PAGE.REGISTERED_KEYWORD}
+      {keywords && (
+        <KeywordContainer>
+          {keywords.map((keyword, index) => (
+            <KeywordWrapper key={index}>
+              {keyword}
+              <KeywordCancel onClick={() => deleteKeyword(keyword)}>
+                X
+              </KeywordCancel>
+            </KeywordWrapper>
+          ))}
+        </KeywordContainer>
+      )}
+    </Container>
+  );
+};
+
+export default RegisteredKeywordList;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 5% 20px 0 20px;
+`;
+
+const KeywordContainer = styled.div`
+  display: flex;
+  padding-top: 10px;
+  flex-wrap: wrap;
+`;
+
+const KeywordWrapper = styled.div`
+  padding: 7px 7px 7px 14px;
+  border: 1px solid ${THEME.TEXT.GRAY};
+  border-radius: 15px;
+  margin: 5px;
+  display: flex;
+  align-items: center;
+  font-size: 0.9rem;
+  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
+`;
+
+const KeywordCancel = styled.button`
+  background-color: transparent;
+  border: none;
+  line-height: 1px;
+`;

From a62d7cd27eeca3a6e631720e20c9d7c97b41aeba Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Sat, 3 Feb 2024 00:47:09 +0900
Subject: [PATCH 14/18] =?UTF-8?q?fix(My):=20=ED=95=99=EA=B3=BC=20=EA=B3=B5?=
 =?UTF-8?q?=EC=A7=80=EC=82=AC=ED=95=AD=20=EC=95=8C=EB=A6=BC=EB=B0=9B?=
 =?UTF-8?q?=EA=B8=B0=20->=20=EC=95=8C=EB=A6=BC=20=EC=84=A4=EC=A0=95?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=8B=A8=EC=96=B4=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/My/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/My/index.tsx b/src/pages/My/index.tsx
index e8786ae2..e12fb06e 100644
--- a/src/pages/My/index.tsx
+++ b/src/pages/My/index.tsx
@@ -178,7 +178,7 @@ const My = () => {
           )}
         </CardList>
         <CardList>
-          <span>학과 공지사항 알림받기</span>
+          <span>알림 설정</span>
           <ToggleButton
             isOn={Boolean(subscribe)}
             changeState={handleNotiModal}

From d36a5aa310dcd27cdff126110e11022b6e48cbed Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Tue, 6 Feb 2024 17:01:14 +0900
Subject: [PATCH 15/18] =?UTF-8?q?chore(My):=20=ED=94=BC=EB=93=9C=EB=B0=B1?=
 =?UTF-8?q?=20=EB=B0=98=EC=98=81=20-=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0=20{'=20'}?=
 =?UTF-8?q?=20-=20boolean=20=EB=B0=98=ED=99=98=EC=BD=94=EB=93=9C=20docker-?=
 =?UTF-8?q?compose=20up=EB=A1=9C=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/My/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/My/index.tsx b/src/pages/My/index.tsx
index e12fb06e..ed04630e 100644
--- a/src/pages/My/index.tsx
+++ b/src/pages/My/index.tsx
@@ -180,7 +180,7 @@ const My = () => {
         <CardList>
           <span>알림 설정</span>
           <ToggleButton
-            isOn={Boolean(subscribe)}
+            isOn={!!subscribe}
             changeState={handleNotiModal}
             animation={animation}
           />
@@ -189,7 +189,7 @@ const My = () => {
       <MajorCard>
         <Title>관리</Title>
         <CardIconList isSubscribe={!!subscribe}>
-          <Icon kind="bell" color={THEME.PRIMARY} size="35" />{' '}
+          <Icon kind="bell" color={THEME.PRIMARY} size="35" />
           <ListText>알림 설정</ListText>
         </CardIconList>
         {/* 토스트 메시지는 실제 사용되는 기능은 아니지만 혹시 구독을 안한 유저가 접근하려고 할 때 접근을 막고 토스트메시지를 보여주기 위해 존재 */}
@@ -201,11 +201,11 @@ const My = () => {
               : addToast(TOAST_MESSAGES.NEED_SUBSCRIBE)
           }
         >
-          <Icon kind="keyboard" color={THEME.PRIMARY} size="35" />{' '}
+          <Icon kind="keyboard" color={THEME.PRIMARY} size="35" />
           <ListText>키워드 알림 설정</ListText>
         </CardIconList>
         <CardIconList isSubscribe={true} onClick={() => routerTo('/faq')}>
-          <Icon kind="exclamation" color={THEME.PRIMARY} size="35" />{' '}
+          <Icon kind="exclamation" color={THEME.PRIMARY} size="35" />
           <ListText>자주 묻는 질문</ListText>
         </CardIconList>
       </MajorCard>

From 4013345738c5226e1e35a740d553c480a25335cd Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Tue, 6 Feb 2024 17:02:50 +0900
Subject: [PATCH 16/18] =?UTF-8?q?chore(keywordSubscribe):=20=ED=94=BC?=
 =?UTF-8?q?=EB=93=9C=EB=B0=B1=20=EB=B0=98=EC=98=81=20-=20=ED=82=A4?=
 =?UTF-8?q?=EC=9B=8C=EB=93=9C=20=EA=B5=AC=EB=8F=85=20=EC=A0=84=EC=86=A1?=
 =?UTF-8?q?=EC=9D=84=20keydown=20->=20form=20=EC=A0=9C=EC=B6=9C=20?=
 =?UTF-8?q?=ED=98=95=EC=8B=9D=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/pages/KeywordSubscribe/index.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/pages/KeywordSubscribe/index.tsx b/src/pages/KeywordSubscribe/index.tsx
index a94f39d2..5fc9b79c 100644
--- a/src/pages/KeywordSubscribe/index.tsx
+++ b/src/pages/KeywordSubscribe/index.tsx
@@ -11,7 +11,7 @@ import useInput from '@hooks/useInput';
 import useToasts from '@hooks/useToast';
 import RegisteredKeywordList from '@pages/KeywordSubscribe/components/RegisteredKeywordList';
 import { THEME } from '@styles/ThemeProvider/theme';
-import { KeyboardEventHandler, useEffect, useState } from 'react';
+import { FormEvent, FormEventHandler, useEffect, useState } from 'react';
 
 const KeywordSubscribe = () => {
   const [keywords, setKeywords] = useState<string[]>([]);
@@ -34,8 +34,9 @@ const KeywordSubscribe = () => {
     setKeywords((prevKeyword) => prevKeyword.filter((key) => key !== keyword));
   };
 
-  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (e) => {
-    if (e.key !== 'Enter' || e.nativeEvent.isComposing) return;
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (
+    e: FormEvent<HTMLFormElement>,
+  ) => {
     e.preventDefault();
     onClickSubmit();
   };
@@ -73,7 +74,7 @@ const KeywordSubscribe = () => {
     fetchKeywords();
   }, []);
 
-  const checkIsAvailable = () => (inputKeyword.length > 1 ? true : false);
+  const checkIsAvailable = () => inputKeyword.length > 1;
 
   return (
     <>
@@ -82,18 +83,16 @@ const KeywordSubscribe = () => {
         <InformUpperLayout.InformSubTitle subTitle={KEYWORD_PAGE.SUB_TITLE} />
       </InformUpperLayout>
 
-      <InputWrapper>
+      <InputWrapper onSubmit={handleSubmit}>
         <KeywordInput
           onChange={setInputKeyword}
           placeholder={KEYWORD_PAGE.PLACEHOLDER}
           maxLength={15}
-          onKeyDown={handleKeyDown}
           value={inputKeyword}
         />
         <KeywordSubmit
           disabled={!checkIsAvailable()}
           isAvailable={checkIsAvailable()}
-          onClick={onClickSubmit}
         >
           등록
         </KeywordSubmit>
@@ -109,7 +108,7 @@ const KeywordSubscribe = () => {
 
 export default KeywordSubscribe;
 
-const InputWrapper = styled.div`
+const InputWrapper = styled.form`
   padding: 0 20px 0 20px;
   position: relative;
 `;

From dfc59287bbb756f87ca0b9618972e4f5aa5d622f Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Sat, 10 Feb 2024 14:19:10 +0900
Subject: [PATCH 17/18] =?UTF-8?q?refactor(KeywordSubscribe):=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=EC=9D=84=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=82=AC=EC=9A=A9=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=ED=94=BC=EB=93=9C=EB=B0=B1=EC=97=90=20?=
 =?UTF-8?q?=EB=94=B0=EB=9D=BC=20=EC=B5=9C=EB=8C=80=ED=95=9C=20=EA=B3=B5?=
 =?UTF-8?q?=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=A0=20=EC=88=98=20=EC=9E=88=EC=9C=BC?=
 =?UTF-8?q?=EB=A9=B4=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EA=B8=B0=EC=A1=B4=EC=97=90=20=EC=9E=88=EB=8A=94=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/KeywordSubscribe/index.tsx | 35 +++++++++++++++-------------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/pages/KeywordSubscribe/index.tsx b/src/pages/KeywordSubscribe/index.tsx
index 5fc9b79c..3514ee29 100644
--- a/src/pages/KeywordSubscribe/index.tsx
+++ b/src/pages/KeywordSubscribe/index.tsx
@@ -3,9 +3,11 @@ import {
   fetchSubscribeKeyword,
   postSubscribeKeyword,
 } from '@apis/subscribe/subscribeKeyword';
+import Button from '@components/Common/Button';
 import InformUpperLayout from '@components/InformUpperLayout';
 import { KEYWORD_PAGE } from '@constants/keyword';
 import TOAST_MESSAGES from '@constants/toast-message';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import useInput from '@hooks/useInput';
 import useToasts from '@hooks/useToast';
@@ -90,12 +92,26 @@ const KeywordSubscribe = () => {
           maxLength={15}
           value={inputKeyword}
         />
-        <KeywordSubmit
+        <Button
           disabled={!checkIsAvailable()}
-          isAvailable={checkIsAvailable()}
+          css={css`
+            position: absolute;
+            top: 10px;
+            right: 10%;
+            border: none;
+            width: auto;
+            height: auto;
+            background-color: transparent !important;
+            color: ${checkIsAvailable() ? THEME.PRIMARY : THEME.TEXT.GRAY};
+            padding: 0;
+            margin: 0;
+            &: hover {
+              cursor: pointer;
+            }
+          `}
         >
           등록
-        </KeywordSubmit>
+        </Button>
       </InputWrapper>
 
       <RegisteredKeywordList
@@ -125,16 +141,3 @@ const KeywordInput = styled.input`
     border-bottom: 1.5px solid;
   }
 `;
-
-const KeywordSubmit = styled.button<{ isAvailable: boolean }>`
-  color: ${(prop) => (prop.isAvailable ? THEME.PRIMARY : THEME.TEXT.GRAY)};
-  border: none;
-  background-color: transparent;
-  position: absolute;
-  top: 10px;
-  right: 10%;
-
-  &: hover {
-    cursor: pointer;
-  }
-`;

From e4b1af229cc41ca96c62e23d858909258b039a33 Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Sat, 10 Feb 2024 14:46:52 +0900
Subject: [PATCH 18/18] =?UTF-8?q?test(My):=20My=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=20toast=20=EB=A9=94=EC=84=B8?=
 =?UTF-8?q?=EC=A7=80=EB=A5=BC=20=EC=B6=94=EA=B0=80=ED=95=98=EC=97=AC=20?=
 =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=EC=BD=94=EB=93=9C=EC=97=90=20Toasts?=
 =?UTF-8?q?Provier=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/My/index.test.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/My/index.test.tsx b/src/pages/My/index.test.tsx
index b92eb2d8..dcd787b0 100644
--- a/src/pages/My/index.test.tsx
+++ b/src/pages/My/index.test.tsx
@@ -1,6 +1,7 @@
 import Modal from '@components/Common/Modal';
 import MajorProvider from '@components/Providers/MajorProvider';
 import ModalsProvider from '@components/Providers/ModalsProvider';
+import ToastsProvider from '@components/Providers/ToastsProvider';
 import { MODAL_BUTTON_MESSAGE, MODAL_MESSAGE } from '@constants/modal-messages';
 import useModals from '@hooks/useModals';
 import { render, screen } from '@testing-library/react';
@@ -64,7 +65,9 @@ describe('마이 페이지 동작 테스트', () => {
     render(
       <MajorProvider>
         <ModalsProvider>
-          <My />
+          <ToastsProvider>
+            <My />
+          </ToastsProvider>
         </ModalsProvider>
       </MajorProvider>,
       { wrapper: MemoryRouter },
@@ -72,6 +75,7 @@ describe('마이 페이지 동작 테스트', () => {
 
     const majorEditButton = screen.getByText('학과 선택하러가기');
     await userEvent.click(majorEditButton);
+
     expect(mockRouterTo).toHaveBeenCalledWith('/major-decision');
   });
 });