diff --git a/grass-diary/src/App.tsx b/grass-diary/src/App.tsx new file mode 100644 index 00000000..6c24fcac --- /dev/null +++ b/grass-diary/src/App.tsx @@ -0,0 +1,26 @@ +import { useEffect } from 'react'; +import { RouterProvider } from 'react-router-dom'; + +import router from './router'; +import { GlobalStyle } from './styles/GlobalStyle'; +import useTheme from '@hooks/useTheme'; + +const App = () => { + const { isDarkMode } = useTheme(); + + useEffect(() => { + const root = document.body; + + if (isDarkMode) root.setAttribute('data-theme', 'dark'); + else root.removeAttribute('data-theme'); + }, [isDarkMode]); + + return ( + <> + + + + ); +}; + +export default App; diff --git a/grass-diary/public/assets/img/banner_record.svg b/grass-diary/src/assets/svg/banner_record.svg similarity index 99% rename from grass-diary/public/assets/img/banner_record.svg rename to grass-diary/src/assets/svg/banner_record.svg index e3322b9d..641ffc46 100644 --- a/grass-diary/public/assets/img/banner_record.svg +++ b/grass-diary/src/assets/svg/banner_record.svg @@ -4,10 +4,10 @@ - - + + - + diff --git a/grass-diary/src/assets/svg/chevron_left.svg b/grass-diary/src/assets/svg/chevron_left.svg index 8e6f350d..5897c6dd 100644 --- a/grass-diary/src/assets/svg/chevron_left.svg +++ b/grass-diary/src/assets/svg/chevron_left.svg @@ -1,5 +1,5 @@ - + diff --git a/grass-diary/public/assets/icons/darkTheme.svg b/grass-diary/src/assets/svg/darkTheme.svg similarity index 80% rename from grass-diary/public/assets/icons/darkTheme.svg rename to grass-diary/src/assets/svg/darkTheme.svg index 5da2b92b..671c15f8 100644 --- a/grass-diary/public/assets/icons/darkTheme.svg +++ b/grass-diary/src/assets/svg/darkTheme.svg @@ -1,3 +1,3 @@ - + diff --git a/grass-diary/src/assets/svg/event_note.svg b/grass-diary/src/assets/svg/event_note.svg index 8961de6b..ff694fff 100755 --- a/grass-diary/src/assets/svg/event_note.svg +++ b/grass-diary/src/assets/svg/event_note.svg @@ -1,5 +1,5 @@ - + diff --git a/grass-diary/public/assets/icons/expand-more.svg b/grass-diary/src/assets/svg/expand-more.svg similarity index 76% rename from grass-diary/public/assets/icons/expand-more.svg rename to grass-diary/src/assets/svg/expand-more.svg index 0970b8e1..e0b25c01 100644 --- a/grass-diary/public/assets/icons/expand-more.svg +++ b/grass-diary/src/assets/svg/expand-more.svg @@ -1,5 +1,5 @@ - + diff --git a/grass-diary/src/assets/svg/favorite_border.svg b/grass-diary/src/assets/svg/favorite_border.svg index 3f20a909..6a996831 100644 --- a/grass-diary/src/assets/svg/favorite_border.svg +++ b/grass-diary/src/assets/svg/favorite_border.svg @@ -1,5 +1,5 @@ - + diff --git a/grass-diary/public/assets/icons/icon-btn-chevron-left.svg b/grass-diary/src/assets/svg/icon-btn-chevron-left.svg similarity index 80% rename from grass-diary/public/assets/icons/icon-btn-chevron-left.svg rename to grass-diary/src/assets/svg/icon-btn-chevron-left.svg index 76053fa4..1be4742a 100644 --- a/grass-diary/public/assets/icons/icon-btn-chevron-left.svg +++ b/grass-diary/src/assets/svg/icon-btn-chevron-left.svg @@ -1,5 +1,5 @@ - + diff --git a/grass-diary/public/assets/icons/icon-btn-chevron-right.svg b/grass-diary/src/assets/svg/icon-btn-chevron-right.svg similarity index 78% rename from grass-diary/public/assets/icons/icon-btn-chevron-right.svg rename to grass-diary/src/assets/svg/icon-btn-chevron-right.svg index 9faa6e06..0afdc26c 100644 --- a/grass-diary/public/assets/icons/icon-btn-chevron-right.svg +++ b/grass-diary/src/assets/svg/icon-btn-chevron-right.svg @@ -1,5 +1,5 @@ - + diff --git a/grass-diary/public/assets/icons/icon-btn-first-page.svg b/grass-diary/src/assets/svg/icon-btn-first-page.svg similarity index 90% rename from grass-diary/public/assets/icons/icon-btn-first-page.svg rename to grass-diary/src/assets/svg/icon-btn-first-page.svg index d94a940a..d631acc6 100644 --- a/grass-diary/public/assets/icons/icon-btn-first-page.svg +++ b/grass-diary/src/assets/svg/icon-btn-first-page.svg @@ -1,5 +1,5 @@ - + diff --git a/grass-diary/public/assets/icons/icon-btn-last-page.svg b/grass-diary/src/assets/svg/icon-btn-last-page.svg similarity index 90% rename from grass-diary/public/assets/icons/icon-btn-last-page.svg rename to grass-diary/src/assets/svg/icon-btn-last-page.svg index 2bbea4d6..ef9f986e 100644 --- a/grass-diary/public/assets/icons/icon-btn-last-page.svg +++ b/grass-diary/src/assets/svg/icon-btn-last-page.svg @@ -1,5 +1,5 @@ - + diff --git a/grass-diary/src/assets/svg/info.svg b/grass-diary/src/assets/svg/info.svg index 61167781..1dd01cae 100755 --- a/grass-diary/src/assets/svg/info.svg +++ b/grass-diary/src/assets/svg/info.svg @@ -1,5 +1,5 @@ - + diff --git a/grass-diary/public/assets/icons/lightTheme.svg b/grass-diary/src/assets/svg/lightTheme.svg similarity index 82% rename from grass-diary/public/assets/icons/lightTheme.svg rename to grass-diary/src/assets/svg/lightTheme.svg index 1ba82e9b..366f802d 100644 --- a/grass-diary/public/assets/icons/lightTheme.svg +++ b/grass-diary/src/assets/svg/lightTheme.svg @@ -1,3 +1,3 @@ - + diff --git a/grass-diary/src/assets/svg/lock.svg b/grass-diary/src/assets/svg/lock.svg index 30b4bb94..8a1c8776 100644 --- a/grass-diary/src/assets/svg/lock.svg +++ b/grass-diary/src/assets/svg/lock.svg @@ -1,5 +1,5 @@ - + diff --git a/grass-diary/src/assets/svg/lock_open.svg b/grass-diary/src/assets/svg/lock_open.svg index 1dae842d..e88f4cff 100644 --- a/grass-diary/src/assets/svg/lock_open.svg +++ b/grass-diary/src/assets/svg/lock_open.svg @@ -1,5 +1,5 @@ - + diff --git a/grass-diary/src/assets/svg/subdirectory_arrow_right.svg b/grass-diary/src/assets/svg/subdirectory_arrow_right.svg index 1f8736da..cd7e99f3 100644 --- a/grass-diary/src/assets/svg/subdirectory_arrow_right.svg +++ b/grass-diary/src/assets/svg/subdirectory_arrow_right.svg @@ -1,5 +1,5 @@ - + diff --git a/grass-diary/src/assets/svg/tag.svg b/grass-diary/src/assets/svg/tag.svg index d5b02c9f..c9d452c9 100644 --- a/grass-diary/src/assets/svg/tag.svg +++ b/grass-diary/src/assets/svg/tag.svg @@ -1,5 +1,5 @@ - + diff --git a/grass-diary/src/components/Button/BackButton.tsx b/grass-diary/src/components/Button/BackButton.tsx index 22b51dbd..bea3841c 100644 --- a/grass-diary/src/components/Button/BackButton.tsx +++ b/grass-diary/src/components/Button/BackButton.tsx @@ -8,15 +8,15 @@ interface IBackButtonProps { const BackButton = ({ goBackTo }: IBackButtonProps) => { const navigate = useNavigate(); const location = useLocation(); + const goBack = () => { - if (goBackTo) { - return navigate(goBackTo); - } - if (location.state === 'editcomplete') { - return navigate(-2); - } + if (goBackTo) return navigate(goBackTo); + + if (location.state === 'editcomplete') return navigate(-2); + navigate(-1); }; + return ( diff --git a/grass-diary/src/components/Comment/CommentDisplay.tsx b/grass-diary/src/components/Comment/CommentDisplay.tsx index 7796cf24..e4e3ba86 100644 --- a/grass-diary/src/components/Comment/CommentDisplay.tsx +++ b/grass-diary/src/components/Comment/CommentDisplay.tsx @@ -7,19 +7,24 @@ import CommentSetting from './CommentSetting'; import { useTodayDate } from '@hooks/api/useTodayDate'; import { useUser } from '@state/user/useUser'; import { COMMENT } from '@constants/message'; +import useTheme from '@hooks/useTheme'; const CommentDisplay = ({ comment, parentId }: CommentDisplayProps) => { - const { data: writer } = useWriterProfile(comment.memberId); const memberId = useUser(); + const setting = useRef(null); + const { setReplyId } = useCommentActions(); const { date } = useTodayDate(); - const setting = useRef(null); + const { isDarkMode } = useTheme(); + const { data: writer } = useWriterProfile(comment.memberId); + const [isToday, setIsToday] = useState(false); const reply = (e: React.MouseEvent) => { if (setting.current) { if (setting.current.contains(e.target as HTMLElement)) return; } + setReplyId(parentId); }; @@ -38,7 +43,9 @@ const CommentDisplay = ({ comment, parentId }: CommentDisplayProps) => { return comment.deleted ? ( - {comment.depth ? : null} + {comment.depth ? ( + + ) : null} {COMMENT.deleted} @@ -46,7 +53,9 @@ const CommentDisplay = ({ comment, parentId }: CommentDisplayProps) => { - {comment.depth ? : null} + {comment.depth ? ( + + ) : null} {writer?.nickname} diff --git a/grass-diary/src/components/Comment/Input.tsx b/grass-diary/src/components/Comment/Input.tsx index 27a42a14..ec8ea3a5 100644 --- a/grass-diary/src/components/Comment/Input.tsx +++ b/grass-diary/src/components/Comment/Input.tsx @@ -9,6 +9,7 @@ import { usePostComment } from '@hooks/api/comment/usePostComment'; import { usePatchComment } from '@hooks/api/comment/usePatchComment'; import { ReactComponent as ReplyIcon } from '@svg/subdirectory_arrow_right.svg'; import { COMMENT } from '@constants/message'; +import useTheme from '@hooks/useTheme'; const CommentInput = ({ submit, @@ -18,6 +19,7 @@ const CommentInput = ({ isCancelBtn, isPatch, }: CommentInputProps) => { + const { isDarkMode } = useTheme(); const { profileImageURL, nickname } = useProfile(); const { resetEditId, resetReplyId } = useCommentActions(); const [focus, setFocus] = useState(false); @@ -54,7 +56,7 @@ const CommentInput = ({ - {isReply && } + {isReply && } {nickname} diff --git a/grass-diary/src/components/Container.tsx b/grass-diary/src/components/Container.tsx index 08b2bfbc..2c77c38a 100644 --- a/grass-diary/src/components/Container.tsx +++ b/grass-diary/src/components/Container.tsx @@ -1,17 +1,15 @@ -import stylex from '@stylexjs/stylex'; - -const styles = stylex.create({ - container: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - - gap: '10px', - }, -}); +import styled from 'styled-components'; const Container = ({ children }: IContainer) => { - return
{children}
; + return {children}; }; export default Container; + +const SContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + + background: ${({ theme }) => theme.bg.solid.subtler}; +`; diff --git a/grass-diary/src/components/Divider.tsx b/grass-diary/src/components/Divider.tsx index 93e6d4f3..e9d3de55 100644 --- a/grass-diary/src/components/Divider.tsx +++ b/grass-diary/src/components/Divider.tsx @@ -1,4 +1,3 @@ -import { semantic } from '@styles/semantic'; import styled from 'styled-components'; interface IDividerProps { @@ -19,8 +18,6 @@ const DividerLine = styled.div<{ width: ${({ $dividerWidth }) => $dividerWidth || '20rem'}; height: 0.0625rem; - background: ${({ $dividerColor }) => - $dividerColor - ? $dividerColor - : `${semantic.light.border.transparent.neutral}`}; + background: ${({ $dividerColor, theme }) => + $dividerColor ? $dividerColor : `${theme.border.transparent.neutral}`}; `; diff --git a/grass-diary/src/components/Feed/Feed.tsx b/grass-diary/src/components/Feed/Feed.tsx index 7fab2956..56fab98e 100644 --- a/grass-diary/src/components/Feed/Feed.tsx +++ b/grass-diary/src/components/Feed/Feed.tsx @@ -10,6 +10,7 @@ import { useModal } from '@state/modal/useModal'; import { INTERACTION } from '@styles/interaction'; import { MODAL } from '@constants/message'; import { useUser } from '@state/user/useUser'; +import { API_URI } from '@services/index'; interface IFeedProps { feed: Feed; @@ -38,7 +39,7 @@ const Feed = ({ feed, isTop }: IFeedProps) => { }; const handleGoogleLogin: TGoogleLogin = () => { - window.open(`http://localhost:8080/api/auth/google`, '_self'); + window.open(`${API_URI}/api/auth/google`, '_self'); }; const FeedClickHandler = () => { diff --git a/grass-diary/src/components/Feed/PopularFeed.tsx b/grass-diary/src/components/Feed/PopularFeed.tsx index 2ed19db4..bda004cf 100644 --- a/grass-diary/src/components/Feed/PopularFeed.tsx +++ b/grass-diary/src/components/Feed/PopularFeed.tsx @@ -11,32 +11,46 @@ import { Callout, Feed } from '@components/index'; import { usePopularDiaries } from '@hooks/api/usePopularDiaries'; import { Link, useLocation } from 'react-router-dom'; import { useEffect, useState } from 'react'; +import useTheme from '@hooks/useTheme'; const PrevArrow = (props: CustomArrowProps) => { + const { isDarkMode } = useTheme(); + return ( ); }; const NextArrow = (props: CustomArrowProps) => { + const { isDarkMode } = useTheme(); + return ( ); }; const PopularFeed = () => { + const { isDarkMode } = useTheme(); const { data: top10 } = usePopularDiaries(); const location = useLocation(); const [mobileSize, setMobileSize] = useState(false); @@ -83,7 +97,11 @@ const PopularFeed = () => { diff --git a/grass-diary/src/components/Layout/Header.tsx b/grass-diary/src/components/Layout/Header.tsx index 03cac254..186c7686 100644 --- a/grass-diary/src/components/Layout/Header.tsx +++ b/grass-diary/src/components/Layout/Header.tsx @@ -1,15 +1,18 @@ -import * as S from '@styles/component/Layout/Header.style'; -import sampleLogo from '@image/sampleLogo.png'; +import { useNavigate } from 'react-router-dom'; + import MenuBar from './MenuBar'; +import sampleLogo from '@image/sampleLogo.png'; +import * as S from '@styles/component/Layout/Header.style'; import { Profile } from '@components/index'; -import { useNavigate } from 'react-router-dom'; import { useUser } from '@state/user/useUser'; +import { API_URI } from '@services/index'; const Header = () => { const memberId = useUser(); const navigate = useNavigate(); + const handleGoogleLogin: TGoogleLogin = () => { - window.open(`http://localhost:8080/api/auth/google`, '_self'); + window.open(`${API_URI}/api/auth/google`, '_self'); }; return ( diff --git a/grass-diary/src/components/Layout/Layout.tsx b/grass-diary/src/components/Layout/Layout.tsx index 2a845ce1..72b94a79 100644 --- a/grass-diary/src/components/Layout/Layout.tsx +++ b/grass-diary/src/components/Layout/Layout.tsx @@ -3,17 +3,22 @@ import Header from './Header'; import Footer from './Footer'; import SnackBar from './SnackBar'; import { Toast, Modal } from '@components/index'; +import { ThemeProvider } from 'styled-components'; +import { semantic } from '@styles/semantic'; +import useTheme from '@hooks/useTheme'; const Layout = () => { + const { isDarkMode } = useTheme(); + return ( - <> +