From 9883a4be0421918de749ec6f57c67d1f32363181 Mon Sep 17 00:00:00 2001 From: narinn-star Date: Fri, 19 May 2023 21:52:28 +0900 Subject: [PATCH 001/112] =?UTF-8?q?Feat=20:=20[#2]=20SideNav=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Nav 위치, NavList, NavItem, NavLink 작성 --- src/Components/MyPage/Profile.tsx | 15 +++++++++++++++ src/Components/MyPage/SideNav.tsx | 22 ++++++++++++++++++++++ src/Components/Nav/Nav.tsx | 11 +++++++++++ src/Components/Nav/NavItem.tsx | 15 +++++++++++++++ src/Components/Nav/NavLink.tsx | 16 ++++++++++++++++ src/Components/Nav/NavList.tsx | 9 +++++++++ src/Pages/Login.tsx | 7 +++++++ src/Pages/Main.tsx | 14 ++++++++++++++ src/Pages/MyPage.tsx | 17 +++++++++++++++++ src/Router/AppRouter.tsx | 4 ++-- 10 files changed, 128 insertions(+), 2 deletions(-) create mode 100644 src/Components/MyPage/Profile.tsx create mode 100644 src/Components/MyPage/SideNav.tsx create mode 100644 src/Components/Nav/Nav.tsx create mode 100644 src/Components/Nav/NavItem.tsx create mode 100644 src/Components/Nav/NavLink.tsx create mode 100644 src/Components/Nav/NavList.tsx create mode 100644 src/Pages/Login.tsx create mode 100644 src/Pages/MyPage.tsx diff --git a/src/Components/MyPage/Profile.tsx b/src/Components/MyPage/Profile.tsx new file mode 100644 index 0000000..db4dc82 --- /dev/null +++ b/src/Components/MyPage/Profile.tsx @@ -0,0 +1,15 @@ +const Profile = () => { + return ( +
+
Profile Box
+
+
이름
+
github
+
필요한
+
정보
+
+
+ ); +}; + +export default Profile; diff --git a/src/Components/MyPage/SideNav.tsx b/src/Components/MyPage/SideNav.tsx new file mode 100644 index 0000000..71f066d --- /dev/null +++ b/src/Components/MyPage/SideNav.tsx @@ -0,0 +1,22 @@ +import Nav from '../Nav/Nav'; +import NavList from '../Nav/NavList'; +import NavItem from '../Nav/NavItem'; +import { NavLink } from 'react-router-dom'; + +const SideNav = () => { + return ( +
+ +
+ ); +}; + +export default SideNav; diff --git a/src/Components/Nav/Nav.tsx b/src/Components/Nav/Nav.tsx new file mode 100644 index 0000000..68217e7 --- /dev/null +++ b/src/Components/Nav/Nav.tsx @@ -0,0 +1,11 @@ +import { ReactNode } from 'react'; + +interface NavProps { + children?: ReactNode; +} + +const Nav = (props: NavProps) => { + return ; +}; + +export default Nav; diff --git a/src/Components/Nav/NavItem.tsx b/src/Components/Nav/NavItem.tsx new file mode 100644 index 0000000..3666306 --- /dev/null +++ b/src/Components/Nav/NavItem.tsx @@ -0,0 +1,15 @@ +import { ReactNode } from 'react'; + +interface NavItemProps { + children?: JSX.Element | string; +} + +const NavItem = ({ children }: NavItemProps) => { + return ( +
  • + {children} +
  • + ); +}; + +export default NavItem; diff --git a/src/Components/Nav/NavLink.tsx b/src/Components/Nav/NavLink.tsx new file mode 100644 index 0000000..909b5fa --- /dev/null +++ b/src/Components/Nav/NavLink.tsx @@ -0,0 +1,16 @@ +import { ReactNode } from 'react'; + +interface NavLinkProps { + children: ReactNode; + to: string; +} + +const NavLink = (props: NavLinkProps) => { + return ( + <> + {props.children} + + ); +}; + +export default NavLink; diff --git a/src/Components/Nav/NavList.tsx b/src/Components/Nav/NavList.tsx new file mode 100644 index 0000000..6c852e7 --- /dev/null +++ b/src/Components/Nav/NavList.tsx @@ -0,0 +1,9 @@ +interface NavListProps { + children?: JSX.Element[]; +} + +const NavList = ({ children }: NavListProps) => { + return ; +}; + +export default NavList; diff --git a/src/Pages/Login.tsx b/src/Pages/Login.tsx new file mode 100644 index 0000000..1908807 --- /dev/null +++ b/src/Pages/Login.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const Login = () => { + return <>; +}; + +export default Login; diff --git a/src/Pages/Main.tsx b/src/Pages/Main.tsx index 6afb686..334d6f3 100644 --- a/src/Pages/Main.tsx +++ b/src/Pages/Main.tsx @@ -1,9 +1,23 @@ import React from 'react'; +import MyPage from './MyPage'; +import { Link, useNavigate } from 'react-router-dom'; const Main = () => { + let navigate = useNavigate(); + const handleMyPage = () => { + navigate('/mypage'); + }; + const handleLogin = () => { + navigate('/login'); + }; + return ( <>
    Main
    +
    TailWind CSS 적용 TEST
    +
    Another Color
    + + ); }; diff --git a/src/Pages/MyPage.tsx b/src/Pages/MyPage.tsx new file mode 100644 index 0000000..28ad4c2 --- /dev/null +++ b/src/Pages/MyPage.tsx @@ -0,0 +1,17 @@ +import Profile from '../Components/MyPage/Profile'; +import SideNav from '../Components/MyPage/SideNav'; + +const MyPage = () => { + return ( + <> +
    + +
    +
    + +
    + + ); +}; + +export default MyPage; diff --git a/src/Router/AppRouter.tsx b/src/Router/AppRouter.tsx index 249f58d..0e67d4f 100644 --- a/src/Router/AppRouter.tsx +++ b/src/Router/AppRouter.tsx @@ -1,14 +1,14 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Main from '../Pages/Main'; +import MyPage from '../Pages/MyPage'; const AppRouter = () => { return ( <> -
    TailWind CSS 적용 TEST
    -
    Another Color
    } /> + } />
    From f99bdfa852023d3fb60eed4255addd3d8e71ebd5 Mon Sep 17 00:00:00 2001 From: narinn-star Date: Sat, 20 May 2023 22:36:23 +0900 Subject: [PATCH 002/112] Feat : [#2] Nested route _ Outlet MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit MyPage에서 SideBar, Profile은 고정, 우측 하단만 SideNav 링크에 맞게 렌더링하도록 중첩 라우팅 적용 --- src/Components/MyPage/SideNav.tsx | 3 +++ src/Pages/Delete.tsx | 9 +++++++++ src/Pages/Login.tsx | 4 +++- src/Pages/Main.tsx | 5 +++-- src/Pages/MyPage.tsx | 5 +++++ src/Pages/NotFound.tsx | 5 +++++ src/Pages/Test.tsx | 19 +++++++++++++++++++ src/Pages/TestM.tsx | 9 +++++++++ src/Pages/TestT.tsx | 9 +++++++++ src/Router/AppRouter.tsx | 16 +++++++++++++++- 10 files changed, 80 insertions(+), 4 deletions(-) create mode 100644 src/Pages/Delete.tsx create mode 100644 src/Pages/NotFound.tsx create mode 100644 src/Pages/Test.tsx create mode 100644 src/Pages/TestM.tsx create mode 100644 src/Pages/TestT.tsx diff --git a/src/Components/MyPage/SideNav.tsx b/src/Components/MyPage/SideNav.tsx index 71f066d..758cbb2 100644 --- a/src/Components/MyPage/SideNav.tsx +++ b/src/Components/MyPage/SideNav.tsx @@ -13,6 +13,9 @@ const SideNav = () => { Home + + 회원 탈퇴 + diff --git a/src/Pages/Delete.tsx b/src/Pages/Delete.tsx new file mode 100644 index 0000000..793a4b0 --- /dev/null +++ b/src/Pages/Delete.tsx @@ -0,0 +1,9 @@ +const Delete = () => { + return ( + <> +
    회원탈퇴 Page
    + + ); +}; + +export default Delete; diff --git a/src/Pages/Login.tsx b/src/Pages/Login.tsx index 1908807..dce3c65 100644 --- a/src/Pages/Login.tsx +++ b/src/Pages/Login.tsx @@ -1,7 +1,9 @@ import React from 'react'; +import { Outlet } from 'react-router-dom'; +import SideNav from '../Components/MyPage/SideNav'; const Login = () => { - return <>; + return <>로그인페이지입니다.; }; export default Login; diff --git a/src/Pages/Main.tsx b/src/Pages/Main.tsx index 334d6f3..e9cdf68 100644 --- a/src/Pages/Main.tsx +++ b/src/Pages/Main.tsx @@ -8,7 +8,7 @@ const Main = () => { navigate('/mypage'); }; const handleLogin = () => { - navigate('/login'); + navigate('/test'); }; return ( @@ -17,7 +17,8 @@ const Main = () => {
    TailWind CSS 적용 TEST
    Another Color
    - +
    + ); }; diff --git a/src/Pages/MyPage.tsx b/src/Pages/MyPage.tsx index 28ad4c2..98ed4b5 100644 --- a/src/Pages/MyPage.tsx +++ b/src/Pages/MyPage.tsx @@ -1,3 +1,4 @@ +import { Outlet } from 'react-router-dom'; import Profile from '../Components/MyPage/Profile'; import SideNav from '../Components/MyPage/SideNav'; @@ -10,6 +11,10 @@ const MyPage = () => {
    +
    + +

    안돼?

    +
    ); }; diff --git a/src/Pages/NotFound.tsx b/src/Pages/NotFound.tsx new file mode 100644 index 0000000..b4f7530 --- /dev/null +++ b/src/Pages/NotFound.tsx @@ -0,0 +1,5 @@ +const NotFound = () => { + return <>NOT FOUND; +}; + +export default NotFound; diff --git a/src/Pages/Test.tsx b/src/Pages/Test.tsx new file mode 100644 index 0000000..67dde3d --- /dev/null +++ b/src/Pages/Test.tsx @@ -0,0 +1,19 @@ +import { Outlet } from 'react-router-dom'; + +const Test = () => { + return ( + <> +
    +

    Test 페이지 1

    +

    Test 페이지 1

    + +

    Test 페이지 1

    +
    +
    +

    Test 페이지 1

    +
    + + ); +}; + +export default Test; diff --git a/src/Pages/TestM.tsx b/src/Pages/TestM.tsx new file mode 100644 index 0000000..020cdaf --- /dev/null +++ b/src/Pages/TestM.tsx @@ -0,0 +1,9 @@ +const TestM = () => { + return ( +
    +

    Test 페이지 2

    +
    + ); +}; + +export default TestM; diff --git a/src/Pages/TestT.tsx b/src/Pages/TestT.tsx new file mode 100644 index 0000000..b469750 --- /dev/null +++ b/src/Pages/TestT.tsx @@ -0,0 +1,9 @@ +const TestT = () => { + return ( +
    +

    Test 페이지 3

    +
    + ); +}; + +export default TestT; diff --git a/src/Router/AppRouter.tsx b/src/Router/AppRouter.tsx index 0e67d4f..7b1e182 100644 --- a/src/Router/AppRouter.tsx +++ b/src/Router/AppRouter.tsx @@ -1,6 +1,12 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Main from '../Pages/Main'; +// import Test from '../Pages/Test'; +// import TestM from '../Pages/TestM'; +// import TestT from '../Pages/TestT'; import MyPage from '../Pages/MyPage'; +import Login from '../Pages/Login'; +import NotFound from '../Pages/NotFound'; +import Delete from '../Pages/Delete'; const AppRouter = () => { return ( @@ -8,7 +14,15 @@ const AppRouter = () => { } /> - } /> + }> + } /> + + } /> + }> + {/* }> + } /> + } /> + */} From a316a860ccd1188cad4f74ecd1a453d5c07a180f Mon Sep 17 00:00:00 2001 From: narinn-star Date: Sun, 21 May 2023 16:52:55 +0900 Subject: [PATCH 003/112] =?UTF-8?q?Feat=20:=20[#2]=20SideNav=20=ED=95=98?= =?UTF-8?q?=EC=9C=84=20=ED=8E=98=EC=9D=B4=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 하위 페이지 (My Post, Like, Logout, 탈퇴) 구성 - SideNav Design Modified --- src/Components/MyPage/SideNav.tsx | 13 ++++++++++--- src/Components/Nav/NavItem.tsx | 5 ++++- src/Components/Nav/NavList.tsx | 6 +++++- src/Pages/Test.tsx | 9 +++++---- src/Pages/TestM.tsx | 2 +- src/Pages/TestT.tsx | 2 +- src/Router/AppRouter.tsx | 6 +++--- 7 files changed, 29 insertions(+), 14 deletions(-) diff --git a/src/Components/MyPage/SideNav.tsx b/src/Components/MyPage/SideNav.tsx index 758cbb2..7a5bfce 100644 --- a/src/Components/MyPage/SideNav.tsx +++ b/src/Components/MyPage/SideNav.tsx @@ -8,13 +8,20 @@ const SideNav = () => {
    diff --git a/src/Components/Nav/NavItem.tsx b/src/Components/Nav/NavItem.tsx index 3666306..8daee4c 100644 --- a/src/Components/Nav/NavItem.tsx +++ b/src/Components/Nav/NavItem.tsx @@ -6,7 +6,10 @@ interface NavItemProps { const NavItem = ({ children }: NavItemProps) => { return ( -
  • +
  • {children}
  • ); diff --git a/src/Components/Nav/NavList.tsx b/src/Components/Nav/NavList.tsx index 6c852e7..fa822eb 100644 --- a/src/Components/Nav/NavList.tsx +++ b/src/Components/Nav/NavList.tsx @@ -3,7 +3,11 @@ interface NavListProps { } const NavList = ({ children }: NavListProps) => { - return
      {children}
    ; + return ( +
      + {children} +
    + ); }; export default NavList; diff --git a/src/Pages/Test.tsx b/src/Pages/Test.tsx index 67dde3d..2da4cc0 100644 --- a/src/Pages/Test.tsx +++ b/src/Pages/Test.tsx @@ -4,13 +4,14 @@ const Test = () => { return ( <>
    -

    Test 페이지 1

    -

    Test 페이지 1

    +

    Test 페이지

    + +

    Test 페이지

    -

    Test 페이지 1

    +

    Test 페이지

    -

    Test 페이지 1

    +

    Test 페이지

    ); diff --git a/src/Pages/TestM.tsx b/src/Pages/TestM.tsx index 020cdaf..3a9ed5b 100644 --- a/src/Pages/TestM.tsx +++ b/src/Pages/TestM.tsx @@ -1,7 +1,7 @@ const TestM = () => { return (
    -

    Test 페이지 2

    +

    Test 페이지 B

    ); }; diff --git a/src/Pages/TestT.tsx b/src/Pages/TestT.tsx index b469750..9b4ae99 100644 --- a/src/Pages/TestT.tsx +++ b/src/Pages/TestT.tsx @@ -1,7 +1,7 @@ const TestT = () => { return (
    -

    Test 페이지 3

    +

    Test 페이지 A

    ); }; diff --git a/src/Router/AppRouter.tsx b/src/Router/AppRouter.tsx index 7b1e182..8a81c63 100644 --- a/src/Router/AppRouter.tsx +++ b/src/Router/AppRouter.tsx @@ -17,11 +17,11 @@ const AppRouter = () => { }> } /> - } /> + } /> }> {/* }> - } /> - } /> + } /> + } /> */} From 738d891f392ba1368786331ecc8a684abdfd2c69 Mon Sep 17 00:00:00 2001 From: narinn-star Date: Sun, 21 May 2023 18:44:58 +0900 Subject: [PATCH 004/112] =?UTF-8?q?Design=20:=20[#2]=20SideNav=20UI=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - hover 속성 추가 - react-router-dom _ NavLink a.active 속성 추가 - 페이지 활성화 시 style 변경 --- src/Components/MyPage/SideNav.tsx | 4 ++-- src/Components/Nav/Nav.css | 3 +++ src/Components/Nav/Nav.tsx | 3 ++- src/Components/Nav/NavItem.tsx | 7 +++++-- src/Components/Nav/NavLink.tsx | 9 ++++++--- src/Router/AppRouter.tsx | 5 ++++- src/Types/nav.d.ts | 4 ++++ 7 files changed, 26 insertions(+), 9 deletions(-) create mode 100644 src/Components/Nav/Nav.css create mode 100644 src/Types/nav.d.ts diff --git a/src/Components/MyPage/SideNav.tsx b/src/Components/MyPage/SideNav.tsx index 7a5bfce..f2b438f 100644 --- a/src/Components/MyPage/SideNav.tsx +++ b/src/Components/MyPage/SideNav.tsx @@ -18,10 +18,10 @@ const SideNav = () => { Like - 로그아웃 + 로그아웃 - 회원 탈퇴 + 회원 탈퇴 diff --git a/src/Components/Nav/Nav.css b/src/Components/Nav/Nav.css new file mode 100644 index 0000000..b4dd98b --- /dev/null +++ b/src/Components/Nav/Nav.css @@ -0,0 +1,3 @@ +#active a.active { + color: #312e81; +} diff --git a/src/Components/Nav/Nav.tsx b/src/Components/Nav/Nav.tsx index 68217e7..e8b4b94 100644 --- a/src/Components/Nav/Nav.tsx +++ b/src/Components/Nav/Nav.tsx @@ -1,11 +1,12 @@ import { ReactNode } from 'react'; +import '../Nav/Nav.css'; interface NavProps { children?: ReactNode; } const Nav = (props: NavProps) => { - return ; + return ; }; export default Nav; diff --git a/src/Components/Nav/NavItem.tsx b/src/Components/Nav/NavItem.tsx index 8daee4c..ce5ca05 100644 --- a/src/Components/Nav/NavItem.tsx +++ b/src/Components/Nav/NavItem.tsx @@ -1,4 +1,4 @@ -import { ReactNode } from 'react'; +import '../Nav/Nav.css'; interface NavItemProps { children?: JSX.Element | string; @@ -8,7 +8,10 @@ const NavItem = ({ children }: NavItemProps) => { return ( diff --git a/src/Components/Nav/NavLink.tsx b/src/Components/Nav/NavLink.tsx index 909b5fa..f991fde 100644 --- a/src/Components/Nav/NavLink.tsx +++ b/src/Components/Nav/NavLink.tsx @@ -1,16 +1,19 @@ import { ReactNode } from 'react'; +import { NavLink } from 'react-router-dom'; interface NavLinkProps { children: ReactNode; to: string; } -const NavLink = (props: NavLinkProps) => { +const NavLinks = ({ to, children }: NavLinkProps) => { return ( <> - {props.children} + + {children} + ); }; -export default NavLink; +export default NavLinks; diff --git a/src/Router/AppRouter.tsx b/src/Router/AppRouter.tsx index 8a81c63..4967175 100644 --- a/src/Router/AppRouter.tsx +++ b/src/Router/AppRouter.tsx @@ -15,9 +15,12 @@ const AppRouter = () => { } /> }> + } /> + } /> } /> + } /> - } /> + }> {/* }> } /> diff --git a/src/Types/nav.d.ts b/src/Types/nav.d.ts new file mode 100644 index 0000000..3d673e2 --- /dev/null +++ b/src/Types/nav.d.ts @@ -0,0 +1,4 @@ +declare module '*.module.css' { + const classes: { [key: string]: string }; + export default classes; +} From e1a59b4134b2472a6588f76cb581b996e207f390 Mon Sep 17 00:00:00 2001 From: narinn-star Date: Sun, 21 May 2023 23:40:16 +0900 Subject: [PATCH 005/112] Design : [#2] SideNav UX MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Text 이외의 부분 클릭 가능하도록 수정중 --- src/Components/Nav/NavItem.tsx | 3 --- src/Components/Nav/NavLink.tsx | 10 ++++++++-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/Components/Nav/NavItem.tsx b/src/Components/Nav/NavItem.tsx index ce5ca05..9c2be1f 100644 --- a/src/Components/Nav/NavItem.tsx +++ b/src/Components/Nav/NavItem.tsx @@ -1,5 +1,3 @@ -import '../Nav/Nav.css'; - interface NavItemProps { children?: JSX.Element | string; } @@ -8,7 +6,6 @@ const NavItem = ({ children }: NavItemProps) => { return (