diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index d362c46..7bfdc61 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -12,7 +12,7 @@ export default function TabLayout() { }, []); return ( - + + + 아카이브 diff --git a/pages/awards/AwardsPage.tsx b/pages/awards/AwardsPage.tsx index ba20931..4226032 100644 --- a/pages/awards/AwardsPage.tsx +++ b/pages/awards/AwardsPage.tsx @@ -4,7 +4,7 @@ import { SafeAreaView } from "react-native-safe-area-context"; export default function AwardsPage() { return ( - + 어워드 diff --git a/pages/home/HomePage.tsx b/pages/home/HomePage.tsx index d430e73..917c68e 100644 --- a/pages/home/HomePage.tsx +++ b/pages/home/HomePage.tsx @@ -1,8 +1,8 @@ -import React from "react"; import { Text, TouchableOpacity } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context"; import { useRouter } from "expo-router"; import { useAuth } from "../../features/auth/model/AuthContext"; +import { HomeHeader } from "@/shared/ui/header"; export default function HomePage() { const { logout } = useAuth(); @@ -14,8 +14,8 @@ export default function HomePage() { }; return ( - - {/* 로그아웃 버튼 */} + + 로그아웃 버튼 diff --git a/pages/profile/ProfilePage.tsx b/pages/profile/ProfilePage.tsx index ee146c9..a00a81c 100644 --- a/pages/profile/ProfilePage.tsx +++ b/pages/profile/ProfilePage.tsx @@ -1,13 +1,14 @@ -import React from "react"; import { View, Text } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context"; import { useAuth } from "../../features/auth/model/AuthContext"; +import { SearchHeader } from "@/shared/ui/header"; export default function ProfilePage() { const { userInfo } = useAuth(); return ( - + + {userInfo?.nickname || "사용자 닉네임"} {userInfo?.email || "이메일 없음"} diff --git a/pages/upload/UploadPage.tsx b/pages/upload/UploadPage.tsx index aecef5a..aa6cc88 100644 --- a/pages/upload/UploadPage.tsx +++ b/pages/upload/UploadPage.tsx @@ -1,10 +1,11 @@ -import React from "react"; import { View, Text } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context"; +import { UploadHeader } from "@/shared/ui/header"; export default function UploadPage() { return ( - + + 업로드 diff --git a/shared/assets/icons/attend.svg b/shared/assets/icons/attend.svg new file mode 100644 index 0000000..fd7f378 --- /dev/null +++ b/shared/assets/icons/attend.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/shared/assets/icons/back.svg b/shared/assets/icons/back.svg new file mode 100644 index 0000000..39ce4d8 --- /dev/null +++ b/shared/assets/icons/back.svg @@ -0,0 +1,3 @@ + + + diff --git a/shared/assets/icons/index.ts b/shared/assets/icons/index.ts index ffca581..c236a7c 100644 --- a/shared/assets/icons/index.ts +++ b/shared/assets/icons/index.ts @@ -9,3 +9,7 @@ export { default as archiving_active } from "./archiving_active.svg"; export { default as uploading_active } from "./uploading_active.svg"; export { default as ranking_active } from "./ranking_active.svg"; export { default as my_active } from "./my_active.svg"; +export { default as back } from "./back.svg"; +export { default as more } from "./more.svg"; +export { default as attend } from "./attend.svg"; +export { default as logo } from "./logo.svg"; diff --git a/shared/assets/icons/logo.svg b/shared/assets/icons/logo.svg new file mode 100644 index 0000000..ca81f39 --- /dev/null +++ b/shared/assets/icons/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/shared/assets/icons/more.svg b/shared/assets/icons/more.svg new file mode 100644 index 0000000..3c57f33 --- /dev/null +++ b/shared/assets/icons/more.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/shared/assets/icons/search.svg b/shared/assets/icons/search.svg index 6c23f9f..170a533 100644 --- a/shared/assets/icons/search.svg +++ b/shared/assets/icons/search.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/shared/ui/header/CommonHeader.tsx b/shared/ui/header/CommonHeader.tsx new file mode 100644 index 0000000..465d2fc --- /dev/null +++ b/shared/ui/header/CommonHeader.tsx @@ -0,0 +1,24 @@ +import { View } from "react-native"; + +export interface HeaderProps { + left?: React.ReactNode; + center?: React.ReactNode; + right?: React.ReactNode; +} + +export default function CommonHeader({ left, center, right }: HeaderProps) { + return ( + + + {/* 왼쪽 아이템 */} + {left ?? } + + {/* 가운데 아이템 */} + {center} + + {/* 오른쪽 아이템 */} + {right ?? } + + + ); +} diff --git a/shared/ui/header/index.tsx b/shared/ui/header/index.tsx new file mode 100644 index 0000000..2fe5a49 --- /dev/null +++ b/shared/ui/header/index.tsx @@ -0,0 +1,5 @@ +export { default as CommonHeader } from "./CommonHeader"; +export { default as HomeHeader } from "./variants/HomeHeader"; +export { default as FeedHeader } from "./variants/FeedHeader"; +export { default as UploadHeader } from "./variants/UploadHeader"; +export { default as SearchHeader } from "./variants/SearchHeader"; diff --git a/shared/ui/header/items/AttendButton.tsx b/shared/ui/header/items/AttendButton.tsx new file mode 100644 index 0000000..fd574f0 --- /dev/null +++ b/shared/ui/header/items/AttendButton.tsx @@ -0,0 +1,16 @@ +import { Pressable, Text } from "react-native"; +import { Icon } from "@/shared/ui/icon"; + +interface AttendButtonProps { + onPress?: () => void; +} + +// Todo: api연결해서 몇 일 연속 출석인지 표시 +export default function AttendButton({ onPress }: AttendButtonProps) { + return ( + + + 34 + + ); +} diff --git a/shared/ui/header/items/BackButton.tsx b/shared/ui/header/items/BackButton.tsx new file mode 100644 index 0000000..ec334bf --- /dev/null +++ b/shared/ui/header/items/BackButton.tsx @@ -0,0 +1,13 @@ +import { Pressable } from "react-native"; +import { useRouter } from "expo-router"; +import { Icon } from "@/shared/ui/icon"; + +export default function BackButton() { + const router = useRouter(); + + return ( + router.back()} hitSlop={8}> + + + ); +} diff --git a/shared/ui/header/items/Logo.tsx b/shared/ui/header/items/Logo.tsx new file mode 100644 index 0000000..3f6e402 --- /dev/null +++ b/shared/ui/header/items/Logo.tsx @@ -0,0 +1,5 @@ +import { Icon } from "@/shared/ui/icon"; + +export default function Logo() { + return ; +} diff --git a/shared/ui/header/items/MoreButton.tsx b/shared/ui/header/items/MoreButton.tsx new file mode 100644 index 0000000..81a4cfe --- /dev/null +++ b/shared/ui/header/items/MoreButton.tsx @@ -0,0 +1,14 @@ +import { Pressable } from "react-native"; +import { Icon } from "@/shared/ui/icon"; + +interface MoreButtonProps { + onPress?: () => void; +} + +export default function MoreButton({ onPress }: MoreButtonProps) { + return ( + + + + ); +} diff --git a/shared/ui/header/items/SearchButton.tsx b/shared/ui/header/items/SearchButton.tsx new file mode 100644 index 0000000..8c5a0d0 --- /dev/null +++ b/shared/ui/header/items/SearchButton.tsx @@ -0,0 +1,14 @@ +import { Pressable } from "react-native"; +import { Icon } from "@/shared/ui/icon"; + +interface SearchButtonProps { + onPress?: () => void; +} + +export default function SearchButton({ onPress }: SearchButtonProps) { + return ( + + + + ); +} diff --git a/shared/ui/header/items/TodayKeyword.tsx b/shared/ui/header/items/TodayKeyword.tsx new file mode 100644 index 0000000..efba75c --- /dev/null +++ b/shared/ui/header/items/TodayKeyword.tsx @@ -0,0 +1,15 @@ +import { Text, View } from "react-native"; + +interface TodayKeywordProps { + dateString?: string; + title: string; +} + +export default function TodayKeyword({ title, dateString }: TodayKeywordProps) { + return ( + + {dateString && {dateString}} + {title} + + ); +} diff --git a/shared/ui/header/variants/FeedHeader.tsx b/shared/ui/header/variants/FeedHeader.tsx new file mode 100644 index 0000000..a4359b7 --- /dev/null +++ b/shared/ui/header/variants/FeedHeader.tsx @@ -0,0 +1,14 @@ +import CommonHeader from "../CommonHeader"; +import BackButton from "../items/BackButton"; +import TodayKeyword from "../items/TodayKeyword"; +import MoreButton from "../items/MoreButton"; + +export default function FeedHeader() { + return ( + } + center={} + right={} + /> + ); +} diff --git a/shared/ui/header/variants/HomeHeader.tsx b/shared/ui/header/variants/HomeHeader.tsx new file mode 100644 index 0000000..ad5fa26 --- /dev/null +++ b/shared/ui/header/variants/HomeHeader.tsx @@ -0,0 +1,20 @@ +import CommonHeader from "../CommonHeader"; +import Logo from "../items/Logo"; +import SearchButton from "../items/SearchButton"; +import AttendButton from "../items/AttendButton"; +import { View } from "react-native"; + +export default function HomeHeader() { + return ( + } + center={null} + right={ + + + + + } + /> + ); +} diff --git a/shared/ui/header/variants/SearchHeader.tsx b/shared/ui/header/variants/SearchHeader.tsx new file mode 100644 index 0000000..fde8c7c --- /dev/null +++ b/shared/ui/header/variants/SearchHeader.tsx @@ -0,0 +1,15 @@ +import CommonHeader from "../CommonHeader"; +import BackButton from "../items/BackButton"; +import SearchButton from "../items/SearchButton"; +import TodayKeyword from "../items/TodayKeyword"; + +export default function SearchHeader() { + return ( + } + //Todo: 검색 페이지 디자인에 따라 UI 수정 + api 연결 + center={} + right={} + /> + ); +} diff --git a/shared/ui/header/variants/UploadHeader.tsx b/shared/ui/header/variants/UploadHeader.tsx new file mode 100644 index 0000000..4ad5a5f --- /dev/null +++ b/shared/ui/header/variants/UploadHeader.tsx @@ -0,0 +1,12 @@ +import CommonHeader from "../CommonHeader"; +import BackButton from "../items/BackButton"; +import TodayKeyword from "../items/TodayKeyword"; + +export default function UploadHeader() { + return ( + } + center={} + /> + ); +} diff --git a/tailwind.config.js b/tailwind.config.js index 29269a9..e998382 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -9,8 +9,13 @@ module.exports = { "./shared/**/*.{js,jsx,ts,tsx}", ], theme: { - extend: {}, + extend: { + colors: { + "main-color1": "#195B35", + "main-color2": "#FFFDF5", + "background-color": "#232323", + }, + }, }, plugins: [], }; - \ No newline at end of file