Merge pull request #27 from kakao-tech-campus-2nd-step3/feat/#25

chore: feat브랜치끼리 파일통합

src/components/common/Button/Button.styles.ts

@@ -0,0 +1,64 @@
+import styled from "@emotion/styled";
+import { breakpoints } from "@/variants";
+import { Props } from "@/components/common/Button";
+
+export const StyledButton = styled.button<Pick<Props, "theme">>(
+  {
+    borderRadius: "16px",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    cursor: "pointer",
+    transition: "background-color 200ms",
+    padding: "0 16px",
+    outline: "none", // 클릭 시 포커스 테두리 제거
+    "&:focus": {
+      outline: "none", // 추가로 focus 상태에서도 테두리 제거
+    },
+  },
+  {
+    width: "80px",
+    height: "40px",
+    fontSize: "14px",
+    [breakpoints.tablet]: {
+      // 테블릿
+      width: "120px",
+      height: "48px",
+      fontSize: "16px",
+    },
+    [breakpoints.desktop]: {
+      // 데스크탑
+      width: "150px",
+      height: "50px",
+      fontSize: "20px",
+    },
+  },
+  ({ theme }) => {
+    switch (theme) {
+      case "primary":
+        return {
+          backgroundColor: "#39A7F7",
+          color: "white",
+          border: "none",
+          "&:hover": {
+            backgroundColor: "#8FD0FF",
+            color: "black",
+            border: "none",
+          },
+        };
+      case "secondary":
+        return {
+          backgroundColor: "#ffffff",
+          color: "#39A7F7",
+          border: "1px solid #39A7F7",
+          "&:hover": {
+            backgroundColor: "#DCDCDC",
+            color: "black",
+            border: "1px solid #39A7F7",
+          },
+        };
+      default:
+        return {};
+    }
+  },
+);

src/components/common/Button/index.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { StyledButton } from "./Button.styles";
+
+export type Props = {
+  theme?: "primary" | "secondary";
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+const Button: React.FC<Props> = ({ theme = "primary", children, ...props }) => {
+  return (
+    <StyledButton theme={theme} {...props}>
+      {children}
+    </StyledButton>
+  );
+};
+
+export default Button;

src/components/common/Input/Input.styles.ts

@@ -0,0 +1,27 @@
+import styled from "@emotion/styled";
+import { breakpoints } from "@/variants";
+
+export const StyledTextArea = styled.textarea(
+  {
+    borderRadius: "16px",
+    padding: "10px",
+    border: "3px solid #D5D5D5",
+    fontFamily: "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif",
+    fontWeight: 600,
+    resize: "none",
+    width: "calc(100% - 60px)",
+    margin: "0 30px",
+  },
+  {
+    height: "187px",
+    fontSize: "16px",
+    [breakpoints.tablet]: {
+      height: "450px",
+      fontSize: "26px",
+    },
+    [breakpoints.desktop]: {
+      height: "392px",
+      fontSize: "32px",
+    },
+  },
+);

src/components/common/Input/index.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { StyledTextArea } from "./Input.styles";
+
+export type Props = {} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const Input: React.FC<Props> = (props) => {
+  return <StyledTextArea {...props} />;
+};
+
+export default Input;

src/components/common/Input/input.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryFn } from "@storybook/react";
+import Input, { Props } from "@/components/common/Input";
+
+// 스토리북의 메타데이터 설정
+export default {
+  title: "Components/VoiceInput", // 스토리북에서 컴포넌트를 보여줄 섹션 이름
+  component: Input,
+  argTypes: {
+    placeholder: {
+      control: "text", // placeholder는 사용자가 직접 입력할 수 있도록 설정
+    },
+  },
+} as Meta<typeof Input>;
+
+// Template 생성 (StoryFn으로 컴포넌트를 렌더링)
+const Template: StoryFn<Props> = (args) => <Input {...args} />;
+
+// 각 스토리 생성
+export const Responsive = Template.bind({});
+Responsive.args = {
+  placeholder: "Responsive Input",
+};

src/components/common/List/index.tsx

@@ -0,0 +1,40 @@
+import styled from "@emotion/styled";
+import ProfileImage from "@/components/common/ProfileImage";
+import UserInfo from "@/components/common/UserInfo";
+
+export type Props = {
+  profileSrc: string;
+  name: string;
+  date: string;
+};
+
+export const List: React.FC<Props> = ({ profileSrc, name, date }) => {
+  return (
+    <ListItemWrapper>
+      <ProfileImageWrapper>
+        <ProfileImage src={profileSrc} alt={name} />
+      </ProfileImageWrapper>
+      <UserInfoWrapper>
+        <UserInfo name={name} date={date} />
+      </UserInfoWrapper>
+    </ListItemWrapper>
+  );
+};
+
+const ListItemWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const ProfileImageWrapper = styled.div`
+  margin-right: 10px; // 프로필 이미지와 리스트 간의 간격
+`;
+
+const UserInfoWrapper = styled.div`
+  flex-grow: 1;
+  background-color: #f5f5f5; // 회색 배경
+  border-radius: 16px;
+  padding: 10px;
+`;
+
+export default List;

src/components/common/ProfileImage/ProfileImage.styles.ts

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+
+export const StyledImage = styled.img`
+  border-radius: 50%;
+  object-fit: cover;
+  width: 60px;
+  height: 60px;
+`;

src/components/common/ProfileImage/index.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { StyledImage } from "./ProfileImage.styles";
+
+export type ProfileImageProps = {
+  src: string;
+  alt?: string;
+} & React.ImgHTMLAttributes<HTMLImageElement>;
+
+const ProfileImage: React.FC<ProfileImageProps> = ({
+  src,
+  alt = "Profile Image",
+  ...props
+}) => {
+  return <StyledImage src={src} alt={alt} {...props} />;
+};
+
+export default ProfileImage;

src/components/common/UserInfo/UserInfo.styles.ts

@@ -0,0 +1,50 @@
+import styled from "@emotion/styled";
+import { breakpoints } from "@/variants";
+
+export const UserInfoWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  background-color: #f5f5f5;
+  border-radius: 12px;
+  padding: 10px;
+  width: 76px;
+  height: 39px;
+
+  ${breakpoints.tablet} {
+    width: 113px;
+    height: 68px;
+  }
+
+  ${breakpoints.desktop} {
+    width: 114px;
+    height: 67px;
+  }
+`;
+
+export const NameText = styled.div`
+  font-weight: bold;
+  font-size: 12px;
+
+  ${breakpoints.tablet} {
+    font-size: 16px;
+  }
+
+  ${breakpoints.desktop} {
+    font-size: 18px;
+  }
+`;
+
+export const DateText = styled.div`
+  color: #aab2c8;
+  font-size: 12px;
+
+  ${breakpoints.tablet} {
+    font-size: 16px;
+  }
+
+  ${breakpoints.desktop} {
+    font-size: 18px;
+  }
+`;

src/components/common/UserInfo/index.tsx

@@ -0,0 +1,17 @@
+import { UserInfoWrapper, NameText, DateText } from "./UserInfo.styles";
+
+export type Props = {
+  name: string;
+  date: string;
+};
+
+const UserInfo: React.FC<Props> = ({ name, date }) => {
+  return (
+    <UserInfoWrapper>
+      <NameText>{name}</NameText>
+      <DateText>{date}</DateText>
+    </UserInfoWrapper>
+  );
+};
+
+export default UserInfo;