Skip to content

Commit

Permalink
Feat: RecordCard 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
haeyonghahn committed Jan 23, 2024
1 parent d901c82 commit 7cd25d6
Show file tree
Hide file tree
Showing 6 changed files with 119 additions and 10 deletions.
2 changes: 1 addition & 1 deletion src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const GlobalStyle = createGlobalStyle`
.general-layout__body {
margin: 0 auto;
width: 800px;
padding: 20px 20px 0px 20px;
padding: 80px 20px;
}
`;

Expand Down
61 changes: 61 additions & 0 deletions src/_shared/icons/basic.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2096,6 +2096,67 @@ const basic: IBasicProps = {
</defs>
</>
),
start: (
<>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M19.8824 12.9999C19.8824 13.739 21.2518 14.3381 22.9412 14.3381C24.6305 14.3381 26 13.739 26 12.9999C26 12.2608 24.6305 11.6616 22.9412 11.6616C21.2518 11.6616 19.8824 12.2608 19.8824 12.9999ZM17.8665 17.8663C17.3439 18.3889 17.8886 19.781 19.0832 20.9755C20.2777 22.1701 21.6698 22.7148 22.1924 22.1922C22.715 21.6695 22.1703 20.2775 20.9757 19.083C19.7812 17.8884 18.3892 17.3437 17.8665 17.8663ZM11.6617 22.941C11.6617 21.2517 12.2608 19.8822 12.9999 19.8822C13.739 19.8822 14.3381 21.2517 14.3381 22.941C14.3381 24.6304 13.739 25.9998 12.9999 25.9998C12.2608 25.9998 11.6617 24.6304 11.6617 22.941ZM8.1336 17.8664C7.61098 17.3438 6.21895 17.8885 5.02441 19.083C3.82986 20.2776 3.28515 21.6696 3.80776 22.1922C4.33038 22.7148 5.72241 22.1701 6.91696 20.9756C8.1115 19.781 8.65621 18.389 8.1336 17.8664ZM3.05882 14.3381C1.36948 14.3381 1.3068e-06 13.739 1.33911e-06 12.9999C1.37141e-06 12.2608 1.36948 11.6616 3.05882 11.6616C4.74817 11.6616 6.11765 12.2608 6.11765 12.9999C6.11765 13.739 4.74817 14.3381 3.05882 14.3381ZM3.8077 3.80733C3.28509 4.32994 3.82979 5.72197 5.02434 6.91652C6.21889 8.11106 7.61092 8.65577 8.13353 8.13316C8.65614 7.61055 8.11143 6.21851 6.91689 5.02397C5.72235 3.82942 4.33031 3.28472 3.8077 3.80733ZM11.6617 3.05882C11.6617 1.36948 12.2608 -6.32868e-07 12.9999 -5.68252e-07C13.739 -5.0364e-07 14.3381 1.36948 14.3381 3.05882C14.3381 4.74817 13.739 6.11765 12.9999 6.11765C12.2608 6.11765 11.6617 4.74816 11.6617 3.05882ZM22.1924 3.80755C21.6698 3.28493 20.2778 3.82964 19.0833 5.02419C17.8887 6.21873 17.344 7.61076 17.8666 8.13338C18.3892 8.65599 19.7813 8.11128 20.9758 6.91674C22.1703 5.72219 22.7151 4.33016 22.1924 3.80755Z"
fill="url(#paint0_linear_3417_7133)"
/>
<path
d="M12.3349 17.3899C12.5927 17.97 13.4148 17.9733 13.6773 17.3953L14.73 15.0771C14.8039 14.9144 14.9344 14.7842 15.0972 14.7107L17.4013 13.6705C17.9787 13.4098 17.9787 12.5898 17.4013 12.3292L15.0972 11.289C14.9344 11.2155 14.8039 11.0852 14.73 10.9226L13.6773 8.60436C13.4148 8.02636 12.5927 8.02966 12.3349 8.60976L11.3094 10.9172C11.2356 11.0831 11.1031 11.2159 10.9373 11.2901L8.61571 12.3281C8.03505 12.5877 8.03505 13.412 8.61571 13.6716L10.9373 14.7096C11.1031 14.7837 11.2356 14.9165 11.3094 15.0825L12.3349 17.3899Z"
fill="url(#paint1_angular_3417_7133)"
/>
<defs>
<linearGradient
id="paint0_linear_3417_7133"
x1="13"
y1="28.2074"
x2="13"
y2="-2.6981"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.21875" stopColor="#FF91DD" />
<stop offset="0.817708" stopColor="#3DEFA3" />
</linearGradient>
<radialGradient
id="paint1_angular_3417_7133"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(13.0001 12.9998) rotate(90) scale(5.88679)"
>
<stop stopColor="#FF59D0" />
<stop offset="0.510417" stopColor="white" />
<stop offset="1" stopColor="#3CEFA3" />
</radialGradient>
</defs>
</>
),
verticalLine: (
<>
<path
d="M2 1C2 0.447715 1.55228 -2.41411e-08 1 0C0.447715 2.41411e-08 -2.41411e-08 0.447715 0 1L2 1ZM0 1L2.19868e-05 504L2.00002 504L2 1L0 1Z"
fill="#575860"
/>
</>
),
mapPin: (
<>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.99902 11.4998C5.99902 11.4998 10.499 8.49976 10.499 4.99976C10.499 3.80628 10.0249 2.66169 9.181 1.81778C8.33709 0.973862 7.1925 0.499756 5.99902 0.499756C4.80555 0.499756 3.66096 0.973862 2.81704 1.81778C1.97313 2.66169 1.49902 3.80628 1.49902 4.99976C1.49902 8.49976 5.99902 11.4998 5.99902 11.4998ZM7.99933 5.00006C7.99933 6.10463 7.1039 7.00006 5.99933 7.00006C4.89476 7.00006 3.99933 6.10463 3.99933 5.00006C3.99933 3.89549 4.89476 3.00006 5.99933 3.00006C7.1039 3.00006 7.99933 3.89549 7.99933 5.00006Z"
fill="#3CEFA3"
/>
<path
d="M5.99902 11.4998L5.76569 11.8498C5.90698 11.944 6.09106 11.944 6.23236 11.8498L5.99902 11.4998ZM9.181 1.81778L8.88356 2.11522H8.88356L9.181 1.81778ZM2.81704 1.81778L3.11449 2.11522L2.81704 1.81778ZM10.0784 4.99976C10.0784 6.58068 9.05191 8.10312 7.94365 9.27295C7.39812 9.84879 6.85116 10.3199 6.44011 10.6472C6.23492 10.8106 6.06445 10.9375 5.94609 11.023C5.88694 11.0657 5.84086 11.0981 5.81005 11.1194C5.79465 11.1301 5.78307 11.138 5.77558 11.1431C5.77184 11.1456 5.76912 11.1474 5.76746 11.1486C5.76663 11.1491 5.76606 11.1495 5.76577 11.1497C5.76562 11.1498 5.76554 11.1499 5.76552 11.1499C5.76552 11.1499 5.76556 11.1498 5.76555 11.1498C5.76561 11.1498 5.76569 11.1498 5.99902 11.4998C6.23236 11.8498 6.23247 11.8497 6.2326 11.8496C6.23266 11.8496 6.23281 11.8495 6.23293 11.8494C6.2332 11.8492 6.23352 11.849 6.23392 11.8487C6.23471 11.8482 6.23578 11.8475 6.23711 11.8466C6.23978 11.8448 6.24351 11.8423 6.24828 11.839C6.25782 11.8325 6.27151 11.8232 6.28907 11.811C6.32418 11.7867 6.37478 11.7512 6.43867 11.705C6.56641 11.6128 6.7475 11.4779 6.96419 11.3054C7.39689 10.9608 7.97493 10.4632 8.5544 9.85156C9.69613 8.64639 10.9197 6.91883 10.9197 4.99976H10.0784ZM8.88356 2.11522C9.64858 2.88025 10.0784 3.91785 10.0784 4.99976H10.9197C10.9197 3.69472 10.4013 2.44313 9.47845 1.52033L8.88356 2.11522ZM5.99902 0.92041C7.08093 0.92041 8.11853 1.3502 8.88356 2.11522L9.47845 1.52033C8.55565 0.597526 7.30406 0.0791015 5.99902 0.0791015V0.92041ZM3.11449 2.11522C3.87952 1.3502 4.91711 0.92041 5.99902 0.92041V0.0791015C4.69398 0.0791015 3.4424 0.597526 2.5196 1.52033L3.11449 2.11522ZM1.91968 4.99976C1.91968 3.91785 2.34946 2.88025 3.11449 2.11522L2.5196 1.52033C1.59679 2.44313 1.07837 3.69472 1.07837 4.99976H1.91968ZM5.99902 11.4998C6.23236 11.1498 6.23244 11.1498 6.23249 11.1498C6.23249 11.1498 6.23253 11.1499 6.23252 11.1499C6.23251 11.1499 6.23243 11.1498 6.23228 11.1497C6.23198 11.1495 6.23142 11.1491 6.23059 11.1486C6.22893 11.1474 6.22621 11.1456 6.22247 11.1431C6.21498 11.138 6.2034 11.1301 6.18799 11.1194C6.15718 11.0981 6.11111 11.0657 6.05195 11.023C5.9336 10.9375 5.76313 10.8106 5.55794 10.6472C5.14689 10.3199 4.59993 9.84879 4.0544 9.27295C2.94613 8.10312 1.91968 6.58068 1.91968 4.99976H1.07837C1.07837 6.91883 2.30191 8.64639 3.44365 9.85156C4.02312 10.4632 4.60116 10.9608 5.03386 11.3054C5.25055 11.4779 5.43164 11.6128 5.55937 11.705C5.62326 11.7512 5.67387 11.7867 5.70898 11.811C5.72654 11.8232 5.74022 11.8325 5.74976 11.839C5.75454 11.8423 5.75827 11.8448 5.76094 11.8466C5.76227 11.8475 5.76333 11.8482 5.76413 11.8487C5.76452 11.849 5.76485 11.8492 5.76511 11.8494C5.76524 11.8495 5.76539 11.8496 5.76545 11.8496C5.76558 11.8497 5.76569 11.8498 5.99902 11.4998ZM5.99933 7.42072C7.33622 7.42072 8.41998 6.33695 8.41998 5.00006H7.57867C7.57867 5.87231 6.87158 6.57941 5.99933 6.57941V7.42072ZM3.57867 5.00006C3.57867 6.33695 4.66244 7.42072 5.99933 7.42072V6.57941C5.12708 6.57941 4.41998 5.87231 4.41998 5.00006H3.57867ZM5.99933 2.57941C4.66244 2.57941 3.57867 3.66317 3.57867 5.00006H4.41998C4.41998 4.12781 5.12708 3.42072 5.99933 3.42072V2.57941ZM8.41998 5.00006C8.41998 3.66317 7.33622 2.57941 5.99933 2.57941V3.42072C6.87158 3.42072 7.57867 4.12781 7.57867 5.00006H8.41998Z"
fill="#3CEFA3"
/>
</>
),
};

export default basic;
10 changes: 10 additions & 0 deletions src/components/RecordCard/RecordCard.styled.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import styled from "styled-components";

export const RecordCardWrapper = styled.div``;

export const RecordCardLine = styled.div`
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
`;
32 changes: 32 additions & 0 deletions src/components/RecordCard/RecordCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import Icon from "@/foundations/Icon";
import { RecordCardWrapper, RecordCardLine } from "./RecordCard.styled";

const RecordCard = () => {
return (
<RecordCardWrapper>
<RecordCardLine>
<Icon icon="start" />
<Icon
icon="verticalLine"
width="2"
height="504"
minX="0"
minY="0"
viewBoxWidth="2"
viewBoxHeight="504"
/>
<Icon
icon="mapPin"
width="12"
height="12"
minX="0"
minY="0"
viewBoxWidth="12"
viewBoxHeight="12"
/>
</RecordCardLine>
</RecordCardWrapper>
);
};

export default RecordCard;
8 changes: 6 additions & 2 deletions src/foundations/Icon/Icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ interface IIconProps {
block?: string;
minX?: string;
minY?: string;
width?: string;
height?: string;
viewBoxWidth?: string;
viewBoxHeight?: string;
}
Expand All @@ -15,15 +17,17 @@ const Icon = ({
block,
minX = "0",
minY = "0",
width = "24",
height = "24",
viewBoxWidth = "24",
viewBoxHeight = "24",
...props
}: IIconProps) => {
return (
<Svg
viewBox={`${minX} ${minY} ${viewBoxWidth} ${viewBoxHeight}`}
width="24"
height="24"
width={width}
height={height}
xmlns="http://www.w3.org/2000/svg"
fill="none"
block={block}
Expand Down
16 changes: 9 additions & 7 deletions src/layout/MyRecordLayout/MyRecordLayout.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
const MyRecordLayout = ({}) => {
import RecordCard from "@/components/RecordCard/RecordCard";

const MyRecordLayout = () => {
return (
<div className="feed-layout">
<h1>qweqwe</h1>
</div>
)
}
<>
<RecordCard />
</>
);
};

export default MyRecordLayout;
export default MyRecordLayout;

0 comments on commit 7cd25d6

Please sign in to comment.