From 85c3926936a446ce6e077024b4a3abd6d2ced589 Mon Sep 17 00:00:00 2001 From: thwogh Date: Wed, 6 Aug 2025 16:38:39 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=ED=97=A4=EB=8D=94=20=EA=B3=B5=EC=9A=A9?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/(tabs)/_layout.tsx | 2 +- pages/archive/ArchivePage.tsx | 4 +++- pages/awards/AwardsPage.tsx | 2 +- pages/home/HomePage.tsx | 6 +++--- pages/profile/ProfilePage.tsx | 5 +++-- pages/upload/UploadPage.tsx | 5 +++-- shared/assets/icons/attend.svg | 8 ++++++++ shared/assets/icons/back.svg | 3 +++ shared/assets/icons/index.ts | 4 ++++ shared/assets/icons/logo.svg | 3 +++ shared/assets/icons/more.svg | 5 +++++ shared/assets/icons/search.svg | 5 ++--- shared/ui/header/CommonHeader.tsx | 24 ++++++++++++++++++++++ shared/ui/header/index.tsx | 5 +++++ shared/ui/header/items/AttendButton.tsx | 16 +++++++++++++++ shared/ui/header/items/BackButton.tsx | 13 ++++++++++++ shared/ui/header/items/Logo.tsx | 5 +++++ shared/ui/header/items/MoreButton.tsx | 14 +++++++++++++ shared/ui/header/items/SearchButton.tsx | 14 +++++++++++++ shared/ui/header/items/TodayKeyword.tsx | 15 ++++++++++++++ shared/ui/header/variants/FeedHeader.tsx | 14 +++++++++++++ shared/ui/header/variants/HomeHeader.tsx | 20 ++++++++++++++++++ shared/ui/header/variants/SearchHeader.tsx | 15 ++++++++++++++ shared/ui/header/variants/UploadHeader.tsx | 12 +++++++++++ tailwind.config.js | 9 ++++++-- 25 files changed, 213 insertions(+), 15 deletions(-) create mode 100644 shared/assets/icons/attend.svg create mode 100644 shared/assets/icons/back.svg create mode 100644 shared/assets/icons/logo.svg create mode 100644 shared/assets/icons/more.svg create mode 100644 shared/ui/header/CommonHeader.tsx create mode 100644 shared/ui/header/index.tsx create mode 100644 shared/ui/header/items/AttendButton.tsx create mode 100644 shared/ui/header/items/BackButton.tsx create mode 100644 shared/ui/header/items/Logo.tsx create mode 100644 shared/ui/header/items/MoreButton.tsx create mode 100644 shared/ui/header/items/SearchButton.tsx create mode 100644 shared/ui/header/items/TodayKeyword.tsx create mode 100644 shared/ui/header/variants/FeedHeader.tsx create mode 100644 shared/ui/header/variants/HomeHeader.tsx create mode 100644 shared/ui/header/variants/SearchHeader.tsx create mode 100644 shared/ui/header/variants/UploadHeader.tsx 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