From 1ded96f84e7684f91d00d5f4fa06e085a45c32be Mon Sep 17 00:00:00 2001
From: zoonyoung <9851248@gmail.com>
Date: Sun, 28 Apr 2024 15:20:27 +0900
Subject: [PATCH 1/4] =?UTF-8?q?Refactor:=20=EB=B0=98=EC=9D=91=ED=98=95=20&?=
 =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/shopinfo/ShopInformation.tsx          |  9 +++-
 src/app/shopinfo/ShopRegistration.tsx         |  6 +--
 src/app/shopinfo/layout.module.scss           | 12 ++++++
 src/app/shopinfo/layout.tsx                   |  6 +--
 src/app/shopinfo/page.module.scss             | 43 +++++++++++++++++--
 src/components/common/Input/Input.module.scss |  2 +-
 src/components/common/Input/Input.tsx         | 30 +++++++------
 .../CompletionModal.module.scss               |  4 +-
 ...n.module.scss => Registration.module.scss} | 38 +++++++++++++---
 .../{Registartion.tsx => Registration.tsx}    |  6 ++-
 10 files changed, 120 insertions(+), 36 deletions(-)
 rename src/components/shopinfoPage/{Registartion.module.scss => Registration.module.scss} (66%)
 rename src/components/shopinfoPage/{Registartion.tsx => Registration.tsx} (96%)

diff --git a/src/app/shopinfo/ShopInformation.tsx b/src/app/shopinfo/ShopInformation.tsx
index a2ca2ad..8fc1a60 100644
--- a/src/app/shopinfo/ShopInformation.tsx
+++ b/src/app/shopinfo/ShopInformation.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image';
 import { GPS } from '@/utils/constants';
 import { NoticeDataType, NoticeSearchDataType } from '@/types';
 import { useContext, useEffect, useState } from 'react';
-import Registration from '@/components/shopinfoPage/Registartion';
+import Registration from '@/components/shopinfoPage/Registration';
 import OwnerAddNotice from '@/components/ownerAddNotice/OwnerAddNotice';
 import Cookies from 'js-cookie';
 import Button from '@/components/common/Button';
@@ -54,7 +54,11 @@ export default function ShopInformation() {
           </div>
         </article>
       </section>
-      {showShopEdit && <Registration onClose={() => setShowShopEdit(false)} />}
+      {showShopEdit && (
+        <div className={styles.modalBox}>
+          <Registration onClose={() => setShowShopEdit(false)} />
+        </div>
+      )}
       {showAddNotice && (
         <div className={styles.modalBox}>
           <OwnerAddNotice onClose={() => setShowAddNotice(false)} />
@@ -73,6 +77,7 @@ export default function ShopInformation() {
                 workHour={notice.item.workhour}
                 salary={notice.item.hourlyPay}
                 raise={shopData ? raisePercent(notice.item.hourlyPay, shopData.originalHourlyPay) : 0}
+                isRaised={notice?.item.hourlyPay > shopData?.originalHourlyPay}
                 location={shopData.address1}
                 shopId={shopId}
                 completed={
diff --git a/src/app/shopinfo/ShopRegistration.tsx b/src/app/shopinfo/ShopRegistration.tsx
index 89b65d8..8a853a1 100644
--- a/src/app/shopinfo/ShopRegistration.tsx
+++ b/src/app/shopinfo/ShopRegistration.tsx
@@ -1,10 +1,10 @@
 import { useState } from 'react';
-import Registration from '@/components/shopinfoPage/Registartion';
+import Registration from '@/components/shopinfoPage/Registration';
 import Button from '@/components/common/Button';
 import styles from './page.module.scss';
 
 export default function ShopRegistration() {
-  const [showShopRegistartion, setShowShopRegisteration] = useState(false);
+  const [showShopRegistration, setShowShopRegisteration] = useState(false);
   return (
     <section className={styles.layout}>
       <h2 className={styles.title}>내 가게</h2>
@@ -15,7 +15,7 @@ export default function ShopRegistration() {
             가게 등록하기
           </Button>
         </div>
-        {showShopRegistartion && <Registration onClose={() => setShowShopRegisteration(false)} />}
+        {showShopRegistration && <Registration onClose={() => setShowShopRegisteration(false)} />}
       </article>
     </section>
   );
diff --git a/src/app/shopinfo/layout.module.scss b/src/app/shopinfo/layout.module.scss
index ec5c969..7840389 100644
--- a/src/app/shopinfo/layout.module.scss
+++ b/src/app/shopinfo/layout.module.scss
@@ -1,6 +1,10 @@
+@import '@/styles/_media.scss';
+
 .layout {
+  width: 100%;
   display: flex;
   flex-direction: column;
+  align-items: center;
   min-height: 100vh;
 }
 
@@ -9,4 +13,12 @@
   flex-direction: column;
   flex-grow: 1;
   position: relative;
+  width: 100%;
+  max-width: 1200px;
+}
+
+@include media(mobile) {
+  .box {
+    padding: 0 1rem;
+  }
 }
diff --git a/src/app/shopinfo/layout.tsx b/src/app/shopinfo/layout.tsx
index cc9721c..888534d 100644
--- a/src/app/shopinfo/layout.tsx
+++ b/src/app/shopinfo/layout.tsx
@@ -8,10 +8,8 @@ export default function shopInfoLayout({ children }: { children: React.ReactNode
     <ShopDataContextProvider>
       <div className={styles.layout}>
         <Header />
-        <div className={styles.box}>
-          {children}
-          <Footer />
-        </div>
+        <div className={styles.box}>{children}</div>
+        <Footer />
       </div>
     </ShopDataContextProvider>
   );
diff --git a/src/app/shopinfo/page.module.scss b/src/app/shopinfo/page.module.scss
index 630deff..0985541 100644
--- a/src/app/shopinfo/page.module.scss
+++ b/src/app/shopinfo/page.module.scss
@@ -1,9 +1,11 @@
 @import '@/styles/_index';
+@import '@/styles/_media';
 
 .layout {
   font-size: 1.6rem;
   padding: 3rem;
   flex-grow: 1;
+  max-width: 1200px;
 }
 
 .title {
@@ -25,7 +27,7 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 2rem;
 }
 
 .mainImage {
@@ -64,16 +66,49 @@
 }
 
 .modalBox {
-  width: 100%;
   height: 100%;
+  z-index: 100;
   position: absolute;
   top: 0;
+  bottom: 0;
   left: 0;
-  z-index: 1000;
+  right: 0;
 }
 
 .cardList {
   display: grid;
+  place-items: center;
+  width: 100%;
   grid-template-columns: repeat(3, 1fr);
-  gap: 1rem;
+  grid-column-gap: 1.4rem;
+}
+
+@include media(mobile) {
+  .shopBox {
+    flex-direction: column;
+  }
+
+  .mainImage {
+    width: 100%;
+    height: auto;
+  }
+
+  .buttonBox {
+    gap: 0.6rem;
+  }
+
+  .registerLayout {
+    padding: 10rem 1rem;
+    gap: 1.6rem;
+  }
+
+  .registerButton {
+    padding: 0 1rem;
+  }
+}
+
+@include media(tablet) {
+  .cardList {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
diff --git a/src/components/common/Input/Input.module.scss b/src/components/common/Input/Input.module.scss
index 171e870..21cbd84 100644
--- a/src/components/common/Input/Input.module.scss
+++ b/src/components/common/Input/Input.module.scss
@@ -17,7 +17,7 @@
 
 .input {
   width: 100%;
-  border: 1px solid $gray-400;
+  border: 1px solid $gray-500;
   padding: 1.6rem 2rem;
   margin-top: 0.8rem;
 
diff --git a/src/components/common/Input/Input.tsx b/src/components/common/Input/Input.tsx
index f5a85bb..cc1084f 100644
--- a/src/components/common/Input/Input.tsx
+++ b/src/components/common/Input/Input.tsx
@@ -32,7 +32,7 @@ export default function Input({
     1: styles.singleCharacterUnit,
     2: styles.doubleCharacterUnit,
   };
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     onChange(event.target.value);
   };
   const handleFocusOut = () => {
@@ -53,18 +53,22 @@ export default function Input({
           {label}
         </label>
         <div className={styles.inputWrapper}>
-          <input
-            id={id}
-            name={id}
-            className={cn(styles.input, isError && styles.error, unit && UINT_LENGTH[unit.length])}
-            value={value}
-            placeholder={placeholder}
-            type={type}
-            onChange={handleChange}
-            onBlur={handleFocusOut}
-            onFocus={handleFocusIn}
-            autoComplete="off"
-          />
+          {type === 'textArea' ? (
+            <textarea className={styles.input} value={value} onChange={handleChange} rows={4} />
+          ) : (
+            <input
+              id={id}
+              name={id}
+              className={cn(styles.input, isError && styles.error, unit && UINT_LENGTH[unit.length])}
+              value={value}
+              placeholder={placeholder}
+              type={type}
+              onChange={handleChange}
+              onBlur={handleFocusOut}
+              onFocus={handleFocusIn}
+              autoComplete="off"
+            />
+          )}
           {unit && <p className={styles.unit}>{unit}</p>}
         </div>
       </div>
diff --git a/src/components/common/Modal/CompletionModal/CompletionModal.module.scss b/src/components/common/Modal/CompletionModal/CompletionModal.module.scss
index 4a785ed..fc3dd70 100644
--- a/src/components/common/Modal/CompletionModal/CompletionModal.module.scss
+++ b/src/components/common/Modal/CompletionModal/CompletionModal.module.scss
@@ -1,8 +1,8 @@
 @import '@/styles/_index';
 
 .layout {
-  width: 30rem;
-  height: 10rem;
+  width: 40rem;
+  height: 20rem;
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/src/components/shopinfoPage/Registartion.module.scss b/src/components/shopinfoPage/Registration.module.scss
similarity index 66%
rename from src/components/shopinfoPage/Registartion.module.scss
rename to src/components/shopinfoPage/Registration.module.scss
index 52bad23..29f6669 100644
--- a/src/components/shopinfoPage/Registartion.module.scss
+++ b/src/components/shopinfoPage/Registration.module.scss
@@ -1,19 +1,21 @@
 @import '@/styles/_index';
+@import '@/styles/_media';
 
 .layout {
+  width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  padding: 1.6rem;
   z-index: 999;
   background: $gray-100;
 }
 
+.title {
+  font-size: 2rem;
+}
+
 .Box {
   width: 100%;
   padding: 0 10rem;
@@ -40,6 +42,7 @@
     'uploadImage uploadImage'
     'description description'
     'registerButton registerButton';
+  grid-template-columns: 1fr 1fr;
 }
 
 .text {
@@ -73,9 +76,34 @@
 
 .description {
   grid-area: description;
+  width: 100%;
 }
 
 .registerButton {
   padding: 0 15rem;
   grid-area: registerButton;
 }
+
+.margin {
+  margin-top: 0.8rem;
+  min-height: 1.6rem;
+}
+
+@include media(mobile) {
+  .form {
+    width: 100%;
+    display: grid;
+    grid-template:
+      'name'
+      'category'
+      'address1'
+      'address2'
+      'originalHourlyPay'
+      'uploadImage'
+      'description'
+      'registerButton';
+    grid-template-columns: 1fr;
+
+    gap: 2rem;
+  }
+}
diff --git a/src/components/shopinfoPage/Registartion.tsx b/src/components/shopinfoPage/Registration.tsx
similarity index 96%
rename from src/components/shopinfoPage/Registartion.tsx
rename to src/components/shopinfoPage/Registration.tsx
index bb1d858..c79255d 100644
--- a/src/components/shopinfoPage/Registartion.tsx
+++ b/src/components/shopinfoPage/Registration.tsx
@@ -9,7 +9,7 @@ import { ShopDataContext } from '@/context/ShopDataContext';
 import { useRouter } from 'next/navigation';
 import Dropdown from '../common/Dropdown/Dropdown';
 import Input from '../common/Input/Input';
-import styles from './Registartion.module.scss';
+import styles from './Registration.module.scss';
 import UploadImage from './UploadImage';
 import Button from '../common/Button';
 import CompletionModal from '../common/Modal/CompletionModal/completionModal';
@@ -79,7 +79,7 @@ export default function Registration({ onClose }: { onClose: () => void }) {
     <div className={styles.layout}>
       <section className={styles.Box}>
         <div className={styles.titleBox}>
-          <h2>가게 정보</h2>
+          <h2 className={styles.title}>가게 정보</h2>
           <Image className={styles.closeIcon} src={CLOSE_ICON} alt="close" width={35} height={35} onClick={onClose} />
         </div>
         <form className={styles.form}>
@@ -99,6 +99,7 @@ export default function Registration({ onClose }: { onClose: () => void }) {
               initialOption={inputValue.category}
               onClick={(value) => onValueChange('category', value)}
             />
+            <p className={styles.margin}> </p>
           </div>
           <div className={styles.address1}>
             <p className={styles.text}>주소*</p>
@@ -107,6 +108,7 @@ export default function Registration({ onClose }: { onClose: () => void }) {
               initialOption={inputValue.address1}
               onClick={(value) => onValueChange('address1', value)}
             />
+            <p className={styles.margin}> </p>
           </div>
           <div className={styles.address2}>
             <Input

From a19cc8642ddf020299d769f71594426a0fe8eb9d Mon Sep 17 00:00:00 2001
From: zoonyoung <9851248@gmail.com>
Date: Sun, 28 Apr 2024 16:35:53 +0900
Subject: [PATCH 2/4] =?UTF-8?q?Refactor:=20=EB=B0=98=EC=9D=91=ED=98=95?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=8F=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/shopinfo/ShopInformation.tsx           | 15 ++++++++++++---
 src/app/shopinfo/ShopRegistration.tsx          |  8 +++++++-
 src/app/shopinfo/layout.module.scss            | 12 +++++++-----
 src/app/shopinfo/page.module.scss              | 18 ++++++++++++------
 src/app/shopinfo/page.tsx                      | 17 +----------------
 .../shopinfoPage/Registration.module.scss      |  6 ++++--
 src/components/shopinfoPage/Registration.tsx   |  2 ++
 7 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/src/app/shopinfo/ShopInformation.tsx b/src/app/shopinfo/ShopInformation.tsx
index 8fc1a60..3ea9264 100644
--- a/src/app/shopinfo/ShopInformation.tsx
+++ b/src/app/shopinfo/ShopInformation.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import Image from 'next/image';
 import { GPS } from '@/utils/constants';
 import { NoticeDataType, NoticeSearchDataType } from '@/types';
@@ -13,20 +15,27 @@ import { ShopDataContext } from '@/context/ShopDataContext';
 import styles from './page.module.scss';
 
 export default function ShopInformation() {
+  const { shopData, updateShopData } = useContext(ShopDataContext);
   const [showShopEdit, setShowShopEdit] = useState(false);
   const [showAddNotice, setShowAddNotice] = useState(false);
-  const { shopData } = useContext(ShopDataContext);
   const [noticeList, setNoticeList] = useState<NoticeDataType[] | []>([]);
   const shopId = Cookies.get('shopId') || '';
   const hasNoticeList = noticeList.length !== 0;
 
   useEffect(() => {
-    const fetchData = async () => {
+    const fetchShopData = async () => {
+      const result = await fetch(`${BASE_URL}/shops/${shopId}`);
+      const data = await result.json();
+      updateShopData(data.item);
+    };
+
+    const fetchNoticeData = async () => {
       const response = await fetch(`${BASE_URL}/shops/${shopId}/notices`);
       const data: NoticeSearchDataType = await response.json();
       setNoticeList(data.items);
     };
-    fetchData();
+    fetchShopData();
+    fetchNoticeData();
   }, [shopId]);
 
   return (
diff --git a/src/app/shopinfo/ShopRegistration.tsx b/src/app/shopinfo/ShopRegistration.tsx
index 8a853a1..a51ac79 100644
--- a/src/app/shopinfo/ShopRegistration.tsx
+++ b/src/app/shopinfo/ShopRegistration.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useState } from 'react';
 import Registration from '@/components/shopinfoPage/Registration';
 import Button from '@/components/common/Button';
@@ -15,7 +17,11 @@ export default function ShopRegistration() {
             가게 등록하기
           </Button>
         </div>
-        {showShopRegistration && <Registration onClose={() => setShowShopRegisteration(false)} />}
+        {showShopRegistration && (
+          <div className={styles.modalBox}>
+            <Registration onClose={() => setShowShopRegisteration(false)} />
+          </div>
+        )}
       </article>
     </section>
   );
diff --git a/src/app/shopinfo/layout.module.scss b/src/app/shopinfo/layout.module.scss
index 7840389..9e39770 100644
--- a/src/app/shopinfo/layout.module.scss
+++ b/src/app/shopinfo/layout.module.scss
@@ -3,22 +3,24 @@
 .layout {
   width: 100%;
   display: flex;
-  flex-direction: column;
   align-items: center;
+  flex-direction: column;
   min-height: 100vh;
+  position: relative;
 }
 
 .box {
   display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  position: relative;
   width: 100%;
   max-width: 1200px;
+  flex-direction: column;
+  align-items: center;
+  flex-grow: 1;
+  padding: 0 6rem;
 }
 
 @include media(mobile) {
   .box {
-    padding: 0 1rem;
+    margin: 0 1rem;
   }
 }
diff --git a/src/app/shopinfo/page.module.scss b/src/app/shopinfo/page.module.scss
index 0985541..013658b 100644
--- a/src/app/shopinfo/page.module.scss
+++ b/src/app/shopinfo/page.module.scss
@@ -2,6 +2,7 @@
 @import '@/styles/_media';
 
 .layout {
+  width: 100%;
   font-size: 1.6rem;
   padding: 3rem;
   flex-grow: 1;
@@ -9,12 +10,14 @@
 }
 
 .title {
-  margin: 3rem 0;
+  font-size: 2.8rem;
+  margin-bottom: 3rem;
 }
 
 .shopLayout {
   background: $red-600;
   padding: 2.6rem;
+  margin-bottom: 5rem;
   @include rounded-xl;
 }
 
@@ -66,13 +69,16 @@
 }
 
 .modalBox {
-  height: 100%;
-  z-index: 100;
+  display: flex;
+  justify-content: center;
+  z-index: 10;
   position: absolute;
-  top: 0;
-  bottom: 0;
+  top: 8rem;
+  bottom: k;
   left: 0;
   right: 0;
+  background: $gray-100;
+  min-height: 100%;
 }
 
 .cardList {
@@ -80,7 +86,7 @@
   place-items: center;
   width: 100%;
   grid-template-columns: repeat(3, 1fr);
-  grid-column-gap: 1.4rem;
+  gap: 1.4rem;
 }
 
 @include media(mobile) {
diff --git a/src/app/shopinfo/page.tsx b/src/app/shopinfo/page.tsx
index 2e10f23..9353795 100644
--- a/src/app/shopinfo/page.tsx
+++ b/src/app/shopinfo/page.tsx
@@ -1,26 +1,11 @@
 'use client';
 
-import { useContext, useEffect } from 'react';
 import Cookies from 'js-cookie';
-import BASE_URL from '@/constants/BASEURL';
-import { ShopDataContext } from '@/context/ShopDataContext';
 import ShopInformation from './ShopInformation';
 import ShopRegistration from './ShopRegistration';
 
 export default function ShopInfo() {
-  const { shopData, updateShopData } = useContext(ShopDataContext);
   const shopId = Cookies.get('shopId');
 
-  useEffect(() => {
-    if (shopId) {
-      const fetchData = async () => {
-        const result = await fetch(`${BASE_URL}/shops/${shopId}`);
-        const data = await result.json();
-        updateShopData(data.item);
-      };
-      fetchData();
-    }
-  }, [shopId]);
-
-  return shopData.id ? <ShopInformation /> : <ShopRegistration />;
+  return shopId ? <ShopInformation /> : <ShopRegistration />;
 }
diff --git a/src/components/shopinfoPage/Registration.module.scss b/src/components/shopinfoPage/Registration.module.scss
index 29f6669..82a8fdc 100644
--- a/src/components/shopinfoPage/Registration.module.scss
+++ b/src/components/shopinfoPage/Registration.module.scss
@@ -3,6 +3,7 @@
 
 .layout {
   width: 100%;
+  max-width: 1200px;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -13,7 +14,7 @@
 }
 
 .title {
-  font-size: 2rem;
+  font-size: 2.6rem;
 }
 
 .Box {
@@ -25,6 +26,7 @@
   display: flex;
   width: 100%;
   justify-content: space-between;
+  padding: 2rem 0 5rem 0;
 }
 
 .closeIcon {
@@ -80,7 +82,7 @@
 }
 
 .registerButton {
-  padding: 0 15rem;
+  width: 100%;
   grid-area: registerButton;
 }
 
diff --git a/src/components/shopinfoPage/Registration.tsx b/src/components/shopinfoPage/Registration.tsx
index c79255d..d7cd8bf 100644
--- a/src/components/shopinfoPage/Registration.tsx
+++ b/src/components/shopinfoPage/Registration.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useContext, useEffect, useState } from 'react';
 import Image from 'next/image';
 import { SEOULGROUPLIST } from '@/constants/SEOUL';

From 34b47e57f02065bf18f43dc2652980e9a556dcac Mon Sep 17 00:00:00 2001
From: zoonyoung <9851248@gmail.com>
Date: Sun, 28 Apr 2024 17:25:40 +0900
Subject: [PATCH 3/4] =?UTF-8?q?Refactor:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=ED=99=94=20+=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/shopinfo/CardList.module.scss         |  15 +++
 src/app/shopinfo/CardList.tsx                 |  31 +++++
 src/app/shopinfo/ShopInformation.tsx          |  81 +------------
 src/app/shopinfo/ShopRegistration.tsx         |   2 -
 src/app/shopinfo/page.module.scss             | 110 ------------------
 src/components/common/Modal/Modal.tsx         |   6 +-
 src/components/shopinfoPage/MyShop.tsx        |  51 ++++++++
 .../shopinfoPage/Myshop.module.scss           |  74 ++++++++++++
 .../NoticeRegistration.module.scss            |  41 +++++++
 .../shopinfoPage/NoticeRegistration.tsx       |  23 ++++
 10 files changed, 245 insertions(+), 189 deletions(-)
 create mode 100644 src/app/shopinfo/CardList.module.scss
 create mode 100644 src/app/shopinfo/CardList.tsx
 create mode 100644 src/components/shopinfoPage/MyShop.tsx
 create mode 100644 src/components/shopinfoPage/Myshop.module.scss
 create mode 100644 src/components/shopinfoPage/NoticeRegistration.module.scss
 create mode 100644 src/components/shopinfoPage/NoticeRegistration.tsx

diff --git a/src/app/shopinfo/CardList.module.scss b/src/app/shopinfo/CardList.module.scss
new file mode 100644
index 0000000..b2dd12c
--- /dev/null
+++ b/src/app/shopinfo/CardList.module.scss
@@ -0,0 +1,15 @@
+@import '@/styles/_media';
+
+.layout {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.4rem;
+}
+
+@include media(tablet) {
+  .cardList {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
diff --git a/src/app/shopinfo/CardList.tsx b/src/app/shopinfo/CardList.tsx
new file mode 100644
index 0000000..c1b2746
--- /dev/null
+++ b/src/app/shopinfo/CardList.tsx
@@ -0,0 +1,31 @@
+import { NoticeDataType, ShopDataType } from '@/types';
+import Card from '@/components/common/Card';
+import Cookies from 'js-cookie';
+import raisePercent from '@/utils/getRaisePercent';
+
+import styles from './CardList.module.scss';
+export default function CardList({ noticeList, shopData }: { noticeList: NoticeDataType[]; shopData: ShopDataType }) {
+  const shopId = Cookies.get('shopId');
+  return (
+    <div className={styles.layout}>
+      {noticeList.map((notice) => (
+        <Card
+          key={notice.item.id}
+          title={shopData.name}
+          image={shopData.imageUrl}
+          startTime={notice.item.startsAt}
+          workHour={notice.item.workhour}
+          salary={notice.item.hourlyPay}
+          raise={shopData ? raisePercent(notice.item.hourlyPay, shopData.originalHourlyPay) : 0}
+          isRaised={notice?.item.hourlyPay > shopData?.originalHourlyPay}
+          location={shopData.address1}
+          shopId={shopId}
+          completed={
+            notice?.item.closed ? '모집 완료' : new Date() > new Date(notice?.item.startsAt) ? '지난 공고' : ''
+          }
+          noticeId={notice.item.id}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/src/app/shopinfo/ShopInformation.tsx b/src/app/shopinfo/ShopInformation.tsx
index 3ea9264..9648f2a 100644
--- a/src/app/shopinfo/ShopInformation.tsx
+++ b/src/app/shopinfo/ShopInformation.tsx
@@ -1,23 +1,15 @@
-'use client';
-
-import Image from 'next/image';
-import { GPS } from '@/utils/constants';
 import { NoticeDataType, NoticeSearchDataType } from '@/types';
 import { useContext, useEffect, useState } from 'react';
-import Registration from '@/components/shopinfoPage/Registration';
-import OwnerAddNotice from '@/components/ownerAddNotice/OwnerAddNotice';
+import MyShop from '@/components/shopinfoPage/MyShop';
+import NoticeRegistration from '@/components/shopinfoPage/NoticeRegistration';
 import Cookies from 'js-cookie';
-import Button from '@/components/common/Button';
 import BASE_URL from '@/constants/BASEURL';
-import Card from '@/components/common/Card';
-import raisePercent from '@/utils/getRaisePercent';
 import { ShopDataContext } from '@/context/ShopDataContext';
 import styles from './page.module.scss';
+import CardList from './CardList';
 
 export default function ShopInformation() {
   const { shopData, updateShopData } = useContext(ShopDataContext);
-  const [showShopEdit, setShowShopEdit] = useState(false);
-  const [showAddNotice, setShowAddNotice] = useState(false);
   const [noticeList, setNoticeList] = useState<NoticeDataType[] | []>([]);
   const shopId = Cookies.get('shopId') || '';
   const hasNoticeList = noticeList.length !== 0;
@@ -34,78 +26,17 @@ export default function ShopInformation() {
       const data: NoticeSearchDataType = await response.json();
       setNoticeList(data.items);
     };
+
     fetchShopData();
     fetchNoticeData();
   }, [shopId]);
 
   return (
     <div className={styles.layout}>
-      <h2 className={styles.title}>내 가게</h2>
-      <section className={styles.shopLayout}>
-        <article className={styles.shopBox}>
-          <Image className={styles.mainImage} src={shopData.imageUrl} alt="shop" width={150} height={150} />
-          <div className={styles.shopInfoBox}>
-            <p className={styles.label}>식당</p>
-            <h1 className={styles.name}>{shopData.name}</h1>
-            <p className={styles.address1}>
-              <Image src={GPS} alt="location" width={25} height={25} />
-              {shopData.address1}
-            </p>
-            <p className={styles.description}>{shopData.description}</p>
-            <div className={styles.buttonBox}>
-              <Button color="white" size="medium" onClick={() => setShowShopEdit(true)}>
-                편집하기
-              </Button>
-              <Button color="orange" size="medium" onClick={() => setShowAddNotice(true)}>
-                공고 등록하기
-              </Button>
-            </div>
-          </div>
-        </article>
-      </section>
-      {showShopEdit && (
-        <div className={styles.modalBox}>
-          <Registration onClose={() => setShowShopEdit(false)} />
-        </div>
-      )}
-      {showAddNotice && (
-        <div className={styles.modalBox}>
-          <OwnerAddNotice onClose={() => setShowAddNotice(false)} />
-        </div>
-      )}
+      <MyShop shopData={shopData} />
       <section>
         <h2 className={styles.title}>등록한 공고</h2>
-        {hasNoticeList ? (
-          <div className={styles.cardList}>
-            {noticeList.map((notice) => (
-              <Card
-                key={notice.item.id}
-                title={shopData.name}
-                image={shopData.imageUrl}
-                startTime={notice.item.startsAt}
-                workHour={notice.item.workhour}
-                salary={notice.item.hourlyPay}
-                raise={shopData ? raisePercent(notice.item.hourlyPay, shopData.originalHourlyPay) : 0}
-                isRaised={notice?.item.hourlyPay > shopData?.originalHourlyPay}
-                location={shopData.address1}
-                shopId={shopId}
-                completed={
-                  notice?.item.closed ? '모집 완료' : new Date() > new Date(notice?.item.startsAt) ? '지난 공고' : ''
-                }
-                noticeId={notice.item.id}
-              />
-            ))}
-          </div>
-        ) : (
-          <article className={styles.registerLayout}>
-            <p>공고를 등록해 보세요</p>
-            <div className={styles.registerButton}>
-              <Button color="orange" size="medium" onClick={() => setShowAddNotice(true)}>
-                공고 등록하기
-              </Button>
-            </div>
-          </article>
-        )}
+        {hasNoticeList ? <CardList noticeList={noticeList} shopData={shopData} /> : <NoticeRegistration />}
       </section>
     </div>
   );
diff --git a/src/app/shopinfo/ShopRegistration.tsx b/src/app/shopinfo/ShopRegistration.tsx
index a51ac79..eb295f4 100644
--- a/src/app/shopinfo/ShopRegistration.tsx
+++ b/src/app/shopinfo/ShopRegistration.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useState } from 'react';
 import Registration from '@/components/shopinfoPage/Registration';
 import Button from '@/components/common/Button';
diff --git a/src/app/shopinfo/page.module.scss b/src/app/shopinfo/page.module.scss
index 013658b..62f062f 100644
--- a/src/app/shopinfo/page.module.scss
+++ b/src/app/shopinfo/page.module.scss
@@ -8,113 +8,3 @@
   flex-grow: 1;
   max-width: 1200px;
 }
-
-.title {
-  font-size: 2.8rem;
-  margin-bottom: 3rem;
-}
-
-.shopLayout {
-  background: $red-600;
-  padding: 2.6rem;
-  margin-bottom: 5rem;
-  @include rounded-xl;
-}
-
-.shopBox {
-  display: flex;
-  gap: 1.6rem;
-}
-
-.shopInfoBox {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-}
-
-.mainImage {
-  @include rounded-lg;
-}
-
-.label {
-  color: $red-400;
-  @include font-bold;
-}
-
-.address1 {
-  display: flex;
-  align-items: center;
-  color: $gray-500;
-}
-
-.buttonBox {
-  display: flex;
-  gap: 3rem;
-}
-
-.registerLayout {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid $gray-400;
-  padding: 10rem;
-  gap: 3rem;
-}
-
-.registerButton {
-  width: 100%;
-  padding: 0 10rem;
-}
-
-.modalBox {
-  display: flex;
-  justify-content: center;
-  z-index: 10;
-  position: absolute;
-  top: 8rem;
-  bottom: k;
-  left: 0;
-  right: 0;
-  background: $gray-100;
-  min-height: 100%;
-}
-
-.cardList {
-  display: grid;
-  place-items: center;
-  width: 100%;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1.4rem;
-}
-
-@include media(mobile) {
-  .shopBox {
-    flex-direction: column;
-  }
-
-  .mainImage {
-    width: 100%;
-    height: auto;
-  }
-
-  .buttonBox {
-    gap: 0.6rem;
-  }
-
-  .registerLayout {
-    padding: 10rem 1rem;
-    gap: 1.6rem;
-  }
-
-  .registerButton {
-    padding: 0 1rem;
-  }
-}
-
-@include media(tablet) {
-  .cardList {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
diff --git a/src/components/common/Modal/Modal.tsx b/src/components/common/Modal/Modal.tsx
index 29a5d53..a82a564 100644
--- a/src/components/common/Modal/Modal.tsx
+++ b/src/components/common/Modal/Modal.tsx
@@ -9,13 +9,15 @@ type ModalProps = {
 
 function ModalPortal({ children }: { children: React.ReactNode }) {
   const [isRendering, setIsRendering] = useState(true);
+  const [element, setElement] = useState<HTMLElement | null>(null);
 
   useEffect(() => {
     setIsRendering(false);
+    setElement(document.getElementById('modal'));
   }, []);
 
-  if (isRendering) return null;
-  return ReactDOM.createPortal(children, document.getElementById('modal') as HTMLElement) as JSX.Element;
+  if (isRendering || !element) return null;
+  return ReactDOM.createPortal(children, element) as JSX.Element;
 }
 
 export default function Modal({ children }: ModalProps) {
diff --git a/src/components/shopinfoPage/MyShop.tsx b/src/components/shopinfoPage/MyShop.tsx
new file mode 100644
index 0000000..c48c670
--- /dev/null
+++ b/src/components/shopinfoPage/MyShop.tsx
@@ -0,0 +1,51 @@
+import Image from 'next/image';
+import { ShopDataType } from '@/types';
+import { GPS } from '@/utils/constants';
+import { useState } from 'react';
+import styles from './Myshop.module.scss';
+import Button from '../common/Button';
+import OwnerAddNotice from '../ownerAddNotice/OwnerAddNotice';
+import Registration from './Registration';
+
+export default function MyShop({ shopData }: { shopData: ShopDataType }) {
+  const [showShopEdit, setShowShopEdit] = useState(false);
+  const [showAddNotice, setShowAddNotice] = useState(false);
+
+  return (
+    <>
+      <h2 className={styles.title}>내 가게</h2>
+      <section className={styles.shopLayout}>
+        <article className={styles.shopBox}>
+          <Image className={styles.mainImage} src={shopData.imageUrl} alt="shop" width={150} height={150} />
+          <div className={styles.shopInfoBox}>
+            <p className={styles.label}>식당</p>
+            <h2 className={styles.name}>{shopData.name}</h2>
+            <p className={styles.address1}>
+              <Image src={GPS} alt="location" width={25} height={25} />
+              {shopData.address1}
+            </p>
+            <p className={styles.description}>{shopData.description}</p>
+            <div className={styles.buttonBox}>
+              <Button color="white" size="medium" onClick={() => setShowShopEdit(true)}>
+                편집하기
+              </Button>
+              <Button color="orange" size="medium" onClick={() => setShowAddNotice(true)}>
+                공고 등록하기
+              </Button>
+            </div>
+          </div>
+        </article>
+      </section>
+      {showShopEdit && (
+        <div className={styles.modalBox}>
+          <Registration onClose={() => setShowShopEdit(false)} />
+        </div>
+      )}
+      {showAddNotice && (
+        <div className={styles.modalBox}>
+          <OwnerAddNotice onClose={() => setShowAddNotice(false)} />
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/shopinfoPage/Myshop.module.scss b/src/components/shopinfoPage/Myshop.module.scss
new file mode 100644
index 0000000..a129088
--- /dev/null
+++ b/src/components/shopinfoPage/Myshop.module.scss
@@ -0,0 +1,74 @@
+@import '@/styles/_index';
+@import '@/styles/_media';
+
+.title {
+  font-size: 2.8rem;
+  margin-bottom: 3rem;
+}
+
+.shopLayout {
+  background: $red-600;
+  padding: 2.6rem;
+  margin-bottom: 5rem;
+  @include rounded-xl;
+}
+
+.shopBox {
+  display: flex;
+  gap: 1.6rem;
+}
+
+.shopInfoBox {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.mainImage {
+  @include rounded-lg;
+}
+
+.label {
+  color: $red-400;
+  @include font-bold;
+}
+
+.address1 {
+  display: flex;
+  align-items: center;
+  color: $gray-500;
+}
+
+.buttonBox {
+  display: flex;
+  gap: 3rem;
+}
+
+.modalBox {
+  display: flex;
+  justify-content: center;
+  z-index: 10;
+  position: absolute;
+  top: 8rem;
+  bottom: k;
+  left: 0;
+  right: 0;
+  background: $gray-100;
+  min-height: 100%;
+}
+
+@include media(mobile) {
+  .shopBox {
+    flex-direction: column;
+  }
+
+  .mainImage {
+    width: 100%;
+    height: auto;
+  }
+
+  .buttonBox {
+    gap: 0.6rem;
+  }
+}
diff --git a/src/components/shopinfoPage/NoticeRegistration.module.scss b/src/components/shopinfoPage/NoticeRegistration.module.scss
new file mode 100644
index 0000000..1d89ab1
--- /dev/null
+++ b/src/components/shopinfoPage/NoticeRegistration.module.scss
@@ -0,0 +1,41 @@
+@import '@/styles/_index';
+@import '@/styles/_media';
+
+.registerLayout {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid $gray-400;
+  padding: 10rem;
+  gap: 3rem;
+}
+
+.registerButton {
+  width: 100%;
+  padding: 0 10rem;
+}
+
+.modalBox {
+  display: flex;
+  justify-content: center;
+  z-index: 10;
+  position: absolute;
+  top: 8rem;
+  bottom: k;
+  left: 0;
+  right: 0;
+  background: $gray-100;
+  min-height: 100%;
+}
+
+@include media(mobile) {
+  .registerLayout {
+    padding: 10rem 1rem;
+    gap: 1.6rem;
+  }
+
+  .registerButton {
+    padding: 0 1rem;
+  }
+}
diff --git a/src/components/shopinfoPage/NoticeRegistration.tsx b/src/components/shopinfoPage/NoticeRegistration.tsx
new file mode 100644
index 0000000..6b5b14d
--- /dev/null
+++ b/src/components/shopinfoPage/NoticeRegistration.tsx
@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import Button from '../common/Button';
+import styles from './NoticeRegistration.module.scss';
+import OwnerAddNotice from '../ownerAddNotice/OwnerAddNotice';
+
+export default function NoticeRegistration() {
+  const [showAddNotice, setShowAddNotice] = useState(false);
+  return (
+    <article className={styles.registerLayout}>
+      <p>공고를 등록해 보세요</p>
+      <div className={styles.registerButton}>
+        <Button color="orange" size="medium" onClick={() => setShowAddNotice(true)}>
+          공고 등록하기
+        </Button>
+      </div>
+      {showAddNotice && (
+        <div className={styles.modalBox}>
+          <OwnerAddNotice onClose={() => setShowAddNotice(false)} />
+        </div>
+      )}
+    </article>
+  );
+}

From da52a78dbcb91ad232d9b54a8fd0a784269bb7be Mon Sep 17 00:00:00 2001
From: zoonyoung <9851248@gmail.com>
Date: Sun, 28 Apr 2024 18:28:42 +0900
Subject: [PATCH 4/4] =?UTF-8?q?Feat:=20Search=EC=97=90=20autoSuggestion?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/Header/SearchBox.module.scss       | 32 +++++++
 src/components/common/Header/SearchBox.tsx    | 90 +++++++++++++++++--
 tsconfig.json                                 |  1 +
 3 files changed, 115 insertions(+), 8 deletions(-)

diff --git a/src/components/common/Header/SearchBox.module.scss b/src/components/common/Header/SearchBox.module.scss
index 4a0cbaa..2dbc8aa 100644
--- a/src/components/common/Header/SearchBox.module.scss
+++ b/src/components/common/Header/SearchBox.module.scss
@@ -40,3 +40,35 @@
     width: 100%;
   }
 }
+
+.itemBox {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  top: 5rem;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  overflow: hidden;
+  background: $white;
+  border: 2px solid $red-200;
+
+  @include rounded-lg;
+}
+
+.item {
+  padding: 0.6rem 1.5rem;
+  font-size: 1.6rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border: 1px solid $red-600;
+
+  span {
+    @include font-bold;
+  }
+
+  &:hover {
+    background: $red-600;
+  }
+}
diff --git a/src/components/common/Header/SearchBox.tsx b/src/components/common/Header/SearchBox.tsx
index 2e353ed..05f3167 100644
--- a/src/components/common/Header/SearchBox.tsx
+++ b/src/components/common/Header/SearchBox.tsx
@@ -1,32 +1,106 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Image from 'next/image';
 import { SEARCH_ICON } from '@/utils/constants';
+import BASE_URL from '@/constants/BASEURL';
+import useOutsideClick from '@/hooks/useOutsideClick';
 import styles from './SearchBox.module.scss';
 
 export default function SearchBox() {
   const router = useRouter();
-  const [input, setInput] = useState('');
+  const [keyword, setKeyword] = useState('');
+  const [showAutoSuggestion, setShowAutoSuggestion] = useState(false);
+  const [suggestionList, setSuggestionList] = useState([]);
+  const autoSuggestionRef = useRef(null);
+  const inputRef = useRef(null);
+  useOutsideClick(autoSuggestionRef, () => setShowAutoSuggestion(false));
+
+  const handleSuggestionClick = (event) => {
+    setKeyword(event.target.id);
+    inputRef.current.focus();
+    setShowAutoSuggestion(false);
+  };
+
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setInput(event.target.value);
+    setKeyword(event.target.value);
   };
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter' && input) {
-      router.push(`/?keyword=${input}`);
+    if (event.key === 'Enter' && keyword) {
+      router.push(`/?keyword=${keyword}`);
     }
   };
+
+  useEffect(() => {
+    let debounce;
+    if (keyword) {
+      debounce = setTimeout(async () => {
+        try {
+          const response = await fetch(
+            `${BASE_URL}/notices?limit=10&keyword=${encodeURIComponent(keyword.trim())}&sort=time`,
+          );
+          if (!response.ok) {
+            throw new Error('Network response was not ok');
+          }
+          const searchSet = new Set<string[]>();
+          const data = await response.json();
+          data.items.filter((item) => searchSet.add(item.item.shop.item.name));
+          setSuggestionList([...searchSet]);
+        } catch (error) {
+          console.error('There was a problem with your fetch operation:', error);
+        }
+      }, 200);
+    } else {
+      setSuggestionList([]);
+    }
+
+    return () => {
+      clearTimeout(debounce);
+    };
+  }, [keyword]);
+
   return (
-    <form className={styles.searchBarWrapper} onSubmit={(e) => e.preventDefault()}>
-      <Image src={SEARCH_ICON} alt="search" width={20} height={20} className={styles.searchButton} priority />
+    <form className={styles.searchBarWrapper} onSubmit={(e) => e.preventDefault()} ref={autoSuggestionRef}>
+      <Image src={SEARCH_ICON} alt="search" width={21} height={20} className={styles.searchButton} priority />
       <input
         className={styles.searchBar}
-        value={input}
+        value={keyword}
+        ref={inputRef}
+        onFocus={() => setShowAutoSuggestion(true)}
         onChange={handleInputChange}
         onKeyDown={handleKeyDown}
         placeholder="가게 이름으로 찾아보세요"
       />
+      {showAutoSuggestion && (
+        <div className={styles.itemBox}>
+          {suggestionList.map((data) => (
+            <button
+              type="button"
+              className={styles.item}
+              key={data}
+              id={data}
+              onClick={handleSuggestionClick}
+              aria-label={`${data}을(를) 선택하려면 클릭하세요.`}
+              dangerouslySetInnerHTML={{
+                __html: data.replace(
+                  new RegExp(`(${keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi'),
+                  '<strong>$1</strong>',
+                ),
+              }}
+            />
+
+            // <button type="button" className={styles.item} key={data} id={data} onClick={handleSuggestionClick}>
+            //   {data}
+            // </button>
+          ))}
+          {suggestionList.length === 0 && (
+            <button type="button" className={styles.item}>
+              검색된 결과가 없습니다.
+            </button>
+          )}
+        </div>
+      )}
     </form>
   );
 }
diff --git a/tsconfig.json b/tsconfig.json
index 683cb57..33cad90 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,6 +12,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "downlevelIteration": true,
     "plugins": [
       {
         "name": "next"