diff --git a/app/(app)/_layout.tsx b/app/(app)/_layout.tsx index f361bb3..50463ee 100644 --- a/app/(app)/_layout.tsx +++ b/app/(app)/_layout.tsx @@ -5,7 +5,6 @@ import { Redirect, Tabs } from 'expo-router'; import React from 'react'; import { Text } from 'react-native'; -import FireSvg from '@/components/common/icon/fire-svg'; import Typography from '@/components/common/typography'; import type { MainNavigations } from '@/constants'; import { MAIN_NAVIGATIONS } from '@/constants'; @@ -13,6 +12,7 @@ import { SITE_URLS } from '@/constants'; import { useSession } from '@/store'; import { useOnboarding } from '@/store/useOnboarding'; import useTabBar from '@/store/useTabBar'; +import { flexDirectionRow, flexItemCenter } from '@/styles/common'; import { color } from '@/styles/theme'; const tabBarOptions = { @@ -36,15 +36,6 @@ const tabBarOptions = { /> ), }, - [MAIN_NAVIGATIONS.REVIEW]: { - label: '리뷰', - icon: (color: string) => ( - - ), - }, [MAIN_NAVIGATIONS.MY]: { label: '마이', icon: (color: string) => ( @@ -72,7 +63,7 @@ const TabBar = ({ state, descriptors, navigation }: BottomTabBarProps) => { const isFocused = state.index === index; - if (route.name === 'alarm' || typeof label === 'function') { + if (route.name === 'alarm' || typeof label === 'function' || !tabBarOptions[label]) { return null; } @@ -103,14 +94,13 @@ const TabBar = ({ state, descriptors, navigation }: BottomTabBarProps) => { accessibilityLabel={options.tabBarAccessibilityLabel} testID={options.tabBarTestID} onPress={onPress} - onLongPress={onLongPress} - style={{ flex: 1 }}> - {tabBarOptions[label].icon(isFocused ? '#000000' : '#cccccc')} - + onLongPress={onLongPress}> + {tabBarOptions[label].icon(isFocused ? color.Common['0'] : '#cccccc')} + {tabBarOptions[label].label} - + ); })} @@ -145,7 +135,6 @@ export default function Layout() { tabBar={(tabBar) => }> - ); @@ -153,9 +142,9 @@ export default function Layout() { const S = { TabBar: styled.View` + ${flexDirectionRow}; position: absolute; bottom: 0; - flex-direction: row; align-items: center; justify-content: space-between; width: 100%; @@ -163,8 +152,11 @@ const S = { background-color: white; `, TabBarItem: styled.TouchableOpacity` + ${flexItemCenter}; + flex: 1; gap: 4px; - align-items: center; - justify-content: center; + `, + TabBarText: styled(Typography)<{ $isFocused: boolean }>` + color: ${({ $isFocused }) => ($isFocused ? '#000000' : '#cccccc')}; `, }; diff --git a/app/(app)/project/detail/[id]/index.tsx b/app/(app)/project/[id]/detail/index.tsx similarity index 76% rename from app/(app)/project/detail/[id]/index.tsx rename to app/(app)/project/[id]/detail/index.tsx index ed6d998..349d1fe 100644 --- a/app/(app)/project/detail/[id]/index.tsx +++ b/app/(app)/project/[id]/detail/index.tsx @@ -1,16 +1,17 @@ import { Feather } from '@expo/vector-icons'; -import { useNavigation, useRouter } from 'expo-router'; +import { useLocalSearchParams, useNavigation, useRouter } from 'expo-router'; import { useLayoutEffect } from 'react'; import { Platform, Pressable } from 'react-native'; import { MOCK_PROJECT_DETAIL } from '@/__mock__/project'; import Typography from '@/components/common/typography'; import ProjectDetail from '@/components/project/ProjectDetail'; +import { PROJECT_URLS } from '@/constants'; import { color } from '@/styles/theme'; function Page() { const router = useRouter(); - // const { id } = useLocalSearchParams(); 실제 데이터로 올 경우 해당 id를 이용하여 조회 + const { id } = useLocalSearchParams<{ id: string }>(); const navigation = useNavigation(); const data = MOCK_PROJECT_DETAIL; @@ -37,7 +38,7 @@ function Page() { ), headerRight: () => Platform.OS !== 'web' ? ( - router.push('/project/create')}> + router.push(PROJECT_URLS.PROJECT_CREATE)}> ) : null, }); - }, [navigation]); + }, [data.name, navigation, router]); - return ; + if (!id) { + return null; + } + + return ( + + ); } export default Page; diff --git a/app/(app)/project/detail/[id]/style.ts b/app/(app)/project/[id]/detail/style.ts similarity index 100% rename from app/(app)/project/detail/[id]/style.ts rename to app/(app)/project/[id]/detail/style.ts diff --git a/app/(app)/project/[id]/review/_layout.tsx b/app/(app)/project/[id]/review/_layout.tsx new file mode 100644 index 0000000..c40314e --- /dev/null +++ b/app/(app)/project/[id]/review/_layout.tsx @@ -0,0 +1,40 @@ +import { Feather } from '@expo/vector-icons'; +import { Stack, useRouter } from 'expo-router'; +import { Pressable } from 'react-native'; + +import { PROJECT_URLS, REVIEW_NAVIGATIONS } from '@/constants'; +import { color } from '@/styles/theme'; + +function Layout() { + const router = useRouter(); + return ( + ({ + headerStyle: { height: 40, backgroundColor: color.Background.Normal }, + headerTitleStyle: { + paddingTop: 12, + fontFamily: 'Pretendard-Bold', + }, + headerTitleAlign: 'center', + headerShadowVisible: false, + })}> + ( + (canGoBack ? router.back() : router.push(PROJECT_URLS.PROJECT_HOME))}> + + + ), + }} + /> + + ); +} + +export default Layout; diff --git a/app/(app)/project/[id]/review/create.tsx b/app/(app)/project/[id]/review/create.tsx new file mode 100644 index 0000000..bd8edc3 --- /dev/null +++ b/app/(app)/project/[id]/review/create.tsx @@ -0,0 +1,93 @@ +import styled from '@emotion/native'; +import { useCallback, useState } from 'react'; + +import SolidButton from '@/components/common/button/SolidButton'; +import Typography from '@/components/common/typography'; +import SelectCategoryChipList from '@/components/questionnaire/SelectCategoryChipList'; +import { useTabBarEffect } from '@/hooks'; +import { flexDirectionColumn } from '@/styles/common'; + +const MINIMUM_CATEGORY_COUNT = 5; + +function Review() { + useTabBarEffect(); + // const { id } = useLocalSearchParams<{ id: string }>(); + + const [error, setError] = useState(null); + const [selectedCategoryList, setSelectedCategoryList] = useState([]); + + const addCategory = (category: string) => { + if (error) { + setError(null); + } + setSelectedCategoryList([...selectedCategoryList, category]); + }; + const removeCategory = (category: string) => + setSelectedCategoryList(selectedCategoryList.filter((item) => item !== category)); + + const selectCategory = useCallback(() => { + if (selectedCategoryList.length < MINIMUM_CATEGORY_COUNT) { + setError('5개를 선택해주세요'); + return; + } + setError(null); + }, [selectedCategoryList]); + + return ( + + + + + 받고 싶은 리뷰의{`\n`}카테고리 5개를 골라주세요 + + + 카테고리 별로 설문이 구성돼요 + + + + + + + + 다음 + + + ); +} + +const S = { + Container: styled.SafeAreaView` + flex: 1; + gap: 32px; + justify-content: space-between; + padding: 33px 20px 52px; + background: ${({ theme }) => theme.color.Background.Normal}; + `, + WrapperBox: styled.View` + ${flexDirectionColumn}; + gap: 32px; + `, + ReviewTitle: styled.View` + ${flexDirectionColumn}; + gap: 8px; + `, + TitleText: styled(Typography)` + color: ${({ theme }) => theme.color.Label.Normal}; + `, + SubTitleText: styled(Typography)` + color: ${({ theme }) => theme.color.Label.Alternative}; + `, +}; + +export default Review; diff --git a/app/(app)/review/index.tsx b/app/(app)/project/[id]/review/index.tsx similarity index 58% rename from app/(app)/review/index.tsx rename to app/(app)/project/[id]/review/index.tsx index 7a5fbca..538fe70 100644 --- a/app/(app)/review/index.tsx +++ b/app/(app)/project/[id]/review/index.tsx @@ -2,12 +2,12 @@ import { View } from 'react-native'; import Typography from '@/components/common/typography'; -function Review() { +function Page() { return ( - Review + Page ); } -export default Review; +export default Page; diff --git a/app/(app)/project/_layout.tsx b/app/(app)/project/_layout.tsx index c3a07d6..40eebcf 100644 --- a/app/(app)/project/_layout.tsx +++ b/app/(app)/project/_layout.tsx @@ -1,9 +1,10 @@ import { AntDesign, Feather } from '@expo/vector-icons'; import { Stack, useRouter } from 'expo-router'; -import { Platform, Pressable } from 'react-native'; +import { Pressable } from 'react-native'; -import { PROJECT_NAVIGATIONS } from '@/constants'; +import { PROJECT_NAVIGATIONS, PROJECT_URLS } from '@/constants'; import { color } from '@/styles/theme'; +import { isMobile } from '@/utils'; import * as S from './style'; @@ -32,8 +33,8 @@ function Layout() { size={24} /> - {Platform.OS !== 'web' && ( - router.push('/project/create')}> + {isMobile && ( + router.push(PROJECT_URLS.PROJECT_CREATE)}> ( - (canGoBack ? router.back() : router.push('/project'))}> + (canGoBack ? router.back() : router.push(PROJECT_URLS.PROJECT_HOME))}> + ); } diff --git a/app/(app)/project/delete.tsx b/app/(app)/project/delete.tsx deleted file mode 100644 index 06e96ab..0000000 --- a/app/(app)/project/delete.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { View } from 'react-native'; - -import Typography from '@/components/common/typography'; - -function Delete() { - return ( - - Delete - - ); -} - -export default Delete; diff --git a/app/(app)/review/_layout.tsx b/app/(app)/review/_layout.tsx deleted file mode 100644 index 284e9b6..0000000 --- a/app/(app)/review/_layout.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Stack } from 'expo-router'; -import { fontFace } from 'polished'; - -function Layout() { - return ( - - - - - ); -} - -export default Layout; diff --git a/app/(app)/review/create.tsx b/app/(app)/review/create.tsx deleted file mode 100644 index 9b11115..0000000 --- a/app/(app)/review/create.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { View } from 'react-native'; - -import Typography from '@/components/common/typography'; - -function Create() { - return ( - - Create - - ); -} - -export default Create; diff --git a/app/(app)/review/delete.tsx b/app/(app)/review/delete.tsx deleted file mode 100644 index 06e96ab..0000000 --- a/app/(app)/review/delete.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { View } from 'react-native'; - -import Typography from '@/components/common/typography'; - -function Delete() { - return ( - - Delete - - ); -} - -export default Delete; diff --git a/src/components/common/icon/fire-svg.tsx b/src/components/common/icon/fire-svg.tsx deleted file mode 100644 index bfa205b..0000000 --- a/src/components/common/icon/fire-svg.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import Svg, { Path } from 'react-native-svg'; - -type Props = { - size: number; - color: string; -}; - -function FireSvg({ size, color }: Props) { - return ( - - - - ); -} - -export default FireSvg; diff --git a/src/components/onboarding/OnboardingSection/index.tsx b/src/components/onboarding/OnboardingSection/index.tsx index 5ec4a7c..22836fc 100644 --- a/src/components/onboarding/OnboardingSection/index.tsx +++ b/src/components/onboarding/OnboardingSection/index.tsx @@ -14,42 +14,15 @@ function OnboardingSection({ step }: Props) { case 0: return ( - - - - - - - - - + + + + + + + + + ); case 1: diff --git a/src/components/project/ProjectDetail/index.tsx b/src/components/project/ProjectDetail/index.tsx index 7524fd4..a36c6b5 100644 --- a/src/components/project/ProjectDetail/index.tsx +++ b/src/components/project/ProjectDetail/index.tsx @@ -1,10 +1,11 @@ import { AntDesign } from '@expo/vector-icons'; +import { router } from 'expo-router'; import { ScrollView } from 'react-native'; import SolidButton from '@/components/common/button/SolidButton'; import SlideBar from '@/components/common/slide-bar'; import Typography from '@/components/common/typography'; -import { COMPONENT_SIZE } from '@/constants'; +import { COMPONENT_SIZE, PROJECT_URLS } from '@/constants'; import { shadow } from '@/styles/shadow'; import { color } from '@/styles/theme'; import { getSize } from '@/utils'; @@ -18,6 +19,7 @@ export type ProjectDetailType = { profile: string; startDate: string; endDate: string; + hasReviewCard: boolean; review_count: number; userList: UserType[]; link: string; @@ -29,10 +31,11 @@ type UserType = { }; type Props = { + id: string; data: ProjectDetailType; }; -function ProjectDetail({ data }: Props) { +function ProjectDetail({ id, data }: Props) { return ( - 설문지 만들기 + + router.push({ pathname: PROJECT_URLS.PROJECT_REVIEW_CREATE, params: { id } }) + } + full> + 설문지 만들기 + ); diff --git a/src/components/project/ProjectItem/index.tsx b/src/components/project/ProjectItem/index.tsx index 746b1ed..e63997d 100644 --- a/src/components/project/ProjectItem/index.tsx +++ b/src/components/project/ProjectItem/index.tsx @@ -4,6 +4,7 @@ import SlideBar from '@/components/common/slide-bar'; import Typography from '@/components/common/typography'; import ProjectImage from '@/components/project/ProjectImage'; import type { ProjectItemType } from '@/components/project/ProjectList'; +import { PROJECT_URLS } from '@/constants'; import { color } from '@/styles/theme'; import * as S from './style'; @@ -13,7 +14,7 @@ function ProjectItem({ name, member_num, profile, review_count, id }: ProjectIte return ( router.push({ pathname: '/project/detail/[id]', params: { id } })}> + onPress={() => router.push({ pathname: PROJECT_URLS.PROJECT_DETAIL, params: { id } })}> ) { const { checkValue, setCheckValue } = useContext(ListContext); const isChecked = checkValue === value; return ( - + setCheckValue(value)} + $isChecked={isChecked}> {children} - setCheckValue(value)}> + css` border: 1px solid ${theme.color.Primary.Normal}; `; -export const ItemContainer = styled.View<{ $isChecked: boolean }>` +export const ItemContainer = styled.Pressable<{ $isChecked: boolean }>` display: flex; flex-direction: row; align-items: center; diff --git a/src/components/questionnaire/SelectCategoryChipList/index.tsx b/src/components/questionnaire/SelectCategoryChipList/index.tsx new file mode 100644 index 0000000..2a53ed9 --- /dev/null +++ b/src/components/questionnaire/SelectCategoryChipList/index.tsx @@ -0,0 +1,73 @@ +import ErrorText from '@/components/common/error-text'; +import Category from '@/components/questionnaire/category'; + +import * as S from './style'; + +type Props = { + item: string[]; + addItem: (item: string) => void; + removeItem: (item: string) => void; + error: string | null; +}; + +function SelectCategoryChipList({ item, addItem, removeItem, error }: Props) { + const isActive = (category: string) => item.includes(category); + return ( + + + (isActive('기술') ? removeItem('기술') : addItem('기술'))} + /> + (isActive('성실성') ? removeItem('성실성') : addItem('성실성'))} + /> + (isActive('배려심') ? removeItem('배려심') : addItem('배려심'))} + /> + + isActive('아이데이션') ? removeItem('아이데이션') : addItem('아이데이션') + } + /> + (isActive('문서화') ? removeItem('문서화') : addItem('문서화'))} + /> + (isActive('문제해결') ? removeItem('문제해결') : addItem('문제해결'))} + /> + (isActive('리더십') ? removeItem('리더십') : addItem('리더십'))} + /> + (isActive('팔로워십') ? removeItem('팔로워십') : addItem('팔로워십'))} + /> + + isActive('커뮤니케이션') ? removeItem('커뮤니케이션') : addItem('커뮤니케이션') + } + /> + + {error && } + + ); +} + +export default SelectCategoryChipList; diff --git a/src/components/questionnaire/SelectCategoryChipList/style.ts b/src/components/questionnaire/SelectCategoryChipList/style.ts new file mode 100644 index 0000000..0023927 --- /dev/null +++ b/src/components/questionnaire/SelectCategoryChipList/style.ts @@ -0,0 +1,12 @@ +import styled from '@emotion/native'; + +import { flexDirectionColumn } from '@/styles/common'; + +export const Container = styled.View` + ${flexDirectionColumn}; + gap: 12px; +`; +export const Wrapper = styled.View` + flex-flow: row wrap; + gap: 8px; +`; diff --git a/src/components/questionnaire/category/index.tsx b/src/components/questionnaire/category/index.tsx index 555488a..23910ad 100644 --- a/src/components/questionnaire/category/index.tsx +++ b/src/components/questionnaire/category/index.tsx @@ -1,4 +1,5 @@ import { memo } from 'react'; +import type { PressableProps } from 'react-native'; import CategoryIcon from '@/components/common/icon/category-icon'; import Typography from '@/components/common/typography'; @@ -15,20 +16,20 @@ type Props = { hasIcon?: boolean; hasShadow?: boolean; category: CategoryType; -}; +} & PressableProps; function Category({ category, - onboarding = false, hasIcon = true, isActive = false, hasShadow = false, + ...rest }: Props) { return ( + style={hasShadow && shadow[2]} + {...rest}> {hasIcon && ( diff --git a/src/components/questionnaire/category/style.ts b/src/components/questionnaire/category/style.ts index 8e5bd52..e18e1d3 100644 --- a/src/components/questionnaire/category/style.ts +++ b/src/components/questionnaire/category/style.ts @@ -3,19 +3,18 @@ import styled from '@emotion/native'; import { flexDirectionRowItemsCenter } from '@/styles/common'; -export const Container = styled.View<{ - $onboarding: boolean; +export const Container = styled.Pressable<{ $isActive: ReactNativeStyle | boolean; }>` box-sizing: border-box; ${({ $isActive }) => $isActive && $isActive} ${flexDirectionRowItemsCenter}; gap: 6px; + align-self: flex-start; width: fit-content; height: 48px; padding: 12px 16px; - background: ${({ theme, $isActive, $onboarding }) => - $onboarding ? theme.color.Background.Normal : !$isActive && theme.color.Background.Alternative}; + background: ${({ theme, $isActive }) => !$isActive && theme.color.Background.Alternative}; border: ${({ theme, $isActive }) => !$isActive && `1px solid ${theme.color.Background.Alternative}`}; border-radius: 4px; diff --git a/src/components/review/Tag/index.tsx b/src/components/review/Tag/index.tsx index 53c24d6..0f0b695 100644 --- a/src/components/review/Tag/index.tsx +++ b/src/components/review/Tag/index.tsx @@ -1,24 +1,12 @@ import CategoryIcon from '@/components/common/icon/category-icon'; import Typography from '@/components/common/typography'; -import { CategoryStyle } from '@/styles/category'; import { shadow } from '@/styles/shadow'; +import { TagEnum, TagStyle } from '@/styles/tag'; import { color } from '@/styles/theme'; import type { CategoryType } from '@/types/category'; import * as S from './style'; -enum TagEnum { - '걸어다니는 위키' = '기술', - '아이디어 화수분' = '아이데이션', - '글도 잘쓰는 일잘러' = '문서화', - '확신의 J' = '문제해결', - '책임감 넘치는 리더' = '리더십', - '책임감 넘치는 팀원' = '팔로워십', - '갈등을 못참는 박애주의자' = '커뮤니케이션', - '성실함의 아이콘' = '성실성', - '몸에 밴 배려' = '배려심', -} - type Props = { tag: keyof typeof TagEnum; hasIcon?: boolean; @@ -30,7 +18,7 @@ function Tag({ tag, hasIcon = true, isActive = false, hasShadow = false }: Props const category: CategoryType = TagEnum[tag]; return ( {hasIcon && ( diff --git a/src/components/review/Tag/style.ts b/src/components/review/Tag/style.ts index 6f21249..b91f7c4 100644 --- a/src/components/review/Tag/style.ts +++ b/src/components/review/Tag/style.ts @@ -10,6 +10,7 @@ export const Container = styled.View<{ ${({ $isActive }) => $isActive && $isActive} ${flexDirectionRowItemsCenter}; gap: 6px; + align-items: flex-start; width: fit-content; height: 48px; padding: 12px 16px; diff --git a/src/constants/navigations.ts b/src/constants/navigations.ts index 55f8359..29db173 100644 --- a/src/constants/navigations.ts +++ b/src/constants/navigations.ts @@ -1,7 +1,6 @@ export const MAIN_NAVIGATIONS = { HOME: 'index', PROJECT: 'project', - REVIEW: 'review', MY: 'my', } as const; @@ -17,6 +16,7 @@ export const PROJECT_NAVIGATIONS = { HOME: 'index', CREATE: 'create', DELETE: 'delete', + REVIEW: '[id]/review', }; export const REVIEW_NAVIGATIONS = { diff --git a/src/constants/siteUrls.ts b/src/constants/siteUrls.ts index 5b26eae..0ec51ff 100644 --- a/src/constants/siteUrls.ts +++ b/src/constants/siteUrls.ts @@ -3,3 +3,11 @@ export const SITE_URLS = { SIGN_IN: '/sign-in', ON_BOARDING: '/onboarding', } as const; + +export const PROJECT_URLS = { + PROJECT_HOME: '/project', + PROJECT_CREATE: '/project/create', + PROJECT_DETAIL: '/project/[id]/detail', + PROJECT_REVIEW: '/project/[id]/review', + PROJECT_REVIEW_CREATE: '/project/[id]/review/create', +} as const; diff --git a/src/styles/category.ts b/src/styles/category.ts index 1bb7f79..3bf0823 100644 --- a/src/styles/category.ts +++ b/src/styles/category.ts @@ -6,39 +6,39 @@ import type { CategoryType } from '@/types/category'; export const CategoryStyle: Record = { 기술: css` - background: ${color.Blue['95']}; - border: 1px solid ${color.Blue['90']}; + background: ${color.Blue['99']}; + border: 1px solid ${color.Blue['55']}; `, 성실성: css` - background: ${color.Pink['95']}; - border: 1px solid ${color.Pink['90']}; + background: ${color.Pink['99']}; + border: 1px solid ${color.Pink['50']}; `, 아이데이션: css` - background: ${color.Orange['95']}; - border: 1px solid ${color.Orange['90']}; + background: ${color.Orange['99']}; + border: 1px solid ${color.Orange['50']}; `, 문서화: css` - background: ${color.Red['95']}; - border: 1px solid ${color.Red['90']}; + background: ${color.Red['99']}; + border: 1px solid ${color.Red['50']}; `, 커뮤니케이션: css` - background: ${color.LightBlue['95']}; - border: 1px solid ${color.LightBlue['90']}; + background: ${color.LightBlue['99']}; + border: 1px solid ${color.LightBlue['50']}; `, 문제해결: css` - background: ${color.Violet['95']}; - border: 1px solid ${color.Violet['90']}; + background: ${color.Violet['99']}; + border: 1px solid ${color.Violet['50']}; `, 리더십: css` - background: #e6fad9; - border: 1px solid #c3f0a3; + background: #f7fff1; + border: 1px solid #93ec67; `, 배려심: css` - background: ${color.Purple['95']}; - border: 1px solid ${color.Purple['90']}; + background: ${color.Purple['99']}; + border: 1px solid ${color.Purple['50']}; `, 팔로워십: css` - background: #d9fade; - border: 1px solid #a3f0b8; + background: #edfff0; + border: 1px solid #4af377; `, } as const; diff --git a/src/styles/tag.ts b/src/styles/tag.ts new file mode 100644 index 0000000..e9abd5f --- /dev/null +++ b/src/styles/tag.ts @@ -0,0 +1,56 @@ +import type { ReactNativeStyle } from '@emotion/native'; +import { css } from '@emotion/native'; + +import { color } from '@/styles/theme'; +import type { CategoryType } from '@/types/category'; + +export enum TagEnum { + '걸어다니는 위키' = '기술', + '아이디어 화수분' = '아이데이션', + '글도 잘쓰는 일잘러' = '문서화', + '확신의 J' = '문제해결', + '책임감 넘치는 리더' = '리더십', + '책임감 넘치는 팀원' = '팔로워십', + '갈등을 못참는 박애주의자' = '커뮤니케이션', + '성실함의 아이콘' = '성실성', + '몸에 밴 배려' = '배려심', +} + +export const TagStyle: Record = { + 기술: css` + background: ${color.Blue['95']}; + border: 1px solid ${color.Blue['90']}; + `, + 성실성: css` + background: ${color.Pink['95']}; + border: 1px solid ${color.Pink['90']}; + `, + 아이데이션: css` + background: ${color.Orange['95']}; + border: 1px solid ${color.Orange['90']}; + `, + 문서화: css` + background: ${color.Red['95']}; + border: 1px solid ${color.Red['90']}; + `, + 커뮤니케이션: css` + background: ${color.LightBlue['95']}; + border: 1px solid ${color.LightBlue['90']}; + `, + 문제해결: css` + background: ${color.Violet['95']}; + border: 1px solid ${color.Violet['90']}; + `, + 리더십: css` + background: #e6fad9; + border: 1px solid #c3f0a3; + `, + 배려심: css` + background: ${color.Purple['95']}; + border: 1px solid ${color.Purple['90']}; + `, + 팔로워십: css` + background: #d9fade; + border: 1px solid #a3f0b8; + `, +} as const;