diff --git a/src/components/Onboard/EmailListInteraction.tsx b/src/components/Onboard/EmailListInteraction.tsx
new file mode 100644
index 0000000..099308f
--- /dev/null
+++ b/src/components/Onboard/EmailListInteraction.tsx
@@ -0,0 +1,84 @@
+'use client';
+
+import LinkedInIcon from '@/assets/icons/LinkedInIcon';
+import { EmailSenderButton } from '@/components/EmailSenderButton';
+import { OnboardButton } from '@/components/OnboardButton';
+import type { IncomingSenders } from '@/types/onboard';
+import { useState } from 'react';
+
+interface EmailListInteractionProps {
+ userName: string;
+ interest: string;
+ incomingSenders: IncomingSenders;
+ techSenders: IncomingSenders;
+}
+
+const EmailListInteraction = ({ userName, interest, incomingSenders, techSenders }: EmailListInteractionProps) => {
+ const [selectedEmailList, setSelectedEmailList] = useState
([]);
+
+ const handleAddEmail = (email: string) => {
+ setSelectedEmailList(prev => [...prev, email]);
+ };
+
+ const handleRemoveEmail = (email: string) => {
+ const filteredEmail = selectedEmailList.filter(selectedEmail => selectedEmail !== email);
+ setSelectedEmailList(filteredEmail);
+ };
+
+ return (
+
+
+
+
+ {userName}님의 메일함에서 발견된
+ 뉴스레터에요.
+
+
+ {incomingSenders.senders.map(({ senderId, fullAddress, localPart, domain, category }) => {
+ return (
+ }
+ key={senderId}
+ title={localPart}
+ tag={category}
+ type='subscribe'
+ isActivated={selectedEmailList.includes(localPart)}
+ setIsActivated={isActivated =>
+ isActivated ? handleAddEmail(localPart) : handleRemoveEmail(localPart)
+ }
+ />
+ );
+ })}
+
+
+
+
+ {interest}에 관심이 있다면,
+ 이런 발신인은 어때요?
+
+
+ {techSenders.senders.map(({ senderId, fullAddress, localPart, domain, category }) => {
+ return (
+ }
+ key={senderId}
+ title={localPart}
+ tag={category}
+ type='subscribe'
+ isActivated={selectedEmailList.includes(localPart)}
+ setIsActivated={isActivated =>
+ isActivated ? handleAddEmail(localPart) : handleRemoveEmail(localPart)
+ }
+ />
+ );
+ })}
+
+
+
+
+
0} />
+