From 91c31b168466ff7bd4a7b2b5d0508fc328b9c5a5 Mon Sep 17 00:00:00 2001 From: 1ilsang <1ilsang@naver.com> Date: Sat, 19 Aug 2023 17:29:59 +0900 Subject: [PATCH 1/2] feat(home): Add Profile section --- src/features/home/Container.tsx | 39 +++----------------- src/features/home/components/Profile.tsx | 37 +++++++++++++++++++ src/features/home/home.scss | 39 ++++++++++++++++++++ src/features/home/hooks/useHomeContainer.tsx | 14 +++++++ src/features/login/constants.ts | 5 ++- src/features/login/type.ts | 3 ++ src/features/shared/style/_color.scss | 4 ++ 7 files changed, 106 insertions(+), 35 deletions(-) create mode 100644 src/features/home/components/Profile.tsx create mode 100644 src/features/home/home.scss create mode 100644 src/features/home/hooks/useHomeContainer.tsx diff --git a/src/features/home/Container.tsx b/src/features/home/Container.tsx index 4f43303..1697800 100644 --- a/src/features/home/Container.tsx +++ b/src/features/home/Container.tsx @@ -1,42 +1,13 @@ -import { useLayoutEffect, useState } from 'react'; -import { useAtom } from 'jotai'; - -import reactLogo from '../../assets/react.svg'; - -import viteLogo from '/vite.svg'; - -import { titleAtom } from '../shared/layout/atom'; +import useHomeContainer from './hooks/useHomeContainer'; +import Profile from './components/Profile'; +import './home.scss'; const HomeContainer = () => { - const [count, setCount] = useState(0); - const [, setTitle] = useAtom(titleAtom); - - useLayoutEffect(() => { - setTitle({ title: 'CardMe' }); - }, []); + useHomeContainer(); return ( <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

+ ); }; diff --git a/src/features/home/components/Profile.tsx b/src/features/home/components/Profile.tsx new file mode 100644 index 0000000..db54584 --- /dev/null +++ b/src/features/home/components/Profile.tsx @@ -0,0 +1,37 @@ +import { useAtom } from 'jotai'; +import { FunctionComponent } from 'react'; + +import { userAtom } from '../../login/atom'; + +const Profile: FunctionComponent = () => { + const [{ email, profileImage, department, name, position }] = + useAtom(userAtom); + + return ( +
+
+ profile +
+
+
+
Name
+
{name}
+
+
+
Department
+
{department}
+
+
+
Email
+
{email}
+
+
+
Position
+
{position}
+
+
+
+ ); +}; + +export default Profile; diff --git a/src/features/home/home.scss b/src/features/home/home.scss new file mode 100644 index 0000000..df8666d --- /dev/null +++ b/src/features/home/home.scss @@ -0,0 +1,39 @@ +@import '../shared/style/color'; + +.profile-box { + display: flex; + flex-direction: column; + + padding: 24px 16px 16px 16px; + gap: 24px; + + .image-box { + display: flex; + justify-content: center; + + .image { + width: 100px; + height: 100px; + } + } + + .list-box { + display: flex; + flex-direction: column; + + gap: 16px; + + .list { + display: flex; + height: 24px; + gap: 16px; + + .name { + width: 100px; + } + .description { + color: $description-gray; + } + } + } +} \ No newline at end of file diff --git a/src/features/home/hooks/useHomeContainer.tsx b/src/features/home/hooks/useHomeContainer.tsx new file mode 100644 index 0000000..e6aa9c4 --- /dev/null +++ b/src/features/home/hooks/useHomeContainer.tsx @@ -0,0 +1,14 @@ +import { useAtom } from 'jotai'; +import { useLayoutEffect } from 'react'; + +import { titleAtom } from '../../shared/layout/atom'; + +const useHomeContainer = () => { + const [, setTitle] = useAtom(titleAtom); + + useLayoutEffect(() => { + setTitle({ title: 'CardMe' }); + }, []); +}; + +export default useHomeContainer; diff --git a/src/features/login/constants.ts b/src/features/login/constants.ts index b6423e3..74cf02a 100644 --- a/src/features/login/constants.ts +++ b/src/features/login/constants.ts @@ -1,8 +1,11 @@ import { DummyUser } from './type'; export const DUMMY_USER: DummyUser = { + name: 'Sangchul', + profileImage: 'https://avatars.githubusercontent.com/u/23524849?v=4', email: '1ilsang@naver.com', companyNo: 'JS1234', password: 'just', - department: 'dev1', + department: 'Social Dev1', + position: 'Software Engineer', }; diff --git a/src/features/login/type.ts b/src/features/login/type.ts index f55c815..a011ffe 100644 --- a/src/features/login/type.ts +++ b/src/features/login/type.ts @@ -1,7 +1,10 @@ export type User = { + name?: string; + profileImage?: string; email?: string; companyNo?: string; department?: string; + position?: string; }; export type DummyUser = User & { password?: string }; diff --git a/src/features/shared/style/_color.scss b/src/features/shared/style/_color.scss index 3cde83a..35bb0e7 100644 --- a/src/features/shared/style/_color.scss +++ b/src/features/shared/style/_color.scss @@ -1,6 +1,10 @@ $bolder-default: #e9e9f1; $other-area-color: #e6e6e6; $container-color: #ffffff; +<<<<<<< HEAD $button-background-color: #191919; $button-text-color: #ffffff; +======= +$description-gray: #9797AE; +>>>>>>> 77ea194 (feat(home): Add Profile section) From 350b1286b04ab64ca72ecb97606e059857313a57 Mon Sep 17 00:00:00 2001 From: 1ilsang <1ilsang@naver.com> Date: Sun, 20 Aug 2023 00:02:04 +0900 Subject: [PATCH 2/2] feat(home): Add Active --- public/svg/active.svg | 14 +++++++++ public/svg/right.svg | 3 ++ public/vite.svg | 1 - src/features/home/Container.tsx | 4 +++ src/features/home/components/Active.tsx | 29 ++++++++++++++++++ src/features/home/components/GrayBar.tsx | 5 ++++ src/features/home/home.scss | 38 +++++++++++++++++++++++- src/features/shared/constants/url.ts | 1 + src/features/shared/style/_color.scss | 6 ++-- 9 files changed, 95 insertions(+), 6 deletions(-) create mode 100644 public/svg/active.svg create mode 100644 public/svg/right.svg delete mode 100644 public/vite.svg create mode 100644 src/features/home/components/Active.tsx create mode 100644 src/features/home/components/GrayBar.tsx diff --git a/public/svg/active.svg b/public/svg/active.svg new file mode 100644 index 0000000..5eb267c --- /dev/null +++ b/public/svg/active.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/svg/right.svg b/public/svg/right.svg new file mode 100644 index 0000000..b468424 --- /dev/null +++ b/public/svg/right.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/features/home/Container.tsx b/src/features/home/Container.tsx index 1697800..57349c5 100644 --- a/src/features/home/Container.tsx +++ b/src/features/home/Container.tsx @@ -1,6 +1,8 @@ import useHomeContainer from './hooks/useHomeContainer'; import Profile from './components/Profile'; import './home.scss'; +import Active from './components/Active'; +import GrayBar from './components/GrayBar'; const HomeContainer = () => { useHomeContainer(); @@ -8,6 +10,8 @@ const HomeContainer = () => { return ( <> + + ); }; diff --git a/src/features/home/components/Active.tsx b/src/features/home/components/Active.tsx new file mode 100644 index 0000000..305d6aa --- /dev/null +++ b/src/features/home/components/Active.tsx @@ -0,0 +1,29 @@ +import { FunctionComponent } from 'react'; +import { useNavigate } from 'react-router-dom'; + +import activeLogo from '/svg/active.svg'; +import rightIcon from '/svg/right.svg'; + +import { URL } from '../../shared/constants/url'; + +const Active: FunctionComponent = () => { + const navigate = useNavigate(); + const handleActiveClick = () => navigate(URL.setting); + + return ( +
+
+ active icon +
+
+
Active
+
Expressing myself
+
+
+ next +
+
+ ); +}; + +export default Active; diff --git a/src/features/home/components/GrayBar.tsx b/src/features/home/components/GrayBar.tsx new file mode 100644 index 0000000..22ab028 --- /dev/null +++ b/src/features/home/components/GrayBar.tsx @@ -0,0 +1,5 @@ +const GrayBar = () => { + return
; +}; + +export default GrayBar; diff --git a/src/features/home/home.scss b/src/features/home/home.scss index df8666d..f5166b2 100644 --- a/src/features/home/home.scss +++ b/src/features/home/home.scss @@ -32,8 +32,44 @@ width: 100px; } .description { - color: $description-gray; + color: $description-sub; } } } +} +.gray-bar { + height: 12px; + background-color: $other-area-color; +} +.active-box { + display: flex; + align-items: center; + justify-content: space-between; + + cursor: pointer; + + height: 72px; + padding: 8px 16px; + gap: 16px; + + .icon-box { + width: 36px; + height: 36px; + } + + .content { + // width: 260px; + width: 100%; + padding: 0px 12px; + + .title { + font-weight: 500; + line-height: 24px; + } + + .description { + color: $description-sub; + font-size: 14px; + } + } } \ No newline at end of file diff --git a/src/features/shared/constants/url.ts b/src/features/shared/constants/url.ts index d32742e..52b8bb6 100644 --- a/src/features/shared/constants/url.ts +++ b/src/features/shared/constants/url.ts @@ -1,4 +1,5 @@ export enum URL { home = '/', login = '/login', + setting = '/setting', } diff --git a/src/features/shared/style/_color.scss b/src/features/shared/style/_color.scss index 35bb0e7..868e0c2 100644 --- a/src/features/shared/style/_color.scss +++ b/src/features/shared/style/_color.scss @@ -1,10 +1,8 @@ $bolder-default: #e9e9f1; $other-area-color: #e6e6e6; $container-color: #ffffff; -<<<<<<< HEAD $button-background-color: #191919; $button-text-color: #ffffff; -======= -$description-gray: #9797AE; ->>>>>>> 77ea194 (feat(home): Add Profile section) + +$description-sub: #7878B8;