feat: add Videos

SPARCS-Service-Hackathon-2024 · Feb 15, 2024 · a43a0f8 · a43a0f8
1 parent c36db81
commit a43a0f8
Show file tree

Hide file tree

Showing 20 changed files with 131 additions and 20 deletions.
diff --git a/public/assets/back_white.png b/public/assets/back_white.png
diff --git a/public/assets/commant.png b/public/assets/commant.png
diff --git a/public/assets/heart.png b/public/assets/heart.png
diff --git a/public/assets/info.png b/public/assets/info.png
diff --git a/public/assets/review_white.png b/public/assets/review_white.png
diff --git a/public/assets/settings.png b/public/assets/settings.png
diff --git a/public/assets/share.png b/public/assets/share.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -10,6 +10,7 @@ import Alarm from './pages/Alarm';
 import SearchPerson from './pages/SearchPerson';
 import SearchPlace from './pages/SearchPlace';
 import Store from './pages/Store';
+import Videos from './pages/Videos';
 
 const App: React.FC = () => {
 
@@ -25,6 +26,7 @@ const App: React.FC = () => {
         <Route path='/SearchPerson' element={<SearchPerson/>}/>
         <Route path='/SearchPlace' element={<SearchPlace/>}/>
         <Route path='/Store' element={<Store/>}/>
+        <Route path='/Videos' element={<Videos/>}/>
       </Routes>
     </BrowserRouter>
   );

diff --git a/src/assets/no.mp4 b/src/assets/no.mp4
diff --git a/src/assets/src - 바로 가기.lnk b/src/assets/src - 바로 가기.lnk
diff --git a/src/main.tsx b/src/main.tsx
@@ -5,7 +5,7 @@ import './tailwind.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <div className='h-full'>
-      <div className="max-w-screen-sm min-w-screen min-h-screen mx-auto h-full bg-white">
+      <div className="max-w-screen-sm relative min-w-screen min-h-screen mx-auto h-full bg-white">
         <App />
       </div>
   </div>

diff --git a/src/pages/SearchPlace.tsx b/src/pages/SearchPlace.tsx
@@ -13,7 +13,7 @@ export default function SearchPlace() {
             <div className='pt-[56px] h-[100%] relative bg-[#f5f5f5] text-center pb-[80px]'>
                 <h1 className='text-2xl font-bold leading-[50px]'>검색하기 막막하시나요?</h1>
                 <p className='text-sm'>키워드 선택만 하시면 저희가 적합한 장소를 찾아드릴게요!</p>
-                <CategoryChoice icon={<GrMap className='mr-[10px]'/>} title="지역을 선택해주세요" category={["동구", "대덕구", "유성구", "중구", "서구"]} className='w-[50%]'/>
+                <CategoryChoice icon={<GrMap className='mr-[10px]'/>} title="지역을 선택해주세요" not={true} category={["동구", "대덕구", "유성구", "중구", "서구"]} className='w-[50%]'/>
                 <CategoryChoice icon={<GoPerson className='mr-[10px]'/>} not={true}  title="누구와 함께 가나요?" category={[ "혼자", "가족", "친구", "단체 모임", "연인", "부모님"]} className='w-[70%]'/>
                 <CategoryChoice title="지역을 선택해주세요" not={true} category={["데이트 코스", "맛집", "디저트", "교육적인", "추억만들기", "대전의 명물", "감성적인", "혼자서도 좋아요", "가족적인"]} className='w-[80%]'/>
                 <Btn text="적합한 장소 검색하기!" className="bg-[#2E83F2] text-[#ffffff] absolute bottom-[50px] left-[50%] translate-x-[-50%] w-[90%]"/>

diff --git a/src/pages/Videos.tsx b/src/pages/Videos.tsx
@@ -7,7 +7,7 @@ import Grade from './component/Grade';
 import Feel from './component/Feel'; 
 import Reviews from './component/Reviews';
 import Menu from './component/Menu';
-
+import Video from './component/Video';
 // type VideosProps = {
 //     type: string;
 //     profileImg: string;
@@ -21,9 +21,13 @@ import Menu from './component/Menu';
 
 export default function Videos() {
     return (
-        <div className='h-[100vh]'>
-            <Header back={true} alarm={true} />
-
+        <div className='h-[100vh] mb-[60px]'>
+            <Header back={true} review={true} white={true} text=' ' />
+            <Video  />
+            <Video  />
+            <Video  />
+            <Video  />
+            <Menu video={true}/>
         </div>
     );
 }

diff --git a/src/pages/Videos.txt b/src/pages/Videos.txt
diff --git a/src/pages/component/Comment.tsx b/src/pages/component/Comment.tsx
@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+// type CommentProps = {
+//     home?: boolean;
+//     map?: boolean;
+//     video?: boolean;
+//     mypage?: boolean;
+// }
+
+const Comment: React.FC = () => {
+
+
+    return (
+        <div className='w-full h-full'>
+            <div className="w-full h-full bg-black bg-opacity-50 absolute bottom-0 right-0"></div>
+            <div className="w-full h-[70%] bg-white rounded-t-2xl absolute bottom-0 right-0 z-50">
+                <div className="h-[70px] w-full">
+                    <div className="w-[15%] h-[3px] rounded-lg bg-[#D9D9D9] mt-[5px] mx-auto"></div>
+                    <h3 className="pl-[50px] leading-[56px] text-xl font-bold">
+                        댓글
+                    </h3>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Comment;
diff --git a/src/pages/component/Grade.tsx b/src/pages/component/Grade.tsx
@@ -7,16 +7,18 @@ import HalfStar from '../../assets/HalfStar.png'
 
 type GradeProps = {
     grade?: number;
+    className?: string;
+    className2?: string;
 }
 
-const Grade: React.FC<GradeProps> = ({ grade = 3.5 }) => {
+const Grade: React.FC<GradeProps> = ({ grade = 3.5, className, className2 }) => {
     const integerPart = Math.floor(grade);
     const restPart = grade % 1;
 
     const renderInteger = () => {
         const integerElements = [];
         for (let i = 0; i < integerPart; i++) {
-            integerElements.push(<div className='w-[6%] mr-1'><img className='w-full object-cover' src={YStar} alt="" /></div>);
+            integerElements.push(<div className={`w-[6%] mr-1 ${className}`}><img className='w-full object-cover' src={YStar} alt="" /></div>);
         }
         return integerElements;
     }
@@ -26,12 +28,12 @@ const Grade: React.FC<GradeProps> = ({ grade = 3.5 }) => {
     const renderRest = () => {
         const restElements = [];
         if (restPart >= 0.5) {
-            restElements.push(<div className='w-[6%] mr-1'><img className='w-full object-cover' src={HalfStar} alt="" /></div>);
+            restElements.push(<div className={`w-[6%] mr-1 ${className}`}><img className='w-full object-cover' src={HalfStar} alt="" /></div>);
         }else {
-            restElements.push(<div className='w-[6%] mr-1'><img className='w-full object-cover' src={GStar} alt="" /></div>);
+            restElements.push(<div className={`w-[6%] mr-1 ${className}`}><img className='w-full object-cover' src={GStar} alt="" /></div>);
         }
         for (let i = 0; i < 4-integerPart; i++) {
-            restElements.push(<div className='w-[6%] mr-1'><img className='w-full object-cover' src={GStar} alt="" /></div>);
+            restElements.push(<div className={`w-[6%] mr-1 ${className}`}><img className='w-full object-cover' src={GStar} alt="" /></div>);
         }
         return restElements;
     }
@@ -40,7 +42,7 @@ const Grade: React.FC<GradeProps> = ({ grade = 3.5 }) => {
         <div className='flex items-center mb-[10px]'>
             {renderInteger()}
             {renderRest()}
-            <p className='ml-2 text-2xl font-bold leading-[100%]'>{grade}</p>
+            <p className={`pl-2 text-2xl font-bold leading-[100%] ${className2}`}>{grade}</p>
         </div>
     );
 }

diff --git a/src/pages/component/Header.tsx b/src/pages/component/Header.tsx
@@ -12,9 +12,10 @@ type HeaderProps = {
     setting?: boolean;
     className?: string;
     border?: boolean;
+    white?: boolean;
 }
 
-const Header: React.FC<HeaderProps> = ({ text, back, alarm, review, search, className, setting, border}) => {
+const Header: React.FC<HeaderProps> = ({ text, back, alarm, review, search, className, setting, border, white}) => {
     let navigate = useNavigate();
 
     const toBackClick = () => {
@@ -24,17 +25,17 @@ const Header: React.FC<HeaderProps> = ({ text, back, alarm, review, search, clas
     return (
         <div>
 
-            <div className={` max-w-screen-sm w-[100%] h-[56px] top-0  left-50% px-5 z-50 fixed flex justify-between items-center pl-3 leading-[56px] bg-white ${ border && 'border-b border-[#E5E5E5]'} ${className}`}>
+            <div className={` max-w-screen-sm w-[100%] h-[56px] top-0  left-50% px-5 z-50 fixed 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 onClick={toBackClick} className='bg-transparent outline-none h-[24px] w-[24px] flex items-center'><img src="/assets/back.png" alt="back" className="object-cover w-auto h-full" /></button>}
+                {back && <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="/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>}
+                    {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>
             {search && <SearchMenu />}

diff --git a/src/pages/component/Menu.tsx b/src/pages/component/Menu.tsx
@@ -16,7 +16,7 @@ const Menu: React.FC<MenuProps> = ({home, map, video, mypage}) => {
 
 
     return (
-        <div className={`max-w-screen-sm w-[100%] h-[60px] bottom-0  left-50% z-50 fixed flex justify-between items-center border-t border-[#E5E5E5] bg-white`}>
+        <div className={`max-w-screen-sm w-[100%] h-[60px] bottom-0  left-50% z-30 fixed flex justify-between items-center border-t border-[#E5E5E5] bg-white`}>
             <Link to="/Home" className={`flex flex-col items-center justify-center text-sm w-[25%] h-[60px] text-[#000000] ${home ? 'text-[#000000]' : 'text-[#828282]'}`}>
                 <FiHome className='text-xl' />
                 <p>홈</p>
@@ -25,7 +25,7 @@ const Menu: React.FC<MenuProps> = ({home, map, video, mypage}) => {
                 <GrMap className='text-xl' />
                 <p>지도</p>
             </Link>
-            <Link to="/Video" className={`flex flex-col items-center justify-center text-sm w-[25%] h-[60px] ${video ? 'text-[#000000]' : 'text-[#828282]'}`}>
+            <Link to="/Videos" className={`flex flex-col items-center justify-center text-sm w-[25%] h-[60px] ${video ? 'text-[#000000]' : 'text-[#828282]'}`}>
                 <LuPlayCircle  className='text-xl' />
                 <p>탐색</p>
             </Link>

diff --git a/src/pages/component/Video.tsx b/src/pages/component/Video.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import Menu from './Menu';
+import Grade from './Grade';
+import Comment from './Comment';
+
+type VideoProps = {
+    src?: string;
+    name?: string;
+    grade?: string;
+}
+
+const Video: React.FC<VideoProps> = ({ src, grade, name }) => {
+    const [isPlaying, setIsPlaying] = useState<boolean>(true);
+
+    const handleVideoClick = () => {
+        setIsPlaying(prevState => !prevState);
+        console.log(isPlaying);
+    };
+
+
+    return (
+        <div className='w-full h-custom overflow-hidden relative bg-black' onClick={handleVideoClick}>
+            <video className='w-auto h-full object-contain m-auto' autoPlay={isPlaying} src="/no.mp4" muted>
+            </video>
+            <div className='bg-gradient-video w-full h-full absolute top-0 left-0'></div>
+            <div className="absolute right-5 bottom-[30%] z-10">
+                <div className="heart flex flex-col justify-center items-center">
+                    <div className="cursor-pointer">
+                        <img className='h-[20px] object-cover mt-6' src="/assets/heart.png" alt="" />
+                        <p className='text-white text-xs mt-1'>1235</p>
+                    </div>
+                    <div className="cursor-pointer">
+                        <img className='h-[20px] object-cover mt-3' src="/assets/commant.png" alt="" />
+
+                    </div>
+                    <div className="cursor-pointer">
+                        <img className='h-[20px] object-cover mt-6' src="/assets/share.png" alt="" />
+                    </div>
+                    <Link className='block h-[16px] mt-6' to=""><img className='h-[100%] w-auto object-cover ' src="/assets/info.png" alt="" /></Link>
+                </div>
+            </div>
+            <div className="absolute left-5 bottom-[30px]">
+                <div className="flex items-center">
+                    <div className="w-[48px] h-[48px] shrink-0 bg-gray-400 rounded-[48px] overflow-hidden">
+                        <img className='' src="/" alt="" />
+                    </div>
+                    <div className='pl-2'>
+                        <div className='flex items-center text-white text-sm'>
+                            <p className='text-white font-bold'>dawfawffawf</p>
+                            <button className='px-2 bg-inherit ml-2 border border-1 rounded-xl border-white text-white '>팔로우</button>
+                        </div>
+                        <p className='text-white text-sm leading-7'>유성구 둔산동 백년식당</p>
+                        <Grade grade={4.8} className={`w-[3%]`} className2={`text-sm text-white font-light`}/>
+                    </div>
+                </div>
+                <p className='text-sm my-2 text-white'>유성구 둔산동에 위치한 백년식당입니다.<br /> 다양한 반찬을 즐길 수 있습니다.</p>
+                <span className='px-2 bg-inherit mr-2 border border-1 rounded-xl border-white text-white'>#가족</span>
+                <span className='px-2 bg-inherit mr-2 border border-1 rounded-xl border-white text-white'>#맛집</span>
+            </div>
+            <Menu video={true}/>
+            <Comment />
+        </div>
+    );
+}
+
+export default Video;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,6 +6,12 @@ export default {
       boxShadow: {
         'custom': '0 4px 1px -2px rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 8px 0 rgba(0, 0, 0, 0.1)',
         'custom2' : 'rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset'
+      },
+      backgroundImage: {
+        'gradient-video': 'linear-gradient(to top,rgba(0,0,0,.4) 0,rgba(0,0,0,0) 160px),linear-gradient(to bottom,rgba(0,0,0,.4) 0,rgba(0,0,0,0) 96px)'
+      },
+      height: {
+        'custom': 'calc(100% - 60px)'
       }
     },
   },