From 1188bf71fc7e73650fb794fb0d3e7e3f624d215a Mon Sep 17 00:00:00 2001 From: Suhyun Date: Thu, 12 Sep 2024 15:46:01 +0900 Subject: [PATCH 001/181] =?UTF-8?q?feature:=20button=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20Theme=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=EC=97=90=20Colors=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/LongButton.tsx | 43 +++++++++++++++++++++++++ src/components/ShortButton.tsx | 57 ++++++++++++++++++++++++++++++++++ src/styles/Theme.tsx | 3 +- 3 files changed, 102 insertions(+), 1 deletion(-) create mode 100644 src/components/LongButton.tsx create mode 100644 src/components/ShortButton.tsx diff --git a/src/components/LongButton.tsx b/src/components/LongButton.tsx new file mode 100644 index 0000000..f6084df --- /dev/null +++ b/src/components/LongButton.tsx @@ -0,0 +1,43 @@ +import { css } from '@emotion/react' +import { Colors, FontSize } from '@/styles/Theme' +import { ReactNode } from 'react' + +interface LongButtonProps { + children: ReactNode + text: string + onClick: () => void + type?: 'button' | 'submit' +} + +const LongButton = ({ + children, + onClick, + type = 'submit' +}: LongButtonProps) => { + return ( + + ) +} + +const longButtonStyle = css` + display: flex; + width: 327px; + height: 48px; + padding: 12px 16px; + justify-content: center; + align-items: center; + gap: 10px; + flex-shrink: 0; + border-radius: 3px; + background-color: ${Colors.lightBlue}; + border: none; + font-size: ${FontSize.lg}; + color: ${Colors.white}; +` + +export default LongButton diff --git a/src/components/ShortButton.tsx b/src/components/ShortButton.tsx new file mode 100644 index 0000000..ee5f32a --- /dev/null +++ b/src/components/ShortButton.tsx @@ -0,0 +1,57 @@ +import { css, SerializedStyles } from '@emotion/react' +import { Colors, FontSize } from '@/styles/Theme' +import { ReactNode } from 'react' + +interface ShortButtonProps { + children: ReactNode + text?: string + onClick: () => void + type?: 'button' | 'submit' + styleType: 'confirm' | 'cancel' +} + +const ShortButton = ({ + children, + onClick, + type = 'button', + styleType +}: ShortButtonProps) => { + return ( + + ) +} + +const baseButtonStyle = css` + display: flex; + width: 160px; + height: 35px; + padding: 8px 11px; + justify-content: center; + align-items: center; + justify-content: center; + align-items: center; + gap: 7px; + flex: 1 0 0; + border: none; + border-radius: 3px; +` + +const buttonStyle = { + confirm: css` + background-color: ${Colors.lightBlue}; + font-size: ${FontSize.md}; + color: ${Colors.white}; + `, + cancel: css` + background-color: ${Colors.lightGrey}; + font-size: ${FontSize.md}; + color: ${Colors.black}; + ` +} + +export default ShortButton diff --git a/src/styles/Theme.tsx b/src/styles/Theme.tsx index 128be81..06f8b07 100644 --- a/src/styles/Theme.tsx +++ b/src/styles/Theme.tsx @@ -6,7 +6,8 @@ export const Colors = { black: '#1E1E1E', lightGrey: '#EBEBEB', red: '#D32F2F', - white: '#FFFFFF' + white: '#FFFFFF', + grey: '#B3B3B3' } export const FontSize = { xs: '12px', From ee6cd92c1162d5b418abe5f3c0b6e43564d7d60e Mon Sep 17 00:00:00 2001 From: nanafromjeju Date: Thu, 12 Sep 2024 16:48:42 +0900 Subject: [PATCH 002/181] =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/logo.png | Bin 0 -> 2219 bytes src/components/theCommon/Category.tsx | 88 ++++++++++++++++++++ src/components/theCommon/PlaylistDetail.tsx | 0 src/pages/Home.tsx | 3 +- 4 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 src/assets/logo.png create mode 100644 src/components/theCommon/Category.tsx create mode 100644 src/components/theCommon/PlaylistDetail.tsx diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..323e7fa1213525e5a7c37069abf05561328d71b1 GIT binary patch literal 2219 zcmV;c2vqlpP)oB%jMoD&$NY+_>pifu*80$4EGJ4;mpN&tB_g)xoyP@IbDtKlStq zM{*7Ce|e$?XaKQ6Uu>|A469YwaCVBdvLR#e;y3+J&iiiGd7B`&=a$&>*wwb=NNN7k zuU=~RJe2|>1F;mM`PQB1q6~LlZ){?wRQezJb$A% zuU0f>+D2(CONZD=N-y{t($E)0+d%-iF;n=H#&BeVQ5T8#wN%y^GXD;>5QROGUr}?< zI%KfdF%`*?zlH;`-vjGR`Aw;HW8^~~h1^s*ej7CrM@|ue#RYo}DQY6$VZW{oe*R7k zMP*koPlr+%hUTA{!lx5u3cD$NiKn%Cb$}{OxTvM3S1_t1H**zX)V6`ajHD#ge`Rhe z=784NMFhI`M<%M2AcPIMDF?o#f)G`*$0y-KXroFRQK)5u0;5nrywxigTAWhjO9Y@M zr3I>^$#;JhtIT4ZN#cHrFpAN@0ee8ODj9T`GeuIRfgJ? z@a%rP$m`PHa0>-E-ueTWAngl_V4o_MWO8TPb#vvNmV}J1W(r z(ny|^D`7My%H-(bGQBa9-uVg+IvuClOxn2%j-!0YTuG+thsnH1>qKm0RY_lP>SU&a zFbC{3kf~4;Q!%!KtSdStVVNisaRK9VcRnPef@RkbnNbA!vWKyI&6IO&6Kw{?b(o82-j} zXi)QTa@<3-h)14;*m=^G&$d6wS!zb=U5U6$5sbr@RB4C?VCMD8s#I_`#vz!2L0}=* z2hTidt4YN#s!M5ABN^>k1LjrI+KG7ndRlcn+xzR1Ps}=%<089x9kzx<yFBf6ry@u^_bi}!_kJqzu9#jBgjXww^@hNo?v6LLyby z)aL-wm^VgsRN}3v;ddEtXCmrbmD3Am>Vr+hn+$cf=Rm*+|QWb@rN9LbQJWbWR*cpv|i|7MJNV?^V4Ug}!n-3Z;D zJ6B?^fh_HF~$`2T4F-nw3<$A zm`6{gWBmn^wnH78C&@_ksLed7OzlVF7-JekG9j+%USw{jGiQTUTdIaspe{J)>vh7W zSMt>>sk5QjQYPEiFekbQz=S%fjxSfWkwm!h!hRKe>}mAvP$rOh6TNwcgtyy}CzS~*4HS$M94>e+sEiTfT-ahEF@=)vQ8YwNYN(ewX3>R;Gt#jI%!FI&)K-XNRLM3=!ZwXKm(H<3v`c1mHaiK;&%2G} zgO;SYIz1QkSY)BhCSRx6inRk?6lF3vVPvB9O#66{4+t&j**GMKz_CG@SO<$%#0LTUAF%xBlE>8N0zKalTIPs=dv2 tJ$C;mJr^|}nI+>cM1&s@IQu{P&%WFP4xf(002ovPDHLkV1kH}7bE}x literal 0 HcmV?d00001 diff --git a/src/components/theCommon/Category.tsx b/src/components/theCommon/Category.tsx new file mode 100644 index 0000000..937d32f --- /dev/null +++ b/src/components/theCommon/Category.tsx @@ -0,0 +1,88 @@ +import { css } from '@emotion/react' +import { Colors } from '@/styles/Theme' +import { FontSize } from '@/styles/Theme' + +const baseButtonStyle = css` + display: inline-flex; + padding: 8px 14px; + align-items: center; + justify-content: center; + border-radius: 5px; + border: 1px solid ${Colors.lightBlue}; + cursor: pointer; + font-size: ${FontSize.sm} + line-height: 100%; + letter-spacing: -0.18px; + transition: background-color 0.3s ease; +` + +const buttonStyle = { + primary: css` + background-color: ${Colors.white}; + color: ${Colors.lightBlue}; + &:hover { + background-color: ${Colors.lightBlue}; + color: ${Colors.white}; + } + `, + secondary: css` + background-color: ${Colors.lightBlue}; + color: ${Colors.white}; + &:hover { + background-color: ${Colors.white}; + color: ${Colors.lightBlue}; + } + ` +} +const CategoryButton = ({ + children, + onClick, + styleType = 'primary' +}: { + children: React.ReactNode + onClick?: () => void + styleType?: 'primary' | 'secondary' +}) => { + return ( + + ) +} + +const CategoryContainer = css` + list-style-type: none; + padding: 0; + display: flex; + flex-wrap: wrap; + gap: 10px; +` + +const Category = () => { + return ( +
    +
  • + 전체 +
    • +
  • + 상체 +
    • +
  • + 하체 +
    • +
  • + 스트레칭 +
    • +
  • + 유산소 +
    • +
  • + 전신 +
    • +
+ ) +} + +export default Category diff --git a/src/components/theCommon/PlaylistDetail.tsx b/src/components/theCommon/PlaylistDetail.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 2e2ee73..650eb45 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,10 +1,11 @@ import Header from '@/components/theLayout/theHeader/Header' +import Category from '@/components/theCommon/Category' const Home = () => { return ( <>
-

Home

+ ) } From fddc6ba341429c331fa2016cfb6a70a350a1a12c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=98=81=EC=9D=80?= <95126m@naver.com> Date: Thu, 12 Sep 2024 22:35:22 +0900 Subject: [PATCH 003/181] =?UTF-8?q?modal=20=EC=B6=94=EA=B0=80=20=EB=B0=8F?= =?UTF-8?q?=20addPlaylist=20=EC=A0=9C=EC=9E=91=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 1 - src/components/theLayout/Modal.tsx | 102 +++++++++++++++++++++++++++++ src/pages/AddPlaylist.tsx | 50 +++++++++++++- 3 files changed, 150 insertions(+), 3 deletions(-) create mode 100644 src/components/theLayout/Modal.tsx diff --git a/package-lock.json b/package-lock.json index da55847..84230fe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -318,7 +318,6 @@ "version": "11.13.3", "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz", "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==", - "license": "MIT", "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.12.0", diff --git a/src/components/theLayout/Modal.tsx b/src/components/theLayout/Modal.tsx new file mode 100644 index 0000000..3a942aa --- /dev/null +++ b/src/components/theLayout/Modal.tsx @@ -0,0 +1,102 @@ +import React from 'react'; +import { css } from '@emotion/react'; +import { Colors, FontSize, FontWeight } from '@/styles/Theme'; + +type ModalProps = { + isOpen: boolean; + onClose: () => void; + onDelete: () => void; +}; + +const Modal: React.FC = ({ isOpen, onClose, onDelete }) => { + if (!isOpen) return null; + return ( +
+
+

+ 선택한 컨텐츠를 삭제하시겠습니까? +

+

+ 삭제된 컨텐츠는 복구할 수 없습니다. +

+ +
+ + + +
+
+
+ ); +}; + +const overlayStyle = css` + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +`; + +const modalStyle = css` + background-color: ${Colors.white}; + padding: 30px; + border-radius: 5px; + width: 356px; + height: 160px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + position: relative; + color: ${Colors.black}; +`; + +const buttonContainerStyle = css` + display: flex; + justify-content: space-between; + margin-top: 30px; +`; + +const closeButtonStyle = css` + height: 35px; + width: 160px; + background-color: ${Colors.lightGrey}; + border: none; + font-size: ${FontSize.md}; + font-weight: ${FontWeight.semiBold}; + cursor: pointer; + border-radius: 3px; +`; + +const deleteButtonStyle = css` + height: 35px; + width: 160px; + margin-left: 8px; + background-color: ${Colors.lightBlue}; + border: none; + color: ${Colors.white}; + font-size: ${FontSize.md}; + font-weight: ${FontWeight.semiBold}; + cursor: pointer; + border-radius: 3px; +`; + +export default Modal; diff --git a/src/pages/AddPlaylist.tsx b/src/pages/AddPlaylist.tsx index fbaa26d..4771adc 100644 --- a/src/pages/AddPlaylist.tsx +++ b/src/pages/AddPlaylist.tsx @@ -1,12 +1,58 @@ import Header from '@/components/theLayout/theHeader/Header' +import Modal from '@/components/theLayout/Modal' +import React, { useState } from 'react' +function Radio({ children, name, value, defaultChecked }) { + return ( + + ) +} const AddPlaylist = () => { + const [isModalOpen, setIsModalOpen] = useState(false) + + const openModal = () => { + setIsModalOpen(true) + }; + + const closeModal = () => { + setIsModalOpen(false) + }; + + const deletePlaylist = () => { + setIsModalOpen(false); + } return ( <>
-

Add Playlist

+
동영상 링크 + + +
+ +
플레이리스트 제목 + +
+ +
설명 + +
+ +
카테고리 설정 + +
+ +
공개 설정 + 공개 + 비공개 +
+ + + ) } -export default AddPlaylist +export default AddPlaylist; From 0201400d6487688187eba952bc5945713d72fdf6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=98=81=EC=9D=80?= <95126m@naver.com> Date: Thu, 12 Sep 2024 23:56:24 +0900 Subject: [PATCH 004/181] =?UTF-8?q?modal=20=ED=8C=8C=EC=9D=BC=EC=9D=84=20c?= =?UTF-8?q?ommon=20=ED=8F=B4=EB=8D=94=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{theLayout => theCommon}/Modal.tsx | 0 src/pages/AddPlaylist.tsx | 84 ++++++++++++------- 2 files changed, 56 insertions(+), 28 deletions(-) rename src/components/{theLayout => theCommon}/Modal.tsx (100%) diff --git a/src/components/theLayout/Modal.tsx b/src/components/theCommon/Modal.tsx similarity index 100% rename from src/components/theLayout/Modal.tsx rename to src/components/theCommon/Modal.tsx diff --git a/src/pages/AddPlaylist.tsx b/src/pages/AddPlaylist.tsx index 4771adc..d903160 100644 --- a/src/pages/AddPlaylist.tsx +++ b/src/pages/AddPlaylist.tsx @@ -1,6 +1,9 @@ -import Header from '@/components/theLayout/theHeader/Header' -import Modal from '@/components/theLayout/Modal' import React, { useState } from 'react' +import Header from '@/components/theLayout/theHeader/Header' +import Category from '@/components/theCommon/Category' +import { css } from '@emotion/react' +import { Colors, FontSize, FontWeight } from '@/styles/Theme' +import { GrAddCircle } from "react-icons/gr" function Radio({ children, name, value, defaultChecked }) { return ( @@ -11,48 +14,73 @@ function Radio({ children, name, value, defaultChecked }) { ) } const AddPlaylist = () => { - const [isModalOpen, setIsModalOpen] = useState(false) - - const openModal = () => { - setIsModalOpen(true) - }; - - const closeModal = () => { - setIsModalOpen(false) - }; - - const deletePlaylist = () => { - setIsModalOpen(false); - } return ( <>
-
동영상 링크 - - +
+
동영상 링크
+ +
-
플레이리스트 제목 - +
+
플레이리스트 제목
+
-
설명 - +
+
설명
+
-
카테고리 설정 - +
+
카테고리 설정
+
-
공개 설정 +
+
공개 설정
공개 비공개
- - - ) } +const DivContainer = css` + position: relative; + display: inline-block; + width: 315px; +` +const TitleContainer = css` + font-size: ${FontSize.md}; + display: flex; + align-items: center; + margin-bottom: 10px; +` +const InputContainer = css` + border: none; + border-bottom: 2px solid #EBEBEB; + outline: none; + font-size: ${FontSize.md}; + font-weight: ${FontWeight.medium}; + color: ${Colors.black}; + height: 30px; + width: 100%; + letter-spacing: -0.2px; + padding-left: 10px; + padding-right: 40px; + box-sizing: border-box; + margin-bottom: 35px; +` +const AddButton = css` + position: absolute; + right: 0; + bottom: 50px; + transform: translateY(50%); + border: none; + background-color: transparent; + cursor: pointer; +` + export default AddPlaylist; From 1b025240532cb2c381db8d08472578d247518771 Mon Sep 17 00:00:00 2001 From: Suhyun Date: Fri, 13 Sep 2024 01:22:56 +0900 Subject: [PATCH 005/181] =?UTF-8?q?feature:=20navigation=20onClick=20?= =?UTF-8?q?=ED=9A=A8=EA=B3=BC=20=EB=B0=8F=20=EC=8A=A4=ED=83=80=EC=9D=BC?= =?UTF-8?q?=EB=A7=81,=20LongButton=20=EA=B8=80=EC=9E=90=20=ED=81=AC?= =?UTF-8?q?=EA=B8=B0=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20profile=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20=EC=82=BD=EC=9E=85(?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=20=EC=98=88=EC=8B=9C)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/LongButton.tsx | 2 +- .../theLayout/theNavigation/Navigation.tsx | 49 ++++++++++++++++--- .../theNavigation/NavigationItem.tsx | 41 ++++++++++++++-- src/pages/Profile.tsx | 17 ++++++- 4 files changed, 96 insertions(+), 13 deletions(-) diff --git a/src/components/LongButton.tsx b/src/components/LongButton.tsx index f6084df..a904ab4 100644 --- a/src/components/LongButton.tsx +++ b/src/components/LongButton.tsx @@ -36,7 +36,7 @@ const longButtonStyle = css` border-radius: 3px; background-color: ${Colors.lightBlue}; border: none; - font-size: ${FontSize.lg}; + font-size: ${FontSize.md}; color: ${Colors.white}; ` diff --git a/src/components/theLayout/theNavigation/Navigation.tsx b/src/components/theLayout/theNavigation/Navigation.tsx index 26791d1..9a12074 100644 --- a/src/components/theLayout/theNavigation/Navigation.tsx +++ b/src/components/theLayout/theNavigation/Navigation.tsx @@ -6,32 +6,57 @@ import { CgProfile } from 'react-icons/cg' import { css } from '@emotion/react' -import { Colors, Width } from '@/styles/Theme' +import { Colors, Width, FontSize } from '@/styles/Theme' import NavigationItem from './NavigationItem' +import { useLocation, useNavigate } from 'react-router-dom' +import React, { useState } from 'react' const Navigation = () => { + const location = useLocation() + const navigate = useNavigate() + const [path, setPath] = React.useState(location.pathname) + + const handleNavigation = (path: string) => { + setPath(path) + navigate(path) + } + return ( @@ -40,7 +65,7 @@ const Navigation = () => { const navbar = css` display: flex; - justify-content: space-around; + justify-content: space-evenly; align-items: center; height: 72px; position: fixed; @@ -50,9 +75,17 @@ const navbar = css` transform: translateX(-50%); background-color: ${Colors.black}; color: ${Colors.lightGrey}; - opacity: 0.8; z-index: 100; - border-radius: 10px 10px 0 0; + border-radius: 45px 45px 0 0; +` + +const addButtonStyle = css` + background-color: ${Colors.paleBlue}; + border-radius: 50%; + padding: 25px; + position: relative; + top: -14px; + font-size: ${FontSize.xxl}; ` export default Navigation diff --git a/src/components/theLayout/theNavigation/NavigationItem.tsx b/src/components/theLayout/theNavigation/NavigationItem.tsx index 315d4bd..6a577cd 100644 --- a/src/components/theLayout/theNavigation/NavigationItem.tsx +++ b/src/components/theLayout/theNavigation/NavigationItem.tsx @@ -1,23 +1,58 @@ import { NavLink } from 'react-router-dom' import { css } from '@emotion/react' import { IconType } from 'react-icons' +import { FontSize, Colors } from '@/styles/Theme' interface NavigationItemProps { path: string Icon: IconType + label?: string + isActive?: boolean + onClick?: () => void } -const NavigationItem = ({ path, Icon }: NavigationItemProps) => { +const NavigationItem = ({ + path, + Icon, + label, + isActive, + onClick +}: NavigationItemProps) => { return ( - - + +
+ + {label} +
) } +const navLinkStyle = css` + text-decoration: none; + color: inherit; + cursor: pointer; +` + +const iconStyle = css` + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + font-size: ${FontSize.xs}; + color: ${Colors.charcoalGrey}; + gap: 3px; +` + const icon = css` font-size: 24px; opacity: 0.8; ` +const activeIconStyle = css` + color: ${Colors.paleBlue}; +` export default NavigationItem diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index 4342181..62e7447 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -1,12 +1,27 @@ import Header from '@/components/theLayout/theHeader/Header' +import LongButton from '@/components/LongButton' +import { css } from '@emotion/react' const Profile = () => { return ( <>
-

Profile

+
+

Profile

+ alert('Click')} + text="Click Me"> + 로그아웃 + +
) } +const pageStyle = css` + display: flex; + flex-direction: column; + gap: 20px; +` + export default Profile From 1a6eed80ba0a78d84d3adc4c2d72b5662d0e1ead Mon Sep 17 00:00:00 2001 From: Suhyun Date: Fri, 13 Sep 2024 01:28:10 +0900 Subject: [PATCH 006/181] =?UTF-8?q?etc:=20Button=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20theCommon=20=ED=8F=B4=EB=8D=94=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/{ => theCommon}/LongButton.tsx | 0 src/components/{ => theCommon}/ShortButton.tsx | 0 src/pages/Profile.tsx | 2 +- 3 files changed, 1 insertion(+), 1 deletion(-) rename src/components/{ => theCommon}/LongButton.tsx (100%) rename src/components/{ => theCommon}/ShortButton.tsx (100%) diff --git a/src/components/LongButton.tsx b/src/components/theCommon/LongButton.tsx similarity index 100% rename from src/components/LongButton.tsx rename to src/components/theCommon/LongButton.tsx diff --git a/src/components/ShortButton.tsx b/src/components/theCommon/ShortButton.tsx similarity index 100% rename from src/components/ShortButton.tsx rename to src/components/theCommon/ShortButton.tsx diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index 62e7447..6963b9e 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -1,5 +1,5 @@ import Header from '@/components/theLayout/theHeader/Header' -import LongButton from '@/components/LongButton' +import LongButton from '@/components/theCommon/LongButton' import { css } from '@emotion/react' const Profile = () => { From af3b1cb6c6f58b09fdf9c8c6c63e840c51b63e75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=98=81=EC=9D=80?= <95126m@naver.com> Date: Fri, 13 Sep 2024 01:38:33 +0900 Subject: [PATCH 007/181] =?UTF-8?q?AddPlaylist=20css=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/AddPlaylist.tsx | 61 +++++++++++++++++++++++++++++---------- 1 file changed, 45 insertions(+), 16 deletions(-) diff --git a/src/pages/AddPlaylist.tsx b/src/pages/AddPlaylist.tsx index d903160..0f41ff6 100644 --- a/src/pages/AddPlaylist.tsx +++ b/src/pages/AddPlaylist.tsx @@ -5,22 +5,20 @@ import { css } from '@emotion/react' import { Colors, FontSize, FontWeight } from '@/styles/Theme' import { GrAddCircle } from "react-icons/gr" -function Radio({ children, name, value, defaultChecked }) { - return ( - - ) -} const AddPlaylist = () => { + const [visibility, setVisibility] = useState("Open"); + const handleVisibilityChange = (event: React.ChangeEvent) => { + setVisibility(event.target.value); + }; + return ( <>
+
-
동영상 링크
- - +
동영상 링크
+ +
@@ -35,13 +33,33 @@ const AddPlaylist = () => {
카테고리 설정
- -
+
+ +
+
공개 설정
- 공개 - 비공개 + +
) @@ -50,7 +68,7 @@ const AddPlaylist = () => { const DivContainer = css` position: relative; display: inline-block; - width: 315px; + width: 100%; ` const TitleContainer = css` font-size: ${FontSize.md}; @@ -82,5 +100,16 @@ const AddButton = css` background-color: transparent; cursor: pointer; ` +const CategoryStyle = css` + margin-bottom: 35px; +` +const RadioLabelStyle = css` + margin-right: 20px; + display: inline-block; +`; + +const RadioInputStyle = css` + margin-right: 8px; +`; export default AddPlaylist; From 3ab3d8e03da843a6dd839473dace4628c3b33966 Mon Sep 17 00:00:00 2001 From: Panda-racoon Date: Fri, 13 Sep 2024 01:38:49 +0900 Subject: [PATCH 008/181] =?UTF-8?q?=ED=86=A0=EC=8A=A4=ED=8A=B8=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/theCommon/Toast.tsx | 64 ++++++++++++++++++++++++++++++ src/pages/Bookmark.tsx | 33 +++++++++++++-- 2 files changed, 94 insertions(+), 3 deletions(-) create mode 100644 src/components/theCommon/Toast.tsx diff --git a/src/components/theCommon/Toast.tsx b/src/components/theCommon/Toast.tsx new file mode 100644 index 0000000..5f95ec5 --- /dev/null +++ b/src/components/theCommon/Toast.tsx @@ -0,0 +1,64 @@ +import React, { useEffect } from 'react' +import { css } from '@emotion/react' +import { Colors } from '@/styles/Theme' +import { FontSize } from '@/styles/Theme' +import { CgCheckO } from 'react-icons/cg' + +const toastStyle = css` + display: inline-flex; + align-items: center; + gap: 12px; + padding: 12px 16px; + background-color: ${Colors.charcoalGrey}; + color: ${Colors.white}; + border-radius: 6px; + font-size: ${FontSize.md}; + position: fixed; + bottom: 100px; + left: 50%; + transform: translateX(-50%); + z-index: 1000; + transition: opacity 0.5s ease-in-out; + opacity: 1; +` + +const hiddenStyle = css` + opacity: 0; + transition: opacity 0.5s ease-in-out; +` + +interface ToastProps { + message: string + duration?: number + isVisible: boolean + onHide: () => void +} + +const Toast: React.FC = ({ + message, + duration = 2000, + isVisible, + onHide +}) => { + useEffect(() => { + if (isVisible) { + const timer = setTimeout(() => { + onHide() + }, duration) + + return () => clearTimeout(timer) + } + }, [isVisible, duration, onHide]) + + return ( +
+ + {message} +
+ ) +} + +export default Toast diff --git a/src/pages/Bookmark.tsx b/src/pages/Bookmark.tsx index d00b588..3de525d 100644 --- a/src/pages/Bookmark.tsx +++ b/src/pages/Bookmark.tsx @@ -1,10 +1,37 @@ +import React, { useState } from 'react' import Header from '@/components/theLayout/theHeader/Header' +import Category from '@/components/theCommon/Category' +import Toast from '@/components/theCommon/Toast' + +const Bookmark: React.FC = () => { + const [isToastVisible, setIsToastVisible] = useState(false) + + const handleToastShow = () => { + setIsToastVisible(true) + } -const Bookmark = () => { return ( <> -
-

Bookmark

+
+ +
+

토스트테스트

+
+ {isToastVisible && ( + setIsToastVisible(false)} + /> + )} ) } From 69680321bc492571a5c9c23c2bef5967a009ac20 Mon Sep 17 00:00:00 2001 From: Suhyun Date: Fri, 13 Sep 2024 02:59:26 +0900 Subject: [PATCH 009/181] =?UTF-8?q?feature:=20EmptyInfo=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/theEmptyInfo/EmptyInfo.tsx | 39 +++++++++++++++++++++++ src/pages/MyPlaylist.tsx | 11 +++++-- 2 files changed, 48 insertions(+), 2 deletions(-) create mode 100644 src/components/theEmptyInfo/EmptyInfo.tsx diff --git a/src/components/theEmptyInfo/EmptyInfo.tsx b/src/components/theEmptyInfo/EmptyInfo.tsx new file mode 100644 index 0000000..a3eaec2 --- /dev/null +++ b/src/components/theEmptyInfo/EmptyInfo.tsx @@ -0,0 +1,39 @@ +import { css } from '@emotion/react' +import { Colors, FontSize } from '@/styles/Theme' + +interface EmptyInfoProps { + title: string + status: string +} + +const EmptyInfo = ({ title, status }: EmptyInfoProps) => { + return ( +
+ + {status}된 {title}가 없습니다. + + {title}를 추가해주세요. +
+ ) +} +// 문구 예시 +// 북마크된 플레이리스트가 없습니다 +// 등록된 코멘트가 없습니다 + +const sentenceContainerStyle = css` + display: flex; + flex-direction: column; + gap: 5px; + justify-content: center; + align-items: center; +` +const firstSentenceStyle = css` + font-size: ${FontSize.lg}; + color: ${Colors.charcoalGrey}; +` + +const secondSentenceStyle = css` + font-size: ${FontSize.md}; + color: ${Colors.grey}; +` +export default EmptyInfo diff --git a/src/pages/MyPlaylist.tsx b/src/pages/MyPlaylist.tsx index 7d34277..f919033 100644 --- a/src/pages/MyPlaylist.tsx +++ b/src/pages/MyPlaylist.tsx @@ -1,11 +1,18 @@ import Header from '@/components/theLayout/theHeader/Header' -import React from 'react' +import Category from '@/components/theCommon/Category' +import EmptyInfo from '@/components/theEmptyInfo/EmptyInfo' const MyPlaylist = () => { return ( <>
-

My Playlist

+
+ + +
) } From 02b580c485a37425f9401a9678b79037e744d0c8 Mon Sep 17 00:00:00 2001 From: nanafromjeju Date: Fri, 13 Sep 2024 04:17:50 +0900 Subject: [PATCH 010/181] =?UTF-8?q?=ED=99=88=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?Ui=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- package-lock.json | 2 - src/App.tsx | 10 +- src/assets/favicon.ico | Bin 0 -> 26814 bytes src/assets/{logo.png => favicon.png} | Bin src/components/theCommon/Category.tsx | 93 ++++++------- .../theLayout/theHeader/BackButtonHeader.tsx | 55 ++++++++ .../theLayout/theHeader/LogoHeader.tsx | 38 ++++++ src/components/thePlaylist/Feed.tsx | 124 ++++++++++++++++++ src/pages/Home.tsx | 29 +++- src/pages/Login.tsx | 0 src/pages/PlaylistDetailPage.tsx | 12 ++ src/styles/Theme.tsx | 1 + 13 files changed, 315 insertions(+), 51 deletions(-) create mode 100644 src/assets/favicon.ico rename src/assets/{logo.png => favicon.png} (100%) create mode 100644 src/components/theLayout/theHeader/BackButtonHeader.tsx create mode 100644 src/components/theLayout/theHeader/LogoHeader.tsx create mode 100644 src/components/thePlaylist/Feed.tsx create mode 100644 src/pages/Login.tsx create mode 100644 src/pages/PlaylistDetailPage.tsx diff --git a/index.html b/index.html index a9e6bb5..06cfbf9 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ + href="/src/assets/favicon.ico" /> diff --git a/package-lock.json b/package-lock.json index da55847..2e6f4de 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5790,7 +5790,6 @@ "version": "5.3.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", - "license": "MIT", "peerDependencies": { "react": "*" } @@ -5820,7 +5819,6 @@ "version": "6.26.2", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz", "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==", - "license": "MIT", "dependencies": { "@remix-run/router": "1.19.2", "react-router": "6.26.2" diff --git a/src/App.tsx b/src/App.tsx index e26be9a..0c159a6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,13 +5,21 @@ import AddPlaylist from '@/pages/AddPlaylist' import Bookmark from '@/pages/Bookmark' import MyPlaylist from '@/pages/MyPlaylist' import Profile from '@/pages/Profile' +import PlaylistDetailPage from '@/pages/PlaylistDetailPage' const router = createBrowserRouter([ { path: '/', element: , children: [ - { index: true, element: }, + { + index: true, + element: + }, + { + path: '/PlaylistDetailPage', + element: + }, { path: '/addplaylist', element: }, { path: '/bookmark', element: }, { path: '/myplaylist', element: }, diff --git a/src/assets/favicon.ico b/src/assets/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..c73f4ac24c20d5b98798278cc77051e16e854f23 GIT binary patch literal 26814 zcmeHPy>1*g5T+s^>LOPub7}&lNTD)Ckn`vx|0x^ol2DbqP` zkb46^!rdEKr3yit8FDFcxg_V~F89s|q+qkVv*d7oz8Ma=dsga*{#$;n=>KQx@1K|bfDv7VD$+oWu4U-DsSe8z~_SNES+q5iov5%(4gf6Sh{yy1Sf{}^Y& zfGd-KT@waGTXLKKE0#DfL3S^bcSSo|S$r%Z@nZXqc~0P|7?wy^AE&AN`Yro#cCK?i z=Y2l-{>{Z%s$b|CVWD?kVtyEwF5ia6&ZWUvTF#%jydfRO#88WOIIa$XC1_qHT)DPP zT|;(`%yG;Y>R)IMCoF;WPFsJ-Pc45Z>z}@Llj%n_PsksTjK~}Z<|SS0uBeui^?o0c zH$;Q5kirr&&#&gNJRun^4U&~@Lvyd~!)JNzGa`0eU%iG%ji*p3C_3HAU5HG^w8KkSh5ba~k-bN4hDSXV|@z^1mTpEleX%7dT zI>T=xUHGQlGzn@b1kM2p$iZa?>$_Gg|!vTA*>SakUhx!xz1 z@VIpR3e0nZv4rjma2&5F*83i7V7XoZFhXbg)GG z?IF2c+E6SpFMNIF$~MyVpTA99{X*BIGqxTi{D%6ELE9^qbX;fJpZZ987s1l%lJZTa zY~!^5AnD7`Gi#>`;W@O;zOaw$LE8_hVYm&DSE6H}>!g%F5-|nY67Ui2>m0gff@&q-&L2zd z1mz3H60K9oXWd%Hq4_%6djy9PZ(3&s-vRL$#jv#e1>3tx?E!|KU6K79JH@Z@TFKhh zp0jEv+M}}lN}l(EB_#Jr-`cI?YujR2Li1|ZRPz<%+iHq`(EWRG)u_XSU0-BS+Sb})@IwSXpT^hW-L-heLZA$^;9B_}U| zdn#2(Msfdn-QH^gu++h9Xk3>D)vul$UVkK(Mw{PSvh1mLDvPCu{Z#U={QCfJezW>R zYewh0CICxY%Nspo`H|+is1Cw!iES<@xPD9N2H2=sqqlQ@il_f96H8l?DZVez?AtcPaQKA!$+5(33a{U+?EYED23kAy#CH~! zq~CT~ERml@9|-b7b4)Y8i(~c060$$bc=GBDNOq0G_8Qjrf9ZRY>u11LCRcbmA+ls) zNx}$!gKJ_kp1Vw56XQ|Gk!hRYWpaXOA18+)HgVe!@2$w+`+g0wDeD%QAKmdwUuW$* z(Qm7B#)tH7d_gu%=X}Nz@=f>p657uYYjB<;D1Jm=55kiCeS{w0=19VaC=cUkfJ{05 z_1iYF4#Wr7GTr&x=jYyMVM+XLoBqwBTql6>2-RKCnm5lTE&HJFR2sWO_B>EdvU-hG zJ3+eJyd>uw8AqA%2)xgb$IOf`Yjb-B@}rrDW&4shWNJjJC-{5KAqV;!J8ffm&6$NIGzqriDT(3#t)^_n2XGD+juU4C1D+t zw2c=}*?E3FhxWKfvu7eFqhtE*df4CxpGV*O1LH}YUlO+2hT=)LH{Zm>YX^QOy}o=! zZL{9#AU4+di7-z4nDP37pF7{BAbfM$uwHt9Mv|dGKJw+Fai1l1FOh$I9>$*MzAT}8 zjgR&|P7p_-zK^s=3-}gr@briy-#Cx=pS&QE$YolMO+v9e-AVsXd0kRH0^qF zr+(Lcx!tLz?M}M1O^aswZjMd6N_R737}~Tpw1wvPK-(PGb**XD5%;CP)7_CvTWH#K zmo~Xpww+RUO1GQbkmQEn1MOB#T^f%@IyN*KlC)*o^iEAoJBL=Q(-!TNJ60!#_EM?u z)MBG)n}+tSsx=+8HOBrZnx= z&`1$(r%rEZr|DKbC0$v$4vm;<+T@nn-H|J)9VyqLk(UgO+SE0-+bM(7irt`TlX^q6 zX~pACsSTS$tEFihGNqyMGo>cfj%gLCZ=P8i^&{GjpK-g*nc8q0P2;wPw&QzJpG~zR R+I07vM)dx!cU>B_{tp%)EyVx; literal 0 HcmV?d00001 diff --git a/src/assets/logo.png b/src/assets/favicon.png similarity index 100% rename from src/assets/logo.png rename to src/assets/favicon.png diff --git a/src/components/theCommon/Category.tsx b/src/components/theCommon/Category.tsx index 937d32f..cb236f6 100644 --- a/src/components/theCommon/Category.tsx +++ b/src/components/theCommon/Category.tsx @@ -2,9 +2,52 @@ import { css } from '@emotion/react' import { Colors } from '@/styles/Theme' import { FontSize } from '@/styles/Theme' +const Category = () => { + return ( +
    +
  • + 전체 +
    • +
  • + 상체 +
    • +
  • + 하체 +
    • +
  • + 스트레칭 +
    • +
  • + 유산소 +
    • +
  • + 전신 +
    • +
+ ) +} + +const CategoryButton = ({ + children, + onClick, + styleType = 'primary' +}: { + children: React.ReactNode + onClick?: () => void + styleType?: 'primary' | 'secondary' +}) => { + return ( + + ) +} + const baseButtonStyle = css` display: inline-flex; - padding: 8px 14px; + padding: 4px 10px; align-items: center; justify-content: center; border-radius: 5px; @@ -34,55 +77,15 @@ const buttonStyle = { } ` } -const CategoryButton = ({ - children, - onClick, - styleType = 'primary' -}: { - children: React.ReactNode - onClick?: () => void - styleType?: 'primary' | 'secondary' -}) => { - return ( - - ) -} const CategoryContainer = css` list-style-type: none; - padding: 0; + + padding: 0 20px; display: flex; + justify-content: space-between; + align-items: center; flex-wrap: wrap; gap: 10px; ` - -const Category = () => { - return ( -
    -
  • - 전체 -
    • -
  • - 상체 -
    • -
  • - 하체 -
    • -
  • - 스트레칭 -
    • -
  • - 유산소 -
    • -
  • - 전신 -
    • -
- ) -} - export default Category diff --git a/src/components/theLayout/theHeader/BackButtonHeader.tsx b/src/components/theLayout/theHeader/BackButtonHeader.tsx new file mode 100644 index 0000000..d83be1c --- /dev/null +++ b/src/components/theLayout/theHeader/BackButtonHeader.tsx @@ -0,0 +1,55 @@ +import { css } from '@emotion/react' +import { Colors, Width } from '@/styles/Theme' +import { FontSize } from '@/styles/Theme' +import { createPortal } from 'react-dom' +import { CgChevronLeft } from 'react-icons/cg' + +interface BackButtonHeaderProps { + title: string +} + +const BackButtonHeader = ({ title }: BackButtonHeaderProps) => { + const headerElement = document.getElementById('header') + + if (!headerElement) { + return null + } + + return createPortal( +
+ +

{title}

+
, + headerElement + ) +} + +const headerStyle = css` + display: flex; + justify-content: flex-start; + align-items: center; + height: 72px; + position: sticky; + width: ${Width.max}; + top: 0; + left: 50%; + transform: translateX(-50%); + z-index: 100; + color: ${Colors.white}; +` + +const iconStyle = css` + font-size: 24px; + color: ${Colors.black}; + margin-right: 12px; +` + +const titleStyle = css` + font-size: ${FontSize.xl}; + color: ${Colors.black}; + position: absolute; + left: 50%; + transform: translateX(-50%); +` + +export default BackButtonHeader diff --git a/src/components/theLayout/theHeader/LogoHeader.tsx b/src/components/theLayout/theHeader/LogoHeader.tsx new file mode 100644 index 0000000..8cadf32 --- /dev/null +++ b/src/components/theLayout/theHeader/LogoHeader.tsx @@ -0,0 +1,38 @@ +import Logo from '@/assets/favicon.ico' +import { css } from '@emotion/react' +import { Colors, Width } from '@/styles/Theme' +import { createPortal } from 'react-dom' + +const LogoHeader = () => { + return createPortal( +
+ Logo +
, + document.getElementById('header')! + ) +} + +const headerStyle = css` + display: flex; + justify-content: center; + align-items: center; + height: 72px; + position: sticky; + width: ${Width.max}; + top: 0; + left: 50%; + transform: translateX(-50%); + z-index: 100; + color: ${Colors.white}; +` + +const logoStyle = css` + height: 25px; + width: 75px; +` + +export default LogoHeader diff --git a/src/components/thePlaylist/Feed.tsx b/src/components/thePlaylist/Feed.tsx new file mode 100644 index 0000000..0aa0962 --- /dev/null +++ b/src/components/thePlaylist/Feed.tsx @@ -0,0 +1,124 @@ +import { CgProfile, CgHeart, CgComment, CgBookmark } from 'react-icons/cg' +import { css } from '@emotion/react' +import { FontSize } from '@/styles/Theme' +import { Colors } from '@/styles/Theme' +import { useNavigate } from 'react-router-dom' + +interface FeedProps { + userId: string + thumbnail: string + title: string + timeRecord: string +} + +const Feed: React.FC = ({ + userId, + thumbnail, + title, + timeRecord +}) => { + const navigate = useNavigate() + + const goToPlaylistDetailPage = () => { + navigate('/PlaylistDetailPage') + } + return ( +
+
+ + {userId} +
+ +
+ +
+ +
+
+ + + +
+ +
+

{title}

+
+ + {timeRecord} +
+
+ ) +} + +const feedStyle = css` + margin-top: 30px; + cursor: pointer; +` + +const headerStyle = css` + display: flex; + align-items: center; + margin-bottom: 20px; +` + +const headerTextStyle = css` + margin-left: 10px; +` + +const thumbnailStyle = css` + margin-bottom: 10px; +` + +const thumbnailElementStyle = css` + width: 100%; + height: auto; +` + +const footerStyle = css` + display: flex; + flex-direction: column; +` + +const iconsStyle = css` + display: flex; + margin-bottom: 10px; +` + +const profileIconStyle = css` + font-size: 30px; +` + +const heartIconStyle = css` + font-size: 24px; + margin-right: 30px; +` + +const commentIconStyle = css` + font-size: 24px; +` + +const bookmarkIconStyle = css` + font-size: 30px; + margin-left: auto; +` + +const titleStyle = css` + font-size: ${FontSize.lg}; + margin: 0; + margin-bottom: 10px; +` +const timeRecordStyle = css` + color: ${Colors.darkGrey}; + font-size: ${FontSize.sm}; +` + +export default Feed diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 650eb45..0d2e558 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,11 +1,36 @@ -import Header from '@/components/theLayout/theHeader/Header' import Category from '@/components/theCommon/Category' +import Feed from '@/components/thePlaylist/Feed' +import LogoHeader from '@/components/theLayout/theHeader/LogoHeader' const Home = () => { return ( <> -
+ {} + + + + ) } diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/PlaylistDetailPage.tsx b/src/pages/PlaylistDetailPage.tsx new file mode 100644 index 0000000..3b5ba5b --- /dev/null +++ b/src/pages/PlaylistDetailPage.tsx @@ -0,0 +1,12 @@ +import Header from '@/components/theLayout/theHeader/Header' + +const PlaylistDetailPage = () => { + return ( + <> +
+

PlaylistDetailPage

+ + ) +} + +export default PlaylistDetailPage diff --git a/src/styles/Theme.tsx b/src/styles/Theme.tsx index 128be81..8054875 100644 --- a/src/styles/Theme.tsx +++ b/src/styles/Theme.tsx @@ -3,6 +3,7 @@ export const Colors = { skyBlue: '#9DBDFF', paleBlue: '#D1E9F6', charcoalGrey: '#545F71', + darkGrey: '#757575', black: '#1E1E1E', lightGrey: '#EBEBEB', red: '#D32F2F', From 9092d603aa82ef8060f8f86cbb409306141b891e Mon Sep 17 00:00:00 2001 From: ParkYoungWoong Date: Fri, 13 Sep 2024 20:19:48 +0900 Subject: [PATCH 011/181] =?UTF-8?q?=ED=8C=8C=EC=9D=B4=EC=96=B4=EB=B2=A0?= =?UTF-8?q?=EC=9D=B4=EC=8A=A4=20=EC=A0=81=EC=9A=A9=20=EC=98=88=EC=8B=9C=20?= =?UTF-8?q?=EA=B3=B5=EC=9C=A0.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .firebaserc | 5 + .gitignore | 2 +- .vscode/settings.json | 18 + README.md | 38 + firebase.json | 9 + firestore.indexes.json | 4 + firestore.rules | 10 + index.html | 8 +- package-lock.json | 6163 ++++++++++++++++- package.json | 10 +- public/favicon.ico | Bin 0 -> 270398 bytes public/favicon.jpg | Bin 0 -> 34419 bytes src/App.tsx | 33 - src/assets/.gitkeep | 0 src/assets/favicon.ico | Bin 26814 -> 0 bytes src/assets/{favicon.png => logo.png} | Bin src/components/SplashScreen.module.css | 12 + src/components/SplashScreen.tsx | 30 + .../{theCommon => common}/Category.tsx | 26 +- .../{theCommon => common}/LongButton.tsx | 0 .../{theCommon => common}/PlaylistDetail.tsx | 0 .../{theCommon => common}/ShortButton.tsx | 2 +- .../Modal.tsx => common/TheModal.tsx} | 0 .../{theCommon => common}/Toast.tsx | 0 .../{theEmptyInfo => emptyInfo}/EmptyInfo.tsx | 0 .../{theLayout => layouts}/Container.tsx | 0 src/components/layouts/NavbarLayout.tsx | 17 + .../headers}/BackButtonHeader.tsx | 0 .../headers}/LogoHeader.tsx | 2 +- src/components/layouts/headers/TheHeader.tsx | 48 + .../navigations}/NavigationItem.tsx | 0 .../navigations/TheNavigation.tsx} | 2 +- .../{thePlaylist => playlist}/Feed.tsx | 84 +- src/components/theLayout/NavbarLayout.tsx | 13 - src/components/theLayout/theHeader/Header.tsx | 38 - src/hooks/comments.ts | 88 + src/hooks/playlists.ts | 94 + src/main.tsx | 24 +- src/pages/AddPlaylist.tsx | 115 - src/pages/Home.tsx | 38 - src/pages/Login.tsx | 0 src/pages/MyPlaylist.tsx | 20 - src/pages/PlaylistDetailPage.tsx | 12 - src/pages/Profile.tsx | 27 - src/routes/index.tsx | 30 + src/routes/pages/AddPlaylist.tsx | 188 + src/{ => routes}/pages/Bookmark.tsx | 10 +- src/routes/pages/Home.tsx | 27 + src/routes/pages/LogIn.tsx | 19 + src/routes/pages/MyPlaylist.tsx | 22 + src/routes/pages/PlaylistDetailPage.tsx | 75 + src/routes/pages/Profile.tsx | 46 + src/routes/protected/RequiresAuth.tsx | 24 + src/stores/.gitkeep | 0 src/stores/header.ts | 15 + src/styles/GlobalStyles.tsx | 3 + storage.rules | 12 + 57 files changed, 6916 insertions(+), 547 deletions(-) create mode 100644 .firebaserc create mode 100644 .vscode/settings.json create mode 100644 firebase.json create mode 100644 firestore.indexes.json create mode 100644 firestore.rules create mode 100644 public/favicon.ico create mode 100644 public/favicon.jpg delete mode 100644 src/App.tsx delete mode 100644 src/assets/.gitkeep delete mode 100644 src/assets/favicon.ico rename src/assets/{favicon.png => logo.png} (100%) create mode 100644 src/components/SplashScreen.module.css create mode 100644 src/components/SplashScreen.tsx rename src/components/{theCommon => common}/Category.tsx (75%) rename src/components/{theCommon => common}/LongButton.tsx (100%) rename src/components/{theCommon => common}/PlaylistDetail.tsx (100%) rename src/components/{theCommon => common}/ShortButton.tsx (95%) rename src/components/{theCommon/Modal.tsx => common/TheModal.tsx} (100%) rename src/components/{theCommon => common}/Toast.tsx (100%) rename src/components/{theEmptyInfo => emptyInfo}/EmptyInfo.tsx (100%) rename src/components/{theLayout => layouts}/Container.tsx (100%) create mode 100644 src/components/layouts/NavbarLayout.tsx rename src/components/{theLayout/theHeader => layouts/headers}/BackButtonHeader.tsx (100%) rename src/components/{theLayout/theHeader => layouts/headers}/LogoHeader.tsx (94%) create mode 100644 src/components/layouts/headers/TheHeader.tsx rename src/components/{theLayout/theNavigation => layouts/navigations}/NavigationItem.tsx (100%) rename src/components/{theLayout/theNavigation/Navigation.tsx => layouts/navigations/TheNavigation.tsx} (98%) rename src/components/{thePlaylist => playlist}/Feed.tsx (50%) delete mode 100644 src/components/theLayout/NavbarLayout.tsx delete mode 100644 src/components/theLayout/theHeader/Header.tsx create mode 100644 src/hooks/comments.ts create mode 100644 src/hooks/playlists.ts delete mode 100644 src/pages/AddPlaylist.tsx delete mode 100644 src/pages/Home.tsx delete mode 100644 src/pages/Login.tsx delete mode 100644 src/pages/MyPlaylist.tsx delete mode 100644 src/pages/PlaylistDetailPage.tsx delete mode 100644 src/pages/Profile.tsx create mode 100644 src/routes/index.tsx create mode 100644 src/routes/pages/AddPlaylist.tsx rename src/{ => routes}/pages/Bookmark.tsx (76%) create mode 100644 src/routes/pages/Home.tsx create mode 100644 src/routes/pages/LogIn.tsx create mode 100644 src/routes/pages/MyPlaylist.tsx create mode 100644 src/routes/pages/PlaylistDetailPage.tsx create mode 100644 src/routes/pages/Profile.tsx create mode 100644 src/routes/protected/RequiresAuth.tsx delete mode 100644 src/stores/.gitkeep create mode 100644 src/stores/header.ts create mode 100644 storage.rules diff --git a/.firebaserc b/.firebaserc new file mode 100644 index 0000000..f2ad7cf --- /dev/null +++ b/.firebaserc @@ -0,0 +1,5 @@ +{ + "projects": { + "default": "dev-camp-1" + } +} diff --git a/.gitignore b/.gitignore index 2bd1803..5b8bcc8 100644 --- a/.gitignore +++ b/.gitignore @@ -15,7 +15,7 @@ dist-ssr *.local # Editor directories and files -.vscode/* +# .vscode/* !.vscode/extensions.json .idea .DS_Store diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..cc627aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,18 @@ +{ + "[javascript]": { + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[javascriptreact]": { + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[typescript]": { + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[typescriptreact]": { + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" + } +} \ No newline at end of file diff --git a/README.md b/README.md index 174d788..dbced6a 100644 --- a/README.md +++ b/README.md @@ -1 +1,39 @@ # 운동 영상 공유 SNS 플랫폼, MAZI + +- [x] PlayLists +- [x] Comments +- [ ] Likes +- [ ] Bookmarks + +### Likes + +```ts +export interface Like { + id: string + createdAt: string + feedId: string + userId: string +} +``` + +```ts +export const useFetchLike = (feedId: string) => { + return useQuery({ + queryKey: ['likes', feedId], + queryFn: async () => { + const auth = getAuth() + const user = auth.currentUser + const db = getFirestore() + const coll = collection(db, 'Likes') + const querySnapshot = await getDocs( + query( + coll, + where('userId', '==', user.uid), + where('feedId', '==', feedId) + ) + ) + return !!querySnapshot.docs.length // true or false + } + }) +} +``` \ No newline at end of file diff --git a/firebase.json b/firebase.json new file mode 100644 index 0000000..3facb51 --- /dev/null +++ b/firebase.json @@ -0,0 +1,9 @@ +{ + "firestore": { + "rules": "firestore.rules", + "indexes": "firestore.indexes.json" + }, + "storage": { + "rules": "storage.rules" + } +} diff --git a/firestore.indexes.json b/firestore.indexes.json new file mode 100644 index 0000000..415027e --- /dev/null +++ b/firestore.indexes.json @@ -0,0 +1,4 @@ +{ + "indexes": [], + "fieldOverrides": [] +} diff --git a/firestore.rules b/firestore.rules new file mode 100644 index 0000000..045bb97 --- /dev/null +++ b/firestore.rules @@ -0,0 +1,10 @@ +rules_version = '2'; + +service cloud.firestore { + match /databases/{database}/documents { + match /{document=**} { + allow read: if true; + allow write: if request.auth != null; + } + } +} \ No newline at end of file diff --git a/index.html b/index.html index 06cfbf9..7e5b39a 100644 --- a/index.html +++ b/index.html @@ -2,17 +2,15 @@ - MAZI + -