[🎨 Style] Class 공통 컴포넌트 세팅작업 #2

src/components/Common/ClassPost.jsx

@@ -1,76 +1,67 @@
 import styled from 'styled-components';
+import candleT1 from '../../assets/img/temp/candleT1.png';
+import React from 'react';
 
-export const ClassStyle = styled.article`
-  width: ${(props) => props.width};
-  height: ${(props) => props.height};
-  padding: ${(props) => props.padding};
-  box-sizing: border-box;
-  box-shadow: ${(props) => props.bs};
-  color: ${(props) => props.color};
-  font-size: ${(props) => props.fontsize};
-  text-align: center;
-  background-color: ${(props) => props.bg};
-  border-radius: ${(props) => props.br};
-`;
+export default function ClassPost() {
+  return (
+    <ClassPostWrap
+      src=''
+      width='180px'
+      height='200px'
+      padding='10px 6px 0'
+      alt=''
+    >
+      <img src={candleT1} alt='' />
+      <div>
+        <p>뷰티</p>
+        <p>비누 만들기 클래스</p>
+      </div>
+    </ClassPostWrap>
+  );
+}
 
-export const ClassImg = styled.img`
+export function ClassPostMini() {
+  return (
+    <ClassPostWrap
+      src=''
+      width='180px'
+      height='200px'
+      padding='10px 4px 0'
+      alt=''
+    >
+      <img src={candleT1} alt='' />
+      <div>
+        <p>뷰티</p>
+        <p>비누 만들기 클래스</p>
+      </div>
+    </ClassPostWrap>
+  );
+}
+
+const ClassPostWrap = styled.a`
+  display: block;
   width: ${(props) => props.width};
   height: ${(props) => props.height};
-  vertical-align: ${(props) => props.va};
-  border-radius: ${(props) => props.br};
-`
-
-export const ClassP = styled.p`
-  font-size: ${(props) => props.fontsize};
-  font-weight: ${(props) => props.fontweight};
-  color: ${(props) => props.color};
-  padding: ${(props) => props.padding};
-  text-align: left;
-`
+  background: #ffffff;
+  box-shadow: 0px 1px 2px rgba(118, 118, 118, 0.25);
+  border-radius: 5px;
+  img {
+    width: 100%;
+    object-fit: cover;
+    aspect-ratio: 180 / 120;
+    border-radius: 5px 5px 0 0;
+  }
 
-export const ClassH1 = styled.h1`
-  font-size: ${(props) => props.fontsize};
-  font-weight: ${(props) => props.fontweight};
-  color: ${(props) => props.color};
-  padding: ${(props) => props.padding};
-  text-align: left;
-`
-
-
-// import { ClassStyle } from "./components/Common/ClassPost";
-// import { ClassImg } from "./components/Common/ClassPost";
-// import { ClassP } from "./components/Common/ClassPost";
-// import { ClassH1 } from "./components/Common/ClassPost";
-// import candleT1 from "./assets/img/temp/candleT1.png"
-
-{/* 
-<ClassStyle
-type="article"
-width="180px"
-height="200px"
-bg="#fff"
-br="5px"
-bs="2px 2px 8px rgba(0, 0, 0, .1)">
-<ClassImg src={candleT1}
-  width='180px'
-  br='5px 5px 0 0'
-  va='top'>
-</ClassImg>
-<ClassP
-  color='#767676'
-  padding='9px 0 7px 6px'
-  fontsize='12px' 
-  // fontsize='1.2rem'
-  //! GlobalStyle에서 기본값을 10px로 설정했는데 왜 안되는지 확인
->
-  생활
-</ClassP>
-<ClassH1
-  color='#000'
-  fontsize='14px'
-  padding='0 0 0 6px'
->
-  향초 만들기 클래스
-</ClassH1>
-</ClassStyle>
- */}
+  div {
+    padding: ${(props) => props.padding};
+  }
+  p {
+    color: var(--sub-font-color);
+    font-size: var(--font-sm);
+    margin-bottom: 8px;
+  }
+  p + p {
+    font-size: var(--font-md);
+    color: var(--font-color);
+  }
+`;