chore(web): Add storytelling static content of left panel

web/src/beta/components/Icon/icons.ts

@@ -56,9 +56,10 @@ import Logout from "./Icons/logout.svg";
 import WorkspaceAdd from "./Icons/workspaceAdd.svg";
 import Workspaces from "./Icons/workspaces.svg";
 
-// Square
+// StoryTelling
 import Square from "./Icons/square.svg";
-import TwoRectangle from "./Icons/two-rectangle.svg";
+import Swiper from "./Icons/swiper.svg";
+import Book from "./Icons/book.svg";
 
 // Plus
 import Plus from "./Icons/plus.svg";
@@ -90,9 +91,10 @@ export default {
   playRight: PlayRight,
   playLeft: PlayLeft,
   square: Square,
+  swiper: Swiper,
+  book: Book,
   plus: Plus,
   timeline: Timeline,
-  twoRectangle: TwoRectangle,
   actionbutton: ActionButton,
   audio: Audio,
   editIcon: EditIcon,

web/src/beta/components/Icon/index.tsx

@@ -11,7 +11,7 @@ export type Icons = keyof typeof Icons;
 
 export type Props = {
   className?: string;
-  icon?: string;
+  icon?: string | Icons;
   size?: string | number;
   alt?: string;
   color?: string;
@@ -99,7 +99,7 @@ const StyledSvg = styled(SVG)<{
   width: ${({ size }) => size};
   height: ${({ size }) => size};
   color: ${({ color }) => color};
-  ${({ stroke }) => `stroke: ${stroke};`}
+  ${({ stroke }) => stroke && `stroke: ${stroke};`}
   transition-property: color, background;
 `;
 

web/src/beta/features/Editor/SidePanel/index.stories.tsx

@@ -0,0 +1,47 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import SidePanel from ".";
+
+const meta: Meta<typeof SidePanel> = {
+  component: SidePanel,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SidePanel>;
+
+export const Default: Story = {
+  render: args => (
+    <div style={{ height: "100vh" }}>
+      <SidePanel {...args} />
+    </div>
+  ),
+  args: {
+    location: "left",
+    contents: [
+      {
+        id: "Dummy1",
+        title: "Dummy1",
+        children: (
+          <>
+            {[...Array(100)].map((_, i) => (
+              <div key={i}>scrollable / {i}</div>
+            ))}
+          </>
+        ),
+      },
+      {
+        id: "Dummy2",
+        title: "Dummy2",
+        maxHeight: "33%",
+        children: (
+          <>
+            {[...Array(100)].map((_, i) => (
+              <div key={i}>scrollable / {i}</div>
+            ))}
+          </>
+        ),
+      },
+    ],
+  },
+};

web/src/beta/features/Editor/SidePanel/index.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
 
 import { styled } from "@reearth/services/theme";
 
@@ -17,20 +17,20 @@ const SidePanel: React.FC<Props> = ({ location, contents }) => {
   return (
     <Wrapper location={location}>
       {contents.map(content => (
-        <Item maxHeight={content.maxHeight} key={content.id}>
+        <Section maxHeight={content.maxHeight} key={content.id}>
           <Card>
-            <CardTitle>{content.title}</CardTitle>
-            <CardContent>{content.children}</CardContent>
+            <Title>{content.title}</Title>
+            <Content>{content.children}</Content>
           </Card>
-        </Item>
+        </Section>
       ))}
     </Wrapper>
   );
 };
 
 export default SidePanel;
 
-const Wrapper = styled.div<Pick<Props, "location">>`
+const Wrapper = styled.div<{ location: "left" | "right" }>`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -44,7 +44,7 @@ const Wrapper = styled.div<Pick<Props, "location">>`
   ${({ location }) => location === "right" && `padding-left: 0;`}
 `;
 
-const Item = styled.div<{ maxHeight?: CSSProperties["maxHeight"] }>`
+const Section = styled.div<{ maxHeight?: CSSProperties["maxHeight"] }>`
   flex-grow: 1;
   height: 100%;
   ${({ maxHeight }) => maxHeight && `max-height: ${maxHeight};`}
@@ -58,7 +58,7 @@ const Card = styled.div`
   flex-direction: column;
 `;
 
-const CardTitle = styled.div`
+const Title = styled.div`
   background: ${({ theme }) => theme.general.bg.veryWeak};
   padding: 8px;
   font-weight: 500;
@@ -68,8 +68,9 @@ const CardTitle = styled.div`
   border-top-left-radius: 4px;
 `;
 
-const CardContent = styled.div`
-  padding: 8px;
+const Content = styled.div`
+  padding: 12px 8px;
+  box-sizing: border-box;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
   overflow-y: auto;

web/src/beta/features/Editor/index.tsx

@@ -1,5 +1,5 @@
 import Resizable from "@reearth/beta/components/Resizable";
-import StoryPanel from "@reearth/beta/features/Editor/Tabs/Storytelling/StoryPanel";
+import StoryPanel from "@reearth/beta/features/Editor/tabs/story/StoryPanel";
 import useLeftPanel from "@reearth/beta/features/Editor/useLeftPanel";
 import useRightPanel from "@reearth/beta/features/Editor/useRightPanel";
 import useVisualizerNav from "@reearth/beta/features/Editor/useVisualizerNav";
@@ -76,7 +76,7 @@ const Wrapper = styled.div`
 const MainSection = styled.div`
   display: flex;
   flex-grow: 1;
-  height: 100%;
+  height: 0;
   background-color: ${({ theme }) => theme.general.bg.veryStrong};
 `;
 

web/src/beta/features/Editor/Tabs/Storytelling/StoryPageIndicator/index.tsx → web/src/beta/features/Editor/tabs/story/PageIndicator/index.tsx

@@ -48,7 +48,7 @@ const Indicator = styled.button<{ progress: number }>`
     opacity: 0.8;
   }
 
-  :not(:first-child) {
+  :not(:first-of-type) {
     border-left: 1px solid #ffffff;
   }
 

web/src/beta/features/Editor/tabs/story/SidePanel/Action/index.tsx

@@ -0,0 +1,58 @@
+import { ComponentProps, FC } from "react";
+
+import Icon from "@reearth/beta/components/Icon";
+import Text from "@reearth/beta/components/Text";
+import { styled } from "@reearth/services/theme";
+
+type IconProps = ComponentProps<typeof Icon>;
+
+type Props = {
+  icon: IconProps["icon"];
+  iconSize?: IconProps["size"];
+  iconColor?: IconProps["color"];
+  title: string;
+  onClick: () => void;
+};
+
+const StorySidePanelAction: FC<Props> = ({ icon, iconSize, iconColor, title, onClick }) => {
+  return (
+    <Wrapper onClick={onClick} type="button">
+      <IconWrapper>
+        <Icon icon={icon} size={iconSize ?? 12} color={iconColor} />
+      </IconWrapper>
+      <Text size={"footnote"} otherProperties={{ wordBreak: "break-all", textAlign: "left" }}>
+        {title}
+      </Text>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 8px 12px;
+  gap: 8px;
+  border-radius: 6px;
+
+  min-height: 28px;
+  transition: all 0.15s;
+
+  border: 1px solid #383838;
+
+  :hover {
+    background: ${props => props.theme.general.bg.weak};
+  }
+  user-select: none;
+  cursor: pointer;
+`;
+
+const IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #4a4a4a;
+`;
+
+export default StorySidePanelAction;

web/src/beta/features/Editor/tabs/story/SidePanel/Item/index.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import ActionItem from "./index";
+
+export default {
+  component: ActionItem,
+} as Meta;
+
+type Story = StoryObj<typeof ActionItem>;
+
+export const Default: Story = {
+  args: {
+    children:
+      "long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text ",
+  },
+};

web/src/beta/features/Editor/tabs/story/SidePanel/Item/index.tsx

@@ -0,0 +1,67 @@
+import { FC, ReactNode } from "react";
+
+import Icon from "@reearth/beta/components/Icon";
+import Text from "@reearth/beta/components/Text";
+import { styled } from "@reearth/services/theme";
+
+type Props = {
+  children: ReactNode;
+  onItemClick(id: string): void;
+  onActionClick(): void;
+};
+
+const StorySidePanelItem: FC<Props> = ({ children, onItemClick, onActionClick }) => {
+  return (
+    <Wrapper>
+      <Inner onClick={() => onItemClick("id")}>
+        <SText>
+          <Text size="footnote">{children}</Text>
+        </SText>
+      </Inner>
+      <SButton onClick={onActionClick}>
+        <Icon icon="actionbutton" size={12} />
+      </SButton>
+    </Wrapper>
+  );
+};
+
+export default StorySidePanelItem;
+
+const Wrapper = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+const Inner = styled.button`
+  display: flex;
+  width: 100%;
+  min-height: 38px;
+  align-items: center;
+  border: 1px solid #383838;
+  border-radius: 6px;
+  box-sizing: border-box;
+  padding: 8px 20px 8px 4px;
+
+  transition: all 0.15s;
+  :hover {
+    background-color: #232226;
+  }
+`;
+
+const SText = styled.div`
+  flex-grow: 1;
+  width: 0;
+  word-break: break-all;
+  text-align: left;
+`;
+
+const SButton = styled.button`
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 4px;
+  margin-left: -1px;
+
+  color: #4a4a4a;
+`;