feat: ngredient guide list page ui

android/app/build.gradle

@@ -51,7 +51,7 @@ android {
 
         // 로컬 기본값(수동 관리용)
         versionCode 15
-        versionName "1.1.0"
+        versionName "1.2.2"
 
         buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL",
             "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "다시",
     "slug": "dasii",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "orientation": "portrait",
     "icon": "./assets/images/img_logo.png",
     "scheme": "dasii",

app/(tabs)/home/index.tsx

@@ -34,6 +34,17 @@ export default function Home() {
 
   return (
     <SafeAreaView className='flex-1 bg-white' edges={['top']}>
+      {/* TODO: 임시 성분 리스트 버튼 (추후 삭제) */}
+      <View className='px-6 mb-4'>
+        <Pressable
+          className='bg-blue-500 rounded-lg py-3 items-center'
+          onPress={() => router.push('/ingredient')}
+        >
+          <Text className='text-white font-n-bd'>
+            ingredient 페이지 이동 (임시)
+          </Text>
+        </Pressable>
+      </View>
       <ScrollView className='flex-1'>
         <View className='flex-row items-center justify-between px-6 pt-4'>
           <LogoIcon width={80} height={30} />

app/(tabs)/mypage/index.tsx

@@ -11,6 +11,7 @@ import { clearTokens, getAccessToken } from '@/lib/authToken';
 import Constants from 'expo-constants';
 import { useFocusEffect, useRouter } from 'expo-router';
 import { useCallback, useState } from 'react';
+
 import { ScrollView, Text } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 

app/+not-found.tsx

@@ -1,32 +1,16 @@
-import { Link, Stack } from "expo-router";
-import { StyleSheet } from "react-native";
-
-import { ThemedText } from "@/components/ThemedText";
-import { ThemedView } from "@/components/ThemedView";
+import { Link, Stack } from 'expo-router';
+import { Text, View } from 'react-native';
 
 export default function NotFoundScreen() {
   return (
     <>
-      <Stack.Screen options={{ title: "Oops!" }} />
-      <ThemedView style={styles.container}>
-        <ThemedText type="title">This screen does not exist.</ThemedText>
-        <Link href="/" style={styles.link}>
-          <ThemedText type="link">Go to home screen!</ThemedText>
+      <Stack.Screen options={{ title: 'Oops!' }} />
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', padding: 20 }}>
+        <Text>This screen does not exist.</Text>
+        <Link href='/'>
+          <Text>Go to home screen!</Text>
         </Link>
-      </ThemedView>
+      </View>
     </>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 20,
-  },
-  link: {
-    marginTop: 15,
-    paddingVertical: 15,
-  },
-});

app/ingredient/index.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import ArrowLeftIcon from '@/assets/icons/ic_arrow_left.svg';
+import ArrowRightIcon from '@/assets/icons/ic_arrow_right.svg';
+import HomeIcon from '@/assets/icons/ic_home.svg';
+import SearchBar from '@/components/common/SearchBar';
+import Navigation from '@/components/layout/Navigation';
+import colors from '@/constants/color';
+import { useRouter } from 'expo-router';
+import { useState } from 'react';
+import { Pressable, ScrollView, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+// --- Mock Data ---
+const hotIngredients = [
+  { id: 1, name: '가르시니아 캄보지아 추출물' },
+  { id: 2, name: '밀크씨슬추출물' },
+  { id: 3, name: '녹차추출물' },
+];
+
+const ingredientList = [
+  { id: 4, name: '가르시니아 캄보지아 추출물' },
+  { id: 5, name: '밀크씨슬추출물' },
+  { id: 6, name: '녹차추출물' },
+  { id: 7, name: '코엔자임Q10' },
+  { id: 8, name: '비타민C (아스코르브산)' },
+  { id: 9, name: '콜라겐 펩타이드' },
+  { id: 10, name: '프로바이오틱스' },
+  { id: 11, name: '루테인' },
+  { id: 12, name: '오메가3' },
+];
+
+function IngredientRow({
+  name,
+  onPress,
+}: {
+  name: string;
+  onPress: () => void;
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      className='flex-row items-center justify-between px-4 py-4 bg-white active:bg-gray-50'
+    >
+      <Text className='text-sm text-gray-800'>{name}</Text>
+      <ArrowRightIcon width={12} height={12} fill={colors.gray[900]} />
+    </Pressable>
+  );
+}
+
+export default function IngredientGuidePage() {
+  const router = useRouter();
+  const [inputValue, setInputValue] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleSearch = () => {
+    setSearchQuery(inputValue);
+  };
+
+  const handleChangeText = (text: string) => {
+    setInputValue(text);
+    if (text === '') setSearchQuery('');
+  };
+
+  const filteredHot = hotIngredients.filter((i) =>
+    searchQuery ? i.name.includes(searchQuery) : true,
+  );
+  const filteredList = ingredientList.filter((i) =>
+    searchQuery ? i.name.includes(searchQuery) : true,
+  );
+
+  const hasResults = filteredHot.length > 0 || filteredList.length > 0;
+
+  return (
+    <SafeAreaView className='bg-white flex-1'>
+      {/* 헤더 */}
+      <Navigation
+        title='성분 가이드'
+        left={<ArrowLeftIcon width={18} height={18} fill={colors.gray[900]} />}
+        onLeftPress={() => router.back()}
+        right={
+          <Pressable onPress={() => router.push('/home')}>
+            <HomeIcon width={18} height={18} fill={colors.gray[900]} />
+          </Pressable>
+        }
+        onRightPress={() => router.push('/')}
+      />
+
+      {/* 검색바 */}
+      <SearchBar
+        value={inputValue}
+        onChangeText={handleChangeText}
+        onSubmit={handleSearch}
+        placeholder='성분, 제품명으로 검색해보세요!'
+      />
+
+      {/* 스크롤 영역 */}
+      <ScrollView className='flex-1' showsVerticalScrollIndicator={false}>
+        {filteredHot.length > 0 && (
+          <View className='mb-2'>
+            <View className='px-4 pt-5 pb-2'>
+              <Text className='text-lg font-n-eb'>요즘 뜨는 성분 🔥</Text>
+            </View>
+            {filteredHot.map((item, index) => (
+              <View key={item.id}>
+                <IngredientRow
+                  name={item.name}
+                  onPress={() => {
+                    router.push({
+                      pathname: '/ingredient/[id]/ingredientDetail',
+                      params: { id: item.id },
+                    });
+                  }}
+                />
+              </View>
+            ))}
+          </View>
+        )}
+        <View className='h-[0.5px] bg-gray-200 mx-4' />
+        {filteredList.length > 0 && (
+          <View className='mb-2'>
+            <View className='px-4 pt-5 pb-2'>
+              <Text className='text-lg font-n-eb '>성분 리스트</Text>
+            </View>
+            {filteredList.map((item, index) => (
+              <View key={item.id}>
+                <IngredientRow
+                  name={item.name}
+                  onPress={() => {
+                    router.push({
+                      pathname: '/ingredient/[id]/ingredientDetail',
+                      params: { id: item.id },
+                    });
+                  }}
+                />
+              </View>
+            ))}
+          </View>
+        )}
+
+        {searchQuery && !hasResults && (
+          <View className='flex-1 items-center py-10'>
+            <Text className='text-gray-400 font-medium text-center'>
+              {`'${searchQuery}'에 대한\n검색 결과가 없습니다.`}
+            </Text>
+          </View>
+        )}
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

components/common/SearchBar.tsx

@@ -0,0 +1,161 @@
+import MagnifierIcon from '@/assets/icons/ic_magnifier.svg';
+import CloseIcon from '@/assets/icons/ic_x.svg';
+import colors from '@/constants/color';
+import { useRef, useState } from 'react';
+import {
+  FlatList,
+  LayoutAnimation,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+
+interface SearchBarProps {
+  placeholder?: string;
+  value: string;
+  onChangeText: (text: string) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onSubmit?: () => void;
+  autoFocus?: boolean;
+  recentSearches?: string[];
+  onRecentSearchPress?: (search: string) => void;
+  onRemoveRecentSearch?: (search: string) => void;
+  onClearAllRecentSearches?: () => void;
+  onClearList?: () => void;
+}
+
+export default function SearchBar({
+  placeholder = '성분, 제품명으로 검색해보세요!',
+  value,
+  onChangeText,
+  onSubmit,
+  onFocus,
+  onBlur,
+  autoFocus = false,
+  recentSearches,
+  onRecentSearchPress,
+  onRemoveRecentSearch,
+  onClearAllRecentSearches,
+  onClearList,
+}: SearchBarProps) {
+  const inputRef = useRef<TextInput>(null);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleSearchSubmit = () => {
+    inputRef.current?.blur();
+    onSubmit?.();
+  };
+
+  const handleRecentSearchPress = (search: string) => {
+    setIsFocused(false);
+    inputRef.current?.blur();
+    onRecentSearchPress?.(search);
+  };
+
+  const showRecentSearches =
+    isFocused && recentSearches && recentSearches.length > 0;
+
+  return (
+    <View className='pt-1.5'>
+      <View className='px-4'>
+        <View className='flex-row items-center bg-gray-50 rounded-full py-[9px] px-[20px] mb-[15px]'>
+          <TextInput
+            ref={inputRef}
+            className='flex-1 text-b-sm font-n-rg py-0'
+            placeholder={placeholder}
+            placeholderTextColor={colors.gray[400]}
+            value={value}
+            onChangeText={onChangeText}
+            onFocus={() => {
+              LayoutAnimation.configureNext(
+                LayoutAnimation.Presets.easeInEaseOut,
+              );
+              setIsFocused(true);
+              onFocus?.();
+            }}
+            onBlur={() => {
+              LayoutAnimation.configureNext(
+                LayoutAnimation.Presets.easeInEaseOut,
+              );
+              setIsFocused(false);
+              onBlur?.();
+            }}
+            autoFocus={autoFocus}
+            onSubmitEditing={handleSearchSubmit}
+            returnKeyType='search'
+          />
+          {value.length > 0 && (
+            <Pressable
+              className='ml-2 bg-gray-400 rounded-full p-[3px]'
+              onPress={() => {
+                onChangeText('');
+                onClearList?.();
+              }}
+            >
+              <CloseIcon width={13} height={13} color={colors.gray[0]} />
+            </Pressable>
+          )}
+          <Pressable className='ml-4' onPress={handleSearchSubmit}>
+            <MagnifierIcon
+              width={18}
+              height={18}
+              color={value !== '' ? colors.gray[900] : colors.gray[400]}
+            />
+          </Pressable>
+        </View>
+      </View>
+
+      <View className='w-full border-[0.5px] border-gray-100 mb-4' />
+
+      {showRecentSearches && (
+        <View className='px-4 mb-4'>
+          <View>
+            <View className='flex-row justify-between items-center mb-3'>
+              <Text className='text-base font-n-bd text-gray-900'>
+                최근 검색
+              </Text>
+              <Pressable onPress={onClearAllRecentSearches}>
+                <Text className='text-sm text-gray-500'>전체삭제</Text>
+              </Pressable>
+            </View>
+
+            <FlatList
+              data={recentSearches}
+              horizontal
+              keyExtractor={(item, index) => `${item}-${index}`}
+              showsHorizontalScrollIndicator={false}
+              ItemSeparatorComponent={() => <View style={{ width: 8 }} />}
+              contentContainerStyle={{ paddingVertical: 4 }}
+              renderItem={({ item }) => (
+                <View className='flex-row items-center bg-white border-[0.5px] border-gray-200 rounded-full pl-4 pr-2 py-1'>
+                  <Pressable
+                    onPress={() => handleRecentSearchPress(item)}
+                    className='flex-1'
+                  >
+                    <Text className='text-sm text-gray-900' numberOfLines={1}>
+                      {item}
+                    </Text>
+                  </Pressable>
+
+                  <Pressable
+                    onPress={() => onRemoveRecentSearch?.(item)}
+                    className='p-1 ml-2 mr-1'
+                    hitSlop={8}
+                  >
+                    <CloseIcon
+                      width={16}
+                      height={16}
+                      color={colors.gray[700]}
+                    />
+                  </Pressable>
+                </View>
+              )}
+            />
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}