diff --git a/.eslintrc.json b/.eslintrc.json index c7de427..7388c5f 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -71,6 +71,7 @@ } } ], - "import/no-unresolved": "off" + "import/no-unresolved": "off", + "react/react-in-jsx-scope": "off" } } diff --git a/eslint.config.js b/eslint.config.js index 092408a..8356d1a 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -11,18 +11,18 @@ export default tseslint.config( files: ['**/*.{ts,tsx}'], languageOptions: { ecmaVersion: 2020, - globals: globals.browser, + globals: globals.browser }, plugins: { 'react-hooks': reactHooks, - 'react-refresh': reactRefresh, + 'react-refresh': reactRefresh }, rules: { ...reactHooks.configs.recommended.rules, 'react-refresh/only-export-components': [ 'warn', - { allowConstantExport: true }, - ], - }, - }, + { allowConstantExport: true } + ] + } + } ) diff --git a/package-lock.json b/package-lock.json index 68dee13..9e78a93 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.3.0", - "react-router-dom": "^6.26.1", + "react-router-dom": "^6.26.2", "sortablejs": "^1.15.3", "zustand": "^4.5.5" }, @@ -1675,10 +1675,9 @@ "license": "BSD-3-Clause" }, "node_modules/@remix-run/router": { - "version": "1.19.1", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz", - "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==", - "license": "MIT", + "version": "1.19.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz", + "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==", "engines": { "node": ">=14.0.0" } @@ -5837,12 +5836,11 @@ "license": "MIT" }, "node_modules/react-router": { - "version": "6.26.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz", - "integrity": "sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==", - "license": "MIT", + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz", + "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==", "dependencies": { - "@remix-run/router": "1.19.1" + "@remix-run/router": "1.19.2" }, "engines": { "node": ">=14.0.0" @@ -5852,13 +5850,12 @@ } }, "node_modules/react-router-dom": { - "version": "6.26.1", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.1.tgz", - "integrity": "sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==", - "license": "MIT", + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz", + "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==", "dependencies": { - "@remix-run/router": "1.19.1", - "react-router": "6.26.1" + "@remix-run/router": "1.19.2", + "react-router": "6.26.2" }, "engines": { "node": ">=14.0.0" diff --git a/package.json b/package.json index b2da54e..d9b8d8c 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.3.0", - "react-router-dom": "^6.26.1", + "react-router-dom": "^6.26.2", "sortablejs": "^1.15.3", "zustand": "^4.5.5" }, diff --git a/src/App.tsx b/src/App.tsx index 2dd4878..47dc024 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,49 +4,54 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom' import Login from '@/pages/Login' import AddPlaylist from '@/pages/AddPlaylist' import Bookmark from '@/pages/Bookmark' -import MyPlaylist from '@/pages/MyPlaylist' -import Networking from '@/pages/Networking' +import MyPlaylist from './pages/myPlaylist' +import Home from '@/pages/Home' import Profile from '@/pages/Profile' import SignUp from '@/pages/SignUp' -import Header from '@/components/theHeader/Header' -import Navigation from './components/theNavigation/Navigation' +import Layout from '@/components/theLayout/Layout' function App() { return ( <> -
- } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> + path="/" + element={}> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000..323e7fa Binary files /dev/null and b/src/assets/logo.png differ diff --git a/src/components/theCommon/Category.tsx b/src/components/theCommon/Category.tsx new file mode 100644 index 0000000..859305c --- /dev/null +++ b/src/components/theCommon/Category.tsx @@ -0,0 +1,81 @@ +import React from 'react' +import { css } from '@emotion/react' +import Colors from '@/styles/Colors' + +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: 14px; + line-height: 100%; + letter-spacing: -0.18px; + transition: background-color 0.3s ease; +` + +const buttonStyle = { + primary: css` + background-color: ${Colors.lightBlue}; + color: ${Colors.white}; + `, + secondary: css` + 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/theHeader/Header.tsx b/src/components/theHeader/Header.tsx index 42cd5ff..3309323 100644 --- a/src/components/theHeader/Header.tsx +++ b/src/components/theHeader/Header.tsx @@ -1,4 +1,5 @@ import { css } from '@emotion/react' +import Colors from '@/styles/Colors' const Header = () => { return ( @@ -17,10 +18,12 @@ const header = css` top: 0; left: 0; z-index: 100; + color: ${Colors.white}; ` const title = css` font-size: 20px; + color: ${Colors.black}; ` export default Header diff --git a/src/components/theLayout/Layout.tsx b/src/components/theLayout/Layout.tsx new file mode 100644 index 0000000..6ffe5ae --- /dev/null +++ b/src/components/theLayout/Layout.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import { Outlet } from 'react-router-dom' +import Header from '@/components/theHeader/Header' +import Navigation from '@/components/theNavigation/Navigation' +import { css } from '@emotion/react' + +const Layout = () => { + return ( + <> +
+
+
+ +
+ +
+ + ) +} +const pageContainer = css` + position: relative; + width: 100%; + max-width: 430px; + height: 100%; + margin: 0 auto; +` +export default Layout diff --git a/src/components/theNavigation/Navigation.tsx b/src/components/theNavigation/Navigation.tsx index fd223f7..3390e8c 100644 --- a/src/components/theNavigation/Navigation.tsx +++ b/src/components/theNavigation/Navigation.tsx @@ -7,27 +7,27 @@ import { } from 'react-icons/cg' import { css } from '@emotion/react' import Colors from '@/styles/Colors' -import { Link } from 'react-router-dom' +import { NavLink } from 'react-router-dom' const Navigation = () => { return ( <>
- + - - + + - - + + - - + + - - + + - +
) @@ -39,13 +39,15 @@ const navbar = css` align-items: center; height: 72px; position: fixed; - bottom: 0; - left: 0; - width: 390px; + width: 430px; background-color: ${Colors.black}; color: ${Colors.lightGrey}; opacity: 0.8; z-index: 100; + border-radius: 10px; + .active { + color: ${Colors.white}; + } ` const icon = css` diff --git a/src/components/thePlaylist/Feed.tsx b/src/components/thePlaylist/Feed.tsx new file mode 100644 index 0000000..7783997 --- /dev/null +++ b/src/components/thePlaylist/Feed.tsx @@ -0,0 +1,45 @@ +import React from 'react' +import { CgProfile, CgHeart, CgComment, CgBookmark } from 'react-icons/cg' + +interface FeedProps { + userId: string + videoSrc: string + title: string + timeStamp: string +} + +const Feed: React.FC = ({ userId, videoSrc, title, timeStamp }) => { + return ( +
+
+ + {userId} +
+ +
+ +
+ +
+
+ + + +
+ +
+

{title}

+
+ + {timeStamp} +
+
+ ) +} + +export default Feed diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx new file mode 100644 index 0000000..30a3853 --- /dev/null +++ b/src/pages/Home.tsx @@ -0,0 +1,7 @@ +import React from 'react' + +const Home = () => { + return
Home
+} + +export default Home diff --git a/src/pages/Networking.tsx b/src/pages/Networking.tsx deleted file mode 100644 index 69c38d0..0000000 --- a/src/pages/Networking.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' - -const Networking = () => { - return
Networking
-} - -export default Networking diff --git a/src/pages/myPlaylist.tsx b/src/pages/myPlaylist.tsx index cb758c8..e58969d 100644 --- a/src/pages/myPlaylist.tsx +++ b/src/pages/myPlaylist.tsx @@ -1,7 +1,59 @@ import React from 'react' const MyPlaylist = () => { - return
MyPlaylist
+ return ( + <> +
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+ +
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+ +
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+
MyPlaylist
+ + ) } export default MyPlaylist diff --git a/src/styles/GlobalStyle.tsx b/src/styles/GlobalStyle.tsx index 7673e40..f81745e 100644 --- a/src/styles/GlobalStyle.tsx +++ b/src/styles/GlobalStyle.tsx @@ -146,8 +146,8 @@ const GlobalStyles = () => ( } body, #root { - width: 390px; - height: 844px; + width: 100%; + height: 100%; font-family: 'Pretendard Variable', Pretendard, @@ -166,11 +166,8 @@ const GlobalStyles = () => ( sans-serif; font-size: ${fontSize.md}; font-weight: ${fontWeight.medium}; - background-color: ${Colors.black}; - color: ${Colors.black}; - } - #root { background-color: ${Colors.white}; + color: ${Colors.black}; } html { font-size: 16px; diff --git a/tsconfig.json b/tsconfig.json index d1a4278..0b0bb5f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,5 +1,6 @@ { "compilerOptions": { + "jsx": "react-jsx", "baseUrl": "./", "paths": { "@/*": ["./src/*"],