diff --git a/index.html b/index.html index 6568b7b..bfd9e22 100644 --- a/index.html +++ b/index.html @@ -1,50 +1,30 @@ - - - - - - - - - 포켓 프롬프트 - ChatGPT 프롬프트 모음 | AI 프롬프트 템플릿 저장소 - - - - - - - - - - - - -
- - + + + + + + + + Pocket Prompt + + +
+ + diff --git a/public/image.png b/public/image.png deleted file mode 100644 index ffba1fc..0000000 Binary files a/public/image.png and /dev/null differ diff --git a/src/assets/svg/ImgEmpty.tsx b/src/assets/svg/ImgEmpty.tsx deleted file mode 100644 index 39d2da6..0000000 --- a/src/assets/svg/ImgEmpty.tsx +++ /dev/null @@ -1,202 +0,0 @@ -import type { SVGProps } from "react"; -const SvgImgEmpty = (props: SVGProps) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); -export default SvgImgEmpty; diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index 53c96cb..ca089db 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -1,4 +1,3 @@ export { default as IcInfoCircle } from "./IcInfoCircle"; -export { default as ImgEmpty } from "./ImgEmpty"; export { default as Logo } from "./Logo"; export { default as LogoNoLine } from "./LogoNoLine"; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 37cd510..392c005 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -11,9 +11,9 @@ import { LOCALSTORAGE_KEYS, removeLocalStorage, } from "@/utils/storageUtils"; +import { useMediaQuery } from "react-responsive"; import { MenuOutlined } from "@ant-design/icons"; import { Menus } from "@/core/Menu"; -import useDeviceSize from "@/hooks/useDeviceSize"; type HeaderProps = { onOpen: () => void; @@ -21,7 +21,9 @@ type HeaderProps = { export default function Header({ onOpen }: HeaderProps) { const { setUser, resetUserState, userData } = useUser(); - const { isUnderTablet } = useDeviceSize(); + const isUnderTablet = useMediaQuery({ + maxWidth: "1024px", + }); useEffect(() => { const access_token = getLocalStorage(LOCALSTORAGE_KEYS.ACCESS_TOKEN); diff --git a/src/hooks/useDeviceSize.ts b/src/hooks/useDeviceSize.ts deleted file mode 100644 index 6465dbd..0000000 --- a/src/hooks/useDeviceSize.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { useMediaQuery } from "react-responsive"; - -export default function useDeviceSize() { - const isDesktop = useMediaQuery({ minWidth: "1025px" }); - const isTablet = useMediaQuery({ minWidth: "768px", maxWidth: "1024px" }); - const isMobile = useMediaQuery({ maxWidth: "767px" }); - - const isUnderTablet = isTablet || isMobile; - - return { isDesktop, isTablet, isMobile, isUnderTablet }; -} diff --git a/src/layouts/FooterLayout.tsx b/src/layouts/FooterLayout.tsx index bc8b3a7..24372b1 100644 --- a/src/layouts/FooterLayout.tsx +++ b/src/layouts/FooterLayout.tsx @@ -3,9 +3,9 @@ import { Outlet } from "react-router-dom"; export default function FooterLayout() { return ( -
+ <>
-
+ ); } diff --git a/src/pages/home/components/Banner/Banner.tsx b/src/pages/home/components/Banner/Banner.tsx index 0debe6f..89bde94 100644 --- a/src/pages/home/components/Banner/Banner.tsx +++ b/src/pages/home/components/Banner/Banner.tsx @@ -1,52 +1,45 @@ import { styled } from "styled-components"; +import { LogoNoLine } from "@/assets/svg"; import SearchBar from "../Search/SearchBar"; import SearchChips from "../Search/SearchChips"; -import Text from "@/components/common/Text/Text"; -import useDeviceSize from "@/hooks/useDeviceSize"; -import LogoNoLine from "@/assets/svg/LogoNoLine"; const Banner = () => { - const { isUnderTablet } = useDeviceSize(); - return ( + + 당신이 찾는 프롬프트, +
+
여기 다 있습니다.
+ + + + + - -
- - 당신이 찾는 프롬프트, -
- 여기 다 있습니다. - - - - - -
); }; const BannerWrapper = styled.div` ${({ theme }) => theme.mixins.flexBox("column")}; + height: 328px; border-radius: 16px; background: ${({ theme }) => theme.mixins.gradientPrimary()} position: relative; - - padding: 40px 10px; `; -const BannerTitle = styled(Text)` +const BannerTitle = styled.div` ${({ theme }) => theme.mixins.flexBox("column")}; + text-align: center; + ${({ theme }) => theme.fonts.xlarge}; line-height: 136%; + ${({ theme }) => theme.fonts.bold}; color: ${({ theme }) => theme.colors.white}; margin-bottom: 26px; - span { + div { background-color: ${({ theme }) => theme.colors.primary_dark}; - padding: 0 10px; + width: 248px; } `; @@ -58,8 +51,6 @@ const Icon = styled(LogoNoLine)` `; const SearchWrapper = styled.div` - width: 80%; - margin: 0 auto; ${({ theme }) => theme.mixins.flexBox("column")}; gap: 12px; `; diff --git a/src/pages/home/components/LNB/LNB.tsx b/src/pages/home/components/LNB/LNB.tsx index 8120b88..0d9a3bc 100644 --- a/src/pages/home/components/LNB/LNB.tsx +++ b/src/pages/home/components/LNB/LNB.tsx @@ -3,7 +3,7 @@ import Image from "@/assets/svg/home/Image"; import TextSVG from "@/assets/svg/home/TextSVG"; import Video from "@/assets/svg/home/Video"; import styled from "styled-components"; -import { Flex, Menu } from "antd"; +import { Menu } from "antd"; import type { MenuProps } from "antd"; import { useState } from "react"; import MenuItemIcon from "./MenuItemIcon/MenuItemIcon"; @@ -11,21 +11,17 @@ import Button from "@/components/common/Button/Button"; import Add from "@/assets/svg/home/Add"; import { useNavigate } from "react-router-dom"; import useToast from "@/hooks/useToast"; -import useDeviceSize from "@/hooks/useDeviceSize"; -import Text from "@/components/common/Text/Text"; const LNB = () => { const [selectedKey, setSelectedKey] = useState("1"); const navigate = useNavigate(); const showToast = useToast(); - const { isUnderTablet } = useDeviceSize(); - const menuItems = [ { key: "1", label: "텍스트 프롬프트", icon: TextSVG }, { key: "2", label: "이미지 프롬프트", icon: Image }, { key: "3", label: "동영상 프롬프트", icon: Video }, - ...(isUnderTablet ? [] : [{ type: "divider", key: "divider-1" }]), + { type: "divider", key: "divider-1" }, { key: "4", label: "저장한 프롬프트", icon: BookMark }, ]; @@ -48,11 +44,11 @@ const LNB = () => { }; }); - const handleClickMenu = (index: string) => { - const selectedItem = menuItems.find((item) => item.key === index); + const handleClickMenu: MenuProps["onClick"] = (e) => { + const selectedItem = menuItems.find((item) => item.key === e.key); - if (index === "1") { - setSelectedKey(index); + if (e.key === "1") { + setSelectedKey(e.key); } else { showToast( `${selectedItem?.label}는 아직 준비 중인 기능이에요.`, @@ -65,43 +61,10 @@ const LNB = () => { navigate("/prompt-new"); }; - if (isUnderTablet) { - return ( - - - {menuItems.map((item) => ( - - ))} - - - - - ); - } - return ( handleClickMenu(e.key)} + onClick={handleClickMenu} selectedKeys={[selectedKey]} mode="vertical" items={items} diff --git a/src/pages/home/components/Prompt/PaginatedPrompt.tsx b/src/pages/home/components/Prompt/PaginatedPrompt.tsx index 7910621..5a629d0 100644 --- a/src/pages/home/components/Prompt/PaginatedPrompt.tsx +++ b/src/pages/home/components/Prompt/PaginatedPrompt.tsx @@ -1,4 +1,4 @@ -import { Col, Flex, Pagination, Row, Select } from "antd"; +import { Pagination, Select } from "antd"; import Prompt from "../Prompt/Prompt"; import styled from "styled-components"; import usePromptsListQuery, { @@ -12,9 +12,6 @@ import { searchedCategoryState, } from "@/states/searchState"; import { Categories } from "@/core/Prompt"; -import useDeviceSize from "@/hooks/useDeviceSize"; -import { ImgEmpty } from "@/assets/svg"; -import Text from "@/components/common/Text/Text"; interface PaginatedPromptProps { usePage?: boolean; @@ -26,28 +23,25 @@ const PaginatedPrompt = ({ type, usePage = true }: PaginatedPromptProps) => { const searchedKeyword = useRecoilValue(searchedKeywordState); const searchCategory = useRecoilValue(searchedCategoryState); - const { isUnderTablet } = useDeviceSize(); - - const limit = isUnderTablet ? 5 : undefined; const promptQueryParams: PromptQueryProps = (() => { switch (type) { case "total": - return { sortBy: sortBy, limit: limit }; + return { sortBy: sortBy, limit: undefined }; case "popular": return { sortBy: "star", limit: 3 }; case "search": return { sortBy: sortBy, - limit: limit, + limit: undefined, query: searchedKeyword, }; case "category": if (searchCategory === "total") { - return { sortBy: sortBy, limit: limit }; + return { sortBy: sortBy, limit: undefined }; } return { sortBy: sortBy, - limit: limit, + limit: undefined, categories: searchCategory, }; } @@ -80,7 +74,7 @@ const PaginatedPrompt = ({ type, usePage = true }: PaginatedPromptProps) => { })(); return ( - + <> {promptTitle} {usePage && ( @@ -99,51 +93,50 @@ const PaginatedPrompt = ({ type, usePage = true }: PaginatedPromptProps) => { )} - - {isLoading ? ( - Array.from({ length: itemsPerPage }).map((_, idx) => ( - - - - )) - ) : items.length < 1 ? ( - - ) : ( - items.map((item, index) => ( - - - - )) - )} - - + + {isLoading + ? Array.from({ length: itemsPerPage }).map((_, idx) => ( + + )) + : items.map((item, index) => ( + + ))} + {usePage && ( -
- -
+ )} - + ); }; export default PaginatedPrompt; +const PromptWrapper = styled.div` + ${({ theme }) => theme.mixins.flexBox("row", "start", "start")}; + align-content: flex-start; + gap: 16px; + flex-wrap: wrap; + box-sizing: border-box; + width: 1107px; + min-height: 157px; +`; + const SkeletonBox = styled.div` ${({ theme }) => theme.mixins.skeleton()}; width: 358px; @@ -168,27 +161,3 @@ const Title = styled.div` ${({ theme }) => theme.fonts.header1}; ${({ theme }) => theme.fonts.bold}; `; - -const Empty = () => { - return ( - - - - - - 아직 등록된 프롬프트가 없어요! - - - 1등으로 관련 프롬프트를 등록해볼까요? - - - - ); -}; - -const EmptyWrapper = styled(Flex)` - width: 100%; - padding: 80px; - border-radius: 8px; - background: ${({ theme }) => theme.colors.G_50}; -`; diff --git a/src/pages/home/components/Prompt/PaginatedPromptSection.tsx b/src/pages/home/components/Prompt/PaginatedPromptSection.tsx index ff3036d..31df16c 100644 --- a/src/pages/home/components/Prompt/PaginatedPromptSection.tsx +++ b/src/pages/home/components/Prompt/PaginatedPromptSection.tsx @@ -11,7 +11,7 @@ const PaginatedPromptSection = () => { const searchedCategory = useRecoilValue(searchedCategoryState); return ( - + <> {searchedKeyword && ( @@ -33,17 +33,12 @@ const PaginatedPromptSection = () => { )} - + ); }; export default PaginatedPromptSection; -const PromptSectionContainer = styled.section` - width: 100%; - padding: 0 10px; -`; - const SectionWrapper = styled.div` ${({ theme }) => theme.mixins.flexBox("column", "center", "center")}; gap: 12px; diff --git a/src/pages/home/components/Prompt/styles.ts b/src/pages/home/components/Prompt/styles.ts index 6220002..ddef0ae 100644 --- a/src/pages/home/components/Prompt/styles.ts +++ b/src/pages/home/components/Prompt/styles.ts @@ -2,9 +2,8 @@ import styled from "styled-components"; export const PromptWrapper = styled.div<{ colored: boolean }>` ${({ theme }) => theme.mixins.flexBox("column", "space-between")}; - - padding: 16px; - + width: 358px; + height: 157px; box-sizing: border-box; border-radius: 12px; border: 1.5px solid; diff --git a/src/pages/home/components/Search/SearchBar.tsx b/src/pages/home/components/Search/SearchBar.tsx index 1f4ab7d..2a56ca2 100644 --- a/src/pages/home/components/Search/SearchBar.tsx +++ b/src/pages/home/components/Search/SearchBar.tsx @@ -34,7 +34,7 @@ const SearchBar = () => { export default SearchBar; const InputWrapper = styled.div` - width: 100%; + width: 543px; height: 52px; position: relative; diff --git a/src/pages/home/components/Search/SearchChips.tsx b/src/pages/home/components/Search/SearchChips.tsx index ee98c11..c0a4448 100644 --- a/src/pages/home/components/Search/SearchChips.tsx +++ b/src/pages/home/components/Search/SearchChips.tsx @@ -1,6 +1,5 @@ import Button from "@/components/common/Button/Button"; import { Categories } from "@/core/Prompt"; -import useDeviceSize from "@/hooks/useDeviceSize"; import { keywordState, searchedCategoryState, @@ -17,8 +16,6 @@ const SearchChips = () => { useRecoilState(searchedKeywordState); const [selectedButton, setSelectedButton] = useState("total"); - const { isUnderTablet } = useDeviceSize(); - const handleChipClick = (chipValue: string) => { setSearchedKeyword(""); setSearchedCategory(chipValue); @@ -41,8 +38,7 @@ const SearchChips = () => { handleChipClick(category.en)} - $selected={selectedButton === category.en} - $mobile={isUnderTablet} + selected={selectedButton === category.en} > {category.ko} @@ -55,20 +51,17 @@ export default SearchChips; const SearchChipsWrapper = styled.div` ${({ theme }) => theme.mixins.flexBox()}; - width: 100%; - max-width: 445px; + width: 445px; flex-wrap: wrap; gap: 8px; `; -const StyledButton = styled(Button)<{ $selected: boolean; $mobile: boolean }>` +const StyledButton = styled(Button)<{ selected: boolean }>` height: 32px; - ${({ $mobile, theme }) => - $mobile ? theme.fonts.c1_12_semi : theme.fonts.b3_14_med} - - background-color: ${({ $selected, theme }) => - $selected ? theme.colors.primary : theme.colors.white}; - color: ${({ $selected, theme }) => - $selected ? theme.colors.white : theme.colors.primary}; + ${({ theme }) => theme.fonts.b3_14_med} + background-color: ${({ selected, theme }) => + selected ? theme.colors.primary : theme.colors.white}; + color: ${({ selected, theme }) => + selected ? theme.colors.white : theme.colors.primary}; border: 1px solid ${({ theme }) => theme.colors.primary_30}; `; diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 87bc3ab..572f866 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -4,14 +4,11 @@ import styled from "styled-components"; import LNB from "./components/LNB/LNB"; import PaginatedPromptSection from "./components/Prompt/PaginatedPromptSection"; -import useDeviceSize from "@/hooks/useDeviceSize"; export default function HomePage() { - const { isUnderTablet } = useDeviceSize(); - return ( - + @@ -27,30 +24,22 @@ export default function HomePage() { const HomeWrapper = styled.div` ${({ theme }) => theme.mixins.flexBox()} gap: 40px; - padding-top: 92px; + margin-top: 92px; align-items: start; width: 100vw; - background-color: white; `; -const HomeContentWrapper = styled.div<{ $isUnderTablet: boolean }>` - ${({ theme, $isUnderTablet }) => - theme.mixins.flexBox( - $isUnderTablet ? "column" : "row", - "center", - "start" - )}; - gap: ${({ $isUnderTablet }) => ($isUnderTablet ? "20px" : "40px")}; +const HomeContentWrapper = styled.div` + ${({ theme }) => theme.mixins.flexBox("row", "center", "start")}; + gap: 40px; margin: auto; `; const ContentWrapper = styled(Wrapper)` max-width: 1107px; - width: 100vw; - padding: 0 10px; + padding: 0; `; const BannerWrapper = styled.div` margin-bottom: 15px; - width: 100%; `; diff --git a/src/pages/prompt/components/ExecuteSection.tsx b/src/pages/prompt/components/ExecuteSection.tsx index 1437acc..4560a47 100644 --- a/src/pages/prompt/components/ExecuteSection.tsx +++ b/src/pages/prompt/components/ExecuteSection.tsx @@ -3,8 +3,6 @@ import Button from "@/components/common/Button/Button"; import Input from "@/components/common/Input/Input"; import Text from "@/components/common/Text/Text"; import usePocketRun from "@/hooks/mutations/pocketRun/usePocketRun"; -import useToast from "@/hooks/useToast"; -import { useUser } from "@/hooks/useUser"; import Icon from "@/pages/home/components/common/Icon"; import PocketRunDropdown from "@/pages/prompt/components/PocketRunDropdown"; import PromptTemplateModal from "@/pages/prompt/components/PromptTemplateModal"; @@ -43,9 +41,6 @@ export const ExecuteSection: React.FC = ({ const [hasChanged, setHasChanged] = useState(false); const prevFormValues = useRef>({}); const formValues = watch(); - const { userData } = useUser(); - const showToast = useToast(); - const { mutate: pocketRun, isPending } = usePocketRun({ onSuccess: (res) => { @@ -79,10 +74,6 @@ export const ExecuteSection: React.FC = ({ alert("클립보드 복사에 실패했습니다."); }); } else { - if (!userData.isLogin) { - showToast("로그인 후 이용 가능합니다.", ""); - return; - } pocketRun({ promptId: promptId ?? "", context: values, diff --git a/src/pages/prompt/components/ResultSection.tsx b/src/pages/prompt/components/ResultSection.tsx index 1af470e..72ae7fa 100644 --- a/src/pages/prompt/components/ResultSection.tsx +++ b/src/pages/prompt/components/ResultSection.tsx @@ -46,12 +46,7 @@ export const ResultSection: React.FC = () => { {Object.entries(res.context).map(([key, value]) => ( - + {key}: {value} diff --git a/src/router/Router.tsx b/src/router/Router.tsx index 98d62f5..5e47abf 100644 --- a/src/router/Router.tsx +++ b/src/router/Router.tsx @@ -16,7 +16,6 @@ const router = createBrowserRouter([ path: "/", element: , children: [ - { path: "/", element: }, { path: "/prompt-new", element: ( @@ -47,6 +46,7 @@ const router = createBrowserRouter([ element: , errorElement: , children: [ + { path: "/", element: }, { path: "/extension", element: }, { path: "/price", element: }, ], diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts index 50eba82..a53c1d4 100644 --- a/src/styles/GlobalStyle.ts +++ b/src/styles/GlobalStyle.ts @@ -15,7 +15,6 @@ ${reset} button { cursor: pointer; - background: none; } :root {