Merge pull request #111 from Kusitms-29th-ASAP/design/#110

src/app/signin/process3/page.tsx

@@ -168,6 +168,8 @@ const Search = styled.div`
 `;
 
 const SearchBoxList = styled.div`
+  width: calc(100% - 84px);
+  max-height: 200px;
   display: flex;
   flex-direction: column;
   margin-top: 8px;
@@ -178,16 +180,14 @@ const SearchBoxList = styled.div`
   position: absolute;
   top: 36px;
   left: 0;
-  right: 0;
-  width: 100%;
-  max-height: 200px;
   overflow-y: auto;
   background: ${({ theme }) => theme.colors.white};
 
   z-index: 1;
 `;
 
 const SearchBox = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: column;
   padding: 16px;

src/app/signin/process4/page.tsx

@@ -132,7 +132,8 @@ const ContentBox = styled.div`
 `;
 
 const CheckboxBox = styled.div`
+  width: 100%;
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   gap: 8px;
 `;

src/components/common/ListBox.tsx

@@ -147,7 +147,7 @@ const StyledListBox = styled.div<ListBoxProps>`
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 12px 0px 12px 12px;
+  padding: 12px 12px 12px 12px;
 
   &.none {
     background: ${theme.colors.white};
@@ -167,10 +167,10 @@ const StyledListBox = styled.div<ListBoxProps>`
 `;
 
 const Content = styled.div`
+  width: calc(100% - 61px);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  gap: 0px;
 `;
 
 const Row = styled.div`
@@ -184,11 +184,6 @@ const Content1 = styled.div`
   color: ${theme.colors.b700};
 `;
 
-const D = styled.div`
-  ${(props) => props.theme.fonts.caption1_m};
-  color: ${theme.colors.b600};
-`;
-
 const Content2 = styled.div`
   ${(props) => props.theme.fonts.caption1_m};
   color: ${theme.colors.b400};
@@ -222,6 +217,7 @@ const Span = styled.span`
 `;
 
 const Text = styled.div`
+  width: 100%;
   color: ${theme.colors.b700};
   ${(props) => props.theme.fonts.body3_m};
 `;

src/components/common/Popup.tsx

@@ -63,6 +63,13 @@ const Overlay = styled.div`
   z-index: 1000;
 `;
 
+/* 문자열 height 0.8배 계산 함수 ("800px(%)"=>"640px(%)") */
+const calculateHeight = (height: string) => {
+  const value = parseFloat(height);
+  const unit = height.replace(value.toString(), "");
+  return `${value * 0.8}${unit}`;
+};
+
 const StyledPopup = styled(motion.div)<{ height: string }>`
   max-width: 480px;
   width: 100%;
@@ -73,6 +80,10 @@ const StyledPopup = styled(motion.div)<{ height: string }>`
   color: ${theme.colors.b700};
   border-radius: 12px 12px 0px 0px;
   z-index: 300;
+
+  @media screen and (max-height: 800px) {
+    height: ${(props) => calculateHeight(props.height)};
+  }
 `;
 
 const Title = styled.div`

src/components/home/MealTablePopup.tsx

@@ -40,13 +40,21 @@ const MealTablePopup = ({ onClose }: { onClose: () => void }) => {
   const [mealTable, setMealTable] = useState<MealTable[]>([]);
   /* 주간별 급식 데이터 */
   const [weeklyMealTable, setWeeklyMealTable] = useState<MealTable[][]>([]);
+  const [month, setMonth] = useState<string>("");
 
   useEffect(() => {
     Axios.get(`/api/v1/menus/month`)
       .then((response) => {
         const mealTableData: MealTable[] = response.data.menus;
         setMealTable(mealTableData);
 
+        /* 월 계산 */
+        let month = mealTableData[0].date.slice(5, 7);
+        if (month[0] === "0") {
+          month = month[1];
+        }
+        setMonth(month);
+
         const weeklyMealTable: MealTable[][] = [];
         let currentWeek: MealTable[] = [];
         /* 주차별 시작일 */
@@ -90,11 +98,13 @@ const MealTablePopup = ({ onClose }: { onClose: () => void }) => {
   }, []);
 
   return (
-    <Popup onClose={onClose} title="5월 급식표" height="716px">
+    <Popup onClose={onClose} title={`${month}월 급식표`} height="716px">
       <StyledTable>
         {weeklyMealTable.map((week, weekIndex) => (
           <>
-            <Title>5월 {weekIndex + 1}주차</Title>
+            <Title>
+              {month}월 {weekIndex + 1}주차
+            </Title>
             <Week key={weekIndex}>
               {week.map((data, index) => (
                 <MenuCard key={index} date={data.date} foods={data.foods} />

src/components/school/home/HomeGuideRemind.tsx

@@ -41,6 +41,10 @@ const TitleBox = styled.div`
   justify-content: space-between;
   align-items: center;
   width: 100%;
+
+  @media screen and (max-width: 360px) {
+    flex-direction: column;
+  }
 `;
 
 const Title = styled.div`

src/components/school/home/TimeTable/SubjectBox.tsx

@@ -1,3 +1,4 @@
+import subjectTransformData from "@/data/subjectTransformData";
 import styled from "styled-components";
 
 interface SubjectBoxProps {
@@ -7,14 +8,17 @@ interface SubjectBoxProps {
 const SubjectBox = (props: SubjectBoxProps) => {
   const { subject } = props;
 
-  return <Container>{subject}</Container>;
+  const transformSubject = (subject: string) => {
+    return subjectTransformData[subject] || subject;
+  };
+
+  return <Container>{transformSubject(subject)}</Container>;
 };
 
 export default SubjectBox;
 
 const Container = styled.div`
   display: flex;
-  padding: 6px 10px;
   justify-content: center;
   align-items: center;
   height: 40px;
@@ -26,4 +30,8 @@ const Container = styled.div`
   border-radius: 6px;
   border: 1px solid ${({ theme }) => theme.colors.b200};
   background: ${({ theme }) => theme.colors.b50};
+
+  @media screen and (max-width: 380px) {
+    ${(props) => props.theme.fonts.caption2_m};
+  }
 `;

src/components/school/home/TimeTable/TimeTable.tsx

@@ -19,7 +19,9 @@ const TimeTable = () => {
           <DateSelect type={"week"} />
           <More text="일정 자세히 보기" onClick={handleDetailClick} />
         </TopBox>
-        <TimeTableBox />
+        <TimeTableBoxContainer>
+          <TimeTableBox />
+        </TimeTableBoxContainer>
       </Container>
     </WhiteBox>
   );
@@ -37,4 +39,12 @@ const TopBox = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+
+  @media screen and (max-width: 360px) {
+    flex-direction: column;
+  }
+`;
+
+const TimeTableBoxContainer = styled.div`
+  overflow-x: scroll;
 `;

src/components/school/home/TimeTable/TimeTableBox.tsx

@@ -64,6 +64,7 @@ const TimeTableBox = () => {
 export default TimeTableBox;
 
 const Container = styled.div`
+  min-width: 278px;
   display: flex;
   flex-direction: column;
   gap: 10px;

src/data/subjectTransformData.ts

@@ -0,0 +1,39 @@
+const subjectTransformData: { [key: string]: string } = {
+    "즐거운생활": "즐거운\n생활",
+    "슬기로운생활": "슬기로운\n생활",
+    "자율·자치활동": "자율·\n자치활동",
+    "바른생활": "바른\n생활",
+    "동아리활동": "동아리\n활동",
+    "진로활동": "진로\n활동",
+    "봉사활동": "봉사\n활동",
+    "자율활동수영교실-": "수영\n교실",
+    "과학수영교실-": "수영\n교실",
+    "영어수영교실-": "수영\n교실",
+    "사회수영교실-": "수영\n교실",
+    "즐거운생활소체육대회-": "체육\n대회",
+    "자율·자치활동소체육대회-": "체육\n대회",
+    "국어소체육대회-": "체육\n대회",
+    "국어1학년 체험학습-": "체험\n학습",
+    "수학1학년 체험학습-": "체험\n학습",
+    "진로활동1학년 체험학습-": "체험\n학습",
+    "즐거운생활1학년 체험학습-": "체험\n학습",
+    "슬기로운생활1학년 체험학습-": "체험\n학습",
+    "자율·자치활동현장학습-": "체험\n학습",
+    "자율활동학년운동회주간-": "학년\n운동회",
+    "체육학년운동회주간-": "학년\n운동회",
+    "봉사활동학년운동회주간-": "학년\n운동회",
+    "자율·자치활동진로체험학습(2학년)-": "체험\n학습",
+    "진로활동진로체험학습(2학년)-": "체험\n학습",
+    "국어진로체험학습(2학년)-": "체험\n학습",
+    "바른생활진로체험학습(2학년)-": "체험\n학습",
+    "슬기로운생활진로체험학습(2학년)-": "체험\n학습",
+    "국어학교자율휴업일-": "자율\n휴업일",
+    "음악학교자율휴업일-": "자율\n휴업일",
+    "과학학교자율휴업일-": "자율\n휴업일",
+    "사회학교자율휴업일-": "자율\n휴업일",
+    "학교자율휴업일-": "자율\n휴업일",
+    "자율·자치활동입학 백일잔치-": "자율·\n자치활동"
+  };
+
+  export default subjectTransformData;
+