Feat/UI (#126)

* chore:반응형 ui * design:자잘자잘 Ui
JMarketYard · Feb 20, 2025 · 317762c · 317762c
1 parent 2b62a71
commit 317762c
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 55 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,12 +1,12 @@
 import { ModalContextProvider } from './components/Modal/context/ModalContext';
 import Router from './routes/router';
-// import SearchBox from './components/SearchBox';
-import { useEffect } from 'react';
 import { AuthProvider } from './context/AuthProvider';
+import GlobalStyle from './styles/globalStyle';
 
 function App() {
   return (
     <>
+      <GlobalStyle />
       <AuthProvider>
         <ModalContextProvider>
           <Router />

diff --git a/src/pages/charge/chargePage.tsx b/src/pages/charge/chargePage.tsx
@@ -73,10 +73,8 @@ function ChargePage() {
               <Dot />
               <Title>티켓 충전/환전</Title>
             </Titles>
-            <CheckBox>
-              <Short onClick={() => navigate('/mypage/payment')}>
-                충전/ 환전 내역 조회하기
-              </Short>
+            <CheckBox onClick={() => navigate('/mypage/payment')}>
+              <Short>충전/ 환전 내역 조회하기</Short>
               <Icon
                 icon="weui:arrow-outlined"
                 style={{
@@ -197,6 +195,7 @@ const CheckBox = styled.div`
   display: flex;
   column-gap: 30px;
   align-items: center;
+  cursor: pointer;
 `;
 
 const Short = styled.div`

diff --git a/src/pages/charge/components/tab/TabPage.tsx b/src/pages/charge/components/tab/TabPage.tsx
@@ -317,6 +317,7 @@ const HistoryContaienr = styled.div`
   position: absolute;
   top: 7px;
   right: 7px;
+  cursor: pointer;
   ${media.small`
       top: -4px;
       right: -5px;

diff --git a/src/pages/mypage/FollowingList.tsx b/src/pages/mypage/FollowingList.tsx
@@ -1,36 +1,39 @@
-import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom"; // ✅ 유저 프로필 페이지 이동을 위해 추가
-import styled from "styled-components";
-import BigTitle from "../../components/BigTitle";
-import FollowingItem from "../../components/FollowingItem";
-import FollowNoModal from "../../components/Modal/modals/FollowNoModal";
-import axiosInstance from "../../apis/axiosInstance";
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom'; // ✅ 유저 프로필 페이지 이동을 위해 추가
+import styled from 'styled-components';
+import BigTitle from '../../components/BigTitle';
+import FollowingItem from '../../components/FollowingItem';
+import FollowNoModal from '../../components/Modal/modals/FollowNoModal';
+import axiosInstance from '../../apis/axiosInstance';
+import media from '../../styles/media';
 
 const FollowingList: React.FC = () => {
   const navigate = useNavigate(); // ✅ 네비게이션 훅 추가
   const [isDeleteMode, setIsDeleteMode] = useState(false);
-  const [checkedItems, setCheckedItems] = useState<{ [key: number]: boolean }>({});
+  const [checkedItems, setCheckedItems] = useState<{ [key: number]: boolean }>(
+    {},
+  );
   const [followingList, setFollowingList] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [modalMessage, setModalMessage] = useState<string | null>(null);
 
   const fetchFollowingList = async () => {
     setLoading(true);
     try {
-      const { data } = await axiosInstance.get("/api/member/follow/list");
+      const { data } = await axiosInstance.get('/api/member/follow/list');
 
       if (data.isSuccess) {
         setFollowingList(
           data.result.map((store: any) => ({
             ...store,
             username: store.storeName || `상점 ${store.storeId}`,
-          }))
+          })),
         );
       } else {
         setFollowingList([]);
       }
     } catch (error) {
-      console.error("팔로잉 목록을 불러오는 중 오류 발생:", error);
+      console.error('팔로잉 목록을 불러오는 중 오류 발생:', error);
       setFollowingList([]);
     } finally {
       setLoading(false);
@@ -51,7 +54,7 @@ const FollowingList: React.FC = () => {
       .map((key) => parseInt(key, 10));
 
     if (storeIdsToUnfollow.length === 0) {
-      alert("선택된 팔로우가 없습니다.");
+      alert('선택된 팔로우가 없습니다.');
       return;
     }
 
@@ -60,7 +63,7 @@ const FollowingList: React.FC = () => {
         console.log(`언팔로우 요청: storeId=${storeId}`);
 
         const response = await axiosInstance.delete(
-          `/api/member/follow/cancel?storeId=${storeId}`
+          `/api/member/follow/cancel?storeId=${storeId}`,
         );
 
         if (response.data.isSuccess) {
@@ -70,11 +73,14 @@ const FollowingList: React.FC = () => {
         }
       }
 
-      setModalMessage("팔로우가 취소되었습니다.");
+      setModalMessage('팔로우가 취소되었습니다.');
       fetchFollowingList();
     } catch (error: any) {
-      console.error("팔로우 취소 중 오류 발생:", error.response?.data || error.message);
-      setModalMessage("팔로우 취소에 실패했습니다. 다시 시도해주세요.");
+      console.error(
+        '팔로우 취소 중 오류 발생:',
+        error.response?.data || error.message,
+      );
+      setModalMessage('팔로우 취소에 실패했습니다. 다시 시도해주세요.');
     } finally {
       setCheckedItems({});
       setIsDeleteMode(false);
@@ -100,10 +106,14 @@ const FollowingList: React.FC = () => {
           {isDeleteMode ? (
             <>
               <DeleteButton onClick={handleUnfollow}>팔로우 취소</DeleteButton>
-              <CancelButton onClick={() => setIsDeleteMode(false)}>선택 취소</CancelButton>
+              <CancelButton onClick={() => setIsDeleteMode(false)}>
+                선택 취소
+              </CancelButton>
             </>
           ) : (
-            <SelectButton onClick={() => setIsDeleteMode(true)}>선택</SelectButton>
+            <SelectButton onClick={() => setIsDeleteMode(true)}>
+              선택
+            </SelectButton>
           )}
         </ButtonWrapper>
       </BigTitleWrapper>
@@ -129,7 +139,12 @@ const FollowingList: React.FC = () => {
         )}
       </ListContainer>
 
-      {modalMessage && <FollowNoModal onClose={() => setModalMessage(null)} message={modalMessage} />}
+      {modalMessage && (
+        <FollowNoModal
+          onClose={() => setModalMessage(null)}
+          message={modalMessage}
+        />
+      )}
     </Container>
   );
 };
@@ -160,6 +175,9 @@ const ButtonWrapper = styled.div`
   right: 0;
   display: flex;
   gap: 10px;
+  ${media.notLarge`
+    right:45px
+  `}
 `;
 
 const SelectButton = styled.button`

diff --git a/src/pages/mypage/mypage.tsx b/src/pages/mypage/mypage.tsx
@@ -6,6 +6,7 @@ import BigTitle from '../../components/BigTitle';
 import ProfileComponent from '../../components/ProfileComponent';
 import NameEditModal from '../../components/Modal/modals/NameEditModal';
 import axiosInstance from '../../apis/axiosInstance';
+import media from '../../styles/media';
 
 interface ProfileData {
   nickname: string;
@@ -25,7 +26,9 @@ const MyProfilePage: React.FC = () => {
     setLoading(true);
     try {
       const endpoint =
-        selectedToggle === '응모한 래플' ? '/api/member/mypage' : '/api/member/mypage/myRaffles';
+        selectedToggle === '응모한 래플'
+          ? '/api/member/mypage'
+          : '/api/member/mypage/myRaffles';
       const { data } = await axiosInstance.get(endpoint);
 
       if (data.isSuccess) {
@@ -53,11 +56,12 @@ const MyProfilePage: React.FC = () => {
   return (
     <Container>
       <InnerContainer>
-      <TitleContainer>
-        <StyledBigTitle>장마당 주최자</StyledBigTitle>
-        <SettingsLink to='/mypage/setting'>설정 및 내 정보 수정하기 &gt;</SettingsLink>
-      </TitleContainer>
-
+        <TitleContainer>
+          <StyledBigTitle>장마당 주최자</StyledBigTitle>
+          <SettingsLink to="/mypage/setting">
+            설정 및 내 정보 수정하기 &gt;
+          </SettingsLink>
+        </TitleContainer>
 
         {profileData && (
           <ProfileComponent
@@ -71,14 +75,14 @@ const MyProfilePage: React.FC = () => {
           <ToggleIndicator selectedToggle={selectedToggle} />
           <ToggleOption
             selectedToggle={selectedToggle}
-            value='응모한 래플'
+            value="응모한 래플"
             onClick={() => setSelectedToggle('응모한 래플')}
           >
             응모한 래플
           </ToggleOption>
           <ToggleOption
             selectedToggle={selectedToggle}
-            value='주최하는 래플'
+            value="주최하는 래플"
             onClick={() => setSelectedToggle('주최하는 래플')}
           >
             주최하는 래플
@@ -139,8 +143,8 @@ const InnerContainer = styled.div`
 const ToggleContainer = styled.div`
   position: relative;
   width: 100%;
-  max-width: 500px; /* ✅ 최대 너비 설정 */
-  height: 58px; /* ✅ 높이 고정 */
+  max-width: 500px;
+  height: 58px;
   border-radius: 50px;
   background: #f5f5f5;
   margin-bottom: 45px;
@@ -158,7 +162,8 @@ const ToggleIndicator = styled.div<{ selectedToggle: string }>`
   border-radius: 50px;
   top: 0;
   transition: left 0.3s ease;
-  left: ${({ selectedToggle }) => (selectedToggle === '응모한 래플' ? '0' : '50%')};
+  left: ${({ selectedToggle }) =>
+    selectedToggle === '응모한 래플' ? '0' : '50%'};
 `;
 
 const ToggleOption = styled.div<{ selectedToggle: string; value: string }>`
@@ -167,37 +172,34 @@ const ToggleOption = styled.div<{ selectedToggle: string; value: string }>`
   align-items: center;
   justify-content: center;
   font-weight: 700;
-  font-size: 16px; 
-  height: 100%; 
+  font-size: 16px;
+  height: 100%;
   cursor: pointer;
   position: relative;
-  z-index: 2; 
+  z-index: 2;
 
-  color: ${({ selectedToggle, value }) => (selectedToggle === value ? '#fff' : '#c908ff')};
-  transition: color 0.3s ease; 
+  color: ${({ selectedToggle, value }) =>
+    selectedToggle === value ? '#fff' : '#c908ff'};
+  transition: color 0.3s ease;
 `;
 
-
-
 const ProductGrid = styled.div`
   display: grid;
   grid-gap: 24px; 
   padding: 20px;
   place-items: center; 
-
   grid-template-columns: repeat(4, minmax(250px, 1fr));
 
-  @media (max-width: 1280px) { /* 넓은 태블릿 */
-    grid-template-columns: repeat(3, minmax(250px, 1fr)); 
-  }
-
-  @media (max-width: 960px) { /* 태블릿 */
-    grid-template-columns: repeat(2, minmax(250px, 1fr)); 
-  }
-
-  @media (max-width: 580px) { /* 스마트폰 */
-    grid-template-columns: repeat(1, minmax(250px, 1fr)); 
-  }
+  ${media.medium`
+    grid-template-columns: repeat(3, 1fr);
+    gap: 9px;
+    max-width: 100%;
+    padding-left:0px
+  `}
+  ${media.small`
+    grid-template-columns: repeat(1, 1fr);
+    gap: 9px;
+  `}
 `;
 
 

diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts
@@ -0,0 +1,27 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+  @font-face {
+    font-family: "Pretendard";
+    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff2") format("woff2");
+    font-weight: 400;
+    font-style: normal;
+  }
+
+  * {
+    font-family: "Pretendard", sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: "Pretendard", sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    background-color: #ffffff;
+    color: #000000;
+  }
+`;
+
+export default GlobalStyle;