diff --git a/public/assets/back_white.png b/public/assets/back_white.png new file mode 100644 index 0000000..a4c3ea5 Binary files /dev/null and b/public/assets/back_white.png differ diff --git a/public/assets/commant.png b/public/assets/commant.png new file mode 100644 index 0000000..152c726 Binary files /dev/null and b/public/assets/commant.png differ diff --git a/public/assets/heart.png b/public/assets/heart.png new file mode 100644 index 0000000..0485b12 Binary files /dev/null and b/public/assets/heart.png differ diff --git a/public/assets/info.png b/public/assets/info.png new file mode 100644 index 0000000..2ee2527 Binary files /dev/null and b/public/assets/info.png differ diff --git a/public/assets/review_white.png b/public/assets/review_white.png new file mode 100644 index 0000000..cc29ed5 Binary files /dev/null and b/public/assets/review_white.png differ diff --git a/public/assets/settings.png b/public/assets/settings.png new file mode 100644 index 0000000..c3afaa9 Binary files /dev/null and b/public/assets/settings.png differ diff --git a/public/assets/share.png b/public/assets/share.png new file mode 100644 index 0000000..ef5f4dd Binary files /dev/null and b/public/assets/share.png differ diff --git a/src/App.tsx b/src/App.tsx index bc06013..eeef950 100644 --- 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 = () => { }/> }/> }/> + }/> ); diff --git a/src/assets/no.mp4 b/src/assets/no.mp4 new file mode 100644 index 0000000..f59402b Binary files /dev/null and b/src/assets/no.mp4 differ diff --git "a/src/assets/src - \353\260\224\353\241\234 \352\260\200\352\270\260.lnk" "b/src/assets/src - \353\260\224\353\241\234 \352\260\200\352\270\260.lnk" deleted file mode 100644 index 28619f5..0000000 Binary files "a/src/assets/src - \353\260\224\353\241\234 \352\260\200\352\270\260.lnk" and /dev/null differ diff --git a/src/main.tsx b/src/main.tsx index 9414369..ca31d64 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -5,7 +5,7 @@ import './tailwind.css' ReactDOM.createRoot(document.getElementById('root')!).render(
-
+
diff --git a/src/pages/SearchPlace.tsx b/src/pages/SearchPlace.tsx index bad488a..ca9c8d2 100644 --- a/src/pages/SearchPlace.tsx +++ b/src/pages/SearchPlace.tsx @@ -13,7 +13,7 @@ export default function SearchPlace() {

검색하기 막막하시나요?

키워드 선택만 하시면 저희가 적합한 장소를 찾아드릴게요!

- } title="지역을 선택해주세요" category={["동구", "대덕구", "유성구", "중구", "서구"]} className='w-[50%]'/> + } title="지역을 선택해주세요" not={true} category={["동구", "대덕구", "유성구", "중구", "서구"]} className='w-[50%]'/> } not={true} title="누구와 함께 가나요?" category={[ "혼자", "가족", "친구", "단체 모임", "연인", "부모님"]} className='w-[70%]'/> diff --git a/src/pages/Videos.tsx b/src/pages/Videos.tsx index 85b6dac..d9ea300 100644 --- 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 ( -
-
- +
+
+
); } diff --git a/src/pages/Videos.txt b/src/pages/Videos.txt deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/component/Comment.tsx b/src/pages/component/Comment.tsx new file mode 100644 index 0000000..5ab9a88 --- /dev/null +++ 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 ( +
+
+
+
+
+

+ 댓글 +

+
+
+
+ ); +} + +export default Comment; diff --git a/src/pages/component/Grade.tsx b/src/pages/component/Grade.tsx index ad97dbf..d6bd7d3 100644 --- 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 = ({ grade = 3.5 }) => { +const Grade: React.FC = ({ 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(
); + integerElements.push(
); } return integerElements; } @@ -26,12 +28,12 @@ const Grade: React.FC = ({ grade = 3.5 }) => { const renderRest = () => { const restElements = []; if (restPart >= 0.5) { - restElements.push(
); + restElements.push(
); }else { - restElements.push(
); + restElements.push(
); } for (let i = 0; i < 4-integerPart; i++) { - restElements.push(
); + restElements.push(
); } return restElements; } @@ -40,7 +42,7 @@ const Grade: React.FC = ({ grade = 3.5 }) => {
{renderInteger()} {renderRest()} -

{grade}

+

{grade}

); } diff --git a/src/pages/component/Header.tsx b/src/pages/component/Header.tsx index 8701f8c..ba48d7e 100644 --- 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 = ({ text, back, alarm, review, search, className, setting, border}) => { +const Header: React.FC = ({ text, back, alarm, review, search, className, setting, border, white}) => { let navigate = useNavigate(); const toBackClick = () => { @@ -24,17 +25,17 @@ const Header: React.FC = ({ text, back, alarm, review, search, clas return (
-
+
- {back && } + {back && }
{text ?

{text}

: back}
- {alarm && back} - {review && back} - {setting && back} + {alarm && back} + {review && back} + {setting && back}
{search && } diff --git a/src/pages/component/Menu.tsx b/src/pages/component/Menu.tsx index 3ee4048..4e06025 100644 --- a/src/pages/component/Menu.tsx +++ b/src/pages/component/Menu.tsx @@ -16,7 +16,7 @@ const Menu: React.FC = ({home, map, video, mypage}) => { return ( -
+

홈

@@ -25,7 +25,7 @@ const Menu: React.FC = ({home, map, video, mypage}) => {

지도

- +

탐색

diff --git a/src/pages/component/Video.tsx b/src/pages/component/Video.tsx index e69de29..445ce1c 100644 --- 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 = ({ src, grade, name }) => { + const [isPlaying, setIsPlaying] = useState(true); + + const handleVideoClick = () => { + setIsPlaying(prevState => !prevState); + console.log(isPlaying); + }; + + + return ( +
+ +
+
+
+
+ +

1235

+
+
+ + +
+
+ +
+ +
+
+
+
+
+ +
+
+
+

dawfawffawf

+ +
+

유성구 둔산동 백년식당

+ +
+
+

유성구 둔산동에 위치한 백년식당입니다.
다양한 반찬을 즐길 수 있습니다.

+ #가족 + #맛집 +
+ + +
+ ); +} + +export default Video; diff --git a/tailwind.config.js b/tailwind.config.js index 531311c..2f1fc72 100644 --- 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)' } }, },