Merge pull request #74 from KUSITMS-29th-TEAM-D/develop

fgdfgdfgdf
KUSITMS-29th-TEAM-D · May 23, 2024 · 3f5f138 · 3f5f138
2 parents ec04350 + ff8d4df
commit 3f5f138
Show file tree

Hide file tree

Showing 14 changed files with 189 additions and 107 deletions.
diff --git a/src/assets/backgrounds/setting.png b/src/assets/backgrounds/setting.png
diff --git a/src/assets/icons/calendar.svg b/src/assets/icons/calendar.svg
diff --git a/src/assets/icons/info.svg b/src/assets/icons/info.svg
diff --git a/src/components/ExperienceDetailPage/ImageSection.tsx b/src/components/ExperienceDetailPage/ImageSection.tsx
@@ -7,9 +7,8 @@ export const ImageSection = ({ description }: { description: string | undefined
 const StyledContainer = styled.div`
   width: 100%;
   height: 100%;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: 24px;
-  display: inline-flex;
+
+  img {
+    width: 100%;
+  }
 `;
diff --git a/src/components/MyPage/BrandView.tsx b/src/components/MyPage/BrandView.tsx
@@ -1,26 +1,49 @@
 import { useState } from 'react';
 
-import { styled } from 'styled-components';
+import styled from 'styled-components';
 
 import { ReactComponent as AddIcon } from '@/assets/icons/add.svg';
 import { ReactComponent as ArrowRight } from '@/assets/icons/arrowRight.svg';
+import { ReactComponent as CalendarIcon } from '@/assets/icons/calendar.svg';
+import { ReactComponent as InfoIcon } from '@/assets/icons/info.svg';
 import { ReactComponent as BrandLogoImage } from '@/assets/logos/brandLogo.svg';
 import Card from '@/components/MyPage/Card';
 import DateCard from '@/components/MyPage/DateCard';
 import { BrandChip } from '@/components/common/Chip/BrandChip';
 import { BrandCardModal } from '@/components/common/Modal/BrandCardModal';
 import { userService } from '@/services/UserService';
 
+interface DateCardProps {
+  title: string;
+  description: string;
+  date: string;
+}
+
 export const BrandView = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [readyCards, setReadyCards] = useState<DateCardProps[]>([]);
+  const [progressCards, setProgressCards] = useState<DateCardProps[]>([]);
+  const [completeCards, setCompleteCards] = useState<DateCardProps[]>([]);
 
-  const openModal = () => {
-    setIsModalOpen(true);
-  };
+  const openModal = () => setIsModalOpen(true);
+  const closeModal = () => setIsModalOpen(false);
 
-  const closeModal = () => {
-    setIsModalOpen(false);
+  const addDateCard = (
+    title: string,
+    description: string,
+    date: string,
+    status: '준비' | '진행중' | '완료'
+  ) => {
+    const newCard = { title, description, date };
+    if (status === '준비') {
+      setReadyCards((prev) => [...prev, newCard]);
+    } else if (status === '진행중') {
+      setProgressCards((prev) => [...prev, newCard]);
+    } else if (status === '완료') {
+      setCompleteCards((prev) => [...prev, newCard]);
+    }
   };
+
   return (
     <StyledContainer>
       <BrandHeader>
@@ -40,10 +63,18 @@ export const BrandView = () => {
       </BrandHeader>
       <ContentContainer>
         <TopContent>
-          <BrandTextContainer>
-            <BrandText>브랜드 관리</BrandText>
-          </BrandTextContainer>
-          <BrandMenuContainer></BrandMenuContainer>
+          <BrandContainer>
+            <BrandTextContainer>
+              <BrandText>브랜드 관리</BrandText>
+              <RightIcon>
+                <InfoIcon />
+              </RightIcon>
+            </BrandTextContainer>
+          </BrandContainer>
+
+          <BrandMenuContainer>
+            <CalendarIcon />
+          </BrandMenuContainer>
         </TopContent>
         <CenterContent>
           <RecommendContainer>
@@ -66,9 +97,17 @@ export const BrandView = () => {
                 <AddIcon width="42px" height="42px" />
               </StyledAdd>
             </CardHeader>
-            {Dummy3.map((item) => (
+            {Dummy3.map((item, index) => (
               <DateCard
-                key={item.id}
+                key={index}
+                title={item.title}
+                description={item.description}
+                date={item.date}
+              />
+            ))}
+            {readyCards.map((item, index) => (
+              <DateCard
+                key={index}
                 title={item.title}
                 description={item.description}
                 date={item.date}
@@ -82,9 +121,17 @@ export const BrandView = () => {
                 <AddIcon width="42px" height="42px" />
               </StyledAdd>
             </CardHeader>
-            {Dummy4.map((item) => (
+            {Dummy4.map((item, index) => (
+              <DateCard
+                key={index}
+                title={item.title}
+                description={item.description}
+                date={item.date}
+              />
+            ))}
+            {progressCards.map((item, index) => (
               <DateCard
-                key={item.id}
+                key={index}
                 title={item.title}
                 description={item.description}
                 date={item.date}
@@ -98,9 +145,17 @@ export const BrandView = () => {
                 <AddIcon width="42px" height="42px" />
               </StyledAdd>
             </CardHeader>
-            {Dummy5.map((item) => (
+            {Dummy5.map((item, index) => (
+              <DateCard
+                key={index}
+                title={item.title}
+                description={item.description}
+                date={item.date}
+              />
+            ))}
+            {completeCards.map((item, index) => (
               <DateCard
-                key={item.id}
+                key={index}
                 title={item.title}
                 description={item.description}
                 date={item.date}
@@ -109,7 +164,7 @@ export const BrandView = () => {
           </BottomContainer>
         </BottomContent>
       </ContentContainer>
-      <BrandCardModal isOpen={isModalOpen} onClose={closeModal} />
+      <BrandCardModal isOpen={isModalOpen} onClose={closeModal} onAdd={addDateCard} />
     </StyledContainer>
   );
 };
@@ -203,16 +258,21 @@ const BrandTextContainer = styled.div`
   gap: 12px;
   display: flex;
 `;
+const BrandContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 12px;
+  display: flex;
+`;
 const BrandText = styled.div`
   text-align: center;
   color: ${({ theme }) => `${theme.color.gray800}`};
   ${({ theme }) => theme.font.desktop.title2};
   word-wrap: break-word;
 `;
 const BrandMenuContainer = styled.div`
-  border-radius: 8px;
-  overflow: hidden;
-  border: 2px #efefef solid;
   justify-content: flex-start;
   align-items: center;
   display: flex;

diff --git a/src/components/MyPage/Card.tsx b/src/components/MyPage/Card.tsx
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
 const Container = styled.div`
-  width: 300px;
-  height: auto;
+  width: 100%;
+  height: 100%;
   padding: 20px;
   background: ${({ theme }) => `${theme.color.white}`};
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.13);
@@ -16,7 +16,7 @@ const Container = styled.div`
 
 const InnerContainer = styled.div`
   align-self: stretch;
-  height: 72px;
+  height: 100px;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
@@ -33,13 +33,13 @@ const Title = styled.div`
 
 const Description = styled.div`
   align-self: stretch;
+  flex: 1;
   color: ${({ theme }) => `${theme.color.gray500}`};
   ${({ theme }) => theme.font.desktop.label2};
   word-wrap: break-word;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: pre-wrap;
-  max-height: 100px;
 `;
 
 const Card = ({ title, description }: { title: string; description: string }) => {

diff --git a/src/components/MyPage/DateCard.tsx b/src/components/MyPage/DateCard.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Container = styled.div`
   width: 100%;
-  height: auto;
+  height: 100%;
   padding: 20px;
   background: ${({ theme }) => `${theme.color.white}`};
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.13);
@@ -16,7 +16,7 @@ const Container = styled.div`
 
 const InnerContainer = styled.div`
   align-self: stretch;
-  height: 72px;
+  height: 100px;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
@@ -39,7 +39,6 @@ const Description = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: pre-wrap;
-  max-height: 100px;
 `;
 
 const DateText = styled.div`

diff --git a/src/components/MyPage/MyBrandingView.tsx b/src/components/MyPage/MyBrandingView.tsx
@@ -6,9 +6,9 @@ import { authClient } from '@/apis/client';
 import { ExperienceCard } from '@/components/MyPage/ExperienceCard';
 
 interface ApiResponseItem {
-  selfUnderstandingUrl: string;
-  name: string;
-  link: string;
+  imageUrl: string;
+  programsTitle: string;
+  type: string;
   programsId: number;
 }
 
@@ -51,10 +51,10 @@ export const MyBrandingView = ({ programData, sortOrder }: MyExperienceProps) =>
         {data.map((item) => (
           <ExperienceCard
             key={item.programsId}
-            imageUrl={item.selfUnderstandingUrl}
-            title={item.link ? '셀피스 프로그램' : '외부 프로그램'}
-            subtitle={item.name}
-            $variant={item.link ? 'type1' : 'type2'}
+            imageUrl={item.imageUrl}
+            title={item.programsTitle ? '신청 완료' : '외부 프로그램'}
+            $variant={item.programsTitle ? 'type1' : 'type2'}
+            subtitle={item.programsTitle}
           />
         ))}
       </Container>

diff --git a/src/components/MyPage/MyExperienceWholeView.tsx b/src/components/MyPage/MyExperienceWholeView.tsx
@@ -6,9 +6,9 @@ import { authClient } from '@/apis/client';
 import { ExperienceCard } from '@/components/MyPage/ExperienceCard';
 
 interface ApiResponseItem {
-  selfUnderstandingUrl: string;
-  name: string;
-  link: string;
+  imageUrl: string;
+  programsTitle: string;
+  type: string;
   programsId: number;
 }
 
@@ -51,10 +51,10 @@ export const MyExperienceWholeView = ({ programData, sortOrder }: MyExperiencePr
         {data.map((item) => (
           <ExperienceCard
             key={item.programsId}
-            imageUrl={item.selfUnderstandingUrl}
-            title={item.link ? '셀피스 프로그램' : '외부 프로그램'}
-            subtitle={item.name}
-            $variant={item.link ? 'type1' : 'type2'}
+            imageUrl={item.imageUrl}
+            title={item.programsTitle ? '신청 완료' : '외부 프로그램'}
+            $variant={item.programsTitle ? 'type1' : 'type2'}
+            subtitle={item.programsTitle}
           />
         ))}
       </Container>

diff --git a/src/components/MyPage/MyUnderstandingView.tsx b/src/components/MyPage/MyUnderstandingView.tsx
@@ -6,9 +6,9 @@ import { authClient } from '@/apis/client';
 import { ExperienceCard } from '@/components/MyPage/ExperienceCard';
 
 interface ApiResponseItem {
-  selfUnderstandingUrl: string;
-  name: string;
-  link: string;
+  imageUrl: string;
+  programsTitle: string;
+  type: string;
   programsId: number;
 }
 
@@ -51,10 +51,10 @@ export const MyUnderstandingView = ({ programData, sortOrder }: MyExperienceProp
         {data.map((item) => (
           <ExperienceCard
             key={item.programsId}
-            imageUrl={item.selfUnderstandingUrl}
-            title={item.link ? '셀피스 프로그램' : '외부 프로그램'}
-            subtitle={item.name}
-            $variant={item.link ? 'type1' : 'type2'}
+            imageUrl={item.imageUrl}
+            title={item.programsTitle ? '신청 완료' : '외부 프로그램'}
+            $variant={item.programsTitle ? 'type1' : 'type2'}
+            subtitle={item.programsTitle}
           />
         ))}
       </Container>

diff --git a/src/components/MyPage/SettingView.tsx b/src/components/MyPage/SettingView.tsx
@@ -1,12 +1,25 @@
 import { styled } from 'styled-components';
 
+import backgroundImg from '@/assets/backgrounds/setting.png';
 export const SettingView = () => {
-  return <StyledContainer>설정어쩌구</StyledContainer>;
+  return (
+    <StyledContainer>
+      <ImageContainer />
+    </StyledContainer>
+  );
 };
 
 const StyledContainer = styled.div`
   width: 100%;
   height: 100%;
   padding: 100px 24px 52px 24px;
-  background-color: aliceblue;
+`;
+
+const ImageContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  background-image: url(${backgroundImg});
+  background-size: contain;
+  background-position: top;
+  background-repeat: no-repeat;
 `;