Merge pull request #108 from AJD-Archive/style/107

친구 페이지 css
AJD-Archive · Nov 7, 2024 · 57086f6 · 57086f6
2 parents a4bd9cc + 1f3071a
commit 57086f6
Show file tree

Hide file tree

Showing 10 changed files with 426 additions and 1 deletion.
diff --git a/src/App.tsx b/src/App.tsx
@@ -33,6 +33,8 @@ import { MobileDisplay } from './styles/ErrorPageStyled';
 import RouteChangeTracker from './components/RouteChangeTracker';
 import PersonalDashboard from './components/PersonalDashboard';
 import TeamDashBoard from './components/TeamDashboard';
+import ConnectionsPage from './pages/ConnectionsPage/ConnectionsPage';
+import ConnectionsSearchPage from './pages/ConnectionsSearchPage/ConnectionsSearchPage';
 
 const queryClient = new QueryClient();
 
@@ -260,6 +262,24 @@ const App = () => {
               </ProtectedRoute>
             }
           />
+
+          <Route
+            path="/connections"
+            element={
+              <ProtectedRoute>
+                <ConnectionsPage />
+              </ProtectedRoute>
+            }
+          />
+
+          <Route
+            path="/connectionsSearch"
+            element={
+              <ProtectedRoute>
+                <ConnectionsSearchPage />
+              </ProtectedRoute>
+            }
+          />
         </Routes>
       </AuthProvider>
       <ReactQueryDevtools initialIsOpen={false} />

diff --git a/src/components/Connection/Connection.tsx b/src/components/Connection/Connection.tsx
@@ -0,0 +1,18 @@
+import * as S from './ConnectionStyled';
+
+const Connection = () => {
+  return (
+    <S.ConnectionLayout>
+      <S.ProfileImageWrapper></S.ProfileImageWrapper>
+      <S.ConnectionUserWrapper>
+        <p className="name">본명</p>
+        <p className="nickName">닉네임#고유번호 | 이메일</p>
+      </S.ConnectionUserWrapper>
+      <S.FriendRequestButtonWrapper>
+        <p>친구 신청</p>
+      </S.FriendRequestButtonWrapper>
+    </S.ConnectionLayout>
+  );
+};
+
+export default Connection;
diff --git a/src/components/Connection/ConnectionStyled.tsx b/src/components/Connection/ConnectionStyled.tsx
@@ -0,0 +1,55 @@
+import { styled } from 'styled-components';
+import theme from '../../styles/Theme/Theme';
+
+export const ConnectionLayout = styled.div`
+  width: calc(100% / 2 - 5rem);
+  padding: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 10px;
+  border: 1px solid ${theme.color.stroke2};
+
+  display: flex;
+  /* flex-direction: column; */
+  justify-content: space-around;
+  align-items: center;
+
+  cursor: pointer;
+
+  &:nth-child(odd) {
+    margin-right: 1rem;
+  }
+`;
+
+export const ProfileImageWrapper = styled.div`
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+  border: 1px solid ${theme.color.stroke2};
+  color: ${theme.color.text};
+`;
+
+export const ConnectionUserWrapper = styled.div`
+  width: 60%;
+
+  .name {
+    font-weight: ${theme.font.weight.bold};
+    margin-bottom: 0.5rem;
+  }
+
+  .nickName {
+    color: ${theme.color.gray};
+  }
+`;
+
+export const FriendRequestButtonWrapper = styled.div`
+  padding: 0.4rem 1rem;
+  border-radius: 0.5rem;
+  font-size: ${theme.font.size.caption};
+  border: 1px solid ${theme.color.stroke2};
+  color: ${theme.color.gray};
+
+  &:hover {
+    background-color: ${theme.color.stroke2};
+    color: ${theme.color.text};
+  }
+`;
diff --git a/src/pages/ConnectionsPage/ConnectionsPage.tsx b/src/pages/ConnectionsPage/ConnectionsPage.tsx
@@ -0,0 +1,50 @@
+import { Helmet } from 'react-helmet-async';
+import Flex from '../../components/Flex';
+import Navbar from '../../components/Navbar';
+import * as S from './ConnectionsPageStyled';
+import leftarrow from '../../img/leftarrow.png';
+import Connection from '../../components/Connection/Connection';
+import Pagination from '../../components/CustomPagination';
+import { useNavigate } from 'react-router-dom';
+
+const ConnectionsPage = () => {
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <Helmet>
+        <title>끄적끄적 | 친구</title>
+      </Helmet>
+      <S.MainDashBoardLayout>
+        <Navbar />
+        <S.MainDashBoardContainer>
+          <S.HeaderLayout>
+            <Flex>
+              <img src={leftarrow} onClick={() => navigate(`/mypage`)} />
+              <S.TitleWrapper>
+                <p>친구 목록</p>
+              </S.TitleWrapper>
+              <S.SecondaryTitleWrapper onClick={() => navigate(`/connectionsSearch`)}>
+                <p>친구 찾기</p>
+              </S.SecondaryTitleWrapper>
+            </Flex>
+          </S.HeaderLayout>
+
+          <S.ConnectionsWrapper>
+            <Connection />
+            <Connection />
+            <Connection />
+            <Connection />
+          </S.ConnectionsWrapper>
+        </S.MainDashBoardContainer>
+
+        {/* 페이지네이션 */}
+        {/* <S.PaginationWrapper>
+          <Pagination count={pageInfo?.totalPages} page={page} onChange={handleChangePage} />
+        </S.PaginationWrapper> */}
+      </S.MainDashBoardLayout>
+    </>
+  );
+};
+
+export default ConnectionsPage;
diff --git a/src/pages/ConnectionsPage/ConnectionsPageStyled.tsx b/src/pages/ConnectionsPage/ConnectionsPageStyled.tsx
@@ -0,0 +1,64 @@
+import { styled } from 'styled-components';
+import theme from '../../styles/Theme/Theme';
+
+export const MainDashBoardLayout = styled.div`
+  width: 100vw;
+  min-width: 100vw;
+  height: 100vh;
+  display: flex;
+`;
+
+export const MainDashBoardContainer = styled.section`
+  width: 100%;
+  padding: 4.3125rem 2.5rem;
+  overflow: hidden;
+  hr {
+    border: 1px solid #f4f4f4;
+  }
+`;
+
+export const HeaderLayout = styled.div`
+  padding-bottom: 13px;
+  border-bottom: 1px solid #f4f4f4;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  img {
+    width: 1.5rem;
+    cursor: pointer;
+  }
+`;
+
+export const TitleWrapper = styled.div`
+  p {
+    font-size: 1.5rem;
+    font-weight: ${theme.font.weight.bold};
+    margin-right: 13px;
+  }
+`;
+
+export const SecondaryTitleWrapper = styled(TitleWrapper)`
+  p {
+    font-size: 1rem;
+    color: ${theme.color.gray};
+    cursor: pointer;
+  }
+`;
+
+export const ConnectionsWrapper = styled.div`
+  width: 100%;
+  height: fit-content;
+  margin-top: 2rem;
+
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  overflow: hidden;
+
+  &:after {
+    content: '';
+    flex-basis: calc(100% / 2 - 5rem); /* 빈 공간을 채워서 왼쪽 정렬처럼 보이게 함 */
+  }
+`;
diff --git a/src/pages/ConnectionsSearchPage/ConnectionsSearchPage.tsx b/src/pages/ConnectionsSearchPage/ConnectionsSearchPage.tsx
@@ -0,0 +1,74 @@
+import { Helmet } from 'react-helmet-async';
+import Flex from '../../components/Flex';
+import Navbar from '../../components/Navbar';
+import * as S from './ConnectionsSearchPageStyled';
+import leftarrow from '../../img/leftarrow.png';
+import Connection from '../../components/Connection/Connection';
+import Pagination from '../../components/CustomPagination';
+import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+import SearchIcon from './SearchIcon';
+
+const ConnectionsPage = () => {
+  const navigate = useNavigate();
+  const [keyword, setKeyword] = useState<string>('');
+
+  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setKeyword(e.target.value);
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>끄적끄적 | 친구</title>
+      </Helmet>
+      <S.MainDashBoardLayout>
+        <Navbar />
+        <S.MainDashBoardContainer>
+          <S.HeaderLayout>
+            <Flex>
+              <img src={leftarrow} onClick={() => navigate(`/mypage`)} />
+              <S.TitleWrapper>
+                <p>친구 찾기</p>
+              </S.TitleWrapper>
+              <S.SecondaryTitleWrapper onClick={() => navigate(`/connections`)}>
+                <p>친구 목록</p>
+              </S.SecondaryTitleWrapper>
+            </Flex>
+          </S.HeaderLayout>
+
+          <S.SearchLayout>
+            <S.SearchBarContainer>
+              <SearchIcon />
+
+              <S.InputWrapper
+                placeholder="이메일 / 닉네임#고유번호로 검색하기"
+                type="text"
+                value={keyword}
+                name="keyword"
+                onChange={handleInput}
+              ></S.InputWrapper>
+            </S.SearchBarContainer>
+          </S.SearchLayout>
+
+          <S.SectionTitleWrapper>
+            <p>검색 결과</p>
+          </S.SectionTitleWrapper>
+          <S.ConnectionsWrapper>
+            <Connection />
+            <Connection />
+            <Connection />
+            <Connection />
+          </S.ConnectionsWrapper>
+        </S.MainDashBoardContainer>
+
+        {/* 페이지네이션 */}
+        {/* <S.PaginationWrapper>
+          <Pagination count={pageInfo?.totalPages} page={page} onChange={handleChangePage} />
+        </S.PaginationWrapper> */}
+      </S.MainDashBoardLayout>
+    </>
+  );
+};
+
+export default ConnectionsPage;