feat: add Setting

SPARCS-Service-Hackathon-2024 · Feb 15, 2024 · 19d72a1 · 19d72a1
1 parent 0af6889
commit 19d72a1
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 100 deletions.
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -4,19 +4,20 @@ import Menu from './component/Menu';
 import BannerSlider from './component/BannerSlider';
 import NowReviews from './component/NowReviews';
 import CategoryMenu from './component/CategoryMenu';
+import SearchMenu from './component/SearchMenu';
 
 export default function Home() {
-    return (
-        <div className='h-[100%] pt-[56px] pb-[70px] '>
-            <Header alarm={true} review={true} search={true} />
-            <div className='mx-[10%]'>
-            <BannerSlider />
-            </div>
-            <CategoryMenu />
-            <div className="bar w-full h-[8px] bg-[#f5f5f5]"></div>
-            <NowReviews />
-            <Menu home={true}/>
-        </div>
-    );
+  return (
+    <div className="h-[100%] pb-[70px] ">
+      <Header alarm={true} review={true} />
+      <SearchMenu />
+      <div className="mx-[10%]">
+        <BannerSlider />
+      </div>
+      <CategoryMenu />
+      <div className="bar w-full h-[8px] bg-[#f5f5f5]"></div>
+      <NowReviews />
+      <Menu home={true} />
+    </div>
+  );
 }
-
diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx
@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import Header from './component/Header';
+
+type SettingPrors = {
+  text: string;
+  nextUrl?: string;
+  icon?: string;
+};
+
+const Setting: React.FC<SettingPrors> = ({ text, nextUrl, icon }) => {
+  return (
+    <div>
+      <Header text="설정" back />
+      <Link to={nextUrl ? nextUrl : '#'} className="h-13 w-full leading-13">
+        {text}
+      </Link>
+    </div>
+  );
+};
+
+export default Setting;
diff --git a/src/pages/component/Comment.tsx b/src/pages/component/Comment.tsx
@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 
 type CommentPrors = {
-  text: String;
-  name: String;
-  img: String;
-  id: String;
+  text: string;
+  name: string;
+  img: string;
+  id: string;
 };
 
 const Comment: React.FC<CommentPrors> = ({ text, name, img, id }) => {

diff --git a/src/pages/component/Comments.tsx b/src/pages/component/Comments.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import Comment from './Comment';
+import Teansfer from './Transfer';
 
 const Comments: React.FC = () => {
   return (
@@ -37,7 +38,7 @@ const Comments: React.FC = () => {
           id="1234"
           img="img"
         />
-        <div className="absolute left-0 bottom-0 w-full flex items-center h-14 border-t border-gray-300"></div>
+        <Teansfer />
       </div>
     </div>
   );

diff --git a/src/pages/component/Feel.tsx b/src/pages/component/Feel.tsx
@@ -3,8 +3,8 @@ import Good from '../../assets/Good.png';
 import Bad from '../../assets/Bad.png';
 
 type FeelProps = {
-  BadReview: String[];
-  GoodReview: String[];
+  BadReview: string[];
+  GoodReview: string[];
 };
 
 const Feel: React.FC<FeelProps> = ({ BadReview, GoodReview }) => {

diff --git a/src/pages/component/Header.tsx b/src/pages/component/Header.tsx
@@ -1,14 +1,12 @@
 import React from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import alarmSrc from '../../assets/alarm.png';
-import SearchMenu from './SearchMenu';
 
 type HeaderProps = {
   text?: string;
   back?: boolean;
   alarm?: boolean;
   review?: boolean;
-  search?: boolean;
   setting?: boolean;
   className?: string;
   border?: boolean;
@@ -20,7 +18,6 @@ const Header: React.FC<HeaderProps> = ({
   back,
   alarm,
   review,
-  search,
   className,
   setting,
   border,
@@ -33,84 +30,81 @@ const Header: React.FC<HeaderProps> = ({
   };
 
   return (
-    <div>
-      <div
-        className={`max-w-screen-sm w-[100%] h-[56px] left-50% px-5 z-50 sticky top-0 flex justify-between items-center pl-3 leading-[56px] ${
-          white ? 'bg-inherit' : 'bg-white'
-        } ${border && 'border-b border-[#E5E5E5]'} ${className}`}
-      >
-        <div className="w-[100px]">
-          {back && (
-            <button
-              type="button"
-              onClick={toBackClick}
-              className="bg-transparent outline-none h-[24px] w-[24px] flex items-center"
-            >
-              <img
-                src={white ? '/assets/back_white.png' : '/assets/back.png'}
-                alt="back"
-                className={`object-cover w-auto h-full`}
-              />
-            </button>
-          )}
-        </div>
-        <div className="flex justify-center">
-          {text ? (
-            <p>{text}</p>
-          ) : (
-            <Link
-              to={'/'}
-              onClick={toBackClick}
-              className="bg-transparent outline-none h-[48px] flex justify-end"
-            >
-              <img
-                src="/assets/logo.png"
-                alt="back"
-                className="object-cover w-auto h-full"
-              />
-            </Link>
-          )}
-        </div>
-        <div className="flex w-[100px] justify-end">
-          {alarm && (
-            <Link
-              to={'/Alarm'}
-              className="bg-transparent outline-none h-[24px] w-[48px] flex justify-end"
-            >
-              <img
-                src={alarmSrc}
-                alt="back"
-                className={`object-cover w-auto h-full`}
-              />
-            </Link>
-          )}
-          {review && (
-            <Link
-              to={'/Review'}
-              className="bg-transparent outline-none h-[24px] w-[48px] flex justify-end"
-            >
-              <img
-                src={white ? '/assets/review_white.png' : '/assets/review.png'}
-                alt="back"
-                className={`object-cover w-auto h-full`}
-              />
-            </Link>
-          )}
-          {setting && (
-            <Link
-              to={'/Setting'}
-              className="bg-transparent outline-none h-[24px] w-[48px] flex justify-end"
-            >
-              <img
-                src="/assets/setting.png"
-                alt="back"
-                className={`object-cover w-auto h-full`}
-              />
-            </Link>
-          )}
-        </div>
+    <div
+      className={`max-w-screen-sm w-[100%] h-[56px] left-50% px-5 z-50 sticky top-0 flex justify-between items-center pl-3 leading-[56px] ${
+        white ? 'bg-inherit' : 'bg-white'
+      } ${border && 'border-b border-[#E5E5E5]'} ${className}`}
+    >
+      <div className="w-[100px]">
+        {back && (
+          <button
+            type="button"
+            onClick={toBackClick}
+            className="bg-transparent outline-none h-[24px] w-[24px] flex items-center"
+          >
+            <img
+              src={white ? '/assets/back_white.png' : '/assets/back.png'}
+              alt="back"
+              className={`object-cover w-auto h-full`}
+            />
+          </button>
+        )}
+      </div>
+      <div className="flex justify-center">
+        {text ? (
+          <p>{text}</p>
+        ) : (
+          <Link
+            to={'/'}
+            onClick={toBackClick}
+            className="bg-transparent outline-none h-[48px] flex justify-end"
+          >
+            <img
+              src="/assets/logo.png"
+              alt="back"
+              className="object-cover w-auto h-full"
+            />
+          </Link>
+        )}
+      </div>
+      <div className="flex w-[100px] justify-end">
+        {alarm && (
+          <Link
+            to={'/Alarm'}
+            className="bg-transparent outline-none h-[24px] w-[48px] flex justify-end"
+          >
+            <img
+              src={alarmSrc}
+              alt="back"
+              className={`object-cover w-auto h-full`}
+            />
+          </Link>
+        )}
+        {review && (
+          <Link
+            to={'/Review'}
+            className="bg-transparent outline-none h-[24px] w-[48px] flex justify-end"
+          >
+            <img
+              src={white ? '/assets/review_white.png' : '/assets/review.png'}
+              alt="back"
+              className={`object-cover w-auto h-full`}
+            />
+          </Link>
+        )}
+        {setting && (
+          <Link
+            to={'/Setting'}
+            className="bg-transparent outline-none h-[24px] w-[48px] flex justify-end"
+          >
+            <img
+              src="/assets/setting.png"
+              alt="back"
+              className={`object-cover w-auto h-full`}
+            />
+          </Link>
+        )}
       </div>
-      {search && <SearchMenu />}
     </div>
   );
 };

diff --git a/src/pages/component/Transfer.tsx b/src/pages/component/Transfer.tsx
@@ -0,0 +1,10 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+const Teansfer: React.FC = () => {
+  return (
+    <div className="absolute left-0 bottom-0 w-full flex items-center h-14 border-t border-gray-300"></div>
+  );
+};
+
+export default Teansfer;
diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx
@@ -8,6 +8,7 @@ import SearchPerson from '../pages/SearchPerson';
 import SearchPlace from '../pages/SearchPlace';
 import Store from '../pages/Store';
 import Videos from '../pages/Videos';
+import Setting from '../pages/Setting';
 import { useAuth } from '../api/auth';
 
 const Router = () => {
@@ -23,6 +24,7 @@ const Router = () => {
             <Route path="/SearchPlace" element={<SearchPlace />} />
             <Route path="/Store" element={<Store />} />
             <Route path="/Videos" element={<Videos />} />
+            <Route path="/setting" element={<Setting />} />
             <Route path="*" element={<Navigate to="/home" />} />
           </>
         ) : (