Feat/link

frontend/src/components/Inputs/inputBox.js

@@ -15,6 +15,7 @@ const InputBox = (props) => {
         value={props.value}
         disabled={props.disabled}
       />
+      {props.addSpan ? <span>{props.addSpan}</span> : null}
     </InputWrap>
   );
 };

frontend/src/components/Inputs/styles.js

@@ -32,4 +32,9 @@ export const InputWrap = styled.div`
       transition: 0.2s ease;
     }
   }
+
+  > span {
+    margin: 4px 0;
+    color: #7c7c7c;
+  }
 `;

frontend/src/components/Modals/tasteModal.js

@@ -10,16 +10,16 @@ const TasteModal = (props) => {
     <Wrap padding>
       <div>
         <TasteWrap>
-          <SubTitle line={'1.5em'}>추천을 위한 취향 정보가 없습니다.</SubTitle>
           <SubTitle line={'1.5em'}>
-            취향 정보를 먼저 저장하시겠습니까 ?
+            추천을 위한 취향 정보가 완성되지 않았어요 :(
           </SubTitle>
+          <SubTitle line={'1.5em'}>취향 정보를 먼저 저장해주세요.</SubTitle>
           <div>
             <button onClick={() => navigator('/setting/taste')}>
-              취향정보 설정하기
+              지금 저장할래요 !
             </button>
             <button onClick={() => props.setTasteModal(false)}>
-              나중에 설정하기
+              나중에 설정할래요..
             </button>
           </div>
         </TasteWrap>

frontend/src/pages/Board/board.js

@@ -97,7 +97,11 @@ function Board() {
           />
         </SearchWrap>
         {/* 검색어가 없을경우 전체 데이터 보여주기, 입력 값이 있을경우 해당하는 데이터 보여주기 */}
-        {FilterContents.length === 0 ? (
+        {searchWord === '' ? (
+          <>
+            <Normal color={'#7c7c7c'}>아직 올라온 게시글이 없어요 !</Normal>
+          </>
+        ) : searchWord !== '' && FilterContents.length === 0 ? (
           <>
             <Normal color={'#7c7c7c'}>
               검색하신 조건에 맞는 게시글이 없어요 :(

frontend/src/pages/Home/index.js

@@ -18,6 +18,26 @@ function Home() {
 
   // 취향정보가 없는 유저의 경우 홈화면 접근 시 모달창 띄우기
   const [tasteModal, setTasteModal] = useState(false);
+  const [userInfo, setUserInfo] = useState({});
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await axios.post('/api/get-userInfo', {
+        email: userEmail,
+      });
+      setUserInfo(response.data[0]);
+      if (
+        response.data[0].object === null ||
+        response.data[0].style === null ||
+        response.data[0].prefer_age === null ||
+        response.data[0].prefer_gender === null
+      ) {
+        setTasteModal(true);
+      }
+    };
+    fetchData();
+    return;
+  }, [userEmail]);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -65,7 +85,7 @@ function Home() {
           }}
           src={loadingImage}
           alt="loading gif"
-        ></img>
+        />
       </>
     );
   }

frontend/src/pages/Join/join.js

@@ -202,6 +202,7 @@ function Join() {
           <InputBox
             title={'비밀번호 확인'}
             type={'password'}
+            addSpan={passwordMessage}
             onChange={(event) => {
               if (
                 userInfo.passwd.length !== 0 &&
@@ -211,19 +212,18 @@ function Join() {
               else setPasswordMessage('비밀번호가 일치하지 않습니다.');
             }}
           />
-          <span>{passwordMessage}</span>
           <div>
             <SubTitle margin={'0 0 10px'}>성별</SubTitle>
             <GenderWrap>
               <GenderButton
                 onClick={() => setUserInfo({ ...userInfo, gender: 'M' })}
-                checked={userInfo.gender === 'M' ? true : false}
+                checked={userInfo.gender === 'M'}
               >
                 남자
               </GenderButton>
               <GenderButton
                 onClick={() => setUserInfo({ ...userInfo, gender: 'F' })}
-                checked={userInfo.gender === 'F' ? true : false}
+                checked={userInfo.gender === 'F'}
               >
                 여자
               </GenderButton>

frontend/src/pages/MyPage/myPage.js

@@ -6,11 +6,14 @@ import { Title } from '../../components/Fonts/fonts';
 import axios from 'axios';
 import { useRecoilValue } from 'recoil';
 import { email } from '../../store/userInfo';
+import { useNavigate } from 'react-router-dom';
 
 function MyPage() {
   const userEmail = useRecoilValue(email);
   const [userInfo, setUserInfo] = useState({});
   const [isLoading, setIsLoading] = useState(true);
+
+  const navigator = useNavigate();
   useEffect(() => {
     const fetchData = async () => {
       setIsLoading(true);
@@ -27,15 +30,9 @@ function MyPage() {
       setUserInfo({
         ...result,
         totalCost: formatNumberWithCommas(result.totalCost),
-        object: result.object
-          ? result.object.split(',')
-          : ['취향을 설정해보세요 :)'],
-        prefer_age: result.prefer_age
-          ? result.prefer_age.split(',')
-          : ['취향을 설정해보세요 :)'],
-        style: result.style
-          ? result.style.split(',')
-          : ['취향을 설정해보세요 :)'],
+        object: result.object ? result.object.split(',') : [],
+        prefer_age: result.prefer_age ? result.prefer_age.split(',') : [],
+        style: result.style ? result.style.split(',') : [],
       });
 
       setIsLoading(false);
@@ -68,36 +65,56 @@ function MyPage() {
         <div>
           <Title margin={'0 0 12px'}>나의 여행 스타일</Title>
           <div>
-            <RowAlign>
+            <RowAlign cursor={userInfo.style.length === 0}>
               <div>스타일</div>
-              {userInfo.style.map((tag) => (
-                <span key={tag}>{tag}</span>
-              ))}
+              <div>
+                {userInfo.style.length !== 0 ? (
+                  userInfo.style.map((tag) => <span key={tag}>{tag}</span>)
+                ) : (
+                  <span onClick={() => navigator('/setting/taste')}>
+                    취향을 설정해보세요 :)
+                  </span>
+                )}
+              </div>
             </RowAlign>
-            <RowAlign>
+            <RowAlign cursor={userInfo.object.length === 0}>
               <div>목적</div>
-              {userInfo.object.map((tag) => (
-                <span key={tag}>{tag}</span>
-              ))}
+              <div>
+                {userInfo.object.length !== 0 ? (
+                  userInfo.object.map((tag) => <span key={tag}>{tag}</span>)
+                ) : (
+                  <span onClick={() => navigator('/setting/taste')}>
+                    취향을 설정해보세요 :)
+                  </span>
+                )}
+              </div>
             </RowAlign>
           </div>
         </div>
         <div>
           <Title margin={'0 0 12px'}>선호하는 동행자 스타일</Title>
           <div>
-            <RowAlign>
+            <RowAlign cursor={userInfo.prefer_age.length === 0}>
               <div>연령대</div>
-              {userInfo.prefer_age.map((tag) => (
-                <span key={tag}>{tag}</span>
-              ))}
+              <div>
+                {userInfo.prefer_age.length !== 0 ? (
+                  userInfo.prefer_age.map((tag) => <span key={tag}>{tag}</span>)
+                ) : (
+                  <span onClick={() => navigator('/setting/taste')}>
+                    취향을 설정해보세요 :)
+                  </span>
+                )}
+              </div>
             </RowAlign>
-            <RowAlign>
+            <RowAlign cursor={!userInfo.prefer_gender}>
               <div>성별</div>
-              <span>
-                {userInfo.prefer_gender
-                  ? userInfo.prefer_gender
-                  : '취향을 설정해보세요 :)'}
-              </span>
+              {userInfo.prefer_gender ? (
+                <span>{userInfo.prefer_gender}</span>
+              ) : (
+                <span onClick={() => navigator('/setting/taste')}>
+                  취향을 설정해보세요 :)
+                </span>
+              )}
             </RowAlign>
           </div>
         </div>

frontend/src/pages/MyPage/styles.js

@@ -47,11 +47,17 @@ export const RowAlign = styled.div`
   > div:first-child {
     flex: 0 1 110px;
   }
+  > div:last-child {
+    display: flex;
+    flex: auto;
+    flex-wrap: wrap;
+    gap: 4px 6px;
+  }
 
   span {
     padding: 2px 16px;
     border: 1.5px solid #7c7c7c;
     border-radius: 24px;
-    margin-right: 8px;
+    cursor: ${(props) => (props.cursor ? 'pointer' : 'auto')};
   }
 `;

frontend/src/pages/Setting/tasteSetting.js

@@ -90,7 +90,7 @@ function TasteSetting() {
     try {
       await axios.post('/api/hashtag-taste', saveInfo);
       alert('취향 정보가 저장되었습니다.');
-      navigator('/setting');
+      navigator('/mypage');
     } catch (e) {
       console.log(e);
     }