From 0f4a6e3efc2ec8741d5b9275eb50db131cf7618b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= Date: Mon, 11 Nov 2024 17:11:26 +0900 Subject: [PATCH 01/11] =?UTF-8?q?[CHORE][FE]=20boxShadow=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/tailwind.config.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index fbad7b2f..95613736 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -10,7 +10,7 @@ module.exports = { grayscale: { white: '#FFFFFF', 50: 'rgba(60, 60, 67, 0.36)', - 100: '#EDF2F7', + 100: '#B7B7B7', 200: '#6D6D6D', 400: '#555555', 800: '#3E3E3E', @@ -43,6 +43,10 @@ module.exports = { '5xl': '3rem', '6xl': '4rem', }, + boxShadow: { + float: '0 4px 20px rgba(0, 0, 0, 0.13)', + basic: 'inset 0 0 3px rgba(0, 0, 0, 0.11)', + }, }, // 필요한 커스터마이징을 여기서 설정 가능 }, plugins: [], From 3dc5d05ebdb758d3f8bd6cfd4ef063dd942ec1ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= Date: Mon, 11 Nov 2024 17:12:05 +0900 Subject: [PATCH 02/11] =?UTF-8?q?[FEAT][FE]=20#134=20:=20Footer=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/Layout/Footer.tsx | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 frontend/src/component/Layout/Footer.tsx diff --git a/frontend/src/component/Layout/Footer.tsx b/frontend/src/component/Layout/Footer.tsx new file mode 100644 index 00000000..3638083f --- /dev/null +++ b/frontend/src/component/Layout/Footer.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +interface IFooterProps { + title: string; + onClick?: () => void; + active?: boolean; +} + +export const Footer: React.FC = ({ title, onClick, active }) => { + const shadow = active ? 'shadow-float' : 'shadow-basic'; + const fontColor = active ? 'text-gray-900' : 'text-gray-100'; + + return ( +
+ +
+ ); +}; From 7a33efed41610c846ae892fbbefeb5e6c374af7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= Date: Mon, 11 Nov 2024 17:33:51 +0900 Subject: [PATCH 03/11] =?UTF-8?q?[FEAT][FE]=20#134=20:=20Header=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/Layout/Header.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 frontend/src/component/Layout/Header.tsx diff --git a/frontend/src/component/Layout/Header.tsx b/frontend/src/component/Layout/Header.tsx new file mode 100644 index 00000000..57ce2caa --- /dev/null +++ b/frontend/src/component/Layout/Header.tsx @@ -0,0 +1,18 @@ +import React, { ReactNode } from 'react'; + +interface IHeaderProps { + title?: string; + isTransparency?: boolean; + buttonElement?: ReactNode; +} + +export const Header: React.FC = ({ title, isTransparency, buttonElement }) => { + const background = isTransparency ? '' : 'bg-white'; + + return ( +
+ {buttonElement} +

{title}

+
+ ); +}; From 698e99fd743ce176b4ab22c2146f8981b25a45fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= Date: Mon, 11 Nov 2024 17:34:12 +0900 Subject: [PATCH 04/11] =?UTF-8?q?[FEAT][FE]=20#134=20:=20Layout=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/Layout/Layout.tsx | 34 ++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 frontend/src/component/Layout/Layout.tsx diff --git a/frontend/src/component/Layout/Layout.tsx b/frontend/src/component/Layout/Layout.tsx new file mode 100644 index 00000000..66b1fbda --- /dev/null +++ b/frontend/src/component/Layout/Layout.tsx @@ -0,0 +1,34 @@ +import React, { ReactNode } from 'react'; +import { Header } from './Header'; +import { Footer } from './Footer'; + +interface ILayoutProps { + children: ReactNode; + headerTitle?: string; + footerTitle?: string; + isHeaderTransparent?: boolean; + footerActive?: boolean; + headerButton?: ReactNode; + footerOnClick?: () => void; +} + +export const Layout: React.FC = ({ + children, + headerTitle = '사용자 1에 대한 경로 설정', + footerTitle = '출발지점 선택', + isHeaderTransparent = false, + footerActive = true, + headerButton, + footerOnClick, +}) => ( +
+ {/* Header */} +
+ + {/* Main content */} +
{children}
+ + {/* Footer */} +
+
+); From d89350f2988b7e55df5806fff440ff38ce75c8ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= Date: Mon, 11 Nov 2024 17:41:44 +0900 Subject: [PATCH 05/11] =?UTF-8?q?[FEAT][FE]=20Footer=20title=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/Layout/Footer.tsx | 4 ++-- frontend/src/component/Layout/Layout.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/component/Layout/Footer.tsx b/frontend/src/component/Layout/Footer.tsx index 3638083f..42835c2e 100644 --- a/frontend/src/component/Layout/Footer.tsx +++ b/frontend/src/component/Layout/Footer.tsx @@ -1,14 +1,14 @@ import React from 'react'; interface IFooterProps { - title: string; + title?: string; onClick?: () => void; active?: boolean; } export const Footer: React.FC = ({ title, onClick, active }) => { const shadow = active ? 'shadow-float' : 'shadow-basic'; - const fontColor = active ? 'text-gray-900' : 'text-gray-100'; + const fontColor = active ? 'text-gray-900' : 'text-gray-400'; return (