diff --git a/src/apis/favorite.ts b/src/apis/favorite.ts index 20b756c..fb3639b 100644 --- a/src/apis/favorite.ts +++ b/src/apis/favorite.ts @@ -21,9 +21,7 @@ export const useGetMyFavorite = (filterData: FilterType | null) => { () => FavoriteAPI.getMyFavorite(filterData), { enabled: false, - onSuccess: data => { - console.log(data); - }, + onSuccess: () => {}, onError: () => {}, }, ); diff --git a/src/apis/like/index.ts b/src/apis/like/index.ts index 33bbe88..021a605 100644 --- a/src/apis/like/index.ts +++ b/src/apis/like/index.ts @@ -5,6 +5,7 @@ export const postLike = async ( type: string, id: number, setIsLike: React.Dispatch>, + handleLikeCount?: () => void, ) => { try { const res = await Axios.post(`/favorite/${type}`, null, { @@ -12,7 +13,10 @@ export const postLike = async ( [`${type}Id`]: id, }, }); - if (res?.data?.code === 200) setIsLike(prev => !prev); + if (res?.data?.code === 200) { + setIsLike(prev => !prev); + handleLikeCount && handleLikeCount(); + } return; } catch (e) { console.error(e); diff --git a/src/apis/manager.ts b/src/apis/manager.ts index a331997..1b9bb57 100644 --- a/src/apis/manager.ts +++ b/src/apis/manager.ts @@ -63,7 +63,7 @@ export const ManagerAPI = { 'Content-Type': 'multipart/form-data', }, }); - return response.data.result; + return response.data; }, postEditProgram: async (formData: FormData) => { @@ -72,7 +72,7 @@ export const ManagerAPI = { 'Content-Type': 'multipart/form-data', }, }); - return response.data.result; + return response.data; }, deleteTempProgram: async (id: number) => { @@ -94,8 +94,6 @@ export const useFindTempProgram = (id: number | null) => { () => ManagerAPI.getFindTempProgram(), { enabled: id === null, - cacheTime: 500000, - staleTime: 500005, onSuccess: () => {}, onError: () => {}, }, @@ -147,9 +145,7 @@ export const useGetExistingProgram = (programId: number) => { { cacheTime: 500000, staleTime: 500005, - onSuccess: data => { - console.log(data); - }, + onSuccess: () => {}, onError: () => {}, }, ); diff --git a/src/apis/program.ts b/src/apis/program.ts index afa2eb0..c5d9b3e 100644 --- a/src/apis/program.ts +++ b/src/apis/program.ts @@ -51,9 +51,7 @@ export const useGetProgramDetailInfo = (programId: number) => { ['getProgramDetailInfo', programId], () => ProgramAPI.getProgramDetailInfo(programId), { - onSuccess: data => { - console.log(data); - }, + onSuccess: () => {}, onError: () => {}, }, ); @@ -87,9 +85,7 @@ export const useGetSimilarRecommend = ({ enabled: writerVersion === null ? false : !writerVersion, cacheTime: 500000, staleTime: 500005, - onSuccess: data => { - console.log(data); - }, + onSuccess: () => {}, onError: () => {}, }, ); @@ -109,9 +105,7 @@ export const useGetRegionTour = ({ enabled: writerVersion === null ? false : !writerVersion, cacheTime: 500000, staleTime: 500005, - onSuccess: data => { - console.log(data); - }, + onSuccess: () => {}, onError: () => {}, }, ); @@ -129,9 +123,7 @@ export const useGetRegionLodgment = ({ { enabled: writerVersion === null ? false : !writerVersion, staleTime: 500005, - onSuccess: data => { - console.log(data); - }, + onSuccess: () => {}, onError: () => {}, }, ); diff --git a/src/assets/board/archive-image.png b/src/assets/board/archive-image.png new file mode 100644 index 0000000..997966d Binary files /dev/null and b/src/assets/board/archive-image.png differ diff --git a/src/assets/board/review-image.png b/src/assets/board/review-image.png new file mode 100644 index 0000000..41feb27 Binary files /dev/null and b/src/assets/board/review-image.png differ diff --git a/src/assets/icons/icon-honey-tip.png b/src/assets/icons/icon-honey-tip.png new file mode 100644 index 0000000..af1e7ab Binary files /dev/null and b/src/assets/icons/icon-honey-tip.png differ diff --git a/src/components/Button/TranslucentLikeButton.tsx b/src/components/Button/TranslucentLikeButton.tsx index ccb08e0..63dba83 100644 --- a/src/components/Button/TranslucentLikeButton.tsx +++ b/src/components/Button/TranslucentLikeButton.tsx @@ -9,14 +9,20 @@ interface Props { id: number; isLike: boolean; setIsLike: React.Dispatch>; + handleLikeCount: () => void; } -const TranslucentLikeButton: React.FC = ({ id, isLike, setIsLike }) => { +const TranslucentLikeButton: React.FC = ({ + id, + isLike, + setIsLike, + handleLikeCount, +}) => { // Todo: 인자로 id 전달받아서 서버에 찜 목록에 등록하는 API 연결 const handleClick = useCallback( (e: React.MouseEvent) => { e.stopPropagation(); - postLike('program', id, setIsLike); + postLike('program', id, setIsLike, handleLikeCount); }, [isLike], ); diff --git a/src/components/Default/DefaultProgram.tsx b/src/components/Default/DefaultProgram.tsx index fde7610..0d4c943 100644 --- a/src/components/Default/DefaultProgram.tsx +++ b/src/components/Default/DefaultProgram.tsx @@ -1,12 +1,14 @@ import styled from 'styled-components'; -const DefaultProgram = () => { +const DefaultProgram = ({ detail }: { detail?: boolean }) => { return ( -
- 이미지가 없어요! - 클릭하여 상세내용을 확인해보세요! -
+ {detail && ( +
+ 이미지가 없어요! + 클릭하여 상세내용을 확인해보세요! +
+ )} ); }; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 9895582..f3526d3 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -70,9 +70,16 @@ const Header = () => { > character - {HeaderData.map(({ main, dropDowns }) => ( + {HeaderData.map(({ main, mainLink, dropDowns }) => ( -

{main}

+

+ navigate(mainLink, { state: { filter: '전체' } }) + } + > + {main} +

{dropDowns.map(({ title, link }, index) => (
  • diff --git a/src/components/Header/Layout.tsx b/src/components/Header/Layout.tsx index 659d9e7..b0757e7 100644 --- a/src/components/Header/Layout.tsx +++ b/src/components/Header/Layout.tsx @@ -5,7 +5,7 @@ const Layout = () => { return ( <>
    - ; + ); }; diff --git a/src/components/ProgramCard/ProgramCardItem.tsx b/src/components/ProgramCard/ProgramCardItem.tsx index fa6ee32..a046ad5 100644 --- a/src/components/ProgramCard/ProgramCardItem.tsx +++ b/src/components/ProgramCard/ProgramCardItem.tsx @@ -10,27 +10,51 @@ import { useEffect, useState } from 'react'; const ProgramCardItem = ({ program }: { program: ProgramMainInfoType }) => { const navigate = useNavigate(); const [isLike, setIsLike] = useState(false); + const [likeCount, setLikeCount] = useState(program.like); + const [imageError, setImageError] = useState(false); useEffect(() => { setIsLike(program.userLikeCheck); }, [program]); + const handleLikeCount = () => { + if (program.userLikeCheck && likeCount === program.like) { + setLikeCount(likeCount - 1); + } else if (program.userLikeCheck && likeCount < program.like) { + setLikeCount(likeCount + 1); + } else if (!program.userLikeCheck && likeCount === program.like) { + setLikeCount(likeCount + 1); + } else if (!program.userLikeCheck && likeCount > program.like) { + setLikeCount(likeCount - 1); + } + }; + + const handleImageError = () => { + setImageError(true); + }; + return ( navigate(`/detailProgram/${program.programName}/${program.id}`) } > - {program.photoUrl === null || program.photoUrl === '' ? ( + {program.photoUrl === null || program.photoUrl === '' || imageError ? ( ) : ( - program-poster + program-poster )} @@ -49,7 +73,7 @@ const ProgramCardItem = ({ program }: { program: ProgramMainInfoType }) => {
    favorite-icon - {program.like} + {likeCount}
    @@ -71,12 +95,20 @@ const Container = styled.div` `; const ProgramInfoContainer = styled.div` + width: inherit; display: flex; flex-direction: column; align-items: start; padding-top: 16px; gap: 4px; + ${H3} { + width: inherit; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .hashTag-container { display: flex; flex-direction: row; diff --git a/src/components/RecommendCard/RecommendCardItem.tsx b/src/components/RecommendCard/RecommendCardItem.tsx index 3d32bbf..2944b0a 100644 --- a/src/components/RecommendCard/RecommendCardItem.tsx +++ b/src/components/RecommendCard/RecommendCardItem.tsx @@ -6,7 +6,6 @@ const RecommendCardItem = ({ result }: { result: RecommendDataType }) => { return ( image -

    {result.title}

     @@ -24,7 +23,7 @@ const Container = styled.div` width: 323px; height: 323px; border-radius: 20px; - //object-fit: cover; + object-fit: cover; } `; @@ -34,6 +33,14 @@ const CardInfoContainer = styled.div` align-items: start; padding-top: 16px; gap: 4px; + width: inherit; + + ${H3} { + width: inherit; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } `; export default RecommendCardItem; diff --git a/src/constants/Register/index.ts b/src/constants/Register/index.ts index 417f137..ebd6b17 100644 --- a/src/constants/Register/index.ts +++ b/src/constants/Register/index.ts @@ -17,6 +17,7 @@ export const DEFAULT_REQUIRED_CONTENT: ProgramRegisterInfoType = { }; export const LOCATION_LIST = [ + '전국', '서울', '인천', '대전', @@ -80,7 +81,7 @@ export const INPUT_FIELD: ProgramRegisterFieldType = { contact: { title: '문의처', placeholder: '문의처명을 입력해주세요.', - alertMessage: '문의처명을 입력해주세요.', + alertMessage: '문의처을 입력해주세요.', }, contactPhone: { title: '', diff --git a/src/constants/Search/index.ts b/src/constants/Search/index.ts index e2429fd..34baebc 100644 --- a/src/constants/Search/index.ts +++ b/src/constants/Search/index.ts @@ -5,42 +5,42 @@ export const FILTER_LIST: FilterListType[] = [ { title: '정렬', enTitle: 'orderCriteria', - buttonSize: 'small', + buttonSize: 'xs', calendar: false, items: ['최신순', '인기순', '빠른 마감 순', '늦은 마감 순'], }, { title: '지역', enTitle: 'location', - buttonSize: 'small', + buttonSize: 's', calendar: false, items: LOCATION_LIST, }, { title: '여행 프로그램', enTitle: 'programType', - buttonSize: 'large', + buttonSize: 'm', calendar: false, items: ['전체', '여행 지원사업', '여행 공모전', '여행 대외활동'], }, { title: '세부 카테고리', enTitle: 'detailType', - buttonSize: 'medium', + buttonSize: 'm', calendar: false, items: [], }, { title: '모집 기간', enTitle: 'recruitDate', - buttonSize: 'medium', + buttonSize: 'l', calendar: true, items: [], }, { title: '여행 기간', enTitle: 'activeDate', - buttonSize: 'medium', + buttonSize: 'l', calendar: true, items: [], }, diff --git a/src/pages/DetailPosting/index.tsx b/src/pages/DetailPosting/index.tsx index bd7c7e9..79706fe 100644 --- a/src/pages/DetailPosting/index.tsx +++ b/src/pages/DetailPosting/index.tsx @@ -37,6 +37,10 @@ const Container = styled.div` width: 1440px; margin: 229px auto 0; + + body:not(&) { + background-color: white; + } `; const Title = styled.pre` diff --git a/src/pages/DetailProgram/HoneyTipButton.tsx b/src/pages/DetailProgram/HoneyTipButton.tsx index 16cb3bd..a5afd59 100644 --- a/src/pages/DetailProgram/HoneyTipButton.tsx +++ b/src/pages/DetailProgram/HoneyTipButton.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import HoneyTipIcon from '@/assets/icons/honey_tip_icon.png'; +import HoneyTipIcon from '@/assets/icons/icon-honey-tip.png'; import RoundedButton from '@/components/Button/RoundedButton'; import { HiOutlineChevronRight } from 'react-icons/hi'; import { B1Bold } from '@/style/fonts/StyledFonts'; diff --git a/src/pages/DetailProgram/ProgramHead.tsx b/src/pages/DetailProgram/ProgramHead.tsx index 275f23a..f5e8969 100644 --- a/src/pages/DetailProgram/ProgramHead.tsx +++ b/src/pages/DetailProgram/ProgramHead.tsx @@ -4,6 +4,7 @@ import MainButton from '@/components/Button/MainButton'; import { B1Bold, H1, H3 } from '@/style/fonts/StyledFonts'; import DefaultProgram from '@/components/Default/DefaultProgram'; import LikeButton from '@/components/Button/LikeButton'; +import { useState } from 'react'; interface ProgramHeadProps { program: ProgramDetailInfoType; @@ -17,12 +18,22 @@ const ProgramHead = ({ setIsLike, writer, }: ProgramHeadProps) => { + const [imageError, setImageError] = useState(false); + + const handleImageError = () => { + setImageError(true); + }; + return ( - {program.photoUrl === null || program.photoUrl === '' ? ( + {program.photoUrl === null || program.photoUrl === '' || imageError ? ( ) : ( - program-poster + program-poster )} @@ -83,7 +94,8 @@ const Container = styled.div` padding: 130px 0px; display: flex; flex-direction: row; - justify-content: space-between; + //justify-content: space-between; + gap: 215px; align-items: center; img { diff --git a/src/pages/DetailProgram/RecommendAccom.tsx b/src/pages/DetailProgram/RecommendAccom.tsx index e5984e6..5eac141 100644 --- a/src/pages/DetailProgram/RecommendAccom.tsx +++ b/src/pages/DetailProgram/RecommendAccom.tsx @@ -1,3 +1,4 @@ +import Loading from '@/components/Loading/Loading'; import RecommendCard from '@/components/RecommendCard/RecommendCard'; import { H1 } from '@/style/fonts/StyledFonts'; import { RecommendDataType } from '@/types'; @@ -5,13 +6,20 @@ import styled from 'styled-components'; interface RecommendAccomProps { resultList: RecommendDataType[]; + isLoading: boolean; } -const RecommendAccom = ({ resultList }: RecommendAccomProps) => { +const RecommendAccom = ({ resultList, isLoading }: RecommendAccomProps) => { return (

    숙소 추천

    - + {isLoading ? ( + + + + ) : ( + + )}     ); }; @@ -26,3 +34,8 @@ const Container = styled.div` margin-bottom: 193px; text-align: left; `; + +const LoadingWrapper = styled.div` + background-color: red; + position: relative; +`; diff --git a/src/pages/DetailProgram/RecommendSpot.tsx b/src/pages/DetailProgram/RecommendSpot.tsx index 54035c7..15eb491 100644 --- a/src/pages/DetailProgram/RecommendSpot.tsx +++ b/src/pages/DetailProgram/RecommendSpot.tsx @@ -1,3 +1,4 @@ +import Loading from '@/components/Loading/Loading'; import RecommendCard from '@/components/RecommendCard/RecommendCard'; import { H1 } from '@/style/fonts/StyledFonts'; import { RecommendDataType } from '@/types'; @@ -5,13 +6,20 @@ import styled from 'styled-components'; interface RecommendSpotProps { resultList: RecommendDataType[]; + isLoading: boolean; } -const RecommendSpot = ({ resultList }: RecommendSpotProps) => { +const RecommendSpot = ({ resultList, isLoading }: RecommendSpotProps) => { return (

    여행지 추천

    - + {isLoading ? ( + + + + ) : ( + + )}     ); }; @@ -26,3 +34,8 @@ const Container = styled.div` padding-bottom: 16px; text-align: left; `; + +const LoadingWrapper = styled.div` + background-color: red; + position: relative; +`; diff --git a/src/pages/DetailProgram/index.tsx b/src/pages/DetailProgram/index.tsx index 4473d7f..19f5726 100644 --- a/src/pages/DetailProgram/index.tsx +++ b/src/pages/DetailProgram/index.tsx @@ -32,14 +32,16 @@ const DetailProgram = () => { programId, writerVersion, }); - const { data: recommendSpotList } = useGetRegionTour({ - programId, - writerVersion, - }); - const { data: recommendAccomList } = useGetRegionLodgment({ - programId, - writerVersion, - }); + const { data: recommendSpotList, isLoading: spotListLoading } = + useGetRegionTour({ + programId, + writerVersion, + }); + const { data: recommendAccomList, isLoading: accomListLoading } = + useGetRegionLodgment({ + programId, + writerVersion, + }); const userInfo = useRecoilValue(UserAtom); const navigate = useNavigate(); @@ -59,7 +61,7 @@ const DetailProgram = () => { if (window.confirm('공고를 삭제하시겠습니까?')) { ManagerAPI.deleteProgram(programInfoData.result.id).then(() => { window.alert('공고가 삭제되었습니다.'); - navigate('/'); + navigate(-1); }); } }; @@ -94,12 +96,22 @@ const DetailProgram = () => {
    - {recommendSpotList && recommendSpotList.length > 0 && ( - - )} - {recommendAccomList && recommendAccomList.length > 0 && ( - - )} + 0 + ? recommendSpotList + : [] + } + isLoading={spotListLoading} + /> + 0 + ? recommendAccomList + : [] + } + isLoading={accomListLoading} + />
    @@ -141,6 +153,10 @@ const Container = styled.div` padding-bottom: 190px; display: flex; flex-direction: column; + + body:not(&) { + background-color: white; + } `; const InnerContainer = styled.div` diff --git a/src/pages/ModifyProgram/index.tsx b/src/pages/ModifyProgram/index.tsx index 24100a0..973d620 100644 --- a/src/pages/ModifyProgram/index.tsx +++ b/src/pages/ModifyProgram/index.tsx @@ -36,12 +36,6 @@ const EditProgram = () => { setProgramContent(insertData); setPhotoFile(programData.result.photo); - - const ext = programData.result.photo.split('.').pop(); - const filename = programData.result.photo.split('/').pop(); - const metadata = { type: `image/${ext}` }; - const newPhotoName = new File([filename], filename!, metadata); - setPhotoName(newPhotoName); } }, [programData]); @@ -91,7 +85,7 @@ const EditProgram = () => { }); result = result && programContent.programName.length <= 50; - result = result && photoName !== null; + result = result && photoFile !== ''; setIsPossibleSubmit(result); const tagString = programContent['hashtag'] @@ -101,7 +95,8 @@ const EditProgram = () => { if (result) { if (window.confirm(ALERT_MESSAGE.register)) { programId && formData.append('id', String(programId)); - photoName && formData.append('photo', photoName); + photoName !== null && formData.append('photo', photoName); + formData.append('photoCheck', photoName === null ? '0' : '1'); Object.keys(programContent).map(key => { if (programContent[key] !== '' && key === 'hashtag') { @@ -111,12 +106,22 @@ const EditProgram = () => { return formData.append(key, programContent[key]); }); - ManagerAPI.postEditProgram(formData).then(data => - navigate(`/detailProgram/${programContent['programName']}/${data}`), - ); + ManagerAPI.postEditProgram(formData) + .then(data => { + if (data.code === 200) { + navigate( + `/detailProgram/${programContent['programName']}/${data.result}`, + ); + } else { + window.alert('공고 수정에 실패했습니다.'); + } + }) + .catch(() => window.alert('공고 수정에 실패했습니다.')); } } else { window.scrollTo({ top: 0, behavior: 'smooth' }); + console.log(photoFile); + console.log(photoName); } }; @@ -151,4 +156,8 @@ export default EditProgram; const Container = styled.div` padding-top: 15px; padding-bottom: 268px; + + body:not(&) { + background-color: white; + } `; diff --git a/src/pages/RegisterProgram/Input/RoundedInput.tsx b/src/pages/RegisterProgram/Input/RoundedInput.tsx index 680ad98..e3516c8 100644 --- a/src/pages/RegisterProgram/Input/RoundedInput.tsx +++ b/src/pages/RegisterProgram/Input/RoundedInput.tsx @@ -34,6 +34,7 @@ const Wrapper = styled.div` border-radius: 40px; border: 1px solid var(--color_gray200); padding: 20px 36px; + background-color: white; color: var(--color_gray900); font-family: SUIT-Medium; diff --git a/src/pages/RegisterProgram/index.tsx b/src/pages/RegisterProgram/index.tsx index 4a0124c..7f4fd9c 100644 --- a/src/pages/RegisterProgram/index.tsx +++ b/src/pages/RegisterProgram/index.tsx @@ -40,12 +40,6 @@ const RegisterProgram = () => { if (isTemp) { if (window.confirm(ALERT_MESSAGE.getDraft)) { setPhotoFile(tempData.photoUrl); - - const ext = tempData.photoUrl.split('.').pop(); - const filename = tempData.photoUrl.split('/').pop(); - const metadata = { type: `image/${ext}` }; - const newPhotoName = new File([filename], filename!, metadata); - setPhotoName(newPhotoName); setProgramContent(insertData); } else { ManagerAPI.deleteTempProgram(tempData.programId); @@ -100,7 +94,7 @@ const RegisterProgram = () => { }); result = result && programContent.programName.length <= 50; - result = result && photoName !== null; + result = result && photoFile !== ''; setIsPossibleSubmit(result); const tagString = programContent['hashtag'] @@ -109,7 +103,8 @@ const RegisterProgram = () => { if (result) { if (window.confirm(ALERT_MESSAGE.register)) { - photoName && formData.append('photo', photoName); + photoName !== null && formData.append('photo', photoName); + formData.append('photoCheck', photoName === null ? '0' : '1'); Object.keys(programContent).map(key => { if (programContent[key] !== '' && key === 'hashtag') { @@ -119,9 +114,17 @@ const RegisterProgram = () => { return formData.append(key, programContent[key]); }); - ManagerAPI.postSaveProgram(formData).then(data => - navigate(`/detailProgram/${programContent['programName']}/${data}`), - ); + ManagerAPI.postSaveProgram(formData) + .then(data => { + if (data.code === 200) { + navigate( + `/detailProgram/${programContent['programName']}/${data.result}`, + ); + } else { + window.alert('공고 등록에 실패했습니다.'); + } + }) + .catch(() => window.alert('공고 등록에 실패했습니다.')); } } else { window.scrollTo({ top: 0, behavior: 'smooth' }); @@ -130,16 +133,23 @@ const RegisterProgram = () => { const handleDraft = () => { if (window.confirm(ALERT_MESSAGE.draft)) { - photoName && formData.append('photo', photoName); + photoName !== null && formData.append('photo', photoName); + formData.append('photoCheck', photoName === null ? '0' : '1'); Object.keys(programContent).map(key => { if (programContent[key] !== '') return formData.append(key, programContent[key]); }); - Object.keys(programContent).map(key => console.log(formData.get(key))); - - ManagerAPI.postTempSaveProgram(formData); + ManagerAPI.postTempSaveProgram(formData) + .then(data => { + if (data.code === 200) { + window.alert('임시 저장되었습니다.'); + } else { + window.alert('임시 저장에 실패했습니다.'); + } + }) + .catch(() => window.alert('임시 저장에 실패했습니다.')); } }; @@ -175,4 +185,8 @@ export default RegisterProgram; const Container = styled.div` padding-top: 15px; padding-bottom: 268px; + + body:not(&) { + background-color: white; + } `; diff --git a/src/pages/Search/FilterButtonItem.tsx b/src/pages/Search/FilterButtonItem.tsx index 60c38e7..1261ff9 100644 --- a/src/pages/Search/FilterButtonItem.tsx +++ b/src/pages/Search/FilterButtonItem.tsx @@ -2,10 +2,10 @@ import styled from 'styled-components'; import CalendarIcon from '@/assets/icons/calendar_icon.svg'; import { HiOutlineChevronDown } from 'react-icons/hi2'; import { B3 } from '@/style/fonts/StyledFonts'; -import { FilterListType } from '@/types'; +import { FilterButtonSize, FilterListType } from '@/types'; interface FilterButtonStyle { - $buttonSize: 'small' | 'medium' | 'large'; + $buttonSize: FilterButtonSize; } interface FilterButtonItemProps { @@ -48,9 +48,10 @@ const Container = styled.div` border-radius: 40px; cursor: pointer; - width: ${({ $buttonSize }) => $buttonSize === 'small' && '162px'}; - width: ${({ $buttonSize }) => $buttonSize === 'medium' && '200px'}; - width: ${({ $buttonSize }) => $buttonSize === 'large' && '230px'}; + width: ${({ $buttonSize }) => $buttonSize === 'xs' && '123px'}; + width: ${({ $buttonSize }) => $buttonSize === 's' && '163px'}; + width: ${({ $buttonSize }) => $buttonSize === 'm' && '183px'}; + width: ${({ $buttonSize }) => $buttonSize === 'l' && '250px'}; `; export default FilterButtonItem; diff --git a/src/pages/Search/FilterButtonList.tsx b/src/pages/Search/FilterButtonList.tsx index 7b8e76b..8e6e08a 100644 --- a/src/pages/Search/FilterButtonList.tsx +++ b/src/pages/Search/FilterButtonList.tsx @@ -100,6 +100,11 @@ const FilterButtonList = ({ [fieldDate[0]]: moment(dateValue[0]).format('YYYY-MM-DD'), [fieldDate[1]]: moment(dateValue[1]).format('YYYY-MM-DD'), }); + setCurrentFilterTitle( + `${moment(dateValue[0]).format('YYYY-MM-DD')} - ${moment( + dateValue[1], + ).format('YYYY-MM-DD')}`, + ); setTimeout(() => { setIsOpenFilterItem(false); }, 500); diff --git a/src/pages/Search/index.tsx b/src/pages/Search/index.tsx index 8bb6127..d0b840a 100644 --- a/src/pages/Search/index.tsx +++ b/src/pages/Search/index.tsx @@ -104,6 +104,10 @@ const Container = styled.div` padding-bottom: 170px; position: relative; min-height: calc(var(--vh, 1vh) * 100 * 100 / 75 - 80px); + + body:not(&) { + background-color: white; + } `; export default Search; diff --git a/src/pages/about/Gallae.tsx b/src/pages/about/Gallae.tsx index 7784eea..cba2e86 100644 --- a/src/pages/about/Gallae.tsx +++ b/src/pages/about/Gallae.tsx @@ -86,6 +86,10 @@ const ContentContainer = styled.div` flex-direction: column; gap: 120px; + body:not(&) { + background-color: white; + } + .content-container { display: flex; flex-direction: column; diff --git a/src/pages/about/Maker.tsx b/src/pages/about/Maker.tsx index 9bda8b7..4c960b6 100644 --- a/src/pages/about/Maker.tsx +++ b/src/pages/about/Maker.tsx @@ -29,6 +29,10 @@ const Container = styled.div` margin-top: 119px; margin-bottom: 150px; + body:not(&) { + background-color: white; + } + display: flex; flex-direction: column; align-items: center; diff --git a/src/pages/about/Tips.tsx b/src/pages/about/Tips.tsx index 463a666..40359dc 100644 --- a/src/pages/about/Tips.tsx +++ b/src/pages/about/Tips.tsx @@ -2,11 +2,13 @@ import { TIPS } from '@/constants/About'; import { CommonInner } from '@/style/common'; import { H2 } from '@/style/fonts/StyledFonts'; import styled from 'styled-components'; +import HoneyTip from '@/assets/icons/icon-honey-tip.png'; const Tips = () => { return ( +

    👉 선정될 수 있는 지원서 작성 꿀팁을 알려드릴게요!

    @@ -31,6 +33,10 @@ const Container = styled.div` body:not(&) { background-color: var(--color_background); } + + .honey-tip { + margin-bottom: 40px; + } `; const TipContainer = styled.div` @@ -50,6 +56,7 @@ const TipCard = styled.div` height: 332px; .description { + margin-top: 32px; color: var(--grey-700, #53575c); font-family: SUIT-Medium; font-size: 18px; diff --git a/src/pages/admin/DashBoard/ProgramTable.tsx b/src/pages/admin/DashBoard/ProgramTable.tsx index c6bf6c3..ca8186b 100644 --- a/src/pages/admin/DashBoard/ProgramTable.tsx +++ b/src/pages/admin/DashBoard/ProgramTable.tsx @@ -92,6 +92,9 @@ const TableLine = styled.tr` td { height: 25px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .icon { diff --git a/src/pages/admin/DashBoard/index.tsx b/src/pages/admin/DashBoard/index.tsx index ecdd492..aca21d4 100644 --- a/src/pages/admin/DashBoard/index.tsx +++ b/src/pages/admin/DashBoard/index.tsx @@ -78,7 +78,6 @@ const Container = styled.div` padding: 0px 20px 80px 20px; top: 80px; position: relative; - background-color: var(--color_background); body:not(&) { background-color: var(--color_background); diff --git a/src/pages/admin/Profile/index.tsx b/src/pages/admin/Profile/index.tsx index ff23d2a..5544b7b 100644 --- a/src/pages/admin/Profile/index.tsx +++ b/src/pages/admin/Profile/index.tsx @@ -52,6 +52,10 @@ const Container = styled.div` margin-top: 120px; margin-bottom: 180px; + body:not(&) { + background-color: white; + } + .information-container { display: flex; flex-direction: column; diff --git a/src/pages/board/Board.tsx b/src/pages/board/Board.tsx index 5405926..d8343bf 100644 --- a/src/pages/board/Board.tsx +++ b/src/pages/board/Board.tsx @@ -6,8 +6,8 @@ import { useQuery } from 'react-query'; import Introduction from './Introduction'; import Filter from './Filter'; import PostingList from './PostingList'; -import ReviewImage from '@/assets/board/review-image.svg'; -import ArchiveImage from '@/assets/board/archive-image.svg'; +import ReviewImage from '@/assets/board/review-image.png'; +import ArchiveImage from '@/assets/board/archive-image.png'; import PageBar from '@/components/PageBar/PageBar'; import SearchBar from '@/components/SearchBar/SearchBar'; @@ -108,6 +108,10 @@ const Container = styled.div` padding: 0 260px; margin-bottom: 128px; + + body:not(&) { + background-color: white; + } `; const SearchBarWrapper = styled.div` diff --git a/src/pages/board/Introduction.tsx b/src/pages/board/Introduction.tsx index 0621a41..bea5a66 100644 --- a/src/pages/board/Introduction.tsx +++ b/src/pages/board/Introduction.tsx @@ -49,10 +49,14 @@ const ImageWrapper = styled.div` height: 180px; flex-shrink: 0; - img { + /* img { width: 100%; height: 100%; - } + } */ + + display: flex; + justify-content: center; + align-items: center; `; const TextContainer = styled.div` diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx index 696c3e0..84721df 100644 --- a/src/pages/login/Login.tsx +++ b/src/pages/login/Login.tsx @@ -105,6 +105,10 @@ const Container = styled.div` gap: 40px; zoom: 1.33333; + + body:not(&) { + background-color: white; + } `; const Title = styled.div` @@ -129,8 +133,7 @@ const LoginContainer = styled.div` const ErrorMessage = styled.div` position: absolute; - bottom: -30px; - left: 28px; + bottom: -27px; `; const Input = styled.input` @@ -162,6 +165,7 @@ const Button = styled.button` width: 440px; height: 60px; flex-shrink: 0; + margin-top: 28px; border-radius: 10px; background: var(--Sub-3, #ff7d2c); diff --git a/src/pages/login/LoginNavLink.tsx b/src/pages/login/LoginNavLink.tsx index f674df6..f61839b 100644 --- a/src/pages/login/LoginNavLink.tsx +++ b/src/pages/login/LoginNavLink.tsx @@ -23,10 +23,6 @@ const Container = styled.div` align-items: center; justify-items: center; gap: 21px; - - pre { - width: 88px; - } `; const Divider = styled.div` diff --git a/src/pages/main/Main.tsx b/src/pages/main/Main.tsx index 9d90e30..c87677c 100644 --- a/src/pages/main/Main.tsx +++ b/src/pages/main/Main.tsx @@ -27,4 +27,8 @@ const Container = styled.div` width: 100%; gap: 120px; + + body:not(&) { + background-color: white; + } `; diff --git a/src/pages/mileage/index.tsx b/src/pages/mileage/index.tsx index 047881f..1cfda1d 100644 --- a/src/pages/mileage/index.tsx +++ b/src/pages/mileage/index.tsx @@ -81,6 +81,10 @@ const Container = styled.div` width: 1440px; gap: 124px; margin: 229px auto 369px; + + body:not(&) { + background-color: white; + } `; const HistoryContainer = styled.div` diff --git a/src/pages/signup/index.tsx b/src/pages/signup/index.tsx index f558596..c1b4c54 100644 --- a/src/pages/signup/index.tsx +++ b/src/pages/signup/index.tsx @@ -108,6 +108,10 @@ const Container = styled.div` width: 1440px; margin: 229px auto 128px; zoom: 1.33333; + + body:not(&) { + background-color: white; + } `; const Title = styled.div` diff --git a/src/pages/user/MyPosting/index.tsx b/src/pages/user/MyPosting/index.tsx index dec4f44..bacfe85 100644 --- a/src/pages/user/MyPosting/index.tsx +++ b/src/pages/user/MyPosting/index.tsx @@ -54,6 +54,10 @@ const Container = styled.div` width: 1440px; margin: 229px auto; + body:not(&) { + background-color: white; + } + > div { &:nth-child(3) { margin-top: 48px; diff --git a/src/pages/user/Profile/index.tsx b/src/pages/user/Profile/index.tsx index 308fc5c..0ae6d7f 100644 --- a/src/pages/user/Profile/index.tsx +++ b/src/pages/user/Profile/index.tsx @@ -50,6 +50,10 @@ const Container = styled.div` margin-top: 120px; margin-bottom: 180px; + body:not(&) { + background-color: white; + } + .information-container { display: flex; flex-direction: column; diff --git a/src/pages/user/WishList/index.tsx b/src/pages/user/WishList/index.tsx index 2da631f..fc2e69e 100644 --- a/src/pages/user/WishList/index.tsx +++ b/src/pages/user/WishList/index.tsx @@ -96,6 +96,10 @@ const Container = styled.div` margin-top: 120px; margin-bottom: 180px; + body:not(&) { + background-color: white; + } + .title-container { display: flex; flex-direction: column; diff --git a/src/pages/write/index.tsx b/src/pages/write/index.tsx index bb9fbec..3c33c43 100644 --- a/src/pages/write/index.tsx +++ b/src/pages/write/index.tsx @@ -177,6 +177,10 @@ const Container = styled.div` width: 1440px; margin: auto; + + body:not(&) { + background-color: white; + } `; const MainContainer = styled.div` diff --git a/src/types/index.ts b/src/types/index.ts index 8d30131..a749605 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -44,11 +44,13 @@ export interface ProgramDetailInfoType extends ProgramMainInfoType { export interface FilterListType { title: string; enTitle: string; - buttonSize: 'small' | 'medium' | 'large'; + buttonSize: FilterButtonSize; calendar: boolean; items: string[]; } +export type FilterButtonSize = 'xs' | 's' | 'm' | 'l'; + export interface FilterInputType { [key: string]: string | null; orderCriteria: string | null;