From 65298f8a211d8b15b6d8835f0ad41ff11b2cd6f2 Mon Sep 17 00:00:00 2001
From: naraeng <nauurr@naver.com>
Date: Sat, 24 Aug 2024 23:08:53 +0900
Subject: [PATCH] Feat : search warning UI (#40)

---
 public/warning.png                     | Bin 0 -> 1319 bytes
 src/component/search/search.jsx        |  14 +++++++++---
 src/component/search/search.module.css |  30 +++++++++++++++++++++++++
 3 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 public/warning.png

diff --git a/public/warning.png b/public/warning.png
new file mode 100644
index 0000000000000000000000000000000000000000..05ffde3a8ad3d353f6b6c1264d8768357fa3b14b
GIT binary patch
literal 1319
zcmV+?1=#wDP)<h;3K|Lk000e1NJLTq002t>002t}1^@s6I8J)%00009a7bBm000P1
z000P10gN#K>;M1&0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1iVQ^K~#7F?VLeQ
z+dveCCut#-*rfXeS>gbtyCf1K?7AyG0c6<~a00>!ASWQKs;&yFE}<JhV$pH}MhXXD
z2_ZoL7oMpVCGm{onQ`cR(#V6co%o-5Zzi7iEQH77@pxV(IgtS>l}bII&#$4n`1JHt
z%;j=L)Fqdr+1c3>AcbR`idC&vHy}(C)nd${5~U5%S`h6<IKqio)RQ36HcCC*haPo;
z%@Ow9piY7WD9e0ID5gZ&IXyjX3kO&g3nB$Dw_Q|MU%o&t*PfY~*%@VKe9k(m+mYQ8
zy==v{X<8AhUauFs-R=gen}T}@^(2&?^Yil)m1~e_WU?r0;l4Pb)5f@1OG`_uy<Tq@
zHx}?NGO?|src|rdXb|`@aJ@ZTZ$}u$m{>#n65Uh_=ChZElZI&P5N$gmniPipS?Xeu
z$=%=IZ{tQb!+m6Og+if`wz;rBqtDrh>^?+;Y?(04RK-GTlM{aNOW^YH@o`htFD1p6
zKTAa{Ho5(%A0g*`c6PQWEMnR;ClZTWbU!*@63>3A>2mUj$!^~?qoP5?Ei~Stn1DoL
z+4M_EF=3k8Vh#C;BH@=Bru|Y<M)dw>lBtH4SnR-?{AYhEfDdhoDPYi_u_b)baTm&B
z4G2ZUbHk-yN(%0yDfp)o2?js5qI&Kdm4m2Nun9*t8eP6hDR0FT(&=<g%H=Y35*on+
zs?$D|bCtv@l}hyUqR1`L5K|5d_8!#=%HqPp!gn-&td->B4xnBY+BuDO!Z0+_QW1us
z>5X{yyYwS}UFDouvBbZ}DMvP@1$TFMzwza-Obf>Tw#9#LsGOrB)-rD=n$W4jy|{RL
zd%GwMgDFp&tJIr=xZ}r)#jV?KVN62*h*t*YhBB<9N5?kKSh3K$FQzazH#c?D1Qjr7
zN!s!v$yij((8GAKH1J|+;KkCwi=}}VO9L;K23{-;yjU7|u{7{vY2d}uz>B3p7RAc!
z(~Y+xW8i_@M{I&Du0v){EPfy-MF#OcO9L;K23{-;yjU7|u{8Ma#R^w-I8k9NW5wcO
zynhjub+t68R;$OgTJ6fl5<bOl30@cN^?EYy_}HEW#run^1HoX%z~@k-1U6Qr^Z9(8
zt2Y-H7qN@TDrR`Z+cg`ljmBwE{HKi>JO#JW77e5nnh-mKFBA&xZnsMp?Z=T~yCn=V
zX^^Zc9CH>>{o&!^K;@j+_$&%qE0s!jQ2!JDtjy2P%TA|rDW(`oX~E_j$~y|mMFX`|
z&Ql6zyS~0YhhTM%a9J&v%M=jyOH3ggv;R{(J9f%0Yp4XW5y~;8oY{4ZYUp^Kq_HJs
zNT|2=_t%P6X2F^w68vR5jZK$P>3d0H_7f!y3`swcC~X^QY&xW!zBf@iii<Qh6-=e?
zO`PatJB@7|rqg6nOQCa}mTMz@FZJY1+oowVea~3huc<V)5EtotMia_Sn5N70Ju9y&
z7?s9`UT~mugRax}tiA*zsXya))sPSRz`LBJ?>TwB3a7ErRO6+GK*Sb5JCosY5Oo!s
z&sj+;b|Mxr%%6=z_YET^a3)qrD4KYFNl!5FZ|XgV@Jk0-Sk8AYRumfPqA4)Z+!~L^
d<MDWm@fVGylb=2wNFx9M002ovPDHLkV1kWoV{rfg

literal 0
HcmV?d00001

diff --git a/src/component/search/search.jsx b/src/component/search/search.jsx
index eb41fd3..e6f7248 100644
--- a/src/component/search/search.jsx
+++ b/src/component/search/search.jsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import styles from './search.module.css';
-import axios from 'axios';
 import SearchClub from './searchClub';
 import { customAxios } from '../../config/axios-config';
 
@@ -39,8 +38,17 @@ function Search() {
         }
     }, [clubName]);
 
-    if (loading) return <div>Loading...</div>;
-    if (error) return <div>해당하는 동아리가 없습니다</div>;
+    if (loading) return (
+        <div className={styles.warning_container}>
+            <p className={styles.warning_text}>loading</p>
+        </div>
+    );
+    if (error) return (
+        <div className={styles.warning_container}>
+            <img src="/warning.png" alt="search_warning" width={50}/>
+            <p className={styles.warning_text}>검색 결과가 없습니다.</p>
+        </div>
+    );
 
     const renderData = (data) => {
         const rows = [];
diff --git a/src/component/search/search.module.css b/src/component/search/search.module.css
index 5c65553..460c657 100644
--- a/src/component/search/search.module.css
+++ b/src/component/search/search.module.css
@@ -22,6 +22,21 @@
         padding-top: 20px;
         padding-bottom: 20px;
     }
+
+    .warning_container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 200px 0px;
+    }
+
+    .warning_text {
+        font-size: 17px;
+        font-weight: 500;
+        color: #52555B;
+        margin-top: 10px;
+    }
 }
 
 @media screen and (max-width: 768px) {
@@ -48,4 +63,19 @@
         padding-top: 20px;
         padding-bottom: 20px;
     }
+
+    .warning_container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 200px 0px;
+    }
+
+    .warning_text {
+        font-size: 14px;
+        font-weight: 500;
+        color: #52555B;
+        margin-top: 10px;
+    }
 }