Feat/35

src/App.jsx

@@ -14,6 +14,8 @@ import ProjectRecruitment from './components/project-recruitment';
 import ProjectCollaboration from './components/project-collaboration';
 import ProjectPromotion from './components/project-promotion';
 import Community from './components/community/Top10-rank';
+import ContactForm from './components/contact/contactForm';
+import TeamMemberSearch from './components/contact/member-registration';
 
 
 const router = createBrowserRouter([
@@ -86,7 +88,10 @@ const router = createBrowserRouter([
       },
       {
         path: 'community',
+        //element: <TeamMemberSearch/>
+        //element: <ContactForm/>
         element: <Community/>
+
       },
       { //마이페이지 경로 
         path: 'mypage',

src/components/contact/contactForm.jsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+
+import {
+  MainContainer,
+  Title,
+  Description,
+  ContactsContainer,
+  InputContainer,
+  InputWrapper,
+  InputGroup,
+  Input,
+  RegisterButton,
+  RegisteredContact,
+  ContactInfo,
+  DeleteButton
+} from "../../styled-components/contact/styled-contactForm";
+
+const ContactForm = () => {
+  const [contacts, setContacts] = useState([]);
+  const [currentContact, setCurrentContact] = useState({
+    method: '',
+    link: '',
+    isRegistered: false
+  });
+
+  const handleRegister = () => {
+    if (currentContact.method && currentContact.link) {
+      setContacts([...contacts, { ...currentContact, isRegistered: true }]);
+      setCurrentContact({ method: '', link: '', isRegistered: false });
+    }
+  };
+
+  const handleDelete = (index) => {
+    const newContacts = contacts.filter((_, i) => i !== index);
+    setContacts(newContacts);
+  };
+
+  return (
+    <MainContainer>
+      <Title>연락 방법</Title>
+      <Description>이메일, 오픈채팅방, 인스타그램 등 연락 방법을 입력해주세요</Description>
+
+      <ContactsContainer>
+        {contacts.length < 10 && (
+          <InputContainer>
+            <InputWrapper>
+              <InputGroup>
+                <Input
+                  placeholder="연락 방법 입력"
+                  value={currentContact.method}
+                  onChange={(e) => setCurrentContact({
+                    ...currentContact,
+                    method: e.target.value
+                  })}
+                  className="method"
+                />
+              </InputGroup>
+              <InputGroup>
+                <Input
+                  placeholder="링크 입력"
+                  value={currentContact.link}
+                  onChange={(e) => setCurrentContact({
+                    ...currentContact,
+                    link: e.target.value
+                  })}
+                  className="link"
+                />
+              </InputGroup>
+            </InputWrapper>
+            <RegisterButton onClick={handleRegister}>등록하기</RegisterButton>
+          </InputContainer>
+        )}
+
+        {contacts.map((contact, index) => (
+          <RegisteredContact key={index}>
+            <ContactInfo>
+              <Input
+                value={contact.method}
+                readOnly
+                className="method"
+                disabled
+              />
+              <Input
+                value={contact.link}
+                readOnly
+                className="link"
+                disabled
+              />
+            </ContactInfo>
+            <DeleteButton onClick={() => handleDelete(index)}>
+              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+                <path d="M30 10L10 30" stroke="#C2C2C2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M10 10L30 30" stroke="#C2C2C2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </DeleteButton>
+          </RegisteredContact>
+        ))}
+      </ContactsContainer>
+    </MainContainer>
+  );
+};
+
+
+export default ContactForm;

src/components/contact/member-registration.jsx

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+
+import {
+    Container,
+    Title,
+    Description,
+    MainSection,
+    SearchSection,
+    SearchInputWrapper,
+    SearchInput,
+    SearchButton,
+    TagsSection,
+    TagGroup,
+    TagLabel,
+    TagsWrapper,
+    LeaderContainer,
+    MemberContainer,
+    LeaderTag,
+    MemberTag,
+    DeleteButton,
+    SearchResultsList,
+    SearchResultItem,
+    ProfileImage,
+    ResultNickname
+  } from '../../styled-components/contact/styled-member-registration';
+
+export const TeamMemberSearch = () => {
+  // 임시 데이터
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState([]);
+  const [teamMembers, setTeamMembers] = useState([
+    { id: 1, nickname: '도도', isLeader: false },
+    { id: 2, nickname: '이노', isLeader: false }
+  ]);
+
+  // 임시 사용자 데이터베이스
+  const userDatabase = [
+    { id: 3, nickname: '에이치', profileImage: '프로필이미지URL' },
+    { id: 4, nickname: '에이호', profileImage: '프로필이미지URL' },
+    { id: 5, nickname: '에이든', profileImage: '프로필이미지URL' },
+  ];
+
+  const handleSearch = (e) => {
+    setSearchQuery(e.target.value);
+    if (e.target.value.trim()) {
+      const results = userDatabase.filter(user => 
+        user.nickname.toLowerCase().includes(e.target.value.toLowerCase())
+      );
+      setSearchResults(results);
+    } else {
+      setSearchResults([]);
+    }
+  };
+
+  const handleAddMember = (member) => {
+    if (!teamMembers.find(m => m.id === member.id)) {
+      setTeamMembers([...teamMembers, { ...member, isLeader: false }]);
+    }
+    setSearchResults([]);
+    setSearchQuery('');
+  };
+
+  const handleRemoveMember = (memberId) => {
+    setTeamMembers(teamMembers.filter(member => member.id !== memberId));
+  };
+
+  return (
+    <Container>
+      <Title>함께 한 팀원</Title>
+      <Description>프로젝트를 함께하고 있는 팀원이 있다면 추가해주세요.</Description>
+
+      <MainSection>
+        <SearchSection>
+          <SearchInputWrapper>
+            <SearchInput
+              placeholder="닉네임을 검색하여 추가해주세요"
+              value={searchQuery}
+              onChange={handleSearch}
+            />
+            <SearchButton>
+              <svg xmlns="http://www.w3.org/2000/svg" width="19" height="20" viewBox="0 0 19 20" fill="none">
+                <path d="M7.38863 14.4335C10.917 14.4335 13.7773 11.5732 13.7773 8.04488C13.7773 4.51654 10.917 1.65625 7.38863 1.65625C3.86029 1.65625 1 4.51654 1 8.04488C1 11.5732 3.86029 14.4335 7.38863 14.4335Z" stroke="#0D29B7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M17.1212 18.1427L12.0684 13.0898" stroke="#0D29B7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </SearchButton>
+          </SearchInputWrapper>
+
+          {searchResults.length > 0 && (
+            <SearchResultsList>
+              {searchResults.map(result => (
+                <SearchResultItem key={result.id} onClick={() => handleAddMember(result)}>
+                  <ProfileImage src={result.profileImage} alt={result.nickname} />
+                  <ResultNickname>{result.nickname}</ResultNickname>
+                </SearchResultItem>
+              ))}
+            </SearchResultsList>
+          )}
+        </SearchSection>
+
+        <TagsSection>
+          <LeaderContainer>
+            <TagLabel>리더</TagLabel>
+            <LeaderTag>노브</LeaderTag>
+          </LeaderContainer>
+
+          <MemberContainer>
+            <TagLabel>팀원</TagLabel>
+            <TagsWrapper>
+              {teamMembers.map(member => (
+                <MemberTag key={member.id}>
+                  {member.nickname}
+                  <DeleteButton onClick={() => handleRemoveMember(member.id)}>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                      <path d="M12 4L4 12" stroke="#0D29B7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M4 4L12 12" stroke="#0D29B7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  </DeleteButton>
+                </MemberTag>
+              ))}
+            </TagsWrapper>
+          </MemberContainer>
+        </TagsSection>
+      </MainSection>
+    </Container>
+  );
+};
+
+
+export default TeamMemberSearch;

src/components/partnerd-search.jsx

@@ -76,7 +76,21 @@ const PartnerSearch = () => {
         key="prev"
         onClick={() => setCurrentPage(prev => prev === 1 ? totalPages : prev - 1)}
       >
-        <ArrowIcon className="left" />
+        <svg 
+          xmlns="http://www.w3.org/2000/svg" 
+          width="24" 
+          height="24" 
+          viewBox="0 0 24 24" 
+          fill="none" 
+          stroke="#5084F5" 
+          strokeWidth="2" 
+          strokeLinecap="round" 
+          strokeLinejoin="round"
+          style={{ transform: 'rotate(0deg)' }}
+        >
+          <path d="m12 19-7-7 7-7"/>
+          <path d="M19 12H5"/>
+        </svg>
       </ArrowButton>
     );
 
@@ -111,7 +125,21 @@ const PartnerSearch = () => {
         key="next"
         onClick={() => setCurrentPage(prev => prev === totalPages ? 1 : prev + 1)}
       >
-        <ArrowIcon className="right" />
+        <svg 
+          xmlns="http://www.w3.org/2000/svg" 
+          width="24" 
+          height="24" 
+          viewBox="0 0 24 24" 
+          fill="none" 
+          stroke="#5084F5" 
+          strokeWidth="2" 
+          strokeLinecap="round" 
+          strokeLinejoin="round"
+          style={{ transform: 'rotate(180deg)' }}
+        >
+          <path d="m12 19-7-7 7-7"/>
+          <path d="M19 12H5"/>
+        </svg>
       </ArrowButton>
     );
 

src/components/project-collaboration.jsx

@@ -73,7 +73,21 @@ const ProjectCollaboration = () => {
         key="prev"
         onClick={() => setCurrentPage(prev => prev === 1 ? totalPages : prev - 1)}
       >
-        <ArrowIcon className="left" />
+        <svg 
+          xmlns="http://www.w3.org/2000/svg" 
+          width="24" 
+          height="24" 
+          viewBox="0 0 24 24" 
+          fill="none" 
+          stroke="#5084F5" 
+          strokeWidth="2" 
+          strokeLinecap="round" 
+          strokeLinejoin="round"
+          style={{ transform: 'rotate(0deg)' }}
+        >
+          <path d="m12 19-7-7 7-7"/>
+          <path d="M19 12H5"/>
+        </svg>
       </ArrowButton>
     );
 
@@ -106,7 +120,21 @@ const ProjectCollaboration = () => {
         key="next"
         onClick={() => setCurrentPage(prev => prev === totalPages ? 1 : prev + 1)}
       >
-        <ArrowIcon className="right" />
+        <svg 
+          xmlns="http://www.w3.org/2000/svg" 
+          width="24" 
+          height="24" 
+          viewBox="0 0 24 24" 
+          fill="none" 
+          stroke="#5084F5" 
+          strokeWidth="2" 
+          strokeLinecap="round" 
+          strokeLinejoin="round"
+          style={{ transform: 'rotate(180deg)' }}
+        >
+          <path d="m12 19-7-7 7-7"/>
+          <path d="M19 12H5"/>
+        </svg>
       </ArrowButton>
     );
 

src/components/project-promotion.jsx

@@ -95,7 +95,21 @@ const ProjectPromotion = () => {
         key="prev"
         onClick={() => setCurrentPage(prev => prev === 1 ? totalPages : prev - 1)}
       >
-        <ArrowIcon className="left" />
+        <svg 
+          xmlns="http://www.w3.org/2000/svg" 
+          width="24" 
+          height="24" 
+          viewBox="0 0 24 24" 
+          fill="none" 
+          stroke="#5084F5" 
+          strokeWidth="2" 
+          strokeLinecap="round" 
+          strokeLinejoin="round"
+          style={{ transform: 'rotate(0deg)' }}
+        >
+          <path d="m12 19-7-7 7-7"/>
+          <path d="M19 12H5"/>
+        </svg>
       </ArrowButton>
     );
 
@@ -142,7 +156,21 @@ const ProjectPromotion = () => {
         key="next"
         onClick={() => setCurrentPage(prev => prev === totalPages ? 1 : prev + 1)}
       >
-        <ArrowIcon className="right" />
+        <svg 
+          xmlns="http://www.w3.org/2000/svg" 
+          width="24" 
+          height="24" 
+          viewBox="0 0 24 24" 
+          fill="none" 
+          stroke="#5084F5" 
+          strokeWidth="2" 
+          strokeLinecap="round" 
+          strokeLinejoin="round"
+          style={{ transform: 'rotate(180deg)' }}
+        >
+          <path d="m12 19-7-7 7-7"/>
+          <path d="M19 12H5"/>
+        </svg>
       </ArrowButton>
     );