Merge branch 'develop' into chore/#16

README.md

@@ -1,4 +1,4 @@
-# TaeGong-s-life
+# DeepBlue
 
 ## 실행 전
 .env 파일 추가 해주세요

backend/database.py

@@ -7,7 +7,7 @@
 # 
 # ker.internal 외부에서 도커에 접속하기 위한 주소
 if os.getenv('MYSQL_HOST'):
-    SQLALCHEMY_DATABASE_URL = "mysql+pymysql://taegong:taegong@host.docker.internal:3306/taegong"
+    SQLALCHEMY_DATABASE_URL = "mysql+pymysql://taegong:taegong@172.17.0.1:3306/taegong"
 else:
     SQLALCHEMY_DATABASE_URL = "mysql+pymysql://taegong:taegong@localhost:3306/taegong"
 

db/Dockerfile

@@ -0,0 +1,13 @@
+#Create MySQL Image for JSP Tutorial Application
+FROM mysql:8.0-oracle
+
+WORKDIR /db
+
+# Use the environment variables from the .env file
+ENV MYSQL_ROOT_PASSWORD=root
+ENV MYSQL_DATABASE=taegong
+ENV MYSQL_USER=taegong
+ENV MYSQL_PASSWORD=taegong
+
+EXPOSE 3306
+

db/README.md

@@ -0,0 +1,6 @@
+# 실행 방법
+
+## 1. docker 이미지 만들기
+docker build -t mysql .
+## 2.컨테이너 실행하기
+docker run --name mysql -p 3306:3306 mysql

Docker-compose.yml → docker-compose.yaml

@@ -12,31 +12,40 @@ services:
 
   mysql:
     container_name: taegong_mysql
-    image: mysql:8.0-oracle
+    #    image: mysql:8.0-oracle
+    build:
+      context: ./db
+      dockerfile: Dockerfile
     volumes:
       - mysql_data_dev:/mysql
-    env_file:
-      - ./.env
+    #    env_file:
+    #      - ./.env
     networks:
       - mynet
     ports:
       - 3306:3306
+    healthcheck:
+      test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
 
   backend:
     container_name: taegong_backend
     build: ./backend
     environment:
       MYSQL_HOST: "1234"
     entrypoint: /bin/bash
-    command: -c "sleep 10 && uvicorn main:app --host 0.0.0.0 --reload"
+    command: -c "uvicorn main:app --host 0.0.0.0 --reload"
     ports:
       - 8000:8000
     networks:
       - mynet
     # 작업이 끝나도 종료되지 않게 하는 명령
     tty: true
     depends_on:
-      - mysql
+      mysql:
+        condition: service_healthy
 
 volumes:
   mysql_data_dev: null

frontend/src/components/DetailFishList/index.scss

@@ -0,0 +1,144 @@
+@import '@/media.scss';
+.DetailPage {
+  color: black;
+  background-color: rgba(217, 217, 217, 0.5);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+.DetailPage_inform {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 80vw;
+  height: 80%;
+  min-height: 300px;
+  background-color: white;
+  border: 3px solid #0e1733;
+  border-radius: 1rem;
+  overflow: scroll;
+  padding: 1.5rem;
+  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+  align-items: center;
+  animation: showEncyclopedia 0.5s;
+
+  @include tablet {
+    display: flex;
+    flex-direction: row;
+  }
+}
+
+.DetailPage_inform-img {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  min-width: 90%;
+  min-height: 40%;
+  min-height: 200px;
+  border-radius: 1rem;
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+  overflow: hidden;
+
+  @include tablet {
+    min-width: 40%;
+    min-height: 60%;
+  }
+}
+
+.DetailPage_inform-input {
+  display: flex;
+  flex-direction: column;
+  border: 3px solid #0e1733;
+  margin-right: 1rem;
+  padding: 1rem;
+  padding-right: 3rem;
+  border-radius: 1rem;
+  min-width: 90%;
+  & > h1 {
+    font-size: 3rem;
+    font-weight: bold;
+  }
+  @include tablet {
+    min-width: 40%;
+  }
+}
+
+.DetailPage_inform-closed_season {
+  margin-bottom: 1rem;
+
+  & > h1 {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+  & > p {
+    opacity: 0.5;
+  }
+}
+
+.DetailPage_inform-toxicyty {
+  & > h1 {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+  & > p {
+    opacity: 0.5;
+  }
+}
+
+.DetailPage_description {
+  padding: 0.5rem;
+  flex-grow: 1;
+  margin-top: 1rem;
+
+  & > h1 {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+  & > p {
+    opacity: 0.5;
+  }
+}
+
+.DetailPage_line {
+  width: 100%;
+  height: 1px;
+  background-color: black;
+  margin-bottom: 1rem;
+}
+
+.DetailPage_closed {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 5px;
+  right: 5px;
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 50%;
+  background-color: gray;
+  cursor: pointer;
+  font-size: 1.5rem;
+  &:hover {
+    opacity: 0.9;
+    background-color: #0e1733;
+    color: white;
+  }
+}
+
+@keyframes showEncyclopedia {
+  0% {
+    opacity: 0.3;
+    transform: translateY(-50px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}

frontend/src/components/DetailFishList/index.tsx

@@ -0,0 +1,67 @@
+import { fishInform } from '@/mocks/handlers';
+import React from 'react';
+import './index.scss';
+
+interface fishInfromProps extends fishInform {
+  setModal: React.Dispatch<React.SetStateAction<boolean>>;
+  modal: boolean;
+}
+
+const DetaiFish = ({
+  fish_type,
+  toxicyty,
+  image,
+  closed_season,
+  description,
+  setModal,
+  modal,
+}: fishInfromProps) => {
+  const closeModal = (e: any) => {
+    if (
+      e.target.className !== 'DetailPage_inform' &&
+      e.target.className == 'DetailPage'
+    ) {
+      setModal(!modal);
+    } else if (e.target.className == 'DetailPage_closed') {
+      setModal(!modal);
+    }
+  };
+  return (
+    <div onClick={(e) => closeModal(e)} className="DetailPage">
+      <div className="DetailPage_inform">
+        <div
+          className="DetailPage_inform-img"
+          style={{
+            backgroundImage: `url(${image})`,
+            backgroundSize: 'cover',
+          }}
+        ></div>
+        <div className="DetailPage_inform-input">
+          <h1>{fish_type}</h1>
+          <div className="DetailPage_line"></div>
+          <div className="DetailPage_inform-closed_season">
+            <h1>서식기간</h1>
+            <p>{closed_season}</p>
+          </div>
+          <div className="DetailPage_inform-toxicyty">
+            <h1>이거... 먹을 수 있는건가요?</h1>
+            <p>
+              {toxicyty == 'yes'
+                ? '네 맛있게드세요.'
+                : '아니요 ! 먹으면 안돼요!'}
+            </p>
+          </div>
+          <div className="DetailPage_description">
+            <h1>설명</h1>
+            <p> {description}</p>
+          </div>
+        </div>
+        <span onClick={(e) => closeModal(e)} className="DetailPage_closed">
+          X
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default DetaiFish;