Feat#100 search/autosuggestion

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);
+  }
+}

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>
+  );
+}

src/app/shopinfo/ShopInformation.tsx

@@ -1,97 +1,42 @@
-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 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 [showShopEdit, setShowShopEdit] = useState(false);
-  const [showAddNotice, setShowAddNotice] = useState(false);
-  const { shopData } = useContext(ShopDataContext);
+  const { shopData, updateShopData } = 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 (
     <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 && <Registration onClose={() => setShowShopEdit(false)} />}
-      {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}
-                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>
   );

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,11 @@ export default function ShopRegistration() {
             가게 등록하기
           </Button>
         </div>
-        {showShopRegistartion && <Registration onClose={() => setShowShopRegisteration(false)} />}
+        {showShopRegistration && (
+          <div className={styles.modalBox}>
+            <Registration onClose={() => setShowShopRegisteration(false)} />
+          </div>
+        )}
       </article>
     </section>
   );

src/app/shopinfo/layout.module.scss

@@ -1,12 +1,26 @@
+@import '@/styles/_media.scss';
+
 .layout {
+  width: 100%;
   display: flex;
+  align-items: center;
   flex-direction: column;
   min-height: 100vh;
+  position: relative;
 }
 
 .box {
   display: flex;
+  width: 100%;
+  max-width: 1200px;
   flex-direction: column;
+  align-items: center;
   flex-grow: 1;
-  position: relative;
+  padding: 0 6rem;
+}
+
+@include media(mobile) {
+  .box {
+    margin: 0 1rem;
+  }
 }

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>
   );

src/app/shopinfo/page.module.scss

@@ -1,79 +1,10 @@
 @import '@/styles/_index';
+@import '@/styles/_media';
 
 .layout {
+  width: 100%;
   font-size: 1.6rem;
   padding: 3rem;
   flex-grow: 1;
-}
-
-.title {
-  margin: 3rem 0;
-}
-
-.shopLayout {
-  background: $red-600;
-  padding: 2.6rem;
-  @include rounded-xl;
-}
-
-.shopBox {
-  display: flex;
-  gap: 1.6rem;
-}
-
-.shopInfoBox {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.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 {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1000;
-}
-
-.cardList {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1rem;
+  max-width: 1200px;
 }

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 />;
 }

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;
+  }
+}