From c353ec9af672fd18f7b2266b763e58348382324d Mon Sep 17 00:00:00 2001 From: Woochul Lee Date: Sat, 21 May 2022 18:47:46 +0900 Subject: [PATCH 1/7] =?UTF-8?q?fix:=20=EB=8B=A4=ED=81=AC=EB=AA=A8=EB=93=9C?= =?UTF-8?q?=20=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8=20=EC=8B=9C=20=EA=B9=9C?= =?UTF-8?q?=EB=B9=A1=EC=9E=84=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit theme 저장 위치를 로컬 스토리지에서 쿠키로 변경하고 서버 사이드에서 미리 적용 --- src/components/Header/Header.tsx | 63 +++++++++++-------------- src/pages/_document.tsx | 8 ++-- src/pages/chat.tsx | 2 + src/pages/create-post.tsx | 2 + src/pages/edit-post.tsx | 2 + src/pages/find-password.tsx | 2 + src/pages/following-list.tsx | 2 + src/pages/following.tsx | 2 + src/pages/index.tsx | 2 + src/pages/login.tsx | 2 + src/pages/post/[id].tsx | 2 + src/pages/profile/[nickname]/index.tsx | 2 + src/pages/profile/[nickname]/recent.tsx | 2 + src/pages/recent.tsx | 2 + src/pages/reset-password.tsx | 2 + src/pages/search/following.tsx | 2 + src/pages/search/index.tsx | 2 + src/pages/search/recent.tsx | 2 + src/pages/signup.tsx | 2 + src/slices/store.ts | 3 ++ src/slices/themeSlice.ts | 36 ++++++++++++++ src/types.ts | 2 + 22 files changed, 108 insertions(+), 38 deletions(-) create mode 100644 src/slices/themeSlice.ts diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 8805432..5ad7ab6 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -2,13 +2,16 @@ import Dropdown from 'components/Dropdown'; import ProfileImage from 'components/ProfileImage'; import SearchBar from 'components/SearchBar'; import { CaretDown, EditOutline, Github, MoonOutline, SunOutline } from 'icons'; +import Cookies from 'js-cookie'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { useLayoutEffect, useState } from 'react'; +import { useLayoutEffect } from 'react'; import { useDispatch } from 'react-redux'; import { removeCommentsLike } from 'slices/commentsSlice'; import { removePostDetailLike } from 'slices/postDetailSlice'; +import { setTheme, useTheme } from 'slices/themeSlice'; import { logout, useUser } from 'slices/userSlice'; +import { Theme } from 'types'; import styles from './Header.module.scss'; export type HeaderProps = { @@ -16,47 +19,28 @@ export type HeaderProps = { }; const Header = ({ hideSearchBar }: HeaderProps) => { - const [screenTheme, setScreenTheme] = useState(true); const router = useRouter(); const user = useUser(); const dispatch = useDispatch(); + const theme = useTheme(); useLayoutEffect(() => { - const localTheme = window.localStorage.getItem('theme'); - const stringLocalTheme = JSON.stringify(localTheme); - const userSetTheme = window.matchMedia( - '(prefers-color-scheme: light)' - ).matches; - - if (document.body.dataset.theme === undefined) { - document.body.dataset.theme = JSON.parse(stringLocalTheme); - userSetTheme ? setScreenTheme(true) : setScreenTheme(false); - } - if (window.localStorage.getItem('theme') === null) { - userSetTheme - ? window.localStorage.setItem('theme', 'light') - : window.localStorage.setItem('theme', 'dark'); - } - - if (document.body.dataset.theme === 'dark') { - setScreenTheme(false); + if (theme) { + document.body.dataset.theme = theme; + return; } - if (document.body.dataset.theme === 'light') { - setScreenTheme(true); - } - }, []); + const set = (t: Theme) => { + dispatch(setTheme(t)); + document.body.dataset.theme = t; + }; - const themeHandle = () => { - setScreenTheme(() => !screenTheme); - if (window.localStorage.getItem('theme') === 'light') { - window.localStorage.setItem('theme', 'dark'); - document.body.dataset.theme = 'dark'; + if (window.matchMedia('(prefers-color-scheme: light)').matches) { + set('light'); } else { - window.localStorage.setItem('theme', 'light'); - document.body.dataset.theme = 'light'; + set('dark'); } - }; + }, [theme, dispatch]); return (
@@ -70,14 +54,23 @@ const Header = ({ hideSearchBar }: HeaderProps) => { {hideSearchBar ?
: } {user && ( diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 3aaba4a..b4f19aa 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,9 +1,11 @@ -import { Head, Html, Main, NextScript } from 'next/document'; +import { DocumentProps, Head, Html, Main, NextScript } from 'next/document'; import React from 'react'; React.useLayoutEffect = React.useEffect; -export default function Document() { +export default function Document(props: DocumentProps) { + const { theme } = props.__NEXT_DATA__.props.pageProps.initialState; + return ( @@ -14,7 +16,7 @@ export default function Document() { href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" /> - +
diff --git a/src/pages/chat.tsx b/src/pages/chat.tsx index c2bfa6c..ca2e20c 100644 --- a/src/pages/chat.tsx +++ b/src/pages/chat.tsx @@ -15,6 +15,7 @@ import useModal from 'hooks/useModal'; import type { NextPage } from 'next'; import { useEffect, useRef, useState } from 'react'; import { wrapper } from 'slices/store'; +import { initTheme } from 'slices/themeSlice'; import { initUser, useUser } from 'slices/userSlice'; import SockJS from 'sockjs-client'; import styles from 'styles/Chat.module.scss'; @@ -219,6 +220,7 @@ const Chat: NextPage = () => { export const getServerSideProps = wrapper.getServerSideProps( (store) => async (context) => { + initTheme(store, context); await initUser(store, context); return { props: {} }; } diff --git a/src/pages/create-post.tsx b/src/pages/create-post.tsx index 9e1f14f..61f6f5f 100644 --- a/src/pages/create-post.tsx +++ b/src/pages/create-post.tsx @@ -4,6 +4,7 @@ import useLogoutRedirect from 'hooks/useLogoutRedirect'; import type { NextPage } from 'next'; import { useRouter } from 'next/router'; import { wrapper } from 'slices/store'; +import { initTheme } from 'slices/themeSlice'; import { initUser } from 'slices/userSlice'; import api from 'utils/api'; import getPostFormData from 'utils/getPostFormData'; @@ -28,6 +29,7 @@ const CreatePost: NextPage = () => { export const getServerSideProps = wrapper.getServerSideProps( (store) => async (context) => { + initTheme(store, context); const { user } = await initUser(store, context); if (!user) return { redirect: { destination: '/', permanent: false } }; return { props: {} }; diff --git a/src/pages/edit-post.tsx b/src/pages/edit-post.tsx index ae38334..33e2918 100644 --- a/src/pages/edit-post.tsx +++ b/src/pages/edit-post.tsx @@ -6,6 +6,7 @@ import type { NextPage } from 'next'; import { useRouter } from 'next/router'; import { initPostDetail, usePostDetail } from 'slices/postDetailSlice'; import { wrapper } from 'slices/store'; +import { initTheme } from 'slices/themeSlice'; import { initUser, useUser } from 'slices/userSlice'; import api from 'utils/api'; import getPostFormData from 'utils/getPostFormData'; @@ -40,6 +41,7 @@ const EditPost: NextPage = () => { export const getServerSideProps = wrapper.getServerSideProps( (store) => async (context) => { + initTheme(store, context); const { user } = await initUser(store, context); await initPostDetail(store, context); if (!user) return { redirect: { destination: '/', permanent: false } }; diff --git a/src/pages/find-password.tsx b/src/pages/find-password.tsx index b1deb0c..4a9c221 100644 --- a/src/pages/find-password.tsx +++ b/src/pages/find-password.tsx @@ -10,6 +10,7 @@ import { LoadingSpokes } from 'icons'; import type { NextPage } from 'next'; import { useState } from 'react'; import { wrapper } from 'slices/store'; +import { initTheme } from 'slices/themeSlice'; import { initUser } from 'slices/userSlice'; import styles from 'styles/FindPassword.module.scss'; import api from 'utils/api'; @@ -124,6 +125,7 @@ function FindPasswordForm({ onSubmit }: FindPasswordFormProps) { export const getServerSideProps = wrapper.getServerSideProps( (store) => async (context) => { + initTheme(store, context); const { user } = await initUser(store, context); if (user) return { redirect: { destination: '/', permanent: false } }; return { props: {} }; diff --git a/src/pages/following-list.tsx b/src/pages/following-list.tsx index 3060530..2d2e449 100644 --- a/src/pages/following-list.tsx +++ b/src/pages/following-list.tsx @@ -4,6 +4,7 @@ import ProfileImage from 'components/ProfileImage'; import useFollowingList from 'hooks/useFollowingList'; import type { NextPage } from 'next'; import { wrapper } from 'slices/store'; +import { initTheme } from 'slices/themeSlice'; import { initUser } from 'slices/userSlice'; import styles from 'styles/Following.module.scss'; @@ -33,6 +34,7 @@ const FollowingList: NextPage = () => { export const getServerSideProps = wrapper.getServerSideProps( (store) => async (context) => { + initTheme(store, context); await initUser(store, context); return { props: {} }; } diff --git a/src/pages/following.tsx b/src/pages/following.tsx index 7b7597b..d335a58 100644 --- a/src/pages/following.tsx +++ b/src/pages/following.tsx @@ -1,12 +1,14 @@ import Home from 'components/Home'; import { initPosts } from 'slices/postsSlice'; import { wrapper } from 'slices/store'; +import { initTheme } from 'slices/themeSlice'; import { initUser } from 'slices/userSlice'; export default Home; export const getServerSideProps = wrapper.getServerSideProps( (store) => async (context) => { + initTheme(store, context); await initUser(store, context); await initPosts('/post', store, context); return { props: {} }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 7b7597b..d335a58 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,12 +1,14 @@ import Home from 'components/Home'; import { initPosts } from 'slices/postsSlice'; import { wrapper } from 'slices/store'; +import { initTheme } from 'slices/themeSlice'; import { initUser } from 'slices/userSlice'; export default Home; export const getServerSideProps = wrapper.getServerSideProps( (store) => async (context) => { + initTheme(store, context); await initUser(store, context); await initPosts('/post', store, context); return { props: {} }; diff --git a/src/pages/login.tsx b/src/pages/login.tsx index 41bec4c..cd62143 100644 --- a/src/pages/login.tsx +++ b/src/pages/login.tsx @@ -10,6 +10,7 @@ import { LoadingSpokes } from 'icons'; import type { NextPage } from 'next'; import Link from 'next/link'; import { wrapper } from 'slices/store'; +import { initTheme } from 'slices/themeSlice'; import { initUser } from 'slices/userSlice'; import styles from 'styles/Login.module.scss'; import getValidationSchema from 'utils/getValidationSchema'; @@ -126,6 +127,7 @@ export function LoginForm({ onSubmit }: LoginFormProps) { export const getServerSideProps = wrapper.getServerSideProps( (store) => async (context) => { + initTheme(store, context); const { user } = await initUser(store, context); if (user) return { redirect: { destination: '/', permanent: false } }; return { props: {} }; diff --git a/src/pages/post/[id].tsx b/src/pages/post/[id].tsx index 0033ee0..6ab6f6a 100644 --- a/src/pages/post/[id].tsx +++ b/src/pages/post/[id].tsx @@ -10,6 +10,7 @@ import { initComments } from 'slices/commentsSlice'; import { initPostDetail, usePostDetail } from 'slices/postDetailSlice'; import { changePostsHydrate, usePosts } from 'slices/postsSlice'; import { wrapper } from 'slices/store'; +import { initTheme } from 'slices/themeSlice'; import { initUser } from 'slices/userSlice'; import styles from 'styles/Post.module.scss'; @@ -59,6 +60,7 @@ const Post = () => { export const getServerSideProps = wrapper.getServerSideProps( (store) => async (context) => { + initTheme(store, context); await initUser(store, context); await Promise.all([ initPostDetail(store, context), diff --git a/src/pages/profile/[nickname]/index.tsx b/src/pages/profile/[nickname]/index.tsx index a8b33be..e3245ae 100644 --- a/src/pages/profile/[nickname]/index.tsx +++ b/src/pages/profile/[nickname]/index.tsx @@ -2,12 +2,14 @@ import Profile from 'components/Profile'; import { initPosts } from 'slices/postsSlice'; import { initProfile } from 'slices/profileSlice'; import { wrapper } from 'slices/store'; +import { initTheme } from 'slices/themeSlice'; import { initUser } from 'slices/userSlice'; export default Profile; export const getServerSideProps = wrapper.getServerSideProps( (store) => async (context) => { + initTheme(store, context); await initUser(store, context); await Promise.all([ initPosts(`/post/user/${context.params?.nickname}`, store, context), diff --git a/src/pages/profile/[nickname]/recent.tsx b/src/pages/profile/[nickname]/recent.tsx index a8b33be..e3245ae 100644 --- a/src/pages/profile/[nickname]/recent.tsx +++ b/src/pages/profile/[nickname]/recent.tsx @@ -2,12 +2,14 @@ import Profile from 'components/Profile'; import { initPosts } from 'slices/postsSlice'; import { initProfile } from 'slices/profileSlice'; import { wrapper } from 'slices/store'; +import { initTheme } from 'slices/themeSlice'; import { initUser } from 'slices/userSlice'; export default Profile; export const getServerSideProps = wrapper.getServerSideProps( (store) => async (context) => { + initTheme(store, context); await initUser(store, context); await Promise.all([ initPosts(`/post/user/${context.params?.nickname}`, store, context), diff --git a/src/pages/recent.tsx b/src/pages/recent.tsx index 7b7597b..d335a58 100644 --- a/src/pages/recent.tsx +++ b/src/pages/recent.tsx @@ -1,12 +1,14 @@ import Home from 'components/Home'; import { initPosts } from 'slices/postsSlice'; import { wrapper } from 'slices/store'; +import { initTheme } from 'slices/themeSlice'; import { initUser } from 'slices/userSlice'; export default Home; export const getServerSideProps = wrapper.getServerSideProps( (store) => async (context) => { + initTheme(store, context); await initUser(store, context); await initPosts('/post', store, context); return { props: {} }; diff --git a/src/pages/reset-password.tsx b/src/pages/reset-password.tsx index 9768ea2..249d4b8 100644 --- a/src/pages/reset-password.tsx +++ b/src/pages/reset-password.tsx @@ -10,6 +10,7 @@ import { LoadingSpokes } from 'icons'; import type { NextPage } from 'next'; import { useState } from 'react'; import { wrapper } from 'slices/store'; +import { initTheme } from 'slices/themeSlice'; import { initUser } from 'slices/userSlice'; import styles from 'styles/ResetPassword.module.scss'; import api from 'utils/api'; @@ -121,6 +122,7 @@ function ResetPasswordForm({ onSubmit }: ResetPasswordFormProps) { export const getServerSideProps = wrapper.getServerSideProps( (store) => async (context) => { + initTheme(store, context); const { user } = await initUser(store, context); if (user) return { redirect: { destination: '/', permanent: false } }; return { props: {} }; diff --git a/src/pages/search/following.tsx b/src/pages/search/following.tsx index 6cbb765..70309f0 100644 --- a/src/pages/search/following.tsx +++ b/src/pages/search/following.tsx @@ -1,12 +1,14 @@ import Search from 'components/Search'; import { initPosts } from 'slices/postsSlice'; import { wrapper } from 'slices/store'; +import { initTheme } from 'slices/themeSlice'; import { initUser } from 'slices/userSlice'; export default Search; export const getServerSideProps = wrapper.getServerSideProps( (store) => async (context) => { + initTheme(store, context); await initUser(store, context); await initPosts('/post/search', store, context); return { props: {} }; diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx index 6cbb765..70309f0 100644 --- a/src/pages/search/index.tsx +++ b/src/pages/search/index.tsx @@ -1,12 +1,14 @@ import Search from 'components/Search'; import { initPosts } from 'slices/postsSlice'; import { wrapper } from 'slices/store'; +import { initTheme } from 'slices/themeSlice'; import { initUser } from 'slices/userSlice'; export default Search; export const getServerSideProps = wrapper.getServerSideProps( (store) => async (context) => { + initTheme(store, context); await initUser(store, context); await initPosts('/post/search', store, context); return { props: {} }; diff --git a/src/pages/search/recent.tsx b/src/pages/search/recent.tsx index 6cbb765..70309f0 100644 --- a/src/pages/search/recent.tsx +++ b/src/pages/search/recent.tsx @@ -1,12 +1,14 @@ import Search from 'components/Search'; import { initPosts } from 'slices/postsSlice'; import { wrapper } from 'slices/store'; +import { initTheme } from 'slices/themeSlice'; import { initUser } from 'slices/userSlice'; export default Search; export const getServerSideProps = wrapper.getServerSideProps( (store) => async (context) => { + initTheme(store, context); await initUser(store, context); await initPosts('/post/search', store, context); return { props: {} }; diff --git a/src/pages/signup.tsx b/src/pages/signup.tsx index 26a5fc2..6a2b1f9 100644 --- a/src/pages/signup.tsx +++ b/src/pages/signup.tsx @@ -11,6 +11,7 @@ import { LoadingSpokes } from 'icons'; import type { NextPage } from 'next'; import Link from 'next/link'; import { wrapper } from 'slices/store'; +import { initTheme } from 'slices/themeSlice'; import { initUser } from 'slices/userSlice'; import styles from 'styles/Signup.module.scss'; import api from 'utils/api'; @@ -168,6 +169,7 @@ export function SignupForm({ onSubmit }: SignupFormProps) { export const getServerSideProps = wrapper.getServerSideProps( (store) => async (context) => { + initTheme(store, context); const { user } = await initUser(store, context); if (user) return { redirect: { destination: '/', permanent: false } }; return { props: {} }; diff --git a/src/slices/store.ts b/src/slices/store.ts index 05edc70..adffe01 100644 --- a/src/slices/store.ts +++ b/src/slices/store.ts @@ -9,6 +9,7 @@ import commentsSlice, { CommentsState } from './commentsSlice'; import postDetailSlice, { PostDetailState } from './postDetailSlice'; import postsSlice, { PostsState } from './postsSlice'; import profileSlice, { ProfileState } from './profileSlice'; +import themeSlice, { ThemeState } from './themeSlice'; export interface State { user: UserState; @@ -16,6 +17,7 @@ export interface State { postDetail: PostDetailState; profile: ProfileState; comments: CommentsState; + theme: ThemeState; } export const reducer = { @@ -24,6 +26,7 @@ export const reducer = { [postDetailSlice.name]: postDetailSlice.reducer, [profileSlice.name]: profileSlice.reducer, [commentsSlice.name]: commentsSlice.reducer, + [themeSlice.name]: themeSlice.reducer, }; const makeStore = wrapMakeStore(() => diff --git a/src/slices/themeSlice.ts b/src/slices/themeSlice.ts new file mode 100644 index 0000000..0734d38 --- /dev/null +++ b/src/slices/themeSlice.ts @@ -0,0 +1,36 @@ +import { AnyAction, createSlice, PayloadAction, Store } from '@reduxjs/toolkit'; +import { GetServerSidePropsContext } from 'next'; +import { HYDRATE } from 'next-redux-wrapper'; +import { useSelector } from 'react-redux'; +import { State } from 'slices/store'; +import { Theme } from 'types'; + +export type ThemeState = Theme | null; + +const themeSlice = createSlice({ + name: 'theme', + initialState: null as ThemeState, + reducers: { + setTheme: (_, action: PayloadAction) => action.payload, + }, + extraReducers: { + [HYDRATE]: (_, action) => action.payload.theme, + }, +}); + +export const { setTheme } = themeSlice.actions; + +export const useTheme = () => + useSelector((state) => state.theme); + +export function initTheme( + store: Store, + context: GetServerSidePropsContext +) { + const { theme } = context.req.cookies; + if (theme === 'dark' || theme === 'light') { + store.dispatch(setTheme(theme)); + } +} + +export default themeSlice; diff --git a/src/types.ts b/src/types.ts index 458d3cb..48a204a 100644 --- a/src/types.ts +++ b/src/types.ts @@ -104,3 +104,5 @@ export interface NaverUser { } export type SortBy = 'like' | 'new' | 'following'; + +export type Theme = 'dark' | 'light'; From 73a6eae04155c318d700d0159a648df594bb3cb9 Mon Sep 17 00:00:00 2001 From: Woochul Lee Date: Sun, 22 May 2022 15:24:18 +0900 Subject: [PATCH 2/7] =?UTF-8?q?fix:=20=EB=B9=8C=EB=93=9C=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/_document.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index b4f19aa..b4f3a8f 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -4,8 +4,7 @@ import React from 'react'; React.useLayoutEffect = React.useEffect; export default function Document(props: DocumentProps) { - const { theme } = props.__NEXT_DATA__.props.pageProps.initialState; - + const { initialState } = props.__NEXT_DATA__.props.pageProps; return ( @@ -16,7 +15,7 @@ export default function Document(props: DocumentProps) { href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" /> - +
From e89207ba9230086cbbb47908ed4eca5cab7534e0 Mon Sep 17 00:00:00 2001 From: Woochul Lee Date: Sun, 22 May 2022 15:46:43 +0900 Subject: [PATCH 3/7] =?UTF-8?q?chore:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20titl?= =?UTF-8?q?e=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Home/Home.tsx | 8 ++++++-- src/components/Profile/Profile.tsx | 8 ++++++-- src/components/Search/Search.tsx | 10 ++++++++-- src/pages/chat.tsx | 2 +- src/pages/following-list.tsx | 2 +- src/pages/following.tsx | 4 +++- src/pages/profile/[nickname]/recent.tsx | 4 +++- src/pages/recent.tsx | 4 +++- src/pages/search/following.tsx | 4 +++- src/pages/search/recent.tsx | 4 +++- 10 files changed, 37 insertions(+), 13 deletions(-) diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx index f053fc0..2f9529a 100644 --- a/src/components/Home/Home.tsx +++ b/src/components/Home/Home.tsx @@ -1,9 +1,13 @@ import Layout from 'components/Layout'; import PostList from 'components/PostList'; -function Home() { +interface HomeProps { + title?: string; +} + +function Home({ title }: HomeProps) { return ( - + ); diff --git a/src/components/Profile/Profile.tsx b/src/components/Profile/Profile.tsx index 2f50535..aee3116 100644 --- a/src/components/Profile/Profile.tsx +++ b/src/components/Profile/Profile.tsx @@ -6,13 +6,17 @@ import { useRouter } from 'next/router'; import { useProfile } from 'slices/profileSlice'; import styles from './Profile.module.scss'; -function Profile() { +interface ProfileProps { + subTitle?: string; +} + +function Profile({ subTitle }: ProfileProps) { const router = useRouter(); const { nickname } = router.query; const profile = useProfile(); return ( - + {!profile ? ( ) : ( diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx index 945602e..83bf747 100644 --- a/src/components/Search/Search.tsx +++ b/src/components/Search/Search.tsx @@ -3,12 +3,18 @@ import PostList from 'components/PostList'; import { useRouter } from 'next/router'; import styles from './Search.module.scss'; -function Search() { +interface SearchProps { + subTitle?: string; +} + +function Search({ subTitle }: SearchProps) { const router = useRouter(); const { q } = router.query; return ( - +

{q} 검색 결과

{q && ( diff --git a/src/pages/chat.tsx b/src/pages/chat.tsx index ca2e20c..2032a52 100644 --- a/src/pages/chat.tsx +++ b/src/pages/chat.tsx @@ -128,7 +128,7 @@ const Chat: NextPage = () => { }; return ( - + {user ? ( <>
diff --git a/src/pages/following-list.tsx b/src/pages/following-list.tsx index 2d2e449..20d9d3d 100644 --- a/src/pages/following-list.tsx +++ b/src/pages/following-list.tsx @@ -12,7 +12,7 @@ const FollowingList: NextPage = () => { const { data: followingList } = useFollowingList(); return ( - +

팔로우 중인 사용자 목록