diff --git a/app/(landing)/signup/_ui/user-type-card/index.tsx b/app/(landing)/signup/_ui/user-type-card/index.tsx
index aa3f6a71..7e62e318 100644
--- a/app/(landing)/signup/_ui/user-type-card/index.tsx
+++ b/app/(landing)/signup/_ui/user-type-card/index.tsx
@@ -7,6 +7,7 @@ import {
setIsAgreedTermsCookie,
setUserTypeCookie,
} from '@/app/(landing)/signup/_lib/cookies'
+import { InvestorImg, TraderImg } from '@/public/images'
import classNames from 'classnames/bind'
import { PATH } from '@/shared/constants/path'
@@ -43,6 +44,11 @@ const UserTypeCard = ({ userType, title, highlight }: Props) => {
인베스트메틱을 통해
{highlight}해보세요!
+ {userType === 'TRADER' ? (
+
+ ) : (
+
+ )}
)
}
diff --git a/app/(landing)/signup/_ui/user-type-card/styles.module.scss b/app/(landing)/signup/_ui/user-type-card/styles.module.scss
index 76321cb9..7a392e7f 100644
--- a/app/(landing)/signup/_ui/user-type-card/styles.module.scss
+++ b/app/(landing)/signup/_ui/user-type-card/styles.module.scss
@@ -1,14 +1,25 @@
.card {
+ display: flex;
+ flex-direction: column;
width: 100%;
padding: 43px 44px 53px;
+ margin-bottom: 140px;
text-align: left;
background-color: $color-white;
border: 2px solid $color-white;
+ border-radius: 8px;
transition: 0.2s ease-in-out;
&:hover {
border: 2px solid $color-orange-400;
}
+
+ .image {
+ width: 234px;
+ height: 210px;
+ margin-top: 32px;
+ align-self: flex-end;
+ }
}
.title {
diff --git a/app/(landing)/signup/user-type/page.module.scss b/app/(landing)/signup/user-type/page.module.scss
index 986a3f5b..4f5a27d3 100644
--- a/app/(landing)/signup/user-type/page.module.scss
+++ b/app/(landing)/signup/user-type/page.module.scss
@@ -3,5 +3,5 @@
gap: 32px;
width: 100%;
max-width: 952px;
- margin: 120px auto 0;
+ margin: 100px auto 0;
}
diff --git a/public/images/index.ts b/public/images/index.ts
index 40862b03..e55d8e3d 100644
--- a/public/images/index.ts
+++ b/public/images/index.ts
@@ -1,3 +1,5 @@
export { default as ImageLogo } from './logo.svg'
export { default as TextLogo } from './text-logo.svg'
export { default as PageNotFoundImg } from './page-not-found-img.svg'
+export { default as TraderImg } from './trader.svg'
+export { default as InvestorImg } from './investor.svg'
diff --git a/public/images/investor.svg b/public/images/investor.svg
new file mode 100644
index 00000000..8bec66c3
--- /dev/null
+++ b/public/images/investor.svg
@@ -0,0 +1,59 @@
+
diff --git a/public/images/trader.svg b/public/images/trader.svg
new file mode 100644
index 00000000..d1afcd3c
--- /dev/null
+++ b/public/images/trader.svg
@@ -0,0 +1,68 @@
+