Hotfix/#74/minha (#91)

* fix: 콘솔 에러 수정 및 관리자 관련 기능 캐싱 삭제 * fix: 공고 수정 안내 문구 변경 * fix: 검색 시 지역명 전국은 null로 보내도록 수정 * fix: 페이지 이동 후에도 검색 결과가 남는 버그 수정 * fix: 등록 취소하면 바로 전 페이지로 이동하도록 수정 * fix: 매 페이지마다 스크롤 되도록 수정 * fix: 이메일이 없을 경우 인증 뱃지가 안나오도록 수정 * fix: 공고 상세 페이지 내에 글자 넘칠때 줄 바꿔서 보이도록 수정 * style: 불필요한 console.log 제거 * fix: 꿀단지 이미지 눌러도 이동되도록 수정 * fix: 여행 프로그램 필터 변경 시 세부 카테고리 초기화 되도록 수정 * fix: 추천 목록이 없으면 안보이도록 수정 * feat: 추천 아이템 링크 연결 * feat: 푸터 적용 * feat: 푸터 적용 * fix: 필터 디폴트 정렬 순서 변경 * fix: 프로그램 상세 내용 줄바꿈 적용
Kusitms-28th-Meet-Up-B · Nov 23, 2023 · b9eb280 · b9eb280
1 parent a472166
commit b9eb280
Show file tree

Hide file tree

Showing 14 changed files with 346 additions and 185 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -53,14 +53,14 @@ const route = createBrowserRouter([
             index: true,
             element: (
               <Board
-                title="지원후기"
-                description="여행 지원사업/대외활동/공모전의 지원후기를 볼 수 있는 페이지입니다."
+                title="활동후기"
+                description="여행 지원사업/대외활동/공모전의 후기를 볼 수 있는 페이지입니다."
               />
             ),
           },
           {
             path: ':id',
-            element: <DetailPosting title="지원 후기" />,
+            element: <DetailPosting title="활동후기" />,
           },
           {
             path: 'write',
@@ -117,7 +117,7 @@ const route = createBrowserRouter([
           },
           {
             path: 'review/:id',
-            element: <DetailPosting title="지원 후기" />,
+            element: <DetailPosting title="활동후기" />,
           },
           {
             path: 'archive/:id',

diff --git a/src/assets/icons/icon-instagram.svg b/src/assets/icons/icon-instagram.svg
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -0,0 +1,112 @@
+import styled from 'styled-components';
+import Logo from '@/assets/icons/icon-logo.svg';
+import { CommonInner } from '@/style/common';
+import { MEMBER } from '@/constants/About';
+import InstagramIcon from '@/assets/icons/icon-instagram.svg';
+
+const Footer = () => {
+  return (
+    <Container>
+      <CommonInner>
+        <InnerContainer>
+          <TitleContainer>
+            <img width="36px" alt="로고" src={Logo} />
+            <div className="title">갈래</div>
+          </TitleContainer>
+          <MakerContainer>
+            {Object.keys(MEMBER).map(role => (
+              <Role>
+                <div className="role">{role}</div>
+                {MEMBER[role].map(member => (
+                  <div className="member">{member}</div>
+                ))}
+              </Role>
+            ))}
+          </MakerContainer>
+          <Instagram href="https://www.instagram.com/travelmaker.team/">
+            <img className="instagram" alt="인스타" src={InstagramIcon} />
+          </Instagram>
+        </InnerContainer>
+      </CommonInner>
+    </Container>
+  );
+};
+
+export default Footer;
+
+const Container = styled.div`
+  background-color: #282828;
+  height: 560px;
+  width: 100%;
+`;
+
+const InnerContainer = styled.div`
+  height: 420px;
+  position: relative;
+`;
+const TitleContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 11px;
+  align-items: center;
+  height: 38px;
+
+  .title {
+    color: var(--main_1, #fff);
+    text-align: center;
+    font-family: Recipekorea;
+    font-size: 28px;
+    font-style: normal;
+    font-weight: 400;
+
+    display: flex;
+    align-items: center;
+    padding-top: 15px;
+  }
+`;
+
+const MakerContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 230px;
+  margin-top: 50px;
+`;
+
+const Role = styled.div`
+  width: 90px;
+
+  .role {
+    color: #9098a0;
+    font-family: Inter;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 25.453px; /* 140% */
+    letter-spacing: -0.13px;
+    padding-bottom: 15px;
+  }
+
+  .member {
+    color: #666b71;
+    font-family: Inter;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 25.453px; /* 140% */
+    letter-spacing: -0.13px;
+    padding: 5px;
+  }
+`;
+
+const Instagram = styled.a`
+  width: max-content;
+  padding: 14px;
+  border-radius: 40px;
+  border: 1px solid #edf1f7;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/src/components/RecommendCard/RecommendCardItem.tsx b/src/components/RecommendCard/RecommendCardItem.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 const RecommendCardItem = ({ result }: { result: RecommendDataType }) => {
   return (
-    <Container>
+    <Container href={result.link}>
       <img className="image" alt="image" src={result.photoUrl} />
       <CardInfoContainer>
         <H3 $fontColor="var(--color_gray900)">{result.title}</H3>
@@ -13,7 +13,7 @@ const RecommendCardItem = ({ result }: { result: RecommendDataType }) => {
   );
 };
 
-const Container = styled.div`
+const Container = styled.a`
   width: 323px;
   height: max-content;
   position: relative;

diff --git a/src/constants/About/index.ts b/src/constants/About/index.ts
@@ -107,3 +107,10 @@ export const TIPS = [
       '아무리 좋은 포트폴리오와, 좋은 지원서 작성 능력을 갖추고 있다 해도, 여행 지원사업이 있는지 모르면 지원조차 할 수 없겠죠? 그래서 매일 업데이트되는 여행 지원사업 관련 소식을 알고있으면 좋아요. ‘갈래’에 주기적으로 접속해서 여행 지원사업을 확인하고, 꿀팁을 기반으로 참신한 지원서를 작성해보는 건 어떨까요?',
   },
 ];
+
+export const MEMBER: { [key: string]: string[] } = {
+  Planner: ['김민아', '이상민', '김다연'],
+  Designer: ['김그린'],
+  'Front-End': ['안민하', '안재국'],
+  'Back-End': ['나세빈', '김명현'],
+};
diff --git a/src/pages/DetailProgram/ProgramBody.tsx b/src/pages/DetailProgram/ProgramBody.tsx
@@ -25,8 +25,8 @@ const Container = styled.div`
     font-size: 20px;
     line-height: 150%;
     color: var(--color_gray900);
-
-    word-wrap: break-word;
+    white-space: pre-wrap;
+    //word-wrap: break-word;
   }
 `;
 

diff --git a/src/pages/DetailProgram/index.tsx b/src/pages/DetailProgram/index.tsx
@@ -19,6 +19,7 @@ import RoundedButton from '@/components/Button/RoundedButton';
 import { B1Bold } from '@/style/fonts/StyledFonts';
 import { useEffect, useState } from 'react';
 import { ManagerAPI } from '@/apis/manager';
+import Footer from '@/components/Footer/Footer';
 
 const DetailProgram = () => {
   const { _programId } = useParams();
@@ -66,69 +67,72 @@ const DetailProgram = () => {
 
   if (programInfoData && programInfoData !== undefined)
     return (
-      <Container>
-        <Background />
-        <CommonInner>
-          <InnerContainer>
-            <ProgramHead
-              program={programInfoData.result}
-              isLike={isLike}
-              setIsLike={setIsLike}
-              writer={writerVersion}
-            />
-            <hr />
-            <ProgramBody description={programInfoData.result.description} />
-            <hr />
-            {!writerVersion && (
-              <RecommendProgram
-                programs={
-                  recommendProgram && recommendProgram.length > 0
-                    ? recommendProgram
-                    : []
-                }
+      <>
+        <Container>
+          <Background />
+          <CommonInner>
+            <InnerContainer>
+              <ProgramHead
+                program={programInfoData.result}
+                isLike={isLike}
+                setIsLike={setIsLike}
+                writer={writerVersion}
               />
-            )}
-          </InnerContainer>
-        </CommonInner>
-        {!writerVersion && (
-          <div>
-            <BackgroundLine />
-            <CommonInner>
-              {recommendSpotList && recommendSpotList.length > 0 && (
-                <RecommendSpot resultList={recommendSpotList} />
+              <hr />
+              <ProgramBody description={programInfoData.result.description} />
+              <hr />
+              {!writerVersion && (
+                <RecommendProgram
+                  programs={
+                    recommendProgram && recommendProgram.length > 0
+                      ? recommendProgram
+                      : []
+                  }
+                />
               )}
-              {recommendAccomList && recommendAccomList.length > 0 && (
-                <RecommendAccom resultList={recommendAccomList} />
-              )}
-            </CommonInner>
-            <HoneyTipButton />
-          </div>
-        )}
-        {writerVersion && (
-          <ButtonContainer>
-            <RoundedButton
-              $buttonColor="#AEB3B8"
-              $buttonWidth="190px"
-              $buttonHeight="54px"
-              $hoverTextColor="rgba(255, 255, 255, 0.70)"
-              onClick={handleDeleteProgram}
-            >
-              <B1Bold $fontColor="white">삭제하기</B1Bold>
-            </RoundedButton>
-            <RoundedButton
-              $buttonColor="var(--color_main1)"
-              $buttonWidth="190px"
-              $buttonHeight="54px"
-              $hoverTextColor="rgba(255, 255, 255, 0.70)"
-              onClick={() => {
-                navigate(`/admin/edit/${programInfoData.result.id}`);
-              }}
-            >
-              <B1Bold $fontColor="white">수정하기</B1Bold>
-            </RoundedButton>
-          </ButtonContainer>
-        )}
-      </Container>
+            </InnerContainer>
+          </CommonInner>
+          {!writerVersion && (
+            <div>
+              <BackgroundLine />
+              <CommonInner>
+                {recommendSpotList && recommendSpotList.length > 0 && (
+                  <RecommendSpot resultList={recommendSpotList} />
+                )}
+                {recommendAccomList && recommendAccomList.length > 0 && (
+                  <RecommendAccom resultList={recommendAccomList} />
+                )}
+              </CommonInner>
+              <HoneyTipButton />
+            </div>
+          )}
+          {writerVersion && (
+            <ButtonContainer>
+              <RoundedButton
+                $buttonColor="#AEB3B8"
+                $buttonWidth="190px"
+                $buttonHeight="54px"
+                $hoverTextColor="rgba(255, 255, 255, 0.70)"
+                onClick={handleDeleteProgram}
+              >
+                <B1Bold $fontColor="white">삭제하기</B1Bold>
+              </RoundedButton>
+              <RoundedButton
+                $buttonColor="var(--color_main1)"
+                $buttonWidth="190px"
+                $buttonHeight="54px"
+                $hoverTextColor="rgba(255, 255, 255, 0.70)"
+                onClick={() => {
+                  navigate(`/admin/edit/${programInfoData.result.id}`);
+                }}
+              >
+                <B1Bold $fontColor="white">수정하기</B1Bold>
+              </RoundedButton>
+            </ButtonContainer>
+          )}
+        </Container>
+        <Footer />
+      </>
     );
 
   return null;