From 35a45f46b05d3cc89d2f418fcbee18297978e23c Mon Sep 17 00:00:00 2001 From: joojjang Date: Sat, 28 Sep 2024 17:12:52 +0900 Subject: [PATCH 01/25] =?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/25] =?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/25] =?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/25] =?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/25] =?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/25] =?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/25] =?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/25] =?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/25] =?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/25] =?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/25] =?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/25] =?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/25] =?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/25] =?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}); `; From 09e867957392bcbc967715705c5e63614b25326e Mon Sep 17 00:00:00 2001 From: joojjang Date: Sun, 29 Sep 2024 05:14:16 +0900 Subject: [PATCH 15/25] =?UTF-8?q?!HOTFIX:=20=EC=98=A4=ED=83=80=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20(tap=20->=20tab)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/challenge-list/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/challenge-list/index.tsx b/src/pages/challenge-list/index.tsx index 5452826..34f6d44 100644 --- a/src/pages/challenge-list/index.tsx +++ b/src/pages/challenge-list/index.tsx @@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react'; import Contents from './components/contents'; import { useGetChallengeList } from '@/apis/challenge-list/getChallengeList.api'; import { Tab, Tabs } from '@/components/common/tabs'; -import { TabPanel } from '@/components/common/tabs/tap-panels'; +import { TabPanel } from '@/components/common/tabs/tab-panels'; import TopBar from '@/components/features/layout/top-bar'; import { Box, Spinner } from '@chakra-ui/react'; import styled from '@emotion/styled'; From 363ea5e2b94e1b1cc8e758c4278bc1f93794e0cc Mon Sep 17 00:00:00 2001 From: joojjang Date: Sun, 29 Sep 2024 05:16:11 +0900 Subject: [PATCH 16/25] =?UTF-8?q?!HOTFIX(route):=20=EC=B6=A9=EB=8F=8C=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0=ED=95=98=EB=A9=B4=EC=84=9C=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=ED=96=88=EB=8D=98=20=EC=BD=94=EB=93=9C=20=EB=B3=B5?= =?UTF-8?q?=EA=B5=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/index.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 7aef3fe..f6121a7 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -51,6 +51,14 @@ const router = createBrowserRouter([ ), }, + { + path: RouterPath.challengeList, + element: ( + + + + ), + }, ], }, { From babd3bc48fafe65dff2f40c91d0aab301e1091d6 Mon Sep 17 00:00:00 2001 From: joojjang Date: Sun, 29 Sep 2024 06:09:22 +0900 Subject: [PATCH 17/25] =?UTF-8?q?refactor(cta):=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=AA=A8=EB=93=88=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/cta/index.tsx | 58 +++++++++++++++++++++++++++++ src/pages/review-write/index.tsx | 48 ++++-------------------- 2 files changed, 66 insertions(+), 40 deletions(-) create mode 100644 src/components/common/cta/index.tsx diff --git a/src/components/common/cta/index.tsx b/src/components/common/cta/index.tsx new file mode 100644 index 0000000..b6fcc9b --- /dev/null +++ b/src/components/common/cta/index.tsx @@ -0,0 +1,58 @@ +import styled from '@emotion/styled'; + +type CTAProps = { + label: string; + disabled?: boolean; + onClick: () => void; +}; + +export const CTA = ({ label, disabled, onClick }: CTAProps) => { + return ( + + {label} + + ); +}; + +export default CTA; + +const StyledCTA = styled.button<{ disabled?: boolean }>` + width: 100%; + height: 100%; + border: none; + border-radius: 10px; + background-color: var(--color-green-01); + color: var(--color-white); + font-size: var(--font-size-md); + font-weight: bold; + outline: none; + + &:disabled { + cursor: not-allowed; + color: var(--color-grey-01); + background-color: var(--color-grey-02); + } + + /* &:hover와 &:focus는 disabled가 false일 때만 적용 */ + &:hover, + &:focus { + ${({ disabled }) => + !disabled && + ` + opacity: 0.8 !important; + background-color: var(--color-green-01) !important; + color: var(--color-white) !important; + `} + } +`; + +// 컨테이너 필요할 때 따로 임포트하여 사용 +export const CTAContainer = styled.div` + position: sticky; + bottom: 0; + display: flex; + width: 100%; + height: 4rem; + padding: 8px 16px; + background-color: var(--color-white); +`; diff --git a/src/pages/review-write/index.tsx b/src/pages/review-write/index.tsx index 20511e6..b55be2d 100644 --- a/src/pages/review-write/index.tsx +++ b/src/pages/review-write/index.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; import { postReview } from '@/apis/review/review.api'; +import CTA, { CTAContainer } from '@/components/common/cta'; import { StarRating } from '@/components/common/star-rating'; import TopBar from '@/components/features/layout/top-bar'; import { useChallengeStore } from '@/store/useChallengeStore'; @@ -184,11 +185,13 @@ const ReviewWrite = () => { 될 수 있습니다. - - - 등록하기 - - + + + ); @@ -288,38 +291,3 @@ const Content = styled.textarea<{ valid?: boolean }>` : 'var(--color-class-05) 1px solid'}; } `; - -const CTABox = styled(Box)` - position: sticky; - bottom: 0; - display: flex; - width: 100%; - height: 4rem; - padding: 8px 16px; - background-color: var(--color-white); -`; - -const SubmitButton = styled.button<{ disabled?: boolean }>` - width: 100%; - height: 100%; - border: none; - border-radius: 10px; - background-color: var(--color-green-01); - color: var(--color-white); - font-size: var(--font-size-md); - font-weight: bold; - outline: none; - - &:disabled { - cursor: not-allowed; - color: var(--color-grey-01); - background-color: var(--color-grey-02); - } - - &:focus, - &:hover { - opacity: 0.8 !important; - background-color: var(--color-green-01) !important; - color: var(--color-white) !important; - } -`; From 2dfe6e3397b18f39c3964676ddd43ce8b0dc20ec Mon Sep 17 00:00:00 2001 From: joojjang Date: Sun, 29 Sep 2024 06:28:32 +0900 Subject: [PATCH 18/25] =?UTF-8?q?refactor(cta,=20challenge-item):=20cta=20?= =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - padding과 margin에 대한 건 아직 잘 모르겠음 왜 이렇게 하니까 의도한 대로 나오는 건지... --- src/components/common/cta/index.tsx | 7 ++++--- .../components/challenge-item/index.tsx | 5 ++++- .../components/challenge-item/styles.ts | 13 ------------- 3 files changed, 8 insertions(+), 17 deletions(-) diff --git a/src/components/common/cta/index.tsx b/src/components/common/cta/index.tsx index b6fcc9b..b810088 100644 --- a/src/components/common/cta/index.tsx +++ b/src/components/common/cta/index.tsx @@ -17,8 +17,7 @@ export const CTA = ({ label, disabled, onClick }: CTAProps) => { export default CTA; const StyledCTA = styled.button<{ disabled?: boolean }>` - width: 100%; - height: 100%; + width: calc(100% - 16px); // 부모 요소의 좌우 padding 빼고 border: none; border-radius: 10px; background-color: var(--color-green-01); @@ -26,6 +25,8 @@ const StyledCTA = styled.button<{ disabled?: boolean }>` font-size: var(--font-size-md); font-weight: bold; outline: none; + padding: 10px 8px; + margin: 0 auto; &:disabled { cursor: not-allowed; @@ -33,7 +34,7 @@ const StyledCTA = styled.button<{ disabled?: boolean }>` background-color: var(--color-grey-02); } - /* &:hover와 &:focus는 disabled가 false일 때만 적용 */ + /* &:hover와 &:focus는 disabled === false일 때만 적용 */ &:hover, &:focus { ${({ disabled }) => diff --git a/src/pages/challenge-detail/components/challenge-item/index.tsx b/src/pages/challenge-detail/components/challenge-item/index.tsx index 0ba4453..af7603a 100644 --- a/src/pages/challenge-detail/components/challenge-item/index.tsx +++ b/src/pages/challenge-detail/components/challenge-item/index.tsx @@ -4,7 +4,9 @@ import * as S from './styles'; import { joinChallenge } from '@/apis/challenge-detail/challenge.detail.api'; import { type Challenge } from '@/apis/challenge-detail/challenge.detail.response'; import { Chip } from '@/components/common/chip'; +import CTA from '@/components/common/cta'; import { getDynamicPath } from '@/routes/protected-route'; +import { Box } from '@chakra-ui/react'; type Props = { challenge: Challenge; @@ -71,7 +73,8 @@ const ChallengeItem = ({ challenge, maxDifficulty }: Props) => { - 참여하기 + + ); }; diff --git a/src/pages/challenge-detail/components/challenge-item/styles.ts b/src/pages/challenge-detail/components/challenge-item/styles.ts index 7ffa057..ac66182 100644 --- a/src/pages/challenge-detail/components/challenge-item/styles.ts +++ b/src/pages/challenge-detail/components/challenge-item/styles.ts @@ -68,16 +68,3 @@ export const Bar = styled(MaxBar)<{ width: number }>` export const TimesPeriodContent = styled(Text)` margin: 0 0 0 auto; `; - -export const CTA = styled.button` - width: calc(100% - 16px); // 부모 요소의 좌우 padding 빼고 - padding: 10px 8px; - margin: auto; - border-radius: 10px; - background-color: var(--color-green-01); - color: var(--color-white); - font-weight: bold; - font-size: var(--font-size-md); - - margin-top: 16px; -`; From 529436495d54901a1b461c061813e59c508729c0 Mon Sep 17 00:00:00 2001 From: joojjang Date: Sun, 29 Sep 2024 06:30:42 +0900 Subject: [PATCH 19/25] =?UTF-8?q?fix(cta):=20default=20export=EB=A1=9C=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/components/common/cta/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/cta/index.tsx b/src/components/common/cta/index.tsx index b810088..ca8ad21 100644 --- a/src/components/common/cta/index.tsx +++ b/src/components/common/cta/index.tsx @@ -6,7 +6,7 @@ type CTAProps = { onClick: () => void; }; -export const CTA = ({ label, disabled, onClick }: CTAProps) => { +const CTA = ({ label, disabled, onClick }: CTAProps) => { return ( {label} From 830b4b7b5bde21be07122128dc5ba70967727c86 Mon Sep 17 00:00:00 2001 From: joojjang Date: Sun, 29 Sep 2024 06:49:44 +0900 Subject: [PATCH 20/25] =?UTF-8?q?refactor(textarea):=20=EB=AA=A8=EB=93=88?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/form/textarea/index.tsx | 48 +++++++++++++++++++ src/pages/review-write/index.tsx | 32 ++----------- 2 files changed, 52 insertions(+), 28 deletions(-) create mode 100644 src/components/common/form/textarea/index.tsx diff --git a/src/components/common/form/textarea/index.tsx b/src/components/common/form/textarea/index.tsx new file mode 100644 index 0000000..c2b1b2d --- /dev/null +++ b/src/components/common/form/textarea/index.tsx @@ -0,0 +1,48 @@ +import styled from '@emotion/styled'; + +type TextareaProps = { + placeholder?: string; + value: string; + onChange: (e: React.ChangeEvent) => void; + valid?: boolean; +}; + +const Textarea = ({ placeholder, value, onChange, valid }: TextareaProps) => { + return ( + + ); +}; + +export default Textarea; + +const StyledTextarea = styled.textarea<{ valid?: boolean }>` + font-size: var(--font-size-sm); + color: var(--color-black); + border-radius: 20px; + border: ${({ valid }) => + valid + ? 'var(--color-grey-02) 1px solid' + : 'var(--color-class-05) 1px solid'}; + padding: 12px; + width: 100%; + height: 180px; + resize: none; + outline: none; + + &::placeholder { + color: var(--color-grey-01); + opacity: 1; /* Firefox에서 placeholder 색상을 명시적으로 설정하기 위해 추가 */ + } + + &:focus { + border: ${({ valid }) => + valid + ? 'var(--color-green-01) 1px solid' + : 'var(--color-class-05) 1px solid'}; + } +`; diff --git a/src/pages/review-write/index.tsx b/src/pages/review-write/index.tsx index b55be2d..a831f59 100644 --- a/src/pages/review-write/index.tsx +++ b/src/pages/review-write/index.tsx @@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom'; import { postReview } from '@/apis/review/review.api'; import CTA, { CTAContainer } from '@/components/common/cta'; +import Textarea from '@/components/common/form/textarea'; import { StarRating } from '@/components/common/star-rating'; import TopBar from '@/components/features/layout/top-bar'; import { useChallengeStore } from '@/store/useChallengeStore'; @@ -62,12 +63,14 @@ const ReviewWrite = () => { const handleContentChange = (e: React.ChangeEvent) => { const newContent = e.target.value; setContent(newContent); + // console.log(content); // test if (newContent.trim() && newContent.length >= 20) { setIsContentValid(true); } else { setIsContentValid(false); } + // console.log(isContentValid); // test }; const handleSaveReview = () => { @@ -156,7 +159,7 @@ const ReviewWrite = () => { 소감 - ` color: var(--color-green-01); `} `; - -const Content = styled.textarea<{ valid?: boolean }>` - font-size: var(--font-size-sm); - color: var(--color-black); - border-radius: 20px; - border: ${({ valid }) => - valid - ? 'var(--color-grey-02) 1px solid' - : 'var(--color-class-05) 1px solid'}; - padding: 12px; - width: 100%; - height: 180px; - resize: none; - outline: none; - - &::placeholder { - color: var(--color-grey-01); - opacity: 1; /* Firefox에서 placeholder 색상을 명시적으로 설정하기 위해 추가 */ - } - - &:focus { - border: ${({ valid }) => - valid - ? 'var(--color-green-01) 1px solid' - : 'var(--color-class-05) 1px solid'}; - } -`; From 3721ef162b7a306501a17d716c5779083d5bdc4d Mon Sep 17 00:00:00 2001 From: Dobbymin Date: Sun, 29 Sep 2024 13:42:45 +0900 Subject: [PATCH 21/25] =?UTF-8?q?Feat(review):=20=EB=82=B4=20=EA=B8=B0?= =?UTF-8?q?=EB=A1=9D=20api=20=EC=9A=94=EC=B2=AD=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EB=B0=8F=20response=20type=20=EC=A7=80?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/my-challenge-record/getReview.api.ts | 27 ++++++++++++++++++ .../my-challenge-record/getReview.response.ts | 28 +++++++++++++++++++ 2 files changed, 55 insertions(+) create mode 100644 src/apis/my-challenge-record/getReview.api.ts create mode 100644 src/apis/my-challenge-record/getReview.response.ts diff --git a/src/apis/my-challenge-record/getReview.api.ts b/src/apis/my-challenge-record/getReview.api.ts new file mode 100644 index 0000000..cb8744a --- /dev/null +++ b/src/apis/my-challenge-record/getReview.api.ts @@ -0,0 +1,27 @@ +import { ChallengeResponse } from './getReview.response'; +import { axiosClient } from '@/apis/AxiosClient'; +import { useQuery } from '@tanstack/react-query'; + +const getReviewPath = () => '/api/challengeGroups/reviews'; + +const ReviewQueryKey = [getReviewPath()]; + +const getReview = async ( + page: number, + size: number +): Promise => { + const response = await axiosClient.get(getReviewPath(), { + params: { + page, + size, + }, + }); + return response.data; +}; + +export const useGetReview = (page: number, size: number) => { + return useQuery({ + queryKey: [ReviewQueryKey, page, size], + queryFn: () => getReview(page, size), + }); +}; diff --git a/src/apis/my-challenge-record/getReview.response.ts b/src/apis/my-challenge-record/getReview.response.ts new file mode 100644 index 0000000..2d6660d --- /dev/null +++ b/src/apis/my-challenge-record/getReview.response.ts @@ -0,0 +1,28 @@ +import ApiResponse from '@/apis/ApiResponse'; + +export type ChallengeUser = { + id: number; + nickname: string; + profileImageUrl: string; + tierInfo: { + tier: string; + totalExp: number; + currentExp: number; + }; +}; + +export type ChallengeData = { + challengeId: number; + challengeTitle: string; + user: ChallengeUser; + content: string; + rating: number; +}; + +export type ChallengeResponseData = { + totalPage: number; + hasNext: boolean; + data: ChallengeData[]; +}; + +export type ChallengeResponse = ApiResponse; From 5faa67916fb44d72faf24ee1d1a76faf5934fd28 Mon Sep 17 00:00:00 2001 From: Dobbymin Date: Sun, 29 Sep 2024 13:43:35 +0900 Subject: [PATCH 22/25] =?UTF-8?q?Feat(review):=20=EB=82=B4=EA=B0=80=20?= =?UTF-8?q?=EC=B0=B8=EC=97=AC=ED=95=9C=20=EC=B1=8C=EB=A6=B0=EC=A7=80=20?= =?UTF-8?q?=EA=B8=B0=EB=A1=9D=20list=20=EB=B3=B4=EA=B8=B0=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 --- .../components/list-item.tsx | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/src/pages/my-challenge-record/components/list-item.tsx b/src/pages/my-challenge-record/components/list-item.tsx index b60f23f..6a74a43 100644 --- a/src/pages/my-challenge-record/components/list-item.tsx +++ b/src/pages/my-challenge-record/components/list-item.tsx @@ -2,18 +2,25 @@ import ProfileImg from '@/assets/challenge/ZZAN-Green.png'; import { Image, Text } from '@chakra-ui/react'; import styled from '@emotion/styled'; -const ListItem = () => { +type Props = { + challengeTitle: string; + userNickname: string; + profileImageUrl?: string | null; +}; + +const ListItem = ({ challengeTitle, profileImageUrl }: Props) => { return ( - profile + profile - - 쓰레기 줍기 챌린지 + + {challengeTitle} - - 2024.08.05 - ); }; @@ -25,10 +32,12 @@ const ListItemLayout = styled.div` flex-direction: row; width: 100%; gap: 20px; - justify-content: space-between; align-items: center; border-bottom: 1px solid #e0e0e0; margin: 0.2rem 1rem; + &:last-child { + border-bottom: none; + } `; const ProfileContainer = styled.div` @@ -47,5 +56,4 @@ const ListText = styled(Text)` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - /* max-width: 150px; */ `; From 798505fef81545948b59f55c1ab51959840980c3 Mon Sep 17 00:00:00 2001 From: Dobbymin Date: Sun, 29 Sep 2024 13:44:24 +0900 Subject: [PATCH 23/25] =?UTF-8?q?Feat(review):=20=EB=82=B4=EA=B0=80=20?= =?UTF-8?q?=EC=B0=B8=EC=97=AC=ED=95=9C=20=EC=B1=8C=EB=A6=B0=EC=A7=80=20?= =?UTF-8?q?=EA=B8=B0=EB=A1=9D=20list=20infinity=20scroll=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 --- src/pages/my-challenge-record/index.tsx | 74 +++++++++++++++++++++++-- 1 file changed, 68 insertions(+), 6 deletions(-) diff --git a/src/pages/my-challenge-record/index.tsx b/src/pages/my-challenge-record/index.tsx index dfe69af..259ccbf 100644 --- a/src/pages/my-challenge-record/index.tsx +++ b/src/pages/my-challenge-record/index.tsx @@ -1,9 +1,48 @@ +import { useCallback, useEffect, useState } from 'react'; + import ListItem from './components/list-item'; +import { useGetReview } from '@/apis/my-challenge-record/getReview.api'; +import { ChallengeData } from '@/apis/my-challenge-record/getReview.response'; import TopBar from '@/components/features/layout/top-bar'; -import { Box } from '@chakra-ui/react'; +import { Box, Spinner, Text } from '@chakra-ui/react'; import styled from '@emotion/styled'; const MyChallengeRecord = () => { + const [page, setPage] = useState(0); + const [allChallenges, setAllChallenges] = useState([]); + const { data, isLoading } = useGetReview(page, 20); + + const loadMoreChallenges = useCallback(() => { + if (data?.data.hasNext && !isLoading) { + setPage((prevPage) => prevPage + 1); + } + }, [data, isLoading]); + + useEffect(() => { + if (data?.data.data) { + setAllChallenges((prevChallenges) => [ + ...prevChallenges, + ...data.data.data, + ]); + } + }, [data]); + + useEffect(() => { + const handleScroll = () => { + if ( + window.innerHeight + document.documentElement.scrollTop >= + document.documentElement.offsetHeight - 200 + ) { + loadMoreChallenges(); + } + }; + + window.addEventListener('scroll', handleScroll); + return () => window.removeEventListener('scroll', handleScroll); + }, [loadMoreChallenges]); + + // const challenges = data?.data.data || []; + return ( <> { backgroundColor='var(--color-green-06)' /> + + 챌린지 기록을 눌러 리뷰를 작성해보세요! + - - - + {allChallenges.length > 0 ? ( + allChallenges.map((challenge) => ( + + )) + ) : ( + 챌린지 기록이 존재하지 않습니다. + )} + {isLoading && ( + + + + )} ); @@ -27,8 +83,8 @@ export default MyChallengeRecord; const MyChallengeRecordLayout = styled.div` display: flex; flex-direction: column; - height: 100vh; background-color: var(--color-green-06); + padding-bottom: 5rem; `; const ChallengeList = styled(Box)` @@ -37,7 +93,13 @@ const ChallengeList = styled(Box)` padding: 0.625rem 1.5rem; flex-direction: column; align-items: center; - border-radius: 1.25rem; background-color: #fff; `; + +const SpinnerContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +`; From e5cbe31d42cb4bef6774888a3b50126dfd6bb1db Mon Sep 17 00:00:00 2001 From: Dobbymin Date: Sun, 29 Sep 2024 14:48:42 +0900 Subject: [PATCH 24/25] =?UTF-8?q?Feat(my-challenge-record):=20=EB=82=B4=20?= =?UTF-8?q?=EC=B1=8C=EB=A6=B0=EC=A7=80=20=EA=B8=B0=EB=A1=9D=20=EB=B3=B4?= =?UTF-8?q?=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20list=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 --- src/pages/my-challenge-record/index.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/pages/my-challenge-record/index.tsx b/src/pages/my-challenge-record/index.tsx index 259ccbf..53046e8 100644 --- a/src/pages/my-challenge-record/index.tsx +++ b/src/pages/my-challenge-record/index.tsx @@ -1,4 +1,5 @@ import { useCallback, useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import ListItem from './components/list-item'; import { useGetReview } from '@/apis/my-challenge-record/getReview.api'; @@ -11,6 +12,7 @@ const MyChallengeRecord = () => { const [page, setPage] = useState(0); const [allChallenges, setAllChallenges] = useState([]); const { data, isLoading } = useGetReview(page, 20); + const navigate = useNavigate(); const loadMoreChallenges = useCallback(() => { if (data?.data.hasNext && !isLoading) { @@ -41,7 +43,10 @@ const MyChallengeRecord = () => { return () => window.removeEventListener('scroll', handleScroll); }, [loadMoreChallenges]); - // const challenges = data?.data.data || []; + const handleNavigate = (id: number) => { + navigate(`/challenge/${id}/detail`); + console.log('click'); + }; return ( <> @@ -56,12 +61,14 @@ const MyChallengeRecord = () => { {allChallenges.length > 0 ? ( - allChallenges.map((challenge) => ( + allChallenges.map((challenge, index) => ( handleNavigate(challenge.challengeId)} /> )) ) : ( From 1092d422b3cf88c6805af7bace187f9a88739b5f Mon Sep 17 00:00:00 2001 From: Dobbymin Date: Sun, 29 Sep 2024 14:50:44 +0900 Subject: [PATCH 25/25] =?UTF-8?q?Feat(my-challenge-record):=20review=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1=20=EC=9D=B4=EB=8F=99=20=EA=B8=B0=EB=8A=A5=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 --- src/pages/my-challenge-record/components/list-item.tsx | 10 ++++++++-- src/pages/my-challenge-record/index.tsx | 3 +-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/pages/my-challenge-record/components/list-item.tsx b/src/pages/my-challenge-record/components/list-item.tsx index 6a74a43..db2dd3e 100644 --- a/src/pages/my-challenge-record/components/list-item.tsx +++ b/src/pages/my-challenge-record/components/list-item.tsx @@ -6,11 +6,17 @@ type Props = { challengeTitle: string; userNickname: string; profileImageUrl?: string | null; + id: number; + onClick: (id: number) => void; }; -const ListItem = ({ challengeTitle, profileImageUrl }: Props) => { +const ListItem = ({ challengeTitle, profileImageUrl, onClick, id }: Props) => { + const handleClick = () => { + onClick(id); + }; + return ( - + { }, [loadMoreChallenges]); const handleNavigate = (id: number) => { - navigate(`/challenge/${id}/detail`); - console.log('click'); + navigate(`/challenge/${id}/review`); }; return (