sdp-tech#126 feat : refactor codes, fix bugs, add UI, route

src/common/CustomHeader.tsx

@@ -1,6 +1,12 @@
 import { useEffect, useState } from 'react';
 import { Filter14M } from '../styles/GlobalText';
-import { Text, View, TouchableOpacity, Dimensions } from 'react-native';
+import {
+  Text,
+  View,
+  TouchableOpacity,
+  Dimensions,
+  StyleSheet,
+} from 'react-native';
 import Search from '../assets/common/Search.svg';
 import Logo from '../assets/common/Logo.svg';
 import Bell from '../assets/common/Bell.svg';
@@ -25,7 +31,7 @@ const ToggleBox = styled.View`
   height: 52px;
   padding: 12px 16px;
   align-items: center;
-  background: #612FEF;
+  background: #612fef;
 `;
 
 const ToggleButton = styled.TouchableOpacity<{ pressed: boolean }>`
@@ -36,8 +42,10 @@ const ToggleButton = styled.TouchableOpacity<{ pressed: boolean }>`
   justify-content: center;
   align-items: center;
   gap: 8px;
-  border-bottom-width: ${(props : {pressed: boolean}) => (props.pressed ? '2px' : '0px')};
-  border-color: ${(props : {pressed: boolean})  => (props.pressed ? '#FFFFFF' : 'transparent')};
+  border-bottom-width: ${(props: { pressed: boolean }) =>
+    props.pressed ? '2px' : '0px'};
+  border-color: ${(props: { pressed: boolean }) =>
+    props.pressed ? '#FFFFFF' : 'transparent'};
 `;
 
 const BannerText = styled.View`
@@ -51,14 +59,14 @@ const BannerTitle = styled.Text`
   color: white;
   font-size: 18px;
   font-weight: 700;
-  line-height:24px;
+  line-height: 24px;
 `;
 
 const BannerSubtitle = styled.Text`
   color: white;
   font-size: 14px;
   font-weight: 400;
-  line-height:24px;
+  line-height: 24px;
 `;
 
 const BannerPageNumber = styled.Text`
@@ -72,7 +80,7 @@ const BannerPageNumber = styled.Text`
 interface CustomHeaderProps {
   onSearch: () => void;
   onAlarm?: () => void;
-  onTabChange: (tab: 'Goods'| 'Market' | 'temp') => void;
+  onTabChange: (tab: 'Goods' | 'Market' | 'temp') => void;
 }
 
 interface ToggleButtonParams {
@@ -85,53 +93,59 @@ const Toggletag = ({ pressable }: ToggleButtonParams) => {
     <ToggleButton
       pressed={pressed}
       onPress={() => setPressed(!pressed)}
-      disabled={!pressable}>
-    </ToggleButton>
+      disabled={!pressable}></ToggleButton>
   );
 };
 
-const CustomHeader = ({ onSearch, onAlarm, onTabChange }: CustomHeaderProps) => {
-  const [selectedTab, setSelectedTab] = useState<'Goods' | 'Market' | 'temp'>('Goods');
-
-  useEffect(() =>{
+const CustomHeader = ({
+  onSearch,
+  onAlarm,
+  onTabChange,
+}: CustomHeaderProps) => {
+  const [selectedTab, setSelectedTab] = useState<'Goods' | 'Market' | 'temp'>(
+    'Goods',
+  );
+
+  useEffect(() => {
     setSelectedTab(selectedTab);
-  }, [selectedTab])
-  
+  }, [selectedTab]);
+
   //눌렀을 때 색 변경 및 font weight,size 변경 안 됨?
   return (
     <>
       <FrameBox>
         <Logo color="#DBFC72" width={41.572} height={18} />
-        <View style={{ flex: 1 }}>
-        </View>
-
+        <View style={{ flex: 1 }}></View>
         <Search />
         <Bell />
       </FrameBox>
       <ToggleBox>
         <ToggleButton
           pressed={selectedTab === 'Goods'}
-          onPress={() => {setSelectedTab('Goods'); onTabChange('Goods');}}>
-          <Text style={{ color: '#FFFFFF', fontSize: 16, fontWeight: '700', marginRight: 5 }}>
-            서비스
-          </Text>
+          onPress={() => {
+            setSelectedTab('Goods');
+            onTabChange('Goods');
+          }}>
+          <Text style={TextStyles.tabTitle}>서비스</Text>
         </ToggleButton>
         <ToggleButton
           pressed={selectedTab === 'Market'}
-          onPress={() => {setSelectedTab('Market'); onTabChange('Market');}}>
-          <Text style={{ color: '#FFFFFF', fontSize: 16, fontWeight: '700', marginRight: 5 }}>
-            리폼러
-          </Text>
+          onPress={() => {
+            setSelectedTab('Market');
+            onTabChange('Market');
+          }}>
+          <Text style={TextStyles.tabTitle}>리폼러</Text>
         </ToggleButton>
         <ToggleButton
           pressed={selectedTab === 'temp'}
-          onPress={() => {setSelectedTab('temp'); onTabChange('temp');}}>
-          <Text style={{ color: '#FFFFFF', fontSize: 16, fontWeight: '700', marginRight: 5 }}>
-            임시 버튼
-          </Text>
+          onPress={() => {
+            setSelectedTab('temp');
+            onTabChange('temp');
+          }}>
+          <Text style={TextStyles.tabTitle}>임시 버튼</Text>
         </ToggleButton>
       </ToggleBox>
-      {selectedTab === 'Goods' && (
+      {/* {selectedTab === 'Goods' && (
         <View style={{  }}>
         <Advertisment width={screenWidth + 10} height={128} preserveAspectRatio="none" />
         <BannerText>
@@ -141,9 +155,18 @@ const CustomHeader = ({ onSearch, onAlarm, onTabChange }: CustomHeaderProps) =>
         </BannerText>
           <BannerPageNumber>1/10</BannerPageNumber>  
       </View>
-      )}
+      )} */}
     </>
   );
 };
 
+const TextStyles = StyleSheet.create({
+  tabTitle: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '700',
+    marginRight: 5,
+  },
+});
+
 export default CustomHeader;

src/components/Home/HomeMain.tsx

@@ -77,13 +77,15 @@ const HomeTabView = ({
   const [styleFilterOpen, setStyleFilterOpen] = useState<boolean>(false);
   const [selectedStyles, setSelectedStyles] = useState<string[]>([]);
   const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
-  const [selectedOption, setSelectedOption] = useState<string>('추천순');
+  const [selectedOption, setSelectedOption] = useState<SelectedOptionProps>(
+    selectOptionDropdown[0],
+  );
 
   const toggleDropdown = () => {
     setDropdownOpen(!dropdownOpen);
   };
 
-  const selectOption = (option: string) => {
+  const selectOption = (option: SelectedOptionProps) => {
     setSelectedOption(option);
     setDropdownOpen(false);
   };