From 35a45f46b05d3cc89d2f418fcbee18297978e23c Mon Sep 17 00:00:00 2001 From: joojjang Date: Sat, 28 Sep 2024 17:12:52 +0900 Subject: [PATCH 01/14] =?UTF-8?q?fix(routes):=20=EB=82=B4=EB=B8=8C?= =?UTF-8?q?=EB=B0=94=20=EC=95=88=20=EC=93=B0=EB=8A=94=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EB=93=A4=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/index.tsx | 70 +++++++++++++++++++++++--------------------- 1 file changed, 37 insertions(+), 33 deletions(-) diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 91efc7a..dd07586 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -50,41 +50,8 @@ const router = createBrowserRouter([ ), }, - { - path: RouterPath.record, - element: ( - - - - ), - }, - { - path: `:id/${RouterPath.detail}`, - element: ( - - - - ), - }, - { - path: `:id/${RouterPath.review}`, - element: ( - - - - ), - }, - { - path: `:id/${RouterPath.write}`, - element: ( - - - - ), - }, ], }, - { path: RouterPath.rank, element: ( @@ -107,6 +74,43 @@ const router = createBrowserRouter([ }, ], }, + { + path: RouterPath.challenge, + children: [ + { + path: `:id/${RouterPath.detail}`, + element: ( + + + + ), + }, + { + path: `:id/${RouterPath.review}`, + element: ( + + + + ), + }, + { + path: RouterPath.record, + element: ( + + + + ), + }, + { + path: `:id/${RouterPath.write}`, + element: ( + + + + ), + }, + ], + }, { path: RouterPath.shorts, element: , From 31a9c5b2d526c0c70b47bac32cf35386c6d85467 Mon Sep 17 00:00:00 2001 From: joojjang Date: Sat, 28 Sep 2024 17:16:23 +0900 Subject: [PATCH 02/14] =?UTF-8?q?fix(layout):=20=EB=82=B4=EB=B8=8C?= =?UTF-8?q?=EB=B0=94=20=EC=97=86=EB=8A=94=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?Wrapper=20=ED=95=98=EB=8B=A8=20=EB=A7=88=EC=A7=84=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 챌린지 상세, 리뷰, 리뷰 쓰기 --- src/pages/challenge-detail/index.tsx | 1 - src/pages/review-write/index.tsx | 3 +-- src/pages/review/index.tsx | 1 - 3 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/pages/challenge-detail/index.tsx b/src/pages/challenge-detail/index.tsx index 31232be..3652cbb 100644 --- a/src/pages/challenge-detail/index.tsx +++ b/src/pages/challenge-detail/index.tsx @@ -106,7 +106,6 @@ export default ChallengeDetailPage; export const Wrapper = styled.div` width: 100%; - margin-bottom: 3.44rem; // 하단 내브 바 높이 `; export const ImageList = styled.div` diff --git a/src/pages/review-write/index.tsx b/src/pages/review-write/index.tsx index a0dc546..82624d2 100644 --- a/src/pages/review-write/index.tsx +++ b/src/pages/review-write/index.tsx @@ -201,7 +201,6 @@ const Wrapper = styled.div` display: flex; flex-direction: column; text-align: left; - margin-bottom: 3.44rem; gap: 16px; `; @@ -291,7 +290,7 @@ const Content = styled.textarea<{ valid?: boolean }>` const CTABox = styled(Box)` position: fixed; - bottom: 3.44rem; // 밑에 탭바 + bottom: 0; display: flex; width: 100%; height: 3.44rem; diff --git a/src/pages/review/index.tsx b/src/pages/review/index.tsx index 5867b05..667ffed 100644 --- a/src/pages/review/index.tsx +++ b/src/pages/review/index.tsx @@ -102,7 +102,6 @@ const Wrapper = styled.div` display: flex; flex-direction: column; text-align: center; - margin-bottom: 3.44rem; `; const Title = styled.div` From 2cca3b231e63b240394014867a8bdbc11be8437a Mon Sep 17 00:00:00 2001 From: joojjang Date: Sat, 28 Sep 2024 17:33:40 +0900 Subject: [PATCH 03/14] =?UTF-8?q?refactor(reset.css)=20css=20=EC=B4=88?= =?UTF-8?q?=EA=B8=B0=ED=99=94=20=EC=BD=94=EB=93=9C=20=ED=95=9C=20=EA=B5=B0?= =?UTF-8?q?=EB=8D=B0=EB=A1=9C=20=EB=B3=91=ED=95=A9,=20globalStyles?= =?UTF-8?q?=EC=99=80=20reset.css=20=EA=B8=B0=EB=8A=A5=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - globalStyles에는 폰트 사이즈와 컬러 등의 전역 변수만 정의 - reset.css에 css 초기화 --- src/styles/globalStyles.ts | 36 --------------- src/styles/reset.css | 94 ++++++++++++++++++++++++++------------ 2 files changed, 64 insertions(+), 66 deletions(-) diff --git a/src/styles/globalStyles.ts b/src/styles/globalStyles.ts index 1e150e0..71b9c57 100644 --- a/src/styles/globalStyles.ts +++ b/src/styles/globalStyles.ts @@ -29,8 +29,6 @@ const colorClass06 = '#8B00FF'; const colorClass07 = '#009000'; export const globalStyle = css` - @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); - :root { --font-size-xxl: ${fontSizeXXl}; --font-size-xl: ${fontSizeXl}; @@ -57,38 +55,4 @@ export const globalStyle = css` --color-class-06: ${colorClass06}; --color-class-07: ${colorClass07}; } - - body { - margin: 0; - padding: 0; - font-family: 'Noto Sans', monospace; - box-sizing: border-box; - overflow-y: auto; - width: 100%; - height: 100%; - overflow-y: auto; - - /* 중앙 정렬 및 고정 너비 적용 */ - position: relative; - // transform: translateX(-50%); - // left: 50%; - - // 모바일 너비 적용 - @media (min-width: 768px) { - width: 480px; - } - - /* position: fixed; */ - /* left: 50%; */ - } - - img { - display: block; - } - - ul { - list-style: none; - padding: 0; - margin: 0; - } `; diff --git a/src/styles/reset.css b/src/styles/reset.css index 63a6188..9d590f5 100644 --- a/src/styles/reset.css +++ b/src/styles/reset.css @@ -1,9 +1,43 @@ +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); + html { - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; } * { - box-sizing: border-box; + box-sizing: border-box; +} +body { + margin: 0; + padding: 0; + font-family: 'Noto Sans', monospace; + box-sizing: border-box; + overflow-y: auto; + width: 100%; + height: 100%; + overflow-y: auto; + + /* 중앙 정렬 및 고정 너비 적용 */ + position: relative; + /* transform: translateX(-50%); */ + /* left: 50%; */ + + /* 데스크탑 디스플레이에서도 모바일 UI 적용 */ + @media (min-width: 768px) { + width: 480px; + } + + /* position: fixed; */ + /* left: 50%; */ +} + +img { + display: block; +} +ul { + list-style: none; + padding: 0; + margin: 0; } abbr, blockquote, @@ -35,65 +69,65 @@ figcaption, pre, th, ul { - margin: 0; - padding: 0; - font-weight: 400; - font-style: normal; + margin: 0; + padding: 0; + font-weight: 400; + font-style: normal; } fieldset, iframe { - border: 0; + border: 0; } caption, th { - text-align: left; + text-align: left; } table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } details, main, summary { - display: block; + display: block; } audio, canvas, progress, video { - vertical-align: initial; + vertical-align: initial; } button { - background: none; - border: 0; - box-sizing: initial; - color: inherit; - cursor: pointer; - font: inherit; - line-height: inherit; - overflow: visible; - vertical-align: inherit; + background: none; + border: 0; + box-sizing: initial; + color: inherit; + cursor: pointer; + font: inherit; + line-height: inherit; + overflow: visible; + vertical-align: inherit; } button:disabled { - cursor: default; + cursor: default; } :focus { - outline: 4px solid rgba(0, 125, 250, 0.6); - outline-offset: 1px; + outline: 4px solid rgba(0, 125, 250, 0.6); + outline-offset: 1px; } :focus[data-focus-method='mouse']:not(input):not(textarea):not(select), :focus[data-focus-method='touch']:not(input):not(textarea):not(select) { - outline: none; + outline: none; } ::-moz-focus-inner { - border: 0; - padding: 0; + border: 0; + padding: 0; } a { - text-decoration: none; + text-decoration: none; } a:focus { - outline: none; + outline: none; } From 0fbb8a454ac7804cdb3ea00c901c22d716dce3d5 Mon Sep 17 00:00:00 2001 From: joojjang Date: Sat, 28 Sep 2024 17:46:38 +0900 Subject: [PATCH 04/14] =?UTF-8?q?fix(review-write):=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=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 --- src/pages/review-write/index.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/pages/review-write/index.tsx b/src/pages/review-write/index.tsx index 82624d2..d2bb008 100644 --- a/src/pages/review-write/index.tsx +++ b/src/pages/review-write/index.tsx @@ -183,13 +183,14 @@ const ReviewWrite = () => { 될 수 있습니다. + + + + 등록하기 + + - - - 등록하기 - - ); }; @@ -201,7 +202,9 @@ const Wrapper = styled.div` display: flex; flex-direction: column; text-align: left; + width: 100%; gap: 16px; + margin-bottom: 4rem; `; const ChallengeTitleWrapper = styled.div` @@ -293,8 +296,9 @@ const CTABox = styled(Box)` bottom: 0; display: flex; width: 100%; - height: 3.44rem; - padding: 4px 16px; + height: 4rem; + padding: 8px 16px; + background-color: var(--color-white); `; const SubmitButton = styled.button<{ disabled?: boolean }>` From 6c26cda25f02f07cfd225a407bcb9746f821a439 Mon Sep 17 00:00:00 2001 From: joojjang Date: Sun, 29 Sep 2024 03:46:46 +0900 Subject: [PATCH 05/14] =?UTF-8?q?fix(reset.css):=20body=20=EC=A4=91?= =?UTF-8?q?=EC=95=99=20=EC=A0=95=EB=A0=AC=20=EC=A0=81=EC=9A=A9,=20NavBar?= =?UTF-8?q?=20=ED=95=98=EB=8B=A8=EC=97=90=20=EA=B3=A0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/review-write/index.tsx | 4 +--- src/styles/reset.css | 15 ++++++--------- 2 files changed, 7 insertions(+), 12 deletions(-) diff --git a/src/pages/review-write/index.tsx b/src/pages/review-write/index.tsx index d2bb008..20511e6 100644 --- a/src/pages/review-write/index.tsx +++ b/src/pages/review-write/index.tsx @@ -183,7 +183,6 @@ const ReviewWrite = () => { 될 수 있습니다. - @@ -204,7 +203,6 @@ const Wrapper = styled.div` text-align: left; width: 100%; gap: 16px; - margin-bottom: 4rem; `; const ChallengeTitleWrapper = styled.div` @@ -292,7 +290,7 @@ const Content = styled.textarea<{ valid?: boolean }>` `; const CTABox = styled(Box)` - position: fixed; + position: sticky; bottom: 0; display: flex; width: 100%; diff --git a/src/styles/reset.css b/src/styles/reset.css index 9d590f5..8a910c9 100644 --- a/src/styles/reset.css +++ b/src/styles/reset.css @@ -14,21 +14,18 @@ body { box-sizing: border-box; overflow-y: auto; width: 100%; - height: 100%; - overflow-y: auto; - - /* 중앙 정렬 및 고정 너비 적용 */ + height: 100vh; + /* overflow-y: auto; */ position: relative; - /* transform: translateX(-50%); */ - /* left: 50%; */ + + /* 중앙 정렬 */ + transform: translateX(-50%); + left: 50%; /* 데스크탑 디스플레이에서도 모바일 UI 적용 */ @media (min-width: 768px) { width: 480px; } - - /* position: fixed; */ - /* left: 50%; */ } img { From 88c3123318543fa317985a6709b64a87d1a874bb Mon Sep 17 00:00:00 2001 From: joojjang Date: Sun, 29 Sep 2024 03:56:24 +0900 Subject: [PATCH 06/14] =?UTF-8?q?Refactor(layout):=20=EB=82=B4=EB=B8=8C?= =?UTF-8?q?=EB=B0=94=20=EC=9E=88=EB=8A=94=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 레이아웃 컴포넌트명이 헷갈리게 되어 있어서 수정하고 폴더 분리 - 핸들러 함수명 오타 수정 --- .../features/layout/nav-bar-layout/index.tsx | 19 ++++++ .../features/layout/nav-bar/buttons.tsx | 46 -------------- .../features/layout/nav-bar/index.tsx | 60 +++++++++++++------ src/routes/index.tsx | 6 +- 4 files changed, 64 insertions(+), 67 deletions(-) create mode 100644 src/components/features/layout/nav-bar-layout/index.tsx delete mode 100644 src/components/features/layout/nav-bar/buttons.tsx diff --git a/src/components/features/layout/nav-bar-layout/index.tsx b/src/components/features/layout/nav-bar-layout/index.tsx new file mode 100644 index 0000000..4b6f8d9 --- /dev/null +++ b/src/components/features/layout/nav-bar-layout/index.tsx @@ -0,0 +1,19 @@ +import NavBarButtons from '@/components/features/layout/nav-bar'; +import { Box } from '@chakra-ui/react'; + +type NavBarTypes = { + children: React.ReactNode; +}; + +const NavBarLayout = ({ children }: NavBarTypes) => { + return ( + + {children} + + + + + ); +}; + +export default NavBarLayout; diff --git a/src/components/features/layout/nav-bar/buttons.tsx b/src/components/features/layout/nav-bar/buttons.tsx deleted file mode 100644 index bf6a038..0000000 --- a/src/components/features/layout/nav-bar/buttons.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { useNavigate } from 'react-router-dom'; - -import { navBarData } from '@/constants/nav-bar'; -import { Box, Image } from '@chakra-ui/react'; -import styled from '@emotion/styled'; - -const NavBarButtons = () => { - const navigate = useNavigate(); - const handlerNav = (page: string) => { - navigate(page); - }; - return ( - - {navBarData.map((item) => ( - - handlerNav(item.path)} - src={item.icon} - alt={item.title} - /> - - ))} - - ); -}; - -export default NavBarButtons; - -const NavButtonLayout = styled(Box)` - display: flex; - flex-direction: row; - - position: fixed; - width: 100%; - bottom: 0; - left: 0; - - height: 3.44rem; - - justify-content: center; - align-items: center; - gap: 2.5rem; - - border-top: 0.5px solid #bdc5cd; - background-color: #fafafa; -`; diff --git a/src/components/features/layout/nav-bar/index.tsx b/src/components/features/layout/nav-bar/index.tsx index a1dc64d..d80c488 100644 --- a/src/components/features/layout/nav-bar/index.tsx +++ b/src/components/features/layout/nav-bar/index.tsx @@ -1,24 +1,48 @@ -import NavBarButtons from './buttons.tsx'; -import { Box } from '@chakra-ui/react'; +import { useNavigate } from 'react-router-dom'; -type NavBarTypes = { - children: React.ReactNode; -}; +import { navBarData } from '@/constants/nav-bar'; +import { Box, Image } from '@chakra-ui/react'; +import styled from '@emotion/styled'; + +const NavBar = () => { + const navigate = useNavigate(); + + const handleNav = (page: string) => { + navigate(page); + }; -const Index = ({ children }: NavBarTypes) => { return ( - <> - - {children} - - - + + {navBarData.map((item) => ( + + handleNav(item.path)} + src={item.icon} + alt={item.title} + /> + + ))} + ); }; -export default Index; +export default NavBar; + +const Wrapper = styled(Box)` + display: flex; + flex-direction: row; + + position: fixed; + width: 100%; + bottom: 0; + left: 0; + + height: 3.44rem; + + justify-content: center; + align-items: center; + gap: 2.5rem; + + border-top: 0.5px solid #bdc5cd; + background-color: #fafafa; +`; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index dd07586..ea75beb 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,7 +1,7 @@ import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom'; import { ProtectedRoute } from './protected-route'; -import NavBar from '@/components/features/layout/nav-bar'; +import NavBarLayout from '@/components/features/layout/nav-bar-layout'; import ErrorPage from '@/pages/ErrorPage'; import ChallengeDetailPage from '@/pages/challenge-detail'; import ChallengeRecord from '@/pages/challenge-record'; @@ -22,9 +22,9 @@ const router = createBrowserRouter([ { path: RouterPath.root, element: ( - + - + ), children: [ { From 489504551f197eaef163af375752047470cbb483 Mon Sep 17 00:00:00 2001 From: joojjang Date: Sun, 29 Sep 2024 04:01:25 +0900 Subject: [PATCH 07/14] =?UTF-8?q?fix(nav-bar):=20position:=20fixed=20->=20?= =?UTF-8?q?sticky=EB=A1=9C=20=EB=B3=80=EA=B2=BD.=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=ED=95=98=EB=8B=A8=EC=97=90=20=EA=B3=A0=EC=A0=95=EB=90=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/features/layout/nav-bar/index.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/features/layout/nav-bar/index.tsx b/src/components/features/layout/nav-bar/index.tsx index d80c488..dc53c48 100644 --- a/src/components/features/layout/nav-bar/index.tsx +++ b/src/components/features/layout/nav-bar/index.tsx @@ -31,17 +31,15 @@ export default NavBar; const Wrapper = styled(Box)` display: flex; flex-direction: row; - - position: fixed; - width: 100%; - bottom: 0; - left: 0; - - height: 3.44rem; - justify-content: center; align-items: center; gap: 2.5rem; + width: 100%; + height: 3.44rem; + + position: sticky; + bottom: 0; + left: 0; border-top: 0.5px solid #bdc5cd; background-color: #fafafa; From f63d2b130a604484a6c5c12263094692a1f4cd3b Mon Sep 17 00:00:00 2001 From: joojjang Date: Sun, 29 Sep 2024 04:06:50 +0900 Subject: [PATCH 08/14] =?UTF-8?q?fix:=20=EC=98=A4=ED=83=80=20=EC=88=98?= =?UTF-8?q?=EC=A0=95,=20=EA=B8=B0=EB=8A=A5=EC=97=90=20=EB=A7=9E=EA=B2=8C?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=AA=85=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../features/layout/nav-bar-layout/index.tsx | 10 ++++------ src/pages/main/index.tsx | 6 +++--- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/components/features/layout/nav-bar-layout/index.tsx b/src/components/features/layout/nav-bar-layout/index.tsx index 4b6f8d9..c1d358b 100644 --- a/src/components/features/layout/nav-bar-layout/index.tsx +++ b/src/components/features/layout/nav-bar-layout/index.tsx @@ -1,17 +1,15 @@ -import NavBarButtons from '@/components/features/layout/nav-bar'; +import NavBar from '@/components/features/layout/nav-bar'; import { Box } from '@chakra-ui/react'; -type NavBarTypes = { +type NavBarLayoutTypes = { children: React.ReactNode; }; -const NavBarLayout = ({ children }: NavBarTypes) => { +const NavBarLayout = ({ children }: NavBarLayoutTypes) => { return ( {children} - - - + ); }; diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx index 081b022..92fab6e 100644 --- a/src/pages/main/index.tsx +++ b/src/pages/main/index.tsx @@ -9,18 +9,18 @@ const MainPage = () => { return ( <> - + - + ); }; export default MainPage; -const LoginPageLayout = styled.div` +const Wrapper = styled.div` min-height: 100vh; `; From 0ef9bfa8e48309dfd19a599de508a9b91e187d05 Mon Sep 17 00:00:00 2001 From: joojjang Date: Sun, 29 Sep 2024 04:20:15 +0900 Subject: [PATCH 09/14] =?UTF-8?q?refactor(nav-bar):=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81=20=EB=B0=8F=20=ED=83=AD=EB=B3=84=EB=A1=9C=20?= =?UTF-8?q?=EB=84=88=EB=B9=84=20=EB=8F=99=EC=9D=BC=ED=95=98=EA=B2=8C=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 --- .../features/layout/nav-bar/index.tsx | 33 ++++++++++++++----- 1 file changed, 24 insertions(+), 9 deletions(-) diff --git a/src/components/features/layout/nav-bar/index.tsx b/src/components/features/layout/nav-bar/index.tsx index dc53c48..0e05e59 100644 --- a/src/components/features/layout/nav-bar/index.tsx +++ b/src/components/features/layout/nav-bar/index.tsx @@ -1,7 +1,7 @@ import { useNavigate } from 'react-router-dom'; import { navBarData } from '@/constants/nav-bar'; -import { Box, Image } from '@chakra-ui/react'; +import { Box } from '@chakra-ui/react'; import styled from '@emotion/styled'; const NavBar = () => { @@ -14,13 +14,13 @@ const NavBar = () => { return ( {navBarData.map((item) => ( - - handleNav(item.path)} + + handleNav(item.path)} /> - + ))} ); @@ -31,9 +31,6 @@ export default NavBar; const Wrapper = styled(Box)` display: flex; flex-direction: row; - justify-content: center; - align-items: center; - gap: 2.5rem; width: 100%; height: 3.44rem; @@ -44,3 +41,21 @@ const Wrapper = styled(Box)` border-top: 0.5px solid #bdc5cd; background-color: #fafafa; `; + +const Tab = styled.div` + width: 50%; + height: 100%; + display: inline-flex; + justify-content: center; + align-items: center; +`; + +const Icon = styled.button<{ src: string }>` + width: 2rem; + height: 2rem; + outline: none; + background-image: url(${({ src }) => src}); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +`; From 8a7a1e9d50bcf836feb0bcf0f60de3fa329ff2c0 Mon Sep 17 00:00:00 2001 From: joojjang Date: Sun, 29 Sep 2024 04:25:45 +0900 Subject: [PATCH 10/14] =?UTF-8?q?refactor(nav-bar):=20nav-bar=20=EB=86=92?= =?UTF-8?q?=EC=9D=B4=20=EC=83=81=EC=88=98=EB=A1=9C=20=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/features/layout/nav-bar/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/features/layout/nav-bar/index.tsx b/src/components/features/layout/nav-bar/index.tsx index 0e05e59..03dffe0 100644 --- a/src/components/features/layout/nav-bar/index.tsx +++ b/src/components/features/layout/nav-bar/index.tsx @@ -4,6 +4,8 @@ import { navBarData } from '@/constants/nav-bar'; import { Box } from '@chakra-ui/react'; import styled from '@emotion/styled'; +export const NAVBAR_HEIGHT = '3.44rem'; + const NavBar = () => { const navigate = useNavigate(); @@ -32,7 +34,7 @@ const Wrapper = styled(Box)` display: flex; flex-direction: row; width: 100%; - height: 3.44rem; + height: ${NAVBAR_HEIGHT}; position: sticky; bottom: 0; From 162ab6e659b292eed8a20bb889674437950a8a34 Mon Sep 17 00:00:00 2001 From: joojjang Date: Sun, 29 Sep 2024 04:39:17 +0900 Subject: [PATCH 11/14] =?UTF-8?q?fix(my-challenge):=20=EC=9A=94=EC=86=8C?= =?UTF-8?q?=20=EB=84=88=EB=B9=84=EA=B0=80=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EB=B2=97=EC=96=B4=EB=82=9C=20=EA=B2=83=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 - margin은 너비에 포함 안 되므로, 마진을 두면서 너비 100%로 설정하지 않도록 함. --- src/pages/my-challenge/index.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/pages/my-challenge/index.tsx b/src/pages/my-challenge/index.tsx index 83cca4c..540b3ec 100644 --- a/src/pages/my-challenge/index.tsx +++ b/src/pages/my-challenge/index.tsx @@ -28,15 +28,8 @@ const MyChallengePage = () => { <> - - 참여중인 챌린지 + + 참여 중인 챌린지 Date: Sun, 29 Sep 2024 04:54:52 +0900 Subject: [PATCH 12/14] =?UTF-8?q?fix(nav-bar-layout):=20=EC=BB=A8=ED=85=90?= =?UTF-8?q?=EC=B8=A0=20=EC=98=81=EC=97=AD=20=EB=AF=B8=EB=8B=88=EB=A9=88=20?= =?UTF-8?q?=EB=86=92=EC=9D=B4=20=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/features/layout/nav-bar-layout/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/features/layout/nav-bar-layout/index.tsx b/src/components/features/layout/nav-bar-layout/index.tsx index c1d358b..bd8416e 100644 --- a/src/components/features/layout/nav-bar-layout/index.tsx +++ b/src/components/features/layout/nav-bar-layout/index.tsx @@ -1,4 +1,4 @@ -import NavBar from '@/components/features/layout/nav-bar'; +import NavBar, { NAVBAR_HEIGHT } from '@/components/features/layout/nav-bar'; import { Box } from '@chakra-ui/react'; type NavBarLayoutTypes = { @@ -8,7 +8,7 @@ type NavBarLayoutTypes = { const NavBarLayout = ({ children }: NavBarLayoutTypes) => { return ( - {children} + {children} ); From 169eaeef3e06a92d85cae67c9ce0a793d68e8d21 Mon Sep 17 00:00:00 2001 From: joojjang Date: Sun, 29 Sep 2024 04:57:14 +0900 Subject: [PATCH 13/14] =?UTF-8?q?refactor(body):=20body=20=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=20=EC=98=A4=EB=B2=84=ED=94=8C=EB=A1=9C=EC=9A=B0=20?= =?UTF-8?q?=EB=AA=85=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 명시 안 해도 똑같지만... --- src/styles/reset.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/reset.css b/src/styles/reset.css index 8a910c9..2cc6bc9 100644 --- a/src/styles/reset.css +++ b/src/styles/reset.css @@ -15,7 +15,7 @@ body { overflow-y: auto; width: 100%; height: 100vh; - /* overflow-y: auto; */ + overflow-y: auto; position: relative; /* 중앙 정렬 */ From a427aaab9e35071f6e07841cbebe4332dedd0538 Mon Sep 17 00:00:00 2001 From: joojjang Date: Sun, 29 Sep 2024 05:01:25 +0900 Subject: [PATCH 14/14] =?UTF-8?q?fix(main):=20=EB=86=92=EC=9D=B4=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 --- src/pages/main/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx index 92fab6e..0a0b2b8 100644 --- a/src/pages/main/index.tsx +++ b/src/pages/main/index.tsx @@ -2,7 +2,7 @@ import Category from './components/category'; import Review from './components/review'; import Strick from './components/strick'; import Tier from './components/tier'; -import TopBar from '@/components/features/layout/top-bar'; +import TopBar, { HEADER_HEIGHT } from '@/components/features/layout/top-bar'; import styled from '@emotion/styled'; const MainPage = () => { @@ -22,5 +22,5 @@ const MainPage = () => { export default MainPage; const Wrapper = styled.div` - min-height: 100vh; + min-height: calc(100vh - ${HEADER_HEIGHT}); `;