From b8acf0c8a3d9c961606393121b396b9005a2eb52 Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Tue, 3 Dec 2024 18:19:42 +0900 Subject: [PATCH 01/17] =?UTF-8?q?Design:=20ClothingInfoItem=20=EC=A4=84?= =?UTF-8?q?=EB=B0=94=EA=BF=88=20=EC=8B=9C=20=EB=8B=A8=EC=96=B4=20=EB=8B=A8?= =?UTF-8?q?=EC=9C=84=EB=A1=9C=20=EB=82=B4=EB=A6=AC=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ClothingInfoItem/styles.tsx | 9 +++++++-- src/pages/PostUpload/SearchBottomSheetContent/styles.tsx | 7 +++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/ClothingInfoItem/styles.tsx b/src/components/ClothingInfoItem/styles.tsx index 3a3d5139..ea55307c 100644 --- a/src/components/ClothingInfoItem/styles.tsx +++ b/src/components/ClothingInfoItem/styles.tsx @@ -25,7 +25,6 @@ export const ClothingInfoLeft = styled.div` .infoDetail { overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; width: 75%; display: flex; @@ -40,7 +39,13 @@ export const ClothingInfoLeft = styled.div` .model { margin-right: auto; color: ${({ theme }) => theme.colors.black}; - //overflow-x: hidden; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; /* 최대 2줄로 제한 */ + -webkit-box-orient: vertical; + word-break: keep-all; /* 단어 단위로 줄바꿈 */ + overflow-wrap: break-word; /* 단어가 너무 길 경우 다음 줄로 넘김 */ } `; diff --git a/src/pages/PostUpload/SearchBottomSheetContent/styles.tsx b/src/pages/PostUpload/SearchBottomSheetContent/styles.tsx index c2639a89..b14f9946 100644 --- a/src/pages/PostUpload/SearchBottomSheetContent/styles.tsx +++ b/src/pages/PostUpload/SearchBottomSheetContent/styles.tsx @@ -132,6 +132,13 @@ export const SearchResultItem = styled.div` .detail { margin-right: auto; color: ${({ theme }) => theme.colors.black}; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; /* 최대 2줄로 제한 */ + -webkit-box-orient: vertical; + word-break: keep-all; /* 단어 단위로 줄바꿈 */ + overflow-wrap: break-word; } &:last-child { From 557186bb546b73525bf593ab1d08bdad6c9ba000 Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Tue, 3 Dec 2024 21:24:38 +0900 Subject: [PATCH 02/17] =?UTF-8?q?Design:=20UI=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/NavbarProfile/styles.tsx | 3 -- src/components/PostItem/style.tsx | 2 +- src/pages/AccountCancel/index.tsx | 16 +++------ src/pages/AccountCancel/styles.tsx | 33 +++++++++++++++---- src/pages/MyPage/ButtonSecondary/index.tsx | 2 +- src/pages/MyPage/ButtonSecondary/styles.tsx | 6 ++-- .../SearchBottomSheetContent/index.tsx | 1 + 7 files changed, 38 insertions(+), 25 deletions(-) diff --git a/src/components/NavbarProfile/styles.tsx b/src/components/NavbarProfile/styles.tsx index 6cfb4d00..87cabfe6 100644 --- a/src/components/NavbarProfile/styles.tsx +++ b/src/components/NavbarProfile/styles.tsx @@ -5,7 +5,6 @@ export const Nav = styled.nav` justify-content: space-between; align-items: center; padding: 1rem; - margin-left: 0px; position: fixed; /* 화면 상단에 고정 */ top: 0; /* 상단에 위치 */ left: 0; /* 왼쪽에 위치 */ @@ -14,14 +13,12 @@ export const Nav = styled.nav` z-index: 1000; /* 다른 요소들보다 위에 오도록 설정 */ position: sticky; - top: 0; /* 페이지의 최상단에 고정 */ z-index: 998; /* 다른 요소 위에 표시되도록 설정 */ `; export const IconContainer = styled.div` display: flex; align-items: center; - margin-right: 18px; a { display: flex; diff --git a/src/components/PostItem/style.tsx b/src/components/PostItem/style.tsx index 83c253f1..9fbbd389 100644 --- a/src/components/PostItem/style.tsx +++ b/src/components/PostItem/style.tsx @@ -63,7 +63,7 @@ export const PinSvg = styled.img` display: flex; position: absolute; top: 0.75rem; - left: 1.25rem; + left: 0.75rem; justify-content: center; align-items: center; `; diff --git a/src/pages/AccountCancel/index.tsx b/src/pages/AccountCancel/index.tsx index 2f01c16e..62693101 100644 --- a/src/pages/AccountCancel/index.tsx +++ b/src/pages/AccountCancel/index.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { CancelContainer, SubTitle, Text, InfoBox, InfoItem, CheckboxWrapper } from './styles'; +import { CancelContainer, SubTitle, Text, InfoBox, InfoItem, CheckboxWrapper, CheckboxInput } from './styles'; import { StyledText } from '../../components/Text/StyledText'; import theme from '../../styles/theme'; import { OODDFrame } from '../../components/Frame/Frame'; @@ -11,7 +11,6 @@ import back from '../../assets/arrow/left.svg'; import BottomButton from '../../components/BottomButton'; import { patchUserWithdrawApi } from '../../apis/user'; - const AccountCancel: React.FC = () => { const [isChecked, setIsChecked] = useState(false); const navigate = useNavigate(); @@ -61,18 +60,13 @@ const AccountCancel: React.FC = () => { navigate(-1)} /> - + OOTD 탈퇴 전 확인하세요! - - 탈퇴하시면 이용 중인 서비스가 폐쇄되며, - - - - - 모든 데이터는 복구할 수 없습니다. + + {`탈퇴하시면 이용 중인 서비스가 폐쇄되며,\n모든 데이터는 복구할 수 없습니다.`} @@ -83,7 +77,7 @@ const AccountCancel: React.FC = () => { - + 안내사항을 모두 확인하였으며, 이에 동의합니다. diff --git a/src/pages/AccountCancel/styles.tsx b/src/pages/AccountCancel/styles.tsx index 4931d25d..4a28f07a 100644 --- a/src/pages/AccountCancel/styles.tsx +++ b/src/pages/AccountCancel/styles.tsx @@ -8,7 +8,7 @@ export const CancelContainer = styled.div` margin: 0 auto; width: 100%; flex-grow: 1; /* flexbox에서 공간을 채우도록 설정 */ - padding: 1.25rem; /* 20px */ + //padding: 1.25rem; /* 20px */ display: flex; flex-direction: column; `; @@ -35,7 +35,7 @@ export const InfoBox = styled.div` background: #f5f5f5; padding: 70px; /* 20px */ margin-top: 10px; - border-radius: 10px; + border-radius: 10px; margin: 10px 20px 1.25rem 20px; /* 10px 위 여백, 20px 좌우 여백, 20px 아래 여백 */ `; @@ -48,19 +48,40 @@ export const InfoItem = styled.p` align-items: center; text-align: center; height: 100%; /* 부모 컨테이너의 높이에 맞추기 */ - `; export const CheckboxWrapper = styled.div` display: flex; align-items: center; - margin-bottom: 1.25rem; - padding: 0rem 15px; + margin-bottom: 1.25rem; + padding: 0rem 15px; input[type='checkbox'] { margin-right: 0.625rem; /* 10px */ - border-radius: 50%; + } +`; +export const CheckboxInput = styled.input` + margin-right: 0.625rem; + cursor: pointer; + appearance: none; /* 기본 스타일 제거 */ + width: 1.25rem; + height: 1.25rem; + border: 0.125rem solid #e0e0e0; + border-radius: 0.25rem; + position: relative; + &:checked { + background-color: #ffbbda; + border-color: #ff2389; + } + &:checked::after { + content: '✓'; + color: white; + font-size: 0.875rem; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); /* 정확히 중앙으로 배치 */ } `; diff --git a/src/pages/MyPage/ButtonSecondary/index.tsx b/src/pages/MyPage/ButtonSecondary/index.tsx index c9201b58..3ce66152 100644 --- a/src/pages/MyPage/ButtonSecondary/index.tsx +++ b/src/pages/MyPage/ButtonSecondary/index.tsx @@ -8,7 +8,7 @@ const ButtonSecondary: React.FC = () => { const navigate = useNavigate(); const handleClick = () => { - navigate('/profile/edit'); + navigate('/profile/edit'); }; return ( diff --git a/src/pages/MyPage/ButtonSecondary/styles.tsx b/src/pages/MyPage/ButtonSecondary/styles.tsx index 715b35c9..03dbe2c8 100644 --- a/src/pages/MyPage/ButtonSecondary/styles.tsx +++ b/src/pages/MyPage/ButtonSecondary/styles.tsx @@ -1,9 +1,9 @@ import styled from 'styled-components'; export const Button = styled.button` - width: 100%; - margin: 1.25rem auto; - height: 3.1rem; + width: auto; + margin: 1.25rem; + height: 3.1rem; text-align: center; color: #ff2389; cursor: pointer; diff --git a/src/pages/PostUpload/SearchBottomSheetContent/index.tsx b/src/pages/PostUpload/SearchBottomSheetContent/index.tsx index b3c1b0bc..e1e3b3d6 100644 --- a/src/pages/PostUpload/SearchBottomSheetContent/index.tsx +++ b/src/pages/PostUpload/SearchBottomSheetContent/index.tsx @@ -93,6 +93,7 @@ const SearchBottomSheetContent: React.FC = ({ onClose, o // 타겟 요소가 뷰포트에 들어오고 로딩 중이 아닐 때 결과 로드 함수 호출 if (entry.isIntersecting && !isLoading) { loadResults(); + console.log('감지'); } }; From 209a31d3d27842f413be1e8f0cfe8aef4274366b Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Tue, 3 Dec 2024 21:29:42 +0900 Subject: [PATCH 03/17] =?UTF-8?q?Design:=20Modal=20=EC=97=AC=EB=B0=B1=20?= =?UTF-8?q?=EB=8A=98=EB=A6=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Modal/styles.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Modal/styles.tsx b/src/components/Modal/styles.tsx index 7dd1de82..6572401f 100644 --- a/src/components/Modal/styles.tsx +++ b/src/components/Modal/styles.tsx @@ -20,11 +20,11 @@ export const ModalContainer = styled.div<{ $isCloseButtonVisible: boolean }>` align-items: center; justify-content: center; text-align: center; - gap: 1rem; + gap: 1.5rem; width: 21.25rem; max-width: calc(100% - 2.5rem); max-height: 30%; - padding: 1.25rem; + padding: 2rem 1.5rem 1.5rem 1.5rem; ${({ $isCloseButtonVisible }) => ($isCloseButtonVisible ? 'padding-top: 2.5rem' : '')}; background-color: ${({ theme }) => theme.colors.white}; border-radius: 0.625rem; From ad82409c2b9cd4e43b3c2e11e89ba2da51d924fa Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Thu, 19 Dec 2024 17:28:36 +0900 Subject: [PATCH 04/17] =?UTF-8?q?Feat:=20=EC=BB=AC=EB=9F=AC=EC=8B=9C?= =?UTF-8?q?=EC=8A=A4=ED=85=9C=20=EA=B5=AC=EC=B6=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/theme.ts | 67 +++++++++++++++++++++++++++++++++++++++------ 1 file changed, 59 insertions(+), 8 deletions(-) diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 8fb6bcb1..da6d2ac2 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -2,16 +2,67 @@ import { DefaultTheme, css } from 'styled-components'; const theme: DefaultTheme = { colors: { - gradient: 'linear-gradient(93deg, #FF2389 1.22%, #F27575 99.73%)', + // Brand Colors + brand: { + primary: '#FF2389', // Pink-500 + secondary: '#F27575', // 서브 브랜드 색상 + gradient: 'linear-gradient(93deg, #FF2389 1.22%, #F27575 99.73%)', + }, + + gray: { + 50: '#FAFAFA', // 가장 밝은 Gray + 100: '#F8F8F8', + 200: '#E9E9E9', // 기존 gray1 + 300: '#C4C4C4', // 기존 gray2 + 400: '#BDBDBD', + 500: '#9E9E9E', + 600: '#7B7B7B', // 기존 gray3 + 700: '#616161', + 800: '#434343', // 기존 gray4 + 900: '#222222', // 가장 어두운 Gray + }, + black: '#000000', - gray4: '#434343', - gray3: '#7B7B7B', - gray2: '#C4C4C4', - gray1: '#E9E9E9', white: '#FFFFFF', - pink3: '#FF2389', - pink2: '#FFBBDA', - pink1: '#FEEEFB', + + pink: { + 50: '#FFF5F9', // 가장 밝은 Pink + 100: '#FEEEFB', + 200: '#FFD6EB', + 300: '#FFBBDA', + 400: '#FF8FC2', + 500: '#FF2389', // 브랜드 생상 + 600: '#E61E7C', + 700: '#C0196D', + 800: '#9A1458', + 900: '#6E0E3F', // 가장 어두운 Pink + }, + + // Functional Colors + text: { + primary: '#222222', // Gray-900 + secondary: '#616161', // Gray-700 + tertiary: '#9E9E9E', // Gray-500 + caption: '#BDBDBD', // Gray-400 + cta: '#000000', // Black + }, + + background: { + white: '#FFFFFF', + secondary: '#F8F8F8', //Gray-100 (다양한 컴포넌트의 표면 배경) + divider: '#E9E9E9', // Gray-200 + }, + + border: { + active: '#FF2389', // Pink-500 + inactive: '#FFBBDA', // Pink-300 + devider: '#E9E9E9', // Gray-200 + }, + }, + elevation: { + sm: '0px 1px 3px rgba(255, 255, 255, 0.12)', // 작은 그림자 + md: '0px 4px 6px rgba(255, 255, 255, 0.16)', // 중간 그림자 + lg: '0px 10px 15px rgba(255, 255, 255, 0.24)', // 큰 그림자 }, visibleOnMobileTablet: css` @media (max-width: 767px) { From a89ef008225e94e2b600eb151225e9aebe829b2f Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Thu, 19 Dec 2024 19:17:45 +0900 Subject: [PATCH 05/17] =?UTF-8?q?Feat:=20=ED=8F=B0=ED=8A=B8=20=EC=8B=9C?= =?UTF-8?q?=EC=8A=A4=ED=85=9C=20=EA=B5=AC=EC=B6=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/theme.ts | 103 ++++++++++++++++++++++++++++++++++++++------ 1 file changed, 90 insertions(+), 13 deletions(-) diff --git a/src/styles/theme.ts b/src/styles/theme.ts index da6d2ac2..4516c929 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -49,7 +49,7 @@ const theme: DefaultTheme = { background: { white: '#FFFFFF', - secondary: '#F8F8F8', //Gray-100 (다양한 컴포넌트의 표면 배경) + secondary: '#F8F8F8', //Gray-100 (input, 바텀시트 등의 배경) divider: '#E9E9E9', // Gray-200 }, @@ -58,6 +58,16 @@ const theme: DefaultTheme = { inactive: '#FFBBDA', // Pink-300 devider: '#E9E9E9', // Gray-200 }, + + //여기서부터 기존 **추후 삭제 필요** + gradient: 'linear-gradient(93deg, #FF2389 1.22%, #F27575 99.73%)', + gray4: '#434343', + gray3: '#7B7B7B', + gray2: '#C4C4C4', + gray1: '#E9E9E9', + pink3: '#FF2389', + pink2: '#FFBBDA', + pink1: '#FEEEFB', }, elevation: { sm: '0px 1px 3px rgba(255, 255, 255, 0.12)', // 작은 그림자 @@ -110,9 +120,76 @@ const theme: DefaultTheme = { } `, fontStyles: { + // Display (Hero Texts) + heading: { + h1: css` + font-family: 'Pretendard Variable'; + font-size: 2.25rem; /* 36px */ + font-weight: 700; + line-height: 2.75rem; /* 44px */ + `, + h2: css` + font-family: 'Pretendard Variable'; + font-size: 2rem; /* 32px */ + font-weight: 700; + line-height: 2.5rem; /* 40px */ + `, + h3: css` + font-family: 'Pretendard Variable'; + font-size: 1.75rem; /* 28px */ + font-weight: 700; + line-height: 2.25rem; /* 36px */ + `, + h4: css` + font-family: 'Pretendard Variable'; + font-size: 1.375rem; /* 22px */ + font-weight: 700; + line-height: 1.75rem; /* 28px */ + `, + }, + + // Body Text (Main Text Content) + body: { + large: css` + font-family: 'Pretendard Variable'; + font-size: 1.125rem; /* 18px */ + font-weight: 400; + line-height: 1.6875rem; /* 150% */ + `, + medium: css` + font-family: 'Pretendard Variable'; + font-size: 1rem; /* 16px */ + font-weight: 500; + line-height: 1.5rem; /* 150% */ + `, + regular: css` + font-family: 'Pretendard Variable'; + font-size: 1rem; /* 16px */ + font-weight: 400; + line-height: 1.5rem; /* 150% */ + `, + }, + + // Caption (Supporting Texts/Meta Information) + caption: { + primary: css` + font-family: 'Pretendard Variable'; + font-size: 0.875rem; /* 14px */ + font-weight: 500; + line-height: 1.225rem; /* 140% */ + `, + secondary: css` + font-family: 'Pretendard Variable'; + font-size: 0.75rem; /* 12px */ + font-weight: 400; + line-height: 1.05rem; /* 140% */ + `, + }, + + // 여기서부터 기존 폰트 'display1-bold': css` font-family: 'Pretendard Variable'; - font-weight: 800; /* bold */ + font-weight: 700; /* bold */ font-size: 3.5rem; line-height: 128.6%; /* 4.501rem */ letter-spacing: -0.11163rem; @@ -134,7 +211,7 @@ const theme: DefaultTheme = { 'display2-bold': css` font-family: 'Pretendard Variable'; font-size: 2.5rem; - font-weight: 800; + font-weight: 700; line-height: 130%; /* 3.25rem */ letter-spacing: -0.0705rem; `, @@ -155,7 +232,7 @@ const theme: DefaultTheme = { 'title1-bold': css` font-family: 'Pretendard Variable'; font-size: 2.25rem; - font-weight: 800; + font-weight: 700; line-height: 133.4%; /* 3.0015rem */ letter-spacing: -0.06075rem; `, @@ -176,7 +253,7 @@ const theme: DefaultTheme = { 'title2-bold': css` font-family: 'Pretendard Variable'; font-size: 1.75rem; - font-weight: 800; + font-weight: 700; line-height: 135.8%; /* 2.3765rem */ letter-spacing: -0.04131rem; `, @@ -197,7 +274,7 @@ const theme: DefaultTheme = { 'title3-bold': css` font-family: 'Pretendard Variable'; font-size: 1.5rem; - font-weight: 800; + font-weight: 700; line-height: 133.4%; /* 2.001rem */ letter-spacing: -0.0345rem; `, @@ -218,7 +295,7 @@ const theme: DefaultTheme = { 'heading1-bold': css` font-family: 'Pretendard Variable'; font-size: 1.375rem; - font-weight: 800; + font-weight: 700; line-height: 136.4%; /* 1.8755rem */ letter-spacing: -0.02669rem; `, @@ -239,7 +316,7 @@ const theme: DefaultTheme = { 'heading2-bold': css` font-family: 'Pretendard Variable'; font-size: 1.25rem; - font-weight: 800; + font-weight: 700; line-height: 140%; /* 1.75rem */ letter-spacing: -0.0025rem; `, @@ -260,7 +337,7 @@ const theme: DefaultTheme = { 'headline1-bold': css` font-family: 'Pretendard Variable'; font-size: 1.125rem; - font-weight: 800; + font-weight: 700; line-height: 144.5%; /* 1.62563rem */ letter-spacing: -0.00025rem; `, @@ -299,7 +376,7 @@ const theme: DefaultTheme = { 'body1-bold': css` font-family: 'Pretendard Variable'; font-size: 1rem; - font-weight: 800; + font-weight: 700; line-height: 150%; /* 1.5rem */ letter-spacing: -0.00569rem; `, @@ -320,7 +397,7 @@ const theme: DefaultTheme = { 'body2-bold': css` font-family: 'Pretendard Variable'; font-size: 0.9375rem; - font-weight: 800; + font-weight: 700; line-height: 146.7%; /* 1.37531rem */ letter-spacing: -0.009rem; `, @@ -341,7 +418,7 @@ const theme: DefaultTheme = { 'caption1-bold': css` font-family: 'Pretendard Variable'; font-size: 0.75rem; - font-weight: 800; + font-weight: 700; line-height: 133.4%; /* 1.0005rem */ letter-spacing: -0.00188rem; `, @@ -362,7 +439,7 @@ const theme: DefaultTheme = { 'caption2-bold': css` font-family: 'Pretendard Variable'; font-size: 0.6875rem; - font-weight: 800; + font-weight: 700; line-height: 127.3%; /* 0.87519rem */ letter-spacing: -0.00213rem; `, From 8853b5fdcffd83d59d2d5d47aeaf6a42259beb86 Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Tue, 24 Dec 2024 01:12:52 +0900 Subject: [PATCH 06/17] =?UTF-8?q?Feat:=20=ED=8F=B0=ED=8A=B8=EC=8B=9C?= =?UTF-8?q?=EC=8A=A4=ED=85=9C=20=EC=82=AD=EC=A0=9C=20=EB=B0=8F=20=EC=BB=AC?= =?UTF-8?q?=EB=9F=AC=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BottomButton/styles.tsx | 2 +- src/components/ClothingInfoItem/styles.tsx | 2 +- src/pages/PostUpload/index.tsx | 6 +- src/pages/Profile/ButtonSecondary/styles.tsx | 15 ++++ src/styles/theme.ts | 76 ++------------------ 5 files changed, 26 insertions(+), 75 deletions(-) diff --git a/src/components/BottomButton/styles.tsx b/src/components/BottomButton/styles.tsx index d31c235f..bcd7dc6d 100644 --- a/src/components/BottomButton/styles.tsx +++ b/src/components/BottomButton/styles.tsx @@ -16,7 +16,7 @@ export const ButtonWrapper = styled.div` export const Button = styled.button<{ disabled: boolean }>` background: ${({ disabled, theme }) => - disabled ? 'linear-gradient(93deg, #FFC1D6 1.22%, #F8D4D4 99.73%)' : theme.colors.gradient}; + disabled ? 'linear-gradient(93deg, #FFC1D6 1.22%, #F8D4D4 99.73%)' : theme.colors.brand.gradient}; border-radius: 0.625rem; font-size: 1rem; width: calc(100% - 2.5rem); diff --git a/src/components/ClothingInfoItem/styles.tsx b/src/components/ClothingInfoItem/styles.tsx index ea55307c..fb204351 100644 --- a/src/components/ClothingInfoItem/styles.tsx +++ b/src/components/ClothingInfoItem/styles.tsx @@ -6,7 +6,7 @@ export const ClothingInfoItemContainer = styled.li` display: flex; flex-direction: row; align-items: center; - border: 0.0625rem solid ${({ theme }) => theme.colors.pink2}; + border: 0.0625rem solid ${({ theme }) => theme.colors.brand.primaryLight}; border-radius: 0.5rem; padding: 10px; min-width: 20.9375rem; diff --git a/src/pages/PostUpload/index.tsx b/src/pages/PostUpload/index.tsx index 35ab0469..b0e7bd2c 100644 --- a/src/pages/PostUpload/index.tsx +++ b/src/pages/PostUpload/index.tsx @@ -1,6 +1,7 @@ //PostUploadModal/index.tsx import React, { useState, useEffect } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; +import { DefaultTheme, useTheme } from 'styled-components'; import { useRecoilState } from 'recoil'; import { @@ -67,6 +68,7 @@ const PostUpload: React.FC = () => { const location = useLocation(); const navigate = useNavigate(); const userId = localStorage.getItem('my_id'); + const theme = useTheme() as DefaultTheme; const styletags = [ 'classic', @@ -319,11 +321,11 @@ const PostUpload: React.FC = () => {
- + 옷 정보 태그 {clothingInfos.length > 0 && ( - + {clothingInfos.length} )} diff --git a/src/pages/Profile/ButtonSecondary/styles.tsx b/src/pages/Profile/ButtonSecondary/styles.tsx index e69de29b..a7c01716 100644 --- a/src/pages/Profile/ButtonSecondary/styles.tsx +++ b/src/pages/Profile/ButtonSecondary/styles.tsx @@ -0,0 +1,15 @@ +import styled from 'styled-components'; + +export const Button = styled.button` + width: 100%; + margin: 16px auto; + height: 3.1rem; + text-align: center; + color: #ff2389; + cursor: pointer; + box-sizing: border-box; + border: 1px solid; + border-radius: 10px; + border-color: #ff2389; + padding: 10px; +`; diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 4516c929..4481869f 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -5,7 +5,8 @@ const theme: DefaultTheme = { // Brand Colors brand: { primary: '#FF2389', // Pink-500 - secondary: '#F27575', // 서브 브랜드 색상 + primaryLight: '#FFBBDA', // Pink-300 + primaryLighter: '#FEEEFB', // Pink-100 gradient: 'linear-gradient(93deg, #FF2389 1.22%, #F27575 99.73%)', }, @@ -31,7 +32,7 @@ const theme: DefaultTheme = { 200: '#FFD6EB', 300: '#FFBBDA', 400: '#FF8FC2', - 500: '#FF2389', // 브랜드 생상 + 500: '#FF2389', // 브랜드 메인 생상 600: '#E61E7C', 700: '#C0196D', 800: '#9A1458', @@ -40,15 +41,15 @@ const theme: DefaultTheme = { // Functional Colors text: { + cta: '#000000', // Black primary: '#222222', // Gray-900 secondary: '#616161', // Gray-700 tertiary: '#9E9E9E', // Gray-500 caption: '#BDBDBD', // Gray-400 - cta: '#000000', // Black }, background: { - white: '#FFFFFF', + primary: '#FFFFFF', secondary: '#F8F8F8', //Gray-100 (input, 바텀시트 등의 배경) divider: '#E9E9E9', // Gray-200 }, @@ -120,73 +121,6 @@ const theme: DefaultTheme = { } `, fontStyles: { - // Display (Hero Texts) - heading: { - h1: css` - font-family: 'Pretendard Variable'; - font-size: 2.25rem; /* 36px */ - font-weight: 700; - line-height: 2.75rem; /* 44px */ - `, - h2: css` - font-family: 'Pretendard Variable'; - font-size: 2rem; /* 32px */ - font-weight: 700; - line-height: 2.5rem; /* 40px */ - `, - h3: css` - font-family: 'Pretendard Variable'; - font-size: 1.75rem; /* 28px */ - font-weight: 700; - line-height: 2.25rem; /* 36px */ - `, - h4: css` - font-family: 'Pretendard Variable'; - font-size: 1.375rem; /* 22px */ - font-weight: 700; - line-height: 1.75rem; /* 28px */ - `, - }, - - // Body Text (Main Text Content) - body: { - large: css` - font-family: 'Pretendard Variable'; - font-size: 1.125rem; /* 18px */ - font-weight: 400; - line-height: 1.6875rem; /* 150% */ - `, - medium: css` - font-family: 'Pretendard Variable'; - font-size: 1rem; /* 16px */ - font-weight: 500; - line-height: 1.5rem; /* 150% */ - `, - regular: css` - font-family: 'Pretendard Variable'; - font-size: 1rem; /* 16px */ - font-weight: 400; - line-height: 1.5rem; /* 150% */ - `, - }, - - // Caption (Supporting Texts/Meta Information) - caption: { - primary: css` - font-family: 'Pretendard Variable'; - font-size: 0.875rem; /* 14px */ - font-weight: 500; - line-height: 1.225rem; /* 140% */ - `, - secondary: css` - font-family: 'Pretendard Variable'; - font-size: 0.75rem; /* 12px */ - font-weight: 400; - line-height: 1.05rem; /* 140% */ - `, - }, - - // 여기서부터 기존 폰트 'display1-bold': css` font-family: 'Pretendard Variable'; font-weight: 700; /* bold */ From 94d9c069c34f425dbee1c8229f4503e56f40951d Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Tue, 24 Dec 2024 01:44:41 +0900 Subject: [PATCH 07/17] =?UTF-8?q?Feat:=20text=20=EC=BB=AC=EB=9F=AC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/theme.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 4481869f..d53cc71d 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -42,15 +42,15 @@ const theme: DefaultTheme = { // Functional Colors text: { cta: '#000000', // Black - primary: '#222222', // Gray-900 - secondary: '#616161', // Gray-700 + primary: '#4343432', // Gray-800 + secondary: '##7B7B7B', // Gray-600 tertiary: '#9E9E9E', // Gray-500 - caption: '#BDBDBD', // Gray-400 + caption: '#C4C4C4', // Gray-300 }, background: { primary: '#FFFFFF', - secondary: '#F8F8F8', //Gray-100 (input, 바텀시트 등의 배경) + secondary: '#F8F8F8', //Gray-100 (input, 데스크탑의 사이드 바텀시트 등의 배경) divider: '#E9E9E9', // Gray-200 }, From 831619621153ccb5036afd31a339edb90ebd027a Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Tue, 24 Dec 2024 01:51:53 +0900 Subject: [PATCH 08/17] =?UTF-8?q?Fix:=20=EB=B9=8C=EB=93=9C=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PostUpload/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/PostUpload/index.tsx b/src/pages/PostUpload/index.tsx index b0e7bd2c..500bc641 100644 --- a/src/pages/PostUpload/index.tsx +++ b/src/pages/PostUpload/index.tsx @@ -1,7 +1,6 @@ //PostUploadModal/index.tsx import React, { useState, useEffect } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; -import { DefaultTheme, useTheme } from 'styled-components'; import { useRecoilState } from 'recoil'; import { @@ -68,7 +67,6 @@ const PostUpload: React.FC = () => { const location = useLocation(); const navigate = useNavigate(); const userId = localStorage.getItem('my_id'); - const theme = useTheme() as DefaultTheme; const styletags = [ 'classic', From 1dd6ca835bef30177b4f233f2d47e2b660ebbc38 Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Tue, 24 Dec 2024 02:38:20 +0900 Subject: [PATCH 09/17] =?UTF-8?q?Refactor:=20Post=20&=20MyPost=20=EB=B3=91?= =?UTF-8?q?=ED=95=A9=20=ED=9B=84=20=EC=A1=B0=EA=B1=B4=EB=B6=80=20=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 - src/pages/MyPost/index.tsx | 152 ------------------ src/pages/MyPost/styles.tsx | 10 -- .../Post}/PostBase/ImageSwiper/index.tsx | 0 .../Post}/PostBase/ImageSwiper/styles.tsx | 0 .../CommentItem/dto.ts | 2 +- .../CommentItem/index.tsx | 4 +- .../CommentItem/styles.tsx | 0 .../MenuButtonList/dto.ts | 0 .../MenuButtonList/index.tsx | 2 +- .../MenuButtonList/styles.tsx | 0 .../LikeCommentBottomSheetContent/index.tsx | 26 +-- .../LikeCommentBottomSheetContent/styles.tsx | 4 +- .../Post}/PostBase/dto.ts | 0 .../Post}/PostBase/index.tsx | 25 ++- .../Post}/PostBase/styles.tsx | 2 +- src/pages/Post/index.tsx | 144 ++++++++++++++++- src/pages/Profile/index.tsx | 16 +- 18 files changed, 174 insertions(+), 215 deletions(-) delete mode 100644 src/pages/MyPost/index.tsx delete mode 100644 src/pages/MyPost/styles.tsx rename src/{components => pages/Post}/PostBase/ImageSwiper/index.tsx (100%) rename src/{components => pages/Post}/PostBase/ImageSwiper/styles.tsx (100%) rename src/{components => pages/Post}/PostBase/LikeCommentBottomSheetContent/CommentItem/dto.ts (74%) rename src/{components => pages/Post}/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx (92%) rename src/{components => pages/Post}/PostBase/LikeCommentBottomSheetContent/CommentItem/styles.tsx (100%) rename src/{components => pages/Post}/PostBase/LikeCommentBottomSheetContent/MenuButtonList/dto.ts (100%) rename src/{components => pages/Post}/PostBase/LikeCommentBottomSheetContent/MenuButtonList/index.tsx (93%) rename src/{components => pages/Post}/PostBase/LikeCommentBottomSheetContent/MenuButtonList/styles.tsx (100%) rename src/{components => pages/Post}/PostBase/LikeCommentBottomSheetContent/index.tsx (94%) rename src/{components => pages/Post}/PostBase/LikeCommentBottomSheetContent/styles.tsx (95%) rename src/{components => pages/Post}/PostBase/dto.ts (100%) rename src/{components => pages/Post}/PostBase/index.tsx (90%) rename src/{components => pages/Post}/PostBase/styles.tsx (98%) diff --git a/src/App.tsx b/src/App.tsx index 140061b0..a12cd4ed 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,7 +14,6 @@ import AccountCancel from './pages/AccountCancel'; import Verification from './pages/verification'; import Post from './pages/Post'; -import MyPost from './pages/MyPost'; import PostUpload from './pages/PostUpload'; import PostImageSelect from './pages/PostImageSelect'; import PostInstaConnect from './pages/PostInstaConnect'; @@ -43,7 +42,6 @@ const protectedRoutes = [ { path: '/verification', element: }, { path: '/post/:postId', element: }, - { path: '/my-post/:postId', element: }, { path: '/upload', element: }, { path: '/image-select', element: }, { path: '/insta-connect', element: }, diff --git a/src/pages/MyPost/index.tsx b/src/pages/MyPost/index.tsx deleted file mode 100644 index c5d2c865..00000000 --- a/src/pages/MyPost/index.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import React, { useState, useEffect } from 'react'; - -import { useParams, useNavigate } from 'react-router-dom'; - -import { useRecoilState } from 'recoil'; -import { isPostRepresentativeAtom } from '../../recoil/Post/PostAtom'; - -import PostBase from '../../components/PostBase'; -import Modal from '../../components/Modal'; -import { ModalProps } from '../../components/Modal/dto'; -import BottomSheet from '../../components/BottomSheet'; -import { BottomSheetProps } from '../../components/BottomSheet/dto'; -import BottomSheetMenu from '../../components/BottomSheetMenu'; -import { BottomSheetMenuProps } from '../../components/BottomSheetMenu/dto'; - -import Edit from '../../assets/default/edit.svg'; -import Pin from '../../assets/default/pin.svg'; -import Delete from '../../assets/default/delete.svg'; - -import { modifyPostRepresentativeStatusApi, deletePostApi } from '../../apis/post'; - -const MyPost: React.FC = () => { - const { postId } = useParams<{ postId: string }>(); - const [isPostRepresentative, setIsPostRepresentative] = useRecoilState(isPostRepresentativeAtom); - const [postPinStatus, setPostPinStatus] = useState<'지정' | '해제'>('지정'); - const [isMenuBottomSheetOpen, setIsMenuBottomSheetOpen] = useState(false); - const [isDeleteConfirmationModalOpen, setIsDeleteConfirmationModalOpen] = useState(false); - const [isApiResponseModalOpen, setIsApiResponseModalOpen] = useState(false); - const [pinPostResultlModalContent, setPinPostResultlModalContent] = useState(''); - const navigate = useNavigate(); - const userId = localStorage.getItem('my_id'); - - - useEffect(() => { - if (isPostRepresentative) { - setPostPinStatus('해제'); - } else { - setPostPinStatus('지정'); - } - }, [isPostRepresentative]); - - const bottomSheetMenuProps: BottomSheetMenuProps = { - items: [ - { - text: `대표 OOTD ${postPinStatus}하기`, - action: () => { - setIsMenuBottomSheetOpen(false); - modifyPostRepresentativeStatus(); - }, - icon: Pin, - }, - { - text: 'OODD 수정하기', - action: () => { - setIsMenuBottomSheetOpen(false); - handlePostEdit(); - }, - icon: Edit, - }, - { - text: 'OOTD 삭제하기', - action: () => { - setIsMenuBottomSheetOpen(false); - setIsDeleteConfirmationModalOpen(true); - }, - icon: Delete, - }, - ], - marginBottom: '50px', - }; - - const menuBottomSheetProps: BottomSheetProps = { - isOpenBottomSheet: isMenuBottomSheetOpen, - Component: BottomSheetMenu, - componentProps: bottomSheetMenuProps, - onCloseBottomSheet: () => setIsMenuBottomSheetOpen(false), - }; - - const handleMenuOpen = () => { - setIsMenuBottomSheetOpen(true); - }; - - const handlePostEdit = () => { - navigate('/upload', { state: { mode: 'edit', postId: postId } }); - }; - - const modifyPostRepresentativeStatus = async () => { - try { - const response = await modifyPostRepresentativeStatusApi(Number(postId)); - - if (response.isSuccess) { - setPinPostResultlModalContent(`대표 OOTD ${postPinStatus}에 성공했어요`); - setIsPostRepresentative((prev) => !prev); - } else { - setPinPostResultlModalContent(`대표 OOTD ${postPinStatus}에 실패했어요\n잠시 뒤 다시 시도해 보세요`); - } - } catch (error) { - console.error('Error pinning post:', error); - } finally { - setIsApiResponseModalOpen(true); - } - }; - - const deletePost = async () => { - try { - const response = await deletePostApi(Number(postId)); - - if (response.isSuccess) { - setPinPostResultlModalContent('OOTD 삭제에 성공했어요'); - - setTimeout(() => { - navigate(`/profile/${userId}`); - }, 1000); - } else { - setPinPostResultlModalContent(`OOTD 삭제에 실패했어요\n잠시 뒤 다시 시도해 보세요`); - } - } catch (error) { - console.error('Error deleting post:', error); - } finally { - setIsApiResponseModalOpen(true); - setIsDeleteConfirmationModalOpen(false); // 확인 모달을 닫음 - } - }; - - const deleteConfirmationModalProps: ModalProps = { - isCloseButtonVisible: true, - onClose: () => setIsDeleteConfirmationModalOpen(false), - content: '해당 OOTD를 삭제하시겠습니까?', - button: { - content: '삭제하기', - onClick: deletePost, - }, - }; - - const apiResponseModalProps: ModalProps = { - onClose: () => setIsApiResponseModalOpen(false), - content: pinPostResultlModalContent, - }; - - return ( - <> - - - - - {isDeleteConfirmationModalOpen && } - {isApiResponseModalOpen && } - - ); -}; - -export default MyPost; diff --git a/src/pages/MyPost/styles.tsx b/src/pages/MyPost/styles.tsx deleted file mode 100644 index e130d565..00000000 --- a/src/pages/MyPost/styles.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import styled from 'styled-components'; - -export const ModalContainer = styled.div` - background: white; - border-radius: 10px 10px 0 0; - max-width: 512px; - position: flex; - height: 377px; - flex-shrink: 0; -`; diff --git a/src/components/PostBase/ImageSwiper/index.tsx b/src/pages/Post/PostBase/ImageSwiper/index.tsx similarity index 100% rename from src/components/PostBase/ImageSwiper/index.tsx rename to src/pages/Post/PostBase/ImageSwiper/index.tsx diff --git a/src/components/PostBase/ImageSwiper/styles.tsx b/src/pages/Post/PostBase/ImageSwiper/styles.tsx similarity index 100% rename from src/components/PostBase/ImageSwiper/styles.tsx rename to src/pages/Post/PostBase/ImageSwiper/styles.tsx diff --git a/src/components/PostBase/LikeCommentBottomSheetContent/CommentItem/dto.ts b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/dto.ts similarity index 74% rename from src/components/PostBase/LikeCommentBottomSheetContent/CommentItem/dto.ts rename to src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/dto.ts index 2e5da179..48059786 100644 --- a/src/components/PostBase/LikeCommentBottomSheetContent/CommentItem/dto.ts +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/dto.ts @@ -1,4 +1,4 @@ -import { Comment } from '../../../../apis/post-comment/dto'; +import { Comment } from '../../../../../apis/post-comment/dto'; export interface CommentItemProps { comment: Comment; diff --git a/src/components/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx similarity index 92% rename from src/components/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx rename to src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx index ad42e400..93f81554 100644 --- a/src/components/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'; import dayjs from 'dayjs'; import 'dayjs/locale/ko'; -import theme from '../../../../styles/theme'; +import theme from '../../../../../styles/theme'; import { StyledBigUserProfile, CommentItem as StyledCommentItem, @@ -12,7 +12,7 @@ import { MenuBtn, } from './styles'; -import { StyledText } from '../../../Text/StyledText'; +import { StyledText } from '../../../../../components/Text/StyledText'; import { CommentItemProps } from './dto'; diff --git a/src/components/PostBase/LikeCommentBottomSheetContent/CommentItem/styles.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/styles.tsx similarity index 100% rename from src/components/PostBase/LikeCommentBottomSheetContent/CommentItem/styles.tsx rename to src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/styles.tsx diff --git a/src/components/PostBase/LikeCommentBottomSheetContent/MenuButtonList/dto.ts b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/dto.ts similarity index 100% rename from src/components/PostBase/LikeCommentBottomSheetContent/MenuButtonList/dto.ts rename to src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/dto.ts diff --git a/src/components/PostBase/LikeCommentBottomSheetContent/MenuButtonList/index.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/index.tsx similarity index 93% rename from src/components/PostBase/LikeCommentBottomSheetContent/MenuButtonList/index.tsx rename to src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/index.tsx index 7fa7b870..b71b111e 100644 --- a/src/components/PostBase/LikeCommentBottomSheetContent/MenuButtonList/index.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { MenuButtonListProps } from './dto'; import { MenuListWrapper, MenuListContainer, MenuButtonItem } from './styles'; -import { StyledText } from '../../../Text/StyledText'; +import { StyledText } from '../../../../../components/Text/StyledText'; const MenuButtonList: React.FC = ({ items, onClose, position }) => { const handleWrapperClick = () => { diff --git a/src/components/PostBase/LikeCommentBottomSheetContent/MenuButtonList/styles.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/styles.tsx similarity index 100% rename from src/components/PostBase/LikeCommentBottomSheetContent/MenuButtonList/styles.tsx rename to src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/styles.tsx diff --git a/src/components/PostBase/LikeCommentBottomSheetContent/index.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx similarity index 94% rename from src/components/PostBase/LikeCommentBottomSheetContent/index.tsx rename to src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx index fb56b4d6..02171561 100644 --- a/src/components/PostBase/LikeCommentBottomSheetContent/index.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx @@ -6,32 +6,32 @@ import { IsCommentDeleteConfirmationModalOpenAtom, IsCommentReportModalOpenAtom, selectedCommentAtom, -} from '../../../recoil/Post/PostCommentAtom'; +} from '../../../../recoil/Post/PostCommentAtom'; import { TabContainer, Tab, ContentContainer, Content, BigUserProfile, LikeItem, InputLayout } from './styles'; -import { StyledText } from '../../Text/StyledText'; -import theme from '../../../styles/theme'; -import Loading from '../../Loading'; -import Modal from '../../Modal'; +import { StyledText } from '../../../../components/Text/StyledText'; +import theme from '../../../../styles/theme'; +import Loading from '../../../../components/Loading'; +import Modal from '../../../../components/Modal'; import CommentItem from './CommentItem'; import MenuButtonList from './MenuButtonList'; import { LikeCommentBottomSheetProps } from '../dto'; -import { ModalProps } from '../../Modal/dto'; -import { GetPostLikeListResponse } from '../../../apis/post-like/dto'; -import { Comment, GetCommentListResponse } from '../../../apis/post-comment/dto'; +import { ModalProps } from '../../../../components/Modal/dto'; +import { GetPostLikeListResponse } from '../../../../apis/post-like/dto'; +import { Comment, GetCommentListResponse } from '../../../../apis/post-comment/dto'; import Delete from '../../../assets/default/delete.svg'; import Block from '../../../assets/default/block.svg'; import Report from '../../../assets/default/report.svg'; import X from '../../../assets/default/x.svg'; -import { getPostLikeListApi } from '../../../apis/post-like'; -import { postUserBlockApi } from '../../../apis/user-block'; -import { PostUserBlockRequest } from '../../../apis/user-block/dto'; -import { createCommentApi, deleteCommentApi, getCommentListApi } from '../../../apis/post-comment'; -import { handleError } from '../../../apis/util/handleError'; +import { getPostLikeListApi } from '../../../../apis/post-like'; +import { postUserBlockApi } from '../../../../apis/user-block'; +import { PostUserBlockRequest } from '../../../../apis/user-block/dto'; +import { createCommentApi, deleteCommentApi, getCommentListApi } from '../../../../apis/post-comment'; +import { handleError } from '../../../../apis/util/handleError'; const LikeCommentBottomSheetContent: React.FC = ({ tab, likeCount, commentCount }) => { const [activeTab, setActiveTab] = useState<'likes' | 'comments'>(tab); diff --git a/src/components/PostBase/LikeCommentBottomSheetContent/styles.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx similarity index 95% rename from src/components/PostBase/LikeCommentBottomSheetContent/styles.tsx rename to src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx index 49de8dbf..3b80412d 100644 --- a/src/components/PostBase/LikeCommentBottomSheetContent/styles.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; -import { StyledText } from '../../Text/StyledText'; -import theme from '../../../styles/theme'; +import { StyledText } from '../../../../components/Text/StyledText'; +import theme from '../../../../styles/theme'; import { UserProfile } from '../styles'; export const TabContainer = styled.div` diff --git a/src/components/PostBase/dto.ts b/src/pages/Post/PostBase/dto.ts similarity index 100% rename from src/components/PostBase/dto.ts rename to src/pages/Post/PostBase/dto.ts diff --git a/src/components/PostBase/index.tsx b/src/pages/Post/PostBase/index.tsx similarity index 90% rename from src/components/PostBase/index.tsx rename to src/pages/Post/PostBase/index.tsx index 7b7b399d..8e108669 100644 --- a/src/components/PostBase/index.tsx +++ b/src/pages/Post/PostBase/index.tsx @@ -5,16 +5,16 @@ import { useRecoilState } from 'recoil'; import dayjs from 'dayjs'; import 'dayjs/locale/ko'; -import theme from '../../styles/theme'; +import theme from '../../../styles/theme'; -import { postIdAtom, userAtom, isPostRepresentativeAtom } from '../../recoil/Post/PostAtom'; +import { postIdAtom, userAtom, isPostRepresentativeAtom } from '../../../recoil/Post/PostAtom'; -import { OODDFrame } from '../Frame/Frame'; -import { StyledText } from '../Text/StyledText'; -import TopBar from '../TopBar'; -import NavBar from '../NavBar'; -import BottomSheet from '../BottomSheet'; -import ClothingInfoItem from '../ClothingInfoItem'; +import { OODDFrame } from '../../../components/Frame/Frame'; +import { StyledText } from '../../../components/Text/StyledText'; +import TopBar from '../../../components/TopBar'; +import NavBar from '../../../components/NavBar'; +import BottomSheet from '../../../components/BottomSheet'; +import ClothingInfoItem from '../../../components/ClothingInfoItem'; import ImageSwiper from './ImageSwiper'; import LikeCommentBottomSheetContent from './LikeCommentBottomSheetContent'; @@ -42,12 +42,12 @@ import LikeFill from '../../assets/default/like-fill.svg'; import Message from '../../assets/default/message.svg'; import More from '../../assets/default/more.svg'; -import { BottomSheetProps } from '../BottomSheet/dto'; +import { BottomSheetProps } from '../../../components/BottomSheet/dto'; import { PostBaseProps } from './dto'; -import { GetPostDetailResponse } from '../../apis/post/dto'; +import { GetPostDetailResponse } from '../../../apis/post/dto'; -import { getPostDetailApi } from '../../apis/post'; -import { togglePostLikeStatusApi } from '../../apis/post-like'; +import { getPostDetailApi } from '../../../apis/post'; +import { togglePostLikeStatusApi } from '../../../apis/post-like'; const PostBase: React.FC = ({ onClickMenu }) => { const { postId } = useParams<{ postId: string }>(); @@ -64,7 +64,6 @@ const PostBase: React.FC = ({ onClickMenu }) => { const nav = useNavigate(); const userId = localStorage.getItem('my_id'); - useEffect(() => { setPostId(Number(postId)); diff --git a/src/components/PostBase/styles.tsx b/src/pages/Post/PostBase/styles.tsx similarity index 98% rename from src/components/PostBase/styles.tsx rename to src/pages/Post/PostBase/styles.tsx index bf1d6dbe..044a9077 100644 --- a/src/components/PostBase/styles.tsx +++ b/src/pages/Post/PostBase/styles.tsx @@ -1,5 +1,5 @@ import styled, { keyframes } from 'styled-components'; -import { StyledText } from '../Text/StyledText'; +import { StyledText } from '../../../components/Text/StyledText'; // 그라데이션 애니메이션 정의 const shimmer = keyframes` diff --git a/src/pages/Post/index.tsx b/src/pages/Post/index.tsx index 69986ff1..4d560229 100644 --- a/src/pages/Post/index.tsx +++ b/src/pages/Post/index.tsx @@ -1,22 +1,90 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; +import { useNavigate, useParams } from 'react-router-dom'; -import { useRecoilValue } from 'recoil'; +import { useRecoilValue, useRecoilState } from 'recoil'; import { postIdAtom, userAtom } from '../../recoil/Post/PostAtom.ts'; +import { isPostRepresentativeAtom } from '../../recoil/Post/PostAtom'; -import PostBase from '../../components/PostBase/index.tsx'; +import PostBase from './PostBase/index.tsx'; import OptionsBottomSheet from '../../components/BottomSheet/OptionsBottomSheet/index.tsx'; import { OptionsBottomSheetProps } from '../../components/BottomSheet/OptionsBottomSheet/dto.ts'; +import Modal from '../../components/Modal'; +import { ModalProps } from '../../components/Modal/dto'; +import BottomSheet from '../../components/BottomSheet'; +import { BottomSheetProps } from '../../components/BottomSheet/dto'; +import BottomSheetMenu from '../../components/BottomSheetMenu'; +import { BottomSheetMenuProps } from '../../components/BottomSheetMenu/dto'; + +import Edit from '../../assets/default/edit.svg'; +import Pin from '../../assets/default/pin.svg'; +import Delete from '../../assets/default/delete.svg'; + +import { modifyPostRepresentativeStatusApi, deletePostApi } from '../../apis/post'; const Post: React.FC = () => { - const [isOptionsBottomSheetOpen, setIsOptionsBottomSheetOpen] = useState(false); const postId = useRecoilValue(postIdAtom); const user = useRecoilValue(userAtom); + const userId = localStorage.getItem('current_user_id'); + + const [isMyPost, setIsMyPost] = useState(false); + const [isPostRepresentative, setIsPostRepresentative] = useRecoilState(isPostRepresentativeAtom); + const [isMyPostMenuBottomSheetOpen, setIsMyPostMenuBottomSheetOpen] = useState(false); + const [isOptionsBottomSheetOpen, setIsOptionsBottomSheetOpen] = useState(false); + + const [isDeleteConfirmationModalOpen, setIsDeleteConfirmationModalOpen] = useState(false); + const [isApiResponseModalOpen, setIsApiResponseModalOpen] = useState(false); + const [modalContent, setModalContent] = useState(''); + const [postPinStatus, setPostPinStatus] = useState<'지정' | '해제'>('지정'); + const navigate = useNavigate(); + + useEffect(() => { + // 현재 게시글이 내 게시글인지 확인 + if (user?.id && postId) { + setIsMyPost(Number(userId) === user.id); + } + }, [user, postId]); const handleMenuOpen = () => { - setIsOptionsBottomSheetOpen(true); + { + isMyPost ? setIsMyPostMenuBottomSheetOpen(true) : setIsOptionsBottomSheetOpen(true); + } }; - // 게시글 옵션(더보기) 바텀시트 + useEffect(() => { + setPostPinStatus(isPostRepresentative ? '해제' : '지정'); + }, [isPostRepresentative]); + + // MyPost 전용 메뉴 구성 + const myPostMenuProps: BottomSheetMenuProps = { + items: [ + { + text: `대표 OOTD ${postPinStatus}하기`, + action: () => { + setIsMyPostMenuBottomSheetOpen(false); + modifyPostRepresentativeStatus(); + }, + icon: Pin, + }, + { + text: 'OOTD 수정하기', + action: () => { + setIsMyPostMenuBottomSheetOpen(false); + navigate('/upload', { state: { mode: 'edit', postId: postId } }); + }, + icon: Edit, + }, + { + text: 'OOTD 삭제하기', + action: () => { + setIsMyPostMenuBottomSheetOpen(false); + setIsDeleteConfirmationModalOpen(true); + }, + icon: Delete, + }, + ], + }; + + // 일반 Post 메뉴 구성 const optionsBottomSheetProps: OptionsBottomSheetProps = { domain: 'post', targetId: { @@ -30,11 +98,75 @@ const Post: React.FC = () => { }, }; + const menuBottomSheetProps: BottomSheetProps = { + isOpenBottomSheet: isMyPostMenuBottomSheetOpen, + Component: BottomSheetMenu, + componentProps: isMyPost ? myPostMenuProps : optionsBottomSheetProps, + onCloseBottomSheet: () => setIsMyPostMenuBottomSheetOpen(false), + }; + + const modifyPostRepresentativeStatus = async () => { + try { + const response = await modifyPostRepresentativeStatusApi(Number(postId)); + + if (response.isSuccess) { + setModalContent(`대표 OOTD ${postPinStatus}에 성공했어요`); + setIsPostRepresentative((prev) => !prev); + } else { + setModalContent(`대표 OOTD ${postPinStatus}에 실패했어요\n잠시 뒤 다시 시도해 보세요`); + } + } catch (error) { + console.error('Error pinning post:', error); + } finally { + setIsApiResponseModalOpen(true); + } + }; + + const deletePost = async () => { + try { + const response = await deletePostApi(Number(postId)); + + if (response.isSuccess) { + setModalContent('OOTD 삭제에 성공했어요'); + + setTimeout(() => { + navigate(`/profile/${userId}`); + }, 1000); + } else { + setModalContent(`OOTD 삭제에 실패했어요\n잠시 뒤 다시 시도해 보세요`); + } + } catch (error) { + console.error('Error deleting post:', error); + } finally { + setIsApiResponseModalOpen(true); + setIsDeleteConfirmationModalOpen(false); // 확인 모달을 닫음 + } + }; + + const deleteConfirmationModalProps: ModalProps = { + isCloseButtonVisible: true, + onClose: () => setIsDeleteConfirmationModalOpen(false), + content: '해당 OOTD를 삭제하시겠습니까?', + button: { + content: '삭제하기', + onClick: deletePost, + }, + }; + + const apiResponseModalProps: ModalProps = { + onClose: () => setIsApiResponseModalOpen(false), + content: modalContent, + }; + return ( <> + + + {isDeleteConfirmationModalOpen && } + {isApiResponseModalOpen && } ); }; diff --git a/src/pages/Profile/index.tsx b/src/pages/Profile/index.tsx index fb44b151..7b676400 100644 --- a/src/pages/Profile/index.tsx +++ b/src/pages/Profile/index.tsx @@ -38,7 +38,7 @@ import BackSvg from '../../assets/arrow/left.svg'; const Profile: React.FC = () => { const { userId } = useParams<{ userId: string }>(); const profileUserId = Number(userId); - const loggedInUserId = Number(localStorage.getItem('my_id')); + const loggedInUserId = Number(localStorage.getItem('current_user_id')); const [isLoading, setIsLoading] = useState(true); const [posts, setPosts] = useState([]); @@ -121,11 +121,7 @@ const Profile: React.FC = () => { /> - {isMyPage ? ( - - ) : ( - - )} + {isMyPage ? : } @@ -135,16 +131,12 @@ const Profile: React.FC = () => { {isMyPage && ( 코멘트 - - {posts.reduce((sum, post) => sum + (post.postCommentsCount || 0), 0)} - + {posts.reduce((sum, post) => sum + (post.postCommentsCount || 0), 0)} )} 좋아요 - - {posts.reduce((sum, post) => sum + (post.postLikesCount || 0), 0)} - + {posts.reduce((sum, post) => sum + (post.postLikesCount || 0), 0)} From c09fdc80c149dc723be7047f5cce920f0181ab89 Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Tue, 24 Dec 2024 02:48:15 +0900 Subject: [PATCH 10/17] =?UTF-8?q?Fix:=20=EA=B2=BD=EB=A1=9C=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CommentItem/index.tsx | 6 +-- .../MenuButtonList/index.tsx | 2 +- .../LikeCommentBottomSheetContent/index.tsx | 38 +++++++++---------- src/pages/Post/PostBase/index.tsx | 34 ++++++++--------- src/pages/Post/index.tsx | 36 +++++++++--------- 5 files changed, 58 insertions(+), 58 deletions(-) diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx index 93f81554..ace5b3ea 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'; import dayjs from 'dayjs'; import 'dayjs/locale/ko'; -import theme from '../../../../../styles/theme'; +import theme from '@/styles/theme'; import { StyledBigUserProfile, CommentItem as StyledCommentItem, @@ -12,11 +12,11 @@ import { MenuBtn, } from './styles'; -import { StyledText } from '../../../../../components/Text/StyledText'; +import { StyledText } from '@/components/Text/StyledText'; import { CommentItemProps } from './dto'; -import More from '../../../../assets/default/more.svg'; +import More from '@/assets/default/more.svg'; const CommentItem: React.FC = ({ comment, handleUserClick, handleMenuOpen }) => { const [timeAgo, setTimeAgo] = useState(); diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/index.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/index.tsx index b71b111e..b373f73d 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/index.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { MenuButtonListProps } from './dto'; import { MenuListWrapper, MenuListContainer, MenuButtonItem } from './styles'; -import { StyledText } from '../../../../../components/Text/StyledText'; +import { StyledText } from '@/components/Text/StyledText'; const MenuButtonList: React.FC = ({ items, onClose, position }) => { const handleWrapperClick = () => { diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx index 02171561..36ca51cd 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx @@ -6,32 +6,32 @@ import { IsCommentDeleteConfirmationModalOpenAtom, IsCommentReportModalOpenAtom, selectedCommentAtom, -} from '../../../../recoil/Post/PostCommentAtom'; +} from '@/recoil/Post/PostCommentAtom'; import { TabContainer, Tab, ContentContainer, Content, BigUserProfile, LikeItem, InputLayout } from './styles'; -import { StyledText } from '../../../../components/Text/StyledText'; -import theme from '../../../../styles/theme'; -import Loading from '../../../../components/Loading'; -import Modal from '../../../../components/Modal'; +import { StyledText } from '@/components/Text/StyledText'; +import theme from '@/styles/theme'; +import Loading from '@/components/Loading'; +import Modal from '@/components/Modal'; import CommentItem from './CommentItem'; import MenuButtonList from './MenuButtonList'; import { LikeCommentBottomSheetProps } from '../dto'; -import { ModalProps } from '../../../../components/Modal/dto'; -import { GetPostLikeListResponse } from '../../../../apis/post-like/dto'; -import { Comment, GetCommentListResponse } from '../../../../apis/post-comment/dto'; - -import Delete from '../../../assets/default/delete.svg'; -import Block from '../../../assets/default/block.svg'; -import Report from '../../../assets/default/report.svg'; -import X from '../../../assets/default/x.svg'; - -import { getPostLikeListApi } from '../../../../apis/post-like'; -import { postUserBlockApi } from '../../../../apis/user-block'; -import { PostUserBlockRequest } from '../../../../apis/user-block/dto'; -import { createCommentApi, deleteCommentApi, getCommentListApi } from '../../../../apis/post-comment'; -import { handleError } from '../../../../apis/util/handleError'; +import { ModalProps } from '@/components/Modal/dto'; +import { GetPostLikeListResponse } from '@/apis/post-like/dto'; +import { Comment, GetCommentListResponse } from '@/apis/post-comment/dto'; + +import Delete from '@/assets/default/delete.svg'; +import Block from '@/assets/default/block.svg'; +import Report from '@/assets/default/report.svg'; +import X from '@/assets/default/x.svg'; + +import { getPostLikeListApi } from '@/apis/post-like'; +import { postUserBlockApi } from '@/apis/user-block'; +import { PostUserBlockRequest } from '@/apis/user-block/dto'; +import { createCommentApi, deleteCommentApi, getCommentListApi } from '@/apis/post-comment'; +import { handleError } from '@/apis/util/handleError'; const LikeCommentBottomSheetContent: React.FC = ({ tab, likeCount, commentCount }) => { const [activeTab, setActiveTab] = useState<'likes' | 'comments'>(tab); diff --git a/src/pages/Post/PostBase/index.tsx b/src/pages/Post/PostBase/index.tsx index 8e108669..ff39b2f9 100644 --- a/src/pages/Post/PostBase/index.tsx +++ b/src/pages/Post/PostBase/index.tsx @@ -5,16 +5,16 @@ import { useRecoilState } from 'recoil'; import dayjs from 'dayjs'; import 'dayjs/locale/ko'; -import theme from '../../../styles/theme'; +import theme from '@/styles/theme'; -import { postIdAtom, userAtom, isPostRepresentativeAtom } from '../../../recoil/Post/PostAtom'; +import { postIdAtom, userAtom, isPostRepresentativeAtom } from '@/recoil/Post/PostAtom'; -import { OODDFrame } from '../../../components/Frame/Frame'; -import { StyledText } from '../../../components/Text/StyledText'; -import TopBar from '../../../components/TopBar'; -import NavBar from '../../../components/NavBar'; -import BottomSheet from '../../../components/BottomSheet'; -import ClothingInfoItem from '../../../components/ClothingInfoItem'; +import { OODDFrame } from '@/components/Frame/Frame'; +import { StyledText } from '@/components/Text/StyledText'; +import TopBar from '@/components/TopBar'; +import NavBar from '@/components/NavBar'; +import BottomSheet from '@/components/BottomSheet'; +import ClothingInfoItem from '@/components/ClothingInfoItem'; import ImageSwiper from './ImageSwiper'; import LikeCommentBottomSheetContent from './LikeCommentBottomSheetContent'; @@ -36,18 +36,18 @@ import { ClothingInfoList, } from './styles'; -import Left from '../../assets/arrow/left.svg'; -import Like from '../../assets/default/like.svg'; -import LikeFill from '../../assets/default/like-fill.svg'; -import Message from '../../assets/default/message.svg'; -import More from '../../assets/default/more.svg'; +import Left from '../../../assets/arrow/left.svg'; +import Like from '../../../assets/default/like.svg'; +import LikeFill from '../../../assets/default/like-fill.svg'; +import Message from '../../../assets/default/message.svg'; +import More from '../../../assets/default/more.svg'; -import { BottomSheetProps } from '../../../components/BottomSheet/dto'; +import { BottomSheetProps } from '@/components/BottomSheet/dto'; import { PostBaseProps } from './dto'; -import { GetPostDetailResponse } from '../../../apis/post/dto'; +import { GetPostDetailResponse } from '@/apis/post/dto'; -import { getPostDetailApi } from '../../../apis/post'; -import { togglePostLikeStatusApi } from '../../../apis/post-like'; +import { getPostDetailApi } from '@/apis/post'; +import { togglePostLikeStatusApi } from '@/apis/post-like'; const PostBase: React.FC = ({ onClickMenu }) => { const { postId } = useParams<{ postId: string }>(); diff --git a/src/pages/Post/index.tsx b/src/pages/Post/index.tsx index 4d560229..69b63ed2 100644 --- a/src/pages/Post/index.tsx +++ b/src/pages/Post/index.tsx @@ -1,33 +1,33 @@ import React, { useState, useEffect } from 'react'; -import { useNavigate, useParams } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { useRecoilValue, useRecoilState } from 'recoil'; -import { postIdAtom, userAtom } from '../../recoil/Post/PostAtom.ts'; -import { isPostRepresentativeAtom } from '../../recoil/Post/PostAtom'; +import { postIdAtom, userAtom } from '@/recoil/Post/PostAtom.ts'; +import { isPostRepresentativeAtom } from '@/recoil/Post/PostAtom'; import PostBase from './PostBase/index.tsx'; -import OptionsBottomSheet from '../../components/BottomSheet/OptionsBottomSheet/index.tsx'; -import { OptionsBottomSheetProps } from '../../components/BottomSheet/OptionsBottomSheet/dto.ts'; -import Modal from '../../components/Modal'; -import { ModalProps } from '../../components/Modal/dto'; -import BottomSheet from '../../components/BottomSheet'; -import { BottomSheetProps } from '../../components/BottomSheet/dto'; -import BottomSheetMenu from '../../components/BottomSheetMenu'; -import { BottomSheetMenuProps } from '../../components/BottomSheetMenu/dto'; +import OptionsBottomSheet from '@/components/BottomSheet/OptionsBottomSheet/index.tsx'; +import { OptionsBottomSheetProps } from '@/components/BottomSheet/OptionsBottomSheet/dto.ts'; +import Modal from '@/components/Modal'; +import { ModalProps } from '@/components/Modal/dto'; +import BottomSheet from '@/components/BottomSheet'; +import { BottomSheetProps } from '@/components/BottomSheet/dto'; +import BottomSheetMenu from '@/components/BottomSheetMenu'; +import { BottomSheetMenuProps } from '@/components/BottomSheetMenu/dto'; -import Edit from '../../assets/default/edit.svg'; -import Pin from '../../assets/default/pin.svg'; -import Delete from '../../assets/default/delete.svg'; +import Edit from '@/assets/default/edit.svg'; +import Pin from '@/assets/default/pin.svg'; +import Delete from '@/assets/default/delete.svg'; -import { modifyPostRepresentativeStatusApi, deletePostApi } from '../../apis/post'; +import { modifyPostRepresentativeStatusApi, deletePostApi } from '@/apis/post'; const Post: React.FC = () => { - const postId = useRecoilValue(postIdAtom); - const user = useRecoilValue(userAtom); const userId = localStorage.getItem('current_user_id'); - + const user = useRecoilValue(userAtom); + const postId = useRecoilValue(postIdAtom); const [isMyPost, setIsMyPost] = useState(false); const [isPostRepresentative, setIsPostRepresentative] = useRecoilState(isPostRepresentativeAtom); + const [isMyPostMenuBottomSheetOpen, setIsMyPostMenuBottomSheetOpen] = useState(false); const [isOptionsBottomSheetOpen, setIsOptionsBottomSheetOpen] = useState(false); From 146d5a440671e9e5b95218353b265d39b1b2206f Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Tue, 24 Dec 2024 02:55:24 +0900 Subject: [PATCH 11/17] =?UTF-8?q?Feat:=20=EC=BB=AC=EB=9F=AC=EC=8B=9C?= =?UTF-8?q?=EC=8A=A4=ED=85=9C=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LikeCommentBottomSheetContent/MenuButtonList/styles.tsx | 2 +- .../Post/PostBase/LikeCommentBottomSheetContent/styles.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/styles.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/styles.tsx index 460d2321..a7b1b23e 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/styles.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/styles.tsx @@ -19,7 +19,7 @@ export const MenuListContainer = styled.div<{ $position: { top: number; left: nu display: flex; flex-direction: column; border-radius: 10px; - background-color: ${({ theme }) => theme.colors.gray1}; + background-color: ${({ theme }) => theme.colors.gray[200]}; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); `; diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx index 3b80412d..eb701c24 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/styles.tsx @@ -22,7 +22,7 @@ export const Tab = styled.div<{ $active: boolean }>` left: 0; width: 100%; height: 2px; /* 하단 경계선 두께 */ - background: ${(props) => (props.$active ? theme.colors.gradient : 'none')}; + background: ${(props) => (props.$active ? theme.colors.brand.gradient : 'none')}; } `; @@ -77,7 +77,7 @@ export const InputLayout = styled.div` align-items: center; gap: 10px; background-color: white; - border-top: 1px solid ${({ theme }) => theme.colors.gray1}; + border-top: 1px solid ${({ theme }) => theme.colors.border.devider}; textarea { flex: 1; @@ -107,7 +107,7 @@ export const InputLayout = styled.div` } button { - background: ${({ theme }) => theme.colors.gradient}; + background: ${({ theme }) => theme.colors.brand.gradient}; width: 50px; height: 50px; border-radius: 8px; From 8df020518a91c8b24b9382546bde3a445c61b72c Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Sat, 28 Dec 2024 19:01:26 +0900 Subject: [PATCH 12/17] =?UTF-8?q?Design:=20BottomSheetMenu=20css=20?= =?UTF-8?q?=EB=B3=B5=EA=B5=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BottomSheetMenu/styles.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/BottomSheetMenu/styles.tsx b/src/components/BottomSheetMenu/styles.tsx index fd42ed6d..6045d462 100644 --- a/src/components/BottomSheetMenu/styles.tsx +++ b/src/components/BottomSheetMenu/styles.tsx @@ -4,8 +4,6 @@ export const BottomSheetMenuLayout = styled.ul` margin-bottom: 0.62rem; display: flex; flex-direction: column; - border: 1px solid rgb(0, 0, 0, 0.1); - border-radius: 8px; `; export const SheetItem = styled.li` @@ -15,11 +13,7 @@ export const SheetItem = styled.li` align-items: center; justify-content: space-between; cursor: pointer; - border-bottom: 1px solid rgb(0, 0, 0, 0.1); - - :last-child { - border-bottom: none; - } + border-bottom: 1px solid rgb(0, 0, 0, 0.2); `; export const Icon = styled.img` From de4474391f24a1e05e8e3a062ca98a4c45a1c0b1 Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Sat, 28 Dec 2024 19:07:33 +0900 Subject: [PATCH 13/17] =?UTF-8?q?Feat:=20=EC=B2=B4=ED=81=AC=EB=B0=95?= =?UTF-8?q?=EC=8A=A4=EC=9D=98=20label=20=EB=B3=B5=EA=B5=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/AccountCancel/index.tsx | 10 ++++++---- src/pages/AccountCancel/styles.tsx | 3 +-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/pages/AccountCancel/index.tsx b/src/pages/AccountCancel/index.tsx index c00e3890..6786c4b0 100644 --- a/src/pages/AccountCancel/index.tsx +++ b/src/pages/AccountCancel/index.tsx @@ -96,10 +96,12 @@ const AccountCancel: React.FC = () => { - - - 안내사항을 모두 확인하였으며, 이에 동의합니다. - +
Date: Sat, 28 Dec 2024 19:08:33 +0900 Subject: [PATCH 14/17] =?UTF-8?q?Remove:=20Login/components=20=ED=8F=B4?= =?UTF-8?q?=EB=8D=94=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Login/components/Kakao/KakaoCallback.tsx | 58 ------------------- .../Login/components/Naver/NaverCallback.tsx | 54 ----------------- 2 files changed, 112 deletions(-) delete mode 100644 src/pages/Login/components/Kakao/KakaoCallback.tsx delete mode 100644 src/pages/Login/components/Naver/NaverCallback.tsx diff --git a/src/pages/Login/components/Kakao/KakaoCallback.tsx b/src/pages/Login/components/Kakao/KakaoCallback.tsx deleted file mode 100644 index 8c3df685..00000000 --- a/src/pages/Login/components/Kakao/KakaoCallback.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { useNavigate } from 'react-router-dom'; - -import Loading from '../../../../components/Loading'; -import Modal from '../../../../components/Modal'; - -import { handleError } from '../../../../apis/util/handleError'; - -const KakaoCallback: React.FC = () => { - const navigate = useNavigate(); - const apiBaseUrl = import.meta.env.VITE_NEW_API_URL; - - const [isModalOpen, setIsModalOpen] = useState(false); - const [modalMessage, setModalMessage] = useState(''); - - useEffect(() => { - const handleKakaoLogin = async () => { - try { - // URL에서 인증 코드 추출 - const code = new URL(window.location.href).searchParams.get('code'); - console.log('인증 코드:', code); - - if (!code) { - throw new Error('인증 코드가 없습니다.'); - } - - // 리다이렉트 URL 설정 및 서버 URL 생성 - const redirectUrl = encodeURIComponent('http://localhost:3000/login/complete'); - const serverUrl = `${apiBaseUrl}/auth/login/kakao?redirectUrl=${redirectUrl}`; - - // 서버로 리다이렉션 - window.location.href = serverUrl; - } catch (error) { - // 에러 처리 - console.error('카카오 로그인 중 오류 발생:', error); - const errorMessage = handleError(error); - setModalMessage(`카카오 ${errorMessage}`); - setIsModalOpen(true); - } - }; - - handleKakaoLogin(); - }, [navigate, apiBaseUrl]); - - const handleModalClose = () => { - setIsModalOpen(false); - navigate('/login'); // 모달 닫힌 후 로그인 페이지로 이동 - }; - - return ( - <> - - {isModalOpen && } - - ); -}; - -export default KakaoCallback; diff --git a/src/pages/Login/components/Naver/NaverCallback.tsx b/src/pages/Login/components/Naver/NaverCallback.tsx deleted file mode 100644 index d2156d5d..00000000 --- a/src/pages/Login/components/Naver/NaverCallback.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { useNavigate } from 'react-router-dom'; - -import Loading from '../../../../components/Loading'; -import Modal from '../../../../components/Modal'; - -import { handleError } from '../../../../apis/util/handleError'; - -const NaverCallback: React.FC = () => { - const navigate = useNavigate(); - const apiBaseUrl = import.meta.env.VITE_NEW_API_URL; - - const [isModalOpen, setIsModalOpen] = useState(false); - const [modalMessage, setModalMessage] = useState(''); - - useEffect(() => { - const handleNaverLogin = async () => { - try { - // URL에서 인증 코드 추출 - const code = new URL(window.location.href).searchParams.get('code'); - console.log('인증 코드:', code); - - if (!code) { - throw new Error('인증 코드가 없습니다.'); - } - - // 리다이렉트 URL 설정 및 서버 URL 생성 해 서버로 리다이렉션 - const redirectUrl = encodeURIComponent('http://localhost:3000/login/complete'); - const serverUrl = `${apiBaseUrl}/auth/login/naver?redirectUrl=${redirectUrl}`; - window.location.href = serverUrl; - } catch (error) { - console.error('네이버 로그인 중 오류 발생:', error); - const errorMessage = handleError(error); - setModalMessage(`네이버 ${errorMessage}`); - setIsModalOpen(true); - } - }; - - handleNaverLogin(); - }, [navigate, apiBaseUrl]); - - const handleModalClose = () => { - setIsModalOpen(false); - navigate('/login'); // 모달 닫힌 후 로그인 페이지로 이동 - }; - return ( - <> - - {isModalOpen && } - - ); -}; - -export default NaverCallback; From e4b3f2d4cbc258ce475984ef037bd56196425550 Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Sat, 28 Dec 2024 19:21:07 +0900 Subject: [PATCH 15/17] =?UTF-8?q?Feat:=20text=20colors=20=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20white=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/theme.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/styles/theme.ts b/src/styles/theme.ts index d53cc71d..26e33717 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -41,11 +41,11 @@ const theme: DefaultTheme = { // Functional Colors text: { - cta: '#000000', // Black - primary: '#4343432', // Gray-800 - secondary: '##7B7B7B', // Gray-600 - tertiary: '#9E9E9E', // Gray-500 - caption: '#C4C4C4', // Gray-300 + primary: '#000000', // Black + secondary: '#4343432', // Gray-800 + tertiary: '##7B7B7B', // Gray-600 + caption: '#9E9E9E', // Gray-500 + onPrimary: '#FFFFFF', // brand.primary 배경 위 텍스트 (White) }, background: { From 9577da42730b0cf92408c5d695534cd174295379 Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Sat, 28 Dec 2024 19:59:04 +0900 Subject: [PATCH 16/17] =?UTF-8?q?Refactor:=20import=20=EA=B2=BD=EB=A1=9C?= =?UTF-8?q?=20@/*=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CommentItem/index.tsx | 6 +-- .../MenuButtonList/index.tsx | 2 +- .../LikeCommentBottomSheetContent/index.tsx | 38 +++++++++---------- src/pages/Post/PostBase/index.tsx | 24 ++++++------ src/pages/Post/index.tsx | 32 ++++++++-------- tsconfig.app.json | 1 - 6 files changed, 51 insertions(+), 52 deletions(-) diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx index ace5b3ea..3da48992 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/CommentItem/index.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'; import dayjs from 'dayjs'; import 'dayjs/locale/ko'; -import theme from '@/styles/theme'; +import theme from '@styles/theme'; import { StyledBigUserProfile, CommentItem as StyledCommentItem, @@ -12,11 +12,11 @@ import { MenuBtn, } from './styles'; -import { StyledText } from '@/components/Text/StyledText'; +import { StyledText } from '@components/Text/StyledText'; import { CommentItemProps } from './dto'; -import More from '@/assets/default/more.svg'; +import More from '@assets/default/more.svg'; const CommentItem: React.FC = ({ comment, handleUserClick, handleMenuOpen }) => { const [timeAgo, setTimeAgo] = useState(); diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/index.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/index.tsx index b373f73d..d30526a6 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/index.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/MenuButtonList/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { MenuButtonListProps } from './dto'; import { MenuListWrapper, MenuListContainer, MenuButtonItem } from './styles'; -import { StyledText } from '@/components/Text/StyledText'; +import { StyledText } from '@components/Text/StyledText'; const MenuButtonList: React.FC = ({ items, onClose, position }) => { const handleWrapperClick = () => { diff --git a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx index 05393fff..17c9b925 100644 --- a/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx +++ b/src/pages/Post/PostBase/LikeCommentBottomSheetContent/index.tsx @@ -6,32 +6,32 @@ import { IsCommentDeleteConfirmationModalOpenAtom, IsCommentReportModalOpenAtom, selectedCommentAtom, -} from '@/recoil/Post/PostCommentAtom'; +} from '@recoil/Post/PostCommentAtom'; import { TabContainer, Tab, ContentContainer, Content, BigUserProfile, LikeItem, InputLayout } from './styles'; -import { StyledText } from '@/components/Text/StyledText'; -import theme from '@/styles/theme'; -import Loading from '@/components/Loading'; -import Modal from '@/components/Modal'; +import { StyledText } from '@components/Text/StyledText'; +import theme from '@styles/theme'; +import Loading from '@components/Loading'; +import Modal from '@components/Modal'; import CommentItem from './CommentItem'; import MenuButtonList from './MenuButtonList'; import { LikeCommentBottomSheetProps } from '../dto'; -import { ModalProps } from '@/components/Modal/dto'; -import { GetPostLikeListResponse } from '@/apis/post-like/dto'; -import { Comment, GetCommentListResponse } from '@/apis/post-comment/dto'; - -import Delete from '@/assets/default/delete.svg'; -import Block from '@/assets/default/block.svg'; -import Report from '@/assets/default/report.svg'; -import X from '@/assets/default/x.svg'; - -import { getPostLikeListApi } from '@/apis/post-like'; -import { postUserBlockApi } from '@/apis/user-block'; -import { PostUserBlockRequest } from '@/apis/user-block/dto'; -import { createCommentApi, deleteCommentApi, getCommentListApi } from '@/apis/post-comment'; -import { handleError } from '@/apis/util/handleError'; +import { ModalProps } from '@components/Modal/dto'; +import { GetPostLikeListResponse } from '@apis/post-like/dto'; +import { Comment, GetCommentListResponse } from '@apis/post-comment/dto'; + +import Delete from '@assets/default/delete.svg'; +import Block from '@assets/default/block.svg'; +import Report from '@assets/default/report.svg'; +import X from '@assets/default/x.svg'; + +import { getPostLikeListApi } from '@apis/post-like'; +import { postUserBlockApi } from '@apis/user-block'; +import { PostUserBlockRequest } from '@apis/user-block/dto'; +import { createCommentApi, deleteCommentApi, getCommentListApi } from '@apis/post-comment'; +import { handleError } from '@apis/util/handleError'; const LikeCommentBottomSheetContent: React.FC = ({ tab, likeCount, commentCount }) => { const [activeTab, setActiveTab] = useState<'likes' | 'comments'>(tab); diff --git a/src/pages/Post/PostBase/index.tsx b/src/pages/Post/PostBase/index.tsx index ff39b2f9..d028e149 100644 --- a/src/pages/Post/PostBase/index.tsx +++ b/src/pages/Post/PostBase/index.tsx @@ -5,16 +5,16 @@ import { useRecoilState } from 'recoil'; import dayjs from 'dayjs'; import 'dayjs/locale/ko'; -import theme from '@/styles/theme'; +import theme from '@styles/theme'; -import { postIdAtom, userAtom, isPostRepresentativeAtom } from '@/recoil/Post/PostAtom'; +import { postIdAtom, userAtom, isPostRepresentativeAtom } from '@recoil/Post/PostAtom'; -import { OODDFrame } from '@/components/Frame/Frame'; -import { StyledText } from '@/components/Text/StyledText'; -import TopBar from '@/components/TopBar'; -import NavBar from '@/components/NavBar'; -import BottomSheet from '@/components/BottomSheet'; -import ClothingInfoItem from '@/components/ClothingInfoItem'; +import { OODDFrame } from '@components/Frame/Frame'; +import { StyledText } from '@components/Text/StyledText'; +import TopBar from '@components/TopBar'; +import NavBar from '@components/NavBar'; +import BottomSheet from '@components/BottomSheet'; +import ClothingInfoItem from '@components/ClothingInfoItem'; import ImageSwiper from './ImageSwiper'; import LikeCommentBottomSheetContent from './LikeCommentBottomSheetContent'; @@ -42,12 +42,12 @@ import LikeFill from '../../../assets/default/like-fill.svg'; import Message from '../../../assets/default/message.svg'; import More from '../../../assets/default/more.svg'; -import { BottomSheetProps } from '@/components/BottomSheet/dto'; +import { BottomSheetProps } from '@components/BottomSheet/dto'; import { PostBaseProps } from './dto'; -import { GetPostDetailResponse } from '@/apis/post/dto'; +import { GetPostDetailResponse } from '@apis/post/dto'; -import { getPostDetailApi } from '@/apis/post'; -import { togglePostLikeStatusApi } from '@/apis/post-like'; +import { getPostDetailApi } from '@apis/post'; +import { togglePostLikeStatusApi } from '@apis/post-like'; const PostBase: React.FC = ({ onClickMenu }) => { const { postId } = useParams<{ postId: string }>(); diff --git a/src/pages/Post/index.tsx b/src/pages/Post/index.tsx index 69b63ed2..7b48cd1c 100644 --- a/src/pages/Post/index.tsx +++ b/src/pages/Post/index.tsx @@ -2,24 +2,24 @@ import React, { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { useRecoilValue, useRecoilState } from 'recoil'; -import { postIdAtom, userAtom } from '@/recoil/Post/PostAtom.ts'; -import { isPostRepresentativeAtom } from '@/recoil/Post/PostAtom'; +import { postIdAtom, userAtom } from '@recoil/Post/PostAtom.ts'; +import { isPostRepresentativeAtom } from '@recoil/Post/PostAtom'; import PostBase from './PostBase/index.tsx'; -import OptionsBottomSheet from '@/components/BottomSheet/OptionsBottomSheet/index.tsx'; -import { OptionsBottomSheetProps } from '@/components/BottomSheet/OptionsBottomSheet/dto.ts'; -import Modal from '@/components/Modal'; -import { ModalProps } from '@/components/Modal/dto'; -import BottomSheet from '@/components/BottomSheet'; -import { BottomSheetProps } from '@/components/BottomSheet/dto'; -import BottomSheetMenu from '@/components/BottomSheetMenu'; -import { BottomSheetMenuProps } from '@/components/BottomSheetMenu/dto'; - -import Edit from '@/assets/default/edit.svg'; -import Pin from '@/assets/default/pin.svg'; -import Delete from '@/assets/default/delete.svg'; - -import { modifyPostRepresentativeStatusApi, deletePostApi } from '@/apis/post'; +import OptionsBottomSheet from '@components/BottomSheet/OptionsBottomSheet/index.tsx'; +import { OptionsBottomSheetProps } from '@components/BottomSheet/OptionsBottomSheet/dto.ts'; +import Modal from '@components/Modal'; +import { ModalProps } from '@components/Modal/dto'; +import BottomSheet from '@components/BottomSheet'; +import { BottomSheetProps } from '@components/BottomSheet/dto'; +import BottomSheetMenu from '@components/BottomSheetMenu'; +import { BottomSheetMenuProps } from '@components/BottomSheetMenu/dto'; + +import Edit from '@assets/default/edit.svg'; +import Pin from '@assets/default/pin.svg'; +import Delete from '@assets/default/delete.svg'; + +import { modifyPostRepresentativeStatusApi, deletePostApi } from '@apis/post'; const Post: React.FC = () => { const userId = localStorage.getItem('current_user_id'); diff --git a/tsconfig.app.json b/tsconfig.app.json index e3847893..ba8f3d58 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -26,7 +26,6 @@ /* Absolute path */ "baseUrl": "src", "paths": { - "@/*": ["*"], "@components/*": ["components/*"], "@styles/*": ["styles/*"], "@apis/*": ["apis/*"], From 45fef868efe7f2d0c50b9df32dd50eae0ea27c69 Mon Sep 17 00:00:00 2001 From: xxinzzi <156905845+xxinzzi@users.noreply.github.com> Date: Sat, 28 Dec 2024 21:20:09 +0900 Subject: [PATCH 17/17] =?UTF-8?q?Feat:=20=EA=B8=B0=EC=A1=B4=20=ED=8F=B0?= =?UTF-8?q?=ED=8A=B8=20=EB=B3=B5=EA=B5=AC=20=EB=B0=8F=20color=20=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/theme.ts | 50 +++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 46 insertions(+), 4 deletions(-) diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 26e33717..f7abbba6 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -42,10 +42,10 @@ const theme: DefaultTheme = { // Functional Colors text: { primary: '#000000', // Black - secondary: '#4343432', // Gray-800 - tertiary: '##7B7B7B', // Gray-600 + secondary: '#434343', // Gray-800 + tertiary: '#7B7B7B', // Gray-600 caption: '#9E9E9E', // Gray-500 - onPrimary: '#FFFFFF', // brand.primary 배경 위 텍스트 (White) + contrast: '#FFFFFF', // White }, background: { @@ -57,7 +57,7 @@ const theme: DefaultTheme = { border: { active: '#FF2389', // Pink-500 inactive: '#FFBBDA', // Pink-300 - devider: '#E9E9E9', // Gray-200 + divider: '#E9E9E9', // Gray-200 }, //여기서부터 기존 **추후 삭제 필요** @@ -391,6 +391,48 @@ const theme: DefaultTheme = { line-height: 127.3%; /* 0.87519rem */ letter-spacing: -0.00213rem; `, + + // TODO: 추후 삭제 필요 + 'body2-light': css` + font-family: 'Pretendard Variable'; + font-weight: 300; /* light */ + font-size: 1rem; + `, + 'body4-regular': css` + font-family: 'Pretendard Variable'; + font-weight: 400; /* normal */ + font-size: 0.813rem; + `, + 'body4-light': css` + font-family: 'Pretendard Variable'; + font-weight: 300; /* light */ + font-size: 0.813rem; + `, + 'body6-regular': css` + font-family: 'Pretendard Variable'; + font-weight: 400; /* normal */ + font-size: 0.75rem; + `, + 'body6-light': css` + font-family: 'Pretendard Variable'; + font-weight: 300; /* light */ + font-size: 0.75rem; + `, + 'button1-medium': css` + font-family: 'Pretendard Variable'; + font-weight: 500; /* medium */ + font-size: 1rem; + `, + 'button2-medium': css` + font-family: 'Pretendard Variable'; + font-weight: 500; /* medium */ + font-size: 0.813rem; + `, + 'button2-light': css` + font-family: 'Pretendard Variable'; + font-weight: 300; /* light */ + font-size: 0.813rem; + `, }, };