Feat/#60 QuestionnaireCheckListSkeleton을 추가합니다. (#62)

* refactor: 폴더 구조를 변경합니다.

* feat: QuestionnaireCheckListSkeleton를 추가합니다.

app/(app)/project/create.tsx

@@ -1,4 +1,4 @@
-import { SimpleLineIcons } from '@expo/vector-icons';
+import { AntDesign } from '@expo/vector-icons';
 import type { BottomSheetModal } from '@gorhom/bottom-sheet';
 import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet';
 import type { DateTimePickerEvent } from '@react-native-community/datetimepicker';
@@ -41,8 +41,6 @@ function Create() {
 
   const sheetHeight = useMemo(() => getSize.screenHeight * 0.75, []);
 
-  const snapPoints = useMemo(() => [sheetHeight], []);
-
   const openUserListSheet = useCallback(() => {
     setUserListSheetOpen(true);
     userListBottomSheetRef.current?.snapToIndex(0);
@@ -182,8 +180,8 @@ function Create() {
               <S.UserListSheetOpenButtonContainer>
                 <InputField
                   icon={
-                    <SimpleLineIcons
-                      name='magnifier'
+                    <AntDesign
+                      name='search1'
                       style={{ flexShrink: 1, width: 20, height: 20 }}
                       size={20}
                     />
@@ -249,7 +247,7 @@ function Create() {
         ref={userListBottomSheetRef}
         index={-1}
         enablePanDownToClose
-        snapPoints={snapPoints}>
+        snapPoints={[sheetHeight]}>
         <BottomSheetView style={{ flex: 1 }}>
           {userListSheetOpen && (
             <SearchUserList

src/components/common/date-input/index.tsx

@@ -16,11 +16,13 @@ function DateInput({ onPress, date }: Props) {
     <S.Container
       style={shadow[2]}
       onPress={onPress}>
-      <AntDesign
-        name='calendar'
-        size={24}
-        color='#979797'
-      />
+      <S.IconBox>
+        <AntDesign
+          name='calendar'
+          size={20}
+          color='#979797'
+        />
+      </S.IconBox>
       <Typography>{dayjs(date).format('YYYY-MM-DD')}</Typography>
     </S.Container>
   );

src/components/common/date-input/style.ts

@@ -10,3 +10,7 @@ export const Container = styled.Pressable`
   background: ${({ theme }) => theme.color.Background.Normal};
   border-radius: 8px;
 `;
+
+export const IconBox = styled.View`
+  ${flexDirectionRowItemsCenter};
+`;

src/components/common/icon/radio-icon.tsx

@@ -0,0 +1,53 @@
+import Svg, { Circle, Rect } from 'react-native-svg';
+
+type Props = {
+  activeColor: string;
+  inActiveColor: string;
+  isChecked: boolean;
+};
+
+function RadioIcon({ activeColor, inActiveColor, isChecked }: Props) {
+  if (isChecked) {
+    return (
+      <Svg
+        width='16'
+        height='17'
+        viewBox='0 0 16 17'
+        fill='none'>
+        <Circle
+          cx='7.95894'
+          cy='8.49752'
+          r='7.29'
+          stroke={activeColor}
+          stroke-width='1.215'
+        />
+        <Circle
+          cx='7.95894'
+          cy='8.49775'
+          r='4.05'
+          fill={activeColor}
+        />
+      </Svg>
+    );
+  } else {
+    return (
+      <Svg
+        width='16'
+        height='16'
+        viewBox='0 0 16 16'
+        fill='none'>
+        <Rect
+          x='0.668945'
+          y='0.807617'
+          width='14.58'
+          height='14.58'
+          rx='7.29'
+          stroke={inActiveColor}
+          stroke-width='1.215'
+        />
+      </Svg>
+    );
+  }
+}
+
+export default RadioIcon;

src/components/common/input-field/style.ts

@@ -1,7 +1,7 @@
 import styled, { css } from '@emotion/native';
 import type { Theme } from '@emotion/react';
 
-import { flexDirectionRow } from '@/styles/common';
+import { flexDirectionRow, flexDirectionRowItemsCenter } from '@/styles/common';
 
 const errorStyle = (theme: Theme) => css`
   border-color: ${theme.color.Status.Error};
@@ -24,7 +24,7 @@ export const Container = styled.View<{
 }>`
   ${({ $isError, theme }) => $isError && errorStyle(theme)};
   ${({ $disabled, theme }) => $disabled && disabledStyle(theme)};
-  ${flexDirectionRow};
+  ${flexDirectionRowItemsCenter};
   gap: 8px;
   padding: 18px 16px;
   background-color: ${({ theme }) => theme.color.Background.Normal};

src/components/questionnaire/QuestionnaireCheckList/index.tsx

@@ -0,0 +1,80 @@
+import type { PropsWithChildren } from 'react';
+import { useContext, useState } from 'react';
+import { createContext } from 'react';
+import { memo } from 'react';
+
+import RadioIcon from '@/components/common/icon/radio-icon';
+import Typography from '@/components/common/typography';
+import { color } from '@/styles/theme';
+import type { CategoryType } from '@/types/category';
+
+import CategoryChip from '../category-chip';
+import * as S from './style';
+
+type ItemProps = {
+  value: string | number;
+};
+
+const ListContext = createContext<{
+  checkValue: string | null | number;
+  setCheckValue: (newValue: string | null | number) => void;
+}>({
+  checkValue: null,
+  setCheckValue: () => null,
+});
+
+function Item({ children, value }: PropsWithChildren<ItemProps>) {
+  const { checkValue, setCheckValue } = useContext(ListContext);
+  const isChecked = checkValue === value;
+  return (
+    <S.ItemContainer $isChecked={isChecked}>
+      <S.ItemValue>{children}</S.ItemValue>
+      <S.RadioButton onPress={() => setCheckValue(value)}>
+        <RadioIcon
+          activeColor={color.Primary.Normal}
+          inActiveColor={color.Line.Normal}
+          isChecked={isChecked}
+        />
+      </S.RadioButton>
+    </S.ItemContainer>
+  );
+}
+
+type QuestionnaireCheckListProps = {
+  title: string;
+  category: CategoryType;
+  initialCheckValue?: string | number;
+};
+
+function CheckList({
+  title,
+  category,
+  initialCheckValue,
+  children,
+}: PropsWithChildren<QuestionnaireCheckListProps>) {
+  const [checkValue, setCheckValue] = useState<null | string | number>(() =>
+    initialCheckValue ? initialCheckValue : null
+  );
+  return (
+    <ListContext.Provider
+      value={{
+        checkValue,
+        setCheckValue,
+      }}>
+      <S.Container>
+        <CategoryChip category={category} />
+        <Typography
+          variant='Heading1'
+          fontWeight='semiBold'
+          color={color.Label.Normal}>
+          {title}
+        </Typography>
+        <S.ListContainer>{children}</S.ListContainer>
+      </S.Container>
+    </ListContext.Provider>
+  );
+}
+
+const QuestionnaireCheckList = Object.assign(CheckList, { Item: memo(Item) });
+
+export default QuestionnaireCheckList;

src/components/questionnaire/QuestionnaireCheckList/style.ts

@@ -0,0 +1,49 @@
+import styled, { css } from '@emotion/native';
+import type { Theme } from '@emotion/react';
+
+import { flexDirectionColumn, flexDirectionRowItemsCenter } from '@/styles/common';
+
+export const Container = styled.View`
+  ${flexDirectionColumn};
+  gap: 20px;
+  width: 272px;
+  padding: 28px 16px;
+  background: ${({ theme }) => theme.color.Background.Normal};
+  border-radius: 13px;
+`;
+
+const inActiveStyle = (theme: Theme) => css`
+  background: ${theme.color.Background.Normal};
+  border: 1px solid ${theme.color.Line.Normal};
+`;
+
+const activeStyle = (theme: Theme) => css`
+  background: ${theme.color.Blue['95']};
+  border: 1px solid ${theme.color.Primary.Normal};
+`;
+
+export const ItemContainer = styled.View<{ $isChecked: boolean }>`
+  ${flexDirectionRowItemsCenter};
+  ${({ theme, $isChecked }) => ($isChecked ? activeStyle(theme) : inActiveStyle(theme))};
+  justify-content: space-between;
+  padding: 13px 28px 13px 13px;
+  border-radius: 7px;
+`;
+
+export const ListContainer = styled.View`
+  ${flexDirectionColumn};
+  gap: 8px;
+`;
+
+export const ItemValue = styled.View`
+  ${flexDirectionColumn};
+`;
+
+export const RadioButton = styled.Pressable`
+  ${flexDirectionRowItemsCenter};
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  padding: 13px;
+`;

src/components/questionnaire/QuestionnaireCheckListSkeleton/QuestionnaireCheckListSkeleton.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+
+import { color } from '@/styles/theme';
+
+import QuestionnaireCheckListSkeleton from './';
+
+const SkeletonMeta: Meta<typeof QuestionnaireCheckListSkeleton> = {
+  title: 'questionnaire/QuestionnaireCheckListSkeleton',
+  component: QuestionnaireCheckListSkeleton,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default SkeletonMeta;
+
+export const Primary: StoryObj<typeof QuestionnaireCheckListSkeleton> = {
+  render: () => {
+    return (
+      <View style={{ flex: 1, backgroundColor: color.Background.Alternative, padding: 10 }}>
+        <QuestionnaireCheckListSkeleton />
+      </View>
+    );
+  },
+};

src/components/questionnaire/QuestionnaireCheckListSkeleton/index.tsx

@@ -0,0 +1,44 @@
+import Skeleton from '@/components/common/skeleton';
+import QuestionnaireCheckList from '@/components/questionnaire/QuestionnaireCheckList';
+
+import * as S from './style';
+
+function SkeletonItem() {
+  return (
+    <S.SkeletonBox>
+      <Skeleton
+        variant='rounded'
+        width='60%'
+        height={14}
+      />
+      <Skeleton
+        variant='rounded'
+        width='30%'
+        height={14}
+      />
+    </S.SkeletonBox>
+  );
+}
+
+function QuestionnaireCheckListSkeleton() {
+  return (
+    <QuestionnaireCheckList
+      title='프로님은 회의 중 의견을 나눌때 어땠나요?'
+      category='기술'>
+      <QuestionnaireCheckList.Item value={0}>
+        <SkeletonItem />
+      </QuestionnaireCheckList.Item>
+      <QuestionnaireCheckList.Item value={1}>
+        <SkeletonItem />
+      </QuestionnaireCheckList.Item>
+      <QuestionnaireCheckList.Item value={2}>
+        <SkeletonItem />
+      </QuestionnaireCheckList.Item>
+      <QuestionnaireCheckList.Item value={3}>
+        <SkeletonItem />
+      </QuestionnaireCheckList.Item>
+    </QuestionnaireCheckList>
+  );
+}
+
+export default QuestionnaireCheckListSkeleton;

src/components/questionnaire/QuestionnaireCheckListSkeleton/style.ts

@@ -0,0 +1,8 @@
+import styled from '@emotion/native';
+
+import { flexDirectionColumnCenter } from '@/styles/common';
+
+export const SkeletonBox = styled.View`
+  ${flexDirectionColumnCenter};
+  gap: 4px;
+`;

src/components/common/category-chip/CategoryChip.stories.tsx → src/components/questionnaire/category-chip/CategoryChip.stories.tsx

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import CategoryChip from '@/components/common/category-chip/index';
 import Storybook from '@/components/common/storybook';
+import CategoryChip from '@/components/questionnaire/category-chip/index';
 
 const CategoryChipMeta: Meta<typeof CategoryChip> = {
-  title: 'category/CategoryChip',
+  title: 'questionnaire/CategoryChip',
   component: CategoryChip,
   argTypes: {
     category: {

src/components/common/category/Category.stories.tsx → src/components/questionnaire/category/Category.stories.tsx

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import Category from '@/components/common/category/index';
 import Storybook from '@/components/common/storybook';
+import Category from '@/components/questionnaire/category/index';
 
 const CategoryMeta: Meta<typeof Category> = {
-  title: 'category/Category',
+  title: 'questionnaire/Category',
   component: Category,
   argTypes: {
     category: {

src/components/common/category/style.ts → src/components/questionnaire/category/style.ts

@@ -22,6 +22,7 @@ export const Container = styled.View<{
 `;
 
 export const IconWrapper = styled.View`
+  ${flexDirectionRowItemsCenter};
   width: 24px;
   height: 24px;
 `;