Merge branch 'develop/fe' of https://github.com/woowacourse-teams/202…

…4-touroot into feature/fe/#339

frontend/.storybook/preview.tsx

@@ -21,13 +21,13 @@ initialize(
   handlers,
 );
 
-const rootStyle = {
+const getRootStyle = (storyId: string) => ({
   width: "48rem",
-  padding: "1.6rem",
+  padding: storyId.startsWith("common-header--") ? 0 : "1.6rem",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-};
+});
 
 const preview: Preview = {
   parameters: {
@@ -39,14 +39,14 @@ const preview: Preview = {
     },
   },
   decorators: [
-    (Story) => {
+    (Story, context) => {
       const queryClient = new QueryClient();
       return (
         <QueryClientProvider client={queryClient}>
           <ThemeProvider theme={theme}>
             <Global styles={globalStyle} />
             <div id="root">
-              <div style={rootStyle}>
+              <div style={getRootStyle(context.id)}>
                 <Story />
               </div>
             </div>

frontend/__tests__/travelPlanRegisterPage.test.tsx

@@ -163,35 +163,35 @@ describe("여행 계획 등록 페이지 테스트", () => {
       expect(result.current.travelPlanDays[0].places).toHaveLength(0);
     });
 
-    test("장소 설명을 변경할 수 있다.", () => {
-      // given
-      const { result } = renderHook(() => useTravelPlanDays([]));
-      const newDescription = "경복궁 너무 좋았다!";
-
-      const newPlace: Pick<TravelPlanPlace, "placeName" | "position"> = {
-        placeName: "경복궁",
-        position: {
-          lat: 37.5796,
-          lng: 126.977,
-        },
-      };
-
-      // when
-      act(() => {
-        result.current.onAddDay();
-      });
-
-      act(() => {
-        result.current.onAddPlace(0, newPlace);
-      });
-
-      act(() => {
-        result.current.onChangePlaceDescription(newDescription, 0, 0);
-      });
-
-      // then
-      expect(result.current.travelPlanDays[0].places[0].description).toBe(newDescription);
-    });
+    // test("장소 설명을 변경할 수 있다.", () => {
+    //   // given
+    //   const { result } = renderHook(() => useTravelPlanDays([]));
+    //   const newDescription = "경복궁 너무 좋았다!";
+
+    //   const newPlace: Pick<TravelPlanPlace, "placeName" | "position"> = {
+    //     placeName: "경복궁",
+    //     position: {
+    //       lat: 37.5796,
+    //       lng: 126.977,
+    //     },
+    //   };
+
+    //   // when
+    //   act(() => {
+    //     result.current.onAddDay();
+    //   });
+
+    //   act(() => {
+    //     result.current.onAddPlace(0, newPlace);
+    //   });
+
+    //   act(() => {
+    //     result.current.onChangePlaceDescription(newDescription, 0, 0);
+    //   });
+
+    //   // then
+    //   expect(result.current.travelPlanDays[0].places[0].description).toBe(newDescription);
+    // });
   });
 
   describe("여행 계획 등록 테스트", () => {

frontend/__tests__/utils/createInfiniteTravelogueHook.tsx

@@ -17,6 +17,6 @@ export const wrapper = ({ children }: React.PropsWithChildren) => (
 );
 
 export const createInfiniteTravelogueHook = () =>
-  renderHook(() => useInfiniteTravelogues(), {
+  renderHook(() => useInfiniteTravelogues([]), {
     wrapper,
   });

frontend/src/assets/svg/index.ts

@@ -20,3 +20,6 @@ export { default as KaKao } from "./kakao.svg";
 export { default as KoreanLogo } from "./korean-logo.svg";
 export { default as Plus } from "./plus.svg";
 export { default as tturiUrl } from "./tturi.svg?url";
+export { default as MapIcon } from "./map-icon.svg";
+export { default as HomeIcon } from "./home-icon.svg";
+

frontend/src/components/common/Box/Box.styled.ts

@@ -6,8 +6,8 @@ export const Box = styled.div`
   align-items: center;
 
   width: 100%;
-  height: 3.98rem;
-  padding-left: 1.6rem;
+  height: 4.8rem;
+  padding: 0 1.6rem;
   border: 1px solid ${({ theme }) => theme.colors.border};
   border-radius: 4px;
 `;

frontend/src/components/common/Box/Box.tsx

@@ -4,25 +4,16 @@ import * as S from "./Box.styled";
 
 interface BoxProps {
   placeName: string;
-  tags: string[];
 }
 
 const Box = ({
   children,
   placeName,
-  tags,
   ...props
 }: React.ComponentPropsWithoutRef<"div"> & React.PropsWithChildren<BoxProps>) => {
   return (
     <S.Box {...props}>
-      <>
-        <S.PlaceName>{placeName}</S.PlaceName>
-        <S.TagList>
-          {tags.map((tag) => (
-            <S.Tag key={tag}>{`#${tag}`}</S.Tag>
-          ))}
-        </S.TagList>
-      </>
+      <S.PlaceName>{placeName}</S.PlaceName>
       {children}
     </S.Box>
   );

frontend/src/components/common/Calendar/Calendar.stories.tsx

@@ -55,14 +55,15 @@ export const DayPicker = {
 
     return (
       <div>
-        <h1>여행 기간</h1>
+        <h1 style={{ fontWeight: "700" }}>여행 기간</h1>
         <Input
           value={startDate ? startDate.toLocaleDateString() : ""}
           onClick={handleInputClick}
           readOnly
           placeholder="시작일 선택"
+          style={{ marginTop: "0.8rem" }}
         />
-        <div style={{ width: "300px", position: "relative" }}>
+        <div style={{ width: "300px", position: "relative", margin: "1.6rem 0" }}>
           {isShowCalendar && (
             <Calendar
               onClose={() => setIsShowCalendar((prev) => !prev)}

frontend/src/components/common/Calendar/Calendar.tsx

@@ -15,7 +15,11 @@ interface CalendarProps {
   onClose: () => void;
 }
 
-const Calendar = ({ onSelectDate, onClose }: CalendarProps) => {
+const Calendar = ({
+  onSelectDate,
+  onClose,
+  ...props
+}: CalendarProps & React.ComponentPropsWithoutRef<"div">) => {
   const today = new Date();
   today.setHours(0, 0, 0, 0);
 
@@ -30,7 +34,7 @@ const Calendar = ({ onSelectDate, onClose }: CalendarProps) => {
   } = useCalendar();
 
   return (
-    <S.Layout ref={calendarRef}>
+    <S.Layout ref={calendarRef} {...props}>
       <S.HeaderContainer>
         <IconButton
           size="12"

frontend/src/components/common/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import Checkbox from "./Checkbox";
+
+const meta = {
+  title: "common/Checkbox",
+  component: Checkbox,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    isChecked: {
+      control: {
+        type: "boolean",
+      },
+      description: "체크 박스의 체크 상태",
+    },
+    onChange: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+
+  tags: ["autodocs"],
+  args: {
+    onChange: fn(),
+  },
+  decorators: [(Story) => <Story />],
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const NonCheck: Story = {
+  args: {
+    isChecked: false,
+  },
+};
+
+export const Check = {
+  args: {
+    isChecked: true,
+  },
+};

frontend/src/components/common/Checkbox/Checkbox.styled.ts

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+
+import { PRIMITIVE_COLORS } from "@styles/tokens";
+
+export const Layout = styled.label<{ $isChecked: boolean }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: ${({ theme, $isChecked }) => ($isChecked ? "none" : `1px solid ${theme.colors.border}`)};
+  border-radius: 4px;
+
+  background-color: ${({ $isChecked, theme }) =>
+    $isChecked ? theme.colors.primary : PRIMITIVE_COLORS.white};
+`;
+
+export const Checkbox = styled.input`
+  display: none;
+`;

frontend/src/components/common/Checkbox/Checkbox.tsx

@@ -0,0 +1,23 @@
+import Icon from "@components/common/Icon/Icon";
+
+import { PRIMITIVE_COLORS } from "@styles/tokens";
+
+import * as S from "./Checkbox.styled";
+
+interface CheckboxProps {
+  isChecked: boolean;
+}
+
+const Checkbox = ({
+  isChecked,
+  ...props
+}: React.InputHTMLAttributes<HTMLInputElement> & CheckboxProps) => {
+  return (
+    <S.Layout $isChecked={isChecked ?? false}>
+      <S.Checkbox type="checkbox" {...props} />
+      {isChecked && <Icon size="15" color={PRIMITIVE_COLORS.white} iconType="check" />}
+    </S.Layout>
+  );
+};
+
+export default Checkbox;

frontend/src/components/common/Chip/Chip.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Chip from "./Chip";
+
+const meta = {
+  title: "common/Chip",
+  component: Chip,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: "투룻에서 사용하는 칩 컴포넌트로, isSelected로 색상 구분",
+      },
+    },
+  },
+  argTypes: {
+    label: {
+      description: "태그 라벨",
+      control: {
+        type: "select",
+      },
+      options: ["🏡 가족", "🐾 반려동물", "⛱️ 여름", "💕 연인", "🍴 맛집", "🚶 도보"],
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    isSelected: false,
+    label: "🐾 반려동물",
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    isSelected: true,
+    label: "🐾 반려동물",
+  },
+};

frontend/src/components/common/Chip/Chip.styled.ts

@@ -0,0 +1,34 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+import theme from "@styles/theme";
+import { PRIMITIVE_COLORS } from "@styles/tokens";
+
+const getButtonColorStyling = (isSelected: boolean) => {
+  if (isSelected) {
+    return css`
+      border: 0.1rem solid ${PRIMITIVE_COLORS.blue[200]};
+
+      background-color: ${PRIMITIVE_COLORS.blue[50]};
+
+      color: ${theme.colors.primary};
+    `;
+  } else {
+    return css`
+      border: 0.1rem solid ${theme.colors.border};
+
+      background-color: ${PRIMITIVE_COLORS.white};
+
+      color: ${theme.colors.text.secondary};
+    `;
+  }
+};
+
+export const Chip = styled.li<{ $isSelected: boolean }>`
+  padding: 0.8rem 1.6rem;
+  border-radius: 1rem;
+
+  line-height: 1;
+
+  ${({ $isSelected }) => getButtonColorStyling($isSelected)};
+`;