diff --git a/apps/theme-market/package.json b/apps/theme-market/package.json index ac1e4c3..78d6b34 100644 --- a/apps/theme-market/package.json +++ b/apps/theme-market/package.json @@ -12,7 +12,8 @@ "classnames": "^2.5.1", "next": "14.2.5", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "zustand": "^5.0.1" }, "devDependencies": { "@types/node": "^20", diff --git a/apps/theme-market/src/app/(routes)/(main)/(bottomsheet)/index.tsx b/apps/theme-market/src/app/(routes)/(main)/(bottomsheet)/index.tsx new file mode 100644 index 0000000..f08f455 --- /dev/null +++ b/apps/theme-market/src/app/(routes)/(main)/(bottomsheet)/index.tsx @@ -0,0 +1,22 @@ +"use client"; + +import { BottomSheet } from "@/app/_components/BottomSheet"; +import { ThemeDetail } from "@/app/_pages/Main/BottomSheet/ThemeDetail"; +import { useThemeStore } from "@/app/_providers/ThemeProvider"; + +export default function MainBottomSheet() { + const { theme, setTheme } = useThemeStore((state) => state); + + return ( + <> + setTheme(null)} + > + {theme && } + + {/* )} */} + + ); +} diff --git a/apps/theme-market/src/app/(routes)/(main)/@bottomsheet/(.)theme/[id]/page.tsx b/apps/theme-market/src/app/(routes)/(main)/@bottomsheet/(.)theme/[id]/page.tsx deleted file mode 100644 index 68ffbe3..0000000 --- a/apps/theme-market/src/app/(routes)/(main)/@bottomsheet/(.)theme/[id]/page.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { BottomSheet } from "@/app/_components/BottomSheet"; -import { Theme } from "@/app/_pages/Main/BottomSheet/Theme"; - -export default function Page() { - return ( - - - - ); -} diff --git a/apps/theme-market/src/app/(routes)/(main)/@bottomsheet/default.ts b/apps/theme-market/src/app/(routes)/(main)/@bottomsheet/default.ts deleted file mode 100644 index 6ddf1b7..0000000 --- a/apps/theme-market/src/app/(routes)/(main)/@bottomsheet/default.ts +++ /dev/null @@ -1,3 +0,0 @@ -export default function Default() { - return null; -} diff --git a/apps/theme-market/src/app/(routes)/(main)/index.module.css b/apps/theme-market/src/app/(routes)/(main)/index.module.css index a16c427..146878d 100644 --- a/apps/theme-market/src/app/(routes)/(main)/index.module.css +++ b/apps/theme-market/src/app/(routes)/(main)/index.module.css @@ -1,5 +1,7 @@ .layout { + height: 100vh; + position: relative; background-color: var(--palette-gray); - font-family: "AppleSDGothicNeo"; + z-index: 5; } diff --git a/apps/theme-market/src/app/(routes)/(main)/layout.tsx b/apps/theme-market/src/app/(routes)/(main)/layout.tsx index 18e34d7..78ef580 100644 --- a/apps/theme-market/src/app/(routes)/(main)/layout.tsx +++ b/apps/theme-market/src/app/(routes)/(main)/layout.tsx @@ -1,32 +1,17 @@ -import "@/app/_styles/reset.css"; -import "@/app/_styles/palette.css"; -import "@/app/_styles/theme.css"; -import "@/app/_styles/font.css"; - -import type { Metadata } from "next"; -import { cookies } from "next/headers"; import { ReactNode } from "react"; +import MainBottomSheet from "./(bottomsheet)"; import styles from "./index.module.css"; -export const metadata: Metadata = { - title: "SNUTT 테마 마켓", -}; - interface Props { children: ReactNode; - bottomsheet: ReactNode; } -export default function RootLayout({ children, bottomsheet }: Props) { - const themeMode = cookies().get("theme")?.value ?? "light"; - +export default function MainLayout({ children }: Props) { return ( - - - {children} - {bottomsheet} - - + <> +
{children}
+ + ); } diff --git a/apps/theme-market/src/app/(routes)/index.module.css b/apps/theme-market/src/app/(routes)/index.module.css new file mode 100644 index 0000000..a16c427 --- /dev/null +++ b/apps/theme-market/src/app/(routes)/index.module.css @@ -0,0 +1,5 @@ +.layout { + background-color: var(--palette-gray); + + font-family: "AppleSDGothicNeo"; +} diff --git a/apps/theme-market/src/app/(routes)/layout.tsx b/apps/theme-market/src/app/(routes)/layout.tsx new file mode 100644 index 0000000..571eafb --- /dev/null +++ b/apps/theme-market/src/app/(routes)/layout.tsx @@ -0,0 +1,32 @@ +import "@/app/_styles/reset.css"; +import "@/app/_styles/palette.css"; +import "@/app/_styles/theme.css"; +import "@/app/_styles/font.css"; + +import type { Metadata } from "next"; +import { ReactNode } from "react"; + +import styles from "./index.module.css"; +import { cookieService } from "@/services/CookieService"; +import { ThemeStoreProvider } from "@/app/_providers/ThemeProvider"; + +export const metadata: Metadata = { + title: "SNUTT 테마 마켓", +}; + +interface Props { + children: ReactNode; + bottomsheet: ReactNode; +} + +export default async function RootLayout({ children }: Props) { + const themeMode = cookieService.get("theme", "light"); + + return ( + + + {children} + + + ); +} diff --git a/apps/theme-market/src/app/_components/BottomSheet/index.module.css b/apps/theme-market/src/app/_components/BottomSheet/index.module.css index 8fdc295..c04d591 100644 --- a/apps/theme-market/src/app/_components/BottomSheet/index.module.css +++ b/apps/theme-market/src/app/_components/BottomSheet/index.module.css @@ -26,6 +26,11 @@ bottom: 0; background-color: rgba(0, 0, 0, 0.5); + z-index: 10; + + &.hide { + z-index: 0; + } } .bottomSheet { @@ -40,6 +45,11 @@ border-radius: 10px 10px 0px 0px; background-color: var(--palette-gray); + display: block; + + &.hide { + display: none; + } } .header { diff --git a/apps/theme-market/src/app/_components/BottomSheet/index.tsx b/apps/theme-market/src/app/_components/BottomSheet/index.tsx index 5c03458..9acec8b 100644 --- a/apps/theme-market/src/app/_components/BottomSheet/index.tsx +++ b/apps/theme-market/src/app/_components/BottomSheet/index.tsx @@ -2,20 +2,26 @@ import { useRouter } from "next/navigation"; import styles from "./index.module.css"; +import classNames from "classnames"; interface Props { children?: React.ReactNode; + isOpen: boolean; + title: string; + onCancel?: () => void; } -export const BottomSheet = ({ children }: Props) => { +export const BottomSheet = ({ children, title, isOpen, onCancel }: Props) => { const router = useRouter(); return ( -
-
+
+
- router.back()}>취소 - 테마 다운로드 + onCancel?.()}>취소 + {title} 담기
{children}
diff --git a/apps/theme-market/src/app/_pages/Main/BottomSheet/Theme/index.tsx b/apps/theme-market/src/app/_pages/Main/BottomSheet/Theme/index.tsx deleted file mode 100644 index 2dc7c58..0000000 --- a/apps/theme-market/src/app/_pages/Main/BottomSheet/Theme/index.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import styles from "./index.module.css"; -import { Preview } from "./Preview"; - -interface Props { - title: string; -} - -export const Theme = ({ title }: Props) => { - return ( -
-
- 테마명 - {title} -
-
-
- 색상1 -
-
-
-
-
-
- 색상2 -
-
-
-
-
-
- 색상3 -
-
-
-
-
-
- 색상4 -
-
-
-
-
-
- -
- ); -}; diff --git a/apps/theme-market/src/app/_pages/Main/BottomSheet/Theme/Preview/Timetable.tsx b/apps/theme-market/src/app/_pages/Main/BottomSheet/ThemeDetail/Preview/Timetable.tsx similarity index 96% rename from apps/theme-market/src/app/_pages/Main/BottomSheet/Theme/Preview/Timetable.tsx rename to apps/theme-market/src/app/_pages/Main/BottomSheet/ThemeDetail/Preview/Timetable.tsx index 4db0959..d1f1415 100644 --- a/apps/theme-market/src/app/_pages/Main/BottomSheet/Theme/Preview/Timetable.tsx +++ b/apps/theme-market/src/app/_pages/Main/BottomSheet/ThemeDetail/Preview/Timetable.tsx @@ -1,11 +1,12 @@ +import { ThemeColorInfo } from "@/entities/Theme"; import { SVGProps } from "react"; interface Props extends SVGProps { - timetableColors?: string[]; + timetableColors?: ThemeColorInfo[]; } export const Timetable = ({ timetableColors = [], ...props }: Props) => { - const [firstColor, secondColor] = timetableColors; + const colorSize = timetableColors.length; return ( { y="278" width="71" height="190" - fill={secondColor || "#E54459"} + fill={timetableColors[0 % colorSize].bg || "#E54459"} /> { /> + - { /> + - { /> + - { /> + - { /> { /> { /> ); diff --git a/apps/theme-market/src/app/_pages/Main/BottomSheet/Theme/Preview/index.module.css b/apps/theme-market/src/app/_pages/Main/BottomSheet/ThemeDetail/Preview/index.module.css similarity index 100% rename from apps/theme-market/src/app/_pages/Main/BottomSheet/Theme/Preview/index.module.css rename to apps/theme-market/src/app/_pages/Main/BottomSheet/ThemeDetail/Preview/index.module.css diff --git a/apps/theme-market/src/app/_pages/Main/BottomSheet/Theme/Preview/index.tsx b/apps/theme-market/src/app/_pages/Main/BottomSheet/ThemeDetail/Preview/index.tsx similarity index 57% rename from apps/theme-market/src/app/_pages/Main/BottomSheet/Theme/Preview/index.tsx rename to apps/theme-market/src/app/_pages/Main/BottomSheet/ThemeDetail/Preview/index.tsx index d331801..2c713eb 100644 --- a/apps/theme-market/src/app/_pages/Main/BottomSheet/Theme/Preview/index.tsx +++ b/apps/theme-market/src/app/_pages/Main/BottomSheet/ThemeDetail/Preview/index.tsx @@ -1,12 +1,17 @@ +import { ThemeColorInfo } from "@/entities/Theme"; import styles from "./index.module.css"; import { Timetable } from "./Timetable"; -export const Preview = () => { +interface Props { + colors: ThemeColorInfo[]; +} + +export const Preview = ({ colors }: Props) => { return (

미리보기

- +
); diff --git a/apps/theme-market/src/app/_pages/Main/BottomSheet/Theme/index.module.css b/apps/theme-market/src/app/_pages/Main/BottomSheet/ThemeDetail/index.module.css similarity index 100% rename from apps/theme-market/src/app/_pages/Main/BottomSheet/Theme/index.module.css rename to apps/theme-market/src/app/_pages/Main/BottomSheet/ThemeDetail/index.module.css diff --git a/apps/theme-market/src/app/_pages/Main/BottomSheet/ThemeDetail/index.tsx b/apps/theme-market/src/app/_pages/Main/BottomSheet/ThemeDetail/index.tsx new file mode 100644 index 0000000..72a92c2 --- /dev/null +++ b/apps/theme-market/src/app/_pages/Main/BottomSheet/ThemeDetail/index.tsx @@ -0,0 +1,32 @@ +"use client"; + +import { Theme } from "@/entities/Theme"; +import styles from "./index.module.css"; +import { Preview } from "./Preview"; + +interface Props { + theme: Theme; +} + +export const ThemeDetail = ({ theme }: Props) => { + return ( +
+
+ 테마명 + {theme.name} +
+
+ {theme.colors.map((color, index) => ( +
+ 색상{index + 1} +
+
+
+
+
+ ))} +
+ +
+ ); +}; diff --git a/apps/theme-market/src/app/_pages/Main/MyTheme/ThemeList/ThemeInfo/index.module.css b/apps/theme-market/src/app/_pages/Main/MyTheme/ThemeList/ThemeInfo/index.module.css index d5b5e68..b3706de 100644 --- a/apps/theme-market/src/app/_pages/Main/MyTheme/ThemeList/ThemeInfo/index.module.css +++ b/apps/theme-market/src/app/_pages/Main/MyTheme/ThemeList/ThemeInfo/index.module.css @@ -12,6 +12,7 @@ width: 80px; height: 78px; display: flex; + align-self: center; border-radius: 6px; overflow: hidden; diff --git a/apps/theme-market/src/app/_pages/Main/MyTheme/ThemeList/ThemeInfo/index.tsx b/apps/theme-market/src/app/_pages/Main/MyTheme/ThemeList/ThemeInfo/index.tsx index 9d8c970..d17dbb0 100644 --- a/apps/theme-market/src/app/_pages/Main/MyTheme/ThemeList/ThemeInfo/index.tsx +++ b/apps/theme-market/src/app/_pages/Main/MyTheme/ThemeList/ThemeInfo/index.tsx @@ -1,25 +1,24 @@ "use client"; -import { useRouter } from "next/navigation"; +import { useThemeStore } from "@/app/_providers/ThemeProvider"; +import { Theme } from "@/entities/Theme"; -import styles from "./index.module.css"; import { Preview } from "./Preview"; +import styles from "./index.module.css"; interface Props { - title: string; - colors: string[]; + theme: Theme; } -export const ThemeInfo = ({ title, colors }: Props) => { - const router = useRouter(); +export const ThemeInfo = ({ theme }: Props) => { + const { setTheme } = useThemeStore((state) => state); + + const colors = theme.colors.map((color) => color.bg); return ( -
router.push("/theme/123")} - > +
setTheme(theme)}> - {title} + {theme.name}
); }; diff --git a/apps/theme-market/src/app/_pages/Main/MyTheme/ThemeList/index.tsx b/apps/theme-market/src/app/_pages/Main/MyTheme/ThemeList/index.tsx index b08c0e9..eeeb043 100644 --- a/apps/theme-market/src/app/_pages/Main/MyTheme/ThemeList/index.tsx +++ b/apps/theme-market/src/app/_pages/Main/MyTheme/ThemeList/index.tsx @@ -2,7 +2,6 @@ import { Theme } from "@/entities/Theme"; import styles from "./index.module.css"; import { ThemeInfo } from "./ThemeInfo"; -import { themeService } from "@/services/ThemeService"; interface Props { themes: Theme[]; @@ -12,9 +11,7 @@ export const ThemeList = ({ themes }: Props) => { return (
{themes.map((theme) => { - const colors = theme.colors.map((color) => color.bg); - - return ; + return ; })}
); diff --git a/apps/theme-market/src/app/_pages/Main/MyTheme/index.tsx b/apps/theme-market/src/app/_pages/Main/MyTheme/index.tsx index 874f32b..7ce740e 100644 --- a/apps/theme-market/src/app/_pages/Main/MyTheme/index.tsx +++ b/apps/theme-market/src/app/_pages/Main/MyTheme/index.tsx @@ -1,13 +1,11 @@ -import { cookies } from "next/headers"; import styles from "./index.module.css"; import { ThemeList } from "./ThemeList"; -import { ACCESS_TOKEN_KEY } from "@/clients/HttpClient"; import { themeService } from "@/services/ThemeService"; import { NotFound } from "@/app/_components/Error/NotFound"; +import { cookieService } from "@/services/CookieService"; export const MyTheme = async () => { - const cookieStore = cookies(); - const accessToken = cookieStore.get(ACCESS_TOKEN_KEY)?.value; + const accessToken = cookieService.getAccessToken(); const myThemes = await themeService.getMyThemes(accessToken); diff --git a/apps/theme-market/src/app/_pages/Main/ThemeDownload/ThemeList/ThemeInfo/index.tsx b/apps/theme-market/src/app/_pages/Main/ThemeDownload/ThemeList/ThemeInfo/index.tsx index f6a719d..ac6a620 100644 --- a/apps/theme-market/src/app/_pages/Main/ThemeDownload/ThemeList/ThemeInfo/index.tsx +++ b/apps/theme-market/src/app/_pages/Main/ThemeDownload/ThemeList/ThemeInfo/index.tsx @@ -17,7 +17,7 @@ export const ThemeInfo = ({ theme }: Props) => { return (
router.push("/theme/123")} + onClick={() => router.push(`/theme/${theme.id}`)} >
diff --git a/apps/theme-market/src/app/_pages/Main/ThemeDownload/index.tsx b/apps/theme-market/src/app/_pages/Main/ThemeDownload/index.tsx index e3a353b..2a66344 100644 --- a/apps/theme-market/src/app/_pages/Main/ThemeDownload/index.tsx +++ b/apps/theme-market/src/app/_pages/Main/ThemeDownload/index.tsx @@ -1,13 +1,10 @@ -import { cookies } from "next/headers"; - -import { ACCESS_TOKEN_KEY } from "@/clients/HttpClient"; import { themeService } from "@/services/ThemeService"; import { ThemeList } from "./ThemeList"; +import { cookieService } from "@/services/CookieService"; export const ThemeDownload = async () => { - const cookieStore = cookies(); - const accessToken = cookieStore.get(ACCESS_TOKEN_KEY)?.value; + const accessToken = cookieService.getAccessToken(); const bestThemes = await themeService.getBestThemes(accessToken); const friendsThemes = await themeService.getFriendsThemes(accessToken); diff --git a/apps/theme-market/src/app/_providers/ThemeProvider.tsx b/apps/theme-market/src/app/_providers/ThemeProvider.tsx new file mode 100644 index 0000000..40fcc37 --- /dev/null +++ b/apps/theme-market/src/app/_providers/ThemeProvider.tsx @@ -0,0 +1,38 @@ +"use client"; + +import { createContext, ReactNode, useContext, useRef } from "react"; +import { createThemeStore, ThemeStore } from "../_stores/ThemeStore"; +import { useStore } from "zustand"; + +export type ThemeStoreApi = ReturnType; + +export interface ThemeStoreProviderProps { + children: ReactNode; +} + +export const ThemeStoreContext = createContext( + undefined +); + +export const ThemeStoreProvider = ({ children }: ThemeStoreProviderProps) => { + const ref = useRef(); + if (!ref.current) { + ref.current = createThemeStore(); + } + + return ( + + {children} + + ); +}; + +export const useThemeStore = (selector: (store: ThemeStore) => T): T => { + const themeStoreContext = useContext(ThemeStoreContext); + + if (!themeStoreContext) { + throw new Error(`useThemeStore must be used within ThemeStoreProvider`); + } + + return useStore(themeStoreContext, selector); +}; diff --git a/apps/theme-market/src/app/_providers/UserProvider.tsx b/apps/theme-market/src/app/_providers/UserProvider.tsx new file mode 100644 index 0000000..ddf1773 --- /dev/null +++ b/apps/theme-market/src/app/_providers/UserProvider.tsx @@ -0,0 +1,43 @@ +"use client"; + +import { createContext, ReactNode, useContext, useRef } from "react"; +import { createUserStore, UserStore } from "../_stores/UserStore"; +import { useStore } from "zustand"; +import { User } from "@/entities/User"; + +export type UserStoreApi = ReturnType; + +export interface UserStoreProviderProps { + children: ReactNode; + user: User; +} + +export const UserStoreContext = createContext( + undefined +); + +export const UserStoreProvider = ({ + children, + user, +}: UserStoreProviderProps) => { + const ref = useRef(); + if (!ref.current) { + ref.current = createUserStore({ user }); + } + + return ( + + {children} + + ); +}; + +export const useUserStore = (selector: (store: UserStore) => T): T => { + const userStoreContext = useContext(UserStoreContext); + + if (!userStoreContext) { + throw new Error(`useUserStore must be used within UserStoreProvider`); + } + + return useStore(userStoreContext, selector); +}; diff --git a/apps/theme-market/src/app/_stores/ThemeStore.ts b/apps/theme-market/src/app/_stores/ThemeStore.ts new file mode 100644 index 0000000..8598506 --- /dev/null +++ b/apps/theme-market/src/app/_stores/ThemeStore.ts @@ -0,0 +1,19 @@ +import { Theme } from "@/entities/Theme"; +import { createStore } from "zustand"; + +export type ThemeStoreState = { + theme: Theme | null; +}; + +export type ThemeStoreAction = { + setTheme: (theme: Theme | null) => void; +}; + +export type ThemeStore = ThemeStoreState & ThemeStoreAction; + +export const createThemeStore = () => { + return createStore((set) => ({ + theme: null, + setTheme: (theme) => set((state) => ({ ...state, theme })), + })); +}; diff --git a/apps/theme-market/src/app/_stores/UserStore.ts b/apps/theme-market/src/app/_stores/UserStore.ts new file mode 100644 index 0000000..f1fe094 --- /dev/null +++ b/apps/theme-market/src/app/_stores/UserStore.ts @@ -0,0 +1,16 @@ +import { User } from "@/entities/User"; +import { createStore } from "zustand"; + +export type UserStoreState = { + user: User; +}; + +export type UserStoreAction = {}; + +export type UserStore = UserStoreState & UserStoreAction; + +export const createUserStore = (initalSate: UserStoreState) => { + return createStore(() => ({ + ...initalSate, + })); +}; diff --git a/apps/theme-market/src/entities/User.ts b/apps/theme-market/src/entities/User.ts new file mode 100644 index 0000000..eedb194 --- /dev/null +++ b/apps/theme-market/src/entities/User.ts @@ -0,0 +1,9 @@ +export type User = { + id: string; + email: string; + localId: string; + nickname: { + nickname: string; + tag: string; + }; +}; diff --git a/apps/theme-market/src/repositories/AuthRepository.ts b/apps/theme-market/src/repositories/AuthRepository.ts index 3d2eca3..6c8c35e 100644 --- a/apps/theme-market/src/repositories/AuthRepository.ts +++ b/apps/theme-market/src/repositories/AuthRepository.ts @@ -1,13 +1,13 @@ import { httpClient } from "@/clients/HttpClient"; +import { User } from "@/entities/User"; -// 예시용 type AuthRepository = { - me: () => Promise; + me: (accessToken?: string) => Promise; }; export const authRepositry: AuthRepository = { - me: async () => { - const res = await httpClient.get("/v1/users/me"); + me: async (accessToken?: string) => { + const res = await httpClient.get("/v1/users/me", accessToken); return res; }, diff --git a/apps/theme-market/src/repositories/CookieRepository.ts b/apps/theme-market/src/repositories/CookieRepository.ts new file mode 100644 index 0000000..9dae064 --- /dev/null +++ b/apps/theme-market/src/repositories/CookieRepository.ts @@ -0,0 +1,11 @@ +import { cookies } from "next/headers"; + +type CookieRepository = { + get: (name: string, defaultValue?: string) => string | undefined; +}; + +export const cookieRepository: CookieRepository = { + get: (name: string, defaultValue?: string) => { + return cookies().get(name)?.value || defaultValue; + }, +}; diff --git a/apps/theme-market/src/repositories/ThemeRepository.ts b/apps/theme-market/src/repositories/ThemeRepository.ts index e1cc6a6..5567cc7 100644 --- a/apps/theme-market/src/repositories/ThemeRepository.ts +++ b/apps/theme-market/src/repositories/ThemeRepository.ts @@ -4,6 +4,13 @@ import { PageResponse } from "@/entities/Page"; import { Theme } from "@/entities/Theme"; type ThemeRepository = { + getTheme: ({ + id, + accessToken, + }: { + id: string; + accessToken?: string; + }) => Promise; getMyThemes: ({ accessToken }: { accessToken?: string }) => Promise; getBestThemes: ({ page, @@ -24,6 +31,11 @@ type ThemeRepository = { const DEFAULT_PAGE = 1; export const themeRepositry: ThemeRepository = { + getTheme: async ({ id, accessToken }) => { + const res = await httpClient.get(`/v1/themes/${id}`, accessToken); + + return res; + }, getMyThemes: async ({ accessToken }) => { const res = await httpClient.get("/v1/themes", accessToken); return res; diff --git a/apps/theme-market/src/services/AuthService.ts b/apps/theme-market/src/services/AuthService.ts index e7b984d..1a3a282 100644 --- a/apps/theme-market/src/services/AuthService.ts +++ b/apps/theme-market/src/services/AuthService.ts @@ -1,12 +1,12 @@ +import { User } from "@/entities/User"; import { authRepositry } from "@/repositories/AuthRepository"; -// 예시용 type AuthService = { - me: () => Promise; + me: (accessToken?: string) => Promise; }; export const authService: AuthService = { - me: async () => { - return await authRepositry.me(); + me: async (accessToken?: string) => { + return await authRepositry.me(accessToken); }, }; diff --git a/apps/theme-market/src/services/CookieService.ts b/apps/theme-market/src/services/CookieService.ts new file mode 100644 index 0000000..4816635 --- /dev/null +++ b/apps/theme-market/src/services/CookieService.ts @@ -0,0 +1,17 @@ +import { ACCESS_TOKEN_KEY } from "@/clients/HttpClient"; +import { cookieRepository } from "@/repositories/CookieRepository"; +import { cookies } from "next/headers"; + +type CookieService = { + get: (name: string, defaultValue: string) => string | undefined; + getAccessToken: () => string | undefined; +}; + +export const cookieService: CookieService = { + get: (name: string, defaultValue?: string) => { + return cookieRepository.get(name, defaultValue); + }, + getAccessToken: () => { + return cookieRepository.get(ACCESS_TOKEN_KEY); + }, +}; diff --git a/apps/theme-market/src/services/ThemeService.ts b/apps/theme-market/src/services/ThemeService.ts index ebea110..b8faa1a 100644 --- a/apps/theme-market/src/services/ThemeService.ts +++ b/apps/theme-market/src/services/ThemeService.ts @@ -3,12 +3,16 @@ import { Theme } from "@/entities/Theme"; import { themeRepositry } from "@/repositories/ThemeRepository"; type ThemeService = { + getTheme: (id: string, accessToken?: string) => Promise; getMyThemes: (accessToken?: string) => Promise; getBestThemes: (accessToken?: string) => Promise; getFriendsThemes: (accessToken?: string) => Promise; }; export const themeService: ThemeService = { + getTheme: async (id: string, accessToken?: string) => { + return await themeRepositry.getTheme({ id, accessToken }); + }, getMyThemes: async (accessToken?: string) => { return (await themeRepositry.getMyThemes({ accessToken })).filter( (theme) => theme.isCustom diff --git a/yarn.lock b/yarn.lock index 14b1798..1d258c8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11079,3 +11079,8 @@ yocto-queue@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251" integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g== + +zustand@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/zustand/-/zustand-5.0.1.tgz#2bdca5e4be172539558ce3974fe783174a48fdcf" + integrity sha512-pRET7Lao2z+n5R/HduXMio35TncTlSW68WsYBq2Lg1ASspsNGjpwLAsij3RpouyV6+kHMwwwzP0bZPD70/Jx/w==